ref：抽取search、modal公用hooks

frontend/src/hooks/useModal.js

@@ -0,0 +1,10 @@
+import { ref } from 'vue'
+export default () => {
+  // 控制modal显示
+  const showModal = ref(false)
+  // 编辑数据时需要的 数据id
+  const updateId = ref()
+  // 表单ref对象
+  const formRef = ref()
+  return { showModal, updateId, formRef }
+}

frontend/src/hooks/useSearch.js

@@ -0,0 +1,14 @@
+import { ref } from 'vue'
+export default (emits, queryForm) => {
+  const formRef = ref()
+
+  const queryEvent = () => {
+    emits('queryClick', queryForm)
+  }
+
+  const resetEvent = () => {
+    formRef.value.resetFields()
+    emits('resetClick')
+  }
+  return { formRef, queryEvent, resetEvent }
+}

frontend/src/views/main/system/menu/conf.js

@@ -65,10 +65,3 @@ export const columns = [
     width: 120
   }
 ]
-
-// 菜单类型映射
-export const menuType = {
-  0: '目录',
-  1: '菜单',
-  2: '按钮'
-}

frontend/src/views/main/system/menu/menu-modal.vue

@@ -0,0 +1,54 @@
+<script setup>
+import useModal from '@/hooks/useModal'
+
+const props = defineProps({
+  modalTitle: {
+    // modal 右上角显示的title
+    type: String
+  },
+  modalType: {
+    // create or update
+    type: String,
+    default: 'create'
+  }
+})
+
+const { showModal, updateId, formRef } = useModal()
+
+// 编辑
+const openModal = (record) => {
+  showModal.value = true
+
+  updateId.value = record.id
+}
+
+const onOk = () => {
+  //新增
+  console.log(props)
+}
+
+const onCancel = () => {}
+
+defineExpose({ openModal, showModal })
+</script>
+
+<template>
+  <div class="menu-modal">
+    <a-modal
+      v-model:visible="showModal"
+      :title="props.modalTitle"
+      ok-text="确认"
+      cancel-text="取消"
+      @ok="onOk"
+      @cancel="onCancel"
+    >
+      <a-form ref="formRef">
+        <a-form-item>
+          <a-input></a-input>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<style scoped></style>

frontend/src/views/main/system/menu/menu.vue

@@ -1,29 +1,42 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, reactive, toRefs } from 'vue'
 
 import { columns } from './conf'
 import { getMenus } from '@/service/menu'
 
 import Table from '@/components/table/table.vue'
+import MenuModal from './menu-modal.vue'
 
 // 列表数据
 const dataSource = ref([])
 
 getMenus().then((res) => (dataSource.value = res.data))
 
+const modalRef = ref()
+const modalConf = reactive({
+  title: '',
+  type: ''
+})
 // 新增
 const addClick = () => {
-  console.log('点击')
+  modalConf.title = '新增菜单'
+  modalConf.type = 'create'
+  modalRef.value.showModal = true
 }
 
 //
