在线表单流程用户任务支持组件显隐设置

2026-01-17 18:46:36 +08:00 · 2024-08-12 21:26:51 +08:00
parent 8a4c9a0174
commit 3e39ccba49
11 changed files with 295 additions and 86 deletions
--- a/OrangeFormsOpen-VUE3/src/pages/online/OnlinePageRender/OnlineEditForm/index.vue
+++ b/OrangeFormsOpen-VUE3/src/pages/online/OnlinePageRender/OnlineEditForm/index.vue
@@ -259,7 +259,6 @@ const {
 } = useForm(props);

 provide('form', () => {
-  console.log('provide form1', props, form);
  return {
    ...form.value,
    mode: props.mode || 'pc',
--- a/OrangeFormsOpen-VUE3/src/pages/online/OnlinePageRender/OnlineWorkFlowForm/index.vue
+++ b/OrangeFormsOpen-VUE3/src/pages/online/OnlinePageRender/OnlineWorkFlowForm/index.vue
@@ -68,6 +68,7 @@ const props = withDefaults(
    isEdit: false,
    readOnly: false,
    fullscreen: false,
+    flowInfo: undefined,
    mode: 'pc',
  },
 );
@@ -82,6 +83,7 @@ const {
  rules,
  masterTable,
  formData,
+  formAuth,
  richEditWidgetList,
  tableWidgetList,
  getWidgetValue,
@@ -132,6 +134,9 @@ provide('form', () => {
      return props.currentWidget === widget;
    },
    getWidgetObject: widgetData.getWidgetObject,
+    formAuth: () => {
+      return formAuth.value;
+    },
  };
 });

@@ -228,23 +233,73 @@ const initFormData = () => {
  });
 };

