feat: 审批追加

src/views/system/approval/PageApproval.vue

@@ -21,7 +21,7 @@
               :popconfirm="{
                 title: '确定要删除?',
               }"
-              @confirm="handleDeleteApproval(scope.row.id)"
+              @confirm="handleDeleteApproval(scope.row)"
             />
           </template>
         </BasicTable>
@@ -33,6 +33,7 @@
 
 <script setup lang="ts">
   import { Plus } from '@element-plus/icons-vue';
+  import { ElMessage } from 'element-plus';
   import BasicTable from '@/components/BasicTable.vue';
   import ActionButton from '@/components/ActionButton.vue';
   import useTableConfig from '@/hooks/useTableConfigHook';
@@ -91,10 +92,14 @@
       },
     });
   };
-  const handleDeleteApproval = async (id: number) => {
+  const handleDeleteApproval = async (row: ApprovalInstanceType) => {
+    if (row.isRelated || row.isApplied) {
+      ElMessage.error('已关联或已应用，无法删除');
+      return;
+    }
     try {
       tableConfig.loading = true;
-      await delApprovalInstance(id);
+      await delApprovalInstance(row.id);
       getTabelData();
     } catch (e) {
       console.log(e);

src/views/system/approval/PageApprovalNode.vue

@@ -38,6 +38,7 @@
                 @click="handleOpenAppoverSelect(scope.row)"
               />
               <ActionButton
+                v-if="tableData.length > 1"
                 text="删除节点"
                 :popconfirm="{
                   title: '确定要删除?',
@@ -52,6 +53,8 @@
     <ApproverSelectDialog ref="approverSelectDialogRef" @submit="handleApproverSelect" />
     <ApprovalNodeCreateDialog
       ref="approvalNodeCreateDialogRef"
+      :is-create="true"
+      :init-data="initFormData"
       :order-list="approvalOrderList"
       @success="getTabelData"
     />
@@ -69,7 +72,7 @@
   import BasicForm from '@/components/BasicForm.vue';
   import ActionButton from '@/components/ActionButton.vue';
   import BasicTable from '@/components/BasicTable.vue';
-  import { ApprovalInstanceRuleForm, ApprovalNodeInstanceType } from './types';
+  import { ApprovalNodeInstanceRuleForm, ApprovalInstanceRuleForm, ApprovalNodeInstanceType } from './types';
   import { APPROVAL_FORM_CONFIG, APPROVAL_FORM_DATA, APPROVAL_FORM_RULES } from './config/form';
   import useTableConfig from '@/hooks/useTableConfigHook';
   import { APPROVAL_NODE_TABLE_COLUMNS, NODE_TABLE_OPTIONS } from './config/table';
@@ -99,6 +102,11 @@
   const approvalOrderList = computed(() => {
     return tableData.value.map((item) => item.approvalOrder);
   });
+
+  const approvalOrderMax = computed(() => {
+    return Math.max(...approvalOrderList.value);
+  });
+
   function initForm(initData: ApprovalInstanceRuleForm) {
     ruleFormData.id = initData.id;
     ruleFormData.templateName = initData.templateName;
@@ -143,17 +151,36 @@
   };
 
   const approvalNodeCreateDialogRef = ref();
+  const initFormData = ref<ApprovalNodeInstanceRuleForm>();
   const handleCreateApprovalNode = () => {
-    approvalNodeCreateDialogRef.value.initForm(true, { approvalTemplateId: Number(id) });
+    if (approvalInstance.value?.isApplied) {
+      ElMessage.error('已应用，无法添加节点');
+      return;
+    }
+    initFormData.value = {
+      approvalTemplateId: Number(id),
+      nodeDescription: '',
+      approvalType: 0,
+      approverType: 1,
+      approvalOrder: approvalOrderMax.value + 1,
+    };
     approvalNodeCreateDialogRef.value.openDialog();
   };
   const handleEditApprovalNode = (row: ApprovalNodeInstanceType) => {
-    approvalNodeCreateDialogRef.value.initForm(false, { ...row, approvalTemplateId: Number(id) });
+    if (approvalInstance.value?.isApplied) {
+      ElMessage.error('已应用，无法编辑节点');
+      return;
+    }
+    initFormData.value = { ...row, approvalTemplateId: Number(id) };
     approvalNodeCreateDialogRef.value.openDialog();
   };
 
   const approverSelectDialogRef = ref();
   const handleOpenAppoverSelect = async (node: ApprovalNodeInstanceType) => {
+    if (approvalInstance.value?.isApplied) {
+      ElMessage.error('已应用，无法编辑节点');
+      return;
+    }
     if (approverSelectDialogRef.value) {
       if (node.approverInfoList.length > 0) {
         const res = await queryUserInfoByIds(node.approverInfoList.map((x) => x.approverId));
@@ -165,6 +192,10 @@
   };
 
   const handleApproverSelect = async (list: PersonGroupItem[]) => {
+    if (approvalInstance.value?.isApplied) {
+      ElMessage.error('已应用，无法编辑节点');
+      return;
+    }
     try {
       await updateApprvoerInfo({
         id: curNodeId.value,
@@ -180,6 +211,10 @@
   };
 
   const handleDeleteNode = async (id: number) => {
+    if (approvalInstance.value?.isApplied) {
+      ElMessage.error('已应用，无法编辑节点');
+      return;
+    }
     try {
       tableConfig.loading = true;
       await delApprovalNodeInstance(id);

src/views/system/approval/components/ApprovalNodeCreateDialog.vue

@@ -1,34 +1,32 @@
 <template>
   <BasicDialog ref="basicDialogRef" :title="dialogTitle + '审批节点'" @refresh="refreshFromData">
     <template #form>
-      <BasicForm
-        v-if="ruleFormData.approvalTemplateId"
-        ref="basicFormRef"
-        :formData="ruleFormData"
-        :formRules="formRules"
-        :formConfig="ruleFormConfig"
+      <ApprovalNodeCreateForm
+        v-if="formOpened"
+        ref="approvalNodeFormRef"
+        :init-data="props.initData"
+        :order-list="props.orderList"
+        @success="handleSuccess"
       />
     </template>
     <template #footer>
       <el-button type="primary" @click="handleSumbit">提交</el-button>
-      <el-button @click="basicDialogRef?.closeDialog">取消</el-button>
+      <el-button @click="handleClose">取消</el-button>
     </template>
   </BasicDialog>
   <UploadLoading :form-loading="formLoading" v-if="formLoading" />
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
-  import { ElMessage } from 'element-plus';
+  import { computed, ref } from 'vue';
   import BasicDialog from '@/components/BasicDialog.vue';
-  import BasicForm from '@/components/BasicForm.vue';
-  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
-  import { ApprovalNodeInstanceRuleForm } from '../types';
-  import { APPROVAL_NODE_FORM_CONFIG, APPROVAL_NODE_FORM_DATA, APPROVAL_NODE_FORM_RULES } from '../config/form';
-  import { addApprovalNodeInstance } from '@/api/approval/approval';
   import UploadLoading from '@/components/UploadLoading.vue';
+  import ApprovalNodeCreateForm from './ApprovalNodeCreateForm.vue';
+  import { ApprovalNodeInstanceRuleForm } from '../types';
 
   const props = defineProps<{
+    isCreate: boolean;
+    initData?: ApprovalNodeInstanceRuleForm;
     orderList?: number[];
   }>();
 
@@ -37,70 +35,32 @@
   }>();
 
   const basicDialogRef = ref<InstanceType<typeof BasicDialog>>();
-  const basicFormRef = ref<InstanceType<typeof BasicForm>>();
-  const { ruleFormConfig, ruleFormData, formRules, cloneRuleFormData, beforeRouteLeave } =
-    useFormConfigHook<ApprovalNodeInstanceRuleForm>(
-      APPROVAL_NODE_FORM_CONFIG,
-      APPROVAL_NODE_FORM_DATA,
-      APPROVAL_NODE_FORM_RULES,
-    );
+  const approvalNodeFormRef = ref<InstanceType<typeof ApprovalNodeCreateForm>>();
 
-  const dialogTitle = ref();
+  const dialogTitle = computed(() => (props.isCreate ? '添加' : '编辑'));
   const formLoading = ref(false);
-  const orderCache = ref();
-
-  function initForm(isCreate: boolean, initData?: ApprovalNodeInstanceRuleForm) {
-    ruleFormData.approvalTemplateId = initData?.approvalTemplateId;
-    if (isCreate) {
-      dialogTitle.value = '添加';
-    } else {
-      dialogTitle.value = '编辑';
-    }
-    if (!initData) return;
-    refreshFromData();
-    ruleFormData.id = initData.id;
-    ruleFormData.approvalOrder = initData.approvalOrder;
-    ruleFormData.approvalType = initData.approvalType;
-    ruleFormData.approverType = initData.approverType;
-    ruleFormData.nodeDescription = initData.nodeDescription;
-
-    orderCache.value = initData.approvalOrder;
-
-    // console.log(ruleFormData, initData);
-    // cloneRuleFormData();
-    // beforeRouteLeave();
-  }
+  const formOpened = ref(false);
 
   const openDialog = () => {
     basicDialogRef.value?.openDialog();
+    formOpened.value = true;
   };
-  const handleSumbit = async () => {
-    const validate = await basicFormRef.value?.validateForm();
-    if (!validate) return;
-    console.log(props.orderList);
-    if (
-      orderCache.value !== ruleFormData.approvalOrder! &&
-      props.orderList &&
-      props.orderList.includes(ruleFormData.approvalOrder!)
-    ) {
-      ElMessage.error('该顺序已存在，请重新输入');
-      return;
-    }
-    // 提交表单接口
-    try {
-      await addApprovalNodeInstance(ruleFormData);
-      emits('success');
-      orderCache.value = undefined;
-      basicDialogRef.value?.closeDialog();
-    } catch (e) {
-      console.log(e);
-    }
+  const handleSumbit = () => {
+    approvalNodeFormRef.value?.onSumbit();
   };
-  const refreshFromData = () => {
-    basicFormRef.value?.clearValidate();
+
+  const handleSuccess = () => {
+    emits('success');
+    handleClose();
+  };
+
+  const handleClose = () => {
+    basicDialogRef.value?.closeDialog();
+    formOpened.value = false;
   };
+  const refreshFromData = () => {};
+
   defineExpose({
-    initForm,
     openDialog,
   });
 </script>

src/views/system/approval/components/ApprovalNodeCreateForm.vue

@@ -0,0 +1,68 @@
+<template>
+  <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig" />
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import { addApprovalNodeInstance } from '@/api/approval/approval';
+  import BasicForm from '@/components/BasicForm.vue';
+  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
+  import { ApprovalNodeInstanceRuleForm } from '../types';
+  import { APPROVAL_NODE_FORM_CONFIG, APPROVAL_NODE_FORM_DATA, APPROVAL_NODE_FORM_RULES } from '../config/form';
+
+  const props = defineProps<{
+    initData?: ApprovalNodeInstanceRuleForm;
+    orderList?: number[];
+  }>();
+
+  //   console.log(props.initData);
+
+  const emits = defineEmits<{
+    (e: 'success'): void;
+  }>();
+
+  const orderCache = ref(props.initData?.approvalOrder);
+
+  const basicFormRef = ref<InstanceType<typeof BasicForm>>();
+
+  const { ruleFormConfig, ruleFormData, formRules, cloneRuleFormData, beforeRouteLeave } =
+    useFormConfigHook<ApprovalNodeInstanceRuleForm>(
+      APPROVAL_NODE_FORM_CONFIG,
+      props.initData || APPROVAL_NODE_FORM_DATA,
+      APPROVAL_NODE_FORM_RULES,
+    );
+
+  const onSumbit = async () => {
+    const validate = await basicFormRef.value?.validateForm();
+    if (!validate) return;
+    // console.log(props.orderList);
+    if (
+      orderCache.value !== ruleFormData.approvalOrder! &&
+      props.orderList &&
+      props.orderList.includes(ruleFormData.approvalOrder!)
+    ) {
+      ElMessage.error('该顺序已存在，请重新输入');
+      return;
+    }
+    // 提交表单接口
+    try {
+      await addApprovalNodeInstance(ruleFormData);
+      emits('success');
+      orderCache.value = undefined;
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const onRefresh = () => {
+    basicFormRef.value?.clearValidate();
+  };
+
+  defineExpose({
+    onSumbit,
+    onRefresh,
+  });
+</script>
+
+<style scoped></style>

src/views/system/approval/config/form.ts

@@ -78,8 +78,8 @@ export const APPROVAL_NODE_FORM_CONFIG: FormConfig[] = [
 export const APPROVAL_NODE_FORM_DATA = {
   approvalTemplateId: undefined,
   nodeDescription: '',
-  approvalType: undefined,
-  approverType: undefined,
+  approvalType: 0,
+  approverType: 1,
   approvalOrder: undefined,
 };
 

src/views/system/approval/types.ts

@@ -4,6 +4,8 @@ export interface ApprovalInstanceType {
   id: number;
   templateName: string;
   description?: string;
+  isRelated?: number;
+  isApplied?: number;
   approvalNodeInfoList?: ApprovalNodeInstanceType[];
 }