自定义table标签（PC与手机端通用）_手机端table-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44694682/article/details/136936690

博客展示了JavaScript开发相关的效果图，涉及JavaScript这一开发语言及ECMAScript标准。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

<!--
下载数据列表
-->

<template>
  <div class="down_load_center">
    <common-header title="企业微信客户统计">
      <div slot="custom_other" style="cursor: pointer;width: 100%;max-width: 640px;margin: 0 auto;">
        <!-- <van-notice-bar style="margin-bottom: 10px;" left-icon="volume-o" wrapable :scrollable="false" mode="closeable" text="总客户数、活动拉新客户数、活动裂变客户数
          、企业微信客户数分别去重统计，活动拉新客户数+活动裂变客户数 +企业微信客户数>=总客户数" /> -->
        <div class="time_box">
          <span class="time" :class="activetime == 0 ? 'time_active' : ''" @click="gettime(0)">本月</span>
          <span class="time" :class="activetime == 2 ? 'time_active' : ''" @click="gettime(2)">全部</span>
          <span class="time" style="flex: 3.5;" :class="activetime == 1 ? 'time_active' : ''" @click="gettime(1)">{{ time
            != '' ? time :
            '选择时间' }} <van-icon name="close" @click.native.stop="cleartime" v-if="time != ''" /></span>
        </div>
      </div>
    </common-header>
    <div class="main detailed_main">
      <div class="">
        <div class="item_detailed" style="padding:15px 10px">
          <div class="item_detailed_top">
            <div class="card">
              <div class="tip_icon_num" style="">
                <span>重复客户数 {{ customerdata.repeat_num }}</span>
                <van-popover v-model:show="showPopover" placement="bottom" trigger="click" theme="light">
                  <div style="padding: 10px;width:185px;color:#8196cb;">
                    同一个客户可以加多个职员，出现客户重复。总客户数、活动拉新客户数、活动裂变客户数 、企业微信客户数分别去重统计， 活动拉新客户数+活动裂变客户数 +企业微信客户数>=总客户数 。
                  </div>
                  <template #reference>
                    <span class="tip_icon"></span>
                  </template>
                </van-popover>
              </div>
              <div style="padding: 10px;">
                <div style="color:#8196CB"><span class="line_round" style="border: 1px solid #F8536F;"></span>{{ activetime == 2  ? '总客户数' : '新增客户数' }}</div>
                <div class="card_number">{{ customerdata.total_num }}</div>
              </div>
            </div>
            <div class="card">
              <div class="tip_icon_num" style="">
                <span style="display: inline-block;height: 15px;"></span>
              </div>
              <div style="padding: 10px;">
                <div style="color:#8196CB"><span class="line_round" style="border: 1px solid #FFA04D;"></span>待分配客户数
                </div>
                <div class="card_number">{{ customerdata.assign_num }}</div>
              </div>
            </div>
          </div>
          <div class="item_detailed_top">
            <div class="card" style="display: flex;justify-content: space-around;padding: 20px 0;">
              <div class="">
                <div style="color:#8196CB;display: flex;">
                  <span class="line_round" style="border: 1px solid #49aaff;"></span>
                  <span>活码拉新</br>客户数</span>
                </div>
                <div class="card_number">{{ customerdata.hm_num }}</div>
              </div>
              <div class="">
                <div style="color:#8196CB;display: flex;"><span class="line_round"
                    style="border: 1px solid #49eaff;"></span>活动裂变</br>客户数
                </div>
                <div class="card_number">{{ customerdata.lx_num }}</div>
              </div>
              <div class="">
                <div style="color:#8196CB;display: flex;"><span class="line_round"
                    style="border: 1px solid #67ff49;"></span>企业微信</br>客户数</div>
                <div class="card_number">{{ customerdata.wx_num }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="main detailed_main" style="padding-bottom: 50px;">
      <div class="">
        <div class="item_detailed">
          <div class="item_detailed_top">
            <div style="font-size: 15px;font-weight:700;"><span class='line'></span>SCRM企业微信客户列表</div>
            <div style="font-size: 15px;color:#4e66ff;cursor: pointer;" @click="exportBtn">导出</div>
            <!--  -->
          </div>
          <div class="child_list_nav">
            <div class="child_item_nav" :class="{ active: childNavType == 1 }" @click="changeChildNavtype(1)"
              v-if="giant_opo_userdata.role == 'master'">
              SBU
            </div>
            <div class="child_item_nav" :class="{ active: childNavType == 2 }" @click="changeChildNavtype(2)"
              v-if="giant_opo_userdata.role == 'master' || giant_opo_userdata.role == 'sbu'">
              经销商
            </div>
            <div class="child_item_nav" :class="{ active: childNavType == 3 }" @click="changeChildNavtype(3)"
              v-if="giant_opo_userdata.role == 'master' || giant_opo_userdata.role == 'sbu' || giant_opo_userdata.role == 'dealer'">
              门店
            </div>
            <div class="child_item_nav" :class="{ active: childNavType == 4 }" @click="changeChildNavtype(4)">
              职员
            </div>
          </div>
          <van-dropdown-menu class="dropdown_area" v-if="btnshow">

            <template v-if="giant_opo_userdata.role == 'master'">
              <van-dropdown-item class="self_dropdown" v-model="sbu" :options="sbuList" @change="changeSBU" />
            </template>

            <template v-if="giant_opo_userdata.role == 'master' || giant_opo_userdata.role == 'sbu'">
              <van-dropdown-item class="self_dropdown" v-model="dealer" :options="dealerList" @change="changeDealer"
                v-if="childNavType == 2 || childNavType == 3 || childNavType == 4" />
            </template>

            <template
              v-if="giant_opo_userdata.role == 'master' || giant_opo_userdata.role == 'sbu' || giant_opo_userdata.role == 'dealer'">
              <van-dropdown-item class="self_dropdown" v-model="store" :options="storeList" @change="changeStore"
                v-if="childNavType == 3 || childNavType == 4" />
            </template>
          </van-dropdown-menu>


          <!-- 查询开始 -->

          <template v-if="childNavType == 4">
            <form action="">
              <van-search v-model="keyword" placeholder="请输职员名称" @search="onSearch" @clear="onclear"></van-search>
            </form>
          </template>
          <!-- 查询结束 -->


          <div class="not_full_main">
            <div class="live_list_box" id="live_list_box">
              <div class="live_list_title" :style="{ width: childNavType == 4 ? '1040px' : '800px' }">

                <template v-if="btnshow">
                  <template v-if="giant_opo_userdata.role == 'master'">
                    <div class="title_item">SBU</div>
                  </template>

                  <template v-if="giant_opo_userdata.role == 'master' || giant_opo_userdata.role == 'sbu'">
                    <div class="title_item" v-if="childNavType == 2 || childNavType == 3 || childNavType == 4">
                      经销商
                    </div>
                  </template>

                  <template
                    v-if="giant_opo_userdata.role == 'master' || giant_opo_userdata.role == 'sbu' || giant_opo_userdata.role == 'dealer'">
                    <div class="title_item" v-if="childNavType == 3 || childNavType == 4">
                      门店
                    </div>
                  </template>
                </template>

                <div class="title_item" v-if="childNavType == 4">职员名称</div>
                <div class="title_item" v-if="childNavType == 4">当前身份</div>
                <div class="title_item">{{ activetime == 2  ? '总客户数' : '新增客户数' }}</div>
                <div class="title_item">待分配客户数</div>
                <div class="title_item">活码拉新客户数</div>
                <div class="title_item">活动裂变客户数</div>
                <div class="title_item">企业微信客户数</div>
                <div class="title_item" v-if="childNavType == 4">是否在职</div>
              </div>
              <div class="club_list" @scroll.passive="loadImg($event)" ref="content_item"
                :style="{ width: childNavType == 4 ? '1040px' : '800px' }">
                <div class="club_item" v-for="(it, id) in downloadList" :key="id">


                  <template v-if="btnshow">
                    <template v-if="giant_opo_userdata.role == 'master'">
                      <div class="title_item">{{ it.sbu }}</div>
                    </template>

                    <template v-if="giant_opo_userdata.role == 'master' || giant_opo_userdata.role == 'sbu'">
                      <div class="title_item" v-if="childNavType == 2 || childNavType == 3 || childNavType == 4">{{
            it.dealer_name }} </div>
                    </template>

                    <template
                      v-if="giant_opo_userdata.role == 'master' || giant_opo_userdata.role == 'sbu' || giant_opo_userdata.role == 'dealer'">
                      <div class="title_item" v-if="childNavType == 3 || childNavType == 4">
                        {{ it.shop_name }}</div>
                    </template>
                  </template>


                  <div class="title_item" v-if="childNavType == 4">{{ it.staff_name }}</div>
                  <div class="title_item" v-if="childNavType == 4">{{ it.nature_id }}</div>
                  <div class="title_item">{{ it.total_num }}</div>
                  <div class="title_item">{{ it.assign_num }}</div>
                  <div class="title_item">{{ it.hm_num }}</div>
                  <div class="title_item">{{ it.lx_num }}</div>
                  <div class="title_item">{{ it.wx_num }}</div>
                  <div class="title_item" v-if="childNavType == 4">{{ it.status }}</div>
                </div>
                <div class="no_data_area" style="margin-top: 0;" v-if="nothing_list == 2">
                  <div class="no_data"></div>
                  <div class="no_staff">
                    <span>暂无相关数据</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 选择时间 -->
    <DatePlug ref="dateplug" v-on:exportDate="getDatejson" dateType="range" :datejson="datejson"
      :datesection="datesection" :maxrange="maxrange"></DatePlug>

    <van-loading class="loading-bg" type="spinner" v-show="pageLoading" vertical size="28px" text-color="#4e66ff">
      加载中，请稍后
    </van-loading>
  </div>
</template>

<script>
import { mapState } from "vuex";
import moment from "moment";
export default {
  name: "ReportFormsOne",
  components: {},
  props: {},
  data() {
    return {
      showPopover: false,
      activetime: 0,
      // 时间
      time: '',
      datejson: [],
      datesection: ['2010-01-01', this.dateformat(new Date().getTime(), 'YYYY-MM-DD')],
      maxrange: "",
      start_time: "",
      end_time: "",
      // 
      page: 1,
      downloadList: [],
      // 下拉信息
      sbu: "", //sbuCode
      sbuList: [{ text: "请选择SBU", value: "" }], //sbu下拉列表
      dealer: "", //经销商
      dealerList: [{ text: "全部经销商", value: "" }], //经销商下拉列表
      store: "", //门店
      storeList: [{ text: "全部门店", value: "" }], //门店；列表
      childNavType: 1,
      select_code: "",
      select_role: "",

      // 数据存储
      customerdata: {
        assign_num: "0",
        hm_num: "0",
        lx_num: "0",
        repeat_num: "0",
        total_num: "0",
        wx_num: "0"
      },
      nothing_list: 0, //0 不显示 1 载入中 2 无内容
      pageLoading: false,
      // 按钮展示隐藏
      keyword: "",
      btnshow: false,
      moreShowBoolen: false,
      scrollTimer: null,
    };
  },
  computed: {
    ...mapState("login", ["token", "giant_opo_userdata"]),
  },
  watch: {},
  created() {
    // const _this = this;
  },
  mounted() {
    const _this = this;




    //  = 0
    // 
    if (_this.giant_opo_userdata.role == "master") {
      _this.getSBUList();
      _this.btnshow = true
    }
    if (_this.giant_opo_userdata.role == "sbu") {
      _this.childNavType = 2
      _this.btnshow = true
      _this.sbu = _this.giant_opo_userdata.roleCode
      _this.getDealerList();
    }
    if (_this.giant_opo_userdata.role == "dealer") {
      _this.childNavType = 3
      _this.btnshow = true
      _this.dealer = _this.giant_opo_userdata.roleCode
      _this.getStoreList();
    }
    if (_this.giant_opo_userdata.role == "store") {
      _this.childNavType = 4
      _this.btnshow = false
    }
    _this.gettime(0)
  },
  destroyed() { },
  methods: {
    getCustomerData() {
      const _this = this;
      let tmpParams = {
        start_time: _this.start_time,
        end_time: _this.end_time,
      };
      _this.axios
        .post(
          _this.$store.state.api.qywx_api +
          "/data/getCustomerData",
          _this.qs.stringify(tmpParams),
          {
            headers: {
              token: _this.token,
            },
          }
        )
        .then(function (res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              let { data } = res.data;
              _this.customerdata = {
                assign_num: data.assign_num ? data.assign_num : '0',
                hm_num: data.hm_num ? data.hm_num : '0',
                lx_num: data.lx_num ? data.lx_num : '0',
                repeat_num: data.repeat_num ? data.repeat_num : '0',
                total_num: data.total_num ? data.total_num : '0',
                wx_num: data.wx_num ? data.wx_num : '0',
              }
            } else {
              _this.$toast(res.data.msg || "出现了一些问题");
            }
          } else {
            _this.$toast(res.data.msg ? res.data.msg : "请求失败");
          }
        })
        .catch(function (error) {
          if (error.response) {
            if (error.response.status == 503) {
              _this.countDown503();
            }
          }
        });
    },
    // 时间选择开始
    // 选择时间
    gettime(val) {
      const _this = this;
      _this.activetime = val
      if (val == 0) {
        // 创建一个当前日期的 Date 对象
        const date = new Date();
        // 获取当前月份
        const currentMonth = date.getMonth() + 1; // 月份从 0 开始，所以需要加 1
        // 获取当前月份的起始时间
        const startTime = `${date.getFullYear()}-${currentMonth.toString().padStart(2, '0')}-01`;
        // 00:00:00
        // 获取当前月份的终止时间
        let endTime = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
        // ${'23:59:59'}
        _this.start_time = startTime
        _this.end_time = endTime
        _this.time = ''
        _this.getCustomerData()
        _this.getdownloadList(true, 0)
      } else if (val == 2) {
        _this.start_time = ''
        _this.end_time = ''
        _this.time = ''
        _this.getCustomerData()
        _this.getdownloadList(true, 0)
      } else {
        _this.addBirthDate()
      }
    },
    addBirthDate() {
      const _this = this;
      _this.datejson = [_this.start_time, _this.end_time]
      setTimeout(() => {
        _this.$refs.dateplug.showPopup();
      }, 100);
    },
    //这里是从时间子组件返回的时间信息
    getDatejson(data) {
      const _this = this;
      _this.start_time = data.startTime
      _this.end_time = data.endTime
      _this.time = data.startTime + '~' + data.endTime
      _this.getCustomerData()
      _this.getdownloadList(true, 0)
    },
    formatDate(date) {
      const year = date.getFullYear();
      let month = date.getMonth() + 1;
      let weekday = date.getDate();
      if (month < 10) {
        month = `0${month}`;
      }
      if (weekday < 10) {
        weekday = `0${weekday}`;
      }
      return (`${year}-${month}-${weekday}`);
    },
    // 时间选择结束
    // searchBtn() {
    //   let _this = this;
    //   _this.page = 1;
    //   _this.downloadList = [];
    // },

    // 清除时间
    cleartime() {
      const _this = this
      _this.start_time = ''
      _this.end_time = ''
      _this.time = ''
      _this.getCustomerData()
      _this.getdownloadList(true, 0)
    },
    onSearch(val) {
      const _this = this
      _this.keyword = val
      _this.getdownloadList(true, 0)
    },
    onclear() {
      const _this = this
      _this.getdownloadList(true, 0)
      _this.keyword = ''
    },
    // 初始化查询职员接口
    getdownloadList(val, exportval) {
      let _this = this;
      _this.nothing_list = 0
      if (exportval == 0) {
        _this.pageLoading = true
      } else {
        _this.pageLoading = false
      }
      if (val) {
        _this.page = 1
        _this.downloadList = []
      }
      let tmpParams = {
        keyword: _this.keyword,
        source_type: _this.childNavType,
        select_role: _this.select_role,
        select_code: _this.select_code,
        start_time: _this.start_time,
        end_time: _this.end_time,
        page: _this.page,
        page_size: 20,
        is_export: exportval
      };
      _this.axios
        .post(
          _this.$store.state.api.qywx_api +
          "/data/getCustomerDetailData",
          _this.qs.stringify(tmpParams),
          {
            headers: {
              token: _this.token,
            },
          }
        )
        .then(function (res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              if (tmpParams.is_export == 0) {
                let { data } = res.data;
                if (data.length == 0 && _this.page == 1) {
                  _this.nothing_list = 2
                  _this.moreShowBoolen = false 
                } else {
                  _this.nothing_list = 0
                  _this.moreShowBoolen = true
                  _this.page++
                }
                data.forEach(it => {
                  _this.downloadList.push({
                    sbu: it.sbu ? it.sbu : '--',
                    dealer_name: it.dealer_name ? it.dealer_name : '--',
                    shop_name: it.shop_name ? it.shop_name : '--',
                    // sbu: it.sbu ? it.sbu : '--',
                    total_num: it.total_num ? it.total_num : '--',//总客户数
                    assign_num: it.assign_num ? it.assign_num : '--', //待分配数
                    hm_num: it.hm_num ? it.hm_num : '--',//活码客户数
                    lx_num: it.lx_num ? it.lx_num : '--',//拉新客户数
                    wx_num: it.wx_num ? it.wx_num : '--',//企业微信客户数
                    staff_name: it.staff_name ? it.staff_name : '--',//职员名称
                    status: it.status == '0' ? '在职' : it.status == '2' ? '停用' : '离职',//职员名称
                    nature_id: it.nature_id == '1' ? '总部' : it.nature_id == '2' ? 'SBU' : it.nature_id == '3' ? '经销商' : it.nature_id == '4' ? '门店' : '职员',//职员名称
                  })
                })
                _this.pageLoading = false
              } else {
                _this.$dialog.confirm({
                  closeOnPopstate: true,//页面回退时自动关闭
                  title: '导出任务执行成功',
                  confirmButtonText: '前往下载中心',
                }).then(() => {
                  _this.$router.push({ name: 'DownloadCenter' })
                }).catch(() => {
                  _this.pageLoading = false
                });
              }
              // 
            } else {
              _this.nothing_list = 2
              _this.pageLoading = false
              _this.moreShowBoolen = false 
              _this.$toast(res.data.msg || "出现了一些问题");
            }
          } else {
            _this.nothing_list = 2
            _this.pageLoading = false
            _this.moreShowBoolen = false 
            _this.$toast(res.data.msg ? res.data.msg : "请求失败");
          }
        })
        .catch(function (error) {
          if (error.response) {
            if (error.response.status == 503) {
              _this.countDown503();
            }
          }
          _this.nothing_list = 2
          _this.pageLoading = false
          _this.moreShowBoolen = false 
        });
    },

    // 下滑分页
    loadImg(event) {
      const _this = this;
      console.log(_this.moreShowBoolen, 'moreShowBoolen')
      clearTimeout(this.scrollTimer);
      this.scrollTimer = setTimeout(() => {
        // 滚动条距离底部的距离scrollBottom
        let scrollBottom = event.target.scrollHeight - event.target.scrollTop - event.target.clientHeight;
        if (scrollBottom < 40) {
          if (_this.moreShowBoolen) {
             _this.getdownloadList(false)
          }
        }
      }, 300);
    },


    // 导出
    exportBtn() {
      let _this = this;
      _this.getdownloadList(false, 1)
    },
    // ====sbu经销商门店下拉 开始====
    changeSBU() {
      let _this = this;
      _this.dealer = "";
      _this.store = "";
      _this.dealerList = [{ text: "全部经销商", value: "" }]; //经销商下拉列表
      _this.storeList = [{ text: "全部门店", value: "" }]; //门店；列表
      _this.getDealerList();
      // 

      if (_this.sbu != '') {
        _this.select_role = 'sbu'
        _this.select_code = _this.sbu
      } else {
        _this.select_role = ''
        _this.select_code = ''
      }
      _this.getdownloadList(true, 0)
    },
    changeDealer() {
      let _this = this;
      _this.store = "";
      _this.storeList = [{ text: "全部门店", value: "" }]; //门店；列表;
      _this.getStoreList();

      // 
      if (_this.dealer != '') {
        _this.select_role = 'dealer'
        _this.select_code = _this.dealer
      } else {
        _this.select_role = ''
        _this.select_code = ''
      }
      _this.getdownloadList(true, 0)
    },
    changeStore() {
      let _this = this;
      if (_this.store != '') {
        _this.select_role = 'store'
        _this.select_code = _this.store
      } else {
        _this.select_role = ''
        _this.select_code = ''
      }
      _this.getdownloadList(true, 0)
    },
    // 查询SBU下拉
    async getSBUList() {
      let _this = this;
      let params = {
        role: "master",
        roleCode: "",
        is_dept: "0", //1-查询部门 0 除了部门
        nature_id: "2", //
      };
      let res = await _this.getOrgList(params);
      if (res.status == "1") {
        res.data.forEach((item) => {
          item.text = item.code;
          item.value = item.code;
        });
        res.data.unshift({
          text: "全部SBU",
          value: "",
        });
        _this.sbuList = res.data.concat();
        _this.sbu = _this.sbuList[0].value;
      } else {
        _this.$toast(res.msg);
      }
    },
    // 查询经销商下拉（非群组）
    async getDealerList() {
      let _this = this;
      let params = {
        role: "sbu",
        roleCode: _this.sbu,
        is_dept: "0", //1-查询部门 0 除了部门
        nature_id: "3", //
      };
      let res = await _this.getOrgList(params);
      if (res.status == "1") {
        _this.dealerList = res.data;
        _this.dealerList.forEach((item) => {
          item.text = item.name;
          item.value = item.code;
        });
        _this.dealerList.unshift({
          text: "全部经销商",
          value: "",
        });
        _this.dealer = _this.dealerList[0].value;
      } else {
        _this.$toast(res.msg);
      }
    },
    // 查询经销商/门店下拉(群组)
    getgroupCode(type) {
      const _this = this;
      let tmpParams = {
        access_code: "giant_scrm",
        select_nature_id: type,
        is_list: 0,
      };
      _this.axios
        .post(
          _this.$store.state.api.opo_php_api +
          "/opo/api.php/access/group_node_code",
          _this.qs.stringify(tmpParams),
          {
            headers: {
              token: _this.token,
            },
          }
        )
        .then(function (res) {
          if (res.status == 200) {
            if (typeof res.data != "object") {
              try {
                res.data = JSON.parse(res.data);
              } catch (error) {
                _this.$toast("拉取数据失败：接口异常");
                console.error(error);
                return false;
              }
            }
            if (res.data.status == 1) {
              _this.groupCode = res.data.data.join(",");
              // 根据群组查询经销商或者门店
              _this.getGroupDealerStoreList(type);
            } else if (res.data.status == 302 || res.data.status == 303) {
              if (!_this.$store.state.login.showBackLogin) {
                _this.$store.dispatch("login/changeBackLogin", true);
                _this.goToLogin(res.data.msg);
              }
            } else {
              _this.$toast(res.data.msg ? res.data.msg : "请求失败");
            }
          } else {
            _this.$toast(res.data.msg ? res.data.msg : "请求失败");
          }
        })
        .catch(function (error) {
          if (error.response && error.response.status == 503) {
            _this.countDown503();
          }
        });
    },
    getGroupDealerStoreList(type) {
      let _this = this;
      let params = {
        codes: type == "4" ? _this.groupCode : "", //如果是查询门店
        cycnos: type == "3" ? _this.groupCode : "",
        is_dept: 0,
        nature_id: type,
        pageSize: 100000,
        pageNo: 1,
        status: 1,
        role: type == "3" ? "sbu" : "dealer",
        roleCode: _this.giant_opo_userdata.roleCode,
        name: "",
      };
      _this.axios
        .post(
          _this.$store.state.api.opo_store_api +
          "/api/organization/selectPageByParams",
          _this.qs.stringify(params),
          {
            //  删除token
            transformRequest: [
              function (data, headers) {
                if (headers.common.token) {
                  delete headers.common.token;
                }

                return data;
              },
            ],
          }
        )
        .then(function (res) {
          if (res.status == 200) {
            if (typeof res.data != "object") {
              try {
                res.data = JSON.parse(res.data);
              } catch (error) {
                _this.$toast("拉取数据失败：接口异常");
                console.error(error);
                return false;
              }
            }
            if (res.data.status == 1) {
              let data = res.data.data;
              if (data.length > 0) {
                data.forEach((item) => {
                  item.text = item.name;
                  item.value = item.code;
                });
                if (type == "3") {
                  data.unshift({
                    text: "全部经销商",
                    value: "",
                  });
                  _this.dealerList = data.concat();
                  _this.dealer = _this.dealerList[0].value;
                } else {
                  data.unshift({
                    text: "全部门店",
                    value: "",
                  });

                  _this.storeList = data.concat();
                  _this.store = _this.storeList[0].value;
                }
              } else {
                if (type == "3") {
                  _this.sbu = _this.giant_opo_userdata.roleCode;
                  _this.getDealerList();
                } else {
                  _this.dealer = _this.giant_opo_userdata.roleCode;
                  _this.getStoreList();
                }
              }
            } else {
              _this.$toast(res.data.msg || "出现了一些问题");
            }
          } else {
            _this.$toast(res.data.msg || "出现了一些问题");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 查询门店下拉
    async getStoreList() {
      let _this = this;
      let params = {
        role: "dealer",
        roleCode: _this.dealer,
        is_dept: "0", //1-查询部门 0 除了部门
        nature_id: "4", //
      };
      let res = await _this.getOrgList(params);
      if (res.status == "1") {
        _this.storeList = res.data;
        _this.storeList.forEach((item) => {
          item.text = item.name;
          item.value = item.code;
        });
        _this.storeList.unshift({
          text: "全部门店",
          value: "",
        });
        _this.store = _this.storeList[0].value;
      } else {
        _this.$toast(res.msg);
      }
    },
    //  查询公共接口
    getOrgList(params) {
      let _this = this;
      return new Promise((resolve, reject) => {
        _this.axios
          .post(
            _this.$store.state.api.opo_store_api +
            "/api/organization/selectByParams",
            _this.qs.stringify(params),
            {
              //  删除token
              transformRequest: [
                function (data, headers) {
                  if (headers.common.token) {
                    delete headers.common.token;
                  }
                  return data;
                },
              ],
            }
          )
          .then(function (res) {
            if (res.status == 200) {
              if (typeof res.data != "object") {
                try {
                  res.data = JSON.parse(res.data);
                } catch (error) {
                  _this.$toast("拉取数据失败：接口异常");
                  console.error(error);
                  return false;
                }
              }
              if (res.data.status == 1) {
                resolve(res.data);
              } else {
                _this.$toast(res.data.msg || "出现了一些问题");
              }
            } else {
              _this.$toast(res.data.msg || "出现了一些问题");
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      });
    },
    // ====sbu经销商门店下拉 结束====
    changeChildNavtype(type) {
      let _this = this;
      // 下部滚轮光标在最左边
      document.getElementById('live_list_box').scrollLeft = 0
      if (_this.giant_opo_userdata.role == "master") {
        _this.getSBUList();
      } else if (_this.giant_opo_userdata.role == "sbu") {
        _this.sbu = _this.giant_opo_userdata.roleCode
        if (type != 1) {
          _this.btnshow = true
        } else {
          _this.btnshow = false
        }
        _this.getDealerList();
      } else if (_this.giant_opo_userdata.role == "dealer") {
        if (type != 2) {
          _this.btnshow = true
        } else {
          _this.btnshow = false
        }
        _this.dealer = _this.giant_opo_userdata.roleCode
        _this.getStoreList();
      }
      if (type == 1) {
        _this.keyword = ''
        _this.select_role = ''
        _this.sbu = "" //sbuCode
        _this.sbuList = [{ text: "请选择SBU", value: "" }] //sbu下拉列表
      } else if (type == 2) {
        _this.keyword = ''
        _this.select_role = ''
        _this.sbu = "" //sbuCode
        _this.dealer = "" //经销商
        _this.sbuList = [{ text: "请选择SBU", value: "" }] //sbu下拉列表
        _this.dealerList = [{ text: "全部经销商", value: "" }] //经销商下拉列表
      } else if (type == 3) {
        _this.keyword = ''
        _this.select_role = ''
        _this.sbu = "" //sbuCode
        _this.dealer = "" //经销商
        _this.store = "" //门店
        _this.sbuList = [{ text: "请选择SBU", value: "" }] //sbu下拉列表
        _this.dealerList = [{ text: "全部经销商", value: "" }] //经销商下拉列表
        _this.storeList = [{ text: "全部门店", value: "" }] //门店；列表
      }
      // 职员先传空
      else if (type == 4) {
        _this.select_role = ''
      }


      _this.$refs.content_item.scrollTop = 0
      _this.page = 0
      _this.select_code = ''
      _this.childNavType = type;
      _this.getdownloadList(true, 0)


      // _this.getSBUList();
      // _this.getgroupCode(3);
      // _this.getgroupCode(4);

    },
  },
};
</script>

<style lang="less" scoped>
// .van-notice-bar{
//   align-items: normal;
// }
// /deep/ .van-icon{
//   padding-top: 4px;
// }
.van-search {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0;
  padding-bottom: 10px;
  background-color: #fff;
  overflow: hidden;
}

.not_full_main {
  overflow-y: auto;

  .live_list_box {
    overflow-x: scroll;
    overflow-y: hidden;

    .live_list_title {
      // display: flex;
      // justify-content: flex-start;
      // flex-wrap: nowrap;
      // height: 36px;
      // line-height: 36px;


      display: flex;
      background: #EDF0F8;
      height: 36px;
      line-height: 36px;
      // width: 780px;
      margin: 0 auto;
      overflow-y: auto;

      .title_item {
        flex: 1;
        width: 100px;
        word-break: keep-all;
        padding-left: 10px;
        text-align: left;
        // white-space: nowrap; //不换行
        // overflow: hidden; //超出部分隐藏
        // text-overflow: ellipsis; //文本溢出显示省略号
      }
    }

    .club_list {
      color: #34497e;
      // width: 780px;
      margin: 0 auto;
      height: 400px;
      overflow-x: hidden;

      .club_item {
        // width: 780px;
        background: #fff;
        color: #34497e;
        display: flex;
        align-items: center;
        padding: 15px 0;
        // height: 36px;
        // line-height: 36px;

        .title_item {
          flex: 1;
          width: 100px;
          padding-left: 10px;
          text-align: left;
          word-wrap: break-word;
          word-break: break-all;
          // white-space: wrap; //不换行
          // overflow: hidden; //超出部分隐藏
          // text-overflow: ellipsis; //文本溢出显示省略号
        }
      }

      .club_item:nth-child(2n) {
        background: rgba(237, 240, 248, .4) !important;
      }
    }
  }
}


.not_full_main .live_list_box::-webkit-scrollbar {
  width: 2%;
  height: 5px;
  overflow: hidden;
  border-radius: 5px;
  background: inherit;
}

.not_full_main .live_list_box::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #ccc;
  // -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.not_full_main .live_list_box::-webkit-scrollbar-track {
  // -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
</style>

<style lang="less" scoped>
@bluecolor: #4e66ff;

.time_box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 5px;

  .time {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    flex: 1;
    margin: 0 5px;
    text-align: center;
  }
}

.time_active {
  border: 1px solid #4e66ff !important;
  color: #4e66ff !important;
  // background-color: #4e66ff;
}

.down_load_center {
  background: #edf0f8;
  min-height: 100vh;
}

.dlineui_header .header_rightarea {
  color: #4e66ff;
  font-size: 15px;
  cursor: pointer;
}

/deep/ .dlineui_header {
  padding-bottom: 3px;
}



.detailed_main {
  padding: 10px 15px 0px 15px;
  font-family: PingFang SC-Regular, PingFang SC;
  max-width: 640px;
  margin: 0 auto;

  .item_detailed {
    padding: 15px;
    // margin-bottom: 15px;
    border-radius: 5px;
    background: #fff;

    .item_detailed_top {
      display: flex;
      justify-content: space-between;
    }

    .child_list_nav {
      display: flex;
      align-items: center;
      // padding: 5px 20%;
      // border-top: 1px solid rgba(0, 0, 0, 0.1);
      max-width: 640px;
      margin-bottom: 5px;
      position: relative;


      .child_item_nav {
        // flex: 1;
        margin-right: 20px;
        line-height: 40px;
        color: #25345A;
        text-align: center;
        position: relative;
        font-size: 16px;
        font-weight: 400;
        cursor: pointer;

        &.active {
          font-weight: 600;
          transition: 0.3s;

          &::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 30px;
            height: 4px;
            border-radius: 5px;
            // background-image: linear-gradient(to right, #0022ff, #0022ff);
            background-color: #4983ff;
          }
        }
      }
    }
  }
}


/deep/ .van-dropdown-menu {
  margin-bottom: 12px;

  .van-dropdown-menu__bar {
    height: 36px;
    box-shadow: none;

    .van-dropdown-menu__item {
      border: 1px solid #edf0f8;
      border-radius: 5px;
      margin-right: 5px;

      &:last-child {
        margin-right: 0px;
      }
    }
  }

  .van-dropdown-menu__title {
    font-size: 14px;
    color: #25345a;
  }
}

.line {
  width: 10px;
  height: 10px;
  background-color: #4983ff;
  border-radius: 10px;
  display: inline-block;
  margin-right: 5px;
}


.line_round {
  width: 10px;
  height: 10px;
  // background-color: #4983ff;
  // border: 1px solid #4983ff;
  border-radius: 5px;
  display: inline-block;
  margin-right: 5px;
  margin-top: 5px;
}

.common-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card {
  flex: 1;
  padding: 10px;
  box-shadow: 0px 0px 10px 0px #ccc;
  margin: 5px;
  font-size: 14px;
  border-radius: 5px;

  .card_number {
    color: #25345A;
    font-size: 24px;
    font-weight: 700;
    margin-top: 10px;
    margin-left: 10px;
  }
}

.tip_icon_num {
  color: #8196CB;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.tip_icon {
  height: 15px;
  width: 15px;
  background-image: url("~@/assets/img/bg-question.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  display: inline-block;
  margin-left: 6px;
}
</style>

// 查询不到数据
.no_data_area {
  color: #A5B4DA;
  font-size: 14px;
  width: 100%;
  text-align: center;
  margin-top: 40%;

  .no_data {
    width: 224px;
    background-image: url("~@/assets/img/no_data.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 224px;
    margin: 0 auto;
  }

}