Kaynağa Gözat

增加菜单管理模块,对接相关接口

ljh 2 yıl önce
ebeveyn
işleme
ca25a0119f

+ 9 - 0
chuanyi-admin/src/api/system/menu.js

@@ -35,3 +35,12 @@ export function delMenuList(id) {
     params: id
   })
 }
+
+// 编辑菜单
+export function editMenuList(data) {
+  return request({
+    url: '/menu/updateMenu',
+    method: 'post',
+    data
+  })
+}

+ 48 - 14
chuanyi-admin/src/views/system/menu/index.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="sy-content">
     <el-row>
-      <el-col :span="4">
-        <el-tree :data="data" :props="defaultProps" />
-      </el-col>
-      <el-col :span="20">
+      <el-col :span="24">
         <!-- 表单查询 -->
         <el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
           <el-form-item label="菜单名称" prop="menuName">
@@ -26,7 +23,11 @@
           <el-table-column key="menuUrl" label="路由地址" align="center" prop="menuUrl" />
           <el-table-column key="sortNum" label="排序号" align="center" prop="sortNum" />
           <el-table-column key="createTime" label="创建时间" align="center" prop="createTime" width="160" />
-          <el-table-column key="updateTime" label="更新时间" align="center" prop="updateTime" width="160" />
+          <el-table-column key="updateTime" label="更新时间" align="center" prop="updateTime" width="160">
+            <template slot-scope="scope">
+              {{ scope.row.updateTime === null ? scope.row.createTime : scope.row.updateTime }}
+            </template>
+          </el-table-column>
           <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
             <template slot-scope="scope">
               <el-button size="mini" type="text" icon="el-icon-edit" @click="handelEdit(scope.row.id)">修改
@@ -107,7 +108,7 @@
 </template>
 
 <script>
-import { getMenuList, addtMenuList, detailtMenuList, delMenuList } from '@/api/system/menu.js'
+import { getMenuList, addtMenuList, detailtMenuList, delMenuList, editMenuList } from '@/api/system/menu.js'
 export default {
   data() {
     return {
@@ -169,7 +170,8 @@ export default {
       form: {},
       // 菜单类别
       options: [
-        { label: '主类目', parentId: 0 }
+        { label: '主类目', parentId: 0 },
+        { label: '菜单', parentId: 1 }
       ],
       // 表单验证
       rules: {
@@ -182,7 +184,9 @@ export default {
         menuUrl: [
           { required: true, message: '路由地址不能为空', trigger: 'blur' }
         ]
-      }
+      },
+      // 修改菜单id
+      id: null
     }
   },
   created() {
@@ -200,7 +204,7 @@ export default {
     },
     /** 表格多选事件 */
     handleSelectionChange() {
-      console.log(1)
+
     },
     /** 搜索 */
     handelSearch() {
@@ -220,16 +224,34 @@ export default {
     },
     /** 修改按钮 */
     handelEdit(id) {
+      this.id = id
       detailtMenuList({ id }).then(res => {
-        console.log(res)
+        this.form = res.data
       })
       this.dialogVisible = true
       this.title = '修改菜单'
     },
     /** 删除按钮 */
     handelDel(id) {
-      delMenuList({ id }).then(res => {
-        console.log(res)
+      this.$confirm('是否删除该菜单?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        delMenuList({ id }).then(res => {
+          if (res.code === 200) {
+            this.$message({
+              type: 'success',
+              message: res.data
+            })
+            this.getMenuList()
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
       })
     },
     /** 表单提交 */
@@ -243,9 +265,21 @@ export default {
                   message: res.data,
                   type: 'success'
                 })
+                this.getMenuList()
+                this.dialogVisible = false
+              }
+            })
+          } else {
+            this.form.id = this.id
+            editMenuList(this.form).then(res => {
+              if (res.code === 200) {
+                this.$message({
+                  message: res.data,
+                  type: 'success'
+                })
+                this.getMenuList()
+                this.dialogVisible = false
               }
-              this.getMenuList()
-              this.dialogVisible = false
             })
           }
         }