feat: 审批功能联调完成

src/api/approval/approval.ts

@@ -55,3 +55,10 @@ export function updateApprovalNodeInstance(params: ApprovalNodeInstanceRuleForm)
 export function updateApprvoerInfo(params: ApprovalNodeInstanceRuleForm) {
   return addApprovalNodeInstance(params);
 }
+
+export function delApprovalNodeInstance(id: number) {
+  return http.request({
+    url: `/approvalManagement/deleteApprovalNode?approvalTemplateDetailId=${id}`,
+    method: 'delete',
+  });
+}

src/views/system/approval/PageApproval.vue

@@ -54,8 +54,17 @@
   });
 
   const tableData = ref<ApprovalInstanceType[]>([]);
-  const handleSizeChange = () => {};
-  const handleCurrentChange = () => {};
+  const handleSizeChange = (value: number) => {
+    pagination.pageSize = value;
+    tabelQuery.value.pageSize = value;
+    getTabelData();
+  };
+  const handleCurrentChange = (value: number) => {
+    pagination.pageNumber = value;
+    tabelQuery.value.pageSize = value;
+    getTabelData();
+  };
+
   async function getTabelData() {
     tableConfig.loading = true;
 

src/views/system/approval/PageApprovalNode.vue

@@ -49,8 +49,12 @@
         </div>
       </div>
     </main>
-    <ApproverSelectDialog ref="approverSelectDialogRef" />
-    <ApprovalNodeCreateDialog ref="approvalNodeCreateDialogRef" />
+    <ApproverSelectDialog ref="approverSelectDialogRef" @submit="handleApproverSelect" />
+    <ApprovalNodeCreateDialog
+      ref="approvalNodeCreateDialogRef"
+      :order-list="approvalOrderList"
+      @success="getTabelData"
+    />
     <UploadLoading loading-text="加载中" :form-loading="formLoading" v-if="formLoading" />
   </div>
 </template>
@@ -59,7 +63,7 @@
   import { useRoute } from 'vue-router';
   import { ElMessage } from 'element-plus';
   import { Plus } from '@element-plus/icons-vue';
-  import { onMounted, ref } from 'vue';
+  import { computed, onMounted, ref } from 'vue';
   import { useFormConfigHook } from '@/hooks/useFormConfigHook';
   import UploadLoading from '@/components/UploadLoading.vue';
   import BasicForm from '@/components/BasicForm.vue';
@@ -72,19 +76,29 @@
   import { APPROVER_TYPE_MAP, APPROVAL_TYPE_MAP } from './constants';
   import ApproverSelectDialog from './components/ApproverSelectDialog.vue';
   import ApprovalNodeCreateDialog from './components/ApprovalNodeCreateDialog.vue';
-  import { getApprovalNodeInstanceList } from '@/api/approval/approval';
-  import { updateApprovalInstance } from '@/api/approval/approval';
+  import {
+    getApprovalNodeInstanceList,
+    updateApprovalInstance,
+    updateApprvoerInfo,
+    delApprovalNodeInstance,
+  } from '@/api/approval/approval';
   import { queryUserInfoByIds } from '@/api/system/person-group';
+  import { PersonGroupItem } from '@/types/person-group/type';
 
   const route = useRoute();
 
   const id = route.query.id;
+  const curNodeId = ref();
   const approvalInstance = ref<ApprovalInstanceRuleForm>();
 
   const formLoading = ref(false);
   const basicFormRef = ref<InstanceType<typeof BasicForm>>();
   const { ruleFormConfig, ruleFormData, formRules, cloneRuleFormData, beforeRouteLeave } =
     useFormConfigHook<ApprovalInstanceRuleForm>(APPROVAL_FORM_CONFIG, APPROVAL_FORM_DATA, APPROVAL_FORM_RULES);
+
+  const approvalOrderList = computed(() => {
+    return tableData.value.map((item) => item.approvalOrder);
+  });
   function initForm(initData: ApprovalInstanceRuleForm) {
     ruleFormData.id = initData.id;
     ruleFormData.templateName = initData.templateName;
@@ -130,24 +144,50 @@
 
   const approvalNodeCreateDialogRef = ref();
   const handleCreateApprovalNode = () => {
-    approvalNodeCreateDialogRef.value.initForm(true, { approvalTemplateId: id });
+    approvalNodeCreateDialogRef.value.initForm(true, { approvalTemplateId: Number(id) });
     approvalNodeCreateDialogRef.value.openDialog();
   };
   const handleEditApprovalNode = (row: ApprovalNodeInstanceType) => {
-    console.log(row);
-    // approvalNodeCreateDialogRef.value.initForm(false, row);
-    // approvalNodeCreateDialogRef.value.openDialog();
+    approvalNodeCreateDialogRef.value.initForm(false, { ...row, approvalTemplateId: Number(id) });
+    approvalNodeCreateDialogRef.value.openDialog();
   };
 
   const approverSelectDialogRef = ref();
   const handleOpenAppoverSelect = async (node: ApprovalNodeInstanceType) => {
     if (approverSelectDialogRef.value) {
-      const res = await queryUserInfoByIds(node.approverInfoList.map((x) => x.approverId));
-      approverSelectDialogRef.value.setSelectedUser(res);
+      if (node.approverInfoList.length > 0) {
+        const res = await queryUserInfoByIds(node.approverInfoList.map((x) => x.approverId));
+        approverSelectDialogRef.value.setSelectedUser(res);
+      }
+      curNodeId.value = node.id;
       approverSelectDialogRef.value.openDialog();
     }
   };
-  const handleDeleteNode = (id: number) => {};
+
+  const handleApproverSelect = async (list: PersonGroupItem[]) => {
+    try {
+      await updateApprvoerInfo({
+        id: curNodeId.value,
+        approvalTemplateId: Number(id),
+        approverList: '[' + list.map((item) => item.id).join(',') + ']',
+      });
+      approverSelectDialogRef.value.closeDialog();
+      getTabelData();
+      curNodeId.value = undefined;
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const handleDeleteNode = async (id: number) => {
+    try {
+      tableConfig.loading = true;
+      await delApprovalNodeInstance(id);
+      getTabelData();
+    } catch (e) {
+      console.log(e);
+    }
+  };
 </script>
 
 <style lang="scss" scoped>

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

@@ -23,11 +23,8 @@
 
   const basicDialogRef = ref<InstanceType<typeof BasicDialog>>();
   const basicFormRef = ref<InstanceType<typeof BasicForm>>();
-  const { ruleFormConfig, ruleFormData, formRules } = useFormConfigHook<ApprovalInstanceRuleForm>(
-    APPROVAL_FORM_CONFIG,
-    APPROVAL_FORM_DATA,
-    APPROVAL_FORM_RULES,
-  );
+  const { ruleFormConfig, ruleFormData, formRules, cloneRuleFormData, beforeRouteLeave } =
+    useFormConfigHook<ApprovalInstanceRuleForm>(APPROVAL_FORM_CONFIG, APPROVAL_FORM_DATA, APPROVAL_FORM_RULES);
   const formLoading = ref(false);
 
   const emits = defineEmits<{

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

@@ -1,7 +1,13 @@
 <template>
   <BasicDialog ref="basicDialogRef" :title="dialogTitle + '审批节点'" @refresh="refreshFromData">
     <template #form>
-      <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig" />
+      <BasicForm
+        v-if="ruleFormData.approvalTemplateId"
+        ref="basicFormRef"
+        :formData="ruleFormData"
+        :formRules="formRules"
+        :formConfig="ruleFormConfig"
+      />
     </template>
     <template #footer>
       <el-button type="primary" @click="handleSumbit">提交</el-button>
@@ -13,6 +19,7 @@
 
 <script setup lang="ts">
   import { ref } from 'vue';
+  import { ElMessage } from 'element-plus';
   import BasicDialog from '@/components/BasicDialog.vue';
   import BasicForm from '@/components/BasicForm.vue';
   import { useFormConfigHook } from '@/hooks/useFormConfigHook';
@@ -21,41 +28,69 @@
   import { addApprovalNodeInstance } from '@/api/approval/approval';
   import UploadLoading from '@/components/UploadLoading.vue';
 
+  const props = defineProps<{
+    orderList?: number[];
+  }>();
+
+  const emits = defineEmits<{
+    (e: 'success'): void;
+  }>();
+
   const basicDialogRef = ref<InstanceType<typeof BasicDialog>>();
   const basicFormRef = ref<InstanceType<typeof BasicForm>>();
-  const { ruleFormConfig, ruleFormData, formRules } = useFormConfigHook<ApprovalNodeInstanceRuleForm>(
-    APPROVAL_NODE_FORM_CONFIG,
-    APPROVAL_NODE_FORM_DATA,
-    APPROVAL_NODE_FORM_RULES,
-  );
+  const { ruleFormConfig, ruleFormData, formRules, cloneRuleFormData, beforeRouteLeave } =
+    useFormConfigHook<ApprovalNodeInstanceRuleForm>(
+      APPROVAL_NODE_FORM_CONFIG,
+      APPROVAL_NODE_FORM_DATA,
+      APPROVAL_NODE_FORM_RULES,
+    );
 
   const dialogTitle = ref();
   const formLoading = ref(false);
+  const orderCache = ref();
 
   function initForm(isCreate: boolean, initData?: ApprovalNodeInstanceRuleForm) {
     ruleFormData.approvalTemplateId = initData?.approvalTemplateId;
     if (isCreate) {
       dialogTitle.value = '添加';
-      return;
+    } else {
+      dialogTitle.value = '编辑';
     }
     if (!initData) return;
-    dialogTitle.value = '编辑';
+    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 emits = defineEmits<{
-    (e: 'success'): void;
-  }>();
   const openDialog = () => {
     basicDialogRef.value?.openDialog();
   };
   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);

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

@@ -12,7 +12,7 @@
     <PersonGroupFilter
       ref="dialogInstance"
       :init-selected="selectedUser"
-      @cancel="handlePersonDialogCancle"
+      @cancel="closeDialog"
       @submit="handlePersonDialogSubmit"
     />
   </el-dialog>
@@ -23,29 +23,35 @@
   import { ref } from 'vue';
   import { PersonGroupItem } from '@/types/person-group/type';
 
+  const emits = defineEmits<{
+    (e: 'submit', selectedPerson: PersonGroupItem[]): void;
+  }>();
+
   const dialogOpened = ref(false);
 
   const selectedUser = ref<PersonGroupItem[]>([]);
 
-  const handlePersonDialogCancle = () => {
-    dialogOpened.value = false;
-  };
   const handlePersonDialogSubmit = (selectedData: PersonGroupItem[]) => {
     selectedUser.value = selectedData;
-    console.log(selectedUser.value);
-    dialogOpened.value = false;
+    emits('submit', selectedUser.value);
   };
 
   function openDialog() {
     dialogOpened.value = true;
   }
 
+  function closeDialog() {
+    selectedUser.value = [];
+    dialogOpened.value = false;
+  }
+
   function setSelectedUser(selectedData: PersonGroupItem[]) {
     selectedUser.value = selectedData;
   }
 
   defineExpose({
     openDialog,
+    closeDialog,
     setSelectedUser,
   });
 </script>

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

@@ -41,11 +41,11 @@ export const APPROVAL_NODE_FORM_CONFIG: FormConfig[] = [
     component: 'ElSelect',
     selectOptions: [
       {
-        label: '自选',
+        label: '固定',
         value: 0,
       },
       {
-        label: '固定',
+        label: '自选',
         value: 1,
       },
     ],
@@ -108,6 +108,18 @@ export const APPROVAL_NODE_FORM_RULES = {
   approvalOrder: [
     {
       required: true,
+      // validator: (rule: any, value: any, callback: any, existingNumbers: number[]) => {
+      //   // 检查输入值是否与已有数组中的任何元素重复
+      //   if (value === null || value === undefined || value === '') {
+      //     callback(); // 空值校验由required规则处理
+      //     return;
+      //   }
+      //   if (existingNumbers.includes(Number(value))) {
+      //     callback(new Error('该顺序已存在，请重新输入'));
+      //   } else {
+      //     callback();
+      //   }
+      // },
       message: '请输入审批节点顺序',
       trigger: 'blur',
     },