自存19-48

19-菜单管理添加弹窗显示

1<template>
2   <button @click="dialogFormVisable = true ">打开</button>
3   <el-dialog
4       v-model="dialogFormVisable"
5       :before-close="beforeClose"
6       title="添加权限"
7       width="500"
8   >
9       <el-form
10           ref="formRef"
11           label-width="100px"
12           label-position="left"
13           :model="form"
14       >
15           <el-form-item label="名称" prop="name">
16               <el-input v-model="form.name" placeholder="请填写权限名称"/>
17           </el-form-item>
18            <el-form-item label="权限" prop="permissions">
19               <el-tree
20                   ref="treeRef"
21                   style="max-width: 600px;"
22                   :data="permissionData"
23                   node-key="id"
24                   show-checkbox
25                   :default-checked-keys="defaultKeys"
26               />
27           </el-form-item>
28       </el-form>
29   </el-dialog>
30</template>
31<script setup>
32   import { ref , reactive , onMounted } from 'vue'
33   import { userGetMenu } from '../../../api'
34   
35   onMounted(() => {
36       //菜单数据
37       userGetMenu().then(({ data })=>{
38           console.log(data)
39           permissionData.value = data.data
40       })
41   })
42   //form的数据
43   const form = reactive({
44       name:'',
45       permissions:''
46   })
47   //树形菜单权限数据
48   const permissionData = ref([])
49   //弹窗的显示隐藏
50   const dialogFormVisable = ref(false)
51   //关闭弹窗的回调
52   const beforeClose = () => {
53       dialogFormVisable.value = false
54   }
55   //选中权限
56   const defaultKeys = [4,5]
57   const treeRef = ref()
58</script>
59<style lang="less" scoped>
60</style>

1import request from '../utils/request'
2//发送验证码
3export const getCode = (data) => {
4   return request.post('/get/code',data)
5}
6
7//注册用户
8export const userAuthentication = (data) =>{
9   return request.post('/user/authentication',data)
10}
11
12//登录
13export const login = (data) =>{
14   return request.post('/login',data)
15} 
16
17//权限管理列表
18export const authAdmin = (params) => {
19   return request.get('/auth/admin', { params })
20}
21
22//菜单权限数据
23export const userGetMenu = (params) => {
24   return request.get('/user/getmenu', { params })
25}

新添加的部分：

20-菜单管理添加接口联调

1<template>
2   <button @click="dialogFormVisable = true ">打开</button>
3   <el-dialog
4       v-model="dialogFormVisable"
5       :before-close="beforeClose"
6       title="添加权限"
7       width="500"
8   >
9       <el-form
10           ref="formRef"
11           label-width="100px"
12           label-position="left"
13           :model="form"
14           :rules="rules"
15       >
16            <el-form-item v-show="false" prop="id">
17               <el-input v-model="form.id"/>
18            </el-form-item>
19           <el-form-item label="名称" prop="name">
20               <el-input v-model="form.name" placeholder="请填写权限名称"/>
21           </el-form-item>
22            <el-form-item label="权限" prop="permissions">
23               <el-tree
24                   ref="treeRef"
25                   style="max-width: 600px;"
26                   :data="permissionData"
27                   node-key="id"
28                   show-checkbox
29                   :default-checked-keys="defaultKeys"
30                   :default-expanded-keys="[2]"
31               />
32           </el-form-item>
33       </el-form>
34       <template #footer>
35           <div class="dialog-footer">
36               <el-button type="primary"  @click="confirm(formRef)">确认</el-button>
37           </div>
38       </template>
39   </el-dialog>
40</template>
41<script setup>
42   import { ref, reactive, onMounted } from 'vue'
43   import { userGetMenu, userSetMenu, menuList} from '../../../api'
44
45
46   onMounted(() => {
47       //菜单数据
48       userGetMenu().then(({ data })=>{
49           console.log(data)
50           permissionData.value = data.data
51       })
52       getListData()
53   })
54   const paginationData = reactive({
55       pageNum: 1,
56       pageSize: 10,
57   })
58
59   //请求列表数据
60   const getListData = () =>{
61       menuList(paginationData).then(( data ) => {
62
63       })
64   }
65
66   const formRef = ref()
67
68   //form的数据
69   const form = reactive({
70       id:'',
71       name:'',
72       permissions:''
73   })
74   //树形菜单权限数据
75   const permissionData = ref([])
76   //弹窗的显示隐藏
77   const dialogFormVisable = ref(false)
78   //关闭弹窗的回调
79   const beforeClose = () => {
80       dialogFormVisable.value = false
81   }
82   //选中权限
83   const defaultKeys = [4,5]
84   const treeRef = ref()
85
86   const rules = reactive({
87       name:[{ required: true, trigger:'blur',message:'请输入权限名称' }]
88   })
89   //表单提交
90   const confirm = async(formEl) => {
91       if (!formEl) return
92       await formEl.validate((valid,fields) => {
93           if(valid){
94               //获取到选择的checkbox数据
95               const permissions = JSON.stringify( treeRef.value.getCheckedKeys())
96               userSetMenu({ name: form.name, permissions, id: form.id}).then(({ data }) => {
97                   console.log(data)
98               })
99           }else{
100               console.log('error submit!' , fields )
101           }
102       })
103   }
104</script>
105<style lang="less" scoped>
106</style>