+const viewTaskFormKey = () => {
+  if (
+    props.flowInfo == null ||
+    props.flowInfo.taskId == null ||
+    props.flowInfo.taskId === '' ||
+    props.flowInfo.processInstanceId == null ||
+    props.flowInfo.processInstanceId === ''
+  ) {
+    return Promise.resolve();
+  }
+  let paraams = {
+    processInstanceId: props.flowInfo.processInstanceId,
+    taskId: props.flowInfo.taskId,
+  };
+  return new Promise<void>((resolve, reject) => {
+    FlowOperationController.viewTaskFormKey(paraams)
+      .then(res => {
+        try {
+          let temp = JSON.parse(res.data);
+          formAuth.value = temp.formAuth;
+          Object.keys(formAuth.value || {}).forEach(key => {
+            let formAuthItem = formAuth.value[key];
+            Object.keys(formAuthItem).forEach(subKey => {
+              let authItem = formAuthItem[subKey];
+              if (authItem && authItem != null && authItem !== '') {
+                formAuthItem[subKey] = authItem.split(',').map(item => parseInt(item));
+              } else {
+                formAuthItem[subKey] = [0, 0];
+              }
+              let disabled = formAuthItem[subKey][0] === 1;
+              let hide = formAuthItem[subKey][1] === 1;
+              formAuthItem[subKey].disabled = disabled;
+              formAuthItem[subKey].hide = hide;
+            });
+          });
+          console.log(formAuth.value);
+        } catch (e) {
+          formAuth.value = null;
+        }
+        resolve();
+      })
+      .catch(e => {
+        reject(e);
+      });
+  });
+};
+
 onMounted(() => {
  isReady.value = false;
  if (!props.isEdit) {
-    initWidgetRule();
-
-    initFormData()
-      .then(() => {
-        initWidgetLinkage();
-        setTimeout(() => {
-          componentRef.value.clearValidate();
+    viewTaskFormKey().then(() => {
+      initWidgetRule();
+      initFormData()
+        .then(() => {
+          initWidgetLinkage();
+          setTimeout(() => {
+            componentRef.value.clearValidate();
+          });
+        })
+        .catch((e: Error) => {
+          console.warn(e);
        });
-      })
-      .catch((e: Error) => {
-        console.warn(e);
-      });
+      isReady.value = true;
+    });
+  } else {
+    isReady.value = true;
  }
-  isReady.value = true;
 });

 const getFormDataImpl = (variableList: ANY_OBJECT[] | null = null) => {
--- a/OrangeFormsOpen-VUE3/src/pages/online/OnlinePageRender/hooks/useForm.ts
+++ b/OrangeFormsOpen-VUE3/src/pages/online/OnlinePageRender/hooks/useForm.ts
@@ -142,7 +142,11 @@ export const useForm = (props: ANY_OBJECT, formRef: Ref<FormInstance> | null = n
      return getSystemVariableValue(widget.bindData.systemVariableType);
    }
  };
-  const getWidgetVisible = () => {
+  const getWidgetVisible = widget => {
+    const formWidgetAuth: ANY_OBJECT | null = formAuth.value
+      ? formAuth.value.pc[widget.variableName]
+      : null;
+    if (formWidgetAuth && formWidgetAuth.hide) return false;
    return true;
  };
  const onValueChange = (widget: ANY_OBJECT, value: ANY_OBJECT) => {
@@ -295,7 +299,8 @@ export const useForm = (props: ANY_OBJECT, formRef: Ref<FormInstance> | null = n
    }
  };
  const checkOperationPermCode = (operation: ANY_OBJECT | null) => {
-    if (dialogParams.value.formConfig.formType !== SysOnlineFormType.QUERY || props.isEdit) return true;
+    if (dialogParams.value.formConfig.formType !== SysOnlineFormType.QUERY || props.isEdit)
+      return true;
    return checkPermCodeExist(getOperationPermCode(operation));
  };
  const checkOperationDisabled = (
@@ -592,7 +597,9 @@ export const useForm = (props: ANY_OBJECT, formRef: Ref<FormInstance> | null = n
        });
      }
      if (widget.props.dictInfo && widget.props.dictInfo.dictId) {
-        widget.props.dictInfo.dict = dialogParams.value.formConfig.dictMap.get(widget.props.dictInfo.dictId);
+        widget.props.dictInfo.dict = dialogParams.value.formConfig.dictMap.get(
+          widget.props.dictInfo.dictId,
+        );
      }
      if (widget.column && widget.column.dictInfo != null) {
        dropdownWidgetList.push(widget);
@@ -663,8 +670,10 @@ export const useForm = (props: ANY_OBJECT, formRef: Ref<FormInstance> | null = n
      });
    }
    errorMessage.value = [];
-    if (dialogParams.value.formConfig.tableWidget) initWidget(dialogParams.value.formConfig.tableWidget);
-    if (dialogParams.value.formConfig.leftWidget) initWidget(dialogParams.value.formConfig.leftWidget);
+    if (dialogParams.value.formConfig.tableWidget)
+      initWidget(dialogParams.value.formConfig.tableWidget);
+    if (dialogParams.value.formConfig.leftWidget)
+      initWidget(dialogParams.value.formConfig.leftWidget);
    if (errorMessage.value.length > 0) {
      console.error(errorMessage);
    }
@@ -899,12 +908,15 @@ export const useForm = (props: ANY_OBJECT, formRef: Ref<FormInstance> | null = n
      });
  };

