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

<template>
  <div>
    <basicLayout
      ref="basicLayout"
      :oldFormPath="{
        add:'HManagement/clueManage/m_activity/modules',
        edit:'HManagement/clueManage/m_activity/modules',
      }"
      tableName="activitylist"
      idName="sat_campaignid"
      :apiId="{query:20221101095102,del:''}"
      :options="options"
      :detailPath="{path:'/marketing_activityDetails',param:{tabIndex:tabIndex}}"
      :specialKey="[{key:'leader',value:'name'}]"
      :autoQuery="false"
    >
     <template #custom >
       <div class="mt-10">
        <p class="search__label">范围:</p>
        <el-select
          class="inline-24"
          size="small"
          v-model="area"
          placeholder="请选择范围"
          @change="areaChange"
        >
          <el-option
            v-for="item in areaList2"
            :key="item.index"
            :label="item.templetname"
            :value="item.templetid"
          ></el-option>
        </el-select>
      </div>
       <div class="mt-10">
        <p class="search__label">活动类型:</p>
        <el-select v-model="search.type" class="inline-24" size="small" placeholder="请选择活动类型" @change="campaigntypeChange" clearable>
          <el-option
            v-for="item in campaigntypeList"
            :key="item.index"
            :label="item.value"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="mt-10">
        <p class="search__label">活动状态:</p>
        <el-select v-model="search.status" class="inline-24" size="small" placeholder="请选择活动状态" @change="statusChange" clearable>
          <el-option label="新建" value="新建">
          </el-option>
          <el-option label="发布" value="发布">
          </el-option>
          <el-option label="结束" value="结束">
          </el-option>
        </el-select>
      </div>
     </template>
      <div slot="titleRight" style="display:flex;margin-left:10px">
      </div>
      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname == 'status'">
          <span style="color:#000000" v-if="scope.data.column.data[[scope.data.column.columnname]] == '新建'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#cccccc" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '结束'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color: rgb(82, 196, 26)" 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 == 'director'">
          <span >{{scope.data.column.data.director || '--'}}</span>
        </div>
        <div v-else-if="scope.data.column.columnname == 'leader'">
          <span >{{scope.data.column.data.leader ? scope.data.column.data.leader[0].name : '--'}}</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>
          {{scope.data.column.data[[scope.data.column.columnname]]?scope.data.column.data[[scope.data.column.columnname]]:'--'}}
        </div>
      </template>
    </basicLayout>
  </div>
</template>

<script>
export default {
  components:{
  },
  data () {
    return {
      options:[],
      search:{},
      campaigntypeList:'',
      areaList2:[
      ],
      area:'',
      tabIndex:"1",
    }
  },
  provide () {
    return {
      campaigntypeList: () => this.campaigntypeList
    }
  },
  methods:{
    listData(id) {
      this.$refs.basicLayout.param.content.pageNumber = 1
      this.$refs.basicLayout.param.content.type = id
      this.$refs.basicLayout.param.content.isAll = 0
      this.$refs.basicLayout.listData()
    },
    list (param) {
      param.content.isAll = 0
      param.content.nocache = true
      param.content.type = this.area
    },
    async campaigntype () {
      const res = await this.$api.requested({
        "id": 20220901092501,
        "content": {
          "typename":'campaigntype'
        }
      })
      this.campaigntypeList = res.data
    },
    campaigntypeChange () {
      this.$refs.basicLayout.param.content.pageNumber = 1
      this.$refs.basicLayout.param.content.where.type = this.search.type
      this.$refs.basicLayout.listData()
    },
    statusChange () {
      this.$refs.basicLayout.param.content.pageNumber = 1
      this.$refs.basicLayout.param.content.where.status = this.search.status
      this.$refs.basicLayout.listData()
    },
    areaChange(){
      this.tabIndex = this.area
      this.$refs.basicLayout.param.content.pageNumber=1;
      this.$refs.basicLayout.param.content.type = this.area;
      this.$refs.basicLayout.listData()
    },
    async querytemplet () {
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.querytemplet.querytemplet",
        "method":"query",
        "content": {}
      })
      this.areaList2 = res.data
      for (let i=0;i<this.areaList2.length;i++){
        if (res.data[i].templetname == '站点全部'){
          this.area = res.data[i].templetid
          break
        }else {
          this.area = res.data[0].templetid
        }
      }
      this.listData(this.area)

    }
  },
  created () {
    this.campaigntype()
    this.querytemplet()
  }
}

</script>
<style>
</style>