yos_web/src/SDrpManagement/salerPrivatecustomer/index.vue

<template>
  <div>
      <basicLayout
      ref="list"
      formPath="salerPrivatecustomer"
      tableName="salerPrivatecustomerTable"
      idName="sa_customersid"
      :apiId="{query:20221012164402,del:''}"
      :autoQuery="false"
      :isExport="false"
      :specialKey="[{key:'leader',value:'name'},{key:'tag_sys',value:null},{key:'industry',value:null}]"
      :detailPath="{path:'/customerDetail',param:{tabIndex:tabIndex,portrait:''}}"
     >
      <template #titleRight>
        <el-button type="primary" size="small" @click="onExport" plain>导 出</el-button>
      </template>
      <template #custom>
        <div class="mt-10">
          <label class="search__label">范围:</label>
          <el-select class="inline-16" v-model="value" size="small" placeholder="请选择数据分类" @change="selectChange" >
            <!-- <el-option
              v-for="item in editableTabs"
              :key="item.index"
              :label="item.title"
              :value="item.name">
            </el-option> -->
            <el-option
              v-for="item in editableTabs"
              :key="item.index"
              :label="item.templetname"
              :value="item.templetid"
            ></el-option>
          </el-select>
        </div>
        <div  class="mt-10">
          <label class="search__label">客户类型:</label>
          <el-select class="inline-16" v-model="selectParam.type" size="small" placeholder="请选择" @change="selectChange" clearable>
            <el-option
                v-for="item in option.typeData"
                :key="item.value"
                :label="item.value"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div  class="mt-10">
          <label class="search__label">客户分类:</label>
          <el-select  class="inline-16" v-model="selectParam.customergrade" size="small" placeholder="请选择" @change="selectChange" clearable>
            <el-option
                v-for="item in option.customerClassification"
                :key="item.value"
                :label="item.value"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div  class="mt-10">
          <label class="search__label">客户等级:</label>
          <el-select  class="inline-16" v-model="selectParam.grade" size="small" placeholder="请选择" @change="selectChange" clearable>
            <el-option
                v-for="item in option.customerGrade"
                :key="item.value"
                :label="item.value"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div  class="mt-10">
          <label class="search__label">所属行业:</label>
          <el-select  class="inline-16" v-model="selectParam.industry" size="small" placeholder="请选择" @change="selectChange" clearable>
            <el-option
                v-for="item in option.industryData"
                :key="item.value"
                :label="item.value"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div  class="mt-10">
            <label class="search__label">合作状态:</label>
          <el-select  class="inline-16" v-model="selectParam.status" size="small" placeholder="请选择" @change="selectChange" clearable>
            <el-option
                v-for="item in option.status"
                :key="item.value"
                :label="item.value"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div  class="mt-10">
          <label class="search__label">成交状态:</label>
          <el-select  class="inline-16" v-model="selectParam.tradingstatus" size="small" placeholder="请选择" @change="selectChange" clearable>
            <el-option
                v-for="item in option.tradingstatus"
                :key="item.value"
                :label="item.value"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div  class="mt-10">
          <label class="search__label">标签:</label>
          <el-select  class="inline-16" v-model="selectParam.tag" size="small" placeholder="请选择" @change="selectChange" clearable>
            <el-option
                v-for="item in option.tagData"
                :key="item.tag"
                :label="item.tag"
                :value="item.tag">
            </el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label class="search__label">部门:</label>
          <el-cascader class="inline-16" 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">
          <label class="search__label" >创建时间:</label>
          <el-date-picker
              style="margin-right: 24px !important;"
              size="small"
              @change="selectChange"
              value-format="yyyy-MM-dd"
              v-model="dateSelect"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable>
          </el-date-picker>
        </div>
      </template>
      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname === 'isleader'">
          <span v-if="scope.data.column.data['leader'].length !== 0">已分配</span>
          <span v-else>未分配</span>
        </div>
        <div v-else-if="scope.data.column.columnname === 'tag'">
          <div v-for="item in scope.data.column.data.tag_sys" :key="item.index"  style="float: left;margin-left: 5px;margin-bottom: 5px">
            <el-tag  color="#3874F6" size="mini" type="primary" effect="dark">
              <span>{{item}}</span>
            </el-tag>
          </div>
          <div v-for="item in scope.data.column.data.tag" :key="item.index"  style="float: left;margin-left: 5px;margin-bottom: 5px">
            <el-tag color="#FA8C16" size="mini" type="warning" effect="dark">
              <span>{{item}}</span>
            </el-tag>
          </div>
        </div>
        <div v-else-if="scope.data.column.columnname === 'industry'">
          <span v-if="JSON.stringify(scope.data.column.data.industry) !== '[]' && scope.data.column.data.industry">
            <div v-for="item in scope.data.column.data.industry" :key="item.index"  style="float: left;margin-left: 5px;margin-bottom: 5px">
              <el-tag size="mini"  effect="dark">
                <span>{{item}}</span>
              </el-tag>
            </div>
          </span>
          <div v-else>
            {{'--'}}
          </div>
        </div>
        <div v-else-if="scope.data.column.columnname === 'tradingstatus'">
          <span style="color:#3874f6" v-if="scope.data.column.data[[scope.data.column.columnname]] == '未成交'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#fa8c16" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '已成交'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#333333" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '多次成交'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
        </div>
        <div v-else-if="scope.data.column.columnname === 'status'">
          <span style="color:#3874f6" v-if="scope.data.column.data[[scope.data.column.columnname]] == '潜在'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#52c41a" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '合作中'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#999999" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '已终止'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
        </div>
        <div v-else-if="scope.data.column.columnname === 'leader'">
          <span>{{scope.data.column.data['leader'][0]?scope.data.column.data['leader'][0].name:'--'}}</span>
        </div>
        <div v-else-if="scope.data.column.columnname === 'depname'">
          <span>{{scope.data.column.data['leader'][0]?scope.data.column.data['leader'][0].depname?scope.data.column.data['leader'][0].depname:'--':'--'}}</span>
        </div>
        <div v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]?scope.data.column.data[[scope.data.column.columnname]]:'--'}}
        </div>
      </template>
    </basicLayout>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      value:'',
      sys_enterpriseid:'',
      editableTabsValue: "我负责的",
      editableTabs: [
      ],
      tabIndex:"1",
      options:[],
      listData:[],
      option:{
        typeData:[],
        customerClassification:[],
        customerGrade:[],
        industryData:[],
        tagData:[],
        status:[
          {
            value:'潜在'
          },
          {
            value:'合作中'
          },
          {
            value:'已终止'
          }
        ],
        tradingstatus:[
          {
            value:'未成交'
          },
          {
            value:'已成交'
          },
          {
            value:'多次成交'
          }
        ]
      },
      selectParam: {
        status:'',
        type:'',
        grade:'',
        customergrade:'',
        industry:'',
        startdate:'',
        enddate:'',
        tradingstatus:'',
        tag:'',
        departmentid:''

      },
      depmentParam:{
        "id": 20230620102004,
        "content": {
        }
      },
      depment:'',
      deplist:[],
      dateSelect:''
    }
  },
  mounted() {
    this.typeList()
    this.gradeList()
    this.queryCustomerGrade()
    this.industryList()
    this.tagList()
  },
  methods:{
    list (param) {
      param.content.isend = 0
      param.content.type = this.value
      param.content.isExport = 0
    },
    queryData(id){
      this.$refs['list'].param.content.type = id
      this.$refs['list'].param.content.isExport = false
      this.$refs.list.param.content.deleted = 0
      this.$refs.list.param.content.isend = 0
      this.$refs.list.param.content.nocache = true
      this.$refs['list'].listData()
      // this.$store.dispatch('sendDataToForm',)
    },
    handleCommand(command){
      this.tabIndex = command.name
      this.editableTabsValue = command.title
      this.selectChange()
      /*this.$refs['list'].param.content.type = command.name
      this.$refs['list'].param.content.isExport = 0
      this.$refs['list'].listData()*/
      // this.$store.dispatch('sendDataToForm',)
    },
    /*客户类型列表*/
    async typeList(){
      const siteid = JSON.parse(sessionStorage.getItem('active_account')).siteid
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.optiontype.optiontype",
        "method": "optiontypeselect",
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "typename": "customertypemx",
          "parameter": {
            "siteid": siteid
          }
        }
      })
      this.option.typeData = res.data
      console.log("客户类型",res.data)
      console.log(this.option.typeData)

    },
    /*客户分类*/
    async gradeList(){
      const siteid = JSON.parse(sessionStorage.getItem('active_account')).siteid
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.optiontype.optiontype",
        "method": "optiontypeselect",
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "typename": "customergrade",
          "parameter": {
            "siteid": siteid
          }
        }
      })
      console.log("客户等级",res.data)
      /*for (var i=0;i<res.data.length; i++){
        if (res.data[i].remarks !== ''){
          this.options.gradeData[i] = res.data[i].value + "——" + res.data[i].remarks
        }else{
          this.options.gradeData[i] = res.data[i].value
        }
      }*/
      this.option.customerClassification = res.data
      console.log("处理后客户等级",this.options.customerClassification)
    },
    /*客户等级*/
    queryCustomerGrade(){
      this.$store.dispatch('optiontypeselect','agentgrade').then(res=>{
        this.option.customerGrade = res.data
      })
    },
    /*行业列表*/
    async industryList(){
      const siteid = JSON.parse(sessionStorage.getItem('active_account')).siteid
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.optiontype.optiontype",
        "method": "optiontypeselect",
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "typename": "industry",
          "parameter": {
            "siteid": siteid
          }
        }
      })
      this.option.industryData = res.data
    },
    /*标签列表*/
    async tagList(){
      const res = await this.$api.requested({
        "id":20221013104401,
        "content":{
          "isExport":1,
          "pageNumber":1,
          "pageSize":100,
          "sys_systemtagid":2,
          "where":{
            "condition":""
          }
        }
      })
      this.option.tagData = this.unique(res.data)
    },
    /*去重*/
    unique(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.tag) && res.set(arr.tag, 1));
    },
    selectChange(){
      this.tabIndex = this.value
      if (this.dateSelect !== '' && this.dateSelect !== null){
        this.selectParam.startdate = this.dateSelect[0]
        this.selectParam.enddate = this.dateSelect[1]
      }else {
        this.selectParam.startdate = ''
        this.selectParam.enddate = ''
      }
      this.$refs.list.param.content.type = this.tabIndex
      this.$refs.list.param.content.where = Object.assign({},this.$refs.list.param.content.where,this.selectParam)
      this.$refs.list.param.content.phonenumber = 1
      this.$refs['list'].listData()
    },
    async queryUserInfo() {
      let res = await this.$api.requested({
        "classname": "common.usercenter.usercenter",
        "method": "queryUserMsg",
        "content": {
        }
      })
      console.log(res.data);

      this.userInfo = {
        isAuth : res.data.hr.isleader,
        userid: res.data.hr.userid
      }
      console.log(this.userInfo,'user')
      window.sessionStorage.setItem('userInfo',JSON.stringify(this.userInfo))
      console.log(JSON.parse(window.sessionStorage.getItem('userInfo')));

    },
    async querytemplet () {
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.querytemplet.querytemplet",
        "method":"query",
        "content": {}
      })
      this.editableTabs = res.data
      for (let i=0;i<res.data.length;i++){
        if (res.data[i].templetname == '站点全部'){
          this.value = res.data[i].templetid
          break
        }else {
          this.value = res.data[0].templetid
        }
      }
      this.queryData(this.value)
    },
    async onExport(){
      const res = await this.$api.requested({
        "id": 20221012164402,
        "content": {
          "type":this.value,
          "pageNumber": 1,
          "pageSize": 20,
          "deleted":0,
          "isend":0,
          "isAll":1,
          "isExport":1,//0：不导出，1：导出
          "where": {
            "condition": "",
            "startdate": "",
            "enddate": ""
          }
        },
      })
      window.open(res.data,'_self')
    },
    /*可选部门*/
    async departmentrtment() {
      const res = await this.$api.requested(this.depmentParam)
      this.deplist = this.createMenu(res.data.dep)
    },
    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.selectParam.departmentid = val[val.length -1]
      this.selectChange()
    },
  },
  created() {
    this.queryUserInfo()
    this.querytemplet()
    this.departmentrtment()
  },
}
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #151515;
  font-size: 16px;
}
.el-divider--vertical{
  margin: 0 16px;
}
.el-icon-arrow-down {
  font-size: 16px;
}
.s_panel {
  margin-bottom:10px
}
</style>