add: 新增导购视图页面

src/views/salesleads/trafficTask/shopGuidView.vue

+<template>
+  <div class="my-customer-wrap common-set-wrap">
+    <div class="daily-set-content boder-box">
+      <div class="table-condition flex flex-space-between m-b-23">
+        <div class="table-condition-left flex flex-align-center">
+          <!-- TODO: 这里的搜索字段需要明确 -->
+          <el-input placeholder="计划名称" maxlength="50" v-model="conditionObj.searchInput" class="w-264" style="width: 264px;" @keyup.native="value => toInput(value, conditionObj.searchInput)"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
+          <el-input placeholder="任务标题" maxlength="50" v-model="conditionObj.searchInput" class="w-264 m-l-10" style="width: 264px;" @keyup.native="value => toInput(value, conditionObj.searchInput)"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
+          <el-input placeholder="导购名称/手机号" maxlength="50" v-model="conditionObj.searchInput" class="w-264 m-l-10" style="width: 264px;" @keyup.native="value => toInput(value, conditionObj.searchInput)"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
+          <el-select v-model="conditionObj.completed" placeholder="请选择" class="w-135 m-l-10" @change="changeSelect">
+            <el-option v-for="item in completedOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="table-condition flex flex-space-between m-b-23">
+        <div class="table-condition-left flex flex-align-center">
+          <el-input placeholder="请输入门店名称" maxlength="50" v-model="conditionObj.searchInput" class="w-264" style="width: 264px;" @keyup.native="value => toInput(value, conditionObj.searchInput)"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
+          <gic-select-group :brandId="brandId" class="m-l-10" style="min-width: 213px !important;" :width="213" :selectData="conditionObj.storeGroup" @checkGroupIds="checkGroupIds"> </gic-select-group>
+          <el-date-picker class="m-l-10" prefix-icon="el-icon-time" :picker-options="pickerOptions" v-model="conditionObj.date" @change="changeSelect" :value-format="'yyyy-MM-dd'" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"> </el-date-picker>
+        </div>
+        <div class="table-condition-right">
+          <el-button v-if="$getButtonLimit($buttonCode.multipleDelTaskDetail)" :limit-code="$buttonCode.multipleDelTaskDetail" type="danger" @click="multDel">批量删除</el-button>
+          <el-button class="m-l-10" type="primary" v-if="$getButtonLimit($buttonCode.exportTaskDetail)" :limit-code="$buttonCode.exportTaskDetail" :loading="loadingBtn" @click="beforeExportExcel" plain>导出</el-button>
+          <el-tooltip content="导出结果中会员姓名、手机号等敏感信息将进行加密，实现隐私保护" placement="top">
+            <i class="el-icon-warning-outline font-14 p-l-6" v-show="enableDownloadCompleteData == 0"></i>
+          </el-tooltip>
+        </div>
+      </div>
+      <el-table class="select-table" ref="multipleTable" :key="tableRefresh" v-loading="loading" :data="tableData" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="45" :class-name="selectRadio == 1 ? 'cell-disabled' : 'font-size-zero'"> </el-table-column>
+        <el-table-column width="25">
+          <template #header>
+            <el-dropdown style="line-height: 10px; padding: 0; margin-left: -15px; transform: translateY(4px); -webkit-transform: translateY(4px);" placement="bottom-start">
+              <span class="el-dropdown-link"><i class="iconfont-hb3 icongengduo"></i> </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item> <el-checkbox v-model="selectRadio" :true-label="0" :false-label="2" @change="handleCommand">选择当页</el-checkbox></el-dropdown-item>
+                <el-dropdown-item> <el-checkbox v-model="selectRadio" :true-label="1" :false-label="2" @change="handleCommand">选择全部</el-checkbox></el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+          <template>{{ ' ' }}</template>
+        </el-table-column>
+        <el-table-column label="计划名称"></el-table-column>
+        <el-table-column prop="title" label="任务标题" show-overflow-tooltip></el-table-column>
+        <el-table-column label="门店名称"></el-table-column>
+        <el-table-column label="门店分组"></el-table-column>
+        <el-table-column label="导购" show-overflow-tooltip width="170">
+          <template slot-scope="scope">
+            <div class="flex flex-pack-center flex-start">
+              <el-popover placement="top-start" width="300" trigger="hover" @show="showSingleInfo(scope.row.clerkId)">
+                <div class="apply-info-detail">
+                  <div class="flex">
+                    <div class="apply-info-img flex-align-center flex-pack-center bg-82C5FF ">
+                      <i v-if="!userData.headImg" class="iconfont-hb3 icon-yewuduanmorentouxian"></i>
+                      <img v-else :src="userData.headImg" alt="img" />
+                    </div>
+                    <div class="flex flex-column apply-info-right flex-space-between">
+                      <div class="apply-info-name">
+                        {{ userData.staffName || '--' }} ( {{ userData.position || '--' }})
+                        <!-- <i :class="[userData.sex == 2 ? 'icon-xingbienv color-FF585C' : 'icon-xingbienan color-508CEE', 'iconfont-hb3']"></i> -->
+                      </div>
+                      <div class="apply-info-phone">
+                        <span class="w-80">手机号：</span><span class="w-130">{{ userData.nationCode == '86' ? userData.phoneNumber : '+' + userData.nationCode + '-' + userData.phoneNumber }}</span>
+                      </div>
+                      <div class="apply-info-store">
+                        <span class="w-80">所属部门：</span><span class="w-130">{{ userData.departmentName || '--' }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div slot="reference">
+                  <div class="flex flex-align-center flex-pack-center bg-82C5FF table-head-pic cursor-pointer">
+                    <i v-if="!scope.row.headImgUrl" class="iconfont-hb3 icon-yewuduanmorentouxian"></i>
+                    <img v-else :src="scope.row.headImgUrl" alt="img" />
+                  </div>
+                </div>
+              </el-popover>
+              <div class="clerk-info flex flex-column flex-space-between m-l-16" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                <p class="font-14 color-303133" style="line-height: 18px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                  {{ scope.row.clerkName }}
+                </p>
+                <p class="font-14 color-909399" style="line-height: 18px;width: 100%; overflow:hidden;text-overflow: ellipsis;">
+                  {{ scope.row.clerkPhone }}
+                </p>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="会员" show-overflow-tooltip width="170">
+          <template slot-scope="scope">
+            <div class="flex flex-pack-center flex-start">
+              <div class="flex flex-align-center flex-pack-center bg-82C5FF table-head-pic cursor-pointer">
+                <i v-if="!scope.row.memberHeadUrl" class="iconfont-hb3 icon-yewuduanmorentouxian"></i>
+                <img v-else :src="scope.row.memberHeadUrl" alt="img" />
+              </div>
+              <div class="clerk-info flex flex-column flex-space-between m-l-16" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                <p class="font-14 color-303133" style="line-height: 18px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                  {{ scope.row.memberName }}
+                </p>
+                <p class="font-14 color-909399" style="line-height: 18px;width: 100%; overflow:hidden;text-overflow: ellipsis;">
+                  {{ scope.row.memberCardNo }}
+                </p>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="任务创建时间" width="107">
+          <template slot-scope="scope">
+            <div class="line-18">{{ scope.row.createTime | formatTimeYMD }}</div>
+            <div class="line-18">{{ scope.row.createTime | formatTimeHMS }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="" label="完成期限" show-overflow-tooltip width="107">
+          <template slot-scope="scope">
+            <div class="line-18">{{ scope.row.lastTime | formatTimeYMD }}</div>
+            <div class="line-18">{{ scope.row.lastTime | formatTimeHMS }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="逾期情况/逾期失效" width="140">
+          <template slot-scope="scope"> <span class="point" :style="'background:' + overdueStyle[scope.row.isOverTime] + ';'"></span>{{ scope.row.isOverTime }}/{{ scope.row.invalidStatus | formatInvalidStatus }}</template>
+        </el-table-column>
+        <el-table-column label="完成情况">
+          <template #header>
+            <el-tooltip class="item" effect="light" placement="right">
+              <div slot="content">
+                完成情况包含3种<br />
+                1.完成拨打任务；<br />
+                2.完成任务（无需拨打）；<br />
+                3.完成任务（放弃拨打）；<br />
+                4.未完成任务
+              </div>
+              <span style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;">完成情况</span>
+            </el-tooltip>
+          </template>
+          <template slot-scope="scope">
+            <span class="point" :style="'background:' + taskStyle[scope.row.taskStatus] + ';'"></span>
+            {{ scope.row.isCompleted }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" width="200" v-if="$getButtonLimit($buttonCode.delTaskDetail) || $getButtonLimit($buttonCode.previewTaskDetail) || $getButtonLimit($buttonCode.resolveTaskDetail)">
+          <template slot-scope="scope">
+            <el-button v-if="$getButtonLimit($buttonCode.delTaskDetail)" :limit-code="$buttonCode.delTaskDetail" type="text" @click="handleDel(scope.$index, scope.row)">删除</el-button>
+            <el-button v-if="$getButtonLimit($buttonCode.previewTaskDetail)" :limit-code="$buttonCode.previewTaskDetail" type="text" @click="getPreviewData(scope.$index, scope.row)">预览</el-button>
+            <el-button v-if="$getButtonLimit($buttonCode.resolveTaskDetail)" :limit-code="$buttonCode.resolveTaskDetail" type="text" @click="getTaskDetail(scope.row)">完成详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
+        <dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </dm-pagination>
+      </div>
+    </div>
+    <!-- <multiple-del :showDialog="showDialog" :detailFlag="true" @hideDialog="hideDialog" :showTip="true"> </multiple-del> -->
+    <export-dialog :dialogVisible="exportDialog" @export="exportExcel" @update:dialogVisible="changeExportDialog" />
+    <qrcode-dialog ref="qrcodePreview" v-model="dialogVisible"></qrcode-dialog>
+    <detail-preview ref="detailPreview" :previewData="previewData" v-model="previewVisible" @closePreview="closePreview"></detail-preview>
+    <task-detail v-if="taskDetailVisible" @close="closeTaskDetail" :taskData="taskDetail"></task-detail>
+  </div>
+</template>
+<script>
+import exportDialog from '@/components/common/export-dialog.vue';
+import multipleDel from '@/components/app/cloudDaily/multiple-del.vue';
+import qrcodeDialog from '@/components/app/qrcode-dialog.vue';
+import detailPreview from '@/components/app/detail-preview.vue';
+import taskDetail from '@/components/app/task-detail.vue';
+import { getRequest, postRequest, postExcel } from '@/api/api';
+import { _debounce } from '@/common/js/public';
+import errMsg from '@/common/js/error';
+import showMsg from '@/common/js/showmsg';
+export default {
+  name: 'shopGuidView',
+  props: {
+    brandId: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  filters: {
+    formatTimeYMD(data) {
+      return data && data != '- -' ? data.split(' ')[0] : '--';
+    },
+    formatTimeHMS(data) {
+      return data && data != '- -' ? data.split(' ')[1] : '--';
+    }
+  },
+  data() {
+    return {
+      enableDownloadCompleteData: 0,
+      tableH: window.screen.availHeight - 464 - 126,
+      activeBrand: this.brandId, // 品牌 id
+      loadingBtn: false,
+      selectRadio: 2, // 0：选择当页； 1：选择全部
+      showDialog: false, // 删除弹窗参数
+      // 条件
+      conditionObj: {
+        storeGroup: [], // TODO: 门店分组
+        wcStatus: '', // TODO: 完成情况
+        completed: '',
+        overdue: '',
+        title: '',
+        taskType: '1',
+        date: this.$store.state.salesDate
+      },
+      overdueStyle: {
+        已逾期: '#F5222D',
+        未逾期: '#2F54EB'
+      },
+      taskStyle: {
+        2: '#33AF4A',
+        5: '#33AF4A',
+        1: '#F5222D',
+        3: '#F5222D',
+        4: '#F5222D'
+      },
+      completedOptions: [
+        {
+          label: '所有完成情况',
+          value: ''
+        },
+        {
+          label: '已完成(已拨通)',
+          value: '1'
+        },
+        {
+          label: '已完成(放弃)',
+          value: '2'
+        },
+        /* {
+            label: '已完成(特殊完成)',
+            value: '3'
+          }, */
+        {
+          label: '未完成',
+          value: '0'
+        }
+      ],
+      overOptions: [
+        {
+          label: '所有逾期情况',
+          value: ''
+        },
+        {
+          label: '逾期未失效',
+          value: '2'
+        },
+        {
+          label: '逾期已失效',
+          value: '3'
+        },
+        {
+          label: '已逾期',
+          value: '1'
+        },
+        {
+          label: '未逾期',
+          value: '0'
+        }
+      ],
+      loading: false,
+      tableData: [],
+      multipleSelection: [],
+      dialogVisible: false, // 二维码
+      // 分页参数
+      currentPage: 1,
+      pageSize: 20,
+      total: 0,
+      previewData: {},
+      previewVisible: false,
+      // user
+      userData: {
+        staffName: '',
+        phoneNumber: '',
+        nationCode: '',
+        postion: '',
+        departmentName: '',
+        headImg: ''
+      },
+      taskDetailVisible: false,
+      taskDetail: {},
+      pickerOptions: {
+        disabledDate: time => {
+          const end = new Date();
+          return time.getTime() < end.getTime() - 3600 * 1000 * 24 * 365 || time.getTime() > end.getTime();
+        }
+      },
+      tableRefresh: false,
+      exportDialog: false
+    };
+  },
+  computed: {},
+  methods: {
+    /**
+     * 选择门店分组
+     */
+    checkGroupIds: function(nodes) {
+      const that = this;
+      that.conditionObj.storeGroup = nodes;
+      that.currentPage = 1;
+      that.getTableList();
+    },
+    /**
+     * 输入
+     */
+    toInput: _debounce(function(e, value) {
+      let that = this;
+      that.currentPage = 1;
+      that.getTableList();
+    }, 500),
+    getInfo() {
+      const gicEnterpriseId = JSON.parse(sessionStorage.getItem('userInfos')).enterpriseId;
+      getRequest('/haoban-app-tel-task-three-web/setting/find-enterprise-desensitization-setting', { gicEnterpriseId }).then(res => {
+        let resData = res.data;
+        if (resData.errorCode == 1) {
+          this.enableDownloadCompleteData = resData.result.enableDownloadCompleteData;
+          return;
+        }
+        errMsg.errorMsg(resData);
+      });
+    },
+    beforeExportExcel() {
+      if (!this.multipleSelection.length) {
+        showMsg.showmsg('请选择任务', 'warning');
+        return false;
+      }
+      if (this.enableDownloadCompleteData == 1) {
+        this.exportDialog = true;
+      } else {
+        this.exportExcel(0);
+      }
+    },
+    changeExportDialog() {
+      this.exportDialog = false;
+      this.multipleSelection = [];
+      this.$refs.multipleTable.clearSelection();
+    },
+    /**
+     * 导   出
+     */
+    exportExcel(type) {
+      const that = this;
+      if (!that.multipleSelection.length) {
+        showMsg.showmsg('请选择任务', 'warning');
+        return false;
+      }
+      that.loadingBtn = true;
+
+      let para = {
+        gicEnterpriseId: that.activeBrand, // 品牌 id
+        selectType: that.selectRadio == 2 && that.multipleSelection.length ? 0 : this.selectRadio,
+        storeId: that.$route.query.storeId,
+        ecmId: !!that.$route.query.ecmId ? that.$route.query.ecmId : '',
+        isOverTime: that.conditionObj.overdue || '', // 逾期
+        isCompleted: that.conditionObj.completed || '', // 完成
+        taskIds: that.selectRadio == 1 ? '' : that.multipleSelection.map(ele => ele.taskId).join(','),
+        dataType: type,
+        title: this.conditionObj.title
+      };
+      if (Array.isArray(this.conditionObj.date) && this.conditionObj.date.length == 2) {
+        para.createTimeStart = this.conditionObj.date[0];
+        para.createTimeEnd = this.conditionObj.date[1];
+      }
+      postExcel('/haoban-app-tel-task-three-web/task/export-store-view-clerk-list', para)
+        .then(res => {
+          that.loadingBtn = false;
+          if (!res.data) {
+            errMsg.errorMsg('暂无数据');
+            return false;
+          }
+          // let resData = res.data;
+          const blob = new Blob([res.data], {
+            type: 'application/vnd.ms-excel'
+          });
+          const fileName = `门店任务导购报表.xls`;
+          const elink = document.createElement('a');
+          elink.download = fileName;
+          elink.style.display = 'none';
+          elink.href = URL.createObjectURL(blob);
+          document.body.appendChild(elink);
+          elink.click();
+          URL.revokeObjectURL(elink.href); // 释放URL 对象
+          document.body.removeChild(elink);
+          // errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          that.loadingBtn = false;
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    },
+    /**
+     * 获取头像处显示信息
+     */
+    /* eslint-disable */
+
+    showSingleInfo(memberId) {
+      const that = this;
+      const para = {
+        clerkId: memberId
+      };
+      postRequest('/haoban-manage3-web/get-clerk-info', para)
+        .then(res => {
+          let resData = res.data;
+          if (resData.errorCode == 1) {
+            that.userData = resData.result;
+            return;
+          }
+          errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    },
+    closePreview() {
+      const that = this;
+      that.previewData = {};
+    },
+    /**
+     * 获取预览数据
+     */
+    getPreviewData(index, item) {
+      const that = this;
+      let para = {
+        taskId: item.taskId
+      };
+      that.previewVisible = true;
+      postRequest('/haoban-app-tel-task-three-web/task/app-task-detail', para)
+        .then(res => {
+          let resData = res.data;
+          if (resData.errorCode == 1) {
+            that.previewData = resData.result;
+            that.previewVisible = true;
+            return;
+          }
+          errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    },
+    /**
+     * 显示选择本页/全部
+     */
+    handleCommand(command) {
+      this.selectRadio = command;
+      this.tableRefresh = !this.tableRefresh;
+        if (command == 1 || command == 0) {
+          this.$nextTick(() => {
+            this.$refs.multipleTable.toggleAllSelection();
+          })
+        } else if (command == 2) {
+          this.$refs.multipleTable.clearSelection();
+        }
+    },
+    /**
+     * 表格选择
+     */
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+         val.length ? '' : (this.selectRadio = 2);
+    },
+    /**
+     * 批量删除
+     */
+    multDel() {
+      let that = this;
+      if (!that.multipleSelection.length) {
+        that.$message.error({
+          duration: 1000,
+          message: '请选择删除项'
+        });
+        return false;
+      }
+       this.$confirm('删除任务后，会影响任务统计如已完成，完成率，待完成以及销售线索收益等，请知悉', '确认要删除吗？').then(res => {
+          that.postMultDel();
+      })
+    },
+    postMultDel() {
+      let that = this;
+      let para = {
+        storeId: that.$route.query.storeId,
+        taskIds: that.selectRadio == 1 ? '' : that.multipleSelection.map(ele => ele.taskId).join(','), // 门店分组,数组
+        isOverTime: that.conditionObj.overdue || '', // 逾期
+        isCompleted: that.conditionObj.completed || '', // 完成
+        enterpriseId: that.activeBrand, // 品牌 id
+        isAll: that.selectRadio // 0：当页，1：所有
+      };
+      postRequest('/haoban-app-tel-task-three-web/task/batch-del-clerk-task-list', para)
+        .then(res => {
+          let resData = res.data;
+          if (resData.errorCode == 1) {
+            showMsg.showmsg('删除成功', 'success');
+            that.getTableList();
+            return;
+          }
+          errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    },
+
+    /**
+     * 分页---页码变化
+     *  @param {Number} val
+     */
+    handleSizeChange(val) {
+      const that = this;
+      that.currentPage = 1;
+      that.pageSize = val;
+      that.getTableList(this.selectRadio);
+    },
+
+    /**
+     * 分页---当前页变化
+     *  @param {Number} val
+     */
+    handleCurrentChange(val) {
+      const that = this;
+      that.currentPage = val;
+      that.getTableList(this.selectRadio);
+    },
+    changeSelect(e) {
+      const that = this;
+      if (!e) {
+        that.$store.dispatch('changeSales', []);
+      } else {
+        that.$store.dispatch('changeSales', e);
+      }
+      that.currentPage = 1;
+      that.getTableList();
+    },
+
+    /**
+     * 删除
+     */
+    handleDel(index, row) {
+      const that = this;
+      this.$confirm('删除任务后，会影响任务统计如已完成，完成率，待完成以及销售线索收益等，请知悉', '确认要删除吗？')
+        .then(res => {
+          that.postDel(index, row);
+        })
+        .catch(() => { });
+      // that
+      //   .$confirm(`确认要删除吗?`, '提示', {
+      //     confirmButtonText: '确定',
+      //     cancelButtonText: '取消',
+      //     type: 'warning'
+      //   })
+      //   .then(() => {
+      //     that.postDel(index, row);
+      //   })
+      //   .catch(() => {});
+    },
+
+    postDel(index, row) {
+      const that = this;
+      let para = {
+        taskId: row.taskId,
+        enterpriseId: that.activeBrand // 品牌 id
+      };
+      getRequest('/haoban-app-tel-task-three-web/task/del-one', para)
+        .then(res => {
+          let resData = res.data;
+          if (resData.errorCode == 1) {
+            showMsg.showmsg('删除成功', 'success');
+            that.getTableList();
+            return;
+          }
+          errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    },
+
+    /**
+     * 预览
+     */
+    handlePreview(index, row) {
+      const that = this;
+      that.postPreview(index, row);
+    },
+
+    /**
+     *  预览---api
+     */
+    postPreview(index, row) {
+      const that = this;
+      // 生成二维码需要的 url
+      let webUrl = `${row.taskId}`;
+      that.$refs.qrcodePreview.qrcode(webUrl, 'task');
+      that.dialogVisible = true;
+    },
+
+    /**
+     * 获取列表数据
+     */
+    getTableList(val) {
+      const that = this;
+      that.loading = true;
+      let para = {
+        ecmId: that.$route.query.ecmId || '',
+        storeId: that.$route.query.storeId || '', // 门店
+        isOverTime: that.conditionObj.overdue || '', // 逾期
+        isCompleted: that.conditionObj.completed || '',
+        title: that.conditionObj.title || '', // 任务标题
+        pageNum: that.currentPage, // 当前页
+        pageSize: that.pageSize, // 一页显示个数
+        gicEnterpriseId: that.activeBrand
+      };
+      if (Array.isArray(that.conditionObj.date) && that.conditionObj.date.length === 2) {
+        para.createTimeStart=that.conditionObj.date[0];
+        para.createTimeEnd=that.conditionObj.date[1];
+      }
+      getRequest('/haoban-app-tel-task-three-web/task/clerk-task-list', para)
+        .then(res => {
+          let resData = res.data;
+          that.loading = false;
+          if (resData.errorCode == 1) {
+            if (resData.result.list) {
+              resData.result.list.forEach(ele => {
+                if (!ele.taskUrl || ele.taskUrl.length) {
+                  ele.taskUrl = [];
+                }
+              });
+            }
+            that.tableData = resData.result.list || [];
+            that.total = resData.result.pageInfo ? resData.result.pageInfo.total : 0;
+            if (val == 1) {
+              this.$nextTick(() => {
+                this.$refs.multipleTable.toggleAllSelection();
+              });
+            } else {
+              this.selectRadio = 2;
+            }
+            return;
+          }
+          errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          that.loading = false;
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    },
+    getTaskDetail(item) {
+      this.taskDetail = { ...item };
+      this.taskDetailVisible = true;
+    },
+    closeTaskDetail() {
+      this.taskDetail = {};
+      this.taskDetailVisible = false;
+    }
+  },
+  watch: {
+    brandId: function(newData, oldData) {
+      const that = this;
+      if (!!newData) {
+        that.activeBrand = newData;
+        that.getTableList();
+      }
+      this.multipleSelection = []
+    }
+  },
+  mounted() {
+    let that = this;
+    that.activeBrand = that.brandId;
+    that.conditionObj.storeId = that.$route.query.storeId;
+    if (!!that.brandId) {
+      that.getTableList();
+    }
+    this.getInfo();
+  },
+  components: {
+    multipleDel,
+    qrcodeDialog,
+    detailPreview,
+    taskDetail,
+    exportDialog
+  }
+};
+</script>
+<style type="text/scss" lang="scss" scoped>
+.w-135 {
+  width: 135px;
+}
+.w-260 {
+  width: 260px;
+}
+.table-condition-left {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.task-imgs {
+  display: inline-block;
+  vertical-align: middle;
+  width: 30px;
+  height: 30px;
+  margin-right: 10px;
+  border-radius: 4px;
+}
+.daily-set-content {
+  padding: 16px;
+  .image-wrap {
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    max-width: 40px;
+    max-height: 40px;
+    border-radius: 4px;
+    &.bg-82c5ff {
+      background: #82c5ff;
+    }
+    &.bg-eceaeb {
+      background: #eceaeb;
+    }
+    img {
+      max-width: 40px;
+      max-height: 40px;
+      border-radius: 4px;
+    }
+    i {
+      font-size: 20px;
+      color: #e5f3ff;
+    }
+  }
+}
+.depart-item-content {
+  width: 213px;
+  height: 32px;
+  overflow: hidden;
+  white-space: nowrap;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  cursor: pointer;
+}
+.item-cell-select {
+  >>> .el-select__tags {
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
+.depart-cell {
+  position: relative;
+  margin: 0 24px 24px 0;
+  .el-icon-circle-close {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    font-size: 16px;
+    color: #808995;
+    cursor: pointer;
+  }
+}
+</style>