hyp-front/src/components/CustomTable/CustomTable.vue

<template>
  <div class="app-container">
<!--    表格部分-->
    <el-table v-loading="loading" :row-selection="true" :data="tableData" @select="handleSelectionChange">
      <el-table-column v-for="(column, index) in columns" :key="index" :label="column.label" :prop="column.prop" :align="column.align" :width="column.width">
        <template v-if="column.type === 'date'" v-slot:default="scope">
          <span>{{ parseTime(scope.row[column.prop], '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
        <template v-else-if="column.slotName === 'customSlotName'" v-slot:default="scope">
          <dict-tag :options="dict.type.rew_apply_status" :value="scope.row[column.prop]"/>
        </template>
        <template v-else-if="column.slotName === 'scoreStatus'" v-slot:default="scope">
          <el-tag v-for="(item,index) in scoreStatus" :key="index" :type="item.type" v-if="item.dictValue === scope.row.scoreStatus">{{item.dictLabel}}</el-tag>
        </template>
        <template v-else  v-slot:default="scope">
          <span>{{ scope.row[column.prop] }}</span>
        </template>
      </el-table-column>

      <!-- Actions Column -->
      <el-table-column v-if="actions.length > 0 && modalType !== 'score'" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-for="(action, index) in  filteredActions(scope.row.applyStatus)" :key="index" size="mini" type="text" :icon="action.icon" @click="action.handler(scope.row)">{{ action.text }}</el-button>
        </template>
      </el-table-column>
      <el-table-column v-else label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-for="(action, index) in  actions" :key="index" size="mini" type="text" :icon="action.icon" @click="action.handler(scope.row)">{{ action.text }}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
import {parseTime} from "@/utils/ruoyi";

export default {
  dicts: ['rew_apply_status'],
  props: {
    columns: {
      type: Array,
      required: true
    },
    tableData: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    actions: {
      type: Array,
      default: () => []
    },
    // 查询参数
    queryParams:{
      type:Object,
      default:()=>{}
    },
    //显示搜索条件
    showSearch:{
      type: Boolean,
      default: true
    },
    applyType:{
      type:String,
      default:'',
    },
    modalType:{
      type:String,
    }
  },
  data(){
    return {
      scoreStatus:[
        {
          dictLabel:"未评分",
          dictValue:0,
          type:"danger"
        },
        {
          dictLabel:"已评分",
          dictValue:1,
          type:"success",
        }
      ]
    }
  },
  mounted() {
  },
  methods: {
    parseTime,
    filteredActions(applyStatus) {
      if(applyStatus === 0 || applyStatus === 1){
        return this.actions.filter(action => action.text !== '退回意见');
      }
      if (applyStatus === 3) {
        return this.actions
      } else if(applyStatus === 2 || applyStatus === 4){
        return this.actions.filter(action => action.text === '查看');
      }
    },
    //父组件搜索方法
    getList(query){
      this.$emit('getList', query);
    },
    //父组件搜索方法
    handleAdd(applyType){
      this.$emit('handleAdd', applyType);
    },
    //父组件搜索方法
    handleQuery(query){
      this.$emit('handleQuery', query);
    },
    resetQuery(query){
      this.$emit('resetQuery', query);
    },
    handleSelectionChange(selection) {
      this.$emit('handleSelectionChange', selection);
    },
  }
}
</script>