代码规范化

Merge branch 'ly' into dev
树组件优化，代码规范
2024-04-17 17:07:21 +08:00 · 2024-04-15 17:04:15 +08:00 · 2024-04-15 17:03:03 +08:00 · 2024-04-13 17:03:45 +08:00 · 2024-04-13 16:54:58 +08:00 · 2024-04-12 16:10:06 +08:00
41 changed files with 2127 additions and 455 deletions
--- a/src/api/formdesign/index.ts
+++ b/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 });
-
--- a/src/api/formdesign/model/index.ts
+++ b/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;
--- a/src/api/sys/WFProcess.ts
+++ b/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,
--- a/src/api/sys/model/WFProcessModel.ts
+++ b/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,
--- a/src/components/Form/src/hooks/useFormValues.ts
+++ b/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);
--- a/src/components/ProcessDesigner/page.ts
+++ b/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';

--- a/src/components/Tree/src/BasicTree.vue
+++ b/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,
@ -380,7 +380,7 @@
            key: keyField,
            children: childrenField,
          } = unref(getFieldNames);
-          
+
          const icon = getIcon(item, item.icon);
          const title = get(item, titleField);

@ -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>
--- a/src/components/Tree/src/components/TreeHeader.vue
+++ b/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>
--- a/src/router/routes/index.ts
+++ b/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
 ];
--- a/src/router/routes/modules/dashboard.ts
+++ b/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'),
    },
  ],
 };
--- a/src/views/demo/onlineform/formCall/index.vue
+++ b/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) {
--- a/src/views/demo/onlineform/formModule/config/layout.vue
+++ b/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: '左侧树形+普通列表',
          },
--- a/src/views/demo/onlineform/formModule/config/query.vue
+++ b/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>
--- a/src/views/demo/onlineform/formScheme/index.vue
+++ b/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) {
--- a/src/views/demo/onlineform/formdesign/FormModal.vue
+++ b/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
-          >
+          <a-button @click="stageClick" type="success">暂存</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) {
-    console.log('emitttt', data);
-    stepsCurrent.value = 1;
+  function formDataBack(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;
-      saveFormDatas.value.info.type = 1;
+      if (isStageClick.value) {
+        saveFormDatas.value.info.type = 2;
+        saveFormDatas.value.scheme.type = 2;
+        editCreateUserName = loginUser || '';
+      } else {
+        saveFormDatas.value.info.type = 1;
+        saveFormDatas.value.scheme.type = 1;
+      }
      saveFormDatas.value.scheme.scheme = JSON.stringify(schems);
-      saveFormDatas.value.scheme.type = 1;
    } 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);
-        closeModalClick();
+        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) => {
-        closeModalClick();
+        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;
      }
    }
