门店拜访任务列表访问速度优化

src/views/signApproval/index.vue

@@ -2,21 +2,25 @@
   <div class="bgcolor">
     <!--        顶部条-->
     <div class="navBarTOP">
-      <van-nav-bar
-          class="navBar"
-          title="流程审批"
-          left-arrow
-          @click-left="onClickLeft"
-      >
+      <van-nav-bar class="navBar" title="流程审批" left-arrow @click-left="onClickLeft">
         <template #right>
           <!--        <span class="navRightBtn"  @click="editorFn">批量审批</span>-->
         </template>
       </van-nav-bar>
       <div class="serchInput">
-        <van-cell  class="monthNow selectcell" :title="companyName"  is-link arrow-direction="down" @click="RegionShow=true"/>
+        <van-cell
+          class="monthNow selectcell"
+          :title="companyName"
+          is-link
+          arrow-direction="down"
+          @click="RegionShow = true" />
       </div>
       <div class="searchDiv">
-        <van-search v-model="param" left-icon="search" show-action placeholder="搜索名称/编号/业务员">
+        <van-search
+          v-model="param"
+          left-icon="search"
+          show-action
+          placeholder="搜索名称/编号/业务员">
           <template #action>
             <div @click="onSearchm">搜索</div>
           </template>
@@ -24,15 +28,23 @@
       </div>
       <van-row>
         <van-col span="18">
-          <van-tabs v-model="isHandle" color="#0057ba"  @change="tabChange">
-            <van-tab title="待审批" name="0" :disabled="disabled"></van-tab>
-            <van-tab title="已审批" name="1" :disabled="disabled"></van-tab>
+          <van-tabs v-model="isHandle" color="#0057ba" @change="tabChange">
+            <van-tab
+              title="待审批"
+              name="0"
+              :disabled="disabled"
+              v-if="userDeptLevel != '4'"></van-tab>
+            <van-tab
+              title="已审批"
+              name="1"
+              :disabled="disabled"
+              v-if="userDeptLevel != '4'"></van-tab>
             <van-tab title="我发起的" name="2" :disabled="disabled"></van-tab>
           </van-tabs>
         </van-col>
-        <van-col span="6" style="text-align: center;margin-top: 10px;" @click="sortFN">
-          <van-icon name="ascending"  v-if="orderByStr=='asc'"  color="#0057ba" size="24"/>
-          <van-icon name="descending" v-if="orderByStr=='desc'"  color="#0057ba" size="24"/>
+        <van-col span="6" style="text-align: center; margin-top: 10px" @click="sortFN">
+          <van-icon name="ascending" v-if="orderByStr == 'asc'" color="#0057ba" size="24" />
+          <van-icon name="descending" v-if="orderByStr == 'desc'" color="#0057ba" size="24" />
         </van-col>
       </van-row>
     </div>
@@ -56,242 +68,319 @@
       <div class="lineGrey"></div>
       <div class="lineGrey"></div>
       <div class="lineGrey"></div>
-      <van-list  v-model="loading" :finished="finished" finished-text="--已经到底了--" @load="onLoad">
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="--已经到底了--"
+        @load="onLoad">
         <van-checkbox-group v-model="radio">
-          <div class="cellcontent brud weekList" v-for="(item,index) in  list" :key="index">
+          <div class="cellcontent brud weekList" v-for="(item, index) in list" :key="index">
             <van-cell is-link>
               <div class="cardContent" @click="approveFn(item)">
-                <div class="title" >
-                  <p class="textLeft" >{{item.storeName}}({{item.storeCode}})</p>
-                  <p class="textRight" v-if="isHandle==0">审批</p></div>
-                <div class="info">类型：{{selectDictLabel(storeTypeList, item.storeCategory)}}</div>
+                <div class="title">
+                  <p class="textLeft">{{ item.storeName }}({{ item.storeCode }})</p>
+                  <p class="textRight" v-if="isHandle == 0">审批</p>
+                </div>
+                <div class="info">
+                  类型：{{ selectDictLabel(storeTypeList, item.storeCategory) }}
+                </div>
                 <div class="info">地址：{{ item.addressLine }}</div>
