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

src/api/index.js

@@ -829,7 +829,25 @@ export function getMobileUserInfo(query) {
 // 各部门未拜访门店数量
 export function selectNoVisitsInfo(query) {
   return request({
-    url: 'mobile/storeStatistics/selectNoVisitsInfo',
+    url: '/mobile/storeStatistics/selectNoVisitsInfo',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 提示类页签-色卡查询接口
+export function getReportMaterial(query) {
+  return request({
+    url: '/mobile/reportMobile/getReportMaterial',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 提示类页签-查询下属业务员色卡指标接口
+export function getReportMaterialType(query) {
+  return request({
+    url: '/mobile/reportMobile/getReportMaterialType',
     method: 'get',
     params: query,
   });

src/permission.js

@@ -15,7 +15,7 @@ router.beforeEach((to, from, next) => {
           next();
         })
         .catch(() => {
-          //   next('/');
+          next();
         });
     } else {
       next();

src/store/modules/user.js

@@ -18,6 +18,11 @@ const user = {
         getMobileUserInfo()
           .then((res) => {
             commit('SET_USER_INFO', res.data);
+            localStorage.setItem('nickName', res.data.nickName);
+            localStorage.setItem('postName', res.data.postName);
+            localStorage.setItem('zipPhoto', res.data.zipPhoto);
+            localStorage.setItem('deptLevel', res.data.depts[0].deptLevel);
+            localStorage.setItem('userId', res.data.userId);
             resolve();
           })
           .catch((error) => {

src/utils/request.js

@@ -2,60 +2,63 @@
  * 封装的axios的工具类
  * 负责请求的公共配置,以及请求拦截,响应拦截,错误处理,网络不佳处理
  */
-import axios from 'axios'
-import {Toast,Dialog} from 'vant';
-import errorCode from '@/utils/errorCode'
+import axios from 'axios';
+import { Toast, Dialog } from 'vant';
+import errorCode from '@/utils/errorCode';
 
-axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
 const service = axios.create({
-    baseURL: process.env.VUE_APP_BASE_API,
-    timeout: 30000,
-    withCredentials: true
+  baseURL: process.env.VUE_APP_BASE_API,
+  timeout: 30000,
+  withCredentials: true,
 });
 // request拦截器
-service.interceptors.request.use(config => {
-    config.headers['userId'] = localStorage.getItem("loginName")
-    return config
-}, error => {
-    Promise.reject(error)
-})
+service.interceptors.request.use(
+  (config) => {
+    config.headers['userId'] = localStorage.getItem('loginName');
+    return config;
+  },
+  (error) => {
+    Promise.reject(error);
+  }
+);
 
 // 响应拦截器
-service.interceptors.response.use(res => {
-
-        const code = res.data.code || 200;
-        const msg = errorCode[code] || res.data.msg || errorCode['default']
-        if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
-            return res.data
-        }
-        if (code === 401) {
-            Toast("认证信息未通过");
-        } else if (code === 500) {
-            // Toast({
-            //     message:msg,
-            //     duration:5000
-            // });
-            return res.data
-        } else if (code !== 200) {
-            Toast({
-                message:msg,
-                duration:5000
-            });
-        } else {
-            return res.data
-        }
-    },
-    error => {
-        let {message} = error;
-        if (message == "Network Error") {
-            message = "网络异常";
-        } else if (message.includes("timeout")) {
-            message = "请求超时";
-        } else if (message.includes("Request failed with status code")) {
-            message = "系统接口" + message.substr(message.length - 3) + "异常";
-        }
-        Toast(message);
-        return Promise.reject(error)
+service.interceptors.response.use(
+  (res) => {
+    const code = res.data.code || 200;
+    const msg = errorCode[code] || res.data.msg || errorCode['default'];
+    if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
+      return res.data;
+    }
+    if (code === 401) {
+      Toast('认证信息未通过');
+    } else if (code === 500) {
+      // Toast({
+      //     message:msg,
+      //     duration:5000
+      // });
+      return res.data;
+    } else if (code !== 200) {
+      Toast({
+        message: msg,
+        duration: 5000,
+      });
+    } else {
+      return res.data;
+    }
+  },
+  (error) => {
+    let { message } = error;
+    if (message == 'Network Error') {
+      message = '网络异常';
+    } else if (message.includes('timeout')) {
+      message = '请求超时';
+    } else if (message.includes('Request failed with status code')) {
+      message = '系统接口' + message.substr(message.length - 3) + '异常';
     }
-)
-export default service
+    Toast(message);
+    return Promise.reject(error);
+  }
+);
+export default service;

src/views/home/hintTabPage/hintDetail.vue

@@ -3,14 +3,26 @@
     <div class="header">
       <van-nav-bar class="navBar" title="门店拜访" left-arrow @click-left="onClickLeft" />
     </div>
-    <div class="tab">
-      <van-tabs class="myTab" v-model="activeTabVal" color="#0057ba" @change="tabChange">
+    <div class="tabBox">
+      <van-tabs class="myTab" v-model="activeTabName" color="#0057ba" @change="tabChange">
         <van-tab
           :title="item.title"
           :name="item.name"
           v-for="(item, index) in tabsItem"
           :key="index"></van-tab>
       </van-tabs>
+      <van-tabs
+        class="myTab"
+        v-model="activePantoneTabName"
+        color="#0057ba"
+        @change="tabChange"
+        v-if="activeTabName == 'pantone'">
+        <van-tab
+          :title="item.title"
+          :name="item.name"
+          v-for="(item, index) in tabsItemPantone"
+          :key="index"></van-tab>
+      </van-tabs>
     </div>
     <div class="content">
       <el-table
@@ -53,7 +65,7 @@
   </div>
 </template>
 <script>
-import { selectNoVisitsInfo } from '@/api/index';
+import { selectNoVisitsInfo, getReportMaterialType } from '@/api/index';
 import { mapState } from 'vuex';
 export default {
   computed: {
@@ -66,7 +78,7 @@ export default {
       empLevel: '1',
       deptId: null,
       fromType: null,
-      activeTabVal: 'noVisit',
+      activeTabName: 'noVisit',
       tabsItem: [
         {
           title: '未拜访',
@@ -81,6 +93,8 @@ export default {
           name: 'pantone',
         },
       ],
+      activePantoneTabName: '', //色卡tabName
+      tabsItemPantone: [], //色卡tabItem
       toggleIndex: 0,
       firstLabel: '',
       tableColumn: [],
@@ -167,15 +181,63 @@ export default {
           ],
         },
       ],
+      // 色卡
+      pantone: [
+        {
+          label: '直发销售部',
+          childredColumn: [
+            {
+              label: '(本)',
+              prop: 'zfxsbNum',
+            },
+          ],
+        },
+        {
+          label: '已领用',
+          childredColumn: [
+            {
+              label: '(本)',
+              prop: 'ywyylyNum',
+            },
+          ],
+        },
+        {
+          label: '门店发放',
+          childredColumn: [
+            {
+              label: '(本)',
+              prop: 'ywyyffNum',
+            },
+          ],
+        },
+        {
+          label: '门店未签收',
+          childredColumn: [
+            {
+              label: '(本)',
+              prop: 'mdwqsNum',
+            },
+          ],
+        },
+        {
+          label: '未签收门店',
+          childredColumn: [
+            {
+              label: '(家)',
+              prop: 'wqsmdNum',
+            },
+          ],
+        },
+      ],
     };
   },
   activated() {
-    // this.empLevel = this.userInfo.empLevel;
+    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.deptId = this.userInfo.deptId; // 当前用户部门id
     this.initData();
   },
   methods: {
@@ -184,6 +246,7 @@ export default {
         this.selectNoVisitsInfoFun(this.deptId);
       } else if (this.fromType == 'createStore') {
       } else if (this.fromType == 'pantone') {
+        this.getReportMaterialTypeFun();
       }
     },
     tabChange(val) {
@@ -229,6 +292,7 @@ export default {
       //     }
       //   });
     },
+    // 未拜访
     selectNoVisitsInfoFun() {
       let resData = [
         {
@@ -363,10 +427,69 @@ export default {
       this.tableList = resData;
       //   selectNoVisitsInfo({ deptId: this.deptId }).then((res) => {});
     },
+    // 色卡
+    getReportMaterialTypeFun() {
+      let resData = {
+        colorCardList: [
+          {
+            ywyylyNum: '21',
+            wqsmdNum: '0',
+            materialDataId: 141,
+            ywyyffNum: '21',
+            materialTypeId: 139,
+            zfxsbNum: '0',
+            mdwqsNum: '0',
+            materialDataName: '1988色卡',
+            materialCode: 'WL20240904063',
+            warehouseName: '吴康',
+            warehouseCode: '00040681',
+            materialTypeName: '直发类色卡',
+          },
+          {
+            ywyylyNum: '21',
+            wqsmdNum: '0',
+            materialDataId: 141,
+            ywyyffNum: '21',
+            materialTypeId: 139,
+            zfxsbNum: '0',
+            mdwqsNum: '0',
+            materialDataName: '1988色卡',
+            materialCode: 'WL20240904063',
+            warehouseName: '朱彬',
+            warehouseCode: '00044125',
+            materialTypeName: '直发类色卡',
+          },
+          {
+            ywyylyNum: '22',
+            wqsmdNum: '0',
+            materialDataId: 141,
+            ywyyffNum: '22',
+            materialTypeId: 139,
+            zfxsbNum: '0',
+            mdwqsNum: '0',
+            materialDataName: '1988色卡',
+            materialCode: 'WL20240904063',
+            warehouseName: '岳阿龙',
+            warehouseCode: '00044633',
+            materialTypeName: '直发类色卡',
+          },
+        ],
+      };
+      this.tabsItemPantone = resData.colorCardList;
+      // getReportMaterialType({materialCode:this.$route.query.materialCode}).then((res)=>{})
+    },
   },
 };
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.hintDetail {
+  .tabBox {
+    position: sticky;
+    top: 0px;
+    z-index: 10;
+  }
+}
+</style>
 <style lang="scss">
 .hintDetail {
   .el-table__head .el-table__body {

src/views/home/hintTabPage/index.vue

@@ -84,14 +84,14 @@
             </div>
           </div>
         </van-collapse-item>
-        <!-- 色卡 -->
+        <!-- 色卡 销售员和销售部主管显示-->
         <van-collapse-item name="4" v-if="empLevel == '2' || empLevel == '3'">
           <template #title>
             <div class="itemHeader" @click.stop>
               <span class="itemTitle">{{ pantone.title }}</span>
               <el-popover placement="right" trigger="click" popper-class="hintPopover">
                 <div class="popoverConten">
-                  {{ pantone.tip }}
+                  {{ pantone.pantoneData.tip }}
                 </div>
                 <div slot="reference" class="hintIconBox">
                   <img class="hintIcon" :src="hintIcon" />
@@ -99,13 +99,69 @@
               </el-popover>
             </div>
           </template>
+          <div class="reportContent">
+            <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>
+                  <div class="right">
+                    <div class="lebel">门店未签收</div>
+                    <div class="value" @click="pantoneClick">{{ val.wqsmdNum }}</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>
+                  <div class="right">
+                    <div class="lebel">门店未签收</div>
+                    <div class="value" @click="pantoneClick(val)">{{ val.wqsmdNum }}</div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
         </van-collapse-item>
       </van-collapse>
     </div>
   </div>
 </template>
 <script>
-import { getReportTarget } from '@/api/index';
+import { getReportTarget, getReportMaterial } from '@/api/index';
 import hintIcon from '@/assets/hintIcon.png';
 import visitPage from './visitPage.vue';
 import { mapState } from 'vuex';
@@ -307,7 +363,7 @@ export default {
             ],
           },
         ],
-        resData: {},
+        resData: null,
       },
       report: {
         title: '',
@@ -315,9 +371,10 @@ export default {
       },
       pantone: {
         title: '色卡',
+        tip: '',
         pantoneData: {},
       },
-      pantoneData: [
+      pantoneItem: [
         // 业务员
         {
           firstRowLLabel: '已领用',
@@ -341,11 +398,10 @@ export default {
           secondRowRProp: 'secondRowRProp',
         },
       ],
-      pantoneData: null,
     };
   },
   activated() {
-    debugger;
+    if (!this.userInfo) return;
     this.empLevel = this.userInfo.empLevel;
     // 获取拜访数据
     this.getVisitCollapseData();
@@ -379,9 +435,9 @@ export default {
           visitRateThisMonth: '27.0%',
         },
       };
-      this.visitCollapse.collapseLosding = false;
-      this.visitCollapse.tipsPopoverlabel = resData.reminderContent;
       this.visitCollapse.resData = resData;
+      this.visitCollapse.tipsPopoverlabel = resData.reminderContent;
+      this.visitCollapse.collapseLosding = false;
     },
     getReportData() {
       if (this.empLevel == '1') {
@@ -402,7 +458,41 @@ export default {
         this.report.reportData = res.data || {};
       });
     },
-    getPantoneData() {},
+    getPantoneData() {
+      let resData = {
+        ColorCard1988: {
+          materialDataId: 141,
+          ywyylyNum: 64,
+          wqsmdNum: 0,
+          ywyyffNum: 64,
+          materialTypeId: 139,
+          deptId: 1105,
+          materialDataName: '1988色卡',
+          zfxsbNum: 64,
+          mdwqsNum: 0,
+          materialCode: 'WL20240904063',
+          materialTypeName: '直发类色卡',
+        },
+        ColorCard388: {
+          materialDataId: 140,
+          ywyylyNum: 174,
+          wqsmdNum: 2,
+          ywyyffNum: 173,
+          materialTypeId: 139,
+          deptId: 1105,
+          materialDataName: '趋势经典色卡384',
+          zfxsbNum: 279,
+          mdwqsNum: 5,
+          materialCode: 'WL20240904062',
+          materialTypeName: '直发类色卡',
+        },
+        tip: '2024年色卡累计发放情况',
+      };
+      this.pantone.tip = resData.tip;
+      this.pantone.pantoneData = resData;
+      delete this.pantone.pantoneData.tip;
+      // getReportMaterial().then((res)=>{})
+    },
     // 汇报下属详情-点击
     reportClick(type) {
       if (type == 'fillingRate') {
@@ -413,6 +503,19 @@ export default {
         this.$router.push({ path: 'subordinateHistoricalDaily' });
       }
     },
+    // 色卡查看详情
+    pantoneClick(val) {
+      // 业务员进入未拜访列表
+      if (this.empLevel == '3') {
+        this.$router.push({ path: '/noVIsit' });
+      } else if (this.empLevel == '2') {
+        // 销售部主管
+        this.$router.push({
+          path: '/hintDetail',
+          query: { fromType: 'pantone', materialCode: val.materialCode }, // materialCode物料来源
+        });
+      }
+    },
   },
 };
 </script>

src/views/home/hintTabPage/visitPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="visitPage">
+  <div class="visitPage" v-if="resData">
     <div class="storeType" v-for="(item, index) in contentData" :key="index">
       <div class="title" :style="{ background: item.bagColor }">{{ item.title }}</div>
       <div class="itemContent">