From 12055d5e7a586504dec63561d1da35b32f5d672f Mon Sep 17 00:00:00 2001
From: leiqiaochu <leiqiaochu@aossci.com>
Date: Fri, 1 Sep 2023 14:42:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AD=97=E5=85=B8=E5=B7=A6=E4=BE=A7?=
 =?UTF-8?q?=E9=80=89=E4=B8=AD=E6=95=B0=E6=8D=AE=E4=BC=A0=E9=80=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/Dictionary/components/Left.vue     | 19 +++++++++++--
 .../Dictionary/components/Right/index.vue     | 27 +++++++++++++++++++
 src/views/system/Dictionary/index.vue         | 11 ++++++--
 3 files changed, 53 insertions(+), 4 deletions(-)
 create mode 100644 src/views/system/Dictionary/components/Right/index.vue

diff --git a/src/views/system/Dictionary/components/Left.vue b/src/views/system/Dictionary/components/Left.vue
index e80645bf..4d6c7d4a 100644
--- a/src/views/system/Dictionary/components/Left.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/system/Dictionary/components/Right/index.vue b/src/views/system/Dictionary/components/Right/index.vue
new file mode 100644
index 00000000..597c37f2
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/system/Dictionary/index.vue b/src/views/system/Dictionary/index.vue
index 4e272aaf..7081e43d 100644
--- a/src/views/system/Dictionary/index.vue
+++ b/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{