-                <div class="info">流程类型：{{item.modelName}}</div>
-                <div class="info">提交人：{{item.applyUserName}}</div>
-                <div class="info" v-if="item.isHandle==0">提交时间：{{item.applyTime}}
-                  <van-tag plain type="primary" size="medium" v-if="item.status==1" style="float: right">待审批</van-tag>
-                  <van-tag plain type="success"  size="medium" v-if="item.status==2" style="float: right">审批通过</van-tag>
-                  <van-tag plain type="danger"  size="medium" v-if="item.status==3" style="float: right">审批拒绝</van-tag>
+                <div class="info">流程类型：{{ item.modelName }}</div>
+                <div class="info">提交人：{{ item.applyUserName }}</div>
+                <div class="info" v-if="item.isHandle == 0">
+                  提交时间：{{ item.applyTime }}
+                  <van-tag
+                    plain
+                    type="primary"
+                    size="medium"
+                    v-if="item.status == 1"
+                    style="float: right"
+                    >待审批</van-tag
+                  >
+                  <van-tag
+                    plain
+                    type="success"
+                    size="medium"
+                    v-if="item.status == 2"
+                    style="float: right"
+                    >审批通过</van-tag
+                  >
+                  <van-tag
+                    plain
+                    type="danger"
+                    size="medium"
+                    v-if="item.status == 3"
+                    style="float: right"
+                    >审批拒绝</van-tag
+                  >
                 </div>
-                <div class="info" v-if="item.isHandle==1">审批时间：{{item.todoTime}}
-                  <van-tag plain type="primary" size="medium" v-if="item.status==1" style="float: right">待审批</van-tag>
-                  <van-tag plain type="success"  size="medium" v-if="item.status==2" style="float: right">审批通过</van-tag>
-                  <van-tag plain type="danger"  size="medium" v-if="item.status==3" style="float: right">审批拒绝</van-tag>
+                <div class="info" v-if="item.isHandle == 1">
+                  审批时间：{{ item.todoTime }}
+                  <van-tag
+                    plain
+                    type="primary"
+                    size="medium"
+                    v-if="item.status == 1"
+                    style="float: right"
+                    >待审批</van-tag
+                  >
+                  <van-tag
+                    plain
+                    type="success"
+                    size="medium"
+                    v-if="item.status == 2"
+                    style="float: right"
+                    >审批通过</van-tag
+                  >
+                  <van-tag
+                    plain
+                    type="danger"
+                    size="medium"
+                    v-if="item.status == 3"
+                    style="float: right"
+                    >审批拒绝</van-tag
+                  >
                 </div>
                 <!--            <van-checkbox :name="item" v-if="isHandle=='0'"  shape="square" style="float: right"></van-checkbox>-->
               </div>
             </van-cell>
           </div>
         </van-checkbox-group>
-        <van-empty description="" v-if="list.length==0"/>
+        <van-empty description="" v-if="list.length == 0" />
       </van-list>
     </div>
-    <van-popup
-        v-model="submitShow"
-        position="bottom"
-        closeable
-        :style="{ height: '50%' }"
-    >
+    <van-popup v-model="submitShow" position="bottom" closeable :style="{ height: '50%' }">
       <div>
-        <p style="text-align: center;padding-bottom: 16px;border-bottom: 1px solid #f5f5f5;font-size: 16px;">审批意见</p>
-        <van-field
-            v-model="blackReason"
-            rows="6"
-            type="textarea"
-            placeholder="请输入审批意见"
-        />
-        <br>
-        <van-row gutter="20" style="padding: 10px;">
+        <p
+          style="
+            text-align: center;
+            padding-bottom: 16px;
+            border-bottom: 1px solid #f5f5f5;
+            font-size: 16px;
+          ">
+          审批意见
+        </p>
+        <van-field v-model="blackReason" rows="6" type="textarea" placeholder="请输入审批意见" />
+        <br />
+        <van-row gutter="20" style="padding: 10px">
           <van-col span="12">
