ref: 用户管理modal抽离

frontend/src/router/index.js

@@ -16,7 +16,13 @@ const routes = [
     name: 'main',
     path: '/main',
     meta: { title: '主页' },
-    component: () => import('@/views/main/main.vue')
+    component: () => import('@/views/main/main.vue'),
+    children: [
+      {
+        path: '/demo',
+        component: () => import('@/views/main/demo.vue')
+      }
+    ]
   },
   {
     path: '/:pathMatch(.*)*',

frontend/src/views/main/demo.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { ref } from 'vue'
+import UserModal from './system/user/user-modal.vue'
+import { getRoles } from '@/service/role'
+
+const isShow = ref(false)
+const title = ref()
+const type = ref()
+const roleOptions = ref([])
+
+getRoles({ limit: 100 }).then((res) => {
+  roleOptions.value = res.data.items.map((e) => ({ label: e.name, value: e.id }))
+})
+
+const add = () => {
+  isShow.value = !isShow.value
+  title.value = '新增用户'
+}
+
+const put = () => {
+  console.log('put')
+}
+
+const ok = (formRef) => {
+  formRef.value.validateFields().then(() => {})
+}
+
+const cancel = () => {
+  console.log('cancel')
+  isShow.value = !isShow.value
+}
+</script>
+
+<template>
+  <div>
+    demo
+    <a-button @click="add">新增</a-button>
+    <a-button @click="put">更新</a-button>
+    <UserModal
+      :modal-title="title"
+      :modal-type="type"
+      :show-modal="isShow"
+      :role-options="roleOptions"
+      @modal-ok="ok"
+      @modal-cancel="cancel"
+    ></UserModal>
+  </div>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,45 @@
+<script setup>
+import { ref, reactive } from 'vue'
+
+const emits = defineEmits(['queryClick', 'resetClick'])
+
+const formRef = ref()
+
+const queryForm = reactive({
+  name: ''
+})
+
+const queryEvent = () => {
+  emits('queryClick', queryForm)
+}
+
+const resetEvent = () => {
+  formRef.value.resetFields()
+  emits('resetClick')
+}
+</script>
+
+<template>
+  <div class="search">
+    <a-form ref="formRef" layout="inline" :model="queryForm">
+      <a-form-item label="名称" name="name">
+        <a-input placeholder="角色名称" v-model:value="queryForm.name"> </a-input>
+      </a-form-item>
+      <a-form-item v-per="'role:query'">
+        <a-button type="primary" @click="queryEvent">查询</a-button>
+        <a-button style="margin-left: 10px" @click="resetEvent">重置</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<style scoped>
+.search {
+  display: flex;
+  /* justify-content: center; */
+  align-content: center;
+  margin-bottom: 16px;
+  padding: 24px;
+  background: #fff;
+}
+</style>

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

@@ -7,13 +7,9 @@ import { getMenus } from '@/service/menu'
 import { columns, rules, treeFieldNames } from './conf'
 import { message } from 'ant-design-vue'
 import { getMenus as getRoleMenu } from '@/service/user'
+import RoleSearch from './role-search.vue'
 
 /**查询表单响应式数据 */
-const queryFormRef = ref()
-
-const queryForm = reactive({
-  name: ''
-})
 
 // 是否查询
 const isQuery = ref(false)
@@ -41,7 +37,7 @@ onMounted(() => {
 })
 
 // 获取页面数据
-const getPageData = () => {
+const getPageData = (form = null) => {
   let offset = pagination.current
   let limit = pagination.pageSize
   if (!isQuery.value) {
@@ -50,7 +46,7 @@ const getPageData = () => {
       pagination.total = res.data.total
     })
   } else {
-    queryRole({ offset, limit, name: queryForm.name }).then((res) => {
+    queryRole({ offset, limit, name: form?.name }).then((res) => {
       dataSource.value = res.data.items
       pagination.total = res.data.total
     })
@@ -58,14 +54,13 @@ const getPageData = () => {
 }
 
 // 点击查询事件
-const clickQuery = () => {
+const clickQuery = (form) => {
   isQuery.value = true
-  getPageData()
+  getPageData(form)
 }
 
 // 重置搜索框
 const resetQueryForm = () => {
-  queryFormRef.value.resetFields()
   isQuery.value = false
   getPageData()
 }
@@ -209,17 +204,8 @@ const treeData = ref()
 <template>
   <div class="role">
     <!-- 查询 -->
-    <div class="search">
-      <a-form ref="queryFormRef" layout="inline" :model="queryForm">
-        <a-form-item label="名称" name="name">
-          <a-input placeholder="角色名称" v-model:value="queryForm.name"> </a-input>
-        </a-form-item>
-        <a-form-item v-per="'role:query'">
-          <a-button type="primary" @click="clickQuery">查询</a-button>
-          <a-button style="margin-left: 10px" @click="resetQueryForm">重置</a-button>
-        </a-form-item>
-      </a-form>
-    </div>
+
+    <RoleSearch @query-click="clickQuery" @reset-click="resetQueryForm"></RoleSearch>
 
     <Table
       :columns="columns"

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

@@ -0,0 +1,152 @@
+<script setup>
+import { reactive, ref } from 'vue'
+import { message } from 'ant-design-vue'
+import { addUserRules, putUserRules } from './conf'
+
+import { addUser, putUser } from '@/service/user'
+import { userStore } from '@/stores/user'
+
+const props = defineProps({
+  modalTitle: {
+    // modal 右上角显示的title
+    type: String
+  },
+  modalType: {
+    // create or update
+    type: String,
+    default: 'create'
+  },
+  roleOptions: {
+    // 角色列表
+    type: Array,
+    default: () => []
+  },
+  userId: {
+    // 更新才会使用
+    type: Number,
+    require: false
+  }
+})
+
+const emits = defineEmits(['modalCancel'])
+
+const sotre = userStore()
+
+/** 页面数据 */
+const formRef = ref()
+
+// create form
+const newUserForm = reactive({
+  username: '',
+  nickname: '',
+  password: '',
+  roles: []
+})
+
+// update form
+const putUserForm = reactive({
+  nickname: '',
+  password: '',
+  roles: []
+})
+
+const onOk = () => {
+  formRef.value.validateFields().then(async () => {
+    let res
+    if (props.modalType === 'create') {
+      newUserForm.roles = newUserForm.roles.map((e, i) => ({ rid: e, status: i === 0 ? 5 : 1 }))
+      res = await addUser(newUserForm)
+    } else {
+      const { nickname, password, roles } = putUserForm
+      let rids = roles.map((e, i) => ({ rid: e, status: i === 0 ? 5 : 1 }))
+      res = await putUser(props.userId, { nickname, password, roles: rids })
+    }
+    formRef.value.resetFields()
+    showModal.value = !showModal.value
+  })
+}
+
+const onCancel = () => {
+  formRef.value.resetFields()
+  emits('modalCancel')
+}
+
+const showModal = ref(false)
+
+// 添加用户
+const addUserAction = () => {
+  formRef.value.validateFields().then(() => {
+    // 表单验证通过
+    newUserForm.roles = newUserForm.roles.map((e, i) => ({ rid: e, status: i === 0 ? 5 : 1 }))
+    addUser(newUserForm).then((res) => {
+      if (res.msg === '请求成功') {
+        message.success('新增成功')
+        // 2. 重置响应式数据
+        formRef.value.resetFields()
+        // 1. 关闭 modal
+        showModal.value = !showModal.value
+      }
+    })
+  })
+}
+</script>
+
+<template>
+  <div class="modal">
+    <a-modal
+      v-model:visible="showModal"
+      :title="modalTitle"
+      ok-text="确认"
+      cancel-text="取消"
+      @ok="onOk"
+      @cancel="onCancel"
+    >
+      <!-- 新建 -->
+      <template v-if="modalType === 'create'">
+        <a-form ref="formRef" :model="newUserForm" :rules="addUserRules">
+          <a-form-item name="username" label="账号">
+            <a-input v-model:value="newUserForm.username" placeholder="用于登录" />
+          </a-form-item>
+          <a-form-item name="nickname" label="昵称">
+            <a-input v-model:value="newUserForm.nickname" />
+          </a-form-item>
+          <a-form-item name="password" label="密码">
+            <a-input-password v-model:value="newUserForm.password" autocomplete="on" />
+          </a-form-item>
+          <a-form-item name="roles" label="角色">
+            <a-select
+              v-model:value="newUserForm.roles"
+              mode="multiple"
+              style="width: 100%"
+              placeholder="默认激活第一个角色"
+              :options="roleOptions"
+            ></a-select>
+          </a-form-item>
+        </a-form>
+      </template>
+
+      <!-- 编辑 -->
+      <template v-else>
+        <a-form ref="formRef" :model="putUserForm" :rules="putUserRules">
+          <a-form-item name="nickname" label="昵称">
+            <a-input v-model:value="putUserForm.nickname" />
+          </a-form-item>
+          <a-form-item name="password" label="密码">
+            <a-input-password v-model:value="putUserForm.password" autocomplete="on" />
+          </a-form-item>
+          <a-form-item name="roles" label="角色">
+            <a-select
+              v-model:value="putUserForm.roles"
+              mode="multiple"
+              style="width: 100%"
+              placeholder="默认激活第一个角色"
+              :options="roleOptions"
+            ></a-select>
+          </a-form-item>
+        </a-form>
+      </template>
+    </a-modal>
+  </div>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,49 @@
+<script setup>
+import { ref, reactive } from 'vue'
+
+const emits = defineEmits(['queryClick', 'resetClick'])
+
+const formRef = ref()
+
+const queryForm = reactive({
+  username: '',
+  nickname: ''
+})
+
+const queryEvent = () => {
+  emits('queryClick', queryForm)
+}
+
+const resetEvent = () => {
+  formRef.value.resetFields()
+  emits('resetClick')
+}
+</script>
+
+<template>
+  <div class="search">
+    <a-form ref="formRef" layout="inline" :model="queryForm">
+      <a-form-item label="用户名" name="username">
+        <a-input placeholder="用户名" v-model:value="queryForm.username"> </a-input>
+      </a-form-item>
+      <a-form-item label="昵称" name="nickname">
+        <a-input placeholder="昵称" v-model:value="queryForm.nickname"> </a-input>
+      </a-form-item>
+      <a-form-item v-per="'user:query'">
+        <a-button type="primary" @click="queryEvent">查询</a-button>
+        <a-button style="margin-left: 10px" @click="resetEvent">重置</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<style scoped>
+.search {
+  display: flex;
+  /* justify-content: center; */
+  align-content: center;
+  margin-bottom: 16px;
+  padding: 24px;
+  background: #fff;
+}
+</style>

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

@@ -8,17 +8,10 @@ import { getRoles } from '@/service/role'
 import { columns, addUserRules, putUserRules } from './conf'
 import { message } from 'ant-design-vue'
 import { userStore } from '@/stores/user'
+import UserSearch from './user-search.vue'
 
 const store = userStore()
 
-/**查询表单响应式数据 */
-const queryFormRef = ref()
-
-const queryForm = reactive({
-  username: '',
-  nickname: ''
-})
-
 // 是否查询
 const isQuery = ref(false)
 
@@ -45,7 +38,7 @@ onMounted(() => {
 })
 
 // 获取页面数据
-const getPageData = () => {
+const getPageData = (form = null) => {
   let offset = pagination.current
   let limit = pagination.pageSize
   if (!isQuery.value) {
@@ -54,24 +47,21 @@ const getPageData = () => {
       pagination.total = res.data.total
     })
   } else {
-    queryUser({ offset, limit, username: queryForm.username, nickname: queryForm.nickname }).then(
-      (res) => {
+    queryUser({ offset, limit, username: form?.username, nickname: form?.nickname }).then((res) => {
       dataSource.value = res.data.items
       pagination.total = res.data.total
-      }
-    )
+    })
   }
 }
 
 // 点击查询事件
-const clickQuery = () => {
+const clickQuery = (form) => {
   isQuery.value = true
-  getPageData()
+  getPageData(form)
 }
 
 // 重置搜索框
 const resetQueryForm = () => {
-  queryFormRef.value.resetFields()
   isQuery.value = false
   getPageData()
 }
@@ -114,8 +104,6 @@ const onOk = () => {
         addVisible.value = !addVisible.value
         // 2. 重置响应式数据
         formRef.value.resetFields()
-        // 3. 刷新页面数据
-        getPageData()
       }
     })
   })
@@ -194,20 +182,7 @@ const onCancelPut = () => {
 <template>
   <div class="user">
     <!-- 查询 -->
-    <div class="search">
-      <a-form ref="queryFormRef" layout="inline" :model="queryForm">
-        <a-form-item label="用户名" name="username">
-          <a-input placeholder="用户名" v-model:value="queryForm.username"> </a-input>
-        </a-form-item>
-        <a-form-item label="昵称" name="nickname">
-          <a-input placeholder="昵称" v-model:value="queryForm.nickname"> </a-input>
-        </a-form-item>
-        <a-form-item v-per="'user:query'">
-          <a-button type="primary" @click="clickQuery">查询</a-button>
-          <a-button style="margin-left: 10px" @click="resetQueryForm">重置</a-button>
-        </a-form-item>
-      </a-form>
-    </div>
+    <UserSearch @query-click="clickQuery" @reset-click="resetQueryForm" />
 
     <Table
       :columns="columns"