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

src/views/home/hintTabPage/hintDetail.vue

@@ -64,6 +64,7 @@
           </el-table-column>
         </el-table-column>
       </el-table>
+      <div class="mask" v-if="maskShow"><van-loading type="spinner" color="#1989fa" /></div>
     </div>
   </div>
 </template>
@@ -165,11 +166,11 @@ export default {
           childredColumn: [
             {
               label: '(7天未完工)',
-              prop: 'jinPaiAbnormalNum',
+              prop: 'jinPaiUnfinishedNum',
             },
             {
               label: '(30天未结案)',
-              prop: 'jinPaiUnfinishedNum',
+              prop: 'jinPaiAbnormalNum',
             },
           ],
         },
@@ -241,10 +242,11 @@ export default {
         },
       ],
       materialCode: null, //色卡物料来源
-      // rowKey: 'id', //tab row-key
+      maskShow: true,
     };
   },
   watch: {
+    // 监听tab切换的状态
     fromType: {
       handler(newVal) {
         this.tableColumn = this[newVal]; //表格头
@@ -252,9 +254,9 @@ export default {
       },
       immediate: true,
     },
+    // 初始化监听fromType，不同类型显示不同的tabItem
     '$route.query.fromType': {
       handler(newVal) {
-        // debugger;
         if (newVal) this.setTabsItem();
       },
       immediate: true,
@@ -264,8 +266,6 @@ 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.activeTabName = this.fromType;
     this.deptId = this.userInfo.deptId; // 当前用户部门id
     this.activaPantoneName = this.$route.query.pantoneName; //当前色卡
     this.materialCode = this.$route.query.materialCode; // 色卡code
@@ -286,32 +286,39 @@ export default {
           name: 'createStore',
         },
       ];
-      if (this.empLevel == '1' || this.empLevel == '2') {
+      // 大区主管2销售部主管3，显示色卡
+      if (this.userInfo.empLevel == '1' || this.userInfo.empLevel == '2') {
         this.tabsItem.push({
           title: '色卡',
           name: 'pantone',
         });
       }
     },
+    /**
+     * 初始化数据和搜索操作接口的入口
+     * @param {*function} resolve //子级数据数据回调
+     * @param {*object} tree //展开时当前节点数据
+     * */
     initData(resolve, tree) {
-      this.toggleIndex = this.toggleIndex++;
+      // 请求子级数据时不需要loading
+      if (!resolve && !tree) {
+        this.toggleIndex = this.toggleIndex++;
+        this.maskShow = true;
+      }
       if (this.fromType == 'noVisit') {
         // 未拜访
         this.deptId = tree ? tree.onlyId : this.userInfo.deptId;
         this.firstProp = 'onlyName';
-        // this.rowKey = 'onlyId';
         this.selectNoVisitsInfoFun(resolve);
       } else if (this.fromType == 'createStore') {
         // 建店
         this.deptId = tree ? tree.onlyId : this.userInfo.deptId;
         this.firstProp = 'onlyName';
-        // this.rowKey = 'onlyId';
         this.selectPendingCasesInfoFun(resolve);
       } else if (this.fromType == 'pantone') {
         // 色卡
         this.firstProp = 'warehouseName';
         let empLevel = tree ? tree.empLevel : null;
-        // this.rowKey = 'id';
         this.getPantoneData(resolve, empLevel);
       }
     },
@@ -345,9 +352,11 @@ export default {
           if (resolve) {
             resolve && resolve(res.data);
           } else {
+            this.maskShow = false;
             this.tableList = res.data;
           }
         } else {
+          this.maskShow = false;
           this.Toast({
             message: res.msg,
             duration: 5000,
@@ -366,9 +375,11 @@ export default {
           if (resolve) {
             resolve && resolve(res.data);
           } else {
+            this.maskShow = false;
             this.tableList = res.data;
           }
         } else {
+          this.maskShow = false;
           this.Toast({
             message: res.msg,
             duration: 5000,
@@ -407,9 +418,11 @@ export default {
           if (resolve) {
             resolve && resolve(res.data.colorCardList);
           } else {
+            this.maskShow = false;
             this.tableList = res.data.colorCardList;
           }
         } else {
+          this.maskShow = false;
           this.Toast({
             message: res.msg,
             duration: 5000,
@@ -446,6 +459,7 @@ export default {
         overflow: hidden;
         padding-bottom: 20px;
         background: #fff;
+        position: relative;
         .el-table {
           overflow: hidden;
           height: 100%;
@@ -456,6 +470,16 @@ export default {
             flex: 1;
           }
         }
+        .mask {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          background: rgba(255, 255, 255, 0.8);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
       }
     }
   }

src/views/home/hintTabPage/index.vue

@@ -304,13 +304,13 @@ export default {
               {
                 leftTable: '本月累计：',
                 leftProp: 'month',
-                leftUnit: '%',
+                leftUnit: '家',
                 leftIsClick: false,
               },
               {
                 leftTable: '今年累计：',
                 leftProp: 'year',
-                leftUnit: '%',
+                leftUnit: '家',
                 leftIsClick: false,
                 rightTable: '45天未结案：',
                 rightProp: 'keKongAbnormalNum',
@@ -327,7 +327,7 @@ export default {
               {
                 leftTable: '本月累计：',
                 leftProp: 'month',
-                leftUnit: '%',
+                leftUnit: '家',
                 leftIsClick: false,
                 rightTable: '7天未完工：',
                 rightProp: 'jinPaiAbnormalNum',
@@ -337,7 +337,7 @@ export default {
               {
                 leftTable: '今年累计：',
                 leftProp: 'year',
-                leftUnit: '%',
+                leftUnit: '家',
                 leftIsClick: false,
                 rightTable: '30天未结案：',
                 rightProp: 'jinPaiUnfinishedNum',
@@ -354,13 +354,13 @@ export default {
               {
                 leftTable: '本月累计：',
                 leftProp: 'month',
-                leftUnit: '%',
+                leftUnit: '家',
                 leftIsClick: false,
               },
               {
                 leftTable: '今年累计：',
                 leftProp: 'year',
-                leftUnit: '%',
+                leftUnit: '家',
                 leftIsClick: false,
                 rightTable: '30天未结案：',
                 rightProp: 'tongAAbnormalNum',
@@ -377,13 +377,13 @@ export default {
               {
                 leftTable: '本月累计：',
                 leftProp: 'month',
-                leftUnit: '%',
+                leftUnit: '家',
                 leftIsClick: false,
               },
               {
                 leftTable: '今年累计：',
                 leftProp: 'year',
-                leftUnit: '%',
+                leftUnit: '家',
                 leftIsClick: false,
                 rightTable: '30天未结案：',
                 rightProp: 'tongBAbnormalNum',
@@ -497,10 +497,12 @@ export default {
 </script>
 <style lang="scss" scoped>
 .hintTabPage {
-  padding: 10px;
+  padding: 6px;
+  /* padding: 10px; */
   .itemTab {
     /* background: #fff; */
-    padding: 10px;
+    padding: 8px;
+    /* padding: 10px; */
     margin-bottom: 10px;
     border-radius: 5px;
     .itemHeader {
@@ -598,11 +600,11 @@ export default {
 .hintTabPage {
   .itemTab {
     .van-cell {
-      padding: 0 16px;
+      padding: 0 8px;
       align-items: center;
     }
     .van-collapse-item__content {
-      padding: 0 16px;
+      padding: 0 8px;
     }
   }
 }

src/views/home/hintTabPage/visitPage.vue

@@ -1,16 +1,17 @@
 <template>
-  <div class="visitPage" v-if="resData">
+  <div class="visitPage">
     <div class="storeType" v-for="(item, index) in contentData" :key="index">
       <div class="title" :style="{ background: item.bagColor }">{{ item.title }}</div>
       <div class="itemContent">
-        <div class="temList" v-for="(list, ind) in item.visitDetail" :key="ind">
+        <div class="temList" v-for="(list, ind) in item.visitDetail" :key="ind" v-if="resData">
           <div class="itemLeft">
             <div class="label">{{ list.leftTable }}</div>
             <div class="label">
-              {{ resData[item.titleProp][list.leftProp] }}
+              {{ resData[item.titleProp][list.leftProp]
+              }}<span class="unit" v-if="fromType == 'createStore'">{{ list.leftUnit }}</span>
             </div>
           </div>
-          <div class="itemRight" :style="{ width: fromType == 'noVisit' ? '110px' : '130px' }">
+          <div class="itemRight" :style="{ width: fromType == 'noVisit' ? '130px' : '140px' }">
             <div class="label">{{ list.rightTable }}</div>
             <div class="label" :style="labelStyle(list)" @click="onClick(item, list)">
               {{ resData[item.titleProp][list.rightProp] }}{{ list.rightUnit }}
@@ -93,7 +94,7 @@ export default {
     .title {
       color: #fff;
       height: 21px;
-      margin-right: 10px;
+      margin-right: 6px;
       width: 50px;
       text-align: center;
       line-height: 21px;