yos_web/src/HDrpManagement/publicCustomer/index.vue

<template>
  <div>
    <basicLayout 
      ref="basicLayout"
      formPath="publicCustomer" 
      tableName="publicCustomerTable" 
      idName="sa_customersid" 
      :apiId="{query:20221011133602,del:''}"
      :options="options"
      :autoQuery="false"
      @checkboxCallBack="checkboxCallBack"
      :detailPath="{
        path:'/PublicCustomerDetail'
      }"
      >
      <template #titleLight>
        <el-button :type="selectCustomer.length === 0?'':'primary'" :disabled="selectCustomer.length === 0"  size="small" v-if="tool.checkAuth($route.name,'deletePublic')" @click="deleteData" class="inline-16">删 除</el-button>
      </template>
      <template #titleRight>
        <importCustomer style="margin-left:10px" @onSuccess="onSuccess" v-if="tool.checkAuth($route.name,'import')"></importCustomer>
      </template>
      <template #custom>
      <div class="mt-10">
        <label class="search__label">公海池:</label>
        <el-select class="inline-16" v-model="selectParam.sa_customerpoolid" size="small" placeholder="请选择公海池" @change="selectChange" clearable>
          <el-option
              v-for="item in option.poolList"
              :key="item.sa_customerpoolid"
              :label="item.poolname"
              :value="item.sa_customerpoolid">
          </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-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 style="color:#333333" v-if="scope.data.column.data['leader'].length !== 0">已分配</span>
          <span style="color:#3874f6" 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 === 'contact'">
          <span>{{scope.data.column.data['leader'][0]?scope.data.column.data['leader'][0].name:'--'}}</span>
        </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>
          {{scope.data.column.data[[scope.data.column.columnname]]?scope.data.column.data[[scope.data.column.columnname]]:'--'}}
        </div>
      </template>
    </basicLayout>
  </div>
</template>

<script>
import statusChange from './components/statusChange'
import importCustomer from './modules/importCustomer'
export default {
  data () {
    return {
      options:[],
      customerType:'',
      customerLead:'',
      publicList:'',
      arealist:[],

      poolValue:'全部',
      tabIndex:"",
      option:{
        poolList:[],
        customerClassification:[],
        customerGrade:[],
        typeData:[],
        gradeData:[],
        industryData:[],
        status:[
          {
            value:'潜在'
          },
          {
            value:'合作中'
          },
          {
            value:'已终止'
          }
        ],
        tradingstatus:[
          {
            value:'未成交'
          },
          {
            value:'已成交'
          },
          {
            value:'多次成交'
          }
        ]
      },
      selectParam: {
        sa_customerpoolid:'',
        status:'',
        type:'',
        customergrade:'',
        grade:'',
        industry:'',
        startdate: "",
        enddate: "",
        tradingstatus:''
      },
      dateSelect:'',
      selectCustomer:[]
    }
  },
  provide () {
    return {
      customerType:() => this.customerType,
      customerLead:() => this.customerLead,
      arealist:() => this.arealist,
      publicList:() => this.publicList
    }
  },
  components:{statusChange,importCustomer},
  methods:{
    /* 获取系统选项数据 */
    async getSysOption() {
      /* 获取客户类型 */
      let res = await this.$store.dispatch('optiontypeselect','customertypemx')
      this.customerType = res.data
      /* 获取客户等级 */
      let res2 = await this.$store.dispatch('optiontypeselect','customergrade')
      this.customerLead = res2.data
      
    },
    /* 获取公海数据 */
    async getPublicList() {
      const res = await this.$api.requested({
      "id": 20221009100702,
      "content": {
          "pageNumber": 1,
          "pageSize": 999999,
          "where": {
          }
      },
    })
      this.publicList = res.data
    },
    /* 获取省市县 */
    async query_arealist() {
      const res = await this.$api.requested({
        "classname": "system.tools",
        "method": "query_arealist",
        "content": {
        }
      })
      this.arealist = this.tool.createMenu(res.data)
    },
    /*/!*获取公海列表*!/
    async queryPool(){
      const res = await this.$api.requested({
        "id": 20221009100702,
        "content": {
          "pageNumber": 1,
          "pageSize": 99,
          "where": {
            "condition": "",
            "startdate": "",
            "enddate": ""
          }
        },
      })
      this.option.poolList = res.data
    },*/
    handleCommand(command){
      this.tabIndex = command.sa_customerpoolid
      this.poolValue = command.poolname
      this.$refs['basicLayout'].param.content.where.sa_customerpoolid = command.sa_customerpoolid
      this.$refs['basicLayout'].listData()
    },
    /*客户类型列表*/
    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

    },
    /*客户分类*/
    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
    },
    selectChange(){
      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.basicLayout.param.content.where = this.selectParam
      this.$refs.basicLayout.listData()
    },
    onSuccess(){
      this.$refs.basicLayout.listData()
    },
    /*选择的客户*/
    checkboxCallBack(val){
      this.selectCustomer = []
      val.forEach((item,index)=>{
        this.selectCustomer[index] = item.sa_customersid
      })
    },
    /*删除客户*/
    deleteData(){
      this.$confirm('是否确认彻底删除数据，一旦删除，无法恢复?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal:false,
        type: 'warning'
      }).then(async() => {
        const res = await this.$api.requested({
          "id": 20230103131204,
          "content": {
            "sys_object": 2,//1-线索,2-客户,3-合同,4-项目商机,5-报价单
            "ownerids": this.selectCustomer
          }
        })
        this.tool.showMessage(res,()=>{
          this.$refs.basicLayout.listData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /*获取公海池*/
    queryPublicPool(){
      this.$store.dispatch('optiontypeselect','customerpoolname').then(res=>{
        console.log(res,'公海池')
        this.option.poolList = res.data
       /* this.selectParam.sa_customerpoolid = res.data[0].sa_customerpoolid*/
        this.$refs.basicLayout.param.content.where = this.selectParam
        this.$refs.basicLayout.listData()
      })
    }
  },
  created() {
    this.getSysOption()
    this.getPublicList()
    this.query_arealist()
    this.typeList()
    this.gradeList()
    this.industryList()
    this.queryPublicPool()
    this.queryCustomerGrade()
  },
  mounted() {

  }
}

</script>
<style scoped>
/* /deep/.el-table__cell .cell {
  display: flex;
  justify-content: s;
} */
.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>