动态表格筛选

<template>
  <el-container>
    <el-header>
      <app-search-form
       :model="ruleForm" 
       :config="formConfig"
       :search="doSearch"
       :reset="searchReset"
       class="m-t-16"/>
    </el-header>
    <div class="m-b-16 p-l-16 operate-btn-group">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button @click="handleExport">导出</el-button>
    </div>
    <el-main class="p-t-0">
      <app-table-pro
        :fetch="handleFetch"
        :columns="columns"
        ref="appTablePro"
        height="100%"
        @selection-change="handleSelectionChange">
        <template #code="{scope}">
          <span class="title" @click="handleToDetails(scope.row)"> {{scope.row.code}}</span>
        </template>
        <template #setting="{scope:{column}}">
          {{column.label}}
          <span>
            <el-divider direction="vertical"/>
          </span
          <el-popover
            :ref="`popover-${column.id}`"
            placement="bottom-end"
            popper-class="nopadding"
            trigger="click">
             <el-checkbox-group v-model="settingCheckboxVal">
               <div v-for="(item,index) in allColumn" :key="item.label" style="padding:3px 7px">
                 <el-checkbox :disabled="index===0" :label="item.prop">{{item.label}}</el-checkbox>
               </div>
             </el-checkbox-group>
             <div style="padding:8px 0 5px 8px;text-align:right">
               <el-button type="primary" @click="handleShowColumns(column)">确 定</el-button>
              <el-button @click="resetColumns">重 置</el-button>  
             </div>
             <i
               slot="reference"
               class="hi-icon-setting"
               style="float:right;margin-top:6px;cursor:pointer">
             </i>
          </el-popover>
        </template>
        <template #status="{scope}">
          <el-tag
            size="small"
            :type="scope.row.status===1 ? 'success' :'danger'">
            {{scope.row.status===1 ? '有效' :'无效'}}
          </el-tag>
        </template>
      </app-table-pro>
    </el-main>
      <handleRowDialog ref="handleRowDialog"/>
  </el-container>
</template>

<script>
import handleRowDialog from './components/handleRowDialog'

const allColumn=[
  {prop:'code',label:'岗位ID',slot:'code'},
  {prop:'name',label:'岗位名称'},
  {prop:'startTime',label:'生效日期'},
  {prop:'status',label:'状态',slot:'status'},
]
const defaultColumns=(self)=>[
  {type:'selection'},
  ...allColumn,
  {
    label:'操作',
    type:'operat',
    headerSlot:'setting',
    width:'96px',
    actions:scope=>{
      return [
        {
          action:'删除',
          type:'delete',
          confirmTitle:'确定要删除此岗位?',
          click:()=>self.handleOnedel(scope.row.code),
          direction:[{name:'permission',value:'del'}]
        }
      ]
    }
  }
]

// 列表搜索动态字段
const formConfig=(self,arr=[])=>{
  const config=[
    {
      prop:'code',
      label:'岗位',
      type:'hi-select',
      contentAttrs:{
        options:[],
        placeholder:'请输入关键字',
        filterable:true,
        remote:true,
        remoteMethod:query=>self.remoteMethod(query,'code')
      }
    },
    {
      prop:'status',
      label:'状态',
      type:'hi-select',
      contentAttrs:{
        options:[
          {value:0,label:'无效'},
          {value:1,label:'有效'}
        ],
      }
    },
    {
      prop:'keyTime',
      label:'关键日期',
      type:'el-date-picker',
      contentAttrs:{
       type:'date',
       valueFormat:'yyyy-MM-dd',
       placeholder:'选择日期'
      }
    }
  ]
  if(arr.includes('deptPath')){
    config.push({
      prop:'deptPath',
      label:'所属部门',
      type:'hi-select',
        contentAttrs:{
        options:[],
        placeholder:'请输入关键字',
        filterable:true,
        remote:true,
        remoteMethod:query=>self.remoteMethod(query,'deptPath')
      }

    })
  }
    if(arr.includes('postClassCodeAndName')){
    config.push({
      prop:'postClassCode',
      label:'所属岗位库',
      type:'hi-select',
        contentAttrs:{
        options:[],
        placeholder:'请输入关键字',
        filterable:true,
        remote:true,
        remoteMethod:query=>self.remoteMethod(query,'postClassCode')
      }

    })
  }
    if(arr.includes('sequenceName')){
    config.push({
      prop:'sequenceCode',
      label:'所属序列',
      type:'hi-select',
        contentAttrs:{
        options:[],
        placeholder:'请输入关键字',
        filterable:true,
        remote:true,
        remoteMethod:query=>self.remoteMethod(query,'sequenceCode')
      }
    })
  }
    if(arr.includes('subSequenceName')){
    config.push({
      prop:'subSequenceCode',
      label:'子序列',
      type:'hi-select',
        contentAttrs:{
        options:[],
        placeholder:'请输入关键字',
        filterable:true,
        remote:true,
        remoteMethod:query=>self.remoteMethod(query,'subSequenceCode')
      }
    })
  }
  return config
}
// 列表勾选动态字段
const checkboxColumnsConfig=['code','name','startTime','status']

