Merge branch 'ly' into dev

src/components/FormViewer/index.ts

@@ -0,0 +1,2 @@
+export { default as FormViewer } from './index.vue';
+

src/components/FormViewer/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="my-form-viewer">
+    <BasicForm ref="myDataBaseFormRef" @register="registerForm" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref, defineProps } from 'vue';
+  import { BasicForm, useForm } from '@/components/Form';
+  const formColumns: FormSchema[] = [];
+  const props = defineProps({
+    formConfig: Object,
+  });
+  console.log(props.formConfig);
+  props.formConfig.forEach((element) => {
+    element.componentProps.disabled = !element.disabled;
+  });
+  formColumns.value = props.formConfig;
+  const [registerForm, { getFieldsValue, setFieldsValue, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    schemas: props.formConfig,
+    showActionButtonGroup: false,
+    baseColProps: { lg: 24, md: 24 },
+  });
+  async function getForm() {
+    try {
+      const values = await validate();
+      let query = values;
+      return query;
+    } catch(error) {
+      console.log(error)
+      return false;
+    }
+  }
+  defineExpose({
+    getForm,
+  });
+  // async function handleSubmit() {
+  //   try {
+  //     const values = await validate();
+  //     let query = values;
+  //     // 调用接口
+  //     if (!unref(isUpdate)) {
+  //       const data = await addDataBaseInfo(query);
+  //       if (data) {
+  //         setModalProps({ confirmLoading: true });
+  //         closeModal();
+  //         emit('success');
+  //         return createMessage.success('新增成功');
+  //       } else {
+  //         return createMessage.error('新增失败');
+  //       }
+  //     } else {
+  //       query.databaseLinkId = detailValue.value.databaseLinkId
+  //       const data = await editDataBaseInfo(query);
+  //       if (data) {
+  //         setModalProps({ confirmLoading: true });
+  //         closeModal();
+  //         emit('success');
+  //         return createMessage.success('编辑成功');
+  //       } else {
+  //         return createMessage.error('编辑失败');
+  //       }
+  //     }
+  //   } finally {
+  //     setModalProps({ confirmLoading: false });
+  //   }
+  // }
+</script>
+
+<style lang="less" scoped>
+  .my-process-designer {
+    width: 100%;
+  }
+</style>

src/components/ProcessDesigner/package/penal/startEvent/index.vue

@@ -100,7 +100,7 @@
               {{ text }}
             </div>
           </template>
-          <template v-else-if="['required', 'isEdit', 'isLook'].includes(column.dataIndex)">
+          <template v-else-if="['required', 'disabled', 'ifShow'].includes(column.dataIndex)">
             <div>
               <a-switch v-model:checked="record[column.dataIndex]" size="small" />
             </div>
@@ -117,15 +117,12 @@
         <template #bodyCell="{ column, record }">
           <template v-if="['label', 'field'].includes(column.dataIndex)">
             <div>
-              <a-input
-                v-model:value="record[column.dataIndex]"
-                placeholder="请输入"
-              />
+              <a-input v-model:value="record[column.dataIndex]" placeholder="请输入" />
             </div>
           </template>
-          <template v-else-if="['required', 'isEdit', 'isLook'].includes(column.dataIndex)">
+          <template v-else-if="['required', 'disabled', 'ifShow'].includes(column.dataIndex)">
             <div>
-              <a-switch v-model:checked="record[column.dataIndex]" size="small"/>
+              <a-switch v-model:checked="record[column.dataIndex]" size="small" />
             </div>
           </template>
           <template v-else-if="column.dataIndex === 'operation'">
@@ -153,7 +150,7 @@
       width="60%"
       wrap-class-name="full-modal"
       v-model:open="data.formOpen"
-      title="添加岗位"
+      title="选择表单"
       @ok="formHandleOk"
     >
       <SelectForm ref="formRef"></SelectForm>