1import request from '../utils/request'
2//发送验证码
3export const getCode = (data) => {
4   return request.post('/get/code',data)
5}
6
7//注册用户
8export const userAuthentication = (data) =>{
9   return request.post('/user/authentication',data)
10}
11
12//登录
13export const login = (data) =>{
14   return request.post('/login',data)
15} 
16
17//权限管理列表
18export const authAdmin = (params) => {
19   return request.get('/auth/admin', { params })
20}
21
22//菜单权限数据
23export const userGetMenu = (params) => {
24   return request.get('/user/getmenu', { params })
25}
26
27//菜单权限修改
28export const userSetMenu = (data) => {
29    return request.post('/user/setmenu',data)
30}
31
32//菜单权限列表
33export const menuList = (params) => {
34   return request.get('/menu/list', { params })
35}

21-菜单管理列表和编辑逻辑

1<template>
2   <button @click="open(null)">打开 </button>
3   <el-table :data="tableData.list" style="width: 100%">
4       <el-table-column prop="id" label="id" />
5       <el-table-column prop="name" label="昵称" />
6       <el-table-column prop="permissionName" label="菜单权限" width="500px"/>
7       <el-table-column label="操作">
8           <template #default="scope">
9              <el-button type="primary" @click="open(scope.row)">编辑</el-button>
10           </template>
11       </el-table-column>
12   </el-table>
13   <el-dialog
14       v-model="dialogFormVisable"
15       :before-close="beforeClose"
16       title="添加权限"
17       width="500"
18   >
19       <el-form
20           ref="formRef"
21           label-width="100px"
22           label-position="left"
23           :model="form"
24           :rules="rules"
25       >
26            <el-form-item v-show="false" prop="id">
27               <el-input v-model="form.id"/>
28            </el-form-item>
29           <el-form-item label="名称" prop="name">
30               <el-input v-model="form.name" placeholder="请填写权限名称"/>
31           </el-form-item>
32            <el-form-item label="权限" prop="permissions">
33               <el-tree
34                   ref="treeRef"
35                   style="max-width: 600px;"
36                   :data="permissionData"
37                   node-key="id"
38                   show-checkbox
39                   :default-checked-keys="defaultKeys"
40                   :default-expanded-keys="[2]"
41               />
42           </el-form-item>
43       </el-form>
44       <template #footer>
45           <div class="dialog-footer">
46               <el-button type="primary"  @click="confirm(formRef)">确认</el-button>
47           </div>
48       </template>
49   </el-dialog>
50</template>
51<script setup>
52   import { ref, reactive, onMounted, nextTick } from 'vue'
53   import { userGetMenu, userSetMenu, menuList} from '../../../api'
54
55
56   onMounted(() => {
57       //菜单数据
58       userGetMenu().then(({ data })=>{
59           console.log(data)
60           permissionData.value = data.data
61       })
62       getListData()
63   })
64
65   //列表数据
66   const tableData = reactive({
67       list: [],
68       total: 0
69   })
70   //打开弹窗
71   const open = (rowData = {}) =>{
72       dialogFormVisable.value = true
73       // 弹窗打开form生成是异步的
74       nextTick(() => {
75           if(rowData){
76               Object.assign(form, { id:rowData.id , name: rowData.name  })
77               treeRef.value.setCheckedKeys(rowData.permission)
78           }
79       })
80   }
81
82   const paginationData = reactive({
83       pageNum: 1,
84       pageSize: 10,
85   })
86
87   //请求列表数据
88   const getListData = () =>{
89       menuList(paginationData).then(({ data }) => {
90           const { list, total } = data.data
91           tableData.list = list
92           tableData.total = total
93       })
94   }
95
96   const formRef = ref()
97
98   //form的数据
99   const form = reactive({
100       id:'',
101       name:'',
102       permissions:''
103   })
104   //树形菜单权限数据
105   const permissionData = ref([])
106   //弹窗的显示隐藏
107   const dialogFormVisable = ref(false)
108   //关闭弹窗的回调
109   const beforeClose = () => {
110       dialogFormVisable.value = false
111       //重置表单
112       formRef.value.resetFields()
113       //tree选择重置
114       treeRef.value.setCheckedKeys(defaultKeys)
115   }
116   //选中权限
117   const defaultKeys = [4,5]
118   const treeRef = ref()
119
120   const rules = reactive({
121       name:[{ required: true, trigger:'blur',message:'请输入权限名称' }]
122   })
123   //表单提交
124   const confirm = async(formEl) => {
125       if (!formEl) return
126       await formEl.validate((valid,fields) => {
127           if(valid){
128               //获取到选择的checkbox数据
129               const permissions = JSON.stringify( treeRef.value.getCheckedKeys())
130               userSetMenu({ name: form.name, permissions, id: form.id}).then(({ data }) => {
131                   console.log(data)
132               })
133           }else{
134               console.log('error submit!' , fields )
135           }
136       })
137   }
138</script>
139<style lang="less" scoped>
140</style>

