geg-gas-web/src/views/workflow/task/components/processTasks/MyProcess.vue

<template>
  <BasicTable @register="registerTable" @selection-change="selectionChange">
    <template #toolbar>
      <RejectProcess
        :processId="processId"
        :taskId="taskId"
        @close="reload"
        @restart="restartProcess"
        ><a-button v-auth="'processtasks:withdraw'">{{ t('撤回') }}</a-button></RejectProcess
      >
      <LookProcess :taskId="taskId" :processId="processId" @close="reload"
        ><a-button v-auth="'processtasks:view'">{{ t('查看') }}</a-button></LookProcess
      >
      <a-button v-auth="'processtasks:relaunch'" @click="restartProcess">{{
        t('重新发起')
      }}</a-button>
    </template>

    <template #currentProgress="{ record }">
      <a-progress v-if="record.currentProgress" :percent="record.currentProgress" size="small" />
    </template>
    <template #action="{ record }">
      <TableAction
        :actions="[
          {
            icon: 'ant-design:delete-outlined',
            auth: 'processtasks:delete',
            color: 'error',
            popConfirm: {
              title: t('移入回收站'),
              confirm: handleDelete.bind(null, record),
            },
          },
        ]"
      />
    </template>
  </BasicTable>
  <LaunchProcess
    v-if="restartProcessVisible"
    :schemaId="schemaId"
    :taskId="taskId"
    :processId="processId"
    @close="restartProcessClose"
  />
</template>

<script setup lang="ts">
  import userTaskTable from './../../hooks/userTaskTable';

  import { ref, unref, watch } from 'vue';

  import LookProcess from './../LookProcess.vue';
  import LaunchProcess from './../LaunchProcess.vue';
  import RejectProcess from './../RejectProcess.vue';

  import { BasicTable, useTable, TableAction, BasicColumn } from '/@/components/Table';
  import { getSchemaTask, moveRecycle } from '/@/api/workflow/process';
  import { notification } from 'ant-design-vue';
  import { TaskTypeUrl } from '/@/enums/workflowEnum';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useRouter } from 'vue-router';
  const { t } = useI18n();
  const restartProcessVisible = ref(false);
  const configColumns: BasicColumn[] = [
    {
      title: t('流水号'),
      dataIndex: 'serialNumber',
      width: 50,
      sorter: true,
    },
    {
      title: t('流程名称'),
      dataIndex: 'processName',
      align: 'left',
      width: '32%',
      sorter: true,
    },
    {
      title: t('任务名称'),
      dataIndex: 'currentTaskName',
      sorter: true,
      width: '17%',
      align: 'left',
    },
    {
      title: t('当前进度'),
      dataIndex: 'currentProgress',
      sorter: true,
      width: '17%',
      slots: { customRender: 'currentProgress' },
    },
    {
      title: t('发起人'),
      dataIndex: 'originator',
      align: 'left',
      width: 80,
    },
    {
      title: t('发起时间'),
      align: 'left',
      width: 120,
      dataIndex: 'createTime',
    },
  ];

  const { formConfig, processId, taskId, schemaId, selectionChange } = userTaskTable();

  const [registerTable, { reload }] = useTable({
    title: t('我的流程列表'),
    api: getSchemaTask,
    rowKey: 'id',
    columns: configColumns,
    formConfig: formConfig('MyProcess'),
    rowSelection: {
      type: 'radio',
    },
    beforeFetch: (params) => {
      return { data: params, taskUrl: TaskTypeUrl.MY_PROCESS };
    },
    useSearchForm: true,
    showTableSetting: true,
    striped: false,
    pagination: {
      pageSize: 18,
    },
    actionColumn: {
      width: 60,
      title: t('操作'),
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: undefined,
    },
  });

  function restartProcess() {
    if (processId.value) {
      restartProcessVisible.value = true;
    } else {
      notification.open({
        type: 'error',
        message: t('提示'),
        description: t('请选择一个流程重新发起'),
      });
    }
  }
  function restartProcessClose() {
    restartProcessVisible.value = false;
    reload();
  }
  async function handleDelete(record: Recordable) {
    if (record.processId) {
      try {
        let res = await moveRecycle(record.processId);
        if (res) {
          notification.open({
            type: 'success',
            message: t('移入回收站'),
            description: t('移入回收站成功'),
          });
          reload();
        } else {
          notification.open({
            type: 'error',
            message: t('移入回收站'),
            description: t('移入回收站失败'),
          });
        }
      } catch (error) {}
    }
  }
  const { currentRoute } = useRouter();
  watch(
    () => unref(currentRoute),
    (val) => {
      if (val.name == 'ProcessTasks') reload();
    },
    { deep: true },
  );
</script>

<style scoped></style>