yos_web/src/HDrpManagement/dataanalysis/modules/clue.vue

<template>
  <div>
    <el-scrollbar >
      <div style="margin: auto;" >
        <div id="clueAddFull" style="background: #FFFFFF" :style="{padding:isFull ?'16px':0}">
          <div style="display: flex;justify-content: space-between">
            <div>
              <span style="font-size: 16px;color: #333">新增线索</span>
            </div>
            <div>
              <quickDate class="inline-16" ref="quickAdd" @selectQuick="selectQuickAdd" :disabled="disabled"></quickDate>
              <fullScreen ref="addFullRef" class="inline-16" domId="clueAddFull" @onFull="onAddFull" @backFull="backAddFull"></fullScreen>
            </div>
          </div>
          <tableLayout style="margin-top: 10px" :layout="tablecolsAdd" :data="listAdd" :opwidth="200" :custom="true" :height="isFull ?'calc(100vh - 150px)':tableHeight">
            <template v-slot:customcol="scope">
              <p>{{scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'--'}}</p>
            </template>
          </tableLayout>
          <div class="container normal-panel" style="text-align:right">
            <el-pagination
                background
                @size-change="handleSizeChangeAdd"
                @current-change="handleCurrentChangeAdd"
                :current-page="currentPageAdd"
                :page-sizes="isFull ?[100,150, 200, 250]:[10,20, 50, 100, 200]"
                :page-size="isFull ?100:10"
                layout="total,sizes, prev, pager, next, jumper"
                :total="totalAdd">
            </el-pagination>
          </div>
        </div>
        <div id="clueUpdFull" style="background: #FFFFFF" :style="{padding:isFull ?'16px':0}">
          <div style="display: flex;justify-content: space-between">
            <div>
              <span style="font-size: 16px;color: #333">更新线索</span>
            </div>
            <div>
              <quickDate class="inline-16" ref="quickUpd" @selectQuick="selectQuickUpd" ></quickDate>
              <fullScreen class="inline-16" domId="clueUpdFull" @onFull="onUpdFull" @backFull="backUpdFull"></fullScreen>
            </div>
          </div>
          <tableLayout style="margin-top: 10px" :layout="tablecolsUpdate" :data="listUpdate" :opwidth="200" :custom="true" :height="isFull ?'calc(100vh - 150px)':tableHeight">
            <template v-slot:customcol="scope">
              <p>{{scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'&#45;&#45;'}}</p>
            </template>
          </tableLayout>
          <div class="container normal-panel" style="text-align:right">
            <el-pagination
                background
                @size-change="handleSizeChangeUpdate"
                @current-change="handleCurrentChangeUpdate"
                :current-page="currentPageUpdate"
                :page-sizes="isFull ?[100,150, 200, 250]:[10,20, 50, 100, 200]"
                :page-size="isFull ?100:10"
                layout="total,sizes, prev, pager, next, jumper"
                :total="totalUpdate">
            </el-pagination>
          </div>
        </div>
        <div id="clueFollowFull" style="background: #FFFFFF" :style="{padding:isFull ?'16px':0}">
          <div style="display: flex;justify-content: space-between">
            <div>
              <span style="font-size: 16px;color: #333">跟进线索</span>
            </div>
            <div>
              <quickDate class="inline-16" ref="quickFow" @selectQuick="selectQuickFow" :disabled="disabled"></quickDate>
              <fullScreen ref="fowFullRef" class="inline-16" domId="clueFollowFull" @onFull="onFowFull" @backFull="backFowFull"></fullScreen>
            </div>
          </div>
          <tableLayout style="margin-top: 10px" :layout="tablecolsFollow" :data="listFollow" :opwidth="200" :custom="true" :height="isFull ?'calc(100vh - 150px)':tableHeight">
            <template v-slot:customcol="scope">
              <p>{{scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'&#45;&#45;'}}</p>
            </template>
          </tableLayout>
          <div class="container normal-panel" style="text-align:right">
            <el-pagination
                background
                @size-change="handleSizeChangeFollow"
                @current-change="handleCurrentChangeFollow"
                :current-page="currentPageFollow"
                :page-sizes="isFull ?[100,150, 200, 250]:[10,20, 50, 100, 200]"
                :page-size="isFull?100:10"
                layout="total,sizes, prev, pager, next, jumper"
                :total="totalFollow">
            </el-pagination>
          </div>
        </div>
      </div>

    </el-scrollbar>
  </div>
