vue-vben-admin/src/views/demo/workflow/scheme/HistoryDrawer.vue

<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter title="历史记录" width="60%" @ok="handleSubmit">
    <BasicTable @register="registerTable" :searchInfo="searchInfo">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="[
              {
                icon: 'clarity:info-standard-line',
                tooltip: '查看历史记录',
                onClick: handleHistory.bind(null, record),
              }
            ]" />
        </template>
      </template>

    </BasicTable>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, computed, unref, reactive, onMounted, h } from 'vue';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { getLoadHistoryPage,updateScheme } from '@/api/sys/WFSchemeInfo';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { Tag, Switch } from 'ant-design-vue';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createConfirm, createMessage } = useMessage();
  defineOptions({ name: 'HistoryDrawer' });

  const emit = defineEmits(['success', 'register']);

  const rowId = ref('');
  const searchInfo = reactive < Recordable > ({});
  const schemeId = ref('')
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    setDrawerProps({ confirmLoading: false });
    searchInfo.id = data.record.id
    schemeId.value = data.record.schemeId
    reload()
  });
  const [registerTable, { reload, getPaginationRef, }] = useTable({
    api: getLoadHistoryPage,
    columns: [
      {
        title: '创建人',
        dataIndex: 'createUserName',
      },
      {
        title: '创建时间',
        dataIndex: 'createDate',
      },
      {
        title: '状态',
        dataIndex: 'type',
        customRender: ({ record }) => {
          if (record.type == 1) {
            const color = 'green';
            const text = '正式';
            return h(Tag, { color: color }, () => text);
          } else {
            const color = 'blue';
            const text = '草稿';
            return h(Tag, { color: color }, () => text);
          }
        }
      },
      {
        title: '当前版本',
        dataIndex: 'enabledMark',
        width: 80,
        customRender: ({ record }) => {
          if (!record.type) {
            const color = 'blue';
            const text = '草稿';
            return h(Tag, { color: color }, () => text);
          } else {
            return h(Switch, {
              checked: record.id === schemeId.value,
              onChange(checked) {
                const { createMessage } = useMessage();
                updateScheme({ schemeId: record.id, id: searchInfo.id })
                  .then((data) => {
                    createMessage.success(data.message);
                    schemeId.value = record.id
                    reload()
                  })
                  .catch((err) => {
                    createMessage.error(err.message);
                  })
                  .finally(() => {
                    record.pendingStatus = false;
                  });
              },
            });
          }
        },
      },
    ],
    useSearchForm: false,
    showTableSetting: false,
    tableSetting: { fullScreen: true },
    showIndexColumn: false,
    maxHeight: 680,
    rowKey: 'id',
    handleSearchInfoFn(info) {
      return info;
    },
    actionColumn: {
      width: 100,
      title: '操作',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
    },
  });
  function handleHistory(record) {

  }
  onMounted(() => {
  });
  async function handleSubmit() {
    try {
      const values = await validate();
      let query = values
      // 调用接口
      if (!unref(isUpdate)) {
        const data = await addRole(query);
      } else {
        const data = await updateRole(query);
      }


      setModalProps({ confirmLoading: true });
      // TODO custom api
      closeModal();
      emit('success');
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>