fix: 切换角色&更新角色菜单回显

frontend/src/main.js

@@ -11,9 +11,11 @@ import '@/assets/css/base.css'
 
 import 'ant-design-vue/dist/antd.css'
 import hasPermisson from '@/utils/directive'
+import { formatTime } from './utils/format'
 
 const app = createApp(App)
 hasPermisson(app)
+app.config.globalProperties.$formatTime = (value) => formatTime(value)
 app.use(store)
 
 userStore().loadRoleRouter()

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

@@ -65,3 +65,18 @@ export const columns = [
     width: 120
   }
 ]
+
+// 菜单类型映射
+export const menuType = {
+  0: '目录',
+  1: '菜单',
+  2: '按钮'
+}
+
+// 请求方法颜色映射
+export const methodColor = {
+  GET: '#61AFFE',
+  POST: '#49CC90',
+  DELETE: '#F93E3E',
+  PUT: '#FCA130'
+}

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

@@ -2,8 +2,7 @@
 import { ref } from 'vue'
 import { PlusOutlined } from '@ant-design/icons-vue'
 
-import { columns } from './conf'
-import { formatTime } from '@/utils/format'
+import { columns, menuType, methodColor } from './conf'
 import { loadIconCpn } from '@/utils/loadCpn'
 import { getMenus } from '@/service/menu'
 
@@ -14,23 +13,36 @@ getMenus().then((res) => (dataSource.value = res.data))
 
 // 菜单类型隐射
 
-const menuType = {
-  0: '目录',
-  1: '菜单',
-  2: '按钮'
-}
+// 展开行 https://blog.csdn.net/weixin_52691965/article/details/120494451
+const expandedRowKeys = ref([])
 
-const methodColor = {
-  GET: '#61AFFE',
-  POST: '#49CC90',
-  DELETE: '#F93E3E',
-  PUT: '#FCA130'
+const zi = (expanded, record) => {
+  if (expandedRowKeys.value.length > 0) {
+    let index = expandedRowKeys.value.indexOf(record.id)
+    if (index > -1) {
+      expandedRowKeys.value.splice(index, 1)
+    } else {
+      expandedRowKeys.value.splice(0, expandedRowKeys.value.length)
+      expandedRowKeys.value.push(record.id)
+    }
+  } else {
+    expandedRowKeys.value.push(record.id)
+  }
 }
 
 //
 const addClick = () => {
   console.log('点击')
 }
+
+//
+const putClick = () => {
+  console.log('点击')
+}
+
+const delClick = () => {
+  console.log('点击')
+}
 </script>
 
 <template>
@@ -50,6 +62,12 @@ const addClick = () => {
           :columns="columns"
           :scroll="{ x: 1600, y: 'calc(100vh - 380px)' }"
           :data-source="dataSource"
+          :pagination="{
+            hideOnSinglePage: true
+          }"
+          :row-key="(record) => record.id"
+          @expand="zi"
+          :expandedRowKeys="expandRowKeys"
         >
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'meta'">
@@ -59,13 +77,15 @@ const addClick = () => {
               {{ menuType[record.type] }}
             </template>
             <template v-if="column.key === 'method'">
-              <a-tag :color="methodColor[record.method]">{{ record.method }}</a-tag>
+              <template v-if="record.method">
+                <a-tag :color="methodColor[record.method]">{{ record.method }}</a-tag>
+              </template>
             </template>
             <template v-else-if="column.key === 'created'">
-              {{ formatTime(record.created) }}
+              {{ $formatTime(record.created) }}
             </template>
             <template v-else-if="column.key === 'modified'">
-              {{ formatTime(record.modified) }}
+              {{ $formatTime(record.modified) }}
             </template>
             <template v-else-if="column.key === 'action'">
               <span>

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

@@ -35,16 +35,21 @@ export const columns = [
   }
 ]
 
-export const addRoleRules = [
-  {
-    name: [
-      { required: true, message: '请输入名称', trigger: 'blur' },
-      { min: 3, max: 12, message: '3-12', trigger: 'blur' }
-    ],
-    remark: [
-      { required: true, message: '请输入描述', trigger: 'blur' },
-      { min: 1, max: 20, message: '1~20', trigger: 'blur' }
-    ],
-    menus: [{ required: true, message: '请选择菜单', trigger: 'blur' }]
-  }
-]
+export const rules = {
+  name: [
+    { required: true, message: '请输入名称', trigger: 'blur' },
+    { min: 3, max: 12, message: '3-12', trigger: 'blur' }
+  ],
+  remark: [
+    { required: true, message: '请输入描述', trigger: 'blur' },
+    { min: 1, max: 20, message: '1~20', trigger: 'blur' }
+  ],
+  menus: [{ required: true, message: '请选择菜单', trigger: 'blur' }]
+}
+
+// a-tree组件 字段替换 适配接口返回数据
+export const treeFieldNames = {
+  key: 'id',
+  title: 'name',
+  children: 'children'
+}

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

@@ -1,13 +1,14 @@
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, watch } from 'vue'
 
 import { PlusOutlined } from '@ant-design/icons-vue'
 
 import { getRoles, queryRole, delRole, putRole, addRole } from '@/service/role'
 import { getMenus } from '@/service/menu'