-const putClick = () => {
+const putClick = (record) => {
-  console.log('点击')
+  console.log(record)
+  modalConf.title = '编辑菜单'
+  modalConf.type = 'create'
+  modalRef.value.openModal(record)
 }
 
-const delClick = () => {
+const delClick = (record) => {
-  console.log('点击')
+  console.log('点击', record)
 }
+
+const { title, type } = toRefs(modalConf)
 </script>
 
 <template>
@@ -38,6 +51,7 @@ const delClick = () => {
       @delete-click="delClick"
     >
     </Table>
+    <MenuModal ref="modalRef" :modal-title="title" :modal-type="type"></MenuModal>
   </div>
 </template>
 

frontend/src/views/main/system/role/role-modal.vue

@@ -8,6 +8,8 @@ import { getMenus as getRoleMenu } from '@/service/user'
 import { getMenus } from '@/service/menu'
 import { userStore } from '@/stores/user'
 
+import useModal from '@/hooks/useModal'
+
 const props = defineProps({
   modalTitle: {
     // modal 右上角显示的title
@@ -20,18 +22,14 @@ const props = defineProps({
   }
 })
 
-const showModal = ref(false)
+const { showModal, updateId, formRef } = useModal()
 
-const formRef = ref()
 const roleForm = reactive({
   name: '',
   remark: '',
   menus: []
 })
 
-// 记录修改角色的ID
-const userId = ref()
-
 // menu数据
 const treeData = ref()
 
@@ -77,7 +75,7 @@ const getCurrentMenu = (record) => {
 const openModal = (record) => {
   showModal.value = true
   const { allMenus, checkMenus } = getCurrentMenu(record)
-  userId.value = record.id
+  updateId.value = record.id
   roleForm.name = record.name
   roleForm.remark = record.remark
   checkedKeys.value = checkMenus
@@ -98,7 +96,7 @@ const onOk = () => {
     if (props.modalType === 'create') {
       res = await addRole(roleForm)
     } else {
-      res = await putRole(userId.value, roleForm)
+      res = await putRole(updateId.value, roleForm)
     }
     message.success(res.msg)
     resetData()

frontend/src/views/main/system/role/role-search.vue

@@ -1,22 +1,13 @@
 <script setup>
-import { ref, reactive } from 'vue'
+import { reactive } from 'vue'
+import useSearch from '@/hooks/useSearch'
 
 const emits = defineEmits(['queryClick', 'resetClick'])
 
-const formRef = ref()
-
 const queryForm = reactive({
   name: ''
 })
-
+const { formRef, queryEvent, resetEvent } = useSearch(emits, queryForm)
-const queryEvent = () => {
-  emits('queryClick', queryForm)
-}
-
-const resetEvent = () => {
-  formRef.value.resetFields()
-  emits('resetClick')
-}
 </script>
 
 <template>

frontend/src/views/main/system/user/user-modal.vue

@@ -6,6 +6,7 @@ import { addUserRules, putUserRules } from './conf'
 import { addUser, putUser, getUserInfo } from '@/service/user'
 import { userStore } from '@/stores/user'
 import { getRoles } from '@/service/role'
+import useModal from '@/hooks/useModal'
 
 const props = defineProps({
   modalTitle: {
@@ -21,8 +22,9 @@ const props = defineProps({
 
 const store = userStore()
 
+const { showModal, updateId, formRef } = useModal()
+
 /** 页面数据 */
-const formRef = ref()
 
 // create form
 const newUserForm = reactive({
@@ -39,11 +41,6 @@ const putUserForm = reactive({
   roles: []
 })
 
-// modal 状态打开
-const showModal = ref(false)
-// 更新数据的 用户id
-const userId = ref()
-
 // 监听modal状态是否为打开 打开就请求数据
 const roleOptions = ref([])
 watch(showModal, async () => {
@@ -57,7 +54,7 @@ watch(showModal, async () => {
 const openModal = async (record) => {
   // 打开编辑的modal
   showModal.value = !showModal.value
-  userId.value = record.id
+  updateId.value = record.id
   // 加载当前用户id 具备的用户角色
   const res = await getUserInfo(record.id)
   putUserForm.roles = res.data.roles.map((e) => e.id)
@@ -76,15 +73,15 @@ const onOk = () => {
     } else {
       const { nickname, password, roles } = putUserForm
       let rids = roles.map((e, i) => ({ rid: e, status: i === 0 ? 5 : 1 }))
-      res = await putUser(userId.value, {
+      res = await putUser(updateId.value, {
         nickname,
         password,
         roles: rids
       })
-      if (userId.value === store.userInfo.id) {
+      if (updateId.value === store.userInfo.id) {
         // 并且修改了激活角色
         if (rids[0]['rid'] !== store.userInfo.roles[0]['id']) {
-          store.getUserData(userId.value)
+          store.getUserData(updateId.value)
         }
       }
     }

frontend/src/views/main/system/user/user-search.vue

@@ -1,23 +1,15 @@
 <script setup>
-import { ref, reactive } from 'vue'
+import { reactive } from 'vue'
+import useSearch from '@/hooks/useSearch'
 
 const emits = defineEmits(['queryClick', 'resetClick'])
 
-const formRef = ref()
-
 const queryForm = reactive({
   username: '',
   nickname: ''
 })
 
-const queryEvent = () => {
+const { formRef, queryEvent, resetEvent } = useSearch(emits, queryForm)
-  emits('queryClick', queryForm)
-}
-
-const resetEvent = () => {
-  formRef.value.resetFields()
-  emits('resetClick')
-}
 </script>
 
 <template>