chore: reBreak

2 years ago · 8a945dab2c
3 changed files with 121 additions and 8 deletions
--- a/index.html
+++ b/index.html
@ -10,10 +10,16 @@
				@@ -10,10 +10,16 @@
 	/>
 	<title><%= title %></title>
 	<link rel="icon" href="/favicon.ico"/>
+
+	<!-- 外置:todo 待排除 -->
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/theme-chalk/index.css">
 	<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/index.js" charset="utf-8"></script>
 	<script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
 	<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.7.1"></script>
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/loquat-form-design@1.2.6/lib/loquat-form-design.css">
+	<script src="https://cdn.jsdelivr.net/npm/loquat-form-design@1.2.6/lib/loquat-form-design.umd.min.js"></script>
+
+
 </head>
 <body>
 <script>
--- a/src/views/common/workflow/extension/form/helper/WorkflowFormDesign.vue
+++ b/src/views/common/workflow/extension/form/helper/WorkflowFormDesign.vue
@ -0,0 +1,101 @@
				@@ -0,0 +1,101 @@
+<template>
+  <BasicModal v-bind="$attrs"
+              width="720px"
+              @register="registerModal"
+              @ok="handleSubmit"
+  >
+    <loquat-form-design ref="loquat-form-design"
+                        style="height:calc(100vh - 133px)"
+                        :toolbar="['clear', 'preview']"
+                        :options="state.options"
+                        :custom-fields="state.customFields"
+    />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
+
+  interface TableState {
+    tag: string;
+    options: Recordable;
+    customFields: Recordable[];
+  }
+
+  const state = reactive<TableState>({
+    tag: '',
+    options: {},
+    customFields: [{
+      title: '自定义字段',
+      list: [
+        {
+          title: '分割线',
+          type: 'custom',
+          component: 'el-divider',
+          icon: 'iconfont icon-divider',
+          label: '',
+          propExclude: true,
+          labelWidth: 0,
+          params: {
+            html: '<h3 style="color:red">分割线标题</h3>',
+            contentPosition: 'left'
+          }
+        },
+        {
+          title: '警告',
+          type: 'custom',
+          component: 'el-alert',
+          icon: 'el-icon-warning',
+          label: '',
+          propExclude: true,
+          labelWidth: 0,
+          params: {
+            title: '警告警告警告警告',
+            type: 'success'
+          },
+          events: {
+            close () {
+              console.log('alert关闭事件');
+            }
+          }
+        }
+      ]
+    }],
+  });
+
+  const emit = defineEmits(['success', 'register']);
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
+    state.tag = data._tag;
+    const id = data.record?.id;
+    const props: Partial<ModalProps> = { confirmLoading: false };
+    switch (state.tag) {
+      case 'add':
+        props.title = '新增流程表单';
+        break;
+      case 'edit':
+        props.title = '编辑流程表单';
+        break;
+    }
+    setModalProps(props);
+  });
+
+  /** 处理弹出框提交 */
+  async function handleSubmit() {
+    try {
+      // 处理提交之前逻辑
+      setModalProps({ confirmLoading: true });
+      // 采用tag标签区分操作
+      switch (state.tag) {
+        case 'add':
+          break;
+        case 'edit':
+          break;
+      }
+      // 处理提交完成之后逻辑
+      closeModal();
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
--- a/src/views/common/workflow/extension/form/index.vue
+++ b/src/views/common/workflow/extension/form/index.vue
@ -76,7 +76,7 @@
				@@ -76,7 +76,7 @@
              {
                label: '设计',
                icon: 'fa-solid:mortar-pestle',
-                onClick: handleEdit.bind(null, record)
+                onClick: handleWorkFlowFormDesign.bind(null, record)
              },
              {
                label: '修改',
@ -101,21 +101,19 @@
				@@ -101,21 +101,19 @@
      </template>
    </BasicTable>
    <FormModal @register="registerModal" @success="handleRefreshTable"/>
+    <WorkflowFormDesign @register="registerWorkflowFormModal" @success="handleRefreshTable"/>
  </PageWrapper>
 </template>

 <script lang="ts">
  import { defineComponent, reactive, toRaw, onMounted } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import {
-    listFormDefinition,
-    delFormDefinition,
-    getFormDefinition,
-  } from '/@/api/platform/common/workflow/extension/controller/formDefinition';
+  import { listFormDefinition, delFormDefinition, } from '/@/api/platform/common/workflow/extension/controller/formDefinition';
  import { PageWrapper } from '/@/components/Page';
  import { BasicTree, TreeItem } from '/@/components/Tree';
  import { useModal } from '/@/components/Modal';
  import FormModal from './FormModal.vue';
+  import WorkflowFormDesign from './helper/WorkflowFormDesign.vue';
  import { columns, searchFormSchema } from './form.data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { listToTree } from '/@/utils/helper/treeHelper';
@ -142,6 +140,7 @@
				@@ -142,6 +140,7 @@
      PlusOutlined,
      FormOutlined,
      DeleteOutlined,
+      WorkflowFormDesign,
    },
    setup() {

@ -160,7 +159,7 @@
				@@ -160,7 +159,7 @@

      const { createConfirm, createMessage } = useMessage();
      const [registerModal, { openModal }] = useModal();
-      const [registerResetPwdModal, { openModal: openResetPwdModal }] = useModal();
+      const [registerWorkflowFormModal , { openModal: openWorkflowFormModal }] = useModal();
      const [registerTable, { reload, clearSelectedRowKeys, getForm }] = useTable({
        title: '流程表单列表',
        api: listFormDefinition,
@ -234,6 +233,12 @@
				@@ -234,6 +233,12 @@
        reload();
      }

+      /** 处理工作流表单设计 */
+      function handleWorkFlowFormDesign (row) {
+        const record = row.formDefinitionJson || {};
+        openWorkflowFormModal(true, { _tag: 'add', record });
+      }
+
      function handleSelect(selectedKeys: string[]) {
        getForm().setFieldsValue({
          categoryId: selectedKeys[0]
@ -244,13 +249,14 @@
				@@ -244,13 +249,14 @@
        state,
        registerTable,
        registerModal,
-        registerResetPwdModal,
+        registerWorkflowFormModal,
        handleAdd,
        handleEdit,
        handleDel,
        handleSelectionChange,
        handleRefreshTable,
        handleSelect,
+        handleWorkFlowFormDesign
      };
    }
  });