storevisit-ui-mobile/src/views/home/hintTabPage/hintDetail.vue

<template>
  <div class="hintDetail">
    <div class="header">
      <van-nav-bar class="navBar" title="门店拜访" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="tabBox">
      <van-tabs class="myTab" v-model="activeTabName" color="#0057ba" @change="tabChange">
        <van-tab
          v-for="(item, index) in tabsItem"
          :title="item.title"
          :name="item.name"
          :key="index"></van-tab>
      </van-tabs>
      <van-tabs
        class="myTab"
        v-model="activaPantoneName"
        color="#0057ba"
        @change="tabChangePantone"
        v-if="activeTabName == 'pantone'">
        <van-tab
          v-for="(val, key, index) in tabsItemPantone"
          :key="index"
          :title="key"
          :name="key"></van-tab>
      </van-tabs>
    </div>
    <div class="content">
      <el-table
        v-if="fromType"
        :data="tableList"
        :load="load"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        border
        class="elTreeTable"
        lazy
        :row-key="rowKey"
        :key="toggleIndex">
        <el-table-column
          class="firstName"
          :label="firstLabel"
          :prop="firstProp"
          align="center"
          width="120">
          <template slot-scope="scope">
            <span>{{ scope.row[firstProp] }}</span>
            <!-- <span v-if="scope.row.reportType != 1">{{ scope.row.deptName }}</span> -->
          </template>
        </el-table-column>
        <el-table-column
          :label="item.label"
          width="46"
          align="center"
          v-for="(item, index) in tableColumn"
          :key="index"
          v-if="tableColumn.length">
          <el-table-column
            :label="val.label"
            :prop="val.prop"
            width="46"
            align="center"
            v-if="item.childredColumn"
            v-for="(val, ind) in item.childredColumn"
            :key="ind">
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="mask" v-if="maskShow"><van-loading type="spinner" color="#1989fa" /></div>
    </div>
  </div>
</template>
<script>
import {
  selectNoVisitsInfo,
  selectPendingCasesInfo,
  getReportMaterialType,
  getReportMaterial,
} from '@/api/index';
import { mapState } from 'vuex';
export default {
  name: 'hintDetail',
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  data() {
    return {
      empLevel: '',
      deptId: null,
      fromType: null,
      activeTabName: 'noVisit',
      activaPantoneName: '',
      tabsItem: [
        {
          title: '未拜访',
          name: 'noVisit',
        },
        {
          title: '建店',
          name: 'createStore',
        },
        // {
        //   title: '色卡',
        //   name: 'pantone',
        // },
      ],
      activePantoneTabName: '', //色卡tabName
      tabsItemPantone: {}, //色卡tabItem
      toggleIndex: 0,
      firstLabel: '',
      firstProp: '',
      tableColumn: [],
      tableList: [],
      // 未拜访
      noVisit: [
        {
          label: '可控店',
          childredColumn: [
            {
              label: '(当月)',
              prop: 'keKongNotVisited',
            },
          ],
        },
        {
          label: '金牌店',
          childredColumn: [
            {
              label: '(当月)',
              prop: 'jinPaiNotVisited',
            },
          ],
        },
        {
          label: '同A店',
          childredColumn: [
            {
              label: '(近2月)',
              prop: 'tongANotVisited',
            },
          ],
        },
        {
          label: '同B店',
          childredColumn: [
            {
              label: '(近3月)',
              prop: 'tongBNotVisited',
            },
          ],
        },
      ],
      // 建店
      createStore: [
        {
          label: '可控店',
          childredColumn: [
            {
              label: '(45天未结案)',
              prop: 'keKongAbnormalNum',
            },
          ],
        },
        {
          label: '金牌店',
          childredColumn: [
            {
              label: '(7天未完工)',
              prop: 'jinPaiUnfinishedNum',
            },
            {
              label: '(30天未结案)',
              prop: 'jinPaiAbnormalNum',
            },
          ],
        },
        {
          label: '同A店',
          childredColumn: [
            {
              label: '(30天未结案)',
              prop: 'tongAAbnormalNum',
            },
          ],
        },
        {
          label: '同B店',
          childredColumn: [
            {
              label: '(30天未结案)',
              prop: 'tongBAbnormalNum',
            },
          ],
        },
      ],
      // 色卡
      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',
            },
          ],
        },
      ],
      materialCode: null, //色卡物料来源
      maskShow: true,
    };
  },
  watch: {
    // 监听tab切换的状态
    fromType: {
      handler(newVal) {
        this.tableColumn = this[newVal]; //表格头
        this.activeTabName = newVal; // 当前激活tab
      },
      immediate: true,
    },
    // 初始化监听fromType，不同类型显示不同的tabItem
    '$route.query.fromType': {
      handler(newVal) {
        if (newVal) this.setTabsItem();
      },
      immediate: true,
    },
  },
  activated() {
    this.empLevel = this.userInfo.empLevel;
    this.firstLabel = this.empLevel == '1' ? '组织名称/大区主管' : '组织名称/销售部主管';
    this.fromType = this.$route.query.fromType; // fromType: 'noVisit':未拜访; 'createStore':建店; 'pantone':色卡
    this.deptId = this.userInfo.deptId; // 当前用户部门id
    this.activaPantoneName = this.$route.query.pantoneName; //当前色卡
    this.materialCode = this.$route.query.materialCode; // 色卡code
    this.initData();
  },
  methods: {
    rowKey(row) {
      return this.fromType == 'pantone' ? row['id'] : row['onlyId'];
    },
    setTabsItem() {
      this.tabsItem = [
        {
          title: '未拜访',
          name: 'noVisit',
        },
        {
          title: '建店',
          name: 'createStore',
        },
      ];
      // 2销售部主管显示色卡
      if (this.userInfo.empLevel == '2') {
        this.tabsItem.push({
          title: '色卡',
          name: 'pantone',
        });
      }
    },
    /**
     * 初始化数据和搜索操作接口的入口
     * @param {*function} resolve //子级数据数据回调
     * @param {*object} tree //展开时当前节点数据
     * */
    initData(resolve, tree) {
      // 请求子级数据时不需要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.selectNoVisitsInfoFun(resolve);
      } else if (this.fromType == 'createStore') {
        // 建店
        this.deptId = tree ? tree.onlyId : this.userInfo.deptId;
        this.firstProp = 'onlyName';
        this.selectPendingCasesInfoFun(resolve);
      } else if (this.fromType == 'pantone') {
        // 色卡
        this.firstProp = 'warehouseName';
        let empLevel = tree ? tree.empLevel : null;
        this.getPantoneData(resolve, empLevel);
      }
    },
    tabChange(val) {
      this.tableList = []; // 清楚tab数
      this.tabsItemPantone = {}; // 清楚色卡tab数据
      this.fromType = val;
      this.initData();
    },
    tabChangePantone(val) {
      this.tableList = [];
      this.materialCode = this.tabsItemPantone[val].materialCode;
      this.initData();
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    linKReportHistory(row, type) {},
    // 加载子节点数据的函数
    load(tree, treeNode, resolve) {
      this.initData(resolve, tree);
    },
    // 未拜访
    selectNoVisitsInfoFun(resolve) {
      selectNoVisitsInfo({ deptId: this.deptId }).then((res) => {
        if (res.code == 200) {
          res.data.forEach((val) => {
            if (val.empLevel < 3) val.hasChildren = true;
          });
          // 是否是子级
          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,
          });
        }
      });
    },
    // 建店
    selectPendingCasesInfoFun(resolve) {
      selectPendingCasesInfo({ deptId: this.deptId }).then((res) => {
        if (res.code == 200) {
          res.data.forEach((val) => {
            if (val.empLevel < 3) val.hasChildren = true;
          });
          // 是否是子级
          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,
          });
        }
      });
    },
    // 色卡tab
    getPantoneData(resolve, empLevel) {
      if (JSON.stringify(this.tabsItemPantone) != '{}') {
        // this.tabsItemPantone ！= {} 不是初次获取tab数据不需要在赋值
        this.getReportMaterialTypeFun(resolve, empLevel);
      } else {
        getReportMaterial().then((res) => {
          this.tabsItemPantone = res.data;
          delete this.tabsItemPantone.tip;
          // 初次获取tab数据延迟等待this.activaPantoneName当前激活tab赋值成功，获取其物料code
          this.$nextTick(() => {
            this.materialCode = this.materialCode
              ? this.materialCode
              : this.tabsItemPantone[this.activaPantoneName].materialCode;
            this.getReportMaterialTypeFun(null, null);
          });
        });
      }
    },
    // 色卡详情
    getReportMaterialTypeFun(resolve, empLevel) {
      // empLevel 第一次传 null
      getReportMaterialType({ materialCode: this.materialCode, empLevel: empLevel }).then((res) => {
        if (res.code == 200) {
          res.data.colorCardList.forEach((val) => {
            if (val.empLevel < 3) val.hasChildren = true;
          });
          // 是否是子级
          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,
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.hintDetail {
  .tabBox {
    position: sticky;
    top: 0px;
    z-index: 10;
  }
}
</style>
<style lang="scss">
#app {
  width: 100%;
  height: 100%;
  .bgcolor {
    width: 100%;
    height: 100%;
    .hintDetail {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .content {
        flex: 1;
        overflow: hidden;
        padding-bottom: 20px;
        background: #fff;
        position: relative;
        .el-table {
          overflow: hidden;
          height: 100%;
          display: flex;
          flex-direction: column;
          .el-table__body-wrapper {
            overflow: auto;
            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;
        }
      }
    }
  }
}
.hintDetail {
  .el-table__head .el-table__body {
    overflow: hidden;
    width: 99.9% !important;
  }
  .elTreeTable table {
    width: 99.9% !important;
  }
  .el-table__body {
    width: 99.9% !important;
  }
  .el-table__empty-block {
    width: 99.9% !important;
  }
  .elTreeTable .el-table__cell:first-child .cell {
    padding-left: 2px !important;
  }

  .elTreeTable .el-table__cell {
    padding: 0px;
  }

  .elTreeTable .el-table__body td.el-table__cell {
    padding: 2px;
  }

  .elTreeTable table col {
    text-align: center;
  }

  .elTreeTable th.el-table__cell > .cell {
    padding: 1px !important;
  }

  .elTreeTable {
    font-size: 12px !important;
  }

  .elTreeTable th.el-table__cell {
    padding: 1px !important;
  }

  .elTreeTable th.el-table__cell > .cell {
    text-align: center;
  }

  .elTreeTable .el-table__header tr:first-child th.el-table__cell:first-child .cell {
    /* width: 98px; */
  }

  .elTreeTable .linkSpan {
    text-decoration: underline;
    color: #0057ba;
    display: block;
    text-align: right;
    padding: 6px 10px;
  }

  .elTreeTable td.el-table__cell div {
    padding: 0px;
  }

  .elTreeTable .cell .spanNum {
    display: block;
    text-align: right;
    padding: 6px 10px;
  }

  .elTreeTable .el-table__expand-icon {
    float: right;
    .el-icon-arrow-right {
      vertical-align: -2px;
    }
  }
}
</style>