seecoder-devcloud-frontend/src/components/GeneralTable.vue

<template>
  <div class="table-prefix">
    <div class="right">
      <ElButton class="prefix-right-button" size="small" type="text" @click="clearFilter">清除过滤器</ElButton>
      <ElButton class="prefix-right-button" v-if="showAdd" size="small" type="primary" @click="add">新建</ElButton>
    </div>
  </div>
  <ElTable
    ref="tableRef"
    :data="data"
    @row-click="rowClick"
  >
    <ElTableColumn
      prop="id"
      label="ID"
      align="center"
      width="80"
    ></ElTableColumn>
    <ElTableColumn
      label="优先级"
      align="center"
      width="80"
      :filters="[{ text: '紧急', value: '紧急' }, { text: '一般', value: '一般' }, { text: '宽松', value: '宽松' }]"
      :filter-method="(value, row) => {
        return row.priority === value;
      }"
      filter-placement="bottom-end"
    >
      <template #default="scope">
        <PriorityTag :priority="scope.row.priority" />
      </template>
    </ElTableColumn>
    <ElTableColumn
      prop="title"
      label="名称"
      align="center"
      width="180"
    ></ElTableColumn>
    <ElTableColumn
      prop="processorName"
      label="负责人"
      align="center"
      width="120"
      :filters="[{ text: '我', value: me }]"
      :filter-method="(value, row) => {
        return row.processorName === value;
      }"
    ></ElTableColumn>
    <ElTableColumn
      prop="timeToTake"
      label="预期耗时"
      align="center"
      width="100"
    ></ElTableColumn>
    <ElTableColumn
      label="开始时间"
      :formatter="(row) => formatter(row.startTime)"
      align="center"
    ></ElTableColumn>
    <ElTableColumn
      label="结束时间"
      :formatter="(row) => formatter(row.endTime)"
      align="center"
    ></ElTableColumn>
    <ElTableColumn
      prop="state"
      label="执行状态"
      align="center"
      width="120"
      :filters="[{ text: '已创建', value: '已创建' }, { text: '进行中', value: '进行中' }, { text: '已完成', value: '已完成' }]"
      :filter-method="(value, row) => {
        return row.state === value;
      }"
    >
      <template #default="scope">
        <StateTag :state="scope.row.state" />
      </template>
    </ElTableColumn>
  </ElTable>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
import { useStore } from '@/store';

import StateTag from '@/components/StateTag.vue';
import PriorityTag from '@/components/PriorityTag.vue';
import { ElTable } from 'element-plus';

import { formatter } from '@/utils/time';

interface Record {
  commits: Array<CommitRecord>;
  description: string;
  endTime: string;
  id: number;
  priority: RecordPriority;
  processorId: number;
  processorName: string;
  startTime: string;
  state: RecordState;
  timeToTake: 0;
  title: string;
}

export default defineComponent({
  name: 'GeneralTable',
  components: { StateTag, PriorityTag },
  props: {
    data: Array as PropType<Record[]>,
    showAdd: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['row-click', 'add'],
  setup(props, { emit }) {
    const store = useStore();
    const rowClick = (...args: any[]) => {
      emit('row-click', ...args);
    };

    const tableRef = ref<typeof ElTable|null>(null);

    const clearFilter = () => {
      console.log(tableRef);
      tableRef.value!.clearFilter();
    };

    const add = () => {
      emit('add');
    };

    return {
      me: store.state.user.username,
      rowClick,
      tableRef,
      clearFilter,
      add,
      formatter,
    };
  },
});
</script>

<style lang="scss" scoped>
.table-prefix {
  width: 90%;
  margin: 0 auto;
  & .right {
    float: right;
    & .prefix-right-button {
      margin-left: 20px;
    }
  }
}
</style>