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

src/views/finance/index.vue

@@ -166,10 +166,18 @@
         </el-form>
         <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>
@@ -381,10 +389,18 @@
         </el-form>
         <el-table :data="secondData" :height="tableHeight" style="width: 100%; margin-top: 20px;" highlight-current-row>
           <el-table-column prop="orderNo" label="订单号" width="180"></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>
@@ -493,7 +509,11 @@
         </el-form>
         <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 slot-scope="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>
@@ -628,10 +648,16 @@
         <el-table :data="forthData" :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">
+            <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">
+              <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="companyName" label="保险公司" width="120"></el-table-column>
@@ -800,7 +826,30 @@ const handleCurrentChange = (page) => {
   pages.value = page
   initData(activeName.value)
 }
-
+// 人员类型匹配
+const attrTypeTag = (name: string) => {
+  console.log(name)
+  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'
+}
 // 是否高级搜索
 let isTrue = ref(false)