增加审批流程编辑

src/views/system/workspace/approvalModal.vue

@@ -21,17 +21,20 @@
       </template>
     </BasicTable>
   </BasicModal>
+  <StreamModal @register="registerStreamModal" @success="handleSuccess" />
 </template>
 <script lang="ts" setup>
-  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
   import { BasicTable, TableAction, useTable } from '@/components/Table';
   import { onMounted, reactive, ref } from 'vue';
   import { approvalColumns, approvalSearchFormSchema } from '@/views/system/workspace/data';
   import { approvalData } from '@/views/system/workspace/workSpaceData';
+  import StreamModal from '@/views/system/workspace/streamModal.vue';
 
   defineOptions({ name: 'AccountModal' });
   const tableData = ref([]);
   const searchInfo = reactive<Recordable>({});
+  const [registerStreamModal, { openModal }] = useModal();
   const [registerTable, { reload, getSearchInfo, getForm }] = useTable({
     title: '审批配置',
     api: async () => {

src/views/system/workspace/streamModal.vue

+<template>
+  <BasicModal
+    width="50%"
+    v-bind="$attrs"
+    @register="registerModal"
+    title="流程编辑"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="register" @submit="handleSubmit">
+      <template #add="{ field }">
+        <a-button v-if="Number(field) === 0" @click="add">+</a-button>
+        <a-button v-if="Number(field) > 0" @click="() => del(field)">-</a-button>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { ref } from 'vue';
+
+  defineOptions({ name: 'StreamModal' });
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async () => {
+    setModalProps({ confirmLoading: false });
+  });
+  const [register, { appendSchemaByField, removeSchemaByField }] = useForm({
+    schemas: [
+      {
+        field: 'num',
+        component: 'Input',
+        label: '节点级数',
+        defaultValue: 1,
+        required: true,
+        dynamicDisabled: true,
+      },
+      {
+        field: 'approvalBy',
+        component: 'Select',
+        componentProps: {
+          options: [
+            { label: 'admin', value: '1' },
+            { label: '工作组管理员', value: '2' },
+          ],
+        },
+        label: '审批人',
+        required: true,
+      },
+      {
+        field: 'approvalType',
+        component: 'Select',
+        componentProps: {
+          options: [
+            { label: '或签', value: '1' },
+            { label: '会签', value: '2' },
+          ],
+        },
+        label: '审批方式',
+        required: true,
+      },
+      {
+        field: '0',
+        label: ' ',
+        slot: 'add',
+      },
+    ],
+    showActionButtonGroup: false,
+    labelWidth: 100,
+    actionColOptions: { span: 24 },
+    baseColProps: { span: 6 },
+  });
+
+  const n = ref(2);
+  function add() {
+    appendSchemaByField(
+      {
+        field: `num${n.value}`,
+        component: 'Input',
+        label: '节点级数',
+        required: true,
+        defaultValue: n.value,
+        dynamicDisabled: true,
+      },
+      '',
+    );
+    appendSchemaByField(
+      {
+        field: `approvalBy${n.value}`,
+        component: 'Select',
+        componentProps: {
+          options: [
+            { label: 'admin', value: '1' },
+            { label: '工作组管理员', value: '2' },
+          ],
+        },
+        label: '审批人',
+        required: true,
+      },
+      '',
+    );
+    appendSchemaByField(
+      {
+        field: `approvalType${n.value}`,
+        component: 'Select',
+        componentProps: {
+          options: [
+            { label: '或签', value: '1' },
+            { label: '会签', value: '2' },
+          ],
+        },
+        label: '审批方式',
+        required: true,
+      },
+      '',
+    );
+    appendSchemaByField(
+      {
+        field: `${n.value}`,
+        component: 'Input',
+        label: ' ',
+        slot: 'add',
+      },
+      '',
+    );
+    n.value++;
+  }
+
+  function del(field: string) {
+    removeSchemaByField([`approvalBy${field}`, `approvalType${field}`, `num${field}`, `${field}`]);
+    n.value--;
+  }
+  async function handleSubmit() {
+    closeModal();
+  }
+</script>