-import { columns, addRoleRules } from './conf'
+import { columns, rules, treeFieldNames } from './conf'
 import { formatTime } from '@/utils/format'
 import { message } from 'ant-design-vue'
+import { getMenus as getRoleMenu } from '@/service/user'
 
 /**查询表单响应式数据 */
 const queryFormRef = ref()
@@ -96,8 +97,6 @@ const addClick = () => {
 const onOk = () => {
   formRef.value.validateFields().then(() => {
     // 表单验证通过
-    console.log(newRoleForm.menus)
-    newRoleForm.menus = newRoleForm.menus.map((e) => e.id)
     addRole(newRoleForm).then((res) => {
       if (res.msg === '请求成功') {
         message.success('新增成功')
@@ -120,26 +119,50 @@ const onCancel = () => {
 
 /**更新 */
 
+/**
+ * 编辑时获取数据 回显到put modal
+ * @param {} record  行数据
+ */
+
+// 点击编辑弹modal事件
 const putClick = (record) => {
+  putVisible.value = !putVisible.value
+  getPutModalData(record.id)
+}
+
+const getPutModalData = (record) => {
   // 打开编辑的modal
   getMenus().then((res) => (treeData.value = res.data))
-
-  putVisible.value = !putVisible.value
+  // 通过角色获取菜单
+  getRoleMenu(record.id).then((res) => {
+    function _mids(menus) {
+      for (const menu of menus) {
+        if (menu.childer) {
+          _mids(menu.childer)
+        } else {
+          putRoleForm.menus.push(menu.id)
+        }
+      }
+    }
+    _mids(res.data)
+  })
   putId.value = record.id
   putRoleForm.name = record.name
   putRoleForm.remark = record.remark
-
-  console.log(record)
 }
 
+// modal 是否显示
 const putVisible = ref(false)
 
+// modal 里的 表单 对象
 const putRoleFormRef = ref()
+// modal 里表达响应式数据
 const putRoleForm = reactive({
   name: '',
   remark: '',
   menus: []
 })
+// 记录 数据的 id 方便修改
 const putId = ref()
 
 //modal 事件
@@ -168,11 +191,13 @@ const onCancelPut = () => {
 // tree
 const treeData = ref()
 
-// 获取选中的菜单
-const check = (key, { checkedNodesPositions }) => {
-  // console.log(checkedNodesPositions)
-  newRoleForm.menus = checkedNodesPositions.map((e) => ({ key: e.pos, id: e.node.id }))
-}
+// 监听menus
+watch(
+  () => newRoleForm.menus,
+  (newValue, oldvalue) => {
+    console.log('menu', newValue, oldvalue)
+  }
+)
 </script>
 
 <template>
@@ -242,7 +267,7 @@ const check = (key, { checkedNodesPositions }) => {
       @ok="onOk"
       @cancel="onCancel"
     >
-      <a-form ref="formRef" :model="newRoleForm" :rules="addRoleRules">
+      <a-form ref="formRef" :model="newRoleForm" :rules="rules">
         <a-form-item name="name" label="名称">
           <a-input v-model:value="newRoleForm.name" />
         </a-form-item>
@@ -250,14 +275,18 @@ const check = (key, { checkedNodesPositions }) => {
           <a-input v-model:value="newRoleForm.remark" />
         </a-form-item>
         <a-form-item name="menus" label="菜单">
-          <a-tree checkable :tree-data="treeData" @check="check">
-            <template #title="{ name }"> {{ name }} </template>
+          <a-tree
+            checkable
+            :tree-data="treeData"
+            :fieldNames="treeFieldNames"
+            v-model:checkedKeys="newRoleForm.menus"
+          >
           </a-tree>
         </a-form-item>
       </a-form>
     </a-modal>
 
-    <!-- 修改用户 -->
+    <!-- 修改 -->
     <a-modal
       v-model:visible="putVisible"
       title="编辑角色"
@@ -266,7 +295,7 @@ const check = (key, { checkedNodesPositions }) => {
       @ok="onOkPut"
       @cancel="onCancelPut"
     >
-      <a-form ref="putRoleFormRef" :model="putRoleForm" :rules="putUserRules">
+      <a-form ref="putRoleFormRef" :model="putRoleForm" :rules="rules">
         <a-form-item name="name" label="名称">
           <a-input v-model:value="putRoleForm.name" />
         </a-form-item>
@@ -274,9 +303,12 @@ const check = (key, { checkedNodesPositions }) => {
           <a-input v-model:value="putRoleForm.remark" />
         </a-form-item>
         <a-form-item name="menus" label="菜单">
-          <a-tree checkable :tree-data="treeData" @check="check">
-            <template #title="{ name }"> {{ name }} </template>
-          </a-tree>
+          <a-tree
+            checkable
+            :tree-data="treeData"
+            :fieldNames="treeFieldNames"
+            v-model:checkedKeys="putRoleForm.menus"
+          ></a-tree>
         </a-form-item>
       </a-form>
     </a-modal>

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

@@ -6,7 +6,6 @@ import { PlusOutlined } from '@ant-design/icons-vue'
 import { getUsers, queryUser, delUser, addUser, getUserInfo, putUser } from '@/service/user'
 import { getRoles } from '@/service/role'
 import { columns, addUserRules, putUserRules } from './conf'
-import { formatTime } from '@/utils/format'
 import { message } from 'ant-design-vue'
 import { userStore } from '@/stores/user'
 import router from '@/router'
@@ -164,7 +163,7 @@ const onOkPut = () => {
     //验证通过
     const { nickname, password, roles } = putUserForm
     let rids = roles.map((e, i) => ({ rid: e, status: i === 0 ? 5 : 1 }))
-    putUser(putId.value, { nickname, password, rids }).then((res) => {
+    putUser(putId.value, { nickname, password, roles: rids }).then((res) => {
       if (res.msg === '请求成功') {
         message.success('修改成功')
         // 1. 关闭 modal
@@ -232,10 +231,10 @@ const onCancelPut = () => {
               </a-tag>
             </template>
             <template v-else-if="column.key === 'created'">
-              {{ formatTime(record.created) }}
+              {{ $formatTime(record.created) }}
             </template>
             <template v-else-if="column.key === 'modified'">
-              {{ formatTime(record.modified) }}
+              {{ $formatTime(record.modified) }}
             </template>
             <template v-else-if="column.key === 'action'">
               <span>