22-菜单管理剩余问题处理

1<template>
2   <panel-head/>
3   <div class="btns">
4       <el-button  :icon="Plus" type="primary" @click="open(null)" size="small">新增</el-button>
5   </div>
6   <el-table :data="tableData.list" style="width: 100%">
7       <el-table-column prop="id" label="id" />
8       <el-table-column prop="name" label="昵称" />
9       <el-table-column prop="permissionName" label="菜单权限" width="500px"/>
10       <el-table-column label="操作">
11           <template #default="scope">
12              <el-button type="primary" @click="open(scope.row)">编辑</el-button>
13           </template>
14       </el-table-column>
15   </el-table>
16   <div class="pagination-info">
17       <el-pagination
18           v-model:current-page="paginationData.pageNum"
19           :page-size="paginationData.pageSize"
20           :background="false"
21           size="small"
22           layout="total, prev, pager, next"
23           :total="tableData.total"
24           @size-change="handleSizeChange"
25           @current-change="handleCurrentChange"
26           />
27   </div>
28   <el-dialog
29       v-model="dialogFormVisable"
30       :before-close="beforeClose"
31       title="添加权限"
32       width="500"
33   >
34       <el-form
35           ref="formRef"
36           label-width="100px"
37           label-position="left"
38           :model="form"
39           :rules="rules"
40       >
41            <el-form-item v-show="false" prop="id">
42               <el-input v-model="form.id"/>
43            </el-form-item>
44           <el-form-item label="名称" prop="name">
45               <el-input v-model="form.name" placeholder="请填写权限名称"/>
46           </el-form-item>
47            <el-form-item label="权限" prop="permissions">
48               <el-tree
49                   ref="treeRef"
50                   style="max-width: 600px;"
51                   :data="permissionData"
52                   node-key="id"
53                   show-checkbox
54                   :default-checked-keys="defaultKeys"
55                   :default-expanded-keys="[2]"
56               />
57           </el-form-item>
58       </el-form>
59       <template #footer>
60           <div class="dialog-footer">
61               <el-button type="primary"  @click="confirm(formRef)">确认</el-button>
62           </div>
63       </template>
64   </el-dialog>
65</template>
66<script setup>
67   import { ref, reactive, onMounted, nextTick } from 'vue'
68   import { userGetMenu, userSetMenu, menuList} from '../../../api'
69   import { Plus } from '@element-plus/icons-vue'
70
71
72   onMounted(() => {
73       //菜单数据
74       userGetMenu().then(({ data })=>{
75           console.log(data)
76           permissionData.value = data.data
77       })
78       getListData()
79   })
80
81   //列表数据
82   const tableData = reactive({
83       list: [],
84       total: 0
85   })
86   //打开弹窗
87   const open = (rowData = {}) =>{
88       dialogFormVisable.value = true
89       // 弹窗打开form生成是异步的
90       nextTick(() => {
91           if(rowData){
92               Object.assign(form, { id:rowData.id , name: rowData.name  })
93               treeRef.value.setCheckedKeys(rowData.permission)
94           }
95       })
96   }
97
98   const paginationData = reactive({
99       pageNum: 1,
100       pageSize: 10,
101   })
102
103   const handleSizeChange = (val) => {
104       paginationData.pageSize = val
105       getListData()
106   }
107   const handleCurrentChange = (val) => {
108       paginationData.pageNum = val
109       getListData()
110   }
111   //请求列表数据
112   const getListData = () =>{
113       menuList(paginationData).then(({ data }) => {
114           const { list, total } = data.data
115           tableData.list = list
116           tableData.total = total
117       })
118   }
119
120   const formRef = ref()
121
122   //form的数据
123   const form = reactive({
124       id:'',
125       name:'',
126       permissions:''
127   })
128   //树形菜单权限数据
129   const permissionData = ref([])
130   //弹窗的显示隐藏
131   const dialogFormVisable = ref(false)
132   //关闭弹窗的回调
133   const beforeClose = () => {
134       dialogFormVisable.value = false
135       //重置表单
136       formRef.value.resetFields()
137       //tree选择重置
138       treeRef.value.setCheckedKeys(defaultKeys)
139   }
140   //选中权限
141   const defaultKeys = [4,5]
142   const treeRef = ref()
143
144   const rules = reactive({
145       name:[{ required: true, trigger:'blur',message:'请输入权限名称' }]
146   })
147   //表单提交
148   const confirm = async(formEl) => {
149       if (!formEl) return
150       await formEl.validate((valid,fields) => {
151           if(valid){
152               //获取到选择的checkbox数据
153               const permissions = JSON.stringify( treeRef.value.getCheckedKeys())
154               userSetMenu({ name: form.name, permissions, id: form.id}).then(({ data }) => {
155                   beforeClose()
156                   getListData()
157               })
158           }else{
159               console.log('error submit!' , fields )
160           }
161       })
162   }
163</script>
164<style lang="less" scoped>
165.btns{
166   padding: 10px 0 10px 10px ;
167   background-color: #fff;
168}
169</style>