feat(menu.vue):添加菜单模块

src/views/system/dict/components/Dict.vue

@@ -158,6 +158,7 @@ const state = reactive({
 })
 
 function handleQuery() {
+  emit('dictClick',{})
   state.loading = true
   listDictWithPage(state.queryParams).then(response => {
     const {data, total} = response as any

src/views/system/dict/index.vue

@@ -3,9 +3,10 @@
     <el-row :gutter="10">
       <el-col :span="12" :xs="24">
         <el-card class="box-card">
-          <div class="clearfix" slot="header">
-            <b>字典列表</b>
-          </div>
+          <template #header>
+            <svg-icon color="#000" icon-class="dict"/>
+            字典列表
+          </template>
           <!-- 字典列表子组件 -->
           <dict @dictClick="handleDictClick"/>
         </el-card>
@@ -13,12 +14,13 @@
 
       <el-col :span="12" :xs="24">
         <el-card class="box-card">
-          <div class="clearfix" slot="header">
-            <b  v-if=" state.dictCode" style="margin-right: 5px">字典</b>
-            <el-tag type="success" v-if=" state.dictCode" ><b>{{ state.dictName }}</b></el-tag>
-            <b  v-if=" state.dictCode" style="margin-left: 5px">数据项</b>
-            <el-tag type="warning"  v-if=" !state.dictCode">未选择字典</el-tag>
-          </div>
+          <template #header>
+            <svg-icon color="#333" v-if=" state.dictCode" icon-class="education" />
+            <span v-if=" state.dictCode" style="margin:0 5px;">字典</span>
+            <el-tag type="primary" v-if=" state.dictCode" size="small">{{ state.dictName }}</el-tag>
+            <span v-if=" state.dictCode" style="margin-left: 5px">数据项</span>
+            <el-tag type="warning" v-if=" !state.dictCode" size="small">未选择字典</el-tag>
+          </template>
           <!-- 字典项组件 -->
           <dict-item :dictName="state.dictName" :dictCode='state.dictCode'/>
         </el-card>
@@ -28,6 +30,7 @@
 </template>
 
 <script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon/index.vue';
 import Dict from './components/Dict.vue'
 import DictItem from './components/DictItem.vue'
 
@@ -39,12 +42,12 @@ const state = reactive({
 })
 
 const handleDictClick = (dictRow: any) => {
-  state.dictName = dictRow.name
-  state.dictCode = dictRow.code
+  if(dictRow){
+    state.dictName = dictRow.name
+    state.dictCode = dictRow.code
+  }else{
+    state.dictName = ''
+    state.dictCode = ''
+  }
 }
-
 </script>
-
-<style scoped>
-
-</style>

src/views/system/menu/components/Menu.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <el-form>
+      123
+    </el-form>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Menu"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/system/menu/components/Perm.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "Perm"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/system/menu/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10">
+      <el-col :span="10" :xs="24">
+        <el-card class="box-card" shadow="always">
+          <template #header>
+            <svg-icon color="#000" icon-class="menu"/> 菜单列表
+          </template>
+          <menu-table @menuClick="handleMenuClick"/>
+        </el-card>
+      </el-col>
+      <el-col :span="14" :xs="24">
+        <el-card class="box-card" shadow="always">
+          <div slot="header">
+            <b v-if=" state.dictCode" style="margin-right: 5px">菜单</b>
+            <el-tag type="success" v-if=" state.dictCode"><b>{{ state.dictName }}</b></el-tag>
+            <b v-if=" state.dictCode" style="margin-left: 5px">数据权限</b>
+            <el-tag type="warning" v-if=" !state.dictCode">未选择菜单</el-tag>
+          </div>
+          <perm-table :menuId="state.menuId" :menuName="state.menuName"/>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon/index.vue';
+import MenuTable from './components/Menu.vue'
+import PermTable from './components/Perm.vue'
+
+import {reactive} from 'vue'
+
+const state = reactive({
+  menuId: undefined,
+  menuName: ''
+})
+
+const handleMenuClick = (menuRow: any) => {
+  state.menuId = menuRow.id
+  state.menuName = menuRow.name
+}
+
+</script>
+
+<style scoped>
+
+</style>