--- a/src/views/demo/onlineform/formdesign/form/DataObject.vue
+++ b/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();
--- a/src/views/demo/onlineform/formdesign/form/index.vue
+++ b/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,89 +259,8 @@
  watch(
    () => props.isNextSteps,
    (newValue) => {
-      console.log('steeeeeeps');
      if (newValue) {
-        validate();
-        let formArr = getFieldsValue();
-
-        if (!formArr.name || !formArr.category || !formArr.DbCode) {
-          emit('formDataNoBack');
-          return false;
-        }
-
-        if (formArr.formType == 1) {
-          let tableArr = getDataSourceViews();
-          let obj = {
-            form: formArr,
-            table: tableArr,
-          };
-          let tabArr: any = [];
-          if (tableArr && tableArr.length > 0) {
-            tableArr.forEach((item) => {
-              if (item.type != 'main') {
-                tabArr.push(item.field);
-              }
-            });
-          } else {
-            emit('formDataNoBack');
-            message.error('请添加视图语句', 2);
-            return;
-          }
-
-          if (tabArr.includes(undefined)) {
-            emit('formDataNoBack');
-            message.error('请完善数据库表信息', 2);
-          } else {
-            emit('formDataBack', obj);
-          }
-        } else {
-          let tableArr = getDataSourceMain();
-          let connectTab = getDataSourceConnect();
-          let obj = {
-            form: formArr,
-            table: tableArr,
-            connect: connectTab,
-          };
-          let tabArr: any = [];
-          let connectArr: any = [];
-          if (connectTab && connectTab.length > 0) {
-            connectTab.forEach((item) => {
-              if (item.type != 'main') {
-                connectArr.push(
-                  item.fname,
-                  item.cfield,
-                  item.field,
-                  item.relationName,
-                  item.relationField,
-                );
-              }
-            });
-          }
-
-          if (tableArr && tableArr.length > 0) {
-            tableArr.forEach((item) => {
-              if (item.type != 'main') {
-                tabArr.push(item.field, item.relationField, item.relationName);
-              }
-            });
-          } else {
-            emit('formDataNoBack');
-            message.error('请添加数据库表', 2);
-            return;
-          }
-
-          if (tabArr.includes(undefined)) {
-            emit('formDataNoBack');
-            message.error('请完善数据库表信息', 2);
-          } else {
-            if (connectArr.includes(undefined)) {
-              emit('formDataNoBack');
-              message.error('请完善数据库关联表信息', 2);
-            } else {
-              emit('formDataBack', obj);
-            }
-          }
-        }
+        isNextStepsAndStageClick();
      }
    },
    { immediate: true, deep: true },
@ -356,6 +276,98 @@
    },
    { immediate: true, deep: true },
  );
+  watch(
+    () => props.isStageClick,
+    (newValue) => {
+      if (newValue) {
+        isNextStepsAndStageClick();
+      }
+    },
+  );
+
+  function isNextStepsAndStageClick() {
+    validate();
+    let formArr = getFieldsValue();
+
+    if (!formArr.name || !formArr.category || !formArr.DbCode) {
+      emit('formDataNoBack');
+      return false;
+    }
+
+    if (formArr.formType == 1) {
+      let tableArr = getDataSourceViews();
+      let obj = {
+        form: formArr,
+        table: tableArr,
+      };
+      let tabArr: any = [];
+      if (tableArr && tableArr.length > 0) {
+        tableArr.forEach((item) => {
+          if (item.type != 'main') {
+            tabArr.push(item.field);
+          }
+        });
+      } else {
+        emit('formDataNoBack');
+        message.error('请添加视图语句', 2);
+        return;
+      }
+
+      if (tabArr.includes(undefined)) {
+        emit('formDataNoBack');
+        message.error('请完善数据库表信息', 2);
+      } else {
+        emit('formDataBack', obj);
+      }
+    } else {
+      let tableArr = getDataSourceMain();
+      let connectTab = getDataSourceConnect();
+      let obj = {
+        form: formArr,
+        table: tableArr,
+        connect: connectTab,
+      };
+      let tabArr: any = [];
+      let connectArr: any = [];
+      if (connectTab && connectTab.length > 0) {
+        connectTab.forEach((item) => {
+          if (item.type != 'main') {
+            connectArr.push(
+              item.fname,
+              item.cfield,
+              item.field,
+              item.relationName,
+              item.relationField,
+            );
+          }
+        });
+      }
+
+      if (tableArr && tableArr.length > 0) {
+        tableArr.forEach((item) => {
+          if (item.type != 'main') {
+            tabArr.push(item.field, item.relationField, item.relationName);
+          }
+        });
+      } else {
+        emit('formDataNoBack');
+        message.error('请添加数据库表', 2);
+        return;
+      }
+
+      if (tabArr.includes(undefined)) {
+        emit('formDataNoBack');
+        message.error('请完善数据库表信息', 2);
+      } else {
+        if (connectArr.includes(undefined)) {
+          emit('formDataNoBack');
+          message.error('请完善数据库关联表信息', 2);
+        } else {
+          emit('formDataBack', obj);
+        }
+      }
+    }
+  }

  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;
--- a/src/views/demo/onlineform/formdesign/form/sqlModal.vue
+++ b/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({});
  });

