yos_web/src/HManagement/ecycle/saleClue/index.vue

<template>
  <div>
    <basicLayout
        ref="basicLayout"
        tableName="saleClueTable"
        idName="sat_orderclueid"
        :apiId="{query:20221101094502,del:''}"
        :autoQuery="false"
        @checkboxCallBack="checkboxCallBack"
        >
      <template #titleLight>
        <batchDeletion v-if="tool.checkAuth($route.name,'batchDeletion')"  ref="batchDeletion" :ownerids="selectData" :sys_object="application" @delSuccess="queryData"></batchDeletion>
        <batchRecovery v-if="tool.checkAuth($route.name,'batchRecovery')" ref="batchRecovery" :ownerids="selectData" :sys_object="application" @recoverySuccess="queryData"></batchRecovery>
      </template>
      <template #custom>
        <div class="mt-10">
          <p class="search__label">应用:</p>
          <el-select
              class="inline-24"
              size="small"
              v-model="application"
              placeholder="请选择范围"
              @change="applicationChange"
          >
            <el-option
                v-for="item in applicationList"
                :key="item.index"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">跟进状态:</p>
          <el-select v-model="status" clearable class="inline-24" 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>
      </template>
      <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 == 'leader'">
          <span v-if="scope.data.column.data[[scope.data.column.columnname]].length !== 0">{{scope.data.column.data[[scope.data.column.columnname]].length > 0 && scope.data.column.data[[scope.data.column.columnname]][0].name}}</span>
          <span v-else>--</span>
        </div>
        <div v-else-if="scope.data.column.columnname == 'city'">
          <span>{{scope.data.column.data[[scope.data.column.columnname]]?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>
      <template v-slot:tbOpreation="scope">
        <delData class="inline-16" :ownerid="scope.data.data.sat_orderclueid" :sys_object="application" @delSuccess="delSuccess"></delData>
        <recovery type="线索" class="inline-16" :ownerid="scope.data.data.sat_orderclueid" :sys_object="application" @recoverySuccess="queryData"></recovery>
      </template>
    </basicLayout>
  </div>
</template>

<script>
/**
 * @basicLayout 提供this.$ref['basicLayout'].listData()方法查询列表信息
 * @param {string} formPath 新建,编辑组件所在文件夹名称,以后所有列表新增修改文件统一放入Form文件夹下面,并创建与开发应用相同的名称的子文件夹
 * @param {string} tableName 开发端配置的表格名称
 * @param {String} idName 数据主id名称
 * @param {object} apiId:{query:查询的接口id,del:删除的接口id}
 * @param {Array} options:{label:描述,value:值}
 */
import recovery from "@/HManagement/ecycle/modules/recovery"
import delData from "@/HManagement/ecycle/modules/delData"
import batchDeletion from "@/HManagement/ecycle/modules/batchDeletion";
import batchRecovery from "@/HManagement/ecycle/modules/batchRecovery";
export default {
  data () {
    return {
      application:'1',
      applicationList:[
        {
          label: '销售线索',
          value: "1",
        },
        {
          label: '客户',
          value: "2",
        },
        {
          label: '合同',
          value: "3",
        },
        {
          label: '项目商机',
          value: "4",
        },
        {
          label: '报价单',
          value: "5",
        },
        {
          label: '合作伙伴',
          value: "6",
        }
      ],
      status:'',
      statusList:[],
      selectData:[]
    }
  },
  components:{recovery,delData,batchDeletion,batchRecovery},
  methods:{
    queryData(){
      this.$refs.basicLayout.param.content.isAll = 0
      this.$refs.basicLayout.param.content.type = 0
      this.$refs.basicLayout.param.content.deleted = 1
      this.$refs.basicLayout.listData()
    },
    applicationChange(val){
      console.log(val)
      this.$emit("changeApplication",val)
    },
    delSuccess(){
      this.queryData()
    },
    checkboxCallBack(val){
      this.selectData = []
      val.forEach((item,index) => {
        this.selectData[index] = item.sat_orderclueid
      })
      this.$refs.batchDeletion.length = this.selectData.length
      this.$refs.batchRecovery.length = this.selectData.length
      console.log(this.selectData)
    }
  },
  mounted() {
    this.queryData()
  },
  async created () {
    const res2 = await this.$store.dispatch('optiontypeselect','datafollowuptype')
    this.statusList = res2.data
    console.log(this.statusList);
  },
}

</script>
<style>
</style>