首页增加提示类tab,B类指标页优化,我的-增加业务员日常工作统计

src/views/home/hintTabPage/hintDetail.vue

@@ -13,13 +13,13 @@
       </van-tabs>
       <van-tabs
         class="myTab"
-        v-model="activePantoneTabName"
+        v-model="activeTabPantoneName"
         color="#0057ba"
-        @change="tabChange"
+        @change="tabChangePantone"
         v-if="activeTabName == 'pantone'">
         <van-tab
-          :title="item.title"
-          :name="item.name"
+          :title="item.materialDataName"
+          :name="index"
           v-for="(item, index) in tabsItemPantone"
           :key="index"></van-tab>
       </van-tabs>
@@ -79,6 +79,7 @@ export default {
       deptId: null,
       fromType: null,
       activeTabName: 'noVisit',
+      activeTabPantoneName: 0,
       tabsItem: [
         {
           title: '未拜访',
@@ -235,7 +236,7 @@ export default {
     this.empLevel = this.userInfo.empLevel;
     this.firstLabel = this.empLevel == '1' ? '组织名称/大区主管' : '销售部主管';
     this.fromType = this.$route.query.fromType; // fromType: 'noVisit':未拜访; 'createStore':建店; 'pantone':色卡
-    this.tableColumn = this[this.fromType];
+    this.tableColumn = this[this.fromType]; //初始化表格头
     this.activeTabName = this.fromType;
     this.deptId = this.userInfo.deptId; // 当前用户部门id
     this.initData();
@@ -255,6 +256,10 @@ export default {
         this.toggleIndex = this.toggleIndex++;
       }, 2000);
     },
+    tabChangePantone(val) {
+      // activeTabName;
+      // this.tableColumn = this[val];
+    },
     onClickLeft() {
       this.$router.go(-1);
     },
@@ -439,7 +444,7 @@ export default {
             materialTypeId: 139,
             zfxsbNum: '0',
             mdwqsNum: '0',
-            materialDataName: '1988色卡',
+            materialDataName: '1988色卡1',
             materialCode: 'WL20240904063',
             warehouseName: '吴康',
             warehouseCode: '00040681',
@@ -453,7 +458,7 @@ export default {
             materialTypeId: 139,
             zfxsbNum: '0',
             mdwqsNum: '0',
-            materialDataName: '1988色卡',
+            materialDataName: '1988色卡2',
             materialCode: 'WL20240904063',
             warehouseName: '朱彬',
             warehouseCode: '00044125',
@@ -467,7 +472,7 @@ export default {
             materialTypeId: 139,
             zfxsbNum: '0',
             mdwqsNum: '0',
-            materialDataName: '1988色卡',
+            materialDataName: '1988色卡3',
             materialCode: 'WL20240904063',
             warehouseName: '岳阿龙',
             warehouseCode: '00044633',
@@ -476,6 +481,7 @@ export default {
         ],
       };
       this.tabsItemPantone = resData.colorCardList;
+      this.tableList = resData.colorCardList;
       // getReportMaterialType({materialCode:this.$route.query.materialCode}).then((res)=>{})
     },
   },

src/views/home/hintTabPage/index.vue

@@ -91,7 +91,7 @@
               <span class="itemTitle">{{ pantone.title }}</span>
               <el-popover placement="right" trigger="click" popper-class="hintPopover">
                 <div class="popoverConten">
-                  {{ pantone.pantoneData.tip }}
+                  {{ pantone.tip }}
                 </div>
                 <div slot="reference" class="hintIconBox">
                   <img class="hintIcon" :src="hintIcon" />
@@ -99,57 +99,59 @@
               </el-popover>
             </div>
           </template>
-          <div class="reportContent">
+          <div class="pantoneContent">
             <template v-if="empLevel == '3'">
               <div v-for="(val, key, index) in pantone.pantoneData" :key="index">
-                <div class="title">{{ (val, key) }}</div>
-              </div>
-              <!-- <div class="reportPantone">
-                <div class="firstItem">
-                  <div class="left">
-                    <div class="lebel">已领用</div>
-                    <div class="value">{{ val.ywyylyNum }}</div>
-                  </div>
-                  <div class="right">
-                    <div class="lebel">已发放门店</div>
-                    <div class="value">{{ val.ywyyffNum }}</div>
-                  </div>
-                </div>
-                <div class="secondItem">
-                  <div class="left">
-                    <div class="lebel">门店未签收</div>
-                    <div class="value">{{ val.mdwqsNum }}</div>
+                <div class="title">{{ key }}</div>
+                <div class="pantoneItem">
+                  <div class="firstItem item">
+                    <div class="left">
+                      <div class="lebel">已领用：</div>
+                      <div class="value">{{ val.ywyylyNum }}</div>
+                    </div>
+                    <div class="right">
+                      <div class="lebel">已发放门店：</div>
+                      <div class="value">{{ val.ywyyffNum }}</div>
+                    </div>
                   </div>
-                  <div class="right">
-                    <div class="lebel">门店未签收</div>
-                    <div class="value" @click="pantoneClick">{{ val.wqsmdNum }}</div>
+                  <div class="secondItem item">
+                    <div class="left">
+                      <div class="lebel">门店未签收：</div>
+                      <div class="value">{{ val.mdwqsNum }}</div>
+                    </div>
+                    <div class="right">
+                      <div class="lebel">门店未签收：</div>
+                      <div class="value valueIsClick" @click="pantoneClick">{{ val.wqsmdNum }}</div>
+                    </div>
                   </div>
                 </div>
-              </div> -->
+              </div>
             </template>
             <template v-if="empLevel == '2'">
               <div v-for="(val, key, index) in pantone.pantoneData" :key="index">
                 <div class="title">{{ key }}</div>
-              </div>
-              <div class="reportPantone">
-                <div class="firstItem">
-                  <div class="left">
-                    <div class="lebel">直发销售部数</div>
-                    <div class="value">{{ val.zfxsbNum }}</div>
-                  </div>
-                  <div class="right">
-                    <div class="lebel">业务员已领用</div>
-                    <div class="value">{{ val.ywyylyNum }}</div>
-                  </div>
-                </div>
-                <div class="secondItem">
-                  <div class="left">
-                    <div class="lebel">业务员已发放</div>
-                    <div class="value">{{ val.ywyyffNum }}</div>
+                <div class="pantoneItem">
+                  <div class="firstItem item">
+                    <div class="left">
+                      <div class="lebel">直发销售部数：</div>
+                      <div class="value">{{ val.zfxsbNum }}</div>
+                    </div>
+                    <div class="right">
+                      <div class="lebel">业务员已领用：</div>
+                      <div class="value">{{ val.ywyylyNum }}</div>
+                    </div>
                   </div>
-                  <div class="right">
-                    <div class="lebel">门店未签收</div>
-                    <div class="value" @click="pantoneClick(val)">{{ val.wqsmdNum }}</div>
+                  <div class="secondItem item">
+                    <div class="left">
+                      <div class="lebel">业务员已发放：</div>
+                      <div class="value">{{ val.ywyyffNum }}</div>
+                    </div>
+                    <div class="right">
+                      <div class="lebel">门店未签收：</div>
+                      <div class="value valueIsClick" @click="pantoneClick(val)">
+                        {{ val.wqsmdNum }}
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -374,30 +376,6 @@ export default {
         tip: '',
         pantoneData: {},
       },
-      pantoneItem: [
-        // 业务员
-        {
-          firstRowLLabel: '已领用',
-          firstRowLProp: 'firstRowLProp',
-          firstRowRLabel: '已发放门店',
-          firstRowRProp: 'firstRowRProp',
-          secondRowLLabel: '门店未签收',
-          secondRowLProp: 'secondRowLProp',
-          secondRowRLabel: '门店未签收',
-          secondRowRProp: 'secondRowRProp',
-        },
-        // 销售部主管
-        {
-          firstRowLLabel: '直发销售部数',
-          firstRowLProp: 'firstRowLProp',
-          firstRowRLabel: '业务员已领用',
-          firstRowRProp: 'firstRowRProp',
-          secondRowLLabel: '业务员已发放',
-          secondRowLProp: 'secondRowLProp',
-          secondRowRLabel: '门店未签收',
-          secondRowRProp: 'secondRowRProp',
-        },
-      ],
     };
   },
   activated() {
@@ -528,12 +506,12 @@ export default {
     margin-bottom: 10px;
     border-radius: 5px;
     .itemHeader {
-      width: 150px;
+      /* width: 150px; */
       color: #0057ba;
       font-weight: 500;
       font-size: 16px;
       padding: 10px 0;
-      display: flex;
+      display: inline-flex;
       align-items: center;
       .itemTitle {
         margin-right: 10px;
@@ -571,6 +549,40 @@ export default {
         }
       }
     }
+    /* 色卡 */
+    .pantoneContent {
+      padding-bottom: 10px;
+      .title {
+        padding: 2px 5px;
+        border-radius: 2px;
+        background-color: #13b5b1;
+        margin: 4px 0;
+        display: inline-block;
+        color: #fff;
+      }
+      .pantoneItem {
+        .item {
+          display: flex;
+          justify-content: space-between;
+          .left {
+            display: flex;
+          }
+          .right {
+            display: flex;
+            width: 40%;
+            justify-content: left;
+            .valueIsClick {
+              text-decoration: underline;
+              color: #0057ba;
+            }
+          }
+        }
+        .firstItem {
+        }
+        .secondItem {
+        }
+      }
+    }
   }
 }
 </style>

src/views/home/hintTabPage/visitPage.vue

@@ -6,7 +6,7 @@
         <div class="temList" v-for="(list, ind) in item.visitDetail" :key="ind">
           <div class="itemLeft">
             <div class="label">{{ list.leftTable }}</div>
-            <div class="label">{{ resData[item.titleProp][list.leftProp] }}{{ list.leftUnit }}</div>
+            <div class="label">{{ resData[item.titleProp][list.leftProp] }}</div>
           </div>
           <div class="itemRight">
             <div class="label">{{ list.rightTable }}</div>
@@ -93,7 +93,7 @@ export default {
           flex: 1;
         }
         .itemRight {
-          width: 120px;
+          width: 110px;
           display: flex;
         }
       }