--- a/src/views/demo/system/account/AccountModal.vue
+++ b/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){
-        values.password = md5(values.password)
+      if (values.password) {
+        values.password = md5(values.password);
      }
      const data = await addAccount(values);
-      console.log(data)
+      console.log(data);
      if (data) {
        // TODO custom api
        closeModal();
--- a/src/views/demo/workflow/create/index.ts
+++ b/src/views/demo/workflow/create/index.ts
@ -0,0 +1 @@
+export { default as Preview } from './preview.vue';
--- a/src/views/demo/workflow/create/index.vue
+++ b/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>
-        <Row :gutter="16">
+      <a-list>
+        <a-row :gutter="16">
          <template v-for="itemchild in item.data" :key="itemchild.id">
-            <Col :span="6">
-              <List.Item>
-                <Card
+            <a-col :span="6">
+              <a-list-item>
+                <a-card
                  :hoverable="true"
                  :class="`${prefixCls}__card`"
                  @click="launch(itemchild.code)"
@ -25,12 +25,12 @@
                      {{ itemchild.name }}
                    </span>
                  </div>
-                </Card>
-              </List.Item>
-            </Col>
+                </a-card>
+              </a-list-item>
+            </a-col>
          </template>
-        </Row>
-      </List>
+        </a-row>
+      </a-list>
    </div>
    <a-modal
      width="100%"
@ -40,11 +40,7 @@
      :destroyOnClose="true"
    >
      <template #footer> </template>
-      <Preview
-        ref="posRef"
-        :code="code"
-        @closeModel="closeMolder"
-      ></Preview>
+      <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 './preview.vue'
-  const go = useGo();
+  import { Preview } from './index';
  const prefixCls = 'list-card';
  let cardList = ref();
-  const previewOpen = ref(false)
-  const code = ref('')
+  const previewOpen = ref(false);
+  const code = ref('');
  function launch(val) {
-    previewOpen.value = true
-    code.value = val
+    previewOpen.value = true;
+    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等，根据自己的数据结构和需求)后加一个[]中括号
@ -158,18 +151,18 @@
  }
 </style>
 <style lang="less">
-    .full-modal {
-        .ant-modal {
-            max-width: 100%;
-            top:0;
-        }
-
-        .ant-modal-content {
-            height: calc(100vh);
-        }
-
-        .ant-modal-body {
-            height: 85%;
-        }
+  .full-modal {
+    .ant-modal {
+      max-width: 100%;
+      top: 0;
    }
+
+    .ant-modal-content {
+      height: calc(100vh);
+    }
+
+    .ant-modal-body {
+      height: 85%;
+    }
+  }
 </style>
--- a/src/views/demo/workflow/create/preview.vue
+++ b/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 {
-    SendOutlined,
-    SaveOutlined,
-    CloseCircleOutlined,
-    ZoomInOutlined,
-    RotateLeftOutlined,
-    RotateRightOutlined,
-    ClearOutlined,
-  } from '@ant-design/icons-vue';
+  import { SendOutlined, SaveOutlined, CloseCircleOutlined } 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 eFormPreview = ref<null | IToolbarMethods>(null);
+  const keyValue = ref('');
  // 表单数据
  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;
-    height: 1em!important;
+    width: 1em !important;
+    height: 1em !important;
  }
  .form-box {
    width: 480px;
--- a/src/views/demo/workflow/h5/audit.vue
+++ b/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>
--- a/src/views/demo/workflow/h5/create.vue
+++ b/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>
--- a/src/views/demo/workflow/h5/look.vue
+++ b/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>
--- a/src/views/demo/workflow/h5/scheme.vue
+++ b/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>
--- a/src/views/demo/workflow/scheme/HistoryDrawer.vue
+++ b/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
-        style="border: 1px solid rgba(0, 0, 0, 0.1);height:100%;"
+      <process-designer-page
+        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' });

@ -138,17 +138,17 @@
 </script>

 <style lang="less">
-    .full-modal {
-        .ant-modal {
-            max-width: 100%;
-        }
-
-        .ant-modal-content {
-            height: calc(80vh);
-        }
-
-        .ant-modal-body {
-            height: 80%;
-        }
+  .full-modal {
+    .ant-modal {
+      max-width: 100%;
    }
-</style>
+
+    .ant-modal-content {
+      height: calc(80vh);
+    }
+
+    .ant-modal-body {
+      height: 80%;
+    }
+  }
+</style>
--- a/src/views/demo/workflow/scheme/SchemeTree.vue
+++ b/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('');
--- a/src/views/demo/workflow/scheme/page.ts
+++ b/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';

--- a/src/views/demo/workflow/scheme/preview.vue
+++ b/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 {
-    SaveOutlined,
-    CloseCircleOutlined,
-    ZoomInOutlined,
-    RotateLeftOutlined,
-    RotateRightOutlined,
-    ClearOutlined,
-  } from '@ant-design/icons-vue';
+  import { ProcessDesignerPage } 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();
@ -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) {
--- a/src/views/demo/workflow/task/completedTask.vue
+++ b/src/views/demo/workflow/task/completedTask.vue
@ -31,31 +31,28 @@
      title="详情"
      :destroyOnClose="true"
    >
-    <template #footer>
-      </template>
+      <template #footer> </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 { useGo } from '@/hooks/web/usePage';
-  const go = useGo();
+  import { Look } from './process/page';
  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 flowWfDataStore = flowStore();
  const searchInfo = reactive<Recordable>({});
-    const auditOpen = ref(false)
-  const processId = ref('')
+  const auditOpen = ref(false);
+  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
-    auditOpen.value=true
+    processId.value = record.processId;
+    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({
@ -157,18 +154,18 @@
  }
 </script>
 <style lang="less">
-    .full-modal {
-        .ant-modal {
-            max-width: 100%;
-            top:0;
-        }
-
-        .ant-modal-content {
-            height: calc(100vh);
-        }
-
-        .ant-modal-body {
-            height: 85%;
-        }
+  .full-modal {
+    .ant-modal {
+      max-width: 100%;
+      top: 0;
    }
+
+    .ant-modal-content {
+      height: calc(100vh);
+    }
+
+    .ant-modal-body {
+      height: 85%;
+    }
+  }
 </style>
--- a/src/views/demo/workflow/task/delegateTask.vue
+++ b/src/views/demo/workflow/task/delegateTask.vue
@ -1,147 +1,140 @@
 <template>
-    <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
-        <BasicTable @register="registerTable" @fetch-success="onFetchSuccess" :searchInfo="searchInfo">
-            <template #bodyCell="{ column, record }">
-                <template v-if="column.key === 'action'">
-                  <TableAction :actions="[
-                      {
-                        label:'详情',
-                        onClick: handleDetail.bind(null, record),
-                      },
-                      {
-                        label:'撤销',
-                        onClick: handleRevocation.bind(null, record),
-                      }
-                    ]" />
-                </template>
-              </template>
-        </BasicTable>
-        <a-modal
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <BasicTable @register="registerTable" @fetch-success="onFetchSuccess" :searchInfo="searchInfo">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '详情',
+                onClick: handleDetail.bind(null, record),
+              },
+              {
+                label: '撤销',
+                onClick: handleRevocation.bind(null, record),
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <a-modal
      width="100%"
      wrap-class-name="full-modal"
      v-model:open="auditOpen"
      title="详情"
      :destroyOnClose="true"
    >
-    <template #footer>
-      </template>
+      <template #footer> </template>
      <Look ref="posRef" :processId="processId"></Look>
    </a-modal>
-    </PageWrapper>
+  </PageWrapper>
 </template>

 <script lang="ts" setup>
-    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 { Tag } from 'ant-design-vue';
-  import Look from "./process/look.vue"
-    import { useGo } from '@/hooks/web/usePage';
-    const go = useGo();
-    const auditOpen = ref(false)
-  const processId = ref('')
-    const searchInfo = reactive < Recordable > ({});
-    const [registerTable, { reload}] = useTable({
-        api: getLoadMyDelegatePage,
-        columns: [
-            {
-                title: '任务',
-                dataIndex: 'unitName',
-            },
-            {
-                title: '标题',
-                dataIndex: 'processTitle',
-            },
-            {
-                title: '状态',
-                dataIndex: 'isUrge',
-                width: 80,
-                customRender: ({ record }) => {
-                    if (record.isUrge == '1') {
-                        const color = 'red';
-                        const text = '催办';
-                        return h(Tag, { color: color }, () => text);
-                    } else {
-                        const color = 'green';
-                        const text = '正常';
-                        return h(Tag, { color: color }, () => text);
-                    }
-
-
-                },
-            },
-            {
-                title: '提交人',
-                dataIndex: 'processUserName',
-            },
-            {
-                title: '创建时间',
-                dataIndex: 'createDate',
-            },
-
-        ],
-        rowKey: 'id',
-        formConfig: {
-            labelWidth: 120,
-            schemas: [
-                {
-                    field: '[StartDate, EndDate]',
-                    label: '日期范围',
-                    component: 'RangePicker',
-                    componentProps: {
-                        format: 'YYYY-MM-DD',
-                        placeholder: ['开始日期', '结束日期'],
-                    },
-                    colProps: { span: 8 },
-                },
-                {
-                    field: 'keyWord',
-                    label: '关键字',
-                    component: 'Input',
-                    colProps: { span: 8 },
-                },
-            ],
+  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 { Tag } from 'ant-design-vue';
+  import { Look } from './process/page';
+  const auditOpen = ref(false);
+  const processId = ref('');
+  const searchInfo = reactive<Recordable>({});
+  const [registerTable] = useTable({
+    api: getLoadMyDelegatePage,
+    columns: [
+      {
+        title: '任务',
+        dataIndex: 'unitName',
+      },
+      {
+        title: '标题',
+        dataIndex: 'processTitle',
+      },
+      {
+        title: '状态',
+        dataIndex: 'isUrge',
+        width: 80,
+        customRender: ({ record }) => {
+          if (record.isUrge == '1') {
+            const color = 'red';
+            const text = '催办';
+            return h(Tag, { color: color }, () => text);
+          } else {
+            const color = 'green';
+            const text = '正常';
+            return h(Tag, { color: color }, () => text);
+          }
        },
-        useSearchForm: true,
-        showTableSetting: true,
-        bordered: true,
-        handleSearchInfoFn(info) {
-            return info;
+      },
+      {
+        title: '提交人',
+        dataIndex: 'processUserName',
+      },
+      {
+        title: '创建时间',
+        dataIndex: 'createDate',
+      },
+    ],
+    rowKey: 'id',
+    formConfig: {
+      labelWidth: 120,
+      schemas: [
+        {
+          field: '[StartDate, EndDate]',
+          label: '日期范围',
+          component: 'RangePicker',
+          componentProps: {
+            format: 'YYYY-MM-DD',
+            placeholder: ['开始日期', '结束日期'],
+          },
+          colProps: { span: 8 },
        },
-        actionColumn: {
-            width: 100,
-            title: '操作',
-            dataIndex: 'action',
-            // slots: { customRender: 'action' },
+        {
+          field: 'keyWord',
+          label: '关键字',
+          component: 'Input',
+          colProps: { span: 8 },
        },
-    });
-    function handleDetail(record){
-        processId.value = record.id
-    auditOpen.value=true
-        // go('/dashboard/task_look_preview/detail?processId=' + record.id);
-    }
-    function handleRevocation(record){
-        console.log(record)
-        // reload()
-    }
-    
-
-
+      ],
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    actionColumn: {
+      width: 100,
+      title: '操作',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
+    },
+  });
+  function handleDetail(record) {
+    processId.value = record.id;
+    auditOpen.value = true;
+    // go('/dashboard/task_look_preview/detail?processId=' + record.id);
+  }
+  function handleRevocation(record) {
+    console.log(record);
+    // 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%;
-        }
+  .full-modal {
+    .ant-modal {
+      max-width: 100%;
+      top: 0;
    }
-</style>
+
+    .ant-modal-content {
+      height: calc(100vh);
+    }
+
+    .ant-modal-body {
+      height: 85%;
+    }
+  }
+</style>
--- a/src/views/demo/workflow/task/myDraft.vue
+++ b/src/views/demo/workflow/task/myDraft.vue
@ -36,7 +36,7 @@
      :destroyOnClose="true"
    >
      <template #footer> </template>
-      <Initiate ref="posRef" :processId="processId"  @closeModel="closeModel"></Initiate>
+      <Initiate ref="posRef" :processId="processId" @closeModel="closeModel"></Initiate>
    </a-modal>
  </PageWrapper>
 </template>
@ -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/initiate.vue';
-  const go = useGo();
+  import { Initiate } from './process/page';
  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(){
-    auditOpen.value = false
-    reload()
+  function closeModel() {
+    auditOpen.value = false;
+    reload();
  }
 </script>
 <style lang="less">
--- a/src/views/demo/workflow/task/myTask.vue
+++ b/src/views/demo/workflow/task/myTask.vue
@ -39,27 +39,24 @@
      title="详情"
      :destroyOnClose="true"
    >
-    <template #footer>
-      </template>
+      <template #footer> </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 go = useGo();
-  const auditOpen = ref(false)
-  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
-    auditOpen.value=true
+    processId.value = record.id;
+    auditOpen.value = true;
    // go('/dashboard/task_look_preview/detail?processId=' + record.id);
  }
  async function handleUrge(record) {
@ -184,18 +181,18 @@
  }
 </script>
 <style lang="less">
-    .full-modal {
-        .ant-modal {
-            max-width: 100%;
-            top:0;
-        }
-
-        .ant-modal-content {
-            height: calc(100vh);
-        }
-
-        .ant-modal-body {
-            height: 85%;
-        }
+  .full-modal {
+    .ant-modal {
+      max-width: 100%;
+      top: 0;
    }
-</style>
+
+    .ant-modal-content {
+      height: calc(100vh);
+    }
+
+    .ant-modal-body {
+      height: 85%;
+    }
+  }
+</style>
--- a/src/views/demo/workflow/task/process/audit.vue
+++ b/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
--- a/src/views/demo/workflow/task/process/initiate.vue
+++ b/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);
--- a/src/views/demo/workflow/task/process/look.vue
+++ b/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,
  });
--- a/src/views/demo/workflow/task/process/page.ts
+++ b/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';
+
--- a/src/views/demo/workflow/task/process/processModel.ts
+++ b/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
--- a/src/views/demo/workflow/task/readTask.vue
+++ b/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 go = useGo();
-  const [registerTable] = useTable({
+  const processId = ref('');
+  const taskId = ref('');
+  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
-    if(record.state == 1){
-      isRead = 1
-    }else{
-      isRead = 0
+    let isread;
+    if (record.state == 1) {
+      isread = 1;
+    } else {
+      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>
--- a/src/views/demo/workflow/task/uncompletedTask.vue
+++ b/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({
Author	SHA1	Message	Date
zzq	ee447b0fcd	代码规范化	2024-04-17 17:07:21 +08:00
刘妍	ebd537e45a	Merge branch 'ly' into dev	2024-04-15 17:04:15 +08:00
刘妍	4b61ab791a	树组件优化，代码规范	2024-04-15 17:03:03 +08:00
滕嵩	b11b6aac61	表单图片优化	2024-04-13 17:03:45 +08:00
zzq	955fe43a64	Merge branch 'dev' of http://123.132.248.154:10000/HC_YFZX/vue-vben-admin into dev	2024-04-13 16:54:58 +08:00
刘妍	2a097b4e04	Merge branch 'ly' into dev	2024-04-12 16:10:06 +08:00
刘妍	d9e3a1df75	流程H5页面	2024-04-12 16:09:30 +08:00
滕嵩	3c32596b07	表单设计-暂存、表单其他bug修正	2024-04-12 14:21:37 +08:00
				`@ -0,0 +1 @@`
				`export { default as Preview } from './preview.vue';`