yos_web/src/HDrpManagement/dataanalysis/index.vue

<template>
  <normalLayout>
    <template #refresh>
      <i class="el-icon-refresh-right" @click="refresh" v-loading.fullscreen.lock="fullscreenLoading"></i>
    </template>
    <template #content>
      <div style="padding: 20px;" >
        <div class="mt-10 inline-16">
          <label  class="search__label" >部门:</label>
          <el-cascader 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="mt-10 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 style="margin: auto;">
            <div class="content" >
              作业数据
              <assignmentData ref="assignment" style="padding: 16px 2px 0px 2px" :param="dataParam" :isDep="isDep" :dataid="dataid" :isPerson="isPerson" @clickFull="clickFull"></assignmentData>
            </div>
            <div class="content" >
              销售数据
              <salesData style="padding: 16px 2px 0px 2px" ref="sales"  :param="dataParam" :isDep="isDep" :dataid="dataid" :isPerson="isPerson"></salesData>
            </div>
            <div class="content" >
              业绩数据
              <performanceData style="padding: 0px 2px 0px 2px" ref="performance" :param="dataParam" :isDep="isDep" :dataid="dataid" :isPerson="isPerson"></performanceData>
            </div>
            <el-tabs v-model="tabName" @tab-click="handleClickTab" style="margin-top: 16px;">
              <el-tab-pane label="线索" name="线索">
                <clue ref="clue" :param="tableParam" :isDep="isDep" :dataid="dataid" :isPerson="isPerson"></clue>
              </el-tab-pane>
              <el-tab-pane label="客户" name="客户">
                <customer ref="customer" :param="tableParam" :isDep="isDep" :dataid="dataid" :isPerson="isPerson"></customer>
              </el-tab-pane>
              <el-tab-pane label="项目商机" name="项目商机">
                <project ref="project" :param="tableParam" :isDep="isDep" :dataid="dataid" :isPerson="isPerson"></project>
              </el-tab-pane>
              <el-tab-pane label="作业单据" name="作业单据">
                <documents ref="documents" :param="tableParam" :isDep="isDep" :dataid="dataid" :isPerson="isPerson"></documents>
              </el-tab-pane>
            </el-tabs>
          </div>


      </div>

    </template>
  </normalLayout>
</template>

<script>
import assignmentData from './modules/assignmentData'
import salesData from './modules/salesData'
import performanceData from './modules/performanceData'
import clue from './modules/clue'
import customer from './modules/customer'
import project from './modules/project'
import documents from './modules/documents'
import normalLayout from '@/components/normal-basic-layout/normalData'
export default {
  name: "index",
  data(){
    return {
      fullscreenLoading: false,
      tabName: '线索',
      isDep:false,
      isPerson:false,
      activeName: '部门',
      dataid:'',
      range:'',
      pointValue:'',
      visible:false,
      person:'',
      depment:'',
      deplist:[],
      personnelList:[],
      isleave:'1',
      depmentParam:{
        "id": 20230620102004,
        "content": {
          "isleave":1
        }
      },
      dataParam:{
        "id": 20230616131404,
        "content": {
          "dataType":"", // 1 作业数据 2 销售数据 3业绩数据
          "type":'', // 0 按人搜素 1 按部门搜索
          "dataid":"", // 人员id或部门id
          "where":{
            "isleave":"1",
          }
        }
      },
      tableParam:{
        "id": 20230617143104,
        "content": {
          "pageNumber": 1,
          "pageSize": 10,
          "dataType":"",//1 线索新增列表 2 线索更新列表 3 线索跟进列表4 客户新增列表 5 客户更新列表 6 客户跟进列表 7 项目新增列表8 项目更新列表 9 项目跟进列表 10 报价单列表 11 合同列表
          "type":'',//0 按人搜素 1 按部门搜索
          "dataid":"",// 人员id或部门id
          "dateType":'',
          "where":{
            "begindate":"",
            "enddate":"",
            "isleave":"1"
          }
        }
      }
    }
  },
  components:{
    assignmentData,salesData,performanceData,clue,customer,project,documents,normalLayout
  },
  methods:{
    async departmentrtment() {
      const res = await this.$api.requested(this.depmentParam)
      this.deplist = this.createMenu(res.data.dep)
      this.personnelList = res.data.hr
      this.person = JSON.parse(window.sessionStorage.getItem('active_account')).name
      this.$refs.assignment.queryList()
      this.$refs.sales.queryList()
      this.$refs.performance.queryList()
      this.$refs.clue.queryAdd()
      this.$refs.clue.queryUpdate()
      this.$refs.clue.queryFollow()
    },
    refresh(){
      this.fullscreenLoading = true;
      this.$refs.assignment.queryList()
      this.$refs.sales.queryList()
      this.$refs.performance.queryList()
      this.$refs.clue.queryAdd()
      this.$refs.clue.queryUpdate()
      this.$refs.clue.queryFollow()
      setTimeout(() => {
        this.fullscreenLoading = false;
      }, 2000);
    },
    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) {
      this.person = ''
      this.isDep = true
      this.dataid = val[val.length -1]
      this.dataParam.content.type = 1
      this.dataParam.content.dataid = this.dataid
      this.tableParam.content.type = 1
      this.tableParam.content.dataid = this.dataid
      this.$nextTick(()=>{
        this.$refs.assignment.queryList()
        this.$refs.sales.queryList()
        this.$refs.performance.queryList()
        this.$refs.clue.queryAdd()
        this.$refs.clue.queryUpdate()
        this.$refs.clue.queryFollow()
      })

      /*this.$refs.selectPerson.clearCheckedNodes()*/
    },
    selectPerson(val){
      this.depment = ''
      this.dataid = val
      this.isDep = false
      this.dataParam.content.type = 0
      this.dataParam.content.dataid = this.dataid
      this.tableParam.content.type = 0
      this.tableParam.content.dataid = this.dataid
      this.$nextTick(()=>{
        this.$refs.assignment.queryList()
        this.$refs.sales.queryList()
        this.$refs.performance.queryList()
        this.$refs.clue.queryAdd()
        this.$refs.clue.queryUpdate()
        this.$refs.clue.queryFollow()
      })

      /*this.$refs.selectdep.clearCheckedNodes()*/
    },
    async personData(){
      const res = await this.$api.requested(this.depmentParam)
      this.personnelList = res.data.hr
    },
    leaveChange(){
      this.dataParam.content.where.isleave = this.isleave
      this.dataParam.content.dataid = this.dataParam.content.type == 0 ? -1 : this.dataParam.content.dataid
      this.tableParam.content.where.isleave = this.isleave
      this.tableParam.content.dataid = this.tableParam.content.type == 0 ? -1 : this.tableParam.content.dataid
      this.depmentParam.content.isleave = this.isleave
      this.depmentParam.content.dataid = this.depmentParam.content.type == 0 ? -1 : this.depmentParam.content.dataid
      this.person = ''
      this.personData()
      this.$refs.assignment.queryList()
      this.$refs.sales.queryList()
      this.$refs.performance.queryList()
      this.$refs.clue.queryAdd()
      this.$refs.clue.queryUpdate()
      this.$refs.clue.queryFollow()
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClickTab() {
      console.log(this.tabName);
      if (this.tabName === '线索'){
        this.$refs.clue.queryAdd()
        this.$refs.clue.queryUpdate()
        this.$refs.clue.queryFollow()
      }else if (this.tabName === '客户'){
        this.$refs.customer.queryAdd()
        this.$refs.customer.queryUpdate()
        this.$refs.customer.queryFollow()
      }else if (this.tabName === '项目商机'){
        this.$refs.project.queryAdd()
        this.$refs.project.queryUpdate()
        this.$refs.project.queryFollow()
      }else if (this.tabName === '作业单据'){
        this.$refs.documents.queryQuotation()
        this.$refs.documents.queryContract()
      }
    },
    clickFull(type,time){
      if (type == '新增线索'){
        this.tabName = '线索'
        this.$refs.clue.disabled = true
        this.$refs.clue.selectAdd = time
        this.$refs.clue.$refs.quickAdd.select = time
        this.$refs.clue.$refs.addFullRef.enterFullscreen()
      }else if (type == '跟进线索'){
        this.tabName = '线索'
        this.$refs.clue.disabled = true
        this.$refs.clue.selectFow = time
        this.$refs.clue.$refs.quickFow.select = time
        this.$refs.clue.$refs.fowFullRef.enterFullscreen()
      }else if (type == '新增客户'){
        this.tabName = '客户'
        this.$refs.customer.disabled = true
        this.$refs.customer.selectAdd = time
        this.$refs.customer.$refs.quickAdd.select = time
        this.$refs.customer.$refs.addFullRef.enterFullscreen()
      }else if (type == '客户跟进'){
        this.tabName = '客户'
        this.$refs.customer.disabled = true
        this.$refs.customer.selectFow = time
        this.$refs.customer.$refs.quickFow.select = time
        this.$refs.customer.$refs.fowFullRef.enterFullscreen()
      }else if (type == '新增项目'){
        this.tabName = '项目商机'
        this.$refs.project.disabled = true
        this.$refs.project.selectAdd = time
        this.$refs.project.$refs.quickAdd.select = time
        this.$refs.project.$refs.addFullRef.enterFullscreen()
      }else if (type == '项目跟进'){
        this.tabName = '项目商机'
        this.$refs.project.disabled = true
        this.$refs.project.selectFow = time
        this.$refs.project.$refs.quickFow.select = time
        this.$refs.project.$refs.fowFullRef.enterFullscreen()
      }

    }

  },
  mounted() {
    this.departmentrtment()
  }
}
</script>

<style scoped>
/deep/.content {
  padding: 0px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
</style>