feat: 字典左侧选中数据传递

src/views/system/Dictionary/components/Left.vue

@@ -12,10 +12,10 @@
     </div>
     
     <div>
-        <j-tree :tree-data="listData" :fieldNames="{title:'name',key:'id'}" blockNode>
+        <j-tree :tree-data="listData" :fieldNames="{title:'name',key:'id'}" blockNode @select="selectDic" :selectedKeys="selectedKeys">
             <template #title="item">
                 <div class="treeItem">
-                    <div>{{ item.name }}</div>
+                    <div class="itemText">{{ item.name }}</div>
                     <div>
                         <j-popconfirm :title="item.data.status === 1 ? '确定禁用？' : '确定启用？'" @confirm="()=>updateDic(item.data)">
                             <j-switch v-model:checked="item.status" :checkedValue="1" :unCheckedValue="0"></j-switch>
@@ -37,10 +37,12 @@
 import { getDicList ,deleteDictionary,addDictionary} from '@/api/system/dictionary';
 import Save from './save/index.vue'
 import { onlyMessage } from '@/utils/comm';
+const emit = defineEmits(['selectData'])
 const saveShow = ref(false)
 const addType = ref('add')
 const listData = ref<any[]>([])
 const editData = ref()
+const selectedKeys = ref([])
 const showSave = () =>{
     saveShow.value = true
     addType.value = 'add'
@@ -96,6 +98,16 @@ const updateDic = (data:any)=>{
         }
     })
 }
+/**
+ * 切换选中字典
+ */
+const selectDic = (selectKeys:any)=>{
+    selectedKeys.value = selectKeys
+    const selectData = listData.value.filter((item:any)=>{
+       return item.id = selectKeys[0]
+    })[0]
+    emit('selectData',selectData)
+}
 onMounted(()=>{
     queryData()
 })
@@ -110,5 +122,8 @@ onMounted(()=>{
 .treeItem{
     display: flex;
     justify-content: space-between;
+    .itemText{
+        line-height: 32px
+    }
 }
 </style>

src/views/system/Dictionary/components/Right/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="des_head">
+        <div>字典ID：<span>{{ data.id }}</span></div>
+        <div>说明：<span>{{ data.describe }}</span></div>
+        <div>创建日期：<span>{{ data.name }}</span></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+    data:{
+        type:Object,
+        default:{}
+    }
+})
+</script>
+<style lang="less" scoped>
+.des_head{
+    padding: 10px 20px;
+    background-color: rgb(242, 242, 242);
+    span{
+        color:rgb(127, 127, 127)
+    }
+}
+</style>

src/views/system/Dictionary/index.vue

@@ -3,9 +3,11 @@
         <FullPage>
             <div class="dictionary_contain">
                 <div class="dictionary_left">
-                    <Left/>
+                    <Left @selectData="selectData"/>
+                </div>
+                <div class="dictionary_right">
+                    <Right :data="data"/>
                 </div>
-                <div class="dictionary_right"></div>
             </div>
         </FullPage>
    </page-container>
@@ -13,6 +15,11 @@
 
 <script lang="ts" setup>
 import Left from './components/Left.vue'
+import Right from './components/Right/index.vue'
+const data = ref()
+const selectData = (i:any)=>{
+    data.value= i
+}
 </script>
 <style lang="less" scoped>
 .dictionary_contain{