+  const formAuth = ref();
+
  return {
    rules,
    isReady,
    dialogParams,
    form,
    formData,
+    formAuth,
    masterTable,
    isRelation,
    tableWidgetList,
--- a/OrangeFormsOpen-VUE3/src/pages/workflow/handlerFlowTask/index.vue
+++ b/OrangeFormsOpen-VUE3/src/pages/workflow/handlerFlowTask/index.vue
@@ -352,42 +352,43 @@ const handlerStart = (
  } else {
    preHandlerOperation(operation, true, xml)
      .then(res => {
-        getMasterData(operation.type, (res || {}).assignee).then(formData => {
-          FlowOperationController.startAndTakeUserTask(
-            {
-              processDefinitionKey: dialogParams.value.processDefinitionKey,
-              masterData: formData.masterData || {},
-              slaveData: formData.slaveData,
-              taskVariableData: {
-                ...formData.taskVariableData,
-                latestApprovalStatus: operation.latestApprovalStatus,
+        getMasterData(operation.type, (res || {}).assignee)
+          .then(formData => {
+            FlowOperationController.startAndTakeUserTask(
+              {
+                processDefinitionKey: dialogParams.value.processDefinitionKey,
+                masterData: formData.masterData || {},
+                slaveData: formData.slaveData,
+                taskVariableData: {
+                  ...formData.taskVariableData,
+                  latestApprovalStatus: operation.latestApprovalStatus,
+                },
+                flowTaskCommentDto: {
+                  approvalType: operation.type,
+                },
+                copyData: (copyItemList || []).reduce((retObj, item) => {
+                  retObj[item.type] = item.id;
+                  return retObj;
+                }, {}),
              },
-              flowTaskCommentDto: {
-                approvalType: operation.type,
+              {
+                // 判断是否是从流程设计里启动
+                processDefinitionKey: isPreview.value
+                  ? undefined
+                  : dialogParams.value.processDefinitionKey,
              },
-              copyData: (copyItemList || []).reduce((retObj, item) => {
-                retObj[item.type] = item.id;
-                return retObj;
-              }, {}),
-            },
-            {
-              // 判断是否是从流程设计里启动
-              processDefinitionKey: isPreview.value
-                ? undefined
-                : dialogParams.value.processDefinitionKey,
-            },
-          )
-            .then(() => {
-              handlerClose();
-              ElMessage.success('启动成功！');
-            })
-            .catch(e => {
-              console.warn(e);
-            });
-        })
-        .catch(e => {
-          console.warn(e);
-        });
+            )
+              .then(() => {
+                handlerClose();
+                ElMessage.success('启动成功！');
+              })
+              .catch(e => {
+                console.warn(e);
+              });
+          })
+          .catch(e => {
+            console.warn(e);
+          });
      })
      .catch(e => {
        console.warn(e);
--- a/OrangeFormsOpen-VUE3/src/pages/workflow/package/refactor/form/flowFormConfig.vue
+++ b/OrangeFormsOpen-VUE3/src/pages/workflow/package/refactor/form/flowFormConfig.vue
@@ -35,16 +35,36 @@
          />
        </el-select>
      </el-form-item>
-      <el-form-item label="允许编辑" style="margin-bottom: 4px">
-        <template #label>
-          <span>允许编辑</span>
-          <el-switch
-            v-model="formData.editable"
-            @change="updateElementFormKey"
-            style="margin-left: 18px"
-          />
-        </template>
-      </el-form-item>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="允许编辑" style="margin-bottom: 4px">
+            <template #label>
+              <span>允许编辑</span>
+              <el-switch
+                v-model="formData.editable"
+                @change="updateElementFormKey"
+                style="margin-left: 18px"
+              />
+            </template>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            v-if="flowEntryComputed.bindFormType === SysFlowEntryBindFormType.ONLINE_FORM"
+          >
+            <template #label>
+              <span>表单权限设置</span>
+              <el-button
+                type="primary"
+                size="mini"
+                style="margin-left: 18px"
+                @click="onSetOnlineFormAuth"
+                >设置</el-button
+              >
+            </template>
+          </el-form-item>
+        </el-col>
+      </el-row>
    </el-form>
    <el-row v-else-if="tabType === 'button'" style="padding-top: 3px">
      <!-- <el-col :span="24">
@@ -107,15 +127,17 @@
 </template>

 <script setup lang="ts">
-import { ElMessageBox } from 'element-plus';
+import { getUUID } from '@/common/utils/index';
+import { ElMessageBox, ElMessage } from 'element-plus';
 import { VxeTable, VxeColumn } from 'vxe-table';
 import { ANY_OBJECT } from '@/types/generic';
 import { Dialog } from '@/components/Dialog';
 import { SysOnlineFormType } from '@/common/staticDict/index';
 import { SysFlowEntryBindFormType, SysFlowTaskOperationType } from '@/common/staticDict/flow';
 import EditOperation from './formEditOperation.vue';
-
+import FormSetOnlineFormAuth from './formSetOnlineFormAuth.vue';
 import { useLayoutStore } from '@/store';
+
 const layoutStore = useLayoutStore();

 const props = defineProps<{ id: string; type: string; tabType: string }>();
@@ -137,6 +159,7 @@ const form = ref();
 const formData = ref<ANY_OBJECT>({
  formId: flowEntry().value.defaultFormId,
  routerName: flowEntry().value.defaultRouterName,
+  formAuth: {},
  editable: false,
 });
 const operationList = ref<ANY_OBJECT>({});
@@ -163,9 +186,94 @@ const getFlowEntryValidStatus = computed(() => {
  }
 });

+const currentForm = computed(() => {
+  return formList().find((item: ANY_OBJECT) => item.formId === formData.value.formId);
+});
+
+const formatOnlineFormInfo = formInfo => {
+  if (formInfo == null) return null;
+  let children;
+  if (Array.isArray(formInfo.childWidgetList) && formInfo.childWidgetList.length > 0) {
+    children = formInfo.childWidgetList.map(subWidget => formatOnlineFormInfo(subWidget));
+  }
+  return {
+    formId: getUUID(),
+    showName: formInfo.showName,
+    variableName: formInfo.variableName,
+    widgetType: formInfo.widgetType,
+    children: children,
+  };
+};
+
+const onSetOnlineFormAuth = () => {
+  if (currentForm.value == null) {
+    ElMessage.error('请先选择表单！');
+    return;
+  }
+  let formWidgetConfig = JSON.parse(currentForm.value.widgetJson);
+  let tempConfig = {
+    pc: {
+      widgetList: [],
+    },
+    mobile: {
+      widgetList: [],
+    },
+  };
+  if (formWidgetConfig != null) {
+    if (
+      formWidgetConfig.pc &&
+      Array.isArray(formWidgetConfig.pc.widgetList) &&
+      formWidgetConfig.pc.widgetList.length > 0
+    ) {
+      tempConfig.pc = {
+        widgetList: formWidgetConfig.pc.widgetList.map(subWidget =>
+          formatOnlineFormInfo(subWidget),
+        ),
+      };
+    }
+    if (
+      formWidgetConfig.mobile &&
+      Array.isArray(formWidgetConfig.mobile.widgetList) &&
+      formWidgetConfig.mobile.widgetList.length > 0
+    ) {
+      tempConfig.mobile = {
+        widgetList: formWidgetConfig.mobile.widgetList.map(subWidget => formatOnlineFormInfo(subWidget))
+      };
+    }
+  }
+  console.log(tempConfig);
+  Dialog.show<ANY_OBJECT>(
+    '设置表单权限',
+    FormSetOnlineFormAuth,
+    {
+      area: ['1000px', '700px']
+    },
+    {
+      formAuth: formData.value.formAuth || {},
+      formWidgetConfig: tempConfig,
+      path: 'thirdSetOnlineFormAuth'
+    },
+    {
+      width: '1000px',
+      height: '700px',
+      pathName: '/thirdParty/formSetOnlineFormAuth',
+    },
+  )
+    .then(res => {
+      formData.value.formAuth = res;
+      updateElementFormKey();
+    })
+    .catch(e => {
+      console.warn(e);
+    });
+};
+
 const refreshData = (data: ANY_OBJECT) => {
  if (data.path === 'thirdEditOperation' && data.isSuccess) {
    updateEditOperation(data.data);
+  } else if (data.path === 'thirdSetOnlineFormAuth' && data.isSuccess) {
+    formData.value.formAuth = data.data;
+    updateElementFormKey();
  }
 };
 const resetFormList = () => {
@@ -176,6 +284,7 @@ const resetFormList = () => {
    formData.value = {
      formId: formObj.formId,
      routerName: formObj.routerName,
+      formAuth: formObj.formAuth || {},
      editable: !formObj.readOnly,
      groupType: formObj.groupType || 'ASSIGNEE',
    };
@@ -208,6 +317,7 @@ const updateElementFormKey = () => {
        flowEntry().value.bindFormType === SysFlowEntryBindFormType.ONLINE_FORM
          ? undefined
          : formData.value.routerName,
+      formAuth: formData.value.formAuth,
      readOnly: !formData.value.editable,
      groupType: formData.value.groupType || 'ASSIGNEE',
    });