财务订单审核-我的审核tab页业务员类型和订单类型加颜色状态区分

src/views/finance/audit.vue

@@ -168,10 +168,18 @@
         <el-table :data="firstData" :height="tableHeight"
           style="width: 100%; margin-top: 20px;" highlight-current-row>
           <el-table-column prop="orderNo" label="订单号" width="120"></el-table-column>
-          <el-table-column prop="attrType" label="业务员类型" width="120"></el-table-column>
+          <el-table-column prop="attrType" label="业务员类型" width="120">
+            <template #default="scope">
+              <el-tag :type="attrTypeTag(scope.row.attrType)">{{ scope.row.attrType }}</el-tag>
+            </template>
+          </el-table-column>
           <el-table-column prop="mobile" label="业务员手机号" width="120"></el-table-column>
           <el-table-column prop="name" label="业务员" width="120"></el-table-column>
-          <el-table-column prop="orderType" label="订单类型" width="120"></el-table-column>
+          <el-table-column prop="orderType" label="订单类型" width="120">
+            <template #default="scope">
+              <el-tag :type="orderTypeTag(scope.row.orderType)">{{ scope.row.orderType }}</el-tag>
+            </template>
+          </el-table-column>
           <el-table-column prop="agreementName" label="出单协议" width="120"></el-table-column>
           <el-table-column prop="companyALlName" label="保险公司" width="120"></el-table-column>
           <el-table-column prop="partnerCompanyName" label="保险机构" width="220"></el-table-column>
@@ -378,10 +386,18 @@
         <el-table :data="secondData" :height="tableHeight" style="width: 100%; margin-top: 20px;"
           highlight-current-row>
           <el-table-column prop="orderNo" label="订单号" width="120"></el-table-column>
-          <el-table-column prop="attrType" label="业务员类型" width="120"></el-table-column>
+          <el-table-column prop="attrType" label="业务员类型" width="120">
+            <template #default="scope">
+              <el-tag :type="attrTypeTag(scope.row.attrType)">{{ scope.row.attrType }}</el-tag>
+            </template>
+          </el-table-column>
           <el-table-column prop="mobile" label="业务员手机号" width="120"></el-table-column>
           <el-table-column prop="name" label="业务员" width="120"></el-table-column>
-          <el-table-column prop="orderType" label="订单类型" width="120"></el-table-column>
+          <el-table-column prop="orderType" label="订单类型" width="120">
+            <template #default="scope">
+              <el-tag :type="orderTypeTag(scope.row.orderType)">{{ scope.row.orderType }}</el-tag>
+            </template>
+          </el-table-column>
           <el-table-column prop="agreementName" label="出单协议" width="120"></el-table-column>
           <el-table-column prop="companyALlName" label="保险公司" width="120"></el-table-column>
           <el-table-column prop="partnerCompanyName" label="保险机构" width="220"></el-table-column>
@@ -484,7 +500,11 @@
         <el-table :data="thirdData" :height="tableHeight" style="width: 100%; margin-top: 20px;"
           highlight-current-row>
           <el-table-column prop="orderNo" label="订单号" width="120"></el-table-column>
-          <el-table-column prop="attrType" label="业务员类型" width="120"></el-table-column>
+          <el-table-column prop="attrType" label="业务员类型" width="120">
+              <template #default="scope">
+              <el-tag :type="attrTypeTag(scope.row.attrType)">{{ scope.row.attrType }}</el-tag>
+            </template>
+          </el-table-column>
           <el-table-column prop="mobile" label="业务员手机号" width="120"></el-table-column>
           <el-table-column prop="name" label="业务员" width="120"></el-table-column>
           <el-table-column prop="companyALlName" label="保险公司" width="120"></el-table-column>
@@ -610,17 +630,15 @@
           highlight-current-row>
           <el-table-column prop="orderNo" label="订单号" width="120"></el-table-column>
           <el-table-column prop="attrType" label="业务员类型" width="120">
-            <template #default="scope">
-              {{ scope.row.attrType == '5' ? '团队' : scope.row.attrType == '6' ? '个代' : scope.row.attrType ==
-                '7' ? '渠道' : scope.row.attrType == '8' ? '电销组' : '--' }}
+             <template #default="scope">
+              <el-tag :type="attrTypeTag(scope.row.attrType)">{{ scope.row.attrType }}</el-tag>
             </template>
           </el-table-column>
           <el-table-column prop="mobile" label="业务员手机号" width="120"></el-table-column>
           <el-table-column prop="name" label="业务员" width="120"></el-table-column>
           <el-table-column prop="orderType" label="订单类型" width="120">
-            <template #default="scope">
-              {{ scope.row.orderType == '1' ? '车险录入' : scope.row.orderType == '2' ? '代客录单' : scope.row.orderType ==
-                '3' ? '补录订单' : '--' }}
+             <template #default="scope">
+              <el-tag :type="orderTypeTag(scope.row.orderType)">{{ scope.row.orderType }}</el-tag>
             </template>
           </el-table-column>
           <el-table-column prop="agreementName" label="出单协议" width="120"></el-table-column>
@@ -681,6 +699,29 @@ const formRefMap: Record<string, Ref<FormInstance | undefined>> = {
   '2': formRef2,
   '3': formRef3,
 }
+// 人员类型匹配
+const attrTypeTag = (name: string) => {
+  const map: any = {
+    '个代': 'primary',
+    '渠道': 'success',
+    '团队': 'warning',
+    '电销': 'danger',
+    '工作室管理员': 'info',
+    '合伙人': 'info',
+    '后线人员': 'info',
+    '前线人员': 'info',
+  }
+  return map[name] || 'info'
+}
+// 订单类型匹配
+const orderTypeTag = (name: string) => {
+  const map: any = {
+    '车险录入': 'primary',
+    '补录订单': 'success',
+    '代客录单': 'warning',
+  }
+  return map[name] || 'info'
+}
 const tableHeight = ref(); // 初始化表格高度
 
 const myRouter = useRouter()