export default {
  name:'positionManagement',
  components:{handleRowDialog},
  data() {
    return {
      ruleForm: {},
      defaultList:[],
      key:1,
      multipleSelection:[],
      postSystem:[],
      deptSystem:[],
      idslist:[],
      columns:defaultColumns(this),
      asyncProps:[],
      formConfig:formConfig(this),
      settingCheckboxVal:checkboxColumnsConfig,//字段勾选配置
      allColumn
    };
  },
  created(){
    this.ruleForm.keyTime=this.$formatDate(new Date(),'YYYY-MM-DD')
    this.initConfig()
  },
  methods: {
    initConfig() {
      const arr=this.asyncProps||[]
      this.formConfig=formConfig(this.arr)
      this.settingCheckboxVal=checkboxColumnsConfig
    },
    // 处理字段显示
    handleColumns(){
      const activeColumnsStartIndex=1
      const columnLength=this.columns.length
      const activeColumnsNum=columnLength-2
      const selectColumns=this.allColumn.filter(item=>
        this.settingCheckboxVal.includes(item.prop)
      )
      this.columns.splice(
        activeColumnsStartIndex,
        activeColumnsNum,
        ...selectColumns
      )
    },
    handleShowColumns({id}){
      this.handleColumns()
      this.$refs[`popover-${id}`].doClose()
      document.body.click()
    },
    resetColumns(){
      this.settingCheckboxVal=checkboxColumnsConfig
      this.handleColumns()
    },
    avtiveFormConfig(){
      if(this.postSystem.postType!==null&&this.deptSystem.type==='2'){
        !this.asyncProps.includes('deptPath')&&this.asyncProps.push('deptPath')
        if(!this.settingCheckboxVal.includes('deptPath')){
          this.allColumn.push({prop:'deptPath',label:'所属部门'})
          this.settingCheckboxVal.push('deptPath')
        }
      }
         if(this.deptSystem.type==='1'){
        !this.asyncProps.includes('postClassCodeAndName')&&this.asyncProps.push('postClassCodeAndName')
        if(!this.settingCheckboxVal.includes('postClassCodeAndName')){
          this.allColumn.push({prop:'postClassCodeAndName',label:'所属岗位库'})
          this.settingCheckboxVal.push('postClassCodeAndName')
        }
      }
      // 如果启用了子序列
         if(this.postSystem.subSequenceType!==null){
        !this.asyncProps.includes('subSequenceName')&&this.asyncProps.push('subSequenceName')
        if(!this.settingCheckboxVal.includes('subSequenceName')){
          this.allColumn.push({prop:'subSequenceName',label:'所属子序列'})
          this.settingCheckboxVal.push('subSequenceName')
        }
      }
       // 如果未启用子序列，启用了序列
         if(this.postSystem.subSequenceType===null&&this.postSystem.sequenceType!==null){
        !this.asyncProps.includes('sequenceName')&&this.asyncProps.push('sequenceName')
        if(!this.settingCheckboxVal.includes('sequenceName')){
          this.allColumn.push({prop:'sequenceName',label:'所属序列'})
          this.settingCheckboxVal.push('sequenceName')
        }
      }
      this.handleColumns()
      this.initConfig()
    },
    async handleFetch({size,current}){
      const keyTime=this.$formatDate(new Date(),'YYYY-MM-DD')
      const params={
        current,
        size,
        keyTime:keyTime,
        ...this.ruleForm
      }
      const [err,res]=await this.$to(ADMIN_API.getPostList(params))
      if(err)return
      this.defaultList=res.data
      const [err1,res1]=await this.$to(ADMIN_API.getCurrentPostDept())
      if(err1)return
      this.postSystem=res1.data
        const [err2,res2]=await this.$to(ADMIN_API.getCurrentPostDeptSys())
      if(err2)return
      this.deptSystem=res2.data
      this.avtiveFormConfig()
      this.handleColumns()
      const {list=[],total=0}=res.data
      this.idslist=list
      return {data:list,total}
    },
    async remoteMethod(query,str){
      if(!(query??''))return
      const keyTime=this.$formatDate(new Date(),'YYYY-MM-DD')
      const params={
        current:1,
        size:20,
        codeAndName:query,
        keyTime
      }
      if(str==='code'){
        const [err.res]=await this.$to(ADMIN_API.searchByJob(params))
        if(err)return
        const index=this.formConfig.findIndex(item=>item.prop==='code')
        this.formConfig[index].contentAttrs.options=res.data.map(item=>{
          return {
            label:item.codeAndName,
            value:item.code
          }
        })
      }
        if(str==='deptPath'){
        const [err.res]=await this.$to(ADMIN_API.searchJobByDeptName(params))
        if(err)return
        const index=this.formConfig.findIndex(item=>item.prop==='deptPath')
        this.formConfig[index].contentAttrs.options=res.data.map(item=>{
          return {
            label:item.deptPath,
            value:item.deptCode
          }
        })
      }
         if(str==='postCode'){
        const [err.res]=await this.$to(ADMIN_API.searchByPost(params))
        if(err)return
        const index=this.formConfig.findIndex(item=>item.prop==='postCode')
        this.formConfig[index].contentAttrs.options=res.data.map(item=>{
          return {
            label:item.codeAndName,
            value:item.code
          }
        })
      }
         if(str==='subSequenceCode'){
        const [err.res]=await this.$to(ADMIN_API.searchBySubSequence(params))
        if(err)return
        const index=this.formConfig.findIndex(item=>item.prop==='subSequenceCode')
        this.formConfig[index].contentAttrs.options=res.data.map(item=>{
          return {
            label:item.codeAndName,
            value:item.code
          }
        })
      }
        if(str==='sequenceCode'){
        const [err.res]=await this.$to(ADMIN_API.searchBySequence(params))
        if(err)return
        const index=this.formConfig.findIndex(item=>item.prop==='sequenceCode')
        this.formConfig[index].contentAttrs.options=res.data.map(item=>{
          return {
            label:item.codeAndName,
            value:item.code
          }
        })
      }
    },
    async handleExport(){
      const ids=this.multipleSelection.map(item=>item.id)
      const [errMessage,res]=await this.$to(ADMIN_API.exportJobByCode({ids:keyTime:this.ruleForm.keyTime,...this.ruleForm}))
      if(errMessage)return
      downloadBlobData(res)
    },
    handleSelectionChange(val){
      this.multipleSelection=val
    },
    handleToDetails(row){
      this.$pageBus({name:'PositionManagementDetails',query:{row:row.code}},
      val=>{
        this.doSearch()
      }
      )
    },
    async handleOnedel(code){
      const [errMessage]=await this.$to(ADMIN_API.delJob({code:code}))
      if(errMessage)return
      this.$message.success('删除成功')
      this.doRefresh()
    },
    handleAdd(){
      this.$refs.handleRowDialog.showModal({mode:'new',data:this.defaultList})
      .then(()=>{
        this.doRefresh()
      })
    },
    searchReset(){
      this.ruleForm={}
      this.ruleForm.keyTime=new Date()
      this.doSearch(this.ruleForm)
    }
    doSearch(ruleForm){
      this.ruleForm=ruleForm
      this.$refs.appTablePro.search()
    }
    doRefresh(ruleForm){
      this.$refs.appTablePro.refresh()
    }
  },
};
</script>

<style>
.count {
  color: red;
}
</style>