yos_web/src/HManagement/clueManage/clue_private/index.vue

<template>
  <div>
    <basicLayout 
      ref="basicLayout" 
      :oldFormPath="{
        edit:'HManagement/clueManage/clue_private/modules',
        add:'HManagement/clueManage/clue_private/modules'
      }"
      :tableName="value == '经销商' ? 'cluePrivateTable' : 'cluePrivateSalerTable'" 
      idName="sat_orderclueid" 
      :apiId="{query:20221101094302,del:20221101100502}" 
      :options="options"
      :detailPath="{path:'/clueDetail_private'}"
      @listCreate="list"
      @listData="listdata"
    >
      <div slot="titleRight" style="display:flex;margin-left:10px">
        <distribution class="inline-16" v-if="tool.checkAuth($route.name,'distribution')" @onSuccess="$refs.basicLayout.listData()"></distribution>
        <distributionSaler v-if="tool.checkAuth($route.name,'distribution')" @onSuccess="$refs.basicLayout.listData()"></distributionSaler>
      </div>
      <div slot="custom" style="display:flex">
        <div class="label_center" style="display:flex;margin-right:10px">
          <p class="search__label">人员类别:</p>
          <el-select size="small" v-model="value" placeholder="请选择人员类别" @change="selectChange">
            <el-option
              v-for="item in select"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="label_center">
          <p class="search__label">跟进状态:</p>
          <el-select v-model="status" clearable style="margin-right:10px" size="small" placeholder="请选择线索状态" @change="$refs.basicLayout.param.content.pageNumber = 1 ;$refs.basicLayout.param.content.where.status = status;$refs.basicLayout.listData()">
            <el-option v-for="item in statusList" :label="item.value" :key="item.rowindex" :value="item.remarks">
            </el-option>
          </el-select>
        </div>
        <div class="label_center">
          <p class="search__label">分配状态:</p>
          <el-select v-model="allocationstatus" clearable style="margin-right:10px" size="small" placeholder="请选择线索状态" @change="$refs.basicLayout.param.content.pageNumber = 1 ;$refs.basicLayout.param.content.where.allocationstatus = allocationstatus;$refs.basicLayout.listData()">
            <el-option label="待分配" value="待分配">
            </el-option>
            <el-option label="已分配" value="已分配">
            </el-option>
          </el-select>
        </div>
      </div>
      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname == 'status'">
          <span style="color:#999999" 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:#3874f6" 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>
          <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 v-else>{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
        </div>
        <div v-else-if="scope.data.column.columnname == 'allocationstatus'">
          <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:#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 == 'province'">
          <span>{{scope.data.column.data.province}}-{{scope.data.column.data.city}}-{{scope.data.column.data.county}}</span>
        </div>
        <div v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]}}
        </div>
        <span v-if="!scope.data.column.data[scope.data.column.columnname] ">--</span>
      </template>
    </basicLayout>
  </div>
</template>

<script>
import distribution from '@/HManagement/clueManage/clue_public/modules/distribution'
import distributionSaler from '@/HManagement/clueManage/clue_public/modules/distribution_saler'
export default {
  components:{
    distribution,
    distributionSaler
  },
  data () {
    return {
      options:[],
      value:'经销商',
      select: [
        {label:'经销商',value:'经销商'},
        {label:'业务员',value:'业务员'}
      ],
      statusList:[],
      status:'',
      allocationstatus:'',
      arealist:[]
    }
  },
  provide() {
    return {
      arealist:() => this.arealist,
    }
  },
  async created () {
    const res2 = await this.$store.dispatch('optiontypeselect','datafollowuptype')
    this.statusList = res2.data

    this.query_arealist()
  },
  methods:{
    list (param) {
      param.content.where.cluetype = '经销商'
    },
    selectChange () {
      this.$refs.basicLayout.param.content.where.cluetype = this.value
      this.$refs.basicLayout.param.content.pageNumber = 1
      this.$refs.basicLayout.listData()
    },
    async query_arealist() {
      const res = await this.$api.requested({
        "classname": "system.tools",
        "method": "query_arealist",
        "content": {
        }
      })
      
      this.arealist = this.tool.createMenu(res.data)
    },
        listdata(data) {
      console.log(data);
      
    }
  }
}

</script>
<style>
</style>