Преглед изворни кода

调整二维码管理视图中的表格列宽,优化信息展示并增加内容居中对齐

wuyi пре 3 дана
родитељ
комит
a863533e8d
1 измењених фајлова са 41 додато и 18 уклоњено
  1. 41 18
      src/views/QrCodeManageView.vue

+ 41 - 18
src/views/QrCodeManageView.vue

@@ -31,7 +31,7 @@ const tableData = ref({
   content: [],
   metadata: {
     page: 0,
-    size: 20,
+    size: 10,
     total: 0
   }
 })
@@ -534,7 +534,7 @@ onMounted(() => {
         </div>
       </template>
 
-      <Column field="qrCode" header="二维码编号" style="min-width: 200px">
+      <Column field="qrCode" header="二维码编号" style="min-width: 120px">
         <template #body="slotProps">
           <div class="flex items-center gap-2">
             <code class="text-sm">{{ slotProps.data.qrCode }}</code>
@@ -542,7 +542,7 @@ onMounted(() => {
           </div>
         </template>
       </Column>
-      <Column field="maintenanceCode" header="维护码" style="min-width: 180px">
+      <Column field="maintenanceCode" header="维护码" style="min-width: 120px">
         <template #body="slotProps">
           <div class="flex items-center gap-2">
             <code class="text-sm">{{ slotProps.data.maintenanceCode || '-' }}</code>
@@ -551,18 +551,24 @@ onMounted(() => {
           </div>
         </template>
       </Column>
-      <Column field="qrType" header="类型" style="min-width: 120px">
+      <Column field="qrType" header="类型" style="min-width: 100px"
+        :pt="{ columnHeaderContent: { class: 'justify-center' } }">
         <template #body="slotProps">
-          <Tag :severity="getTypeConfig(slotProps.data.qrType).severity">
-            <i :class="`pi ${getTypeConfig(slotProps.data.qrType).icon} mr-1`"></i>
-            {{ getTypeConfig(slotProps.data.qrType).label }}
-          </Tag>
+          <div class="text-center">
+            <Tag :severity="getTypeConfig(slotProps.data.qrType).severity">
+              <i :class="`pi ${getTypeConfig(slotProps.data.qrType).icon} mr-1`"></i>
+              {{ getTypeConfig(slotProps.data.qrType).label }}
+            </Tag>
+          </div>
         </template>
       </Column>
-      <Column field="isActivated" header="状态" style="min-width: 100px">
+      <Column field="isActivated" header="状态" style="min-width: 100px"
+        :pt="{ columnHeaderContent: { class: 'justify-center' } }">
         <template #body="slotProps">
-          <Tag :value="getActivatedTag(slotProps.data.isActivated).label"
-            :severity="getActivatedTag(slotProps.data.isActivated).severity" />
+          <div class="text-center">
+            <Tag :value="getActivatedTag(slotProps.data.isActivated).label"
+              :severity="getActivatedTag(slotProps.data.isActivated).severity" />
+          </div>
         </template>
       </Column>
       <Column field="scanCount" header="扫描次数" style="min-width: 100px"
@@ -573,9 +579,20 @@ onMounted(() => {
           </div>
         </template>
       </Column>
-      <Column field="createdAt" header="生成时间" style="min-width: 180px">
+      <Column field="remark" header="备注" style="min-width: 150px"
+        :pt="{ columnHeaderContent: { class: 'justify-center' } }">
         <template #body="slotProps">
-          {{ formatDate(slotProps.data.createdAt) }}
+          <div class="text-center">
+            {{ slotProps.data.remark || '-' }}
+          </div>
+        </template>
+      </Column>
+      <Column field="ownerName" header="拥有者" style="min-width: 120px"
+        :pt="{ columnHeaderContent: { class: 'justify-center' } }">
+        <template #body="slotProps">
+          <div class="text-center">
+            {{ slotProps.data.ownerName || '-' }}
+          </div>
         </template>
       </Column>
       <Column field="activatedAt" header="激活时间" style="min-width: 180px">
@@ -588,7 +605,13 @@ onMounted(() => {
           {{ formatDate(slotProps.data.lastScanAt) }}
         </template>
       </Column>
-      <Column header="操作" style="min-width: 350px" :pt="{ columnHeaderContent: { class: 'justify-center' } }">
+      <Column field="createdAt" header="生成时间" style="min-width: 180px">
+        <template #body="slotProps">
+          {{ formatDate(slotProps.data.createdAt) }}
+        </template>
+      </Column>
+      <Column header="操作" frozen alignFrozen="right" style="min-width: 350px"
+        :pt="{ columnHeaderContent: { class: 'justify-center' } }">
         <template #body="slotProps">
           <div class="flex gap-1 justify-center">
             <Button icon="pi pi-eye" severity="info" size="small" text rounded v-tooltip.top="'查看详情'"
@@ -778,8 +801,7 @@ onMounted(() => {
           @click="copyToClipboard(currentQrCodeUrl)" v-tooltip.top="'点击复制'">
           {{ currentQrCodeUrl }}
         </div>
-        <div
-          v-if="currentMaintenanceCode && currentMaintenanceCode !== 'unknown'"
+        <div v-if="currentMaintenanceCode && currentMaintenanceCode !== 'unknown'"
           class="font-mono text-xs break-all bg-gray-100 dark:bg-gray-800 p-3 rounded cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
           @click="copyToClipboard(currentMaintenanceCode)" v-tooltip.top="'点击复制'">
           维护码:{{ currentMaintenanceCode }}
@@ -969,9 +991,10 @@ onMounted(() => {
             </div>
           </div>
         </div>
-        
+
         <!-- 已激活,未绑定信息 -->
-        <div v-else-if="qrCodeDetail.isActivated && !qrCodeDetail.info" class="border rounded p-4 text-center text-gray-500">
+        <div v-else-if="qrCodeDetail.isActivated && !qrCodeDetail.info"
+          class="border rounded p-4 text-center text-gray-500">
           <i class="pi pi-info-circle text-2xl mb-2"></i>
           <div>该二维码已激活,但未填写关联信息</div>
         </div>