代码规范化

src/api/formdesign/index.ts

@@ -56,4 +56,3 @@ export const importDataBaseTable = (params: ImportantDataBaseParam) =>
   });
 export const getDataBaseCodeList = (params: {}) =>
   defHttp.get<AccountListGetResultModel>({ url: Api.GETDATABASETABLE_LIST, params });
-

src/api/formdesign/model/index.ts

@@ -21,7 +21,7 @@ export interface DataBaseSqlParam {
   sql: any;
 }
 export interface selectParams {
-  id: number | string;
+  id: any;
 }
 export interface OutKeyParams {
   tableNames: any;

src/api/sys/WFProcess.ts

@@ -66,7 +66,7 @@ export function createAgain(params?: CreateParams) {
 /**
  * @description: 加签审核
  */
- export function signAudit(id:String,params?: CreateParams) {
+ export function signAudit(id?:String,params?: CreateParams) {
   return defHttp.post(
     {
       url: Api.SignAudit+"?id="+id,

src/api/sys/model/WFProcessModel.ts

@@ -37,7 +37,7 @@
  */
  export interface LoadNextAuditorsParams {
   code: string,
-  processId:string,
+  processId?:string | number,
   nodeId:string,
   operationCode:string,
   userId:string,

src/components/Form/src/hooks/useFormValues.ts

@@ -16,6 +16,7 @@ interface UseFormValuesContext {
  * @desription deconstruct array-link key. This method will mutate the target.
  */
 function tryDeconstructArray(key: string, value: any, target: Recordable) {
+  console.log('11111111111111');
   const pattern = /^\[(.+)\]$/;
   if (pattern.test(key)) {
     const match = key.match(pattern);
@@ -34,6 +35,7 @@ function tryDeconstructArray(key: string, value: any, target: Recordable) {
  * @desription deconstruct object-link key. This method will mutate the target.
  */
 function tryDeconstructObject(key: string, value: any, target: Recordable) {
+  console.log('2222222222');
   const pattern = /^\{(.+)\}$/;
   if (pattern.test(key)) {
     const match = key.match(pattern);

src/components/ProcessDesigner/page.ts

@@ -1,2 +1,3 @@
 export { default as ProcessDesigner } from './package/designer/ProcessDesigner.vue';
+export { default as ProcessDesignerPage } from './index.vue';
 

src/components/Tree/src/BasicTree.vue

@@ -1,5 +1,5 @@
 <script lang="tsx">
-  import type { CSSProperties , h} from 'vue';
+  import type { CSSProperties, h } from 'vue';
   import type {
     FieldNames,
     TreeState,
@@ -474,3 +474,73 @@
     },
   });
 </script>
+<style scoped lang="less">
+  ::v-deep .ant-spin-container {
+    margin-top: 10px;
+  }
+  ::v-deep .ant-tree {
+    .ant-tree-treenode {
+      padding: 4px 0 4px 0;
+      // height: 40px;
+      // line-height: 40px;
+      span {
+        // display: inline-block;
+        height: 36px;
+        line-height: 36px;
+      }
+    }
+    .ant-tree-treenode:hover {
+      background: #ebebeb;
+    }
+    .ant-tree-node-content-wrapper:hover {
+      background: #ebebeb;
+    }
+    .ant-tree-treenode-selected:hover {
+      background: #e3f4fc;
+    }
+
+    .ant-tree-treenode-selected {
+      background: #e3f4fc;
+    }
+
+    .ant-tree-treenode-selected .ant-tree-title:hover {
+      background: #e3f4fc;
+    }
+    .ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-normal.ant-tree-node-selected:hover {
+      background: #e3f4fc;
+    }
+    .ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-normal.ant-tree-node-selected .ant-tree-title:hover {
+      background: #e3f4fc;
+    }
+  }
+  ::v-deep .ant-input-search > .ant-input-group > .ant-input-group-addon:last-child {
+    background: #2a7dc9;
+    button {
+      background: #2a7dc9;
+      color: #fff;
+      border-start-end-radius: 6px;
+      border-end-end-radius: 6px;
+      border: none;
+    }
+  }
+  ::v-deep
+    .ant-input-search
+    > .ant-input-group
+    > .ant-input-group-addon:last-child
+    .ant-input-search-button:not(.ant-btn-primary) {
+    color: #fff;
+    border-start-end-radius: 6px;
+    border-end-end-radius: 6px;
+  }
+  ::v-deep
+    .ant-input-search
+    > .ant-input-group
+    > .ant-input-group-addon:last-child
+    .ant-input-search-button {
+    // border-start-end-radius:0;
+    // border-end-end-radius:0;
+  }
+  ::v-deep .ant-btn.ant-btn-sm.ant-btn-icon-only {
+    width: 40px;
+  }
+</style>

src/components/Tree/src/components/TreeHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="bem()" class="flex mb-1 px-2 py-1.5 items-center">
+  <div :class="bem()" class="flex mb-1 pb-3 pt-3 px-2 py-1.5 items-center">
     <slot name="headerTitle" v-if="slots.headerTitle"></slot>
     <BasicTitle :helpMessage="helpMessage" v-if="!slots.headerTitle && title">
       {{ title }}
@@ -174,3 +174,8 @@
     },
   );
 </script>
+<style scoped lang="less"> 
+   :v-deep .vben-tree-header{
+    padding-bottom: 1rem!important;
+  }
+</style>

src/router/routes/index.ts

@@ -48,6 +48,38 @@ export const H5HtmlRoute: AppRouteRecordRaw = {
   },
 };
 
+export const CreatePreviewRoute: AppRouteRecordRaw = {
+  path: '/create_preview',
+  name: 'create_preview',
+  component: () => import('@/views/demo/workflow/h5/create.vue'),
+  meta: {
+    title: t('routes.demo.workflow.create_preview'),
+  },
+};
+export const TaskAuditRoute: AppRouteRecordRaw = {
+  path: '/task_audit_preview',
+  name: 'task_audit_preview',
+  component: () => import('@/views/demo/workflow/h5/audit.vue'),
+  meta: {
+    title: t('routes.demo.workflow.task_audit_preview'),
+  },
+};
+export const TaskLookRoute: AppRouteRecordRaw = {
+  path: '/task_look_preview',
+  name: 'task_look_preview',
+  component: () => import('@/views/demo/workflow/h5/look.vue'),
+  meta: {
+    title: t('routes.demo.workflow.task_look_preview'),
+  },
+};
+export const SchemeRoute: AppRouteRecordRaw = {
+  path: '/scheme_preview',
+  name: 'scheme_preview',
+  component: () => import('@/views/demo/workflow/h5/scheme.vue'),
+  meta: {
+    title: t('routes.demo.workflow.scheme_preview'),
+  },
+};
 // Basic routing without permission
 // 未经许可的基本路由
 export const basicRoutes = [
@@ -57,4 +89,8 @@ export const basicRoutes = [
   ...mainOutRoutes,
   REDIRECT_ROUTE,
   PAGE_NOT_FOUND_ROUTE,
+  CreatePreviewRoute,
+  TaskAuditRoute,
+  TaskLookRoute,
+  SchemeRoute
 ];

src/router/routes/modules/dashboard.ts

@@ -58,7 +58,7 @@ const dashboard: AppRouteModule = {
         showMenu: false,
         currentActiveMenu: '/workflow/create',
       },
-      component: () => import('@/views/demo/workflow/create/preview.vue'),
+      component: () => import('@/views/demo/workflow/h5/create.vue'),
     },
     {
       path: 'task_audit_preview/:id',
@@ -70,7 +70,7 @@ const dashboard: AppRouteModule = {
         showMenu: false,
         currentActiveMenu: '/workflow/task',
       },
-      component: () => import('@/views/demo/workflow/task/process/audit.vue'),
+      component: () => import('@/views/demo/workflow/h5/audit.vue'),
     },
     {
       path: 'task_look_preview/:id',
@@ -82,7 +82,7 @@ const dashboard: AppRouteModule = {
         showMenu: false,
         currentActiveMenu: '/workflow/task',
       },
-      component: () => import('@/views/demo/workflow/task/process/look.vue'),
+      component: () => import('@/views/demo/workflow/h5/look.vue'),
     },
   ],
 };

src/views/demo/onlineform/formCall/index.vue

@@ -56,10 +56,9 @@
   const designData: any = ref();
   const searchValue: any = ref();
   const addParamsArr: any = ref([]);
-  const primaryKeyFailed: any = ref();
   const paramsCode = route.query.code;
   const callColumns: BasicColumn[] = [];
-  console.log('paramsCode', paramsCode);
+
   const treeData = ref<TreeItem[]>([]);
   const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
   const actionList: TreeActionItem[] = [];
@@ -80,7 +79,6 @@
     showTableSetting: true,
     bordered: true,
     beforeFetch: (data) => {
-      console.log('dabefore', data);
       // 接口请求前 参数处理
       var temp = {
         id: paramsId.value,
@@ -94,7 +92,6 @@
       return temp;
     },
     afterFetch: () => {
-      console.log('designData.value', designData.value);
       const rel = designData.value;
       let arr: any = [];
       if (rel.primaryKey) {
@@ -139,7 +136,6 @@
         });
       }
       addParamsArr.value = [...new Set(arr)];
-      console.log('addParamsArr', addParamsArr);
     },
     handleSearchInfoFn(info) {
       return info;
@@ -165,8 +161,6 @@
   const handleClickForm = (status) => {
     const config = cloneDeep(formConfig.value);
     const rows = getSelectRows();
-    console.log('rows', rows[0]);
-    console.log('primaryKeyFailed', primaryKeyFailed.value);
     const query: any = ref({
       id: paramsId.value,
       key: designData.value.primaryKey,
@@ -210,14 +204,12 @@
         if (rows.length == 0) {
           return createMessage.warn('请选择一条数据进行删除');
         }
-        console.log('rowww', rows);
         createConfirm({
           iconType: 'info',
           title: '删除',
           content: '确定要删除该条数据？',
           onOk: async () => {
             delFormsData(query.value).then((res) => {
-              console.log('rrr', res);
               if (res) {
                 createMessage.success('删除成功', 2);
                 setTimeout(() => {
@@ -255,7 +247,6 @@
     const rel = selected.node.dataRef;
     const obj: any = {};
     obj[rel.key] = rel.value;
-    console.log('obj', obj);
     searchValue.value = JSON.stringify(obj);
     reload();
   }
@@ -265,13 +256,9 @@
       code: paramsCode,
     };
     getFormsDesignData(params).then((res: Recordable) => {
-      console.log('res', res);
       let columnObj = JSON.parse(res.entity.scheme);
       let formObj = JSON.parse(res.formScheme.scheme);
-      console.log('res222', columnObj);
-      console.log('formObj', formObj);
       paramsId.value = res.formScheme.id;
-      console.log('paramsId', paramsId.value);
 
       if (columnObj.table.columns) {
         columnObj.table.columns.forEach((item) => {
@@ -295,7 +282,6 @@
           }
         });
       });
-      console.log('callColumns', callColumns);
       setColumns(callColumns);
       reload();
       if (columnObj.left.options.length > 0) {

src/views/demo/onlineform/formModule/config/layout.vue

@@ -26,12 +26,12 @@
         // 布局设置
         layoutList: [
           {
-            img: `/public/mars/img/onlineform/layout.png`,
+            img: `/mars/img/onlineform/layout.png`,
             value: 1,
             label: '普通列表',
           },
           {
-            img: `/public//mars/img/onlineform/layout-left.png`,
+            img: `/mars/img/onlineform/layout-left.png`,
             value: 2,
             label: '左侧树形+普通列表',
           },

src/views/demo/onlineform/formModule/config/query.vue

@@ -28,7 +28,7 @@
       </template>
     </BasicTable>
     <div class="m-2 mr-0 w-3/8 xl:w-3/8 overflow-hidden">
-      <img style="width: 100%" :src="`/public/mars/img/onlineform/query${config.queryType}.jpg`" />
+      <img style="width: 100%" :src="`/mars/img/onlineform/query${config.queryType}.jpg`" />
     </div>
   </PageWrapper>
 </template>

src/views/demo/onlineform/formScheme/index.vue

@@ -60,7 +60,7 @@
     <VFormPreview ref="eFormPreview" :formConfig="formConfig" />
     <!-- 历史记录列表弹窗 -->
     <HistoryModal @register="historyModal" :closeFunc="handleCloseFunc" />
-    <FormModal @submitsuccess="submitsuccess" @register="registerModal" v-if="formModalVisible" />
+    <FormModal @submitsuccess="submitsuccess" @register="registerModal" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -95,7 +95,6 @@
 
   const searchInfo = reactive<Recordable>({});
 
-  const formModalVisible = ref(true);
   // 预览
   const eFormPreview = ref<null | IToolbarMethods>(null);
   // 预览endregion
@@ -179,7 +178,6 @@
 
   // 表单列表-新增
   function handleAddForm() {
-    formModalVisible.value = true;
     openModal(true, {});
   }
   // 表单列表-编辑
@@ -189,7 +187,6 @@
   // 表单列表-保存后
   function submitsuccess() {
     reload();
-    formModalVisible.value = false;
   }
   // 表单列表-删除
   async function handleDelete(record) {

src/views/demo/onlineform/formdesign/FormModal.vue

@@ -28,9 +28,10 @@
         <div :class="`${prefixCls}-header-btnBox`">
           <a-button :disabled="stepsCurrent !== 1" @click="formPrevClick">上一步</a-button>
           <a-button :disabled="stepsCurrent == 1" @click="formNextClick">下一步</a-button>
-          <a-button :disabled="stepsCurrent !== 1" @click="submitClick" type="primary"
+          <a-button @click="stageClick" type="success">暂存</a-button>
-            >保存</a-button
+          <a-button :disabled="stepsCurrent !== 1" @click="submitClick" type="primary">
-          >
+            保存
+          </a-button>
           <a-button type="primary" danger @click="closeModalClick">关闭</a-button>
         </div>
       </div>
@@ -45,7 +46,8 @@
           :formScheme="formScheme"
           :isNextSteps="isNextSteps"
           :isAddVisible="isAddVisible"
-          @form-data-back="handleformData"
+          :isStageClick="isStageClick"
+          @form-data-back="formDataBack"
           @form-data-no-back="formDataNoBack"
         />
       </div>
@@ -82,11 +84,15 @@
 
   function designSendGrandson(value) {
     let designTab = JSON.parse(value);
-    let schems = JSON.parse(saveFormDatas.value.scheme.scheme);
+    let schems = saveFormDatas.value.scheme.scheme
+      ? JSON.parse(saveFormDatas.value.scheme.scheme)
+      : JSON.parse(
+          '{"db":[{"name":"form_scheme","type":"main"}],"rdb":[],"dbCode":"hcsystemdb","formInfo":{"schemas":[]},"primaryKey":"Id"}',
+        );
+
     let tabArr: any = [];
     let tabLabelArr: any = [];
     designTab.schemas.forEach((item) => {
-      console.log('item', item);
       if (item.componentProps.defaultValue) {
         item.defaultValue = item.componentProps.defaultValue;
       }
@@ -110,29 +116,29 @@
     });
     schems.primaryKey = primaryKey.value;
     schems.formInfo = designTab;
-    console.log('schemsschems 0000', schems);
     if (tabArr.includes(undefined)) {
       message.warning('请' + tabLabelArr[0] + '绑定数据表字段！', 2);
     } else {
       setTimeout(() => {
         saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
-        console.log('saveFormDatas000', JSON.parse(saveFormDatas.value.scheme.scheme));
         submitSaveClick();
       }, 100);
     }
-    console.log('孙子传值给我', designTab);
   }
   provide('designSendGrandson', designSendGrandson);
 
+  let editCreateUserName: string = '';
+
   const [registerModal, { closeModal }] = useModalInner((data: any) => {
     stepsCurrent.value = 0;
     isSubmitClick.value = false;
+    isStageClick.value = false;
     if (data.id) {
+      editCreateUserName = data.createUserName;
       isAddVisible.value = false;
       getBaseConfigList({ id: data.id }).then((res: Recordable) => {
         formScheme.value = res;
         saveFormDatas.value = res;
-        console.log('res');
       });
     } else {
       isAddVisible.value = true;
@@ -150,11 +156,12 @@
   let stepsCurrent = ref();
   let isNextSteps = ref(false);
   let isSubmitClick = ref(false);
+  let isStageClick = ref(false);
 
   function formNextClick() {
     isNextSteps.value = true;
     isSubmitClick.value = false;
-    console.log('saveFormDatas', saveFormDatas.value);
+    isStageClick.value = false;
   }
   function formPrevClick() {
     isNextSteps.value = false;
@@ -170,11 +177,13 @@
   function formDataNoBack() {
     isNextSteps.value = false;
   }
-  function handleformData(data) {
+  function formDataBack(data) {
-    console.log('emitttt', data);
+    if (isStageClick.value && stepsCurrent.value === 0) {
+      stepsCurrent.value = 0;
+    } else {
       stepsCurrent.value = 1;
+    }
     let arr: any[] = [];
-    console.log('adddata', data);
     if (data.table) {
       data.table.forEach((item) => {
         arr.push({
@@ -191,7 +200,6 @@
       tableNames: data.table[0].name,
     };
     getOutKeyList(params).then((res: Recordable) => {
-      console.log('aaaaaaaaaaaaaaa', res);
       res[0].db_codecolumnsList.forEach((item) => {
         if (item.isPrimaryKey == 1) {
           primaryKey.value = item.dbColumnName;
@@ -222,9 +230,15 @@
       let loginUser = localStorage.getItem('fireUserLoginName');
       saveFormDatas.value.info = data.form;
       saveFormDatas.value.info.createUserName = loginUser;
+      if (isStageClick.value) {
+        saveFormDatas.value.info.type = 2;
+        saveFormDatas.value.scheme.type = 2;
+        editCreateUserName = loginUser || '';
+      } else {
         saveFormDatas.value.info.type = 1;
-      saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
         saveFormDatas.value.scheme.type = 1;
+      }
+      saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
     } else {
       //编辑
       let schems = JSON.parse(saveFormDatas.value.scheme.scheme);
@@ -235,7 +249,7 @@
       saveFormDatas.value.info.name = data.form.name;
       saveFormDatas.value.info.DbCode = data.form.DbCode;
       saveFormDatas.value.info.formType = data.form.formType;
-      saveFormDatas.value.info.createUserName = data.form.createUserName;
+      saveFormDatas.value.info.createUserName = editCreateUserName;
       saveFormDatas.value.info.createDate = data.form.createDate;
       saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
       saveFormDatas.value.scheme.type = 1;
@@ -244,30 +258,49 @@
 
   function submitClick() {
     isSubmitClick.value = true;
+    isStageClick.value = false;
+  }
+  function stageClick() {
+    isSubmitClick.value = true;
+    isStageClick.value = true;
   }
   function designformback() {
     isSubmitClick.value = false;
   }
   function submitSaveClick() {
-    console.log('saveFormDatas', saveFormDatas);
+    if (!saveFormDatas.value.info.type) {
+      isStageClick.value = false;
+      isSubmitClick.value = false;
+      return;
+    }
     let param = {
       info: saveFormDatas.value.info,
       scheme: saveFormDatas.value.scheme,
     };
-    console.log('param', param);
     if (isAddVisible.value) {
       addFormDesignData(param).then((res: Recordable) => {
-        console.log('addsuccess', res);
+        if (!isStageClick.value) {
           closeModalClick();
+          isAddVisible.value = false;
+        } else {
+          isAddVisible.value = false;
+          getBaseConfigList({ id: res }).then((res: Recordable) => {
+            formScheme.value = res;
+            saveFormDatas.value = res;
+          });
+        }
         message.success('操作成功', 2);
         emit('submitsuccess');
       });
     } else {
       editFormDesignData(param).then((res: Recordable) => {
+        if (!isStageClick.value) {
           closeModalClick();
+        }
         message.success('操作成功', 2);
         emit('submitsuccess');
-        console.log('editsuccess', res);
+        console.log(res);
+        isStageClick.value = false;
       });
     }
   }
@@ -312,7 +345,7 @@
         right: 10px;
         align-items: center;
         justify-content: space-around;
-        width: 310px;
+        width: 380px;
         height: 56px;
       }
     }

src/views/demo/onlineform/formdesign/form/DataObject.vue

@@ -132,13 +132,12 @@
   }
   function dataBaseClick() {
     let rows = getImportSelectRows();
-    console.log('rowww', rows);
     let param = {
       dbCode: receiceDbCode.value,
       tableList: rows,
     };
     importDataBaseTable(param).then((res: Recordable) => {
-      console.log('res', res);
+      console.log(res);
       message.success('导入成功', 2);
       closeImportModal();
       reload();

src/views/demo/onlineform/formdesign/form/index.vue

@@ -220,15 +220,17 @@
       default: false,
       type: Boolean, //判断新增还是编辑
     },
+    isStageClick: {
+      default: false,
+      type: Boolean,
+    },
   });
 
   watch(
     () => props.formScheme,
     (newValue) => {
-      console.log('newValuenewValuenewValue', newValue);
       if (newValue) {
         if (newValue.scheme.scheme) {
-          console.log('newValue', newValue);
           let schemObj = JSON.parse(newValue.scheme.scheme);
           let obj = {
             name: newValue.info.name,
@@ -238,7 +240,6 @@
             formType: newValue.info.formType,
             description: newValue.info.description,
           };
-          console.log('schemObj', schemObj);
           setFieldsValue(obj);
           setTimeout(() => {
             if (newValue.info.formType == 1) {
@@ -258,8 +259,33 @@
   watch(
     () => props.isNextSteps,
     (newValue) => {
-      console.log('steeeeeeps');
       if (newValue) {
+        isNextStepsAndStageClick();
+      }
+    },
+    { immediate: true, deep: true },
+  );
+  watch(
+    () => props.isAddVisible,
+    (newValue) => {
+      if (newValue) {
+        setTableDataMain([]);
+        setTableDataConnect([]);
+        resetFields();
+      }
+    },
+    { immediate: true, deep: true },
+  );
+  watch(
+    () => props.isStageClick,
+    (newValue) => {
+      if (newValue) {
+        isNextStepsAndStageClick();
+      }
+    },
+  );
+
+  function isNextStepsAndStageClick() {
     validate();
     let formArr = getFieldsValue();
 
@@ -342,20 +368,6 @@
       }
     }
   }
-    },
-    { immediate: true, deep: true },
-  );
-  watch(
-    () => props.isAddVisible,
-    (newValue) => {
-      if (newValue) {
-        setTableDataMain([]);
-        setTableDataConnect([]);
-        resetFields();
-      }
-    },
-    { immediate: true, deep: true },
-  );
 
   const [registerModal, { openModal: openBaseDataTableModal }] = useModal();
   const [registerSqlModal, { openModal: openSqleModal }] = useModal();
@@ -544,7 +556,6 @@
       let connectList = connectTableArr || [];
 
       let bisArr;
-      console.log('connectTableArr', connectTableArr);
 
       if (tabMainList && tabMainList.length > 0) {
         bisArr = ModuleId.filter((item2) => {
@@ -608,7 +619,6 @@
         }
       });
     }
-    console.log('tabDatas', tabDatas);
     setTableDataConnect(tabDatas);
     reloadConnect();
   }
@@ -636,7 +646,6 @@
       });
     }
     tabMainList = tabDatas;
-    console.log('tabDatas11111', tabDatas);
     setTableDataMain(tabDatas);
     reloadMain();
   }
@@ -660,8 +669,6 @@
   function handleConnectNameChange(record: Recordable) {
     const anyformobj = ref<any>(myDataBaseFormRef.value.getFieldsValue());
     let arr = getDataSourceConnect();
-    console.log('record', record);
-    console.log('arr', arr);
     arr.forEach((item) => {
       if (item.index == record.index) {
         getOutKeyList({ tableNames: record.relationName, dbCode: anyformobj.value.DbCode }).then(
@@ -686,9 +693,7 @@
   }
 
   function handleSqlBackDatas(ModuleId: Recordable) {
-    console.log('ModuleId', ModuleId);
     let viesObj: any = getDataSourceViews() || [];
-    console.log('viesObj', viesObj);
     viesObj.push(ModuleId);
     viesObj.forEach((item, index) => {
       item.index = index;

src/views/demo/onlineform/formdesign/form/sqlModal.vue

@@ -24,9 +24,7 @@
   const receiveParam = ref();
 
   const [registerModal, { closeModal }] = useModalInner((data: any) => {
-    console.log('dddd', data);
     receiveParam.value = data;
-    console.log('receiveParam', receiveParam);
     setFieldsValue({});
   });
 

src/views/demo/system/account/AccountModal.vue

@@ -10,7 +10,7 @@
   import { accountFormSchema } from './account.data';
   import { addAccount } from '@/api/demo/system';
   import { useMessage } from '@/hooks/web/useMessage';
-import md5 from 'js-md5'
+  import md5 from 'js-md5';
   const { createMessage } = useMessage();
   defineOptions({ name: 'AccountModal' });
 
@@ -48,11 +48,11 @@ import md5 from 'js-md5'
     try {
       const values = await validate();
       setModalProps({ confirmLoading: true });
-      if(values.password){
+      if (values.password) {
-        values.password = md5(values.password)
+        values.password = md5(values.password);
       }
       const data = await addAccount(values);
-      console.log(data)
+      console.log(data);
       if (data) {
         // TODO custom api
         closeModal();

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

@@ -0,0 +1 @@
+export { default as Preview } from './preview.vue';

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

@@ -4,12 +4,12 @@
       <div :class="`${prefixCls}__list-title`">
         <a-divider type="vertical" />{{ item.category }}【{{ item.data.length }}】</div
       >
-      <List>
+      <a-list>
-        <Row :gutter="16">
+        <a-row :gutter="16">
           <template v-for="itemchild in item.data" :key="itemchild.id">
-            <Col :span="6">
+            <a-col :span="6">
-              <List.Item>
+              <a-list-item>
-                <Card
+                <a-card
                   :hoverable="true"
                   :class="`${prefixCls}__card`"
                   @click="launch(itemchild.code)"
@@ -25,12 +25,12 @@
                       {{ itemchild.name }}
                     </span>
                   </div>
-                </Card>
+                </a-card>
-              </List.Item>
+              </a-list-item>
-            </Col>
+            </a-col>
           </template>
-        </Row>
+        </a-row>
-      </List>
+      </a-list>
     </div>
     <a-modal
       width="100%"
@@ -40,11 +40,7 @@
       :destroyOnClose="true"
     >
       <template #footer> </template>
-      <Preview
+      <Preview ref="posRef" :code="code" @closeModel="closeMolder"></Preview>
-        ref="posRef"
-        :code="code"
-        @closeModel="closeMolder"
-      ></Preview>
     </a-modal>
   </PageWrapper>
 </template>
@@ -52,25 +48,22 @@
   import { onMounted, ref } from 'vue';
   import { Icon } from '@/components/Icon/index';
   import { PageWrapper } from '@/components/Page';
-  import { Card, Row, Col, List } from 'ant-design-vue';
   import { getInfoList } from '@/api/sys/WFSchemeInfo';
-  import { useGo } from '@/hooks/web/usePage';
+  import { Preview } from './index';
-  import Preview from './preview.vue'
-  const go = useGo();
   const prefixCls = 'list-card';
   let cardList = ref();
-  const previewOpen = ref(false)
+  const previewOpen = ref(false);
-  const code = ref('')
+  const code = ref('');
   function launch(val) {
-    previewOpen.value = true
+    previewOpen.value = true;
-    code.value = val
+    code.value = val;
     // go('/dashboard/create_preview/add?code=' + code);
   }
-  function closeMolder(){
+  function closeMolder() {
     previewOpen.value = false;
   }
   async function getList() {
-    let data = await getInfoList();
+    let data = await getInfoList({});
     let newArr = {};
     data.map((item) => {
       newArr[item.category] = newArr[item.category] || []; //给category(可自行更换字段如name、sex等，根据自己的数据结构和需求)后加一个[]中括号
@@ -161,7 +154,7 @@
   .full-modal {
     .ant-modal {
       max-width: 100%;
-            top:0;
+      top: 0;
     }
 
     .ant-modal-content {

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

@@ -53,7 +53,7 @@
                 <a-select
                   v-model:value="formData.userId"
                   placeholder="请选择"
-                  :options="delegateUsers"
+                  :options="designerData.delegateUsers"
                 ></a-select>
               </a-form-item>
             </a-form>
@@ -69,15 +69,7 @@
   import { ProcessViewer } from '@/components/ProcessViewer/index';
   import { PageWrapper } from '@/components/Page';
   import { FormViewer } from '@/components/FormViewer';
-  import {
+  import { SendOutlined, SaveOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
-    SendOutlined,
-    SaveOutlined,
-    CloseCircleOutlined,
-    ZoomInOutlined,
-    RotateLeftOutlined,
-    RotateRightOutlined,
-    ClearOutlined,
-  } from '@ant-design/icons-vue';
   import { getDetail } from '@/api/sys/WFSchemeInfo';
   import { create, saveDraft } from '@/api/sys/WFProcess';
   import { getLoadMyUserList } from '@/api/sys/WFDelegate';
@@ -87,7 +79,7 @@
   import { IFormConfig } from '@/views/demo/form-design/typings/v-form-component';
   import { useMessage } from '@/hooks/web/useMessage';
   const { createMessage } = useMessage();
-  import { functionGetSchemePageList ,LoadFormScheme} from '@/api/demo/formScheme';
+  import { LoadFormScheme } from '@/api/demo/formScheme';
   const formBoxRef = ref<any>();
   const userStore = useUserStore();
   const userInfo: any = userStore.getUserInfo;
@@ -99,12 +91,10 @@
   const formVisble = ref(false);
   const processVisble = ref(false);
   const props = defineProps({
-    code:String,
+    code: String,
-  })
+  });
   const emit = defineEmits(['closeModel']);
-  const keyValue = ref('')
+  const keyValue = ref('');
-  // 表单实例
-  const eFormPreview = ref<null | IToolbarMethods>(null);
   // 表单数据
   const formConfig = ref<IFormConfig>({
     // 表单配置
@@ -167,7 +157,7 @@
     }
     formConfig.value = currentNode.authFields;
     designerData.formCurrentNode = currentNode;
-    getFormHistory()
+    getFormHistory();
   }
   async function getDelegateUsers() {
     const data = await getLoadMyUserList({
@@ -186,7 +176,7 @@
     querys.schemeCode = '';
     designerData.isDraft = true;
     if (data) {
-      closePreview()
+      closePreview();
       return createMessage.success('保存草稿成功');
     } else {
       return createMessage.error('保存草稿失败');
@@ -266,7 +256,7 @@
     }
   }
   function closePreview() {
-    emit('closeModel')
+    emit('closeModel');
     // if (!code) {
     //   tabStore.closeTabByKey('/dashboard/create_preview/add', router);
     // } else {
@@ -290,8 +280,8 @@
     }
   }
   ::v-deep .anticon svg {
-    width: 1em!important;
+    width: 1em !important;
-    height: 1em!important;
+    height: 1em !important;
   }
   .form-box {
     width: 480px;

src/views/demo/workflow/h5/audit.vue

@@ -0,0 +1,713 @@
+<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="closePage" class="ml-2" danger>关闭 </a-button>
+    </div>
+    <a-layout>
+      <a-layout>
+        <a-layout-content>
+          <a-tabs v-model:activeKey="activeName" @change="changeActive">
+            <a-tab-pane key="form" tab="表单信息" v-if="formVisble">
+              <FormViewer
+                ref="formBoxRef"
+                :formConfig="formConfig"
+                :processId="designerData.process.id"
+                :formVerison="designerData.formCurrentNode.formVerison"
+                :formRelationId="designerData.formCurrentNode.formRelationId"
+                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"
+                  :xml="flowContent"
+                  :flowViewer="flowViewer"
+                />
+              </div>
+            </a-tab-pane>
+            <a-tab-pane key="record" tab="流转记录" force-render>
+              <a-timeline>
+                <a-timeline-item
+                  v-for="(item, index) in designerData.logs"
+                  :key="index"
+                  :color="item.type"
+                >
+                  <div class="title">{{ item.time }}</div>
+                  <a-card hoverable size="small">
+                    <div class="type-title">{{ item.name }}</div>
+                    <div class="content">
+                      <span
+                        class="link"
+                        v-for="(userName, index2) in item.userNames"
+                        :key="index2"
+                        >{{ userName }}</span
+                      >
+                      {{ item.des }}
+                    </div>
+                  </a-card>
+                </a-timeline-item>
+              </a-timeline>
+            </a-tab-pane>
+          </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>
+      </a-layout>
+    </a-layout>
+
+    <!-- 节点记录信息 -->
+    <div class="info-box" v-if="designerData.nodeLogs.length > 0">
+      <a-drawer v-model:open="infoOpen" class="custom-class" title="记录信息" placement="right">
+        <a-timeline>
+          <a-timeline-item
+            v-for="(item, index) in designerData.nodeLogs"
+            :key="index"
+            :color="item.type"
+          >
+            <div class="title">{{ item.time }}</div>
+            <a-card hoverable size="small">
+              <div class="type-title">{{ item.name }}</div>
+              <div class="content">
+                <span class="link" v-for="(userName, index2) in item.userNames" :key="index2">{{
+                  userName
+                }}</span>
+                {{ item.des }}
+              </div>
+            </a-card>
+          </a-timeline-item>
+        </a-timeline>
+      </a-drawer>
+    </div>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  // /task_audit_preview?processId="950297c6-a543-4c94-b6bb-9d11473c7a03"&taskId="b888bf95-aaf9-4320-8234-ec136cf7ca06"&type=1&isRead=0
+
+  import { ref, reactive, onBeforeMount } from 'vue';
+  import { ProcessViewer } from '@/components/ProcessViewer';
+  import { PageWrapper } from '@/components/Page';
+  import {
+    createAgain,
+    signAudit,
+    audit,
+    ReadFlow,
+    getLoadNextAuditors,
+  } from '@/api/sys/WFProcess';
+  import { getBPMNTask } from '@/api/sys/WFTask';
+  import { dateFormat } from '@/utils/base';
+  import { flowStore } from '@/store/modules/flow';
+  import { functionsaveForm, LoadFormScheme } from '@/api/demo/formScheme';
+  import { FormViewer } from '@/components/FormViewer';
+  import {
+    designerDataType,
+    logsType,
+    taskBtnsType,
+    currentNodeObject,
+    nodeUsersType,
+  } from '../task/process/processModel';
+  import { auditInfo } from '@/views/demo/workflow/task/process/page';
+  import { IFormConfig } from '@/views/demo/form-design/typings/v-form-component';
+  import { useMessage } from '@/hooks/web/useMessage';
+  const { createMessage } = useMessage();
+  const formBoxRef = ref<any>();
+  const keyValue = ref('');
+  const flowWfDataStore = flowStore();
+  const prefixCls = 'preview-box';
+  const flowContent = ref('');
+  const flowViewer = ref({});
+  const formRef = ref();
+  const labelCol = { span: 7 };
+  const wrapperCol = { span: 24 };
+  const infoOpen = ref(true);
+  const formVisble = ref(false);
+  const processVisble = ref(false);
+  import { useRoute, useRouter } from 'vue-router';
+  const router = useRouter();
+  const route = useRoute();
+  const processId = route.query.processId;
+  const taskId:any = route.query.taskId;
+  const type:any = route.query.type;
+  const isRead:any = route.query.isRead;
+  const formData = ref({
+    des: '',
+  });
+  const rules: any = ref({
+    des: [{ required: true, message: '请填写审批意见', trigger: 'blur' }],
+  });
+  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: '',
+    height: document.documentElement.clientHeight - 200.5 + 'px;',
+    midVisible: false,
+    isCustmerTitle: false,
+    nodeUsers: [],
+    selectUsersVisible: false,
+    selectTUserVisible: false,
+    tUserType: 1, // 1 转移 2 加签,
+    isDraft: false,
+    delegateUsers: [],
+    task: {},
+    process: {},
+    logs: [], // 流程日志信息
+    nodeMap: {}, // 需要处理的任务
+    userLogs: [], // 人员日志信息
+    nodeLogs: [],
+    taskBtns: [],
+    currentNode: {},
+    stampList: [],
+    currentBtn: {
+      code: '',
+      name: '',
+      isNextAuditor: false,
+    },
+    wfData: [],
+    isCreateAgain: type == 4 ? true : false,
+    selectRejectNodeVisible: false,
+    selectSignVisible: false,
+    formCurrentNode: {},
+  });
+  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] || [];
+      infoOpen.value = true;
+    } else {
+      designerData.nodeLogs = [];
+    }
+  }
+
+  async function getTaskInfo() {
+    let query: any = {
+      id: taskId,
+    };
+    let data = await getBPMNTask(query);
+    flowContent.value = data.flowContent;
+    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;
+    getFormHistory();
+    if (isRead == 0) {
+      setLogsAndTasks(data.logs, data.tasks);
+      getBtns();
+    }
+  }
+  function setLogsAndTasks(logs: any[], tasks: any[]) {
+    const res: logsType[] = [];
+    const taskMap = {};
+    const nodeMap = {};
+    const userLogs: any[] = [];
+
+    tasks.forEach(
+      (task: {
+        unitId: string | number;
+        unitName: any;
+        createDate: any;
+        type: number;
+        userId: any;
+        userName: any;
+      }) => {
+        nodeMap[task.unitId] = nodeMap[task.unitId] || [
+          {
+            unitId: task.unitId,
+            name: task.unitName,
+            userIds: [],
+            userNames: [],
+            des: '正在审核',
+            time: `当前-创建时间:${dateFormat(task.createDate)}`,
+            type: 'blue',
+            isFinish: false,
+          },
+        ];
+
+        if (task.type == 2) {
+          taskMap[task.unitId + task.type] = taskMap[task.unitId + task.type] || {
+            unitId: task.unitId,
+            name: task.unitName,
+            userIds: [],
+            userNames: [],
+            des: '正在查阅',
+            time: `当前-创建时间:${dateFormat(task.createDate)}`,
+            type: 'blue',
+          };
+          taskMap[task.unitId + task.type].userIds.push(task.userId);
+          taskMap[task.unitId + task.type].userNames.push(task.userName);
+
+          if (nodeMap[task.unitId].length == 1) {
+            nodeMap[task.unitId].push({
+              unitId: task.unitId,
+              name: task.unitName,
+              userIds: [],
+              userNames: [],
+              des: '正在查阅',
+              time: `当前-创建时间:${dateFormat(task.createDate)}`,
+              type: 'blue',
+              isFinish: true,
+            });
+          }
+          nodeMap[task.unitId][1].userIds.push(task.userId);
+          nodeMap[task.unitId][1].userNames.push(task.userName);
+        } else {
+          taskMap[task.unitId] = taskMap[task.unitId] || {
+            unitId: task.unitId,
+            name: task.unitName,
+            userIds: [],
+            userNames: [],
+            des: '正在审核',
+            time: `当前-创建时间:${dateFormat(task.createDate)}`,
+            type: 'blue',
+          };
+          taskMap[task.unitId].userIds.push(task.userId);
+          nodeMap[task.unitId][0].userIds.push(task.userId);
+          taskMap[task.unitId].userNames.push(task.userName);
+          nodeMap[task.unitId][0].userNames.push(task.userName);
+        }
+      },
+    );
+
+    for (let key in taskMap) {
+      res.push(taskMap[key]);
+    }
+
+    for (let key in nodeMap) {
+      nodeMap[key] = nodeMap[key].filter((t: { userIds: string | any[] }) => t.userIds.length > 0);
+    }
+
+    logs.forEach(
+      (log: {
+        unitId: string;
+        unitName: any;
+        userId: string;
+        userName: string;
+        des: string;
+        operationName: string;
+        createDate: any;
+        taskType: number;
+        operationCode: string;
+        stampImg: any;
+      }) => {
+        res.push({
+          unitId: log.unitId,
+          name: log.unitName,
+          userIds: [log.userId],
+          userNames: [log.userName],
+          des: log.des ? log.des : log.operationName,
+          time: dateFormat(log.createDate),
+          type: 'gray',
+        });
+
+        nodeMap[log.unitId] = nodeMap[log.unitId] || [];
+        nodeMap[log.unitId].push({
+          unitId: log.unitId,
+          name: log.unitName,
+          userIds: [log.userId],
+          userNames: [log.userName],
+          time: dateFormat(log.createDate),
+          des: log.des ? log.des : log.operationName,
+          type: 'gray',
+          isFinish: true,
+        });
+
+        if (log.taskType == 1 && !['sign'].includes(log.operationCode)) {
+          // 右侧显示审核记录
+          // 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,
+          });
+          // }
+        }
+      },
+    );
+
+    designerData.logs = res;
+    designerData.nodeMap = nodeMap;
+    designerData.userLogs = userLogs.sort(function (a, b) {
+      return b.time < a.time ? -1 : 1;
+    });
+
+    //console.log(logs,'logs')
+  }
+  async function validateForm() {
+    let res = await formRef.value
+      .validate()
+      .then((values: any) => {
+        return true;
+      })
+      .catch((error: any) => {
+        return false;
+      });
+    return res;
+  }
+  function getBtns() {
+    const wfData = flowWfDataStore.getWfData;
+    designerData.wfData = wfData;
+    const currentNode: currentNodeObject =
+      wfData.find((t: { id: string }) => t.id == designerData.task.unitId) || {};
+    designerData.currentNode = currentNode;
+    // 设置审核按钮
+    const btns: taskBtnsType[] = [];
+    if (currentNode.type == 'bpmn:StartEvent') {
+      btns.push({
+        code: 'learun_create',
+        name: '提交',
+        type: '',
+      });
+    } else {
+      currentNode.btnlist.forEach((btn: taskBtnsType) => {
+        if (btn.code == 'agree') {
+          btn.type = '';
+        } else if (btn.code == 'disagree') {
+          btn.type = 'error';
+        }
+        btns.push(btn);
+      });
+
+      if (currentNode.isAddSign) {
+        btns.push({
+          code: 'learun_sign',
+          name: '加签',
+          type: 'success',
+        });
+      }
+
+      if (currentNode.isTransfer) {
+        btns.push({
+          code: 'learun_transfer',
+          name: '转移',
+          type: 'success',
+        });
+      }
+    }
+    designerData.taskBtns = btns;
+  }
+  async function handleBtnClick(btn) {
+    // 验证审批栏必填项
+    const data = await validateForm();
+    if (!data) {
+      return;
+    }
+    // 有表单先提交表单数据
+    if (formVisble.value) {
+      var querys: {
+        schemeId?: string;
+        isUpdate?: boolean;
+        pkey?: string;
+        pkeyValue?: any;
+        data?: any;
+      } = {
+        schemeId: designerData.formCurrentNode.formVerison,
+        isUpdate: true,
+        pkey: keyValue.value,
+        pkeyValue: processId,
+      };
+      formBoxRef.value
+        .getForm()
+        .then(async (res) => {
+          res[designerData.formCurrentNode.formRelationId] = processId;
+          for (var item in res) {
+            if (res[item] == null) {
+              res[item] = '';
+            }
+          }
+          querys.data = JSON.stringify(res);
+          const formValue = await functionsaveForm(querys);
+          if (formValue) {
+            handleSubmit(btn);
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          activeName.value = 'form';
+          return;
+        });
+    } else {
+      handleSubmit(btn);
+    }
+  }
+  async function handleSubmit(btn) {
+    const currentBtn = btn;
+    designerData.currentBtn = currentBtn;
+    let res: any;
+    switch (btn.code) {
+      case 'learun_create':
+        res = await createAgain({
+          processId: processId,
+          des: `重新提交${formData.value.des ? '-' : ''}${formData.value.des}`,
+        });
+        break;
+      case 'learun_sign':
+        designerData.tUserType = 2;
+        designerData.selectTUserVisible = true;
+        break;
+      case 'learun_transfer':
+        designerData.tUserType = 1;
+        designerData.selectTUserVisible = true;
+        break;
+      default:
+        if (designerData.task.type == 6) {
+          // 加签审核
+          res = await signAudit(taskId, {
+            code: btn.code,
+            name: btn.name,
+            des: formData.value.des,
+          });
+        } else {
+          if (designerData.currentNode.rejectType == '2' && btn.code == 'disagree') {
+            designerData.selectRejectNodeVisible = true;
+            return;
+          }
+
+          if (btn.isSign) {
+            // 加载签章数据
+            // const stampList = await this.$awaitWraper(apiStamp.getList(this.loginInfo.f_UserId));
+            // if (stampList && stampList.length > 0) {
+            //   designerData.stampList = stampList;
+            //   designerData.selectSignVisible = true;
+            //   return;
+            // }
+          }
+          res = await auditFun();
+        }
+        break;
+    }
+    if (res) {
+      closePage();
+      return createMessage.success('成功');
+    } else {
+      return createMessage.error('失败');
+    }
+  }
+  async function auditFun() {
+    // 获取接下来节点审核人
+    if (designerData.currentBtn.isNextAuditor) {
+      const res = await getLoadNextAuditors({
+        processId: processId,
+        nodeId: designerData.currentNode.id,
+      });
+      const nodeUserMap = res.data.data;
+      const nodeUsers: nodeUsersType[] = [];
+      for (let key in nodeUserMap) {
+        const nodeUserItem = nodeUserMap[key];
+        if (nodeUserItem.length > 1) {
+          nodeUsers.push({
+            name: designerData.wfData.find((t) => t.id == key).name,
+            id: key,
+            options: nodeUserItem.map((t: { id: any; name: any }) => {
+              return { value: t.id, label: t.name };
+            }),
+          });
+        }
+      }
+
+      designerData.nodeUsers = nodeUsers;
+
+      if (designerData.nodeUsers.length > 0) {
+        designerData.selectUsersVisible = true;
+        return;
+      }
+    }
+    const data = await audit(taskId, {
+      code: designerData.currentBtn.code,
+      name: designerData.currentBtn.name,
+      des: formData.value.des,
+    });
+    if (data) {
+      closePage();
+      return createMessage.success('成功');
+    } else {
+      return createMessage.error('失败');
+    }
+  }
+  function closePage() {
+    router.go(-1);
+  }
+  async function confimReading() {
+    const data = await ReadFlow(taskId);
+    if (data) {
+      closePage();
+      return createMessage.success('成功');
+    } else {
+      return createMessage.error('失败');
+    }
+  }
+  async function getFormHistory() {
+    const data = await LoadFormScheme({
+      schemeId: designerData.formCurrentNode.formVerison,
+    });
+    if (data) {
+      const scheme = JSON.parse(data.scheme);
+      scheme.formInfo.schemas.forEach((element) => {
+        if (element.field == designerData.formCurrentNode.formRelationId) {
+          keyValue.value = element.componentfieldName;
+        }
+      });
+    }
+  }
+  onBeforeMount(() => {
+    getTaskInfo();
+  });
+</script>
+<style lang="less" scoped>
+  ::v-deep .ant-tabs-nav-wrap {
+    padding-left: 10px;
+  }
+  ::v-deep .ant-layout {
+    height: 100%;
+    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%;
+  }
+  .info-box {
+    display: inline-block;
+    width: 300px;
+    position: absolute;
+    right: 0;
+    margin-top: 40px;
+  }
+
+  .ant-timeline-item-content {
+    .title {
+      color: #909399;
+      line-height: 1;
+      margin-bottom: 8px;
+      font-size: 13px;
+    }
+
+    .type-title {
+      font-size: 12px;
+      font-weight: bold;
+      margin-bottom: 8px;
+    }
+
+    .link {
+      color: #409eff;
+    }
+  }
+
+  .preview-box {
+    height: 100%;
+
+    .btn-box {
+      padding: 10px;
+      justify-content: flex-end;
+      display: flex;
+    }
+  }
+  ::v-deep .vben-page-wrapper-content {
+    height: 100%;
+    // margin: 0 0 0 16px;
+  }
+  .form-box {
+    width: 480px;
+  }
+
+  .approval-column {
+    padding: 10px;
+  }
+  ::v-deep .ant-layout .ant-layout-sider {
+    padding-left: 10px;
+    background-color: @component-background;
+    flex: 0 0 360px !important;
+    max-width: 360px !important;
+    min-width: 360px !important;
+    width: 360px !important;
+  }
+  ::v-deep .vben-page-wrapper .vben-page-wrapper-content {
+    height: 98%;
+  }
+  .l-task-btns {
+    .ant-btn {
+      margin: 0;
+      margin-top: 8px;
+      margin-right: 8px;
+    }
+  }
+</style>

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

@@ -0,0 +1,292 @@
+<template>
+  <PageWrapper :class="prefixCls">
+    <div class="btn-box">
+      <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"
+        >保存草稿
+      </a-button>
+      <a-button
+        type="primary"
+        :icon="h(CloseCircleOutlined)"
+        @click="closePreview"
+        class="ml-2"
+        danger
+        >关闭
+      </a-button>
+    </div>
+    <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" v-if="processVisble" />
+          <div
+            class="form-box"
+            v-if="
+              designerData.isCustmerTitle ||
+              (designerData.delegateUsers && designerData.delegateUsers.length > 0)
+            "
+          >
+            <a-form
+              ref="formRef"
+              :model="formData"
+              :rules="rules"
+              :label-col="labelCol"
+              :wrapper-col="wrapperCol"
+            >
+              <a-form-item
+                ref="title"
+                label="流程标题"
+                name="title"
+                v-if="designerData.isCustmerTitle"
+              >
+                <a-input v-model:value="formData.title" />
+              </a-form-item>
+              <a-form-item
+                label="流程发起人"
+                name="userId"
+                v-if="designerData.delegateUsers && designerData.delegateUsers.length > 0"
+              >
+                <a-select
+                  v-model:value="formData.userId"
+                  placeholder="请选择"
+                  :options="delegateUsers"
+                ></a-select>
+              </a-form-item>
+            </a-form>
+          </div>
+        </div>
+      </a-tab-pane>
+    </a-tabs>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  // http://192.168.10.127:5173/#/dashboard/create_preview/add?code=
+  import { h, ref, reactive, onBeforeMount } from 'vue';
+  import { ProcessViewer } from '@/components/ProcessViewer/index';
+  import { PageWrapper } from '@/components/Page';
+  import { FormViewer } from '@/components/FormViewer';
+  import {
+    SendOutlined,
+    SaveOutlined,
+    CloseCircleOutlined,
+    ZoomInOutlined,
+    RotateLeftOutlined,
+    RotateRightOutlined,
+    ClearOutlined,
+  } from '@ant-design/icons-vue';
+  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 { useUserStore } from '@/store/modules/user';
+  import { buildGUID } from '@/utils/uuid';
+  import { IFormConfig } from '@/views/demo/form-design/typings/v-form-component';
+  import { useMessage } from '@/hooks/web/useMessage';
+  const { createMessage } = useMessage();
+  import {  LoadFormScheme } from '@/api/demo/formScheme';
+  const formBoxRef = ref<any>();
+  const userStore = useUserStore();
+  const userInfo: any = userStore.getUserInfo;
+  const prefixCls = 'preview-box';
+  const flowContent = ref('');
+  const formRef = ref();
+  const labelCol = { span: 7 };
+  const wrapperCol = { span: 13 };
+  const formVisble = ref(false);
+  const processVisble = ref(false);
+  import { useRoute, useRouter } from 'vue-router';
+  const route = useRoute();
+  const code:any = route.query.code;
+  const router = useRouter();
+  const keyValue = ref('');
+  // 表单数据
+  const formConfig = ref<IFormConfig>({
+    // 表单配置
+    schemas: [],
+    layout: 'horizontal',
+    labelLayout: 'flex',
+    labelWidth: 100,
+    labelCol: {},
+    wrapperCol: {},
+    currentItem: {
+      component: '',
+      componentProps: {},
+    },
+    activeKey: 1,
+  });
+  const designerData = reactive({
+    loading: false,
+    xmlString: '',
+    controlForm: {
+      prefix: 'flowable',
+    },
+    height: document.documentElement.clientHeight - 230.5 + 'px;',
+    midVisible: false,
+    isCustmerTitle: false,
+    nodeUsers: [],
+    selectUsersVisible: false,
+
+    isDraft: false,
+    delegateUsers: [],
+    formVerison: '',
+    formCode: '',
+    formCurrentNode: {},
+  });
+  const activeName = ref('form');
+  const formData = reactive({
+    userId: '',
+    title: '',
+  });
+  const rules = reactive({
+    title: [{ required: true, message: '请选择流程标题', trigger: 'blur' }],
+    userId: [{ required: true, message: '请选择流程发起人', trigger: 'blur' }],
+  });
+  function changeActive(activeKey) {
+    if (activeKey == 'flow') {
+      processVisble.value = true;
+    }
+  }
+  async function getDetailInfo() {
+    let data = await getDetail({ code: code });
+    flowContent.value = data.scheme.flowContent;
+    formData.userId = userInfo.id;
+    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 {
+      processVisble.value = true;
+      activeName.value = 'flow';
+    }
+    formConfig.value = currentNode.authFields;
+    designerData.formCurrentNode = currentNode;
+    getFormHistory();
+  }
+  async function getDelegateUsers() {
+    const data = await getLoadMyUserList({
+      code: code,
+    });
+    designerData.delegateUsers = data;
+  }
+  async function handleSaveDraft() {
+    var querys = {
+      schemeCode: designerData.isDraft ? '' : code,
+      userId: formData.userId,
+      title: formData.title,
+      processId: buildGUID(),
+    };
+    const data = await saveDraft(querys);
+    querys.schemeCode = '';
+    designerData.isDraft = true;
+    if (data) {
+      closePreview();
+      return createMessage.success('保存草稿成功');
+    } else {
+      return createMessage.error('保存草稿失败');
+    }
+  }
+  function handleSubmit() {
+    var processId = buildGUID();
+    var querys = {
+      schemeId: designerData.formCurrentNode.formVerison,
+      isUpdate: false,
+      pkey: keyValue.value,
+      pkeyValue: processId,
+    };
+    // 有表单内容，先存表单信息
+    if (formVisble.value) {
+      if (!designerData.formCurrentNode.formRelationId) {
+        return createMessage.error('请设置表单和流程关联字段');
+      }
+      formBoxRef.value
+        .getForm()
+        .then(async (res) => {
+          res[designerData.formCurrentNode.formRelationId] = processId;
+          for (var item in res) {
+            if (res[item] == undefined) {
+              res[item] = '';
+              if (item.search('_input_guid') != -1) {
+                res[item] = buildGUID();
+              }
+            }
+          }
+          querys.data = JSON.stringify(res);
+          const formValue = await functionsaveForm(querys);
+          if (formValue) {
+            handleCreateFlow(processId);
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          activeName.value = 'form';
+          return;
+        });
+    } else {
+      handleCreateFlow(processId);
+    }
+  }
+  async function handleCreateFlow(processId) {
+    var querys = {
+      schemeCode: designerData.isDraft ? '' : code,
+      userId: formData.userId,
+      title: formData.title,
+      processId: processId,
+    };
+    if (!designerData.isDraft) {
+      await saveDraft(querys);
+      querys.schemeCode = '';
+      designerData.isDraft = true;
+    }
+    const data = await create(querys);
+    if (data) {
+      closePreview();
+      return createMessage.success('发起流程成功');
+    } else {
+      return createMessage.error('发起流程失败');
+    }
+  }
+  async function getFormHistory() {
+    const data = await LoadFormScheme({
+      schemeId: designerData.formCurrentNode.formVerison,
+    });
+    if (data) {
+      const scheme = JSON.parse(data.scheme);
+      scheme.formInfo.schemas.forEach((element) => {
+        if (element.field == designerData.formCurrentNode.formRelationId) {
+          keyValue.value = element.componentProps.fieldName;
+        }
+      });
+    }
+  }
+  function closePreview() {
+    router.go(-1);
+  }
+  onBeforeMount(() => {
+    getDetailInfo();
+    getDelegateUsers();
+  });
+</script>
+<style lang="less" scoped>
+  .preview-box {
+    background-color: @component-background;
+
+    .btn-box {
+      padding: 10px;
+      justify-content: flex-end;
+      display: flex;
+    }
+  }
+  ::v-deep .anticon svg {
+    width: 1em !important;
+    height: 1em !important;
+  }
+  .form-box {
+    width: 480px;
+  }
+</style>

src/views/demo/workflow/h5/look.vue

@@ -0,0 +1,430 @@
+<template>
+  <PageWrapper :class="prefixCls">
+    <div class="btn-box">
+      <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" @change="changeActive">
+            <a-tab-pane key="form" tab="表单信息" v-if="formVisble">
+              <FormViewer
+                ref="formBoxRef"
+                :formConfig="formConfig"
+                :processId="designerData.process.id"
+                :formVerison="designerData.formCurrentNode.formVerison"
+                :formRelationId="designerData.formCurrentNode.formRelationId"
+                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"
+                  :xml="flowContent"
+                  :flowViewer="flowViewer"
+                />
+              </div>
+            </a-tab-pane>
+            <a-tab-pane key="record" tab="流转记录" force-render>
+              <a-timeline>
+                <a-timeline-item
+                  v-for="(item, index) in designerData.logs"
+                  :key="index"
+                  :color="item.type"
+                >
+                  <div class="title">{{ item.time }}</div>
+                  <a-card hoverable size="small">
+                    <div class="type-title">{{ item.name }}</div>
+                    <div class="content">
+                      <span
+                        class="link"
+                        v-for="(userName, index2) in item.userNames"
+                        :key="index2"
+                        >{{ userName }}</span
+                      >
+                      {{ item.des }}
+                    </div>
+                  </a-card>
+                </a-timeline-item>
+              </a-timeline>
+            </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>
+      </a-layout>
+    </a-layout>
+
+    <!-- 节点记录信息 -->
+    <div class="info-box" v-if="designerData.nodeLogs.length > 0">
+      <a-drawer v-model:open="infoOpen" class="custom-class" title="记录信息" placement="right">
+        <a-timeline>
+          <a-timeline-item
+            v-for="(item, index) in designerData.nodeLogs"
+            :key="index"
+            :color="item.type"
+          >
+            <div class="title">{{ item.time }}</div>
+            <a-card hoverable size="small">
+              <div class="type-title">{{ item.name }}</div>
+              <div class="content">
+                <span class="link" v-for="(userName, index2) in item.userNames" :key="index2">{{
+                  userName
+                }}</span>
+                {{ item.des }}
+              </div>
+            </a-card>
+          </a-timeline-item>
+        </a-timeline>
+      </a-drawer>
+    </div>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  // /task_look_preview?processId="950297c6-a543-4c94-b6bb-9d11473c7a03"
+  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 { IFormConfig } from '@/views/demo/form-design/typings/v-form-component';
+  import { dateFormat } from '@/utils/base';
+  import { designerDataType, logsType } from '@/views/demo/workflow/task/process/processModel';
+  import { auditInfo } from '@/views/demo/workflow/task/process/page';
+
+  import { useRoute, useRouter } from 'vue-router';
+  const router = useRouter();
+  const route = useRoute();
+  const processId = route.query.processId;
+  const prefixCls = 'preview-box';
+  const flowContent = ref('');
+  const flowViewer = ref({});
+  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: '',
+    height: document.documentElement.clientHeight - 200.5 + 'px;',
+    midVisible: false,
+    isCustmerTitle: false,
+    nodeUsers: [],
+    selectUsersVisible: false,
+    selectTUserVisible: false,
+    tUserType: 1, // 1 转移 2 加签,
+    isDraft: false,
+    delegateUsers: [],
+    task: {},
+    process: {},
+    logs: [], // 流程日志信息
+    nodeMap: {}, // 需要处理的任务
+    userLogs: [], // 人员日志信息
+    nodeLogs: [],
+    taskBtns: [],
+    currentNode: {},
+    stampList: [],
+    currentBtn: {
+      code: '',
+      name: '',
+      isNextAuditor: false,
+    },
+    wfData: [],
+    selectRejectNodeVisible: false,
+    selectSignVisible: false,
+    formCurrentNode: {},
+  });
+  const activeName = ref('form');
+  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] || [];
+      infoOpen.value = true;
+    } else {
+      designerData.nodeLogs = [];
+    }
+  }
+  async function getDetailInfo() {
+    let query: any = {
+      id: processId,
+    };
+    let data = await getBPMN(query);
+    flowContent.value = data.flowContent;
+    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();
+  }
+
+  function setLogsAndTasks(logs: any[], tasks: any[]) {
+    const res: logsType[] = [];
+    const taskMap = {};
+    const nodeMap = {};
+    const userLogs: any[] = [];
+
+    tasks.forEach(
+      (task: {
+        unitId: string | number;
+        unitName: any;
+        createDate: any;
+        type: number;
+        userId: any;
+        userName: any;
+      }) => {
+        nodeMap[task.unitId] = nodeMap[task.unitId] || [
+          {
+            unitId: task.unitId,
+            name: task.unitName,
+            userIds: [],
+            userNames: [],
+            des: '正在审核',
+            time: `当前-创建时间:${dateFormat(task.createDate)}`,
+            type: 'blue',
+            isFinish: false,
+          },
+        ];
+
+        if (task.type == 2) {
+          taskMap[task.unitId + task.type] = taskMap[task.unitId + task.type] || {
+            unitId: task.unitId,
+            name: task.unitName,
+            userIds: [],
+            userNames: [],
+            des: '正在查阅',
+            time: `当前-创建时间:${dateFormat(task.createDate)}`,
+            type: 'blue',
+          };
+          taskMap[task.unitId + task.type].userIds.push(task.userId);
+          taskMap[task.unitId + task.type].userNames.push(task.userName);
+
+          if (nodeMap[task.unitId].length == 1) {
+            nodeMap[task.unitId].push({
+              unitId: task.unitId,
+              name: task.unitName,
+              userIds: [],
+              userNames: [],
+              des: '正在查阅',
+              time: `当前-创建时间:${dateFormat(task.createDate)}`,
+              type: 'blue',
+              isFinish: true,
+            });
+          }
+          nodeMap[task.unitId][1].userIds.push(task.userId);
+          nodeMap[task.unitId][1].userNames.push(task.userName);
+        } else {
+          taskMap[task.unitId] = taskMap[task.unitId] || {
+            unitId: task.unitId,
+            name: task.unitName,
+            userIds: [],
+            userNames: [],
+            des: '正在审核',
+            time: `当前-创建时间:${dateFormat(task.createDate)}`,
+            type: 'blue',
+          };
+          taskMap[task.unitId].userIds.push(task.userId);
+          nodeMap[task.unitId][0].userIds.push(task.userId);
+          taskMap[task.unitId].userNames.push(task.userName);
+          nodeMap[task.unitId][0].userNames.push(task.userName);
+        }
+      },
+    );
+
+    for (let key in taskMap) {
+      res.push(taskMap[key]);
+    }
+
+    for (let key in nodeMap) {
+      nodeMap[key] = nodeMap[key].filter((t: { userIds: string | any[] }) => t.userIds.length > 0);
+    }
+
+    logs.forEach(
+      (log: {
+        unitId: string;
+        unitName: any;
+        userId: string;
+        userName: string;
+        des: string;
+        operationName: string;
+        createDate: any;
+        taskType: number;
+        operationCode: string;
+        stampImg: any;
+      }) => {
+        res.push({
+          unitId: log.unitId,
+          name: log.unitName,
+          userIds: [log.userId],
+          userNames: [log.userName],
+          des: log.des ? log.des : log.operationName,
+          time: dateFormat(log.createDate),
+          type: 'gray',
+        });
+
+        nodeMap[log.unitId] = nodeMap[log.unitId] || [];
+        nodeMap[log.unitId].push({
+          unitId: log.unitId,
+          name: log.unitName,
+          userIds: [log.userId],
+          userNames: [log.userName],
+          time: dateFormat(log.createDate),
+          des: log.des ? log.des : log.operationName,
+          type: 'gray',
+          isFinish: true,
+        });
+        if (log.taskType == 1 && !['sign'].includes(log.operationCode)) {
+          // 右侧显示审核记录
+          // 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,
+          });
+          // }
+        }
+      },
+    );
+
+    designerData.logs = res;
+    designerData.nodeMap = nodeMap;
+    designerData.userLogs = userLogs.sort(function (a, b) {
+      return a.time < b.time ? -1 : 1;
+    });
+  }
+  function closePage() {
+    router.go(-1);
+  }
+
+  onBeforeMount(() => {
+    getDetailInfo();
+  });
+</script>
+<style lang="less" scoped>
+  ::v-deep .ant-tabs-nav-wrap {
+    padding-left: 10px;
+  }
+  ::v-deep .ant-layout {
+    height: 100%;
+    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%;
+  }
+  .info-box {
+    display: inline-block;
+    width: 300px;
+    position: absolute;
+    right: 0;
+    margin-top: 40px;
+  }
+
+  .ant-timeline-item-content {
+    .title {
+      color: #909399;
+      line-height: 1;
+      margin-bottom: 8px;
+      font-size: 13px;
+    }
+
+    .type-title {
+      font-size: 12px;
+      font-weight: bold;
+      margin-bottom: 8px;
+    }
+
+    .link {
+      color: #409eff;
+    }
+  }
+
+  .preview-box {
+    height: 100%;
+
+    .btn-box {
+      padding: 10px;
+      justify-content: flex-end;
+      display: flex;
+    }
+  }
+  ::v-deep .vben-page-wrapper-content {
+    height: 100%;
+    margin: 0 0 0 16px;
+  }
+  .form-box {
+    width: 480px;
+  }
+
+  .approval-column {
+    padding: 10px;
+  }
+  ::v-deep .ant-layout .ant-layout-sider {
+    padding-left: 10px;
+    background-color: @component-background;
+    flex: 0 0 360px !important;
+    max-width: 360px !important;
+    min-width: 360px !important;
+    width: 360px !important;
+  }
+  ::v-deep .vben-page-wrapper .vben-page-wrapper-content {
+    height: 98%;
+  }
+  .l-task-btns {
+    .ant-btn {
+      margin: 0;
+      margin-top: 8px;
+      margin-right: 8px;
+    }
+  }
+</style>

src/views/demo/workflow/h5/scheme.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="preview-box">
+    <div class="btn-box">
+      <a-button type="primary" :icon="h(SaveOutlined)" @click="onSave(2)" class="ml-2"
+        >暂存
+      </a-button>
+      <a-button type="primary" :icon="h(SaveOutlined)" @click="onSave(1)" class="ml-2"
+        >保存
+      </a-button>
+      <a-button
+        type="primary"
+        :icon="h(CloseCircleOutlined)"
+        @click="closePreview"
+        class="ml-2"
+        danger
+        >关闭
+      </a-button>
+    </div>
+    <process-designer
+      :key="designerOpen"
+      style="border: 1px solid rgba(0, 0, 0, 0.1)"
+      ref="modelDesigner"
+      v-loading="designerData.loading"
+      :schemeCode="code"
+      @save="onSaveDesigner"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  // scheme_preview?code=tset0411
+  import { h, ref, reactive } from 'vue';
+  import {ProcessDesigner} from '@/components/ProcessDesigner/page';
+  import {
+    SaveOutlined,
+    CloseCircleOutlined,
+  } from '@ant-design/icons-vue';
+  import { postAdd, update } from '@/api/sys/WFSchemeInfo';
+  import { useMessage } from '@/hooks/web/useMessage';
+  const { createMessage } = useMessage();
+ import { useRoute ,useRouter} from 'vue-router';
+ const router = useRouter();
+  const route = useRoute();
+  const code = route.query.code;
+
+  const designerOpen = ref(false);
+  const designerData = reactive({
+    loading: false,
+  });
+  const modelDesigner = ref<any>();
+  async function onSave(type) {
+    let validateData = await modelDesigner.value.validateFlow();
+    if (validateData) {
+      let formData = await modelDesigner.value.getFlow();
+      console.log(formData);
+      // 1正式 2草稿
+      formData.scheme.type = Number(type);
+      if (!code) {
+        let data = await postAdd(formData);
+        if (data) {
+          closePreview();
+          return createMessage.success('新增成功');
+        } else {
+          return createMessage.error('新增失败');
+        }
+      } else {
+        let data = await update(formData);
+        if (data) {
+          closePreview();
+          return createMessage.success('编辑成功');
+        } else {
+          return createMessage.error('编辑失败');
+        }
+      }
+    }
+  }
+  function closePreview() {
+    router.go(-1)
+  }
+</script>
+<style scoped>
+  .preview-box {
+    .btn-box {
+      padding: 10px;
+      justify-content: flex-end;
+      display: flex;
+    }
+  }
+</style>

src/views/demo/workflow/scheme/HistoryDrawer.vue

@@ -17,8 +17,8 @@
       </BasicTable>
     </BasicDrawer>
     <a-modal wrap-class-name="full-modal" width="70%" v-model:open="postOpen" title="流程模板预览">
-      <process-designer
+      <process-designer-page
-        style="border: 1px solid rgba(0, 0, 0, 0.1);height:100%;"
+        style="border: 1px solid rgba(0, 0, 0, 0.1); height: 100%"
         ref="modelDesigner"
         v-loading="designerData.loading"
         :pageFlow="flowContent"
@@ -36,7 +36,7 @@
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { Tag, Switch } from 'ant-design-vue';
   import { useMessage } from '@/hooks/web/useMessage';
-  import  ProcessDesigner  from '@/components/ProcessDesigner/index.vue';
+  import { ProcessDesignerPage } from '@/components/ProcessDesigner/page';
 
   defineOptions({ name: 'HistoryDrawer' });
 

src/views/demo/workflow/scheme/SchemeTree.vue

@@ -43,7 +43,7 @@
   const [register] = useModal();
   defineOptions({ name: 'DeptTree' });
 
-  const emit = defineEmits(['select', 'edit', 'success']);
+  const emit = defineEmits(['select', 'edit', 'success','add']);
 
   const treeData = ref<TreeItem[]>([]);
   let selectItemId = ref('');

src/views/demo/workflow/scheme/page.ts

@@ -2,4 +2,5 @@
 export { default as HistoryDrawer } from './HistoryDrawer.vue';
 export { default as SchemeDrawer } from './SchemeDrawer.vue';
 export { default as SchemeTree } from './SchemeTree.vue';
+export { default as Preview } from './preview.vue';
 

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

@@ -16,7 +16,7 @@
         >关闭
       </a-button>
     </div>
-    <process-designer
+    <process-designer-page
       :key="designerOpen"
       style="border: 1px solid rgba(0, 0, 0, 0.1)"
       ref="modelDesigner"
@@ -29,15 +29,8 @@
 
 <script lang="ts" setup>
   import { h, ref, reactive } from 'vue';
-  import ProcessDesigner from '@/components/ProcessDesigner/index.vue';
+  import { ProcessDesignerPage } from '@/components/ProcessDesigner/page';
-  import {
+  import { SaveOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
-    SaveOutlined,
-    CloseCircleOutlined,
-    ZoomInOutlined,
-    RotateLeftOutlined,
-    RotateRightOutlined,
-    ClearOutlined,
-  } from '@ant-design/icons-vue';
   import { postAdd, update } from '@/api/sys/WFSchemeInfo';
   import { useMessage } from '@/hooks/web/useMessage';
   const { createMessage } = useMessage();
@@ -56,7 +49,6 @@
     let validateData = await modelDesigner.value.validateFlow();
     if (validateData) {
       let formData = await modelDesigner.value.getFlow();
-      console.log(formData);
       // 1正式 2草稿
       formData.scheme.type = Number(type);
       if (!props.code) {

src/views/demo/workflow/task/completedTask.vue

@@ -31,31 +31,28 @@
       title="详情"
       :destroyOnClose="true"
     >
-    <template #footer>
+      <template #footer> </template>
-      </template>
       <Look ref="posRef" :processId="processId"></Look>
     </a-modal>
   </PageWrapper>
 </template>
 
 <script lang="ts" setup>
-  import { reactive, h ,ref} from 'vue';
+  import { reactive, h, ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { PageWrapper } from '@/components/Page';
   import { getLoadMyCompletedPage } from '@/api/sys/WFTask';
   import { revokeAudit } from '@/api/sys/WFProcess';
   import { Tag } from 'ant-design-vue';
-  import Look from "./process/look.vue"
+  import { Look } from './process/page';
-  import { useGo } from '@/hooks/web/usePage';
-  const go = useGo();
   import { useMessage } from '@/hooks/web/useMessage';
   const { createMessage } = useMessage();
-  import { getDetail } from '@/api/sys/WFSchemeInfo'
+  import { getDetail } from '@/api/sys/WFSchemeInfo';
   import { flowStore } from '@/store/modules/flow';
   const flowWfDataStore = flowStore();
   const searchInfo = reactive<Recordable>({});
-    const auditOpen = ref(false)
+  const auditOpen = ref(false);
-  const processId = ref('')
+  const processId = ref('');
   const [registerTable, { reload }] = useTable({
     api: getLoadMyCompletedPage,
     columns: [
@@ -136,12 +133,12 @@
     let scheme = JSON.parse(data.scheme.content);
     let wfData = scheme.wfData;
     flowWfDataStore.setWfDataAll(wfData);
-    processId.value = record.processId
+    processId.value = record.processId;
-    auditOpen.value=true
+    auditOpen.value = true;
     // go('/dashboard/task_look_preview/detail?processId=' + record.processId);
   }
   async function handleRevocation(record) {
-    if(record.isFinished == 1){
+    if (record.isFinished == 1) {
       return createMessage.warning('结束的流程不能撤销。');
     }
     const data = await revokeAudit({
@@ -160,7 +157,7 @@
   .full-modal {
     .ant-modal {
       max-width: 100%;
-            top:0;
+      top: 0;
     }
 
     .ant-modal-content {

src/views/demo/workflow/task/delegateTask.vue

@@ -3,16 +3,18 @@
     <BasicTable @register="registerTable" @fetch-success="onFetchSuccess" :searchInfo="searchInfo">
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
-                  <TableAction :actions="[
+          <TableAction
+            :actions="[
               {
-                        label:'详情',
+                label: '详情',
                 onClick: handleDetail.bind(null, record),
               },
               {
-                        label:'撤销',
+                label: '撤销',
                 onClick: handleRevocation.bind(null, record),
-                      }
+              },
-                    ]" />
+            ]"
+          />
         </template>
       </template>
     </BasicTable>
@@ -23,26 +25,23 @@
       title="详情"
       :destroyOnClose="true"
     >
-    <template #footer>
+      <template #footer> </template>
-      </template>
       <Look ref="posRef" :processId="processId"></Look>
     </a-modal>
   </PageWrapper>
 </template>
 
 <script lang="ts" setup>
-    import { reactive ,h,ref} from 'vue'
+  import { reactive, h, ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { PageWrapper } from '@/components/Page';
-    import { getLoadMyDelegatePage } from '@/api/sys/WFTask'
+  import { getLoadMyDelegatePage } from '@/api/sys/WFTask';
   import { Tag } from 'ant-design-vue';
-  import Look from "./process/look.vue"
+  import { Look } from './process/page';
-    import { useGo } from '@/hooks/web/usePage';
+  const auditOpen = ref(false);
-    const go = useGo();
+  const processId = ref('');
-    const auditOpen = ref(false)
+  const searchInfo = reactive<Recordable>({});
-  const processId = ref('')
+  const [registerTable] = useTable({
-    const searchInfo = reactive < Recordable > ({});
-    const [registerTable, { reload}] = useTable({
     api: getLoadMyDelegatePage,
     columns: [
       {
@@ -67,8 +66,6 @@
             const text = '正常';
             return h(Tag, { color: color }, () => text);
           }
-
-
         },
       },
       {
@@ -79,7 +76,6 @@
         title: '创建时间',
         dataIndex: 'createDate',
       },
-
     ],
     rowKey: 'id',
     formConfig: {
@@ -116,24 +112,21 @@
       // slots: { customRender: 'action' },
     },
   });
-    function handleDetail(record){
+  function handleDetail(record) {
-        processId.value = record.id
+    processId.value = record.id;
-    auditOpen.value=true
+    auditOpen.value = true;
     // go('/dashboard/task_look_preview/detail?processId=' + record.id);
   }
-    function handleRevocation(record){
+  function handleRevocation(record) {
-        console.log(record)
+    console.log(record);
     // reload()
   }
-    
-
-
 </script>
 <style lang="less">
   .full-modal {
     .ant-modal {
       max-width: 100%;
-            top:0;
+      top: 0;
     }
 
     .ant-modal-content {

src/views/demo/workflow/task/myDraft.vue

@@ -47,9 +47,7 @@
   import { PageWrapper } from '@/components/Page';
   import { getLoadMyDraftPage, deleteDraft } from '@/api/sys/WFProcess';
   const searchInfo = reactive<Recordable>({});
-  import { useGo } from '@/hooks/web/usePage';
+  import { Initiate } from './process/page';
-  import Initiate from './process/initiate.vue';
-  const go = useGo();
   import { useMessage } from '@/hooks/web/useMessage';
   const { createMessage } = useMessage();
   const auditOpen = ref(false);
@@ -126,9 +124,9 @@
     auditOpen.value = true;
     // go('/dashboard/task_look_preview/detail?processId=' + record.id);
   }
-  function closeModel(){
+  function closeModel() {
-    auditOpen.value = false
+    auditOpen.value = false;
-    reload()
+    reload();
   }
 </script>
 <style lang="less">

src/views/demo/workflow/task/myTask.vue

@@ -39,27 +39,24 @@
       title="详情"
       :destroyOnClose="true"
     >
-    <template #footer>
+      <template #footer> </template>
-      </template>
       <Look ref="posRef" :processId="processId"></Look>
     </a-modal>
   </PageWrapper>
 </template>
 
 <script lang="ts" setup>
-  import { reactive, h ,ref} from 'vue';
+  import { reactive, h, ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { PageWrapper } from '@/components/Page';
   import { getLoadMyPage, urge, revoke, revokeAudit } from '@/api/sys/WFProcess';
   import { Tag } from 'ant-design-vue';
   import { useMessage } from '@/hooks/web/useMessage';
-  import Look from "./process/look.vue"
+  import { Look } from './process/page';
   const { createMessage } = useMessage();
   const searchInfo = reactive<Recordable>({});
-  import { useGo } from '@/hooks/web/usePage';
+  const auditOpen = ref(false);
-  const go = useGo();
+  const processId = ref('');
-  const auditOpen = ref(false)
-  const processId = ref('')
   const [registerTable, { reload }] = useTable({
     api: getLoadMyPage,
     columns: [
@@ -136,8 +133,8 @@
     },
   });
   function handleDetail(record) {
-    processId.value = record.id
+    processId.value = record.id;
-    auditOpen.value=true
+    auditOpen.value = true;
     // go('/dashboard/task_look_preview/detail?processId=' + record.id);
   }
   async function handleUrge(record) {
@@ -187,7 +184,7 @@
   .full-modal {
     .ant-modal {
       max-width: 100%;
-            top:0;
+      top: 0;
     }
 
     .ant-modal-content {

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

@@ -130,7 +130,6 @@
   import { PageWrapper } from '@/components/Page';
   import { createAgain, signAudit, audit, ReadFlow } from '@/api/sys/WFProcess';
   import { getBPMNTask } from '@/api/sys/WFTask';
-  import { useRoute } from 'vue-router';
   import { dateFormat } from '@/utils/base';
   import { flowStore } from '@/store/modules/flow';
   import { functionsaveForm, LoadFormScheme } from '@/api/demo/formScheme';
@@ -403,7 +402,6 @@
       return b.time < a.time ? -1 : 1;
     });
 
-    //console.log(logs,'logs')
   }
   async function validateForm() {
     let res = await formRef.value

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

@@ -87,7 +87,7 @@
   import { dateFormat } from '@/utils/base';
   import { designerDataType, logsType } from './processModel';
   import { create } from '@/api/sys/WFProcess';
-  import auditInfo from './auditInfo.vue';
+  import { auditInfo } from './page';
   import { useMessage } from '@/hooks/web/useMessage';
   const emit = defineEmits(['closeModel']);
   const { createMessage } = useMessage();
@@ -382,7 +382,7 @@
     }
   }
   function closePreview() {
-    emit('closeModel')
+    emit('closeModel');
   }
   // function closePage() {
   //   tabStore.closeTabByKey('/dashboard/task_look_preview/detail?processId=' + processId, router);

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

@@ -37,7 +37,11 @@
             </a-tab-pane>
             <a-tab-pane key="record" tab="流转记录" force-render>
               <a-timeline>
-                <a-timeline-item v-for="(item, index) in designerData.logs" :key="index" :color="item.type">
+                <a-timeline-item
+                  v-for="(item, index) in designerData.logs"
+                  :key="index"
+                  :color="item.type"
+                >
                   <div class="title">{{ item.time }}</div>
                   <a-card hoverable size="small">
                     <div class="type-title">{{ item.name }}</div>
@@ -72,7 +76,11 @@
     <div class="info-box" v-if="designerData.nodeLogs.length > 0">
       <a-drawer v-model:open="infoOpen" class="custom-class" title="记录信息" placement="right">
         <a-timeline>
-          <a-timeline-item v-for="(item, index) in designerData.nodeLogs" :key="index" :color="item.type">
+          <a-timeline-item
+            v-for="(item, index) in designerData.nodeLogs"
+            :key="index"
+            :color="item.type"
+          >
             <div class="title">{{ item.time }}</div>
             <a-card hoverable size="small">
               <div class="type-title">{{ item.name }}</div>
@@ -91,7 +99,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onBeforeMount ,watch} from 'vue';
+  import { ref, reactive, onBeforeMount } from 'vue';
   import { FormViewer } from '@/components/FormViewer';
   import { ProcessViewer } from '@/components/ProcessViewer';
   import { PageWrapper } from '@/components/Page';
@@ -99,7 +107,7 @@
   import { IFormConfig } from '@/views/demo/form-design/typings/v-form-component';
   import { dateFormat } from '@/utils/base';
   import { designerDataType, logsType } from './processModel';
-  import auditInfo from './auditInfo.vue';
+  import { auditInfo } from './page';
   const props = defineProps({
     processId: String,
   });

src/views/demo/workflow/task/process/page.ts

@@ -0,0 +1,5 @@
+export { default as auditInfo } from './auditInfo.vue';
+export { default as Look } from './look.vue';
+export { default as Audit } from './audit.vue';
+export { default as Initiate } from './initiate.vue';
+

src/views/demo/workflow/task/process/processModel.ts

@@ -51,7 +51,7 @@ export interface designerDataType {
     isNextAuditor:boolean
   },
   wfData: currentNodeObject[],
-  isCreateAgain: Boolean,
+  isCreateAgain?: Boolean,
   selectRejectNodeVisible:Boolean,
   selectSignVisible:Boolean,
   formCurrentNode:any

src/views/demo/workflow/task/readTask.vue

@@ -10,7 +10,7 @@
           <TableAction
             :actions="[
               {
-                label: '详情',
+                label: '阅读',
                 onClick: handleDetail.bind(null, record),
               },
             ]"
@@ -18,19 +18,40 @@
         </template>
       </template>
     </BasicTable>
+    <a-modal
+      width="100%"
+      wrap-class-name="full-modal"
+      v-model:open="auditOpen"
+      title="阅读"
+      :destroyOnClose="true"
+    >
+      <template #footer> </template>
+      <Audit
+        ref="posRef"
+        :processId="processId"
+        :taskId="taskId"
+        :isRead="isRead"
+        :type="type"
+        @closeModel="closeMolder"
+      ></Audit>
+    </a-modal>
   </PageWrapper>
 </template>
 
 <script lang="ts" setup>
-  import { reactive, h } from 'vue';
+  import { reactive, h, ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { PageWrapper } from '@/components/Page';
   import { getLoadMyReadPage } from '@/api/sys/WFTask';
   import { Tag } from 'ant-design-vue';
+  import { Audit } from './process/page';
   const searchInfo = reactive<Recordable>({});
-  import { useGo } from '@/hooks/web/usePage';
+  const processId = ref('');
-  const go = useGo();
+  const taskId = ref('');
-  const [registerTable] = useTable({
+  const isRead: any = ref(0);
+  const type = ref('');
+  const auditOpen = ref(false);
+  const [registerTable, { reload }] = useTable({
     api: getLoadMyReadPage,
     columns: [
       {
@@ -102,12 +123,37 @@
     },
   });
   function handleDetail(record) {
-    let isRead
+    let isread;
-    if(record.state == 1){
+    if (record.state == 1) {
-      isRead = 1
+      isread = 1;
-    }else{
+    } else {
-      isRead = 0
+      isread = 0;
     }
-    go('/dashboard/task_audit_preview/detail?processId=' + record.processId+"&taskId="+record.id+"&type="+record.type+"&isRead="+isRead);
+    auditOpen.value = true;
+    processId.value = record.processId;
+    taskId.value = record.id;
+    type.value = record.type;
+    isRead.value = isread;
+    // go('/dashboard/task_audit_preview/detail?processId=' + record.processId+"&taskId="+record.id+"&type="+record.type+"&isRead="+isRead);
+  }
+  function closeMolder() {
+    auditOpen.value = false;
+    reload();
   }
 </script>
+<style lang="less">
+  .full-modal {
+    .ant-modal {
+      max-width: 100%;
+      top: 0;
+    }
+
+    .ant-modal-content {
+      height: calc(100vh);
+    }
+
+    .ant-modal-body {
+      height: 85%;
+    }
+  }
+</style>

src/views/demo/workflow/task/uncompletedTask.vue

@@ -45,15 +45,13 @@
   import { getLoadMyUncompletedPage } from '@/api/sys/WFTask';
   import { getDetail } from '@/api/sys/WFSchemeInfo';
   import { Tag } from 'ant-design-vue';
-  import Audit from "./process/audit.vue"
+  import { Audit } from "./process/page"
   import { flowStore } from '@/store/modules/flow';
   const flowWfDataStore = flowStore();
   const searchInfo = reactive<Recordable>({});
-  import { useGo } from '@/hooks/web/usePage';
-  const go = useGo();
   const processId = ref('');
   const taskId = ref('');
-  const isRead = ref(0);
+  const isRead:any = ref(0);
   const type = ref('');
   const auditOpen = ref(false);
   const [registerTable,{reload}] = useTable({