refactor: 部门新增与编辑

web/.gitignore

@@ -1,7 +1,6 @@
 .DS_Store
 node_modules
 /dist
-package-lock.json
 yarn.lock
 
 # local env files

web/src/views/system/dept/components/DeptFormCom.vue

@@ -26,17 +26,20 @@
       <el-input-number v-model="deptFormData.sort" controls-position="right" />
     </el-form-item>
     <el-form-item>
-      <el-button @click="handleUpdateMenu('update')" type="primary" :disabled="deptBtnLoading">保存</el-button>
+      <el-button @click="handleUpdateMenu" type="primary" :disabled="deptBtnLoading">
+        {{ deptFormData.id ? '保存' : '新增' }}
+      </el-button>
       <el-button @click="handleClose">取消
       </el-button>
     </el-form-item>
-
   </el-form>
 </template>
 
 <script lang="ts" setup>
 import { reactive, ref, onMounted } from 'vue';
 import { ElForm, FormRules } from 'element-plus';
+import { AddObj, UpdateObj } from '../api';
+import { successMessage } from '../../../../utils/message';
 import { DeptFormDataType, TreeItemType } from '../types';
 
 interface IProps {
@@ -67,15 +70,47 @@ let deptFormData = reactive<DeptFormDataType>({
 })
 let deptBtnLoading = ref(false)
 
-const handleUpdateMenu = (type: string) => { };
+const setDeptFormData = () => {
+  if (props.initFormData?.id) {
+    deptFormData.id = props.initFormData?.id;
+    deptFormData.key = props.initFormData.key || '';
+    deptFormData.parent = props.initFormData.parent || '';
+    deptFormData.name = props.initFormData.name || '';
+    deptFormData.owner = props.initFormData.owner || '';
+    deptFormData.phone = props.initFormData.phone || '';
+    deptFormData.email = props.initFormData.email || '';
+    deptFormData.sort = props.initFormData.sort || 0;
+  }
+}
 
-const handleClose = () => {
+const handleUpdateMenu = () => {
-  emit('drawerClose')
+  formRef.value?.validate(async (valid) => {
+    if (!valid) return
+    try {
+      let res;
+      deptBtnLoading.value = true
+      if (deptFormData.id) {
+        res = await UpdateObj(deptFormData);
+      } else {
+        res = await AddObj(deptFormData)
+      }
+      if (res?.code === 2000) {
+        successMessage(res.msg as string);
+        handleClose('submit');
+      }
+    } finally {
+      deptBtnLoading.value = false
+    }
+  })
+};
+
+const handleClose = (type: string = '') => {
+  emit('drawerClose', type)
   formRef.value?.resetFields();
 };
 
 onMounted(() => {
-  console.log(props.initFormData?.id, '----');
+  setDeptFormData()
 })
 </script>
 

web/src/views/system/dept/index.vue

@@ -74,7 +74,7 @@
 
 		<el-drawer v-model="drawerVisible" title="部门配置" direction="rtl" size="500px" :close-on-click-modal="false"
 			:before-close="handleDrawerClose">
-			<FormCom v-if="drawerVisible" :initFormData="drawerFormData" @drawerClose="handleDrawerClose" />
+			<DeptFormCom v-if="drawerVisible" :initFormData="drawerFormData" @drawerClose="handleDrawerClose" />
 		</el-drawer>
 	</fs-page>
 </template>
@@ -84,7 +84,7 @@ import { ref, onMounted, reactive } from 'vue';
 import XEUtils from 'xe-utils';
 import { ElForm, ElMessageBox, FormRules } from 'element-plus';
 import TreeCom from './components/TreeCom.vue'
-import FormCom from './components/FormCom.vue'
+import DeptFormCom from './components/DeptFormCom.vue'
 import { GetList, AddObj, UpdateObj, DelObj } from './api';
 import { successMessage } from '../../../utils/message';
 import { APIResponseData, DeptFormDataType, TreeItemType } from './types';
@@ -182,7 +182,10 @@ const handleUpdateMenu = (type: string, record?: TreeItemType) => {
 	}); */
 
 };
-const handleDrawerClose = () => {
+const handleDrawerClose = (type?: string) => {
+	if (type === 'submit') {
+		getData()
+	}
 	drawerVisible.value = false
 	drawerFormData.value = {}
 }

web/src/views/system/dept/types.ts

@@ -40,9 +40,9 @@ export interface TreeItemType {
 }
 
 export interface DeptFormDataType {
-  id: string;
+  id: string | number;
   key: string;
-  parent: string;
+  parent: string | number;
   name: string;
   owner: string;
   phone: string;