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

<template>
  <div>
    <basicLayout
        ref="basicLayout"
        tableName="projectChangeTable"
        idName="sa_projectid"
        :apiId="{query:20221020143502,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">{{ $t('应用') }}:</p>
          <el-select
              class="inline-24"
              size="small"
              v-model="application"
              :placeholder="$t('请选择范围')"
              @change="applicationChange"
          >
            <el-option
                v-for="item in applicationList"
                :key="item.index"
                :label="$t(item.label)"
                :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label  class="search__label">{{ $t('项目类型') }}:</label>
          <el-select class="inline-24" v-model="selectParam.projecttype" :placeholder="$t('请选择项目类型')" @change="selectChange" size="small" clearable>
            <el-option
                v-for="item in projectType"
                :key="item.value"
                :label="$t(item.value)"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label  class="search__label">{{ $t('项目等级') }}:</label>
          <el-select class="inline-24" v-model="selectParam.grade" :placeholder="$t('请选择项目等级')" @change="selectChange" size="small" clearable>
            <el-option
                v-for="item in projectLead"
                :key="item.value"
                :label="$t(item.value)"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label  class="search__label">{{ $t('当前项目阶段') }}:</label>
          <el-select class="inline-24" v-model="selectParam.stagename" :placeholder="$t(`请选择项目阶段`)" @change="selectChange" size="small" clearable>
            <el-option
                v-for="item in option.stageList"
                :key="item.stagename"
                :label="$t(item.stagename)"
                :value="item.stagename">
            </el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label  class="search__label">{{ $t('项目状态') }}:</label>
          <el-select class="inline-24" v-model="selectParam.status" :placeholder="$t(`请选择项目状态`)" @change="selectChange" size="small" clearable>
            <el-option
                v-for="item in option.statusTab"
                :key="item.value"
                :label="$t(item.label)"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label  class="search__label">{{ $t('创建日期') }}:</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="$t(`至`)"
              :start-placeholder="$t(`开始日期`)"
              :end-placeholder="$t(`结束日期`)"
              clearable>
          </el-date-picker>
        </div>
      </template>
      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname === 'status'">
          <span :style="tool.getStatusColor(scope.data.column.data[[scope.data.column.columnname]])">{{$t(scope.data.column.data[[scope.data.column.columnname]])}}</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="#FA8C16" size="mini" type="warning" effect="dark">
              <span>{{$t(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="#FAAB16" size="mini" type="warning" effect="dark">
              <span>{{$t(item)}}</span>
            </el-tag>
          </div>
        </div>
        <div v-else-if="scope.data.column.columnname === 'name'">
          {{scope.data.column.data.leader[0] && scope.data.column.data.leader[0].name}}
        </div>
        <div v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]?$t(scope.data.column.data[[scope.data.column.columnname]]):'--'}}
        </div>
      </template>
      <template v-slot:tbOpreation="scope">
        <delData class="inline-16" :ownerid="scope.data.data.sa_projectid" :sys_object="application" @delSuccess="queryData"></delData>
        <recovery type="项目" class="inline-16" :ownerid="scope.data.data.sa_projectid" :sys_object="application" :data="scope.data.data" @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:'4',
      applicationList:[
        {
          label: '销售线索',
          value: "1",
        },
        {
          label: '客户',
          value: "2",
        },
        {
          label: '合同',
          value: "3",
        },
        {
          label: '项目商机',
          value: "4",
        },
        {
          label: '报价单',
          value: "5",
        },
        {
          label: '合作伙伴',
          value: "6",
        },
        {
          label: '商品',
          value: "7",
        },
        {
          label: '公海线索',
          value: "8",
        }
      ],
      projectType:'',
      projectLead:'',
      dateSelect:'',
      option:{
        statusTab:[
          {
            value:"跟进中",
            label:"跟进中"
          },
          {
            value:"已成交",
            label:"已成交"
          },
          {
            value:"已失败",
            label:"已失败"
          }
        ],
        stageList:[

        ]
      },
      selectParam: {
        status:'',
        projecttype:'',
        grade:'',
        startdate:'',
        enddate:'',
        stagename:''
      },
      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.param.content.sort = [{reversed:0,sorted:1,sortid:185,sortname:'作废时间倒序'}]
      this.$refs.basicLayout.listData()
    },
    applicationChange(val){
      this.$emit("changeApplication",val)
    },
    /** 获取公司数据 */
    async getEnterprise () {
      let res = await this.$api.requested({
        "id": 20221021095802,
        "content": {
          "pageNumber": 1,
          "pageSize": 99999,
          "where": {
            "condition": ""
          }
        },
      })
      this.enterpriseList = res.data
    },
    async getSysetms () {
      /* 获取项目类型 */
      let res = await this.$store.dispatch('optiontypeselect','projecttype')
      this.projectType = res.data
      /* 获取项目等级 */
      let res2 = await this.$store.dispatch('optiontypeselect','projectgrade')
      this.projectLead = res2.data

    },
    /*获取阶段*/
    async stageData(){
      const res = await this.$api.requested({
        "id": 20221128143604,
        "content": {
          "pageNumber": 1,
          "pageSize": 99,
          "where": {
            "condition": "",
            "allprojecttype":"",
            "projecttype":""
          }
        }
      })
      this.option.stageList = 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.type = 0
      this.$refs.basicLayout.param.content.where = this.selectParam
      this.$refs.basicLayout.listData()
    },
    checkboxCallBack(val){
      this.selectData = []
      val.forEach((item,index) => {
        this.selectData[index] = item.sa_projectid
      })
      this.$refs.batchDeletion.length = this.selectData.length
      this.$refs.batchRecovery.length = this.selectData.length
    }
  },
  mounted() {
    this.queryData()
  },
  created () {
    this.getEnterprise()
    this.getSysetms()
    this.stageData()
  },
}

</script>
<style>
</style>