yxk-20260424-新增通用查询流程组件v1，传入businessid查询所有相关流程

2026-04-24 15:17:40 +08:00
parent 5ee753b967
commit 1307f4e4f9
3 changed files with 218 additions and 67 deletions
@@ -0,0 +1,124 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="1400"
+    :visible="visible"
+    :footer="null"
+    @cancel="handleCancel"
+    cancelText="关闭"
+  >
+    <div class="business-process-list-modal">
+      <BasicTable @register="registerTable">
+        <template #action="{ record }">
+          <TableAction :actions="getTableAction(record)" />
+        </template>
+      </BasicTable>
+    </div>
+    <BpmPictureModal @register="registerBpmModal" />
+  </j-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicTable, TableAction, useTable } from '/@/components/Table';
+  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { columns } from '/@/views/taskProcess/TaskTask.data';
+  import { queryByBusinessId } from '/@/api/common/api';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  interface OpenParams {
+    businessId?: string;
+    title?: string;
+  }
+
+  const title = ref('流程列表');
+  const visible = ref(false);
+  const currentBusinessId = ref('');
+  const { createMessage } = useMessage();
+  const [registerBpmModal, { openModal: bpmPicModal }] = useModal();
+
+  const [registerTable, { setTableData, setLoading, clearSelectedRowKeys }] = useTable({
+    rowKey: 'id',
+    columns,
+    useSearchForm: false,
+    canResize: false,
+    pagination: false,
+    showIndexColumn: true,
+    bordered: true,
+    actionColumn: {
+      title: '操作',
+      dataIndex: 'action',
+      width: 120,
+      fixed: 'right',
+      slots: { customRender: 'action' },
+    },
+    scroll: {
+      x: 3600,
+    },
+  });
+
+  async function loadData() {
+    if (!currentBusinessId.value) {
+      setTableData([]);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const res = await queryByBusinessId({ businessId: currentBusinessId.value });
+      const list = Array.isArray(res?.result) ? res.result : [];
+      setTableData(list);
+      if (!list.length) {
+        createMessage.warning(res?.message || '未查询到流程数据');
+      }
+    } catch (error) {
+      setTableData([]);
+    } finally {
+      setLoading(false);
+      clearSelectedRowKeys();
+    }
+  }
+
+  function open(params: OpenParams = {}) {
+    currentBusinessId.value = params.businessId || '';
+    title.value = params.title || '流程列表';
+    visible.value = true;
+    loadData();
+  }
+
+  function handleCancel() {
+    visible.value = false;
+    currentBusinessId.value = '';
+    setTableData([]);
+    clearSelectedRowKeys();
+  }
+
+  function handlePreviewPic(record) {
+    bpmPicModal(true, {
+      flowCode: record.flowCode,
+      dataId: record.id,
+    });
+  }
+
+  function getTableAction(record) {
+    return [
+      {
+        label: '审批历史',
+        onClick: handlePreviewPic.bind(null, record),
+      },
+    ];
+  }
+
+  defineExpose({
+    open,
+  });
+</script>
+
+<style lang="less" scoped>
+  .business-process-list-modal {
+    :deep(.vben-basic-table) {
+      padding: 0;
+    }
+  }
+</style>