Эх сурвалжийг харах

feat: 在发票编码列中添加子单标识,并调整样式以支持标签和链接的并排展示

xieyong 2 долоо хоног өмнө
parent
commit
965293533a

+ 33 - 8
src/views/financialManage/invoiceManage/index.vue

@@ -99,13 +99,16 @@
         </template>
         
         <template v-slot:code="{ row }">
-          <el-link
-            type="primary"
-            :underline="false"
-            @click="handleDetail(row, 'view')"
-          >
-            {{ row.code }}
-          </el-link>
+          <span class="code-cell">
+            <span v-if="row._level > 0" class="sub-order-tag">子</span>
+            <el-link
+              type="primary"
+              :underline="false"
+              @click="handleDetail(row, 'view')"
+            >
+              {{ row.code }}
+            </el-link>
+          </span>
         </template>
       </ele-pro-table>
     </el-card>
@@ -219,7 +222,7 @@
             align: 'center'
           },
           {
-            minWidth: 200,
+            minWidth: 220,
             prop: 'code',
             label: '发票编码',
             slot: 'code',
@@ -526,4 +529,26 @@
       margin-left: 10px;
     }
   }
+
+  /* 子单标识 */
+  .sub-order-tag {
+    display: inline-block;
+    margin-right: 4px;
+    padding: 0 4px;
+    height: 14px;
+    line-height: 14px;
+    font-size: 11px;
+    color: #fff;
+    background-color: #409eff;
+    border-radius: 2px;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+
+  /* code 单元格:保证标签 + 链接单行展示 */
+  .code-cell {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+  }
 </style>