-            <van-button style="width:100%;" plain type="info" class=" E-bgBlue BtnBorder" @click="outFn">驳回</van-button>
+            <van-button
+              style="width: 100%"
+              plain
+              type="info"
+              class="E-bgBlue BtnBorder"
+              @click="outFn"
+              >驳回</van-button
+            >
           </van-col>
           <van-col span="12">
-            <van-button style="width: 100%;" plain type="info" class=" E-bgBlue Btn" @click="submit">同意</van-button>
+            <van-button style="width: 100%" plain type="info" class="E-bgBlue Btn" @click="submit"
+              >同意</van-button
+            >
           </van-col>
         </van-row>
       </div>
     </van-popup>
     <van-popup v-model="RegionShow" capture position="bottom">
       <van-picker
-          show-toolbar
-          :columns="moduleList"
-          value-key="name"
-          @confirm="onregionConfirm"
-          @cancel="RegionShow = false"
-      />
+        show-toolbar
+        :columns="moduleList"
+        value-key="name"
+        @confirm="onregionConfirm"
+        @cancel="RegionShow = false" />
     </van-popup>
   </div>
 </template>
 
 <script>
-import {getCWStoreTypeList, getTodoItemList, completeAll, getStoreTypeList, getTodoItemMyList} from "@/api/index";
-import {moduleList} from "@/api/inventory";
+import {
+  getCWStoreTypeList,
+  getTodoItemList,
+  completeAll,
+  getStoreTypeList,
+  getTodoItemMyList,
+} from '@/api/index';
+import { moduleList } from '@/api/inventory';
 export default {
-  name: "MyHistoricalWeekly",
+  name: 'MyHistoricalWeekly',
   data() {
     return {
-      isHandle:"0",
-      disabled:false,
-      pageNum:1,
-      pageSize:10,
+      isHandle: '0',
+      disabled: false,
+      pageNum: 1,
+      pageSize: 10,
       loading: false,
       finished: false,
-      RegionShow:false,
-      storeTypeList:[],
-      list:[],
-      radio:[],
-      blackReason:"",
-      param:"",
-      submitShow:false,
-      orderByStr:'desc',
-      moduleList:[],
-      module:"",
-      companyName:"全部流程"
-    }
+      RegionShow: false,
+      storeTypeList: [],
+      list: [],
+      radio: [],
+      blackReason: '',
+      param: '',
+      submitShow: false,
+      orderByStr: 'desc',
+      moduleList: [],
+      module: '',
+      companyName: '全部流程',
+      userDeptLevel: '',
+    };
   },
   created() {
-    this.radio=[]
-    getStoreTypeList({}).then(res => {
-      this.storeTypeList = res.data
-    })
-    moduleList({}).then(res => {
-      var moduleList=[{key:"",name:"全部流程"}]
-      this.moduleList = moduleList.concat(res.rows)
-    })
+    // userDeptLevel用户部门等级字段，0-总部，1-公司，2-大区，3-销售部，4-业务员
+    this.userDeptLevel = localStorage.getItem('userDeptLevel');
+    this.radio = [];
+    getStoreTypeList({}).then((res) => {
+      this.storeTypeList = res.data;
+    });
+    moduleList({}).then((res) => {
+      var moduleList = [{ key: '', name: '全部流程' }];
+      this.moduleList = moduleList.concat(res.rows);
+    });
     // this.approveList()
   },
   watch: {
     $route(to, from) {
-      this.powerGrade = localStorage.getItem("powerGrade")
-      this.pageNum=1
-      this.radio=[]
-      if(to.path=="/signApprovalList"&&from.path=="/home"){
-        window.scrollTo(0,0)
-        this.approveList()
+      this.powerGrade = localStorage.getItem('powerGrade');
+      this.pageNum = 1;
+      this.radio = [];
+      if (to.path == '/signApprovalList' && from.path == '/home') {
+        window.scrollTo(0, 0);
+        this.approveList();
       }
-      if(to.path=="/signApprovalList"&&from.path=="/signApproval"){
-        this.pageNum=1
-        this.tabChange()
+      if (to.path == '/signApprovalList' && from.path == '/signApproval') {
+        this.pageNum = 1;
+        this.tabChange();
       }
-    }
+    },
   },
   methods: {
-    onregionConfirm(val){
-      this.module =val.key
-      this.companyName =val.name
-      this.RegionShow=false
+    onregionConfirm(val) {
+      this.module = val.key;
+      this.companyName = val.name;
+      this.RegionShow = false;
     },
-    sortFN(){
-      if(this.orderByStr=='asc'){
-        this.orderByStr='desc'
-      }else{
-        this.orderByStr='asc'
+    sortFN() {
+      if (this.orderByStr == 'asc') {
+        this.orderByStr = 'desc';
+      } else {
+        this.orderByStr = 'asc';
       }
-      this.tabChange()
+      this.tabChange();
     },
-    editorFn(){
-      if(this.radio.length==0){
-        this.$toast("请选择审批项！");
-        return
+    editorFn() {
+      if (this.radio.length == 0) {
+        this.$toast('请选择审批项！');
+        return;
       }
-      this.blackReason=""
-      this.submitShow=true
+      this.blackReason = '';
+      this.submitShow = true;
     },
-    outFn(){
-      if(this.blackReason.trim()==""){
-        this.$toast("请输入审批意见！");
-        return
-      }
-      var taskIds=[]
-      var instanceIds=[]
-      for(var i=0;i<this.radio.length;i++){
-        taskIds.push(this.radio[i].taskId)
-        instanceIds.push(this.radio[i].instanceId)
+    outFn() {
+      if (this.blackReason.trim() == '') {
+        this.$toast('请输入审批意见！');
+        return;
       }
-      var dormData={
-        taskIds:taskIds.join(","),
-        instanceIds:instanceIds.join(","),
-        variables:JSON.stringify({
-          "comment":this.blackReason,
-          "pass":false
-        })
+      var taskIds = [];
+      var instanceIds = [];
+      for (var i = 0; i < this.radio.length; i++) {
+        taskIds.push(this.radio[i].taskId);
+        instanceIds.push(this.radio[i].instanceId);
       }
-      this.$dialog.confirm({
-        message: '确认提交审批？',
-      }).then(() => {
-        completeAll(dormData).then(res=>{
-          if(res.code==200){
-            this.submitShow=false
-            this.radio=[]
-            this.$toast("驳回成功！");
-            this.pageNum=1
-            this.approveList()
-          }else{
-            this.$toast(res.msg);
-          }
+      var dormData = {
+        taskIds: taskIds.join(','),
+        instanceIds: instanceIds.join(','),
+        variables: JSON.stringify({
+          comment: this.blackReason,
+          pass: false,
+        }),
+      };
+      this.$dialog
+        .confirm({
+          message: '确认提交审批？',
         })
-      })
+        .then(() => {
+          completeAll(dormData).then((res) => {
+            if (res.code == 200) {
+              this.submitShow = false;
+              this.radio = [];
+              this.$toast('驳回成功！');
+              this.pageNum = 1;
+              this.approveList();
+            } else {
+              this.$toast(res.msg);
+            }
+          });
+        });
     },
-    submit(){
-      var taskIds=[]
-      var instanceIds=[]
-      for(var i=0;i<this.radio.length;i++){
-        taskIds.push(this.radio[i].taskId)
-        instanceIds.push(this.radio[i].instanceId)
-      }
-      var dormData={
-        taskIds:taskIds.join(","),
-        instanceIds:instanceIds.join(","),
-        variables:JSON.stringify({
-          "comment":this.blackReason,
-          "pass":true
-        })
+    submit() {
+      var taskIds = [];
+      var instanceIds = [];
+      for (var i = 0; i < this.radio.length; i++) {
+        taskIds.push(this.radio[i].taskId);
+        instanceIds.push(this.radio[i].instanceId);
       }
-      this.$dialog.confirm({
-        message: '确认提交审批？',
-      }).then(() => {
-        completeAll(dormData).then(res=>{
-          if(res.code==200){
-            this.radio=[]
-            this.$toast("提交成功！");
-            this.submitShow=false;
-            this.pageNum=1;
-            this.approveList();
-          }else{
-            this.$toast(res.msg);
-          }
+      var dormData = {
+        taskIds: taskIds.join(','),
+        instanceIds: instanceIds.join(','),
+        variables: JSON.stringify({
+          comment: this.blackReason,
+          pass: true,
+        }),
+      };
+      this.$dialog
+        .confirm({
+          message: '确认提交审批？',
         })
-      })
+        .then(() => {
+          completeAll(dormData).then((res) => {
+            if (res.code == 200) {
+              this.radio = [];
+              this.$toast('提交成功！');
+              this.submitShow = false;
+              this.pageNum = 1;
+              this.approveList();
+            } else {
+              this.$toast(res.msg);
+            }
+          });
+        });
     },
-    onLoad(){
+    onLoad() {
       this.disabled = true;
-      if(this.isHandle==2){
-        this.approveMyList()
-      }else{
-        this.approveList()
+      if (this.isHandle == 2) {
+        this.approveMyList();
+      } else {
+        this.approveList();
       }
     },
-    onSearchm(){
-      this.tabChange()
+    onSearchm() {
+      this.tabChange();
     },
-    approveFn(row){
-      this.list=[];
+    approveFn(row) {
+      this.list = [];
       this.$router.push({
-        path: "/signApproval",
-        query: {signId: row.signId,addressLine:row.addressLine,type:this.isHandle,itemType:row.itemType,taskId:row.taskId,instanceId:row.instanceId,visitsId:row.visitsId}
-      })
+        path: '/signApproval',
+        query: {
+          signId: row.signId,
+          addressLine: row.addressLine,
+          type: this.isHandle,
+          itemType: row.itemType,
+          taskId: row.taskId,
+          instanceId: row.instanceId,
+          visitsId: row.visitsId,
+        },
+      });
     },
     tabChange() {
-      window.scrollTo(0,0)
+      window.scrollTo(0, 0);
       this.disabled = true;
-      this.list=[];
-      this.pageNum=1
-      if(this.isHandle==2){
-        this.approveMyList()
-      }else{
-        this.approveList()
+      this.list = [];
+      this.pageNum = 1;
+      if (this.isHandle == 2) {
+        this.approveMyList();
+      } else {
+        this.approveList();
       }
-
     },
     approveMyList() {
       let loading1 = this.$toast.loading({
@@ -303,22 +392,28 @@ export default {
         this.list = [];
         this.refreshing = false;
       }
-      getTodoItemMyList({pageNum:this.pageNum,module:this.module, pageSize:this.pageSize,param:this.param,orderByStr:this.orderByStr}).then(res => {
-        loading1.clear()
+      getTodoItemMyList({
+        pageNum: this.pageNum,
+        module: this.module,
+        pageSize: this.pageSize,
+        param: this.param,
+        orderByStr: this.orderByStr,
+      }).then((res) => {
+        loading1.clear();
         this.disabled = false;
         this.loading = false;
-        if(this.pageNum==1){
-          this.list=[];
-          this.refreshing =false;
+        if (this.pageNum == 1) {
+          this.list = [];
+          this.refreshing = false;
         }
-        this.list = this.list.concat(res.rows)
-        if(this.list.length >=res.total) {
+        this.list = this.list.concat(res.rows);
+        if (this.list.length >= res.total) {
           this.finished = true;
-        }else{
+        } else {
           this.finished = false;
         }
-        this.pageNum=this.pageNum+1
-      })
+        this.pageNum = this.pageNum + 1;
+      });
     },
     approveList() {
       let loading1 = this.$toast.loading({
@@ -330,35 +425,42 @@ export default {
         this.list = [];
         this.refreshing = false;
       }
-      getTodoItemList({isHandle: this.isHandle,module:this.module, pageNum:this.pageNum, pageSize:this.pageSize,param:this.param,orderByStr:this.orderByStr}).then(res => {
-        loading1.clear()
+      getTodoItemList({
+        isHandle: this.isHandle,
+        module: this.module,
+        pageNum: this.pageNum,
+        pageSize: this.pageSize,
+        param: this.param,
+        orderByStr: this.orderByStr,
+      }).then((res) => {
+        loading1.clear();
         this.disabled = false;
         this.loading = false;
-        if(this.pageNum==1){
-          this.list=[];
-          this.refreshing =false;
+        if (this.pageNum == 1) {
+          this.list = [];
+          this.refreshing = false;
         }
-        this.list = this.list.concat(res.rows)
-        if(this.list.length >=res.total) {
+        this.list = this.list.concat(res.rows);
+        if (this.list.length >= res.total) {
           this.finished = true;
-        }else{
+        } else {
           this.finished = false;
         }
-        this.pageNum=this.pageNum+1
-      })
+        this.pageNum = this.pageNum + 1;
+      });
     },
     onClickLeft() {
-      this.$router.push("/home")
-    }
-  }
-}
+      this.$router.push('/home');
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 .bgcolor {
   background-color: #f5f5f5;
 }
-.serchInput{
-  padding: 0 14px ;
+.serchInput {
+  padding: 0 14px;
   margin-top: 14px;
 }
 
@@ -375,7 +477,8 @@ export default {
   position: relative;
   color: #333;
   font-size: 14px;
-  .van-cell__left-icon, .van-cell__right-icon{
+  .van-cell__left-icon,
+  .van-cell__right-icon {
     line-height: 34px;
   }
   .CalendarIcon {
@@ -390,7 +493,7 @@ export default {
     }
   }
 }
-.monthNowpro{
+.monthNowpro {
   color: #ccc;
 }
 .cardContent {
@@ -412,7 +515,7 @@ export default {
 
 .cardContent .title p {
   padding: 0;
-  margin: 0
+  margin: 0;
 }
 
 .cardContent .title .textLeft {
@@ -434,8 +537,8 @@ export default {
   border-radius: 8px;
   overflow: hidden;
 }
-.weekList{
-  border-radius:0;
+.weekList {
+  border-radius: 0;
 }
 .Btn {
   margin: 0 auto 10px;
@@ -445,28 +548,32 @@ export default {
   color: #fff !important;
   background-color: #0057ba;
   border: 1px solid #0057ba;
-  height: 36px
+  height: 36px;
 }
-.BtnBorder{
+.BtnBorder {
   margin: 0 auto 10px;
   display: block;
   width: 90%;
   border-radius: 5px;
   border: 1px solid #0057ba;
-  color:#0057ba;
-  height: 36px
+  color: #0057ba;
+  height: 36px;
+}
+.weekList .van-cell {
+  border-radius: 6px;
+  overflow: hidden;
 }
-.weekList .van-cell{border-radius: 6px;
-  overflow: hidden;}
-.weekList .cardContent .title{line-height: 32px}
-.weekList .van-cell__right-icon{
-  top:4px;
+.weekList .cardContent .title {
+  line-height: 32px;
 }
-.searchDiv{
-  .van-search{
+.weekList .van-cell__right-icon {
+  top: 4px;
+}
+.searchDiv {
+  .van-search {
     background: #fff;
   }
-  .van-search__action{
+  .van-search__action {
     font-size: 14px;
     color: #0057ba;
     font-weight: bold;
@@ -476,8 +583,10 @@ export default {
     border: 1px solid #ccc;
     padding: 0 20px;
   }
-  .van-search--show-action{padding-right: 12px}
-  .van-search__content{
+  .van-search--show-action {
+    padding-right: 12px;
+  }
+  .van-search__content {
     border: 1px solid #ccc;
     border-bottom-left-radius: 60px;
     border-top-left-radius: 60px;
@@ -485,4 +594,4 @@ export default {
     border-right: 0;
   }
 }
-</style>
+</style>