yos_web/src/views/clueData/index.vue

<template>
  <div style="background: #f8f8f8;">
    <normalLayout>
      <template #refresh>
        <el-button size="mini" type="text" style="margin-right: 15px;color: #3874f6;font-size: 14px" @click="toTop">返回顶部</el-button>
<!--        <i class="el-icon-refresh-right"></i>-->
      </template>
      <template #content>
        <div style="overflow: auto;height: calc(100vh - 220px)" ref="rollRef" @scroll="handleScroll">
          <div style="display: flex;justify-content: space-between;margin: 10px 24px 20px 24px;">
            <div>
              <div class="inline-16">
                <label  class="search__label" >部门:</label>
                <!--              <el-cascader ref="selectdep" size="small" v-model="departmentid" :options="deplist" :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}"  @change="selectDep"  clearable></el-cascader>-->
                <el-cascader class="inline-16" placement="bottom" ref="selectdep" size="small" v-model="depment" :options="deplist" :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}"  @change="selectDep" clearable></el-cascader>
              </div>
              <div class="inline-16">
                <label  class="search__label" >业务员:</label>
                <el-select v-model="person" filterable placeholder="请选择" size="small" clearable @change="selectPerson">
                  <el-option
                      v-for="item in personnelList"
                      :key="item.index"
                      :label="item.name"
                      :value="item.userid">
                  </el-option>
                </el-select>
              </div>
              <div class="mt-10 inline-16">
                <p class="search__label">状态:</p>
                <el-select v-model="isleave" clearable style="margin-right:10px" size="small" placeholder="请选择状态" @change="leaveChange" >
                  <el-option label="在职" value="1"></el-option>
                  <el-option label="离职" value="2"></el-option>
                </el-select>
              </div>
            </div>
            <div>
              <btnSelect :btn-title="['全部','本年','本季','本月','去年']" :date-type="dateType" @btnClick="btnClick"></btnSelect>
            </div>
          </div>

          <!--  数字看板      -->
          <digitalSigns ref="digitalSigns" :person="person" :depment="departmentid" :dateType="dateType" :isleave="isleave" :userName="userName"></digitalSigns>
          <!--  线索新增      -->
          <clueAdd ref="clueAdd" :dataid="departmentid" :scrollHeight="scrollData" :windowWidth="windowWidth" @backFull="backFull" ></clueAdd>
          <!--  线索跟进      -->
          <clueFollow ref="clueFollow" :dataid="departmentid" :scrollHeight="scrollData" :windowWidth="windowWidth" @backFull="backFull"></clueFollow>
          <!--  线索转化      -->
          <clueChange ref="clueChange" :dataid="departmentid" :scrollHeight="scrollData" :windowWidth="windowWidth" @backFull="backFull"></clueChange>
          <!--  有效线索未跟进天数      -->
          <clueUnFollow ref="clueUnFollow" :dataid="departmentid" :scrollHeight="scrollData" :windowWidth="windowWidth" @backFull="backFull"></clueUnFollow>
        </div>
      </template>
    </normalLayout>
  </div>
</template>

<script>
import digitalSigns from "@/views/clueData/modules/digitalSigns";
import clueAdd from "@/views/clueData/modules/clueAdd";
import clueFollow from "@/views/clueData/modules/clueFollow";
import clueChange from "@/views/clueData/modules/clueChange";
import clueUnFollow from "@/views/clueData/modules/clueUnFollow";
import normalLayout from '@/components/normal-basic-layout/normalNew'
import btnSelect from "@/components/btn_select/btnSelect";
export default {
  name: "index",
  components:{normalLayout,digitalSigns,clueAdd,clueFollow,clueChange,clueUnFollow,btnSelect},
  data(){
    return {
      depment:'',
      departmentid:'',
      person:'0028',
      isleave:'1',
      deplist:[],
      personnelList:[],
      depmentParam:{
        "id": 20230620102004,
        "content": {
          "isleave":1
        }
      },
      scrollData:'',
      dateType:'全部',
      windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
      userName:JSON.parse(window.sessionStorage.getItem('active_account')).name
    }
  },
  watch: {
    windowWidth (val) {
      console.log("实时屏幕宽度：",val );
    }
  },
  methods:{
    btnClick(data){
      this.dateType = data
      this.$refs.digitalSigns.listData(this.$refs.digitalSigns.param.content.dataid,data)
    },
    async departmentrtment() {
      const res = await this.$api.requested(this.depmentParam)
      this.deplist = this.createMenu(res.data.dep)
      this.personnelList = res.data.hr
      this.depment = ''
      this.person = JSON.parse(window.sessionStorage.getItem('active_account')).name
   /*   this.departmentid = res.data.dep[0].departmentid*/
      const userid = JSON.parse(sessionStorage.getItem('active_account')).userid
      this.otherMethod(userid)
    },
    /*其他页面调用*/
    otherMethod(dataid){
      const userName = JSON.parse(sessionStorage.getItem('active_account')).name
      /*数字看板*/
      this.$refs.digitalSigns.param.content.type = '0'
      this.$refs.digitalSigns.listData(dataid,this.dateType)
      /*线索新增*/
      this.$refs.clueAdd.$refs.departmentSalesperson.depment = ''
      this.$refs.clueAdd.$refs.departmentSalesperson.deplist = this.deplist
      this.$refs.clueAdd.$refs.departmentSalesperson.person = userName
      this.$refs.clueAdd.param.content.type = '0'
      this.$refs.clueAdd.$refs.departmentSalesperson.personnelList = this.personnelList
      this.$refs.clueAdd.listData(dataid)
      /*线索跟进*/
      this.$refs.clueFollow.$refs.departmentSalesperson.depment = ''
      this.$refs.clueFollow.$refs.departmentSalesperson.deplist = this.deplist
      this.$refs.clueFollow.$refs.departmentSalesperson.person = userName
      this.$refs.clueFollow.param.content.type = '0'
      this.$refs.clueFollow.$refs.departmentSalesperson.personnelList = this.personnelList
      this.$refs.clueFollow.listData(dataid)
      /*线索转化*/
      this.$refs.clueChange.$refs.departmentSalesperson.depment = ''
      this.$refs.clueChange.$refs.departmentSalesperson.deplist = this.deplist
      this.$refs.clueChange.$refs.departmentSalesperson.person = userName
      this.$refs.clueChange.param.content.type = '0'
      this.$refs.clueChange.$refs.departmentSalesperson.personnelList = this.personnelList
      this.$refs.clueChange.listData(dataid)
      /*有效线索未跟进天数*/
      this.$refs.clueUnFollow.$refs.departmentSalesperson.depment = ''
      this.$refs.clueUnFollow.$refs.departmentSalesperson.deplist = this.deplist
      this.$refs.clueUnFollow.$refs.departmentSalesperson.person = userName
      this.$refs.clueUnFollow.param.content.type = '0'
      this.$refs.clueUnFollow.$refs.departmentSalesperson.personnelList = this.personnelList
      this.$refs.clueUnFollow.listData(dataid)
    },
    /*其他页面调用图表*/
    otherModel(dataid,type,isleave,state){
      /*数字看板*/
      this.$refs.digitalSigns.param.content.type = type
      this.$refs.digitalSigns.param.content.where.isleave = isleave
      this.$refs.digitalSigns.listData(dataid,this.dateType)
      /*线索新增*/
      this.$refs.clueAdd.$refs.departmentSalesperson.depment = type == '1'?dataid:''
      this.$refs.clueAdd.$refs.departmentSalesperson.deplist = this.deplist
      this.$refs.clueAdd.$refs.departmentSalesperson.person = state?'':type == '0'?dataid:''
      this.$refs.clueAdd.param.content.type = type
      this.$refs.clueAdd.$refs.departmentSalesperson.personnelList = this.personnelList
      this.$refs.clueAdd.queryModel(dataid,isleave)
      /*线索跟进*/
      this.$refs.clueFollow.$refs.departmentSalesperson.depment = type == '1'?dataid:''
      this.$refs.clueFollow.$refs.departmentSalesperson.deplist = this.deplist
      this.$refs.clueFollow.$refs.departmentSalesperson.person = state?'':type == '0'?dataid:''
      this.$refs.clueFollow.param.content.type = type
      this.$refs.clueFollow.$refs.departmentSalesperson.personnelList = this.personnelList
      this.$refs.clueFollow.queryModel(dataid,isleave)
      /*线索转化*/
      this.$refs.clueChange.$refs.departmentSalesperson.depment = type == '1'?dataid:''
      this.$refs.clueChange.$refs.departmentSalesperson.deplist = this.deplist
      this.$refs.clueChange.$refs.departmentSalesperson.person = state?'':type == '0'?dataid:''
      this.$refs.clueChange.param.content.type = type
      this.$refs.clueChange.$refs.departmentSalesperson.personnelList = this.personnelList
      this.$refs.clueChange.queryModel(dataid,isleave)
      /*有效线索未跟进天数*/
      this.$refs.clueUnFollow.$refs.departmentSalesperson.depment = type == '1'?dataid:''
      this.$refs.clueUnFollow.$refs.departmentSalesperson.deplist = this.deplist
      this.$refs.clueUnFollow.$refs.departmentSalesperson.person = state?'':type == '0'?dataid:''
      this.$refs.clueUnFollow.param.content.type = type
      this.$refs.clueUnFollow.$refs.departmentSalesperson.personnelList = this.personnelList
      this.$refs.clueUnFollow.queryModel(dataid,isleave)
    },
    createMenu (array) {
      var that = this
      let arr = []
      function convertToElementTree(node) {
        // 新节点
        if (node.subdep.length === 0){
          var elNode = {
            label: node["depname"],
            parentid:node['parentid'],
            parentname:node['parentname'],
            departmentid:node["departmentid"],
            value:node["departmentid"],
            remarks:node["remarks"],
            isused:node["isused"],
            changedate:node['changedate'],
            changeby:node['changeby'],
            createdate:node['createdate'],
            createby:node['createby'],
            depno:node['depno'],
            disabled:that.pageOnlyRead,
          }
        }else {
          var elNode = {
            label: node["depname"],
            parentid:node['parentid'],
            parentname:node['parentname'],
            departmentid:node["departmentid"],
            value:node["departmentid"],
            remarks:node["remarks"],
            isused:node["isused"],
            changedate:node['changedate'],
            changeby:node['changeby'],
            createdate:node['createdate'],
            createby:node['createby'],
            depno:node['depno'],
            disabled:that.pageOnlyRead,
            children: []
          }
        }
        if (node.subdep && node.subdep.length > 0) {
          // 如果存在子节点
          for (var index = 0; index < node.subdep.length; index++) {
            // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
            elNode.children.push(convertToElementTree(node.subdep[index]));
          }
        }
        return elNode;
      }
      array.forEach((element) => {
        arr.push(convertToElementTree(element))
      });
      return arr
    },
    selectDep(val) {
      console.log(val,'val2222')
      if (val.length === 0){
        const userid = JSON.parse(sessionStorage.getItem('active_account')).userid
        this.otherModel(userid,'0')
      }else {
        this.person = ''
        this.departmentid = val[val.length -1]

        this.otherModel(this.departmentid,'1',this.isleave)
      }

    },
    selectPerson(val){
      this.depment = ''
      this.departmentid = ''
      this.dataid = val
      this.otherModel(val,'0',this.isleave)
    },
    leaveChange(){
      this.person = ''
      const type = this.depment?'1':'0'
      const dataid = type == 0?-1:this.departmentid
      this.otherModel(dataid,type,this.isleave,'状态')
      this.personData()
    },
    /*获取新的业务员列表*/
    async personData(){
      let param = {
        id: 20230620102004,
        content: {
          isleave:this.isleave
        },
      }
      const res = await this.$api.requested(param)
      this.personnelList = res.data.hr
      this.$refs.clueAdd.$refs.departmentSalesperson.personnelList = this.personnelList
      this.$refs.clueFollow.$refs.departmentSalesperson.personnelList = this.personnelList
      this.$refs.clueChange.$refs.departmentSalesperson.personnelList = this.personnelList
      this.$refs.clueUnFollow.$refs.departmentSalesperson.personnelList = this.personnelList
    },
    /*返回顶部*/
    toTop() {
      this.$refs.rollRef.scrollTop = 0
    },
    backFull(val){
      if (val){
        this.$refs.rollRef.scrollTop = val
      }
    },
    handleScroll(){
      this.scrollData = this.$refs.rollRef.scrollTop
    }
  },
  mounted() {
    this.departmentrtment()

    var that = this;
    // <!--把window.onresize事件挂在到mounted函数上-->
    window.onresize = () => {
      return (() => {
        window.fullWidth = document.documentElement.clientWidth;
        that.windowWidth = window.fullWidth; // 宽
      })()
    };
  }
}
</script>

<style scoped>

</style>