@@ -168,6 +165,7 @@
   import { SelectForm } from '@/components/SelectForm/index';
   import { functionGetSchemePageList } from '@/api/demo/formScheme';
   import { functionLoadFormPage } from '@/api/demo/formScheme';
+  import { func } from 'vue-types';
 
   const flowWfDataStore = flowStore();
   const labelCol = { span: 7 };
@@ -183,7 +181,7 @@
     pageType: String,
     pageView: String,
   });
-  console.log(props)
+  console.log(props);
   interface dataType {
     columns: any;
     formRelations: any;
@@ -209,11 +207,11 @@
       },
       {
         title: '编辑',
-        dataIndex: 'isEdit',
+        dataIndex: 'disabled',
       },
       {
         title: '查看',
-        dataIndex: 'isLook',
+        dataIndex: 'ifShow',
       },
     ],
     formRelations: [],
@@ -227,10 +225,10 @@
   watch(
     () => node.value.formCode,
     (newVal, oldVal) => {
-      console.log(newVal)
-      if(newVal){
-        getFormList()
-        getVersions()
+      console.log(newVal);
+      if (newVal) {
+        getFormList();
+        getVersions(false);
       }
     },
   );
@@ -239,6 +237,7 @@
     (newVal, oldVal) => {
       if (newVal.type == 'bpmn:StartEvent') {
         const currentNode = flowWfDataStore.getWfDataNode(newVal.id);
+        console.log(currentNode);
         if (currentNode) {
           node.value = currentNode;
         } else {
@@ -261,17 +260,16 @@
     },
   );
   // 编辑时获取表单名称，表单版本
-  async function getFormList(){
+  async function getFormList() {
     const list = await functionLoadFormPage({
-      page:1,
-      limit:1000
-    })
-    list.items.forEach(element => {
-      if(element.id == node.value.formCode){
-        data.formName = element.name
+      page: 1,
+      limit: 1000,
+    });
+    list.items.forEach((element) => {
+      if (element.id == node.value.formCode) {
+        data.formName = element.name;
       }
     });
-    console.log(list)
   }
   // 切换自定义表单和系统表单
   function tabsChange(val) {
@@ -300,44 +298,35 @@
     node.value.formAppUrl = '';
     node.value.authFields = [];
     node.value.formRelations = [];
-    getVersions()
+    getVersions(true);
     data.formOpen = false;
   }
-  async function getVersions(){
+  async function getVersions(isChange) {
     const list = await functionGetSchemePageList({
       schemeInfoId: node.value.formCode,
     });
     data.formVerisons = list.items;
-    if(node.value.formVerison){
-      custmerformVerisonChange(node.value.formVerison)
+    if (node.value.formVerison) {
+      custmerformVerisonChange(node.value.formVerison,isChange);
     }
-
   }
   // 表单版本更改
-  async function custmerformVerisonChange(val) {
+  async function custmerformVerisonChange(val,isChange) {
     let obj;
     data.formVerisons.forEach((element) => {
       if (element.id == val) {
         obj = element;
       }
     });
-    loadFormScheme(obj.scheme);
+    loadFormScheme(obj.scheme,isChange);
   }
-  function loadFormScheme(strScheme) {
+  function loadFormScheme(strScheme, isChange) {
     const scheme = JSON.parse(strScheme);
-    const fields: {
-      field?: string;
-      label?: string;
-      required: boolean;
-      isEdit: boolean;
-      isLook: boolean;
-    }[] = [];
+    const fields: any[] = [];
     const rfields: {
       label?: string;
       value?: string;
     }[] = [];
-    console.log('scheme.formInfo.schemas');
-    console.log(scheme.formInfo.schemas);
     scheme.formInfo.schemas.forEach(
       (element: { label?: string; field?: string; component: any; itemProps: any }) => {
         if (['InputGuid'].includes(element.component)) {
@@ -347,25 +336,21 @@
             value: element.field,
           });
         }
+
         if (!['Divider'].includes(element.component) && !element.itemProps.hidden) {
-          fields.push({
-            // prop:element.prop,
-            field: element.field,
-            label: element.label,
-            // table:element.table,
-            required: element.itemProps.required,
-            isEdit: true,
-            isLook: true,
-          });
+          let obj: any = element;
+          obj.required = element.itemProps.required;
+          obj.componentProps.disabled = true;
+          obj.disabled = true;
+          obj.ifShow = true;
+          fields.push(obj);
         }
       },
     );
-
-    console.log(rfields);
-    console.log(fields);
-
     data.formRelations = rfields;
-    node.value.authFields = fields;
+    if (isChange) {
+      node.value.authFields = fields;
+    }
   }
   function updateWfData(key) {
     // flowWfDataStore.updataWfDataNode(node.value.id, key, node.value[key]);
@@ -375,8 +360,8 @@
       field: '',
       label: '',
       required: true,
-      isEdit: true,
-      isLook: true,
+      disabled: true,
+      ifShow: true,
     });
   }
   function handleDeleteAuthField(key) {

src/components/SelectForm/account.data.ts

@@ -14,7 +14,6 @@ export const columns: BasicColumn[] = [
   {
     title: '名称',
     dataIndex: 'name',
-    width: 120,
   },
   {
     title: '分类',

src/views/demo/workflow/create/index.vue

@@ -111,7 +111,10 @@
 
         .icon {
           margin-right: 10px;
-          font-size: 30px !important;
+          // font-size: 30px !important;
+        }
+        ::v-deep span {
+          font-size: 16px;
         }
       }
 
@@ -127,4 +130,8 @@
       padding: 12px 2px;
     }
   }
+  ::v-deep .anticon svg {
+    width: 2em;
+    height: 2em;
+  }
 </style>

src/views/demo/workflow/create/preview.vue

@@ -1,7 +1,7 @@
 <template>
   <PageWrapper :class="prefixCls">
     <div class="btn-box">
-      <a-button type="primary" :icon="h(SendOutlined)" @click="handleCreateFlow" class="ml-2"
+      <a-button type="primary" :icon="h(SendOutlined)" @click="handleSubmit" class="ml-2"
         >发起流程
       </a-button>
       <a-button type="primary" :icon="h(SaveOutlined)" @click="handleSaveDraft" class="ml-2"
@@ -16,13 +16,13 @@
         >关闭
       </a-button>
     </div>
-    <a-tabs v-model:activeKey="activeName">
-      <a-tab-pane key="form" tab="表单信息">
-        <VFormCreate ref="eFormPreview" :form-config="formConfig"/>
+    <a-tabs v-model:activeKey="activeName" @change="changeActive">
+      <a-tab-pane key="form" tab="表单信息" v-if="formVisble">
+        <FormViewer ref="formBoxRef" :formConfig="formConfig" v-if="formVisble"></FormViewer>
       </a-tab-pane>
       <a-tab-pane key="flow" tab="流程信息" force-render>
         <div class="process-design" :style="'display: flex; height:' + designerData.height">
-          <process-viewer :key="`designer-${code}`" :xml="flowContent" />
+          <process-viewer :key="`designer-${code}`" :xml="flowContent" v-if="processVisble"/>
           <div
             class="form-box"
             v-if="
@@ -68,8 +68,7 @@
   import { h, ref, reactive, onBeforeMount } from 'vue';
   import { ProcessViewer } from '@/components/ProcessViewer/index';
   import { PageWrapper } from '@/components/Page';
-  import VFormCreate from '@/views/demo/form-design/components/VFormCreate/index.vue';
-
+  import { FormViewer } from '@/components/FormViewer';
   import {
     SendOutlined,
     SaveOutlined,
@@ -82,6 +81,7 @@
   import { getDetail } from '@/api/sys/WFSchemeInfo';
   import { create, saveDraft } from '@/api/sys/WFProcess';
   import { getLoadMyUserList } from '@/api/sys/WFDelegate';
+  import {functionsaveForm} from '@/api/demo/formScheme'
   import { useRoute } from 'vue-router';
   import { useMultipleTabStore } from '@/store/modules/multipleTab';
   import { useRouter } from 'vue-router';
@@ -91,7 +91,7 @@
   import { useMessage } from '@/hooks/web/useMessage';
   const { createMessage } = useMessage();
   import { functionGetSchemePageList } from '@/api/demo/formScheme';
-
+  const formBoxRef = ref<any>();
   const userStore = useUserStore();
   const userInfo: any = userStore.getUserInfo;
   const prefixCls = 'preview-box';
@@ -103,6 +103,8 @@
   const formRef = ref();
   const labelCol = { span: 7 };
   const wrapperCol = { span: 13 };
+  const formVisble = ref(false);
+  const processVisble = ref(false)
   // 表单实例
   const eFormPreview = ref<null | IToolbarMethods>(null);
   // 表单数据
@@ -136,8 +138,9 @@
     delegateUsers: [],
     formVerison: '',
     formCode: '',
+    formCurrentNode: {},
   });
-  const activeName = ref('flow');
+  const activeName = ref('form');
   const formData = reactive({
     userId: '',
     title: '',
@@ -146,15 +149,18 @@
     title: [{ required: true, message: '请选择流程标题', trigger: 'blur' }],
     userId: [{ required: true, message: '请选择流程发起人', trigger: 'blur' }],
   });
+  function changeActive(activeKey){
+    if(activeKey == 'flow'){
+      processVisble.value=true
+    }
+  }
   async function getForm() {
-    console.log(designerData.formCode)
-    console.log(designerData.formVerison)
     const list = await functionGetSchemePageList({
       schemeInfoId: designerData.formCode,
     });
     list.items.forEach((element) => {
       if (element.id == designerData.formVerison) {
-        const scheme = JSON.parse(element.scheme)
+        const scheme = JSON.parse(element.scheme);
         formConfig.value.schemas = scheme.formInfo.schemas;
         console.log(formConfig.value);
       }
@@ -167,11 +173,18 @@
     let content = JSON.parse(data.scheme.content);
     let wfData = content.wfData;
     const currentNode = wfData.find((t) => t.type == 'bpmn:StartEvent');
-    console.log(currentNode)
-    designerData.isCustmerTitle = currentNode.isCustmerTitle;
-    designerData.formVerison = currentNode.formVerison;
-    designerData.formCode = currentNode.formCode;
-    getForm()
+    if (currentNode.authFields.length > 0) {
+      formVisble.value = true;
+    } else {
+      processVisble.value = true
+      activeName.value = 'flow';
+    }
+    formConfig.value = currentNode.authFields;
+    designerData.formCurrentNode = currentNode;
+    // designerData.isCustmerTitle = currentNode.isCustmerTitle;
+    // designerData.formVerison = currentNode.formVerison;
+    // designerData.formCode = currentNode.formCode;
+    // getForm();
   }
   async function getDelegateUsers() {
     const data = await getLoadMyUserList({
@@ -190,19 +203,50 @@
     querys.schemeCode = '';
     designerData.isDraft = true;
     if (data) {
-      closePreview();
       return createMessage.success('保存草稿成功');
     } else {
       return createMessage.error('保存草稿失败');
     }
   }
-  async function handleCreateFlow() {
+  function handleSubmit() {
+    var processId = buildGUID();
+    var querys = {
+      schemeId: designerData.formCurrentNode.formVerison,
+      isUpdate: false,
+      pkey: designerData.formCurrentNode.formRelationId,
+      pkeyValue: processId,
+    };
+    formBoxRef.value
+      .getForm()
+      .then(async (res) => {
+        res[designerData.formCurrentNode.formRelationId] = processId;
+        console.log(res);
+        for(var item in res){
+          console.log(res[item])
+          if(res[item] == undefined){
+            res[item] = ''
+          }
+        }
+        querys.data = JSON.stringify(res);
+        console.log(querys);
+        const formValue = await functionsaveForm(querys)
+        if(formValue){
+          handleCreateFlow(processId);
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+        return;
+      });
+  }
+  async function handleCreateFlow(processId) {
     var querys = {
       schemeCode: designerData.isDraft ? '' : code,
       userId: formData.userId,
       title: formData.title,
-      processId: buildGUID(),
+      processId: processId,
     };
+    console.log(querys);
     if (!designerData.isDraft) {
       await saveDraft(querys);
       querys.schemeCode = '';

src/views/demo/workflow/task/process/audit.vue

@@ -1,17 +1,22 @@
 <template>
   <PageWrapper :class="prefixCls">
     <div class="btn-box">
-      <a-button type="primary" @click="confimReading" class="ml-2" v-if="isRead == 1">确认阅读 </a-button>
+      <a-button type="primary" @click="confimReading" class="ml-2" v-if="isRead == 1"
+        >确认阅读
+      </a-button>
       <a-button type="primary" @click="closePage" class="ml-2" danger>关闭 </a-button>
     </div>
     <a-layout>
       <a-layout>
         <a-layout-content>
-          <a-tabs v-model:activeKey="activeName">
-            <a-tab-pane key="form" tab="表单信息"> </a-tab-pane>
+          <a-tabs v-model:activeKey="activeName" @change="changeActive">
+            <a-tab-pane key="form" tab="表单信息" v-if="formVisble">
+              <FormViewer ref="formBoxRef" :formConfig="formConfig" v-if="formVisble"></FormViewer>
+            </a-tab-pane>
             <a-tab-pane key="flow" tab="流程信息(审核)" force-render>
               <div class="process-design" :style="'display: flex; height:' + designerData.height">
                 <process-viewer
+                  v-if="processVisble"
                   :key="`designer-${id}`"
                   :events="['element.click']"
                   @element-click="elementClick"
@@ -23,43 +28,45 @@
           </a-tabs>
         </a-layout-content>
         <!-- <a-divider type="vertical" /> -->
-        <a-layout-sider v-if="isRead == 0">
-          <a-tabs v-model:activeKey="auditName">
-            <a-tab-pane key="audit" tab="审批栏">
-              <div class="approval-column">
-                <a-form
-                  ref="formRef"
-                  :rules="rules"
-                  :model="formData"
-                  labelAlign="left"
-                  :label-col="labelCol"
-                  :wrapper-col="wrapperCol"
-                >
-                  <a-form-item :label="designerData.isCreateAgain ? '备注' : '审批意见'" name="des">
-                  </a-form-item>
-                  <a-form-item label="">
-                    <a-textarea
-                      v-model:value="formData.des"
-                      placeholder="请输入"
-                      :auto-size="{ minRows: 5, maxRows: 8 }"
-                    />
-                  </a-form-item>
-                  <a-form-item label="" class="l-task-btns">
-                    <a-button
-                      v-for="(btn, index) in designerData.taskBtns"
-                      :key="index"
-                      type="primary"
-                      :color="btn.type"
-                      @click="handleBtnClick(btn)"
-                      >{{ btn.name }}</a-button
-                    >
-                  </a-form-item>
-                </a-form>
-                <auditInfo :data="designerData.userLogs"></auditInfo>
-              </div>
-            </a-tab-pane>
-          </a-tabs>
-        </a-layout-sider>
+        <template v-if="processVisble">
+          <a-layout-sider v-if="isRead == 0">
+            <a-tabs v-model:activeKey="auditName">
+              <a-tab-pane key="audit" tab="审批栏">
+                <div class="approval-column">
+                  <a-form
+                    ref="formRef"
+                    :rules="rules"
+                    :model="formData"
+                    labelAlign="left"
+                    :label-col="labelCol"
+                    :wrapper-col="wrapperCol"
+                  >
+                    <a-form-item :label="designerData.isCreateAgain ? '备注' : '审批意见'" name="des">
+                    </a-form-item>
+                    <a-form-item label="">
+                      <a-textarea
+                        v-model:value="formData.des"
+                        placeholder="请输入"
+                        :auto-size="{ minRows: 5, maxRows: 8 }"
+                      />
+                    </a-form-item>
+                    <a-form-item label="" class="l-task-btns">
+                      <a-button
+                        v-for="(btn, index) in designerData.taskBtns"
+                        :key="index"
+                        type="primary"
+                        :color="btn.type"
+                        @click="handleBtnClick(btn)"
+                        >{{ btn.name }}</a-button
+                      >
+                    </a-form-item>
+                  </a-form>
+                  <auditInfo :data="designerData.userLogs"></auditInfo>
+                </div>
+              </a-tab-pane>
+            </a-tabs>
+          </a-layout-sider>
+        </template>
       </a-layout>
     </a-layout>
 
@@ -94,6 +101,7 @@
   import { useRoute } from 'vue-router';
   import { dateFormat } from '@/utils/base';
   import { flowStore } from '@/store/modules/flow';
+  import { FormViewer } from '@/components/FormViewer';
   import {
     designerDataType,
     logsType,
@@ -102,12 +110,14 @@
     nodeUsersType,
   } from './processModel';
   import auditInfo from './auditInfo.vue';
+  import { IFormConfig } from '@/views/demo/form-design/typings/v-form-component';
   import { useMessage } from '@/hooks/web/useMessage';
   const { createMessage } = useMessage();
   import { useMultipleTabStore } from '@/store/modules/multipleTab';
   import { useRouter } from 'vue-router';
   const tabStore = useMultipleTabStore();
   const router = useRouter();
+  const formBoxRef = ref<any>();
 
   const flowWfDataStore = flowStore();
   const prefixCls = 'preview-box';
@@ -122,7 +132,8 @@
   const labelCol = { span: 7 };
   const wrapperCol = { span: 24 };
   const infoOpen = ref(true);
-
+  const formVisble = ref(false);
+  const processVisble = ref(false);
   const formData = ref({
     des: '',
   });
@@ -132,6 +143,21 @@
   if (type == 4) {
     rules.value = {};
   }
+  // 表单数据
+  const formConfig = ref<IFormConfig>({
+    // 表单配置
+    schemas: [],
+    layout: 'horizontal',
+    labelLayout: 'flex',
+    labelWidth: 100,
+    labelCol: {},
+    wrapperCol: {},
+    currentItem: {
+      component: '',
+      componentProps: {},
+    },
+    activeKey: 1,
+  });
   const designerData: designerDataType = reactive({
     loading: false,
     xmlString: '',
@@ -162,9 +188,15 @@
     isCreateAgain: type == 4 ? true : false,
     selectRejectNodeVisible: false,
     selectSignVisible: false,
+    formCurrentNode:{}
   });
-  const activeName = ref('flow');
+  const activeName = ref('form');
   const auditName = ref('audit');
+  function changeActive(activeKey) {
+    if (activeKey == 'flow') {
+      processVisble.value = true;
+    }
+  }
   function elementClick(element: { id: string | number }) {
     if (element) {
       designerData.nodeLogs = designerData.nodeMap[element.id] || [];
@@ -183,6 +215,17 @@
     flowViewer.value = data.flowViewer;
     designerData.process = data.process;
     designerData.task = data.task;
+    let content = JSON.parse(data.scheme.content);
+    let wfData = content.wfData;
+    const currentNode = wfData.find((t) => t.type == 'bpmn:StartEvent');
+    if (currentNode.authFields.length > 0) {
+      formVisble.value = true;
+    } else {
+      activeName.value = 'flow';
+      processVisble.value = true;
+    }
+    designerData.formCurrentNode = currentNode;
+    formConfig.value = currentNode.authFields;
     if (isRead == 0) {
       setLogsAndTasks(data.logs, data.tasks);
       getBtns();
@@ -308,14 +351,14 @@
           // 右侧显示审核记录
           // const userLogIndex = userLogs.findIndex((t) => t.id == log.unitId);
           // if (userLogIndex == -1) {
-            userLogs.push({
-              id: log.unitId,
-              name: log.unitName,
-              user: log.userName,
-              time: dateFormat(log.createDate),
-              des: log.des,
-              img: log.stampImg,
-            });
+          userLogs.push({
+            id: log.unitId,
+            name: log.unitName,
+            user: log.userName,
+            time: dateFormat(log.createDate),
+            des: log.des,
+            img: log.stampImg,
+          });
           // }
         }
       },
@@ -387,6 +430,27 @@
     if (!data) {
       return;
     }
+    if(formVisble.value){
+      var querys = {
+        schemeId: designerData.formCurrentNode.formVerison,
+        isUpdate: true,
+        pkey: designerData.formCurrentNode.formRelationId,
+        pkeyValue: processId,
+      };
+      formBoxRef.value
+        .getForm()
+        .then((res) => {
+          res[designerData.formCurrentNode.formRelationId] = processId;
+          console.log(res);
+          querys.data = JSON.stringify(res);
+          console.log(querys);
+          return;
+        })
+        .catch((error) => {
+          console.log(error);
+          return;
+        });
+    }
     const currentBtn = btn;
     designerData.currentBtn = currentBtn;
     let res: any;
@@ -508,6 +572,15 @@
   });
 </script>
 <style lang="less" scoped>
+  ::v-deep .ant-tabs-nav-wrap {
+    padding-left: 10px;
+  }
+  ::v-deep .ant-layout {
+    background-color: @component-background;
+  }
+  ::v-deep .ant-layout-sider-children {
+    border-left: 1px solid rgba(5, 5, 5, 0.06);
+  }
   ::v-deep .ant-divider-vertical {
     height: 100%;
   }
@@ -549,7 +622,7 @@
   }
   ::v-deep .vben-page-wrapper-content {
     height: 100%;
-    margin: 0 0 0 16px;
+    // margin: 0 0 0 16px;
   }
   .form-box {
     width: 480px;

src/views/demo/workflow/task/process/auditInfo.vue

@@ -102,7 +102,7 @@
     &--date {
       position: absolute;
       right: 0;
-      width: 180px;
+      width: 181px;
       text-align: left;
       bottom: 4px;
       font-size: 12px;

src/views/demo/workflow/task/process/look.vue

@@ -1,7 +1,6 @@
 <template>
   <PageWrapper :class="prefixCls">
     <div class="btn-box">
-    
       <a-button
         type="primary"
         @click="closePage"
@@ -13,11 +12,14 @@
     <a-layout>
       <a-layout>
         <a-layout-content>
-          <a-tabs v-model:activeKey="activeName">
-            <a-tab-pane key="form" tab="表单信息"> </a-tab-pane>
+          <a-tabs v-model:activeKey="activeName"  @change="changeActive">
+            <a-tab-pane key="form" tab="表单信息" v-if="formVisble">
+              <FormViewer ref="formBoxRef" :formConfig="formConfig" v-if="formVisble"></FormViewer>
+            </a-tab-pane>
             <a-tab-pane key="flow" tab="流程信息(审核)" force-render>
               <div class="process-design" :style="'display: flex; height:' + designerData.height">
                 <process-viewer
+                v-if="processVisble"
                   :key="`designer-${id}`"
                   :events="['element.click']"
                   @element-click="elementClick"
@@ -28,15 +30,17 @@
             </a-tab-pane>
           </a-tabs>
         </a-layout-content>
-        <a-layout-sider v-if="designerData.userLogs.length > 0">
-          <a-tabs v-model:activeKey="auditName">
-            <a-tab-pane key="audit" tab="审批信息">
-              <div class="approval-info"> 
-                <auditInfo :data="designerData.userLogs"></auditInfo>
-              </div>
-            </a-tab-pane>
-          </a-tabs>
-        </a-layout-sider>
+        <template v-if="processVisble">
+          <a-layout-sider v-if="designerData.userLogs.length > 0">
+            <a-tabs v-model:activeKey="auditName">
+              <a-tab-pane key="audit" tab="审批信息">
+                <div class="approval-info"> 
+                  <auditInfo :data="designerData.userLogs"></auditInfo>
+                </div>
+              </a-tab-pane>
+            </a-tabs>
+          </a-layout-sider>
+        </template>
       </a-layout>
     </a-layout>
 
@@ -64,10 +68,12 @@
 
 <script lang="ts" setup>
   import { ref, reactive, onBeforeMount } from 'vue';
+  import { FormViewer } from '@/components/FormViewer';
   import { ProcessViewer } from '@/components/ProcessViewer';
   import { PageWrapper } from '@/components/Page';
   import { getBPMN,  } from '@/api/sys/WFProcess';
   import { useRoute } from 'vue-router';
+  import { IFormConfig } from '@/views/demo/form-design/typings/v-form-component';
   import { dateFormat } from '@/utils/base';
   import {
     designerDataType,
@@ -85,7 +91,24 @@
   const processId = route.query.processId;
   const id = route.query.id;
   const infoOpen = ref(true);
- 
+  const formBoxRef = ref<any>();
+    const formVisble = ref(false);
+  const processVisble = ref(false);
+   // 表单数据
+   const formConfig = ref<IFormConfig>({
+    // 表单配置
+    schemas: [],
+    layout: 'horizontal',
+    labelLayout: 'flex',
+    labelWidth: 100,
+    labelCol: {},
+    wrapperCol: {},
+    currentItem: {
+      component: '',
+      componentProps: {},
+    },
+    activeKey: 1,
+  });
   const designerData: designerDataType = reactive({
     loading: false,
     xmlString: '',
@@ -115,9 +138,17 @@
     wfData: [],
     selectRejectNodeVisible: false,
     selectSignVisible: false,
+    formCurrentNode:{}
   });
   const activeName = ref('flow');
   const auditName = ref('audit');
+  function changeActive(activeKey) {
+    if (activeKey == 'flow') {
+      processVisble.value = true;
+    }else{
+      processVisble.value = false;
+    }
+  }
   function elementClick(element: { id: string | number }) {
     if (element) {
       designerData.nodeLogs = designerData.nodeMap[element.id] || [];
@@ -135,6 +166,17 @@
     flowViewer.value = data.flowViewer;
     designerData.process = data.process;
     designerData.task = data.task;
+    let content = JSON.parse(data.scheme.content);
+    let wfData = content.wfData;
+    const currentNode = wfData.find((t) => t.type == 'bpmn:StartEvent');
+    if (currentNode.authFields.length > 0) {
+      formVisble.value = true;
+    } else {
+      activeName.value = 'flow';
+      processVisble.value = true;
+    }
+    designerData.formCurrentNode = currentNode;
+    formConfig.value = currentNode.authFields;
     setLogsAndTasks(data.logs, data.tasks);
     // getBtns();
   }
@@ -287,6 +329,15 @@
   });
 </script>
 <style lang="less" scoped>
+ ::v-deep .ant-tabs-nav-wrap {
+    padding-left: 10px;
+  }
+  ::v-deep .ant-layout {
+    background-color: @component-background;
+  }
+  ::v-deep .ant-layout-sider-children {
+    border-left: 1px solid rgba(5, 5, 5, 0.06);
+  }
   ::v-deep .ant-divider-vertical {
     height: 100%;
   }