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

<template>
  <div class="hintTabPage">
    <div class="itemTab">
      <van-collapse v-model="activeNames">
        <!-- 拜访（实时） -->
        <van-collapse-item :name="visitCollapse.name">
          <template #title>
            <div class="itemHeader" @click.stop>
              <span class="itemTitle">{{ visitCollapse.title }}</span>
              <el-popover placement="right" trigger="click" popper-class="hintPopover">
                <div
                  class="popoverConten"
                  v-for="(item, index) in visitCollapse.tipsPopoverlabel"
                  :key="index">
                  {{ item }}
                </div>
                <div slot="reference" class="hintIconBox">
                  <img class="hintIcon" :src="hintIcon" />
                </div>
              </el-popover>
            </div>
          </template>
          <visitPage
            fromType="noVisit"
            :empLevel="empLevel"
            :contentData="visitCollapse.contentData"
            :maskShow="visitCollapse.collapseLosding"
            :resData="visitCollapse.resData"></visitPage>
        </van-collapse-item>
        <!-- 建店 -->
        <van-collapse-item :name="createStore.name">
          <template #title>
            <div class="itemHeader" @click.stop>
              <span class="itemTitle">{{ createStore.title }}</span>
              <el-popover placement="right" trigger="click" popper-class="hintPopover">
                <div
                  class="popoverConten"
                  v-for="(item, index) in createStore.tipsPopoverlabel"
                  :key="index">
                  {{ item }}
                </div>
                <div slot="reference" class="hintIconBox">
                  <img class="hintIcon" :src="hintIcon" />
                </div>
              </el-popover>
            </div>
          </template>
          <visitPage
            fromType="createStore"
            :empLevel="empLevel"
            :contentData="createStore.contentData"
            :maskShow="createStore.collapseLosding"
            :resData="createStore.resData"></visitPage>
        </van-collapse-item>
        <!-- 日报、周报、半月报 -->
        <van-collapse-item name="3" v-if="empLevel != '4'">
          <template #title>
            <div class="itemHeader" @click.stop>
              <span class="itemTitle">{{ report.title }}</span>
              <el-popover placement="right" trigger="click" popper-class="hintPopover">
                <div class="popoverConten">
                  {{ report.reportData.tip }}
                </div>
                <div slot="reference" class="hintIconBox">
                  <img class="hintIcon" :src="hintIcon" />
                </div>
              </el-popover>
            </div>
          </template>
          <div class="reportContent">
            <div class="reportItem">
              <div class="label">填写率：</div>
              <div class="value">本月{{ report.reportData.fillingRate }}</div>
              <div class="itemDetail" v-if="empLevel != '3'" @click="reportClick('fillingRate')">
                下属详情
              </div>
            </div>
            <div class="reportItem" v-show="empLevel != '3'">
              <div class="label">审批率：</div>
              <div class="value">本月{{ report.reportData.approvalRate }}</div>
            </div>
            <div class="" v-show="empLevel == '1'">本周点评业务员</div>
            <div class="reportItem" v-show="empLevel == '1'">
              <div class="label">日报数(目标数)：</div>
              <div class="value">{{ report.reportData.commentNum }}个(5个)</div>
              <div class="itemDetail" @click="reportClick('commentNum')">进入点评</div>
            </div>
            <div class="mask" v-if="report.reportLosding">
              <van-loading type="spinner" color="#1989fa" />
            </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 }}
                </div>
                <div slot="reference" class="hintIconBox">
                  <img class="hintIcon" :src="hintIcon" />
                </div>
              </el-popover>
            </div>
          </template>
          <div class="pantoneContent">
            <template v-if="empLevel == '3'">
              <div v-for="(val, key, index) in pantone.pantoneData" :key="index">
                <div class="title">{{ key }}</div>
                <div class="pantoneItem">
                  <div class="firstItem item">
                    <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 item">
                    <div class="left">
                      <div class="lebel">门店未签收：</div>
                      <div class="value">{{ val.mdwqsNum }}</div>
                    </div>
                    <div class="right">
                      <div class="lebel">门店未签收：</div>
                      <div class="value valueIsClick" @click="pantoneClick(val, key)">
                        {{ val.wqsmdNum }}
                      </div>
                    </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 class="pantoneItem">
                  <div class="firstItem item">
                    <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 item">
                    <div class="left">
                      <div class="lebel">业务员已发放：</div>
                      <div class="value">{{ val.ywyyffNum }}</div>
                    </div>
                    <div class="right">
                      <div class="lebel">门店未签收：</div>
                      <div class="value valueIsClick" @click="pantoneClick(val, key)">
                        {{ val.wqsmdNum }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
            <div class="mask" v-if="pantone.pantoneLosding">
              <van-loading type="spinner" color="#1989fa" />
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>
<script>
import {
  selectVisitsRealTime,
  selectBuildingStore,
  getReportTarget,
  getReportMaterial,
} from '@/api/index';
import hintIcon from '@/assets/hintIcon.png';
import visitPage from './visitPage.vue';
import { mapState } from 'vuex';
export default {
  name: 'hintTabPage',
  components: { visitPage },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  props: {
    tabVal: {
      type: [String, Number],
      default: '-1',
    },
  },
  data() {
    return {
      empLevel: '', //员工级别，1大区主管2销售部主管3业务员4其他 ***其他级别4，不显示日报、周报、半月报和色卡
      hintIcon: hintIcon,
      activeNames: ['1', '2', '3', '4', '5'],
      visitCollapse: {
        name: '1',
        title: '拜访（实时）',
        collapseLosding: true,
        tipsPopoverlabel: [],
        tipsPopoverValue: null,
        contentData: [
          {
            title: '可控店',
            titleProp: 'keKong',
            bagColor: '#eb6877',
            visitDetail: [
              {
                leftTable: '本月拜访率：',
                leftProp: 'visitRateThisMonth',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '未拜访：',
                rightProp: 'notVisited',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
          {
            title: '金牌店',
            titleProp: 'jinPai',
            bagColor: '#f1b789',
            visitDetail: [
              {
                leftTable: '本月拜访率：',
                leftProp: 'visitRateThisMonth',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '未拜访：',
                rightProp: 'notVisited',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
          {
            title: '同A店',
            titleProp: 'tongA',
            bagColor: '#88abda',
            visitDetail: [
              {
                leftTable: '近2个月拜访率：',
                leftProp: 'visitRateInThePastTwoMonths',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '未拜访：',
                rightProp: 'notVisited',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
          {
            title: '同B店',
            titleProp: 'tongB',
            bagColor: '#8f82bc',
            visitDetail: [
              {
                leftTable: '近3个月拜访率：',
                leftProp: 'visitRateInThePastThreeMonths',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '未拜访：',
                rightProp: 'notVisited',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
        ],
        resData: null,
      },
      createStore: {
        name: '2',
        title: '建店',
        collapseLosding: true,
        tipsPopoverlabel: [
          {
            label: '未完工',
            prop: '',
          },
          {
            label: '为结案',
            prop: '',
          },
        ],
        tipsPopoverValue: null,
        contentData: [
          {
            title: '可控店',
            titleProp: 'keKong',
            bagColor: '#eb6877',
            visitDetail: [
              {
                leftTable: '本月累计：',
                leftProp: 'month',
                leftUnit: '%',
                leftIsClick: false,
              },
              {
                leftTable: '今年累计：',
                leftProp: 'year',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '45天未结案：',
                rightProp: 'keKongAbnormalNum',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
          {
            title: '金牌店',
            titleProp: 'jinPai',
            bagColor: '#f1b789',
            visitDetail: [
              {
                leftTable: '本月累计：',
                leftProp: 'month',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '7天未完工：',
                rightProp: 'jinPaiAbnormalNum',
                rightUnit: '家',
                rightIsClick: true,
              },
              {
                leftTable: '今年累计：',
                leftProp: 'year',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '30天未结案：',
                rightProp: 'jinPaiUnfinishedNum',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
          {
            title: '同A店',
            titleProp: 'tongA',
            bagColor: '#88abda',
            visitDetail: [
              {
                leftTable: '本月累计：',
                leftProp: 'month',
                leftUnit: '%',
                leftIsClick: false,
              },
              {
                leftTable: '今年累计：',
                leftProp: 'year',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '30天未结案：',
                rightProp: 'tongAAbnormalNum',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
          {
            title: '同B店',
            titleProp: 'tongB',
            bagColor: '#8f82bc',
            visitDetail: [
              {
                leftTable: '本月累计：',
                leftProp: 'month',
                leftUnit: '%',
                leftIsClick: false,
              },
              {
                leftTable: '今年累计：',
                leftProp: 'year',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '30天未结案：',
                rightProp: 'tongBAbnormalNum',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
        ],
        resData: null,
      },
      report: {
        title: '',
        reportLosding: true,
        reportData: {},
      },
      pantone: {
        title: '色卡',
        tip: '',
        pantoneLosding: true,
        pantoneData: {},
      },
    };
  },
  watch: {
    tabVal: {
      handler(val) {
        if (val == -1) {
          this.initData();
        }
      },
      immediate: true,
    },
  },
  activated() {},
  methods: {
    initData() {
      if (!this.userInfo) return;
      this.empLevel = this.userInfo.empLevel;
      // 获取拜访数据
      this.getVisitCollapseData();
      // 获取建店数据
      this.getSelectBuildingStore();
      // 获取汇报数据 日报、周报、半月报
      this.getReportData();
      // 获取色卡数据
      this.getPantoneData();
    },
    getVisitCollapseData() {
      selectVisitsRealTime().then((res) => {
        this.visitCollapse.resData = res.data;
        this.visitCollapse.tipsPopoverlabel = res.data.reminderContent;
        this.visitCollapse.collapseLosding = false;
      });
    },
    getSelectBuildingStore() {
      selectBuildingStore().then((res) => {
        this.createStore.resData = res.data;
        this.createStore.tipsPopoverlabel = res.data.reminderContent;
        this.createStore.collapseLosding = false;
      });
    },
    getReportData() {
      if (this.empLevel == '1') {
        this.report.title = '半月报';
      } else if (this.empLevel == '2') {
        this.report.title = '周报';
      } else if (this.empLevel == '3') {
        this.report.title = '日报';
      }
      getReportTarget().then((res) => {
        this.report.reportLosding = false;
        this.report.reportData = res.data || {};
      });
    },
    getPantoneData() {
      if (this.empLevel == 2 || this.empLevel == 3) {
        getReportMaterial().then((res) => {
          this.pantone.pantoneLosding = false;
          this.pantone.tip = res.data.tip;
          this.pantone.pantoneData = res.data;
          delete this.pantone.pantoneData.tip;
        });
      }
    },
    // 汇报下属详情-点击
    reportClick(type) {
      if (type == 'fillingRate') {
        // 下属汇报率审批率统计
        this.$router.push({ path: 'reportingRate' });
      } else if (type == 'commentNum') {
        // 下属业务员历史日报
        this.$router.push({ path: 'subordinateHistoricalDaily' });
      }
    },
    // 色卡查看详情
    pantoneClick(val, key) {
      // 业务员进入未拜访列表
      if (this.empLevel == '3') {
        this.$router.push({ path: '/pantoneNoGet', query: { storeId: val.storeId } });
      } else if (this.empLevel == '2') {
        // 销售部主管
        this.$router.push({
          path: '/hintDetail',
          query: { fromType: 'pantone', materialCode: val.materialCode, pantoneName: key }, // materialCode物料来源
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.hintTabPage {
  padding: 10px;
  .itemTab {
    /* background: #fff; */
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    .itemHeader {
      /* width: 150px; */
      color: #0057ba;
      font-weight: 500;
      font-size: 16px;
      padding: 10px 0;
      display: inline-flex;
      align-items: center;
      .itemTitle {
        margin-right: 10px;
      }
      .hintIconBox {
        display: flex;
        .hintIcon {
          width: 16px;
          height: 16px;
        }
      }
      .van-popover__wrapper {
        display: flex;
      }
    }
    .van-collapse-item {
      margin-bottom: 15px;
    }
    /* 汇报 日报、周报、半月报 */
    .reportContent {
      color: #666666;
      padding: 8px 0;
      .reportItem {
        display: flex;
        position: relative;
        padding: 3px 0;
        .value {
          font-weight: 600;
        }
        .itemDetail {
          text-decoration: underline;
          color: #0057ba;
          position: absolute;
          right: 10px;
        }
      }
    }
    /* 色卡 */
    .pantoneContent {
      padding-bottom: 10px;
      .title {
        padding: 2px 5px;
        border-radius: 2px;
        background-color: #13b5b1;
        margin: 4px 0;
        display: inline-block;
        color: #fff;
      }
      .pantoneItem {
        .item {
          display: flex;
          justify-content: space-between;
          .left {
            display: flex;
          }
          .right {
            display: flex;
            width: 40%;
            justify-content: left;
            .valueIsClick {
              text-decoration: underline;
              color: #0057ba;
            }
          }
        }
        .firstItem {
        }
        .secondItem {
        }
      }
    }
  }
  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
<style lang="scss">
.hintTabPage {
  .itemTab {
    .van-cell {
      padding: 0 16px;
      align-items: center;
    }
    .van-collapse-item__content {
      padding: 0 16px;
    }
  }
}
.hintPopover {
  background: #deedff;
  .popper__arrow {
    &::after {
      border-right-color: #deedff !important;
    }
  }
}
</style>