add:管理员修正数据功能-指派流程、修改审批人、加减签、审批记录、流程变更记录、未完成流程表单变更功能

src/views/actHiTaskinst/components/ActhitaskinstModal.vue

@@ -0,0 +1,110 @@
+<template>
+
+    <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" @cancel="handleClose" :paddingRight="15" :bodyStyle="{ minHeight: '400px !important' }">
+      <ModalForm ref="formRef" :fromPage="FromPageType.MENU" />
+    </BasicModal>
+
+</template>
+<script lang="ts" setup>
+  import { ref, computed, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { formProps } from './config';
+  import ModalForm from './Form.vue';
+  import { FromPageType } from '/@/enums/workflowEnum';
+
+  const emit = defineEmits(['success', 'register']);
+
+  const { notification } = useMessage();
+  const formRef = ref();
+  const state = reactive({
+    formModel: {},
+    isUpdate: true,
+    isView: false,
+    isCopy: false,
+    rowId: '',
+  });
+
+  const { t } = useI18n();
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    state.isUpdate = !!data?.isUpdate;
+    state.isView = !!data?.isView;
+    state.isCopy = !!data?.isCopy;
+
+    setModalProps({
+      destroyOnClose: true,
+      maskClosable: false,
+      showCancelBtn: !state.isView,
+      showOkBtn: !state.isView,
+      canFullscreen: true,
+      width: 900,
+    });
+    if (state.isUpdate || state.isView || state.isCopy) {
+      state.rowId = data.id;
+      if (state.isView) {
+        await formRef.value.setDisabledForm();
+      }
+      await formRef.value.setFormDataFromId(state.rowId);
+    } else {
+      formRef.value.resetFields();
+    }
+  });
+
+  const getTitle = computed(() => (state.isView ? '查看' : !state.isUpdate ? '新增' : '编辑'));
+
+  async function saveModal() {
+    let saveSuccess = false;
+    try {
+      const values = await formRef.value?.validate();
+      //添加隐藏组件
+      if (formProps.hiddenComponent?.length) {
+        formProps.hiddenComponent.forEach((component) => {
+          values[component.bindField] = component.value;
+        });
+      }
+      if (values !== false) {
+        try {
+          if (!state.isUpdate || state.isCopy) {
+            saveSuccess = await formRef.value.add(values);
+          } else {
+            saveSuccess = await formRef.value.update({ values, rowId: state.rowId });
+          }
+          return saveSuccess;
+        } catch (error) {}
+      }
+    } catch (error) {
+      return saveSuccess;
+    }
+  }
+
+  async function handleSubmit() {
+    try {
+      const saveSuccess = await saveModal();
+      setModalProps({ confirmLoading: true });
+      if (saveSuccess) {
+        if (!state.isUpdate || state.isCopy) {
+          //false 新增
+          notification.success({
+            message: 'Tip',
+            description: t('新增成功！'),
+          }); //提示消息
+        } else {
+          notification.success({
+            message: 'Tip',
+            description: t('修改成功！'),
+          }); //提示消息
+        }
+        closeModal();
+        formRef.value.resetFields();
+        emit('success');
+      }
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+    
+  function handleClose() {
+    formRef.value.resetFields();
+  }
+</script>

src/views/actHiTaskinst/components/CustomDevForm.vue

@@ -0,0 +1,491 @@
+<template>
+    <div ref="formWrap">
+        <Form ref="formRef" :label-col="getProps?.labelCol" :labelAlign="getProps?.labelAlign"
+            :layout="getProps?.layout" :model="formModel" :wrapper-col="getProps?.wrapperCol"
+            @keypress.enter="handleEnterPress">
+            <!-- id  -->
+
+            <!-- <Col v-if="getIfShow2('e21c39e056964ba1af0207c8dfa7b54b')"
+                v-show="getIsShow2('e21c39e056964ba1af0207c8dfa7b54b')"
+                :span="getColWidth(schemaMap['e21c39e056964ba1af0207c8dfa7b54b'])">
+            <template v-if="showComponent(schemaMap['e21c39e056964ba1af0207c8dfa7b54b'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['e21c39e056964ba1af0207c8dfa7b54b'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['e21c39e056964ba1af0207c8dfa7b54b']" />
+            </template>
+</Col> -->
+            <!-- 节点名称  -->
+
+            <!-- <Col v-if="getIfShow2('a7f8acb0021c4df09452039b01ec313d')"
+                v-show="getIsShow2('a7f8acb0021c4df09452039b01ec313d')"
+                :span="getColWidth(schemaMap['a7f8acb0021c4df09452039b01ec313d'])">
+            <template v-if="showComponent(schemaMap['a7f8acb0021c4df09452039b01ec313d'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['a7f8acb0021c4df09452039b01ec313d'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['a7f8acb0021c4df09452039b01ec313d']" />
+            </template>
+            </Col> -->
+            <!-- 流程名称  -->
+
+            <!-- <Col v-if="getIfShow2('7107f6f6ef594c6687b9087e7f823c4d')"
+                v-show="getIsShow2('7107f6f6ef594c6687b9087e7f823c4d')"
+                :span="getColWidth(schemaMap['7107f6f6ef594c6687b9087e7f823c4d'])">
+            <template v-if="showComponent(schemaMap['7107f6f6ef594c6687b9087e7f823c4d'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['7107f6f6ef594c6687b9087e7f823c4d'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['7107f6f6ef594c6687b9087e7f823c4d']" />
+            </template>
+            </Col> -->
+            <!-- 流程默认id  -->
+
+            <!-- <Col v-if="getIfShow2('76db839377a7417f87d9d7540dd1f5f4')"
+                v-show="getIsShow2('76db839377a7417f87d9d7540dd1f5f4')"
+                :span="getColWidth(schemaMap['76db839377a7417f87d9d7540dd1f5f4'])">
+            <template v-if="showComponent(schemaMap['76db839377a7417f87d9d7540dd1f5f4'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['76db839377a7417f87d9d7540dd1f5f4'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['76db839377a7417f87d9d7540dd1f5f4']" />
+            </template>
+            </Col> -->
+            <!-- 根节点实例id  -->
+
+            <!-- <Col v-if="getIfShow2('11acfec9f51b4a45a390840acd00b077')"
+                v-show="getIsShow2('11acfec9f51b4a45a390840acd00b077')"
+                :span="getColWidth(schemaMap['11acfec9f51b4a45a390840acd00b077'])">
+            <template v-if="showComponent(schemaMap['11acfec9f51b4a45a390840acd00b077'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['11acfec9f51b4a45a390840acd00b077'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['11acfec9f51b4a45a390840acd00b077']" />
+            </template>
+            </Col> -->
+            <!-- 流程实例id  -->
+
+            <!-- <Col v-if="getIfShow2('31d294d5c7c845f88d1176ab5a4913e0')"
+                v-show="getIsShow2('31d294d5c7c845f88d1176ab5a4913e0')"
+                :span="getColWidth(schemaMap['31d294d5c7c845f88d1176ab5a4913e0'])">
+            <template v-if="showComponent(schemaMap['31d294d5c7c845f88d1176ab5a4913e0'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['31d294d5c7c845f88d1176ab5a4913e0'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['31d294d5c7c845f88d1176ab5a4913e0']" />
+            </template>
+            </Col> -->
+            <!-- 执行节点id  -->
+
+            <!-- <Col v-if="getIfShow2('f58327d6d3b04aad93eb415b3b8bfc60')"
+                v-show="getIsShow2('f58327d6d3b04aad93eb415b3b8bfc60')"
+                :span="getColWidth(schemaMap['f58327d6d3b04aad93eb415b3b8bfc60'])">
+            <template v-if="showComponent(schemaMap['f58327d6d3b04aad93eb415b3b8bfc60'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['f58327d6d3b04aad93eb415b3b8bfc60'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['f58327d6d3b04aad93eb415b3b8bfc60']" />
+            </template>
+            </Col> -->
+            <!-- 节点实例id  -->
+
+            <!-- <Col v-if="getIfShow2('c88aeae388c4488aa459e023cd1a35e8')"
+                v-show="getIsShow2('c88aeae388c4488aa459e023cd1a35e8')"
+                :span="getColWidth(schemaMap['c88aeae388c4488aa459e023cd1a35e8'])">
+            <template v-if="showComponent(schemaMap['c88aeae388c4488aa459e023cd1a35e8'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['c88aeae388c4488aa459e023cd1a35e8'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['c88aeae388c4488aa459e023cd1a35e8']" />
+            </template>
+            </Col> -->
+            <!-- 节点名称  -->
+
+            <!-- <Col v-if="getIfShow2('e444605174364af2b10897b2987d2dec')"
+                v-show="getIsShow2('e444605174364af2b10897b2987d2dec')"
+                :span="getColWidth(schemaMap['e444605174364af2b10897b2987d2dec'])">
+            <template v-if="showComponent(schemaMap['e444605174364af2b10897b2987d2dec'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['e444605174364af2b10897b2987d2dec'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['e444605174364af2b10897b2987d2dec']" />
+            </template>
+            </Col> -->
+
+            <!--任务id-->
+            <!-- <Col v-if="getIfShow2('e111605174364af2b10897b2987d2dec')"
+                v-show="getIsShow2('e111605174364af2b10897b2987d2dec')"
+                :span="getColWidth(schemaMap['e111605174364af2b10897b2987d2dec'])">
+            <template v-if="showComponent(schemaMap['e111605174364af2b10897b2987d2dec'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['e111605174364af2b10897b2987d2dec'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['e111605174364af2b10897b2987d2dec']" />
+            </template>
+            </Col> -->
+
+            <!--任务名称-->
+            <!-- <Col v-if="getIfShow2('e444555174364af2b10897b2987d2dec')"
+                v-show="getIsShow2('e444555174364af2b10897b2987d2dec')"
+                :span="getColWidth(schemaMap['e444555174364af2b10897b2987d2dec'])">
+            <template v-if="showComponent(schemaMap['e444555174364af2b10897b2987d2dec'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['e444555174364af2b10897b2987d2dec'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['e444555174364af2b10897b2987d2dec']" />
+            </template>
+            </Col> -->
+
+            <!--审核人-->
+            <!-- <Col v-if="getIfShow2('c33aeae997a4488aa459e023ae1a21e8')"
+                v-show="getIsShow2('c33aeae997a4488aa459e023ae1a21e8')"
+                :span="getColWidth(schemaMap['c33aeae997a4488aa459e023ae1a21e8'])">
+            <template v-if="showComponent(schemaMap['c33aeae997a4488aa459e023ae1a21e8'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['c33aeae997a4488aa459e023ae1a21e8'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['c33aeae997a4488aa459e023ae1a21e8']" />
+            </template>
+            </Col> -->
+
+            <!--流程id-->
+            <div class="ant-col ant-col-24">
+                <div class="ant-row ant-form-item" style="row-gap: 0px;">
+                    <div class="ant-col ant-form-item-label" style="width: 120px;">
+                        <label>流程实列id</label>
+                    </div>
+                    <div class="ant-col ant-form-item-control">
+                        <div class="ant-form-item-control-input">
+                            <div class="ant-form-item-control-input-content">
+                                <div class="field-readonly">
+                                    {{ assignee.value.processInstId }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="ant-col ant-col-24">
+                <div class="ant-row ant-form-item" style="row-gap: 0px;">
+                    <div class="ant-col ant-form-item-label" style="width: 120px;">
+                        <label>子流程实例id</label>
+                    </div>
+                    <div class="ant-col ant-form-item-control">
+                        <div class="ant-form-item-control-input">
+                            <div class="ant-form-item-control-input-content">
+                                <div class="field-readonly">
+                                    {{ assignee.value.subProcessInstId ? assignee.value.subProcessInstId : '无' }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="ant-col ant-col-24">
+                <div class="ant-row ant-form-item" style="row-gap: 0px;">
+                    <div class="ant-col ant-form-item-label" style="width: 120px;">
+                        <label>子流程实例名</label>
+                    </div>
+                    <div class="ant-col ant-form-item-control">
+                        <div class="ant-form-item-control-input">
+                            <div class="ant-form-item-control-input-content">
+                                <div class="field-readonly">
+                                    {{ assignee.value.subProcessInstName ? assignee.value.subProcessInstName : '无' }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!--任务名称-->
+            <div class="ant-col ant-col-24">
+                <div class="ant-row ant-form-item" style="row-gap: 0px;">
+                    <div class="ant-col ant-form-item-label" style="width: 120px;">
+                        <label>节点key</label>
+                    </div>
+                    <div class="ant-col ant-form-item-control">
+                        <div class="ant-form-item-control-input">
+                            <div class="ant-form-item-control-input-content">
+                                <div class="field-readonly">
+                                    {{ assignee.value.taskDefKey }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!--任务id-->
+            <div class="ant-col ant-col-24">
+                <div class="ant-row ant-form-item" style="row-gap: 0px;">
+                    <div class="ant-col ant-form-item-label" style="width: 120px;">
+                        <label>节点id</label>
+                    </div>
+                    <div class="ant-col ant-form-item-control">
+                        <div class="ant-form-item-control-input">
+                            <div class="ant-form-item-control-input-content">
+                                <div class="field-readonly">
+                                    {{ assignee.value.taskId }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="ant-col ant-col-24">
+                <div class="ant-row ant-form-item" style="row-gap: 0px;">
+                    <div class="ant-col ant-form-item-label" style="width: 120px;">
+                        <label>节点名称</label>
+                    </div>
+                    <div class="ant-col ant-form-item-control">
+                        <div class="ant-form-item-control-input">
+                            <div class="ant-form-item-control-input-content">
+                                <div class="field-readonly">
+                                    {{ assignee.value.taskName }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ant-col ant-form-item-control ant-col-12">
+                        <a-button v-auth="'monitor:appointedAuditor'" @click="flowChange">{{
+                            t('将任务流转到')
+                            }}</a-button>
+                    </div>
+                </div>
+            </div>
+            <!--审批人-->
+            <div class="ant-col ant-col-24">
+                <div class="ant-row ant-form-item" style="row-gap: 0px;">
+                    <div class="ant-col ant-form-item-label" style="width: 120px;">
+                        <label>审批人</label>
+                    </div>
+                    <div class="ant-col ant-form-item-control">
+                        <div class="ant-form-item-control-input">
+                            <div class="ant-form-item-control-input-content">
+                                <div class="field-readonly">
+                                    {{ users }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ant-col ant-form-item-control ant-col-12">
+                        <!-- <a-button style="width: 20%;" v-auth="'monitor:appointedAuditor'" @click="addOrSubtractUser">{{
+                            t('加减签')
+                            }}</a-button> -->
+                        <a-button v-if="!showAdd" v-auth="'monitor:appointedAuditor'" style="margin-right: 10px;"
+                            @click="approveUser">{{
+                                t('修改审批人')
+                            }}</a-button>
+                        <AddOrSubtract v-else :schemaId="schemaId" :taskId="assignee.value.taskId"
+                            :selectedUser="assignee.value.assigneeVoList">
+                        </AddOrSubtract>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 创建时间 -->
+            <div class="ant-col ant-col-24">
+                <div class="ant-row ant-form-item" style="row-gap: 0px;">
+                    <div class="ant-col ant-form-item-label" style="width: 120px;">
+                        <label>创建时间</label>
+                    </div>
+                    <div class="ant-col ant-form-item-control">
+                        <div class="ant-form-item-control-input">
+                            <div class="ant-form-item-control-input-content">
+                                <div class="field-readonly">
+                                    {{ assignee.value.createTime }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div :style="{ textAlign: getProps.buttonLocation }">
+                <slot name="buttonBefore"></slot>
+                <a-button v-if="getProps.showSubmitButton" type="primary" @click="handleSubmit">
+                    {{ t('提交') }}
+                </a-button>
+                <a-button v-if="getProps.showResetButton" style="margin-left: 10px" @click="handleReset">
+                    {{ t('重置') }}
+                </a-button>
+                <slot name="buttonAfter"></slot>
+            </div>
+        </Form>
+    </div>
+    <template>
+        <ApproveProcessMonitor v-if="showApproveUser" :taskId="assignee.value.taskId" :userList="assignee.value"
+            title="修改审批人" @close="
+                (val) => {
+                    showApproveUser = false;
+                    if (val.length > 0) {
+                        assignee.value.assigneeNameStr = val.map((ele) => {
+                            return ele.name;
+                        }).join(',');
+                    }
+                }
+            " />
+    </template>
+    <!-- 指派审核人 -->
+    <!-- 流程流转 -->
+    <opinionDialog ref="opinionDlg" />
+    <!-- <AddOrSubtract v-if="showAdd"></AddOrSubtract> -->
+
+</template>
+
+<script>
+// 注意，这里继承的是SimpleFormSetup，使用script setup写法的组件无法继承，必须使用特别的版本
+import SimpleFormSetup from '/@/components/SimpleForm/src/SimpleFormSetup.vue';
+import { Col, Form, message, Row } from 'ant-design-vue';
+import SimpleFormItem from '/@/components/SimpleForm/src/components/SimpleFormItem.vue';
+import { ref, reactive, inject } from 'vue';
+import { CheckCircleOutlined } from '@ant-design/icons-vue';
+import ApproveProcessMonitor from '../../../views/workflow/task/components/flow/ApproveProcessMonitorUser.vue';
+import { data } from '../../demo/excel/data';
+import opinionDialog from '/@/components/SecondDev/OpinionDialogSelected.vue';
+import { getProcessUserNodes, SetChangeProcessNode } from '/@/api/workflow/adminOperation'
+import AddOrSubtract from '../../workflow/task/components/flow/AddOrSubtractWork.vue';
+
+
+const FormItem = Form.Item;
+
+export default {
+    components: {
+        CheckCircleOutlined,
+        Form,
+        Col,
+        SimpleFormItem,
+        Row,
+        FormItem,
+        ApproveProcessMonitor,
+        opinionDialog,
+        AddOrSubtract,
+    },
+    mixins: [SimpleFormSetup],
+    setup(props, ctx) {
+        const ret = SimpleFormSetup.setup(props, ctx);
+        const expose = ctx.expose;
+        const assignee = ctx.attrs.clickedTaskAssignees
+        const currentTaskAssigneeNames = ctx.attrs.currentTaskAssigneeNames
+        const isCustom = ref(Boolean)
+        const schemaId = ctx.attrs.schemaId;
+        const processId = ctx.attrs.processId;
+        isCustom.value = ctx.attrs.isCustom;
+
+        const showApproveUser = ref(Boolean);
+        showApproveUser.value = false;
+        const showAdd = ref(Boolean);
+        showAdd.value = true;
+
+        const opinionDlg = ref();
+        const selectedInfo = ref();
+        const allTaskNodes = inject('taskNode');;
+
+        const users = ref('');
+        users.value = assignee.value.assigneeVoList.map((ele) => {
+            return ele.name + '(' + ele.code + ')';
+        }).join('，')
+
+        if (assignee.value.assigneeVoList.length > 1) {
+            showAdd.value = false;
+        }
+
+        function approveUser() {
+            showApproveUser.value = true;
+        }
+
+        function flowChange() {
+            opinionDlg.value.toggleDialog({
+                action: 'select',
+                schemaId: schemaId,
+                choseTime: false,
+                title: '流程流转',
+                taskNode: allTaskNodes,
+                callback(args) {
+                    selectedInfo.value = args.info
+                    submit(args.info)
+                }
+            });
+        }
+
+        function submit(info) {
+            const key = info.taskId;
+            const userIds = info.selectedList.map((ele) => {
+                return ele.id
+            }).join(',');
+            SetChangeProcessNode({
+                'processInstanceId': processId,
+                'targetTaskNodeId': info.taskId,
+                'nextTaskUserMap': {
+                    [key]: userIds
+                },
+                "remark": info.opinion
+            }).then((res) => {
+                if (res) {
+                    message.info("流程流转成功！");
+                    flowFail();
+                } else {
+                    message.info("操作失败，请稍后再试！");
+                }
+            })
+        }
+
+        function flowFail() {
+            opinionDlg.value.stopLoading();
+        }
+
+
+
+        return {
+            approveUser,
+            flowChange,
+            showAdd,
+            processId,
+            schemaId,
+            showApproveUser,
+            isCustom,
+            assignee,
+            currentTaskAssigneeNames,
+            opinionDlg,
+            users,
+            ...ret
+        };
+    },
+    computed: {
+        // 这里需要增加一个计算属性 否则流程关联时字段读写状态会失效
+        schemaMap() {
+            const schemaMap = {};
+            this.getSchemas.forEach((schema) => {
+                schemaMap[schema.key] = schema;
+                if (schema.children) {
+                    schema.children.forEach(sChild => {
+                        if (sChild.list) {
+                            sChild.list.forEach(lChild => {
+                                schemaMap[lChild.key] = lChild;
+                            });
+                        }
+                    });
+                }
+            });
+            return schemaMap;
+        }
+    },
+    methods: {
+        getIfShow2: function (key) {
+            return this.getIfShow(this.schemaMap[key], this.formModel[this.schemaMap[key].field]);
+        },
+
+        getIsShow2: function (key) {
+            return this.getIsShow(this.schemaMap[key], this.formModel[this.schemaMap[key].field]);
+        },
+
+        getTabProps(key) {
+            const schema = this.schemaMap[key];
+            return {
+                size: schema.componentProps.tabSize,
+                tabPosition: schema.componentProps.tabPosition,
+                type: schema.componentProps.type
+            }
+        },
+
+        getTdStyle(tdElement) {
+            return {
+                height: tdElement.height ? tdElement.height + 'px' : '',
+                minHeight: (tdElement.height || '42') + 'px',
+                overflow: 'hidden',
+                padding: '10px'
+            }
+        },
+        // approveUser: function () {
+        //     return data.value.approvedUserVisible = true;
+        // }
+    }
+};
+</script>

src/views/actHiTaskinst/components/Form.vue

@@ -0,0 +1,188 @@
+<template>
+  <SimpleForm ref="systemFormRef" :formProps="data.formDataProps" :formModel="{}"
+    :isWorkFlow="props.fromPage != FromPageType.MENU" :clickedTaskAssignees="props.clickedTaskAssignees"
+    :processId="props.processId" :isCustom="props.customFlg" :schemaId="props.schemaId"
+    :currentTaskAssigneeNames="taskAssigneeNames" />
+</template>
+<script lang="ts" setup>
+import { reactive, ref, onMounted, computed } from 'vue';
+import { formProps, formEventConfigs } from './config';
+// import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
+import SimpleForm from './CustomDevForm.vue';
+import { addActHiTaskinst, getActHiTaskinst, updateActHiTaskinst } from '/@/api/actHiTaskinst/index';
+import { cloneDeep } from 'lodash-es';
+import { FormDataProps } from '/@/components/Designer/src/types';
+import { usePermission } from '/@/hooks/web/usePermission';
+import { FromPageType } from '/@/enums/workflowEnum';
+import { createFormEvent, getFormDataEvent, loadFormEvent, submitFormEvent, } from '/@/hooks/web/useFormEvent';
+import { changeWorkFlowForm, changeSchemaDisabled } from '/@/hooks/web/useWorkFlowForm';
+import { WorkFlowFormParams } from '/@/model/workflow/bpmnConfig';
+const { filterFormSchemaAuth } = usePermission();
+
+const RowKey = 'id';
+const emits = defineEmits(['changeUploadComponentIds', 'loadingCompleted', 'form-mounted', 'close']);
+const props = defineProps({
+  processId: "",
+  schemaId: "",
+  customFlg: false,
+  clickedTaskAssignees: {},
+  currentTaskAssigneeNames: {},
+  fromPage: {
+    type: Number,
+    default: FromPageType.MENU,
+  },
+});
+
+const systemFormRef = ref();
+const data: { formDataProps: FormDataProps } = reactive({
+  formDataProps: cloneDeep(formProps),
+});
+const state = reactive({
+  formModel: {},
+});
+
+const taskAssigneeNames = computed(() => {
+  emits('close', props.currentTaskAssigneeNames)
+  return props.currentTaskAssigneeNames;
+});
+
+onMounted(async () => {
+  try {
+    if (props.fromPage == FromPageType.MENU) {
+      setMenuPermission();
+      await createFormEvent(formEventConfigs, state.formModel,
+        systemFormRef.value,
+        formProps.schemas); //表单事件：初始化表单
+      await loadFormEvent(formEventConfigs, state.formModel,
+        systemFormRef.value,
+        formProps.schemas); //表单事件：加载表单
+    } else if (props.fromPage == FromPageType.FLOW) {
+      emits('loadingCompleted'); //告诉系统表单已经加载完毕
+      // loadingCompleted后 工作流页面直接利用Ref调用setWorkFlowForm方法
+    } else if (props.fromPage == FromPageType.PREVIEW) {
+      // 预览 无需权限，表单事件也无需执行
+    } else if (props.fromPage == FromPageType.DESKTOP) {
+      // 桌面设计 表单事件需要执行
+      emits('loadingCompleted'); //告诉系统表单已经加载完毕
+      await createFormEvent(formEventConfigs, state.formModel,
+        systemFormRef.value,
+        formProps.schemas); //表单事件：初始化表单
+      await loadFormEvent(formEventConfigs, state.formModel,
+        systemFormRef.value,
+        formProps.schemas); //表单事件：加载表单
+    }
+    emits('form-mounted', formProps);
+  } catch (error) {
+
+  }
+});
+// 根据菜单页面权限，设置表单属性（必填，禁用，显示）
+function setMenuPermission() {
+  data.formDataProps.schemas = filterFormSchemaAuth(formProps.schemas!);
+}
+
+// 校验form 通过返回表单数据
+async function validate() {
+  let values = [];
+  try {
+    values = await systemFormRef.value?.validate();
+    //添加隐藏组件
+    if (data.formDataProps.hiddenComponent?.length) {
+      data.formDataProps.hiddenComponent.forEach((component) => {
+        values[component.bindField] = component.value;
+      });
+    }
+  } finally {
+  }
+  return values;
+}
+// 根据行唯一ID查询行数据，并设置表单数据   【编辑】
+async function setFormDataFromId(rowId, skipUpdate) {
+  try {
+    const record = await getActHiTaskinst(rowId);
+    if (skipUpdate) {
+      return record;
+    }
+    setFieldsValue(record);
+    state.formModel = record;
+    await getFormDataEvent(formEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：获取表单数据
+    return record;
+  } catch (error) {
+
+  }
+}
+// 辅助设置表单数据
+function setFieldsValue(record) {
+  systemFormRef.value.setFieldsValue(record);
+}
+// 重置表单数据
+async function resetFields() {
+  await systemFormRef.value.resetFields();
+}
+//  设置表单数据全部为Disabled  【查看】
+async function setDisabledForm() {
+  data.formDataProps.schemas = changeSchemaDisabled(cloneDeep(data.formDataProps.schemas));
+}
+// 获取行键值
+function getRowKey() {
+  return RowKey;
+}
+// 更新api表单数据
+async function update({ values, rowId }) {
+  try {
+    values[RowKey] = rowId;
+    state.formModel = values;
+    let saveVal = await updateActHiTaskinst(values);
+    await submitFormEvent(formEventConfigs, state.formModel,
+      systemFormRef.value,
+      formProps.schemas); //表单事件：提交表单
+    return saveVal;
+  } catch (error) { }
+}
+// 新增api表单数据
+async function add(values) {
+  try {
+    state.formModel = values;
+    let saveVal = await addActHiTaskinst(values);
+    await submitFormEvent(formEventConfigs, state.formModel,
+      systemFormRef.value,
+      formProps.schemas); //表单事件：提交表单
+    return saveVal;
+  } catch (error) { }
+}
+// 根据工作流页面权限，设置表单属性（必填，禁用，显示）
+async function setWorkFlowForm(obj: WorkFlowFormParams) {
+  try {
+    let flowData = changeWorkFlowForm(cloneDeep(formProps), obj);
+    let { buildOptionJson, uploadComponentIds, formModels, isViewProcess } = flowData;
+    data.formDataProps = buildOptionJson;
+    emits('changeUploadComponentIds', uploadComponentIds); //工作流中必须保存上传组件id【附件汇总需要】
+    if (isViewProcess) {
+      setDisabledForm(); //查看
+    }
+    state.formModel = formModels;
+    setFieldsValue(formModels);
+  } catch (error) { }
+  await createFormEvent(formEventConfigs, state.formModel,
+    systemFormRef.value,
+    formProps.schemas); //表单事件：初始化表单
+  await loadFormEvent(formEventConfigs, state.formModel,
+    systemFormRef.value,
+    formProps.schemas); //表单事件：加载表单
+}
+
+
+
+defineExpose({
+  setFieldsValue,
+  resetFields,
+  validate,
+  add,
+  update,
+  setFormDataFromId,
+  setDisabledForm,
+  setMenuPermission,
+  setWorkFlowForm,
+  getRowKey,
+});
+</script>

src/views/actHiTaskinst/components/config.ts

@@ -0,0 +1,612 @@
+import { FormProps, FormSchema } from '/@/components/Form';
+import { BasicColumn } from '/@/components/Table';
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: 'id',
+    component: 'Input',
+  },
+  {
+    field: 'taskDefKey',
+    label: '节点名称',
+    component: 'Input',
+  },
+  {
+    field: 'procDefKey',
+    label: '流程名称',
+    component: 'Input',
+  },
+  {
+    field: 'procDefId',
+    label: '流程默认id',
+    component: 'Input',
+  },
+  {
+    field: 'rootProcInstId',
+    label: '根节点实例id',
+    component: 'Input',
+  },
+  {
+    field: 'procInstId',
+    label: '流程实例id',
+    component: 'Input',
+  },
+  {
+    field: 'executionId',
+    label: '执行节点id',
+    component: 'Input',
+  },
+  {
+    field: 'actInstId',
+    label: '节点实例id',
+    component: 'Input',
+  },
+  {
+    field: 'name',
+    label: '节点名称',
+    component: 'Input',
+  },
+];
+
+export const columns: BasicColumn[] = [
+  {
+    dataIndex: 'id',
+    title: 'id',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  {
+    dataIndex: 'taskDefKey',
+    title: '节点名称',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  {
+    dataIndex: 'procDefKey',
+    title: '流程名称',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  {
+    dataIndex: 'procDefId',
+    title: '流程默认id',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  {
+    dataIndex: 'rootProcInstId',
+    title: '根节点实例id',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  {
+    dataIndex: 'procInstId',
+    title: '流程实例id',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  {
+    dataIndex: 'executionId',
+    title: '执行节点id',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  {
+    dataIndex: 'actInstId',
+    title: '节点实例id',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  {
+    dataIndex: 'name',
+    title: '节点名称',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+];
+//表单事件
+export const formEventConfigs = {
+  0: [
+    {
+      type: 'circle',
+      color: '#2774ff',
+      text: '开始节点',
+      icon: '#icon-kaishi',
+      bgcColor: '#D8E5FF',
+      isUserDefined: false,
+      isClick: true,
+    },
+    {
+      color: '#F6AB01',
+      icon: '#icon-chushihua',
+      text: '初始化表单',
+      bgcColor: '#f9f5ea',
+      isUserDefined: false,
+      nodeInfo: { processEvent: [] },
+      isClick: false,
+    },
+  ],
+  1: [
+    {
+      color: '#B36EDB',
+      icon: '#icon-shujufenxi',
+      text: '获取表单数据',
+      detail: '(新增无此操作)',
+      bgcColor: '#F8F2FC',
+      isUserDefined: false,
+      nodeInfo: { processEvent: [] },
+      isClick: false,
+    },
+  ],
+  2: [
+    {
+      color: '#F8625C',
+      icon: '#icon-jiazai',
+      text: '加载表单',
+      bgcColor: '#FFF1F1',
+      isUserDefined: false,
+      nodeInfo: { processEvent: [] },
+      isClick: false,
+    },
+  ],
+  3: [
+    {
+      color: '#6C6AE0',
+      icon: '#icon-jsontijiao',
+      text: '提交表单',
+      bgcColor: '#F5F4FF',
+      isUserDefined: false,
+      nodeInfo: { processEvent: [] },
+      isClick: false,
+    },
+  ],
+  4: [
+    {
+      type: 'circle',
+      color: '#F8625C',
+      text: '结束节点',
+      icon: '#icon-jieshuzhiliao',
+      bgcColor: '#FFD6D6',
+      isLast: true,
+      isUserDefined: false,
+      isClick: false,
+    },
+  ],
+};
+export const formProps: FormProps = {
+  labelCol: { span: 3, offset: 0 },
+  labelAlign: 'right',
+  layout: 'horizontal',
+  size: 'default',
+  schemas: [
+    {
+      key: 'e21c39e056964ba1af0207c8dfa7b54b',
+      field: 'id',
+      label: 'id',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入id',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: 'a7f8acb0021c4df09452039b01ec313d',
+      field: 'taskDefKey',
+      label: '节点名称',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入节点名称',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: '7107f6f6ef594c6687b9087e7f823c4d',
+      field: 'procDefKey',
+      label: '流程名称',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入流程名称',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: '76db839377a7417f87d9d7540dd1f5f4',
+      field: 'procDefId',
+      label: '流程默认id',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入流程默认id',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: '11acfec9f51b4a45a390840acd00b077',
+      field: 'rootProcInstId',
+      label: '根节点实例id',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入根节点实例id',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: '31d294d5c7c845f88d1176ab5a4913e0',
+      field: 'procInstId',
+      label: '流程实例id',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入流程实例id',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: 'f58327d6d3b04aad93eb415b3b8bfc60',
+      field: 'executionId',
+      label: '执行节点id',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入执行节点id',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: 'c88aeae388c4488aa459e023cd1a35e8',
+      field: 'actInstId',
+      label: '节点实例id',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入节点实例id',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: 'e444605174364af2b10897b2987d2dec',
+      field: 'name',
+      label: '节点名称',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入节点名称',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: 'e111605174364af2b10897b2987d2dec',
+      field: 'taskId',
+      label: '任务id',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入节点名称',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: 'e444555174364af2b10897b2987d2dec',
+      field: 'taskName',
+      label: '任务名称',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入节点名称',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: 'c33aeae997a4488aa459e023ae1a21e8',
+      field: 'assigneeName',
+      label: '审核人',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入节点名称',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+  ],
+  showActionButtonGroup: false,
+  buttonLocation: 'center',
+  actionColOptions: { span: 24 },
+  showResetButton: false,
+  showSubmitButton: false,
+  hiddenComponent: [],
+};

src/views/actHiTaskinst/components/workflowPermission.ts

@@ -0,0 +1,137 @@
+export const permissionList = [
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: 'id',
+    fieldId: 'id',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: 'e21c39e056964ba1af0207c8dfa7b54b',
+    children: [],
+  },
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '节点名称',
+    fieldId: 'taskDefKey',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: 'a7f8acb0021c4df09452039b01ec313d',
+    children: [],
+  },
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '流程名称',
+    fieldId: 'procDefKey',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: '7107f6f6ef594c6687b9087e7f823c4d',
+    children: [],
+  },
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '流程默认id',
+    fieldId: 'procDefId',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: '76db839377a7417f87d9d7540dd1f5f4',
+    children: [],
+  },
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '根节点实例id',
+    fieldId: 'rootProcInstId',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: '11acfec9f51b4a45a390840acd00b077',
+    children: [],
+  },
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '流程实例id',
+    fieldId: 'procInstId',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: '31d294d5c7c845f88d1176ab5a4913e0',
+    children: [],
+  },
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '执行节点id',
+    fieldId: 'executionId',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: 'f58327d6d3b04aad93eb415b3b8bfc60',
+    children: [],
+  },
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '节点实例id',
+    fieldId: 'actInstId',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: 'c88aeae388c4488aa459e023cd1a35e8',
+    children: [],
+  },
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '节点名称',
+    fieldId: 'name',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: 'e444605174364af2b10897b2987d2dec',
+    children: [],
+  },
+];

src/views/actHiTaskinst/index.vue

@@ -0,0 +1,328 @@
+<template>
+  <PageWrapper dense fixedHeight contentFullHeight contentClass="flex">
+
+
+    <BasicTable @register="registerTable" ref="tableRef" @row-dbClick="dbClickRow">
+
+      <template #toolbar>
+        <template v-for="button in tableButtonConfig" :key="button.code">
+          <a-button v-if="button.isDefault" :type="button.type" @click="buttonClick(button.code)">
+            <template #icon>
+              <Icon :icon="button.icon" />
+            </template>
+            {{ button.name }}
+          </a-button>
+          <a-button v-else :type="button.type">
+            <template #icon>
+              <Icon :icon="button.icon" />
+            </template>
+            {{ button.name }}
+          </a-button>
+        </template>
+      </template>
+      <template #bodyCell="{ column, record }">
+
+
+
+        <template v-if="column.dataIndex === 'action'">
+          <TableAction :actions="getActions(record)" />
+        </template>
+      </template>
+    </BasicTable>
+
+
+
+    <ActHiTaskinstModal @register="registerModal" @success="handleSuccess" />
+
+
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+import {
+  ref, computed, onMounted, onUnmounted, createVNode,
+
+} from 'vue';
+
+import { Modal } from 'ant-design-vue';
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { BasicTable, useTable, TableAction, ActionItem } from '/@/components/Table';
+import { getActHiTaskinstPage, deleteActHiTaskinst } from '/@/api/actHiTaskinst/index';
+import { PageWrapper } from '/@/components/Page';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { usePermission } from '/@/hooks/web/usePermission';
+import { useRouter } from 'vue-router';
+
+
+
+
+import { useModal } from '/@/components/Modal';
+
+
+
+import ActHiTaskinstModal from './components/ActHiTaskinstModal.vue';
+
+
+
+
+
+
+import { searchFormSchema, columns } from './components/config';
+import Icon from '/@/components/Icon/index';
+
+
+
+
+
+
+
+import useEventBus from '/@/hooks/event/useEventBus';
+
+const { bus, CREATE_FLOW, FLOW_PROCESSED, FORM_LIST_MODIFIED } = useEventBus();
+
+const { notification } = useMessage();
+const { t } = useI18n();
+defineEmits(['register']);
+const { filterColumnAuth, filterButtonAuth } = usePermission();
+
+const filterColumns = filterColumnAuth(columns);
+const tableRef = ref();
+
+//展示在列表内的按钮
+const actionButtons = ref<string[]>(['view', 'edit', 'copyData', 'delete', 'startwork', 'flowRecord']);
+const buttonConfigs = computed(() => {
+  const list = [{ "name": "新增", "code": "add", "icon": "ant-design:plus-outlined", "isDefault": true, "isUse": true }, { "name": "编辑", "code": "edit", "icon": "ant-design:form-outlined", "isDefault": true, "isUse": true }, { "name": "刷新", "code": "refresh", "icon": "ant-design:reload-outlined", "isDefault": true, "isUse": true }, { "name": "查看", "code": "view", "icon": "ant-design:eye-outlined", "isDefault": true, "isUse": true }, { "name": "删除", "code": "delete", "icon": "ant-design:delete-outlined", "isDefault": true, "isUse": true }]
+  return filterButtonAuth(list);
+})
+
+const tableButtonConfig = computed(() => {
+  return buttonConfigs.value?.filter((x) => !actionButtons.value.includes(x.code));
+});
+
+const actionButtonConfig = computed(() => {
+  return buttonConfigs.value?.filter((x) => actionButtons.value.includes(x.code));
+});
+
+const btnEvent = { add: handleAdd, edit: handleEdit, refresh: handleRefresh, view: handleView, delete: handleDelete, }
+
+const { currentRoute } = useRouter();
+const router = useRouter();
+
+
+const formIdComputedRef = ref();
+formIdComputedRef.value = currentRoute.value.meta.formId
+const schemaIdComputedRef = ref();
+schemaIdComputedRef.value = currentRoute.value.meta.schemaId
+
+
+
+
+
+
+const [registerModal, { openModal }] = useModal();
+
+
+const formName = '监控流程任务管理';
+const [registerTable, { reload, }] = useTable({
+  title: '' || (formName + '列表'),
+  api: getActHiTaskinstPage,
+  rowKey: 'id',
+  columns: filterColumns,
+  formConfig: {
+    rowProps: {
+      gutter: 16,
+    },
+    schemas: searchFormSchema,
+    fieldMapToTime: [],
+    showResetButton: false,
+  },
+  beforeFetch: (params) => {
+    return { ...params, FormId: formIdComputedRef.value, PK: 'id' };
+  },
+  afterFetch: (res) => {
+    tableRef.value.setToolBarWidth();
+
+  },
+  useSearchForm: true,
+  showTableSetting: true,
+
+  striped: false,
+  actionColumn: {
+    width: 160,
+    title: '操作',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+  },
+  tableSetting: {
+    size: false,
+    setting: false,
+  },
+
+});
+
+function dbClickRow(record) {
+  const { processId, taskIds, schemaId } = record.workflowData || {};
+  if (taskIds && taskIds.length) {
+    router.push({
+      path: '/flow/' + schemaId + '/' + (processId || '') + '/approveFlow',
+      query: {
+        taskId: taskIds[0],
+        formName: formName
+      }
+    });
+  } else if (schemaId && !taskIds && processId) {
+    router.push({
+      path: '/flow/' + schemaId + '/' + processId + '/approveFlow',
+      query: {
+        readonly: 1,
+        taskId: '',
+        formName: formName
+      }
+    });
+  } else {
+    router.push({
+      path: '/form/actHiTaskinst/' + record.id + '/viewForm',
+      query: {
+        formPath: 'dev/actHiTaskinst',
+        formName: formName
+      }
+    });
+  }
+}
+
+function buttonClick(code) {
+
+  btnEvent[code]();
+}
+
+function handleAdd() {
+  if (schemaIdComputedRef.value) {
+    router.push({
+      path: '/flow/' + schemaIdComputedRef.value + '/0/createFlow'
+    });
+  } else {
+    router.push({
+      path: '/form/actHiTaskinst/0/createForm',
+      query: {
+        formPath: 'dev/actHiTaskinst',
+        formName: formName
+      }
+    });
+  }
+}
+
+function handleEdit(record: Recordable) {
+
+  router.push({
+    path: '/form/actHiTaskinst/' + record.id + '/updateForm',
+    query: {
+      formPath: 'dev/actHiTaskinst',
+      formName: formName
+    }
+  });
+}
+
+
+
+function handleDelete(record: Recordable) {
+  deleteList([record.id]);
+}
+
+function deleteList(ids) {
+  Modal.confirm({
+    title: '提示信息',
+    icon: createVNode(ExclamationCircleOutlined),
+    content: '是否确认删除？',
+    okText: '确认',
+    cancelText: '取消',
+    onOk() {
+      deleteActHiTaskinst(ids).then((_) => {
+        handleSuccess();
+        notification.success({
+          message: 'Tip',
+          description: t('删除成功！'),
+        });
+      });
+    },
+    onCancel() { },
+  });
+}
+
+
+
+
+
+
+function handleRefresh() {
+  reload();
+}
+function handleSuccess() {
+
+  reload();
+}
+
+function handleView(record: Recordable) {
+
+  dbClickRow(record);
+
+}
+
+
+
+
+onMounted(() => {
+
+  if (schemaIdComputedRef.value) {
+    bus.on(FLOW_PROCESSED, handleRefresh);
+    bus.on(CREATE_FLOW, handleRefresh);
+  } else {
+    bus.on(FORM_LIST_MODIFIED, handleRefresh);
+  }
+});
+onUnmounted(() => {
+  if (schemaIdComputedRef.value) {
+    bus.off(FLOW_PROCESSED, handleRefresh);
+    bus.off(CREATE_FLOW, handleRefresh);
+  } else {
+    bus.off(FORM_LIST_MODIFIED, handleRefresh);
+  }
+});
+function getActions(record: Recordable): ActionItem[] {
+
+  const actionsList: ActionItem[] = actionButtonConfig.value?.map((button) => {
+    if (!record.workflowData?.processId) {
+      return {
+        icon: button?.icon,
+        tooltip: button?.name,
+        color: button.code === 'delete' ? 'error' : undefined,
+        onClick: btnEvent[button.code].bind(null, record),
+      };
+    } else {
+      if (button.code === 'view') {
+        return {
+          icon: button?.icon,
+          tooltip: button?.name,
+          onClick: btnEvent[button.code].bind(null, record),
+        };
+      } else {
+        return {};
+      }
+    }
+  });
+  return actionsList;
+}
+
+</script>
+<style lang="less" scoped>
+:deep(.ant-table-selection-col) {
+  width: 50px;
+}
+
+.show {
+  display: flex;
+}
+
+.hide {
+  display: none !important;
+}
+</style>