
<template>
  <div>
    <basicLayout 
      ref="basicLayout" 
      :oldFormPath="{
        add:'HManagement/task/modules',
        edit:'HManagement/task/modules'
      }"
      tableName="taskTable" 
      idName="sys_taskid"
      :autoQuery="false"
      :apiId="{query:20220901162901,del:20221211112601}"
      :detailPath="{
        path:'/taskDetails',
        param:{
          type:type
        }
      }">
      <template #custom>
        <div  class="mt-10">
          <label class="search__label">任务范围:</label>
          <el-select class="inline-16" v-model="type" size="small" placeholder="请选择" @change="selectChange" >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div  class="mt-10">
          <label class="search__label">任务状态:</label>
          <el-select class="inline-16" v-model="status" size="small" placeholder="请选择" @change="selectChange" clearable>
            <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.label">
            </el-option>
          </el-select>
        </div>
      </template>
      <template v-slot:tbList="scope">
        <div>
          <span v-if="scope.data.column.columnname === 'leader'">
            <el-tag size="small" :type="scope.data.column.data.leader[0]?'primary':'info'" effect="dark">{{scope.data.column.data.leader[0]?scope.data.column.data.leader[0].name:'无负责人'}}</el-tag>
          </span>
          <div v-else-if="scope.data.column.columnname === 'status'">
            <p v-if="scope.data.column.data.status === '进行中'" style="color:#52c41a">{{scope.data.column.data.status}}</p>
            <p v-else-if="scope.data.column.data.status === '待执行'" style="color:#3874f6">{{scope.data.column.data.status}}</p>
            <p v-else style="color:#333333">{{scope.data.column.data.status}}</p>
          </div>
          <span v-else>{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
        </div>
      </template>
      <template v-slot:tbOpreation="scope">
      </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:值} 
 */
export default {
  data () {
    return {
      options:[{label:'我负责的',value:1},{label:'我参与的',value:2},{label:'我下属负责的',value:3},{label:'我下属参与的',value:4},{label:'我创建的',value:5}],
      type:1,
      statusList:[
        {
          label:'待执行',
          value:1
        },
        {
          label:'进行中',
          value:2
        },
        {
          label:'已完成',
          value:3
        },
      ],
      status:''
    }
  },
  methods:{
    selectChange () {
      this.queryData()
    },
    queryData () {
      this.$refs['basicLayout'].param.content.type = this.type
      this.$refs.basicLayout.param.content.where.status = this.status
      this.$refs['basicLayout'].listData()
    }
  },
  mounted () {
    this.queryData()
  }
}

</script>
<style>
</style>