</template>

<script>
import quickDate from "@/HDrpManagement/dataanalysis/components/quickDate";
import tableLayout from '@/components/table/index9'
import fullScreen from "@/views/salesData/components/fullScreen";
export default {
  name: "clue",
  props:['param','isDep','dataid','isPerson'],
  components:{quickDate,tableLayout,fullScreen},
  data() {
    return {
      disabled:false,
      listAdd:[],
      tablecolsAdd:[],
      listUpdate:[],
      tablecolsUpdate:[],
      /*tableHieght:'50px',*/
      tableHeight:'',
      currentPageAdd:0,
      totalAdd:0,
      currentPageUpdate:0,
      totalUpdate:0,
      listFollow:[],
      tablecolsFollow:[],
      currentPageFollow:0,
      totalFollow:0,
      begindate:'',
      enddate:'',
      selectAdd:'周',
      selectUpd:'周',
      selectFow:'周',
      sort:[
        {
          reversed : 0,
          sorted: 1,
          sortid: 207,
          sortname: "新增，更新排序"
        },
        {
          reversed : 0,
          sorted: 1,
          sortid: 208,
          sortname: "跟进排序"
        }
      ],
      isFull:false,
      clueAddParam:{
        "id": 20230617143104,
        "content": {
          "pageNumber": 1,
          "pageSize": 10,
          "dataType":"1",//1 线索新增列表 2 线索更新列表 3 线索跟进列表4 客户新增列表 5 客户更新列表 6 客户跟进列表 7 项目新增列表8 项目更新列表 9 项目跟进列表 10 报价单列表 11 合同列表
          "type":'',//0 按人搜素 1 按部门搜索
          "dataid":"",// 人员id或部门id
          "dateType":'',
          "where":{
            "begindate":"",
            "enddate":"",
            "isleave":"1"
          }
        }
      },
      clueUpdParam:{
        "id": 20230617143104,
        "content": {
          "pageNumber": 1,
          "pageSize": 10,
          "dataType":"2",//1 线索新增列表 2 线索更新列表 3 线索跟进列表4 客户新增列表 5 客户更新列表 6 客户跟进列表 7 项目新增列表8 项目更新列表 9 项目跟进列表 10 报价单列表 11 合同列表
          "type":'',//0 按人搜素 1 按部门搜索
          "dataid":"",// 人员id或部门id
          "dateType":'',
          "where":{
            "begindate":"",
            "enddate":"",
            "isleave":"1"
          }
        }
      },
      clueFowParam:{
        "id": 20230617143104,
        "content": {
          "pageNumber": 1,
          "pageSize": 10,
          "dataType":"3",//1 线索新增列表 2 线索更新列表 3 线索跟进列表4 客户新增列表 5 客户更新列表 6 客户跟进列表 7 项目新增列表8 项目更新列表 9 项目跟进列表 10 报价单列表 11 合同列表
          "type":'',//0 按人搜素 1 按部门搜索
          "dataid":"",// 人员id或部门id
          "dateType":'',
          "where":{
            "begindate":"",
            "enddate":"",
            "isleave":"1"
          }
        }
      }
    }
  },
  methods:{
    async queryAdd(){
      this.clueAddParam.content.dataType = 1
      this.clueAddParam.content.where.begindate = this.selectAdd ? '' :this.begindate
      this.clueAddParam.content.where.enddate = this.selectAdd ? '' : this.enddate
      this.clueAddParam.content.dateType = this.selectAdd
      this.clueAddParam.content.sort = [this.sort[0]]
      const res = await this.$api.requested(this.clueAddParam)
      this.listAdd = res.data
      this.currentPageAdd = res.pageNumber
      this.totalAdd = res.total
    },
    handleSizeChangeAdd(val) {
      // console.log(`每页 ${val} 条`);
      this.clueAddParam.content.pageSize = val
      this.queryAdd()
    },
    handleCurrentChangeAdd(val) {
      // console.log(`当前页: ${val}`);
      this.clueAddParam.content.pageNumber = val
      this.queryAdd()
    },
    async queryUpdate(){
      this.clueUpdParam.content.dataType = 2
      this.clueUpdParam.content.where.begindate = this.selectUpd ? '' :this.begindate
      this.clueUpdParam.content.where.enddate = this.selectUpd ? '' : this.enddate
      this.clueUpdParam.content.dateType = this.selectUpd
      this.clueUpdParam.content.sort = [this.sort[0]]
      const res = await this.$api.requested(this.clueUpdParam)
      this.listUpdate = res.data
      this.currentPageUpdate = res.pageNumber
      this.totalUpdate = res.total
    },
    handleSizeChangeUpdate(val) {
      // console.log(`每页 ${val} 条`);
      this.clueUpdParam.content.pageSize = val
      this.queryUpdate()
    },
    handleCurrentChangeUpdate(val) {
      // console.log(`当前页: ${val}`);
      this.clueUpdParam.content.pageNumber = val
      this.queryUpdate()
    },
    async queryFollow(){
      this.clueFowParam.content.dataType = 3
      this.clueFowParam.content.where.begindate = this.selectFow ? '' :this.begindate
      this.clueFowParam.content.where.enddate = this.selectFow ? '' : this.enddate
      this.clueFowParam.content.dateType = this.selectFow
      this.clueFowParam.content.sort = [this.sort[1]]
      const res = await this.$api.requested(this.clueFowParam)
      this.listFollow = res.data
      this.currentPageFollow = res.pageNumber
      this.totalFollow = res.total
    },
    handleSizeChangeFollow(val) {
      // console.log(`每页 ${val} 条`);
      this.clueFowParam.content.pageSize = val
      this.queryFollow()
    },
    handleCurrentChangeFollow(val) {
      // console.log(`当前页: ${val}`);
      this.clueFowParam.content.pageNumber = val
      this.queryFollow()
    },
    /*日期筛选*/
    selectQuickAdd(begindate,enddate,select){
      this.begindate = begindate
      this.enddate = enddate
      this.selectAdd = select
      this.queryAdd(this.param.content.pageNumber = 1)
    },
    selectQuickUpd(begindate,enddate,select){
      this.begindate = begindate
      this.enddate = enddate
      this.selectUpd = select
      this.queryUpdate(this.param.content.pageNumber = 1)
    },
    selectQuickFow(begindate,enddate,select){
      this.begindate = begindate
      this.enddate = enddate
      this.selectFow = select
      this.queryFollow(this.param.content.pageNumber = 1)
    },
    /*全屏*/
    onAddFull(){
      this.clueAddParam.content.dataType = 1
      this.clueAddParam.content.pageNumber = 1
      this.clueAddParam.content.pageSize = 100
      this.queryAdd()
      this.isFull = true
    },
    onUpdFull(){
      this.clueUpdParam.content.dataType = 2
      this.clueUpdParam.content.pageNumber = 1
      this.clueUpdParam.content.pageSize = 100
      this.queryUpdate()
      this.isFull = true
    },
    onFowFull(){
      this.clueFowParam.content.dataType = 3
      this.clueFowParam.content.pageNumber = 1
      this.clueFowParam.content.pageSize = 100
      this.queryFollow()
      this.isFull = true
    },
    /*退出全屏*/
    backAddFull(){
      this.clueAddParam.content.dataType = 1
      this.clueAddParam.content.pageNumber = 1
      this.clueAddParam.content.pageSize = 10
      this.disabled = false
      this.queryAdd()
      this.isFull = false
    },
    backUpdFull(){
      this.clueUpdParam.content.dataType = 2
      this.clueUpdParam.content.pageNumber = 1
      this.clueUpdParam.content.pageSize = 10
      this.queryUpdate()
      this.isFull = false
    },
    backFowFull(){
      this.clueFowParam.content.dataType = 3
      this.clueFowParam.content.pageNumber = 1
      this.clueFowParam.content.pageSize = 10
      this.queryFollow()
      this.isFull = false
    }
  },
  created() {
    this.tablecolsAdd = this.tool.tabelCol(this.$route.name).clueAdd.tablecols
    this.tablecolsUpdate = this.tool.tabelCol(this.$route.name).clueUpdate.tablecols
    this.tablecolsFollow = this.tool.tabelCol(this.$route.name).clueFollow.tablecols
  }
}
</script>

<style scoped>

</style>