From c0d6725d0deb71ac9820d6094ce04abb42129ecd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=9C=9F=E8=B1=86=E5=93=A5?= <zhanglp15229380174@163.com>
Date: Tue, 16 Aug 2022 15:21:20 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E7=AE=A1=E7=90=86=E5=92=8C=E6=9D=83=E9=99=90=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/QuickToolbar/index.vue         |   2 +-
 src/pages/login/index.vue                     |   2 +-
 src/types/menu.ts                             |   4 +-
 src/types/user.ts                             |  16 +-
 src/utils/index.ts                            |   2 +-
 src/views/permission/assignUser/index.vue     |  79 ++++----
 src/views/permission/rolePermission/index.vue | 103 +++++-----
 src/views/system/dept/index.vue               |  61 +++---
 src/views/system/dictionary/index.vue         |  75 ++++----
 src/views/system/dictionaryType/index.vue     |  40 ++--
 src/views/system/log/error.vue                | 124 ++++++------
 src/views/system/log/operate.vue              | 125 +++++++------
 src/views/system/menu/index.vue               |  54 +++---
 src/views/system/role/index.vue               |  12 +-
 src/views/system/user/index.vue               | 176 +++++++++---------
 15 files changed, 457 insertions(+), 418 deletions(-)

diff --git a/src/components/QuickToolbar/index.vue b/src/components/QuickToolbar/index.vue
index 4df432e..a0f13ac 100644
--- a/src/components/QuickToolbar/index.vue
+++ b/src/components/QuickToolbar/index.vue
@@ -171,7 +171,7 @@ const handleCustomClick = (item: any) => {
       @click="emits('onRefresh')"
       >{{ refreshButtonName }}</el-button
     >
-    <slot name="rightActions"></slot>
+    <slot name="rightToolbar"></slot>
   </div>
 </template>
 <style lang="scss" scoped>
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index b5137ab..419917d 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -25,11 +25,11 @@ const form = reactive<LoginParams>({
 const handleLogin = async (): Promise<void> => {
   loading.value = true
   await loginStore.login(form)
+  loading.value = false
   const user = await userStore.getUserInfo(loginStore.userName)
   const { id } = user
   await userStore.getPermission(id.toString())
   router.push('/')
-  loading.value = false
 }
 const keyDown = (e: KeyboardEvent) => {
   if (e.key === 'Enter') {
diff --git a/src/types/menu.ts b/src/types/menu.ts
index b5b17ec..f0d00be 100644
--- a/src/types/menu.ts
+++ b/src/types/menu.ts
@@ -1,5 +1,5 @@
 export interface Menu {
-  id: number
+  id: string
   menuId: string
   menuName: string
   path: string
@@ -7,7 +7,7 @@ export interface Menu {
   menuType: number
   icon: string
   sort: number
-  pid: number
+  pid: string
   link: number
   linkUrl: string
   enabled: number
diff --git a/src/types/user.ts b/src/types/user.ts
index 05bab9a..1cfdd1d 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -1,17 +1,17 @@
 export interface User {
-  id: string | number
+  id: string
   userId: string
   userName: string
   password?: string
   deleted?: number
   enabled?: number
-  createTime?: string | null
-  avatar?: string | null
-  fullName?: string | null
-  phone?: string | null
-  email?: string | null
-  address?: string | null
-  remark?: string | null
+  createTime?: string
+  avatar?: string
+  fullName?: string
+  phone?: string
+  email?: string
+  address?: string
+  remark?: string
 }
 export interface SearchUser {
   userName: string
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 223fbec..89115e6 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -69,7 +69,7 @@ export const treeFormat = (data: any, options: TreeOptions) => {
   })
   return arr
 }
-export const listToTableTree = (data: any, pId = 0) => {
+export const listToTableTree = (data: any, pId = '0') => {
   const arr = []
   const parentData = data.filter((x: any) => x.pId === pId)
   parentData.forEach((item: any) => {
diff --git a/src/views/permission/assignUser/index.vue b/src/views/permission/assignUser/index.vue
index ad3d944..2e40d5b 100644
--- a/src/views/permission/assignUser/index.vue
+++ b/src/views/permission/assignUser/index.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
 import { reactive, ref } from 'vue'
-import { treeFormat } from '@/utils'
+import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
 import QuickCrud from '@/components/QuickCrud/index.vue'
+import { treeFormat } from '@/utils'
 import { Column, Toolbar } from '@/types/table'
 import { User } from '@/types/user'
 import { Tree, LeftTree } from '@/types/tree'
@@ -10,8 +10,10 @@ import { getRoleList, getUserPermission, assignUser } from '@/api/role'
 import { getUserList } from '@/api/user'
 
 /**
- * 常规属性
+ * 属性
  */
+const dataList = reactive<Array<User>>([])
+const userList = reactive<Array<User>>([])
 const checkDataList = ref<Array<User>>([])
 const currentTreeData = ref<Tree>({
   id: '',
@@ -70,8 +72,8 @@ const tableToolbar = reactive<Toolbar>({
       name: '分配用户',
       position: 'left',
       type: 'primary',
-      click(data: any, done: any) {
-        handleAssign(data, done)
+      click() {
+        handleAssign()
       },
     },
   ],
@@ -79,11 +81,37 @@ const tableToolbar = reactive<Toolbar>({
 /**
  * 表格
  */
-const dataList = reactive<Array<User>>([])
-const userList = reactive<Array<User>>([])
-const handleSelectionChange = (selectDataList: Array<User>) => {
-  checkDataList.value = selectDataList
-}
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '用户编号',
+    prop: 'userId',
+    width: '200',
+  },
+  {
+    label: '用户名',
+    prop: 'userName',
+  },
+  {
+    label: '姓名',
+    prop: 'fullName',
+  },
+  {
+    label: '手机号',
+    prop: 'phone',
+  },
+  {
+    label: '邮箱',
+    prop: 'email',
+    width: '200',
+  },
+])
+/**
+ * 加载数据
+ */
 const load = () => {
   getUserList().then((res) => {
     const { data: userDataList } = res
@@ -91,6 +119,9 @@ const load = () => {
     userList.push(...userDataList)
   })
 }
+const handleSelectionChange = (selectDataList: Array<User>) => {
+  checkDataList.value = selectDataList
+}
 const tabRef = ref<InstanceType<typeof ElTable>>()
 const hanleTableRef = (instance: any) => {
   tabRef.value = instance.value
@@ -117,34 +148,6 @@ const getRows = (data: string[]) => {
   })
   return arr
 }
-const tableColumns = reactive<Array<Column>>([
-  {
-    width: '50',
-    type: 'selection',
-  },
-  {
-    label: '用户编号',
-    prop: 'userId',
-    width: '200',
-  },
-  {
-    label: '用户名',
-    prop: 'userName',
-  },
-  {
-    label: '姓名',
-    prop: 'fullName',
-  },
-  {
-    label: '手机号',
-    prop: 'phone',
-  },
-  {
-    label: '邮箱',
-    prop: 'email',
-    width: '200',
-  },
-])
 /**
  * 左树
  */
diff --git a/src/views/permission/rolePermission/index.vue b/src/views/permission/rolePermission/index.vue
index df86919..8c0e312 100644
--- a/src/views/permission/rolePermission/index.vue
+++ b/src/views/permission/rolePermission/index.vue
@@ -1,16 +1,16 @@
 <script lang="ts" setup>
-import { ElTree, ElMessage, ElMessageBox } from 'element-plus'
 import { nextTick, onMounted, reactive, ref } from 'vue'
+import { ElTree, ElMessage, ElMessageBox } from 'element-plus'
+import QuickToolbar from '@/components/QuickToolbar/index.vue'
 import { listToTree, treeFormat } from '@/utils'
 import { MenuTree } from '@/types/menu'
 import { Toolbar } from '@/types/table'
 import { Tree } from '@/types/tree'
 import { getRoleList, getMenuPermission, assignPermission } from '@/api/role'
 import { getMenuList } from '@/api/menu'
-import QuickToolbar from '@/components/QuickToolbar/index.vue'
 
 /**
- * 菜单tree
+ * 属性
  */
 const menuTreeRef = ref<InstanceType<typeof ElTree>>()
 const menuProps = reactive({
@@ -20,19 +20,6 @@ const menuProps = reactive({
 })
 const menuTreeData = reactive<Array<MenuTree>>([])
 const menuTreeList = reactive<Array<MenuTree>>([])
-const menuLoad = () => {
-  getMenuList().then((res) => {
-    const { data: menuList } = res
-    const menuTree = listToTree(menuList, 0, {
-      pId: 'pid',
-    })
-    menuTreeList.length = 0
-    menuTreeList.push(...menuTree)
-  })
-}
-/**
- * 角色tree
- */
 const roleTreeRef = ref<InstanceType<typeof ElTree>>()
 const roleProps = reactive({
   id: 'id',
@@ -45,39 +32,6 @@ const currentTreeData = ref<Tree>({
   label: '',
   children: [],
 })
-const handleNodeClick = (data: any) => {
-  currentTreeData.value = data
-  const { id } = currentTreeData.value
-  getMenuPermission(id).then((res) => {
-    const { data: menuList } = res
-    const value = menuList.map((x) => x.id)
-    menuTreeData.length = 0
-    menuTreeData.push(...menuTreeList)
-    nextTick(() => {
-      if (menuTreeRef.value) {
-        menuTreeRef.value.setCheckedKeys(value, false)
-      }
-    })
-  })
-}
-const roleTreeLoad = () => {
-  getRoleList().then((res) => {
-    const { data: roleList } = res
-    const roleTree = treeFormat(roleList, {
-      id: 'id',
-      label: 'roleName',
-      children: 'children',
-    })
-    roleTreeData.length = 0
-    roleTreeData.push(...roleTree)
-    nextTick(() => {
-      const key = roleTree[0].id
-      roleTreeRef.value?.setCurrentKey(key)
-      const node = roleTreeRef.value?.getCurrentNode() as Tree
-      handleNodeClick(node)
-    })
-  })
-}
 /**
  * 工具栏
  */
@@ -118,6 +72,9 @@ const handleGrant = () => {
       })
     })
 }
+/**
+ * 操作栏
+ */
 const tableToolbar = reactive<Toolbar>({
   btns: [
     {
@@ -131,12 +88,57 @@ const tableToolbar = reactive<Toolbar>({
     },
   ],
 })
+/**
+ * 加载数据
+ */
+const menuLoad = () => {
+  getMenuList().then((res) => {
+    const { data: menuList } = res
+    const menuTree = listToTree(menuList, 0, {
+      pId: 'pid',
+    })
+    menuTreeList.length = 0
+    menuTreeList.push(...menuTree)
+  })
+}
+const handleNodeClick = (data: any) => {
+  currentTreeData.value = data
+  const { id } = currentTreeData.value
+  getMenuPermission(id).then((res) => {
+    const { data: menuList } = res
+    const value = menuList.map((x) => x.id)
+    menuTreeData.length = 0
+    menuTreeData.push(...menuTreeList)
+    nextTick(() => {
+      if (menuTreeRef.value) {
+        menuTreeRef.value.setCheckedKeys(value, false)
+      }
+    })
+  })
+}
+const roleTreeLoad = () => {
+  getRoleList().then((res) => {
+    const { data: roleList } = res
+    const roleTree = treeFormat(roleList, {
+      id: 'id',
+      label: 'roleName',
+      children: 'children',
+    })
+    roleTreeData.length = 0
+    roleTreeData.push(...roleTree)
+    nextTick(() => {
+      const key = roleTree[0].id
+      roleTreeRef.value?.setCurrentKey(key)
+      const node = roleTreeRef.value?.getCurrentNode() as Tree
+      handleNodeClick(node)
+    })
+  })
+}
 onMounted(() => {
   roleTreeLoad()
   menuLoad()
 })
 </script>
-
 <template>
   <div clas="content">
     <el-row :gutter="20">
@@ -163,7 +165,6 @@ onMounted(() => {
             :hidden-print-button="true"
             :hidden-refresh-button="true"
           ></quick-toolbar>
-          <!-- :default-checked-keys="" -->
           <el-tree
             ref="menuTreeRef"
             :data="menuTreeData"
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index da868d9..685e68b 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import QuickCrud from '@/components/QuickCrud/index.vue'
 import { listToTableTree, selectTreeFormat } from '@/utils'
 import { Column, Actionbar, Toolbar } from '@/types/table'
 import { Dept } from '@/types/dept'
@@ -8,10 +9,9 @@ import { FormItem } from '@/types/form'
 import { Options } from '@/types/options'
 import { Tree, LeftTree } from '@/types/tree'
 import { getDeptList, addDept, updateDept, deleteDept } from '@/api/dept'
-import QuickCrud from '@/components/QuickCrud/index.vue'
 
 /**
- * 常规属性
+ * 属性
  */
 const deptDdataListTemp = reactive<Array<Dept>>([])
 const dicTypeList = reactive<Array<Options>>([])
@@ -75,6 +75,7 @@ const formItems = reactive<Array<FormItem>>([
     editDisabled: true,
     detailDisabled: true,
     options: dicTypeList,
+    prop: 'pId',
   },
 ])
 const handleFormSubmit = (form: Dept, done: any) => {
@@ -96,15 +97,9 @@ const handleFormSubmit = (form: Dept, done: any) => {
     })
   }
 }
-const handleEdit = (form: any, done: any) => {
-  const model = form
-  model.pId = model.pId.toString()
-  done(model)
-}
 /**
  * 工具栏
  */
-
 const tableToolbar = reactive<Toolbar>({
   hiddenBatchDeleteButton: true,
   hiddenImportButton: true,
@@ -112,23 +107,13 @@ const tableToolbar = reactive<Toolbar>({
   hiddenPrintButton: true,
 })
 /**
- * 表格
+ * 操作栏
  */
-const tableColumns = reactive<Array<Column>>([
-  {
-    width: '50',
-    type: 'selection',
-  },
-  {
-    label: '部门编号',
-    prop: 'deptId',
-    width: '200',
-  },
-  {
-    label: '部门名称',
-    prop: 'name',
-  },
-])
+const handleEdit = (form: any, done: any) => {
+  const model = form
+  model.pId = model.pId.toString()
+  done(model)
+}
 const handleDelete = (item: Dept, done: any) => {
   ElMessageBox.confirm(`你真的删除【${item.name}】的部门吗？`, '警告', {
     confirmButtonText: '确定',
@@ -148,6 +133,24 @@ const tableActionbar = reactive<Actionbar>({
   width: 300,
   hiddenDetailButton: true,
 })
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '部门编号',
+    prop: 'deptId',
+    width: '200',
+  },
+  {
+    label: '部门名称',
+    prop: 'name',
+  },
+])
 const deptTreeFormat = (data: Array<Dept>, pId = '0') => {
   const arr: Array<Tree> = []
   const obj: Tree = {
@@ -155,12 +158,12 @@ const deptTreeFormat = (data: Array<Dept>, pId = '0') => {
     label: '',
     children: [],
   }
-  const parentData = data.find((x: any) => x.pId === Number(pId))
+  const parentData = data.find((x: Dept) => x.pId === pId)
   if (parentData) {
     obj.id = parentData.id.toString()
     obj.label = parentData.name
     const parentId = parentData.id
-    const companyData = data.filter((x: any) => x.pId === Number(parentId))
+    const companyData = data.filter((x: Dept) => x.pId === parentId)
     companyData.forEach((item: Dept) => {
       if (companyData) {
         const companyObj: Tree = {
@@ -169,7 +172,7 @@ const deptTreeFormat = (data: Array<Dept>, pId = '0') => {
           children: [],
         }
         const companyPid = item.id
-        const deptData = data.filter((x: any) => x.pId === Number(companyPid))
+        const deptData = data.filter((x: Dept) => x.pId === companyPid)
         deptData.forEach((deptItem) => {
           companyObj.children.push({
             id: deptItem.id.toString(),
@@ -189,7 +192,7 @@ const deptTreeFormat = (data: Array<Dept>, pId = '0') => {
  */
 const load = () => {
   const { id } = currentTreeData.value
-  const pId = Number(id)
+  const pId = id
   const deptTree = listToTableTree(deptDdataListTemp, pId)
   dataList.length = 0
   dataList.push(...deptTree)
@@ -204,7 +207,7 @@ const leftTree = reactive<LeftTree>({
   treeSpan: 6,
 })
 const treeLoad = (done: any) => {
-  getDeptList().then((res: any) => {
+  getDeptList().then((res) => {
     const { data: deptList } = res
     deptDdataListTemp.length = 0
     deptDdataListTemp.push(...deptList)
diff --git a/src/views/system/dictionary/index.vue b/src/views/system/dictionary/index.vue
index 7b45410..81c116b 100644
--- a/src/views/system/dictionary/index.vue
+++ b/src/views/system/dictionary/index.vue
@@ -7,7 +7,7 @@ import { Column, Actionbar, Toolbar } from '@/types/table'
 import { Dictionary } from '@/types/dictionary'
 import { FormItem } from '@/types/form'
 import { Options } from '@/types/options'
-import { Tree } from '@/types/tree'
+import { Tree, LeftTree } from '@/types/tree'
 import { getDictionaryTypeList } from '@/api/dictionaryType'
 import {
   getDictionaryList,
@@ -15,10 +15,9 @@ import {
   updateDictionary,
   deleteDictionary,
 } from '@/api/dictionary'
-import { LeftTree } from '../../types/tree'
 
 /**
- * 常规属性
+ * 属性
  */
 const dicTypeList = reactive<Array<Options>>([])
 const treeDataList = reactive<Array<Tree>>([])
@@ -82,6 +81,7 @@ const formItems = reactive<Array<FormItem>>([
     editDisabled: true,
     detailDisabled: true,
     options: dicTypeList,
+    prop: 'dicTypeId',
     change: (val: string) => {
       console.log('change', val)
     },
@@ -117,33 +117,14 @@ const tableToolbar = reactive<Toolbar>({
   hiddenPrintButton: true,
 })
 /**
- * 表格
+ * 操作栏
  */
-const tableColumns = reactive<Array<Column>>([
-  {
-    width: '50',
-    type: 'selection',
-  },
-  {
-    label: '字典编号',
-    prop: 'dicId',
-    width: '200',
-  },
-  {
-    label: '字典名称',
-    prop: 'name',
-  },
-])
 const handleDelete = (item: Dictionary, done: any) => {
-  ElMessageBox.confirm(
-    `你真的删除【${item.dictionaryName}】的字典吗？`,
-    '警告',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    }
-  ).then(() => {
+  ElMessageBox.confirm(`你真的删除【${item.name}】的字典吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
     deleteDictionary(item.id).then(() => {
       ElMessage({
         type: 'success',
@@ -158,16 +139,23 @@ const tableActionbar = reactive<Actionbar>({
   hiddenDetailButton: true,
 })
 /**
- * 加载数据
+ * 表格
  */
-const load = (parmas: object) => {
-  const { id } = currentTreeData.value
-  getDictionaryList(id).then((res: any) => {
-    const { data: dictionaryList } = res
-    dataList.length = 0
-    dataList.push(...dictionaryList)
-  })
-}
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '字典编号',
+    prop: 'dicId',
+    width: '200',
+  },
+  {
+    label: '字典名称',
+    prop: 'name',
+  },
+])
 /**
  * 左树
  */
@@ -175,7 +163,7 @@ const leftTree = reactive<LeftTree>({
   treeData: [],
 })
 const treeLoad = (done: any) => {
-  getDictionaryTypeList().then((res: any) => {
+  getDictionaryTypeList().then((res) => {
     const { data: dictionaryTypeList } = res
     const data = treeFormat(dictionaryTypeList, {
       id: 'dicTypeId',
@@ -201,6 +189,17 @@ const handleTreeClick = (data: Tree, done: any) => {
   currentTreeData.value = data
   done()
 }
+/**
+ * 加载数据
+ */
+const load = () => {
+  const { id } = currentTreeData.value
+  getDictionaryList(id).then((res) => {
+    const { data: dictionaryList } = res
+    dataList.length = 0
+    dataList.push(...dictionaryList)
+  })
+}
 </script>
 <template>
   <quick-crud
diff --git a/src/views/system/dictionaryType/index.vue b/src/views/system/dictionaryType/index.vue
index cc4e248..5bb8d83 100644
--- a/src/views/system/dictionaryType/index.vue
+++ b/src/views/system/dictionaryType/index.vue
@@ -12,6 +12,9 @@ import {
   deleteDictionaryType,
 } from '@/api/dictionaryType'
 
+/**
+ * 属性
+ */
 const dataList = reactive<Array<DictionaryType>>([])
 /**
  * 表单
@@ -87,23 +90,8 @@ const tableToolbar = reactive<Toolbar>({
   hiddenPrintButton: true,
 })
 /**
- * 表格
+ * 操作栏
  */
-const tableColumns = reactive<Array<Column>>([
-  {
-    width: '50',
-    type: 'selection',
-  },
-  {
-    label: '分类编号',
-    prop: 'dicTypeId',
-    width: '200',
-  },
-  {
-    label: '字典分类',
-    prop: 'name',
-  },
-])
 const handleDelete = (item: DictionaryType, done: any) => {
   ElMessageBox.confirm(`你真的删除【${item.name}】的字典分类吗？`, '警告', {
     confirmButtonText: '确定',
@@ -123,10 +111,28 @@ const tableActionbar = reactive<Actionbar>({
   width: 100,
   hiddenDetailButton: true,
 })
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '分类编号',
+    prop: 'dicTypeId',
+    width: '200',
+  },
+  {
+    label: '字典分类',
+    prop: 'name',
+  },
+])
 /**
  * 加载数据
  */
-const load = (parmas: object) => {
+const load = () => {
   getDictionaryTypeList().then((res) => {
     const { data: dictionaryTypeList } = res
     dataList.length = 0
diff --git a/src/views/system/log/error.vue b/src/views/system/log/error.vue
index 7a39b1c..f0bcb79 100644
--- a/src/views/system/log/error.vue
+++ b/src/views/system/log/error.vue
@@ -3,12 +3,40 @@ import { reactive } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import QuickCrud from '@/components/QuickCrud/index.vue'
 import { Column, Actionbar, Toolbar } from '@/types/table'
-import { Log, SearchLog } from '@/types/log'
 import { FormItem } from '@/types/form'
 import { Page } from '@/types/page'
+import { Log, SearchLog } from '@/types/log'
 import { getLogPageList, removeLog, batchRemove } from '@/api/log'
 
+/**
+ * 属性
+ */
 const dataList = reactive<Array<Log>>([])
+/**
+ * 分页
+ */
+const page = reactive<Page>({
+  current: 1,
+  size: 10,
+  sizes: [10, 20, 30, 40, 50],
+  total: 100,
+})
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchLog>({
+  startTime: '',
+  endTime: '',
+  logTime: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '日志时间',
+    vModel: 'logTime',
+    placeholders: ['开始时间', '结束时间'],
+    type: 'datetimerange',
+  },
+])
 /**
  * 表单
  */
@@ -64,40 +92,41 @@ const formItems = reactive<Array<FormItem>>([
     type: 'textarea',
   },
 ])
-
-/**
- * 搜索
- */
-const searchForm = reactive<SearchLog>({
-  startTime: '',
-  endTime: '',
-  logTime: '',
-})
-const searchFormItems = reactive<Array<FormItem>>([
-  {
-    label: '日志时间',
-    vModel: 'logTime',
-    placeholders: ['开始时间', '结束时间'],
-    type: 'datetimerange',
-  },
-])
 /**
  * 工具栏
  */
+const handleBatchDelete = (data: any, done: any) => {
+  const { ids } = data
+  ElMessageBox.confirm(`你真的删除选择的日志吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    batchRemove(ids).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '日志删除成功',
+      })
+      done()
+    })
+  })
+}
 const tableToolbar = reactive<Toolbar>({
   hiddenImportButton: true,
   hiddenExportButton: true,
   hiddenAddButton: true,
   hiddenPrintButton: true,
 })
-const handleBatchDelete = (data: any, done: any) => {
-  const { ids } = data
-  ElMessageBox.confirm(`你真的删除选择的日志吗？`, '警告', {
+/**
+ * 操作栏
+ */
+const handleDelete = (item: Log, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.id}】的日志吗？`, '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning',
   }).then(() => {
-    batchRemove(ids).then(() => {
+    removeLog(item.id.toString()).then(() => {
       ElMessage({
         type: 'success',
         message: '日志删除成功',
@@ -106,6 +135,18 @@ const handleBatchDelete = (data: any, done: any) => {
     })
   })
 }
+const handleDetail = (item: Log, done: any) => {
+  const form: Log = { ...item }
+  if (form.requestParams) {
+    const params = JSON.parse(form.requestParams)
+    form.requestParams = JSON.stringify(params, null, 4)
+    done(form)
+  }
+}
+const tableActionbar = reactive<Actionbar>({
+  width: 150,
+  hiddenEditButton: true,
+})
 /**
  * 表格
  */
@@ -140,42 +181,6 @@ const tableColumns = reactive<Array<Column>>([
     prop: 'requestParams',
   },
 ])
-const handleDelete = (item: Log, done: any) => {
-  ElMessageBox.confirm(`你真的删除【${item.id}】的日志吗？`, '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
-    removeLog(item.id.toString()).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '日志删除成功',
-      })
-      done()
-    })
-  })
-}
-const handleDetail = (item: Log, done: any) => {
-  const form: Log = { ...item }
-  if (form.requestParams) {
-    const params = JSON.parse(form.requestParams)
-    form.requestParams = JSON.stringify(params, null, 4)
-    done(form)
-  }
-}
-const tableActionbar = reactive<Actionbar>({
-  width: 150,
-  hiddenEditButton: true,
-})
-/**
- * 分页
- */
-const page = reactive<Page>({
-  current: 1,
-  size: 10,
-  sizes: [10, 20, 30, 40, 50],
-  total: 100,
-})
 /**
  * 加载数据
  */
@@ -218,8 +223,5 @@ const load = (params: any) => {
     @on-detail="handleDetail"
     @on-delete="handleDelete"
     @on-batch-delete="handleBatchDelete"
-    @on-import="handleImport"
-    @on-export="handleExport"
-    @on-print="handlePrint"
   ></quick-crud>
 </template>
diff --git a/src/views/system/log/operate.vue b/src/views/system/log/operate.vue
index 2cf64fd..5f25a16 100644
--- a/src/views/system/log/operate.vue
+++ b/src/views/system/log/operate.vue
@@ -8,7 +8,35 @@ import { FormItem } from '@/types/form'
 import { Page } from '@/types/page'
 import { getLogPageList, removeLog, batchRemove } from '@/api/log'
 
+/**
+ * 属性
+ */
 const dataList = reactive<Array<Log>>([])
+/**
+ * 分页
+ */
+const page = reactive<Page>({
+  current: 1,
+  size: 10,
+  sizes: [10, 20, 30, 40, 50],
+  total: 100,
+})
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchLog>({
+  startTime: '',
+  endTime: '',
+  logTime: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '日志时间',
+    vModel: 'logTime',
+    placeholders: ['开始时间', '结束时间'],
+    type: 'datetimerange',
+  },
+])
 /**
  * 表单
  */
@@ -53,32 +81,9 @@ const formItems = reactive<Array<FormItem>>([
     type: 'textarea',
   },
 ])
-
-/**
- * 搜索
- */
-const searchForm = reactive<SearchLog>({
-  startTime: '',
-  endTime: '',
-  logTime: '',
-})
-const searchFormItems = reactive<Array<FormItem>>([
-  {
-    label: '日志时间',
-    vModel: 'logTime',
-    placeholders: ['开始时间', '结束时间'],
-    type: 'datetimerange',
-  },
-])
 /**
  * 工具栏
  */
-const tableToolbar = reactive<Toolbar>({
-  hiddenImportButton: true,
-  hiddenExportButton: true,
-  hiddenAddButton: true,
-  hiddenPrintButton: true,
-})
 const handleBatchDelete = (data: any, done: any) => {
   const { ids } = data
   ElMessageBox.confirm(`你真的删除选择的日志吗？`, '警告', {
@@ -95,35 +100,15 @@ const handleBatchDelete = (data: any, done: any) => {
     })
   })
 }
+const tableToolbar = reactive<Toolbar>({
+  hiddenImportButton: true,
+  hiddenExportButton: true,
+  hiddenAddButton: true,
+  hiddenPrintButton: true,
+})
 /**
- * 表格
+ * 操作栏
  */
-const tableColumns = reactive<Array<Column>>([
-  {
-    width: '50',
-    type: 'selection',
-    align: 'center',
-  },
-  {
-    label: '日志时间',
-    prop: 'logTime',
-    width: '200',
-  },
-  {
-    label: 'IP',
-    prop: 'ip',
-    width: '120',
-  },
-  {
-    label: '操作接口',
-    prop: 'operateApi',
-    width: '300',
-  },
-  {
-    label: '请求参数',
-    prop: 'requestParams',
-  },
-])
 const handleDelete = (item: Log, done: any) => {
   ElMessageBox.confirm(`你真的删除【${item.id}】的日志吗？`, '警告', {
     confirmButtonText: '确定',
@@ -147,20 +132,39 @@ const handleDetail = (item: Log, done: any) => {
     done(form)
   }
 }
-
 const tableActionbar = reactive<Actionbar>({
   width: 150,
   hiddenEditButton: true,
 })
 /**
- * 分页
+ * 表格
  */
-const page = reactive<Page>({
-  current: 1,
-  size: 10,
-  sizes: [10, 20, 30, 40, 50],
-  total: 100,
-})
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+    align: 'center',
+  },
+  {
+    label: '日志时间',
+    prop: 'logTime',
+    width: '200',
+  },
+  {
+    label: 'IP',
+    prop: 'ip',
+    width: '120',
+  },
+  {
+    label: '操作接口',
+    prop: 'operateApi',
+    width: '300',
+  },
+  {
+    label: '请求参数',
+    prop: 'requestParams',
+  },
+])
 /**
  * 加载数据
  */
@@ -178,7 +182,7 @@ const load = (params: any) => {
   } else {
     obj = { ...params, logType: 0, logTime: null }
   }
-  getLogPageList(obj).then((res: any) => {
+  getLogPageList(obj).then((res) => {
     const { data: logList, page: pagination } = res
     if (logList) {
       dataList.length = 0
@@ -207,8 +211,5 @@ const load = (params: any) => {
     @on-detail="handleDetail"
     @on-delete="handleDelete"
     @on-batch-delete="handleBatchDelete"
-    @on-import="handleImport"
-    @on-export="handleExport"
-    @on-print="handlePrint"
   ></quick-crud>
 </template>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 5a3f887..2065426 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,15 +1,18 @@
 <script lang="ts" setup>
 import { reactive } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import QuickCrud from '@/components/QuickCrud/index.vue'
 import { selectTreeFormat, listToTree } from '@/utils/index'
+import elementPlusIcons from '@/config/custormIcons.json'
 import { Column, Actionbar, Toolbar } from '@/types/table'
 import { Menu } from '@/types/menu'
 import { FormItem } from '@/types/form'
 import { Options } from '@/types/options'
 import { getMenuList, addMenu, updateMenu, deleteMenu } from '@/api/menu'
-import QuickCrud from '@/components/QuickCrud/index.vue'
-import elementPlusIcons from '@/config/custormIcons.json'
 
+/**
+ * 属性
+ */
 const dataList = reactive<Array<Menu>>([])
 const parentTreeList = reactive<Array<Options>>([])
 /**
@@ -21,7 +24,7 @@ const dialogTitle = reactive({
   detail: '菜单详情',
 })
 const formModel = reactive<Menu>({
-  id: 0,
+  id: '',
   menuId: '',
   menuName: '',
   path: '',
@@ -29,7 +32,7 @@ const formModel = reactive<Menu>({
   menuType: 0,
   icon: '',
   sort: 0,
-  pid: 0,
+  pid: '',
   link: 0,
   linkUrl: '',
   enabled: 1,
@@ -116,6 +119,7 @@ const formItems = reactive<Array<FormItem>>([
     vModel: 'path',
     placeholder: '路由',
     width: '400px',
+    prop: 'path',
   },
   {
     label: '视图',
@@ -123,6 +127,7 @@ const formItems = reactive<Array<FormItem>>([
     vModel: 'viewPath',
     placeholder: '视图',
     width: '400px',
+    prop: 'viewPath',
   },
   {
     label: '排序',
@@ -140,6 +145,7 @@ const formItems = reactive<Array<FormItem>>([
     type: 'tree',
     options: parentTreeList,
     width: '400px',
+    prop: 'pid',
   },
   {
     label: '是否启用',
@@ -174,6 +180,7 @@ const formItems = reactive<Array<FormItem>>([
     vModel: 'linkUrl',
     placeholder: '链接地址',
     width: '400px',
+    prop: 'linkUrl',
   },
 ])
 const handleFormSubmit = (form: Menu, done: any) => {
@@ -204,6 +211,27 @@ const tableToolbar = reactive<Toolbar>({
   hiddenExportButton: true,
   hiddenPrintButton: true,
 })
+/**
+ * 操作栏
+ */
+const handleDelete = (item: Menu, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.menuName}】的菜单吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteMenu(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '菜单删除成功',
+      })
+      done()
+    })
+  })
+}
+const tableActionbar = reactive<Actionbar>({
+  width: 150,
+})
 /**
  * 表格
  */
@@ -284,24 +312,6 @@ const tableColumns = reactive<Array<Column>>([
     },
   },
 ])
-const handleDelete = (item: Menu, done: any) => {
-  ElMessageBox.confirm(`你真的删除【${item.menuName}】的菜单吗？`, '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
-    deleteMenu(item.id).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '菜单删除成功',
-      })
-      done()
-    })
-  })
-}
-const tableActionbar = reactive<Actionbar>({
-  width: 150,
-})
 /**
  * 加载数据
  */
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index a269961..830cd1d 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -7,6 +7,9 @@ import { Role } from '@/types/role'
 import { FormItem } from '@/types/form'
 import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
 
+/**
+ * 属性
+ */
 const dataList = reactive<Array<Role>>([])
 /**
  * 表单
@@ -81,6 +84,12 @@ const tableToolbar = reactive<Toolbar>({
   hiddenExportButton: true,
   hiddenPrintButton: true,
 })
+/**
+ * 操作栏
+ */
+const tableActionbar = reactive<Actionbar>({
+  width: 150,
+})
 /**
  * 表格
  */
@@ -114,9 +123,6 @@ const handleDelete = (item: Role, done: any) => {
     })
   })
 }
-const tableActionbar = reactive<Actionbar>({
-  width: 150,
-})
 /**
  * 加载数据
  */
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 1866cc5..bd45c49 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -6,7 +6,6 @@ import { Column, Actionbar, Toolbar } from '@/types/table'
 import { User, SearchUser } from '@/types/user'
 import { FormItem } from '@/types/form'
 import { Page } from '@/types/page'
-import { useUserStore } from '@/store/modules/user'
 import {
   getUserPageList,
   addUser,
@@ -18,7 +17,32 @@ import {
   disableUser,
 } from '@/api/user'
 
+/**
+ * 属性
+ */
 const dataList = reactive<Array<User>>([])
+/**
+ * 分页
+ */
+const page = reactive<Page>({
+  current: 1,
+  size: 10,
+  sizes: [10, 20, 30, 40, 50],
+  total: 100,
+})
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchUser>({
+  userName: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '用户名',
+    vModel: 'userName',
+    placeholder: '用户名',
+  },
+])
 /**
  * 表单
  */
@@ -78,8 +102,10 @@ const formModel = reactive<User>({
   id: '',
   userId: '',
   userName: '',
-  password: '',
-  createTime: '',
+  fullName: '',
+  phone: '',
+  email: '',
+  address: '',
   remark: '',
 })
 const formItems = reactive<Array<FormItem>>([
@@ -164,6 +190,7 @@ const formItems = reactive<Array<FormItem>>([
     labelWidth: '80px',
     vModel: 'address',
     placeholder: '地址',
+    prop: 'address',
   },
   {
     label: '备注',
@@ -171,9 +198,9 @@ const formItems = reactive<Array<FormItem>>([
     vModel: 'remark',
     placeholder: '备注',
     type: 'textarea',
+    prop: 'remark',
   },
 ])
-
 const handleFormSubmit = (form: User, done: any) => {
   console.log('handleFormSubmit', form)
   if (form.id) {
@@ -194,27 +221,11 @@ const handleFormSubmit = (form: User, done: any) => {
     })
   }
 }
-/**
- * 搜索
- */
-const searchForm = reactive<SearchUser>({
-  userName: '',
-})
-const searchFormItems = reactive<Array<FormItem>>([
-  {
-    label: '用户名',
-    vModel: 'userName',
-    placeholder: '用户名',
-  },
-])
 /**
  * 工具栏
  */
-const tableToolbar = reactive<Toolbar>({
-  hiddenBatchDeleteButton: false,
-})
 const handleBatchDelete = (data: any, done: any) => {
-  const { checkDataList, ids } = data
+  const { ids } = data
   ElMessageBox.confirm(`你真的删除选择的用户吗？`, '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
@@ -238,63 +249,12 @@ const handleExport = () => {
 const handlePrint = () => {
   window.print()
 }
+const tableToolbar = reactive<Toolbar>({
+  hiddenBatchDeleteButton: false,
+})
 /**
- * 表格
+ * 操作栏
  */
-const tableColumns = reactive<Array<Column>>([
-  {
-    width: '100',
-    type: 'selection',
-    align: 'center',
-  },
-  {
-    label: '用户编号',
-    prop: 'userId',
-    width: '100',
-  },
-  {
-    label: '用户名',
-    prop: 'userName',
-    width: '100',
-  },
-  {
-    label: '姓名',
-    prop: 'fullName',
-    width: '100',
-  },
-  {
-    label: '手机号',
-    prop: 'phone',
-    width: '180',
-  },
-  {
-    label: '邮箱',
-    prop: 'email',
-    width: '200',
-  },
-  {
-    label: '是否启用',
-    prop: 'enabled',
-    width: '200',
-    format: (row: User) => {
-      return row.enabled === 1 ? '禁用' : '启用'
-    },
-  },
-  {
-    label: '创建时间',
-    prop: 'createTime',
-    width: '200',
-  },
-  {
-    label: '地址',
-    prop: 'address',
-    width: '200',
-  },
-  {
-    label: '备注',
-    prop: 'remark',
-  },
-])
 const handleDelete = (item: User, done: any) => {
   ElMessageBox.confirm(`你真的删除【${item.userName}】的用户吗？`, '警告', {
     confirmButtonText: '确定',
@@ -385,19 +345,67 @@ const tableActionbar = reactive<Actionbar>({
   ],
 })
 /**
- * 分页
+ * 表格
  */
-const page = reactive<Page>({
-  current: 1,
-  size: 10,
-  sizes: [10, 20, 30, 40, 50],
-  total: 100,
-})
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '100',
+    type: 'selection',
+    align: 'center',
+  },
+  {
+    label: '用户编号',
+    prop: 'userId',
+    width: '100',
+  },
+  {
+    label: '用户名',
+    prop: 'userName',
+    width: '100',
+  },
+  {
+    label: '姓名',
+    prop: 'fullName',
+    width: '100',
+  },
+  {
+    label: '手机号',
+    prop: 'phone',
+    width: '180',
+  },
+  {
+    label: '邮箱',
+    prop: 'email',
+    width: '200',
+  },
+  {
+    label: '是否启用',
+    prop: 'enabled',
+    width: '200',
+    format: (row: User) => {
+      return row.enabled === 1 ? '禁用' : '启用'
+    },
+  },
+  {
+    label: '创建时间',
+    prop: 'createTime',
+    width: '200',
+  },
+  {
+    label: '地址',
+    prop: 'address',
+    width: '200',
+  },
+  {
+    label: '备注',
+    prop: 'remark',
+  },
+])
 /**
  * 加载数据
  */
 const load = (parmas: object) => {
-  getUserPageList(parmas).then((res: any) => {
+  getUserPageList(parmas).then((res) => {
     const { data: userList, page: pagination } = res
     if (userList) {
       dataList.length = 0
-- 
Gitee


From a70ea34cbdb4b018a24e44762139995e51aa6dd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=9C=9F=E8=B1=86=E5=93=A5?= <zhanglp15229380174@163.com>
Date: Tue, 16 Aug 2022 15:26:36 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E6=B8=85=E7=A9=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/QuickCrud/index.vue | 88 +++++++++++++-----------------
 src/components/QuickForm/index.vue | 23 ++++++--
 vite.config.ts                     |  2 +-
 3 files changed, 59 insertions(+), 54 deletions(-)

diff --git a/src/components/QuickCrud/index.vue b/src/components/QuickCrud/index.vue
index 7b93372..b4bcbcf 100644
--- a/src/components/QuickCrud/index.vue
+++ b/src/components/QuickCrud/index.vue
@@ -20,20 +20,6 @@ import { FormItem } from '@/types/form'
 import { Page } from '@/types/page'
 import { LeftTree, Tree } from '@/types/tree'
 
-/**
- * 属性
- */
-const formTitle = reactive({
-  add: '添加',
-  edit: '编辑',
-  delete: '删除',
-  detail: '详情',
-})
-const title = ref('')
-const quickFormRef = ref<InstanceType<typeof QuickForm>>()
-const dialogFormVisible = ref(false)
-const dialogFormType = ref('')
-const checkDataList = reactive<Array<any>>([])
 /**
  * props
  */
@@ -174,11 +160,23 @@ const emits = defineEmits([
   'onSelectionChange',
   'onTableRef',
 ])
+
 /**
- * 常规属性
+ * 属性
  */
+const quickFormRef = ref<InstanceType<typeof QuickForm>>()
+const dialogFormVisible = ref(false)
+const dialogFormType = ref('')
+const checkDataList = reactive<Array<any>>([])
 const selectTree = ref<Tree>({})
 const treeRef = ref<InstanceType<typeof ElTree>>()
+const title = ref('')
+const formTitle = reactive({
+  add: '添加',
+  edit: '编辑',
+  delete: '删除',
+  detail: '详情',
+})
 /**
  * 加载数据
  */
@@ -229,9 +227,6 @@ const handleSearchClear = () => {
  * 操作栏
  */
 const handleEdit = (row: any) => {
-  dialogFormType.value = 'edit'
-  formTitle.edit = dialogTitle.value ? dialogTitle.value.edit : formTitle.edit
-  title.value = formTitle.edit
   Object.keys(formModel.value).forEach((key) => {
     formModel.value[key] = row[key]
   })
@@ -241,6 +236,9 @@ const handleEdit = (row: any) => {
     })
     dialogFormVisible.value = true
   })
+  dialogFormType.value = 'edit'
+  formTitle.edit = dialogTitle.value ? dialogTitle.value.edit : formTitle.edit
+  title.value = formTitle.edit
   dialogFormVisible.value = true
 }
 const handleDelete = (row: any) => {
@@ -249,11 +247,6 @@ const handleDelete = (row: any) => {
   })
 }
 const handleDetail = (row: any) => {
-  dialogFormType.value = 'detail'
-  formTitle.detail = dialogTitle.value
-    ? dialogTitle.value.detail
-    : formTitle.detail
-  title.value = formTitle.detail
   Object.keys(formModel.value).forEach((key) => {
     formModel.value[key] = row[key]
   })
@@ -263,30 +256,30 @@ const handleDetail = (row: any) => {
     })
     dialogFormVisible.value = true
   })
+  dialogFormType.value = 'detail'
+  formTitle.detail = dialogTitle.value
+    ? dialogTitle.value.detail
+    : formTitle.detail
+  title.value = formTitle.detail
   dialogFormVisible.value = true
 }
 /**
  * 表单
  */
 const handleOk = () => {
-  if (quickFormRef.value) {
-    quickFormRef.value.handleSubmit()
-  }
+  quickFormRef.value?.handleSubmit()
 }
 const handleCancel = () => {
+  Object.keys(formModel.value).forEach((key) => {
+    formModel.value[key] = ''
+  })
+  quickFormRef.value?.handleClear()
   dialogFormVisible.value = false
 }
-const handleSubmit = (formRef: FormInstance | undefined) => {
-  if (!formRef) return
-  formRef.validate((valid) => {
-    if (!valid) {
-      return false
-    }
-    emits('onFormSubmit', formModel.value, () => {
-      dialogFormVisible.value = false
-      refresh()
-    })
-    return true
+const handleFormSubmit = () => {
+  emits('onFormSubmit', formModel.value, () => {
+    dialogFormVisible.value = false
+    refresh()
   })
 }
 /**
@@ -300,16 +293,12 @@ const handleAdd = () => {
     })
     return
   }
-  Object.keys(formModel.value).forEach((key) => {
-    formModel.value[key] = ''
-    const index = formItems.value.findIndex(
-      (x) => x.vModel === key && (x.type === 'select' || x.type === 'tree')
-    )
-    if (index !== -1) {
-      formModel.value[key] = selectTree.value.id
-    }
+  emits('onAdd', formModel.value, (data: any) => {
+    Object.keys(formModel.value).forEach((key) => {
+      formModel.value[key] = data[key]
+    })
+    dialogFormVisible.value = true
   })
-
   dialogFormType.value = 'add'
   formTitle.add = dialogTitle.value ? dialogTitle.value.add : formTitle.add
   title.value = formTitle.add
@@ -528,12 +517,12 @@ onActivated(() => {
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
         />
+        <!-- 
+          :destroy-on-close="true" -->
         <el-dialog
           v-model="dialogFormVisible"
           :title="title"
           :width="formInline ? '60%' : '35%'"
-          :append-to-body="true"
-          :destroy-on-close="true"
           @close="handleCancel()"
         >
           <quick-form
@@ -543,7 +532,8 @@ onActivated(() => {
             :form-inline="formInline"
             :form-type="dialogFormType"
             :hidden-action="true"
-            @submit="handleSubmit"
+            :append-to-body="true"
+            @on-submit="handleFormSubmit"
           >
           </quick-form>
           <template #footer>
diff --git a/src/components/QuickForm/index.vue b/src/components/QuickForm/index.vue
index fb35bd6..537643f 100644
--- a/src/components/QuickForm/index.vue
+++ b/src/components/QuickForm/index.vue
@@ -58,7 +58,7 @@ const { model, formInline, formItems, formType, actionSlot, hiddenAction } =
 /**
  * emits
  */
-const emits = defineEmits(['submit', 'clear'])
+const emits = defineEmits(['onSubmit'])
 const iconVisible = ref(false)
 /**
  * tabs
@@ -77,13 +77,28 @@ const iconClick = () => {
 /**
  * 函数
  */
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+      emits('onSubmit', formRef.value)
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+}
 const handleSubmit = () => {
-  emits('submit', formRef.value)
+  submitForm(formRef.value)
 }
 const handleClear = () => {
-  emits('clear')
+  resetForm(formRef.value)
 }
-defineExpose({ handleSubmit })
+defineExpose({ handleSubmit, handleClear })
 </script>
 <template>
   <el-form ref="formRef" :model="model" :inline="formInline" size="default">
diff --git a/vite.config.ts b/vite.config.ts
index 5847f7f..cbdbf5a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -61,7 +61,7 @@ export default ({ command, mode }) => {
       https: false, // 运行服务是否以https方式
       host: true,
       port: 3103,
-      open: true,
+      open: false,
       proxy: {
         [VITE_APP_BASE_URL]: {
           // target: 'http://localhost:3102/', // 代理的目标地址-本地
-- 
Gitee