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="margin: 10px 24px 20px 24px;" >
            <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>
          <!--  数字看板      -->
          <digitalSigns ref="digitalSigns"></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'
export default {
  name: "index",
  components:{normalLayout,digitalSigns,clueAdd,clueFollow,clueChange,clueUnFollow},
  data(){
    return {
      depment:'',
      departmentid:'',
      deplist:[],
      personnelList:[],
      depmentParam:{
        "id": 20230620102004,
        "content": {
        }
      },
      scrollData:'',
      windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
    }
  },
  watch: {
    windowWidth (val) {
      console.log("实时屏幕宽度：",val );
    }
  },
  methods:{
    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.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.$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){
      /*数字看板*/
      this.$refs.digitalSigns.param.content.type = type
      this.$refs.digitalSigns.listData(dataid)
      /*线索新增*/
      this.$refs.clueAdd.$refs.departmentSalesperson.depment = type == '1'?dataid:''
      this.$refs.clueAdd.$refs.departmentSalesperson.deplist = this.deplist
      this.$refs.clueAdd.$refs.departmentSalesperson.person = type == '0'?dataid:''
      this.$refs.clueAdd.param.content.type = type
      this.$refs.clueAdd.$refs.departmentSalesperson.personnelList = this.personnelList
      this.$refs.clueAdd.queryModel(dataid)
      /*线索跟进*/
      this.$refs.clueFollow.$refs.departmentSalesperson.depment = type == '1'?dataid:''
      this.$refs.clueFollow.$refs.departmentSalesperson.deplist = this.deplist
      this.$refs.clueFollow.$refs.departmentSalesperson.person = type == '0'?dataid:''
      this.$refs.clueFollow.param.content.type = type
      this.$refs.clueFollow.$refs.departmentSalesperson.personnelList = this.personnelList
      this.$refs.clueFollow.queryModel(dataid)
      /*线索转化*/
      this.$refs.clueChange.$refs.departmentSalesperson.depment = type == '1'?dataid:''
      this.$refs.clueChange.$refs.departmentSalesperson.deplist = this.deplist
      this.$refs.clueChange.$refs.departmentSalesperson.person = type == '0'?dataid:''
      this.$refs.clueChange.param.content.type = type
      this.$refs.clueChange.$refs.departmentSalesperson.personnelList = this.personnelList
      this.$refs.clueChange.queryModel(dataid)
      /*有效线索未跟进天数*/
      this.$refs.clueUnFollow.$refs.departmentSalesperson.depment = type == '1'?dataid:''
      this.$refs.clueUnFollow.$refs.departmentSalesperson.deplist = this.deplist
      this.$refs.clueUnFollow.$refs.departmentSalesperson.person = type == '0'?dataid:''
      this.$refs.clueUnFollow.param.content.type = type
      this.$refs.clueUnFollow.$refs.departmentSalesperson.personnelList = this.personnelList
      this.$refs.clueUnFollow.queryModel(dataid)
    },
    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) {
      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')
      }

    },
    /*返回顶部*/
    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>