From aab3a5be5ef0b1c41af7ada4f21bbdb0f16410b6 Mon Sep 17 00:00:00 2001
From: expressgy <x71291@outlook.com>
Date: Thu, 4 Jul 2024 22:08:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=AD=97=E5=85=B8=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA=20=E6=98=8E=E5=A4=A9=E5=AE=8C=E6=88=90=E5=AD=97?=
 =?UTF-8?q?=E5=85=B8=E5=88=86=E9=A1=B5=EF=BC=8C=E5=88=A0=E9=99=A4=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CustomAntDesignVue/IconSelect/add.svg     |   7 ++
 .../IconSelect/customIconSelect.vue           | 118 ++++++++++++++----
 .../CustomAntDesignVue/IconSelect/icon.svg    |   1 +
 src/views/Auth/Dict/DictForm.vue              |  11 +-
 src/views/Auth/Dict/index.vue                 |  31 +++--
 src/views/Auth/Service/index.vue              |   5 +-
 6 files changed, 126 insertions(+), 47 deletions(-)
 create mode 100644 src/components/AntDesignVue/CustomAntDesignVue/IconSelect/add.svg
 create mode 100644 src/components/AntDesignVue/CustomAntDesignVue/IconSelect/icon.svg

diff --git a/src/components/AntDesignVue/CustomAntDesignVue/IconSelect/add.svg b/src/components/AntDesignVue/CustomAntDesignVue/IconSelect/add.svg
new file mode 100644
index 0000000..4453c6a
--- /dev/null
+++ b/src/components/AntDesignVue/CustomAntDesignVue/IconSelect/add.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1720099374563" class="icon" viewBox="0 0 1036 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     p-id="40865" xmlns:xlink="http://www.w3.org/1999/xlink" width="202.34375" height="200">
+    <path fill="#999" d="M967.460547 546.110294 586.925143 546.110294 586.925143 954.949983C586.925143 993.069187 555.99433 1024 517.875127 1024 479.721363 1024 448.82511 993.069187 448.82511 954.949983L448.82511 546.110294 68.255147 546.110294C30.550658 546.110294 0 515.559636 0 477.855147 0 440.150658 30.550658 409.6 68.255147 409.6L448.82511 409.6 448.82511 69.050017C448.82511 30.930813 479.721363 0 517.875127 0 555.99433 0 586.925143 30.930813 586.925143 69.050017L586.925143 409.6 967.460547 409.6C1005.165035 409.6 1035.750253 440.150658 1035.750253 477.855147 1035.750253 515.559636 1005.165035 546.110294 967.460547 546.110294Z"
+          p-id="40866"></path>
+</svg>
diff --git a/src/components/AntDesignVue/CustomAntDesignVue/IconSelect/customIconSelect.vue b/src/components/AntDesignVue/CustomAntDesignVue/IconSelect/customIconSelect.vue
index 2ff3ec2..5c5fea9 100644
--- a/src/components/AntDesignVue/CustomAntDesignVue/IconSelect/customIconSelect.vue
+++ b/src/components/AntDesignVue/CustomAntDesignVue/IconSelect/customIconSelect.vue
@@ -1,8 +1,10 @@
 <script setup name="CustomIconSelect">
 defineOptions({ name: 'CustomIconSelect' });
+import iconSvg from './add.svg';
+import iconSvg2 from './icon.svg';
 import { NPopover } from 'naive-ui';
 import { custonIcon1, custonIcon2 } from '@/components/AntDesignVue/Icon/index.js';
-import { ref, watch } from 'vue';
+import { onMounted, ref, shallowRef, watch } from 'vue';
 const props = defineProps({
     value: {
         type: String,
@@ -11,46 +13,81 @@ const props = defineProps({
 });
 // icon滑动窗
 const iconName = ref(props.value);
+// 选择的图标
+const iconComponent = shallowRef(null);
+// 弹出框
+const popover = ref(null);
+const iconList = [
+    {
+        label: '简单的库',
+        icon: '',
+        title: 'icon1',
+        option: custonIcon1,
+    },
+    {
+        label: '拓展的库',
+        icon: '',
+        title: 'icon2',
+        option: custonIcon2,
+    },
+];
 
 // 定义 emit 事件
 const emit = defineEmits(['update:value']);
 
 watch(props, (value) => {
     iconName.value = value.value;
+    iconComponent.value = findIcon(iconName.value);
+});
+onMounted(() => {
+    iconComponent.value = findIcon(iconName.value);
 });
 
+// 查找图标
+function findIcon(name){
+    if(name == '' || name == undefined || name == null) {
+        return null;
+    }else{
+        const foldername = name.split('-')[0];
+        const componentList = iconList.filter((item) => item.title == foldername);
+        if(componentList.length == 0) {
+            return null;
+        }else{
+            const target = componentList[0].option.filter(icon => icon.name == name);
+            if(target.length == 0){
+                return null;
+            }else {
+                return target[0];
+            }
+        }
+    }
+}
 
 // 打开选择器
 const handleClick = (e) => {
-    console.log(e);
+    // console.log(e);
 };
 // 选择图标
 const handleChooseIcon = (data) => {
     emit('update:value', data.name);
+    popover.value.setShow(false);
 };
-const iconList = [
-    {
-        label: '简单的库',
-        icon: '',
-        title: 'Icon1',
-        option: custonIcon1,
-    },
-    {
-        label: '拓展的库',
-        icon: '',
-        title: 'Icon2',
-        option: custonIcon2,
-    },
-];
 </script>
 
 <template>
-    <NPopover ref="popRef" trigger="click" @click="handleClick" placement="bottom-start">
+    <NPopover ref="popover" trigger="click" @click="handleClick" placement="bottom-start">
         <template #trigger>
-            <AInput class="iconShow" v-model:value="iconName" @click="handleClick"/>
+            <div class="chooseBox">
+                <div v-if="iconName == ''" class="default-icon">
+                    <img :src="iconSvg" alt="" @click="handleClick">
+                </div>
+                <div v-else class="choose-icon"><component v-if="iconComponent != null" :is="iconComponent"/><span v-else>NULL</span></div>
+            </div>
         </template>
         <div class="iconBox">
-            <header>我是图标哦</header>
+            <header>
+                <img :src="iconSvg2" alt="我是图标哦">新新图标库
+            </header>
             <main>
                 <div class="iconClassContainer" :id="iconClass.title" v-for="iconClass in iconList" :key="iconClass.label">
                     <header>{{ iconClass.label }}</header>
@@ -64,6 +101,39 @@ const iconList = [
 </template>
 
 <style scoped lang="scss">
+.chooseBox{
+    position: relative;
+    border-radius: 5px;
+    width: 40px;
+    height: 40px;
+    border: 2px #ccc dashed;
+    cursor: pointer;
+    transition: all ease-in-out 0.2s;
+    & > div.default-icon{
+        position: relative;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        & > img{
+            width: 16px;
+            cursor: pointer;
+        }
+    }
+    & > div.choose-icon{
+        position: relative;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 24px;
+    }
+    &:hover{
+        border: 2px #1677ffaa dashed;
+    }
+}
 .iconBox {
     position: relative;
     width: 360px;
@@ -75,8 +145,15 @@ const iconList = [
         position: relative;
         flex: 0 0;
         height: 30px;
-        background: #cc361c;
+        //background: #cc361c;
         margin-bottom: 10px;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        & > img {
+            width: 20px;
+            margin-right: 10px;
+        }
     }
     & > main {
         position: relative;
@@ -99,7 +176,6 @@ const iconList = [
             }
             & > header {
                 margin-bottom: 5px;
-                font-size: 1.1em;
                 background: #cdcdcd;
                 border-radius: 3px;
                 padding: 2px 5px;
diff --git a/src/components/AntDesignVue/CustomAntDesignVue/IconSelect/icon.svg b/src/components/AntDesignVue/CustomAntDesignVue/IconSelect/icon.svg
new file mode 100644
index 0000000..7629a2b
--- /dev/null
+++ b/src/components/AntDesignVue/CustomAntDesignVue/IconSelect/icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720098902983" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30339" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M959.47 469.96C938.27 242.26 745.15 64 511.94 64 264.55 64 64 264.58 64 512s200.55 448 447.94 448c40.56 0 73.43-32.88 73.43-73.44 0-30.08-18.16-56-44.06-67.31-17.58-11.25-29.37-30.83-29.37-53.14 0-34.74 28.42-63.16 63.15-63.16h182.49v-0.17c107.07-1.71 194.41-85.19 201.89-190.78 0-3.28 0.07-6.52 0-9.79 0.04-1.64 0-3.25 0-4.9 0-9.29 1.19-18.38 0-27.35zM240.3 526.69c-44.61 0-80.78-36.17-80.78-80.79s36.17-80.79 80.78-80.79 80.77 36.17 80.77 80.79-36.16 80.79-80.77 80.79z m146.87-205.64c-44.61 0-80.78-36.17-80.78-80.79s36.16-80.79 80.78-80.79 80.78 36.17 80.78 80.79-36.17 80.79-80.78 80.79z m249.67 0c-44.61 0-80.78-36.17-80.78-80.79s36.16-80.79 80.78-80.79 80.78 36.17 80.78 80.79-36.17 80.79-80.78 80.79zM783.7 526.69c-44.61 0-80.78-36.17-80.78-80.79s36.16-80.79 80.78-80.79 80.78 36.17 80.78 80.79-36.17 80.79-80.78 80.79z" fill="#FFAA71" p-id="30340"></path></svg>
\ No newline at end of file
diff --git a/src/views/Auth/Dict/DictForm.vue b/src/views/Auth/Dict/DictForm.vue
index bc8fe56..fbea10a 100644
--- a/src/views/Auth/Dict/DictForm.vue
+++ b/src/views/Auth/Dict/DictForm.vue
@@ -98,6 +98,10 @@ const handleCancel = () => {
                 </AFlex>
             </AFormItem>
 
+            <AFormItem label="字典标志" name="dictName">
+                <AInput style="width: 100%" v-model:value="form.dictKey" placeholder="请输入字典标志" :maxlength="32" showCount />
+            </AFormItem>
+
             <AFormItem label="字典名称" name="dictName">
                 <AInput style="width: 100%" v-model:value="form.dictName" placeholder="请输入字典名称" :maxlength="32" showCount />
             </AFormItem>
@@ -106,11 +110,6 @@ const handleCancel = () => {
                 <ASelect placeholder="请选择字典类型" ref="dictType" v-model:value="form.dictType" :options="baseDataStore.state.dictTypeList" />
             </AFormItem>
 
-            <AFormItem label="字典图标" name="dictIcon">
-                <IconSelect v-model:value="form.dictIcon" @change="handleChange"/>
-<!--                <ASelect placeholder="请选择字典图标" ref="dictIcon" v-model:value="form.dictIcon" :options="baseDataStore.state.dictTypeList" />-->
-            </AFormItem>
-
             <AFormItem label="字典图标" name="dictIcon">
                 <CustomIconSelect v-model:value="form.dictIcon"/>
             </AFormItem>
@@ -121,7 +120,7 @@ const handleCancel = () => {
             <AFormItem label="原始数据Root" name="root">
                 <ARadioGroup v-model:value="form.root" name="radioGroup">
                     <ARadio :value="true">是</ARadio>
-                    <a-radio :value="false">否</a-radio>
+                    <ARadio :value="false">否</ARadio>
                 </ARadioGroup>
             </AFormItem>
             <AFormItem label="排序" name="orderNum">
diff --git a/src/views/Auth/Dict/index.vue b/src/views/Auth/Dict/index.vue
index 34fff58..f10e9e6 100644
--- a/src/views/Auth/Dict/index.vue
+++ b/src/views/Auth/Dict/index.vue
@@ -1,13 +1,15 @@
 <script setup name="DictPage">
 import { reactive } from 'vue';
 import DictForm from './DictForm.vue';
-import { IconComponentList1 } from '@/components/AntDesignVue/Icon/customIcon.js';
-import {AsyncIconComponentList1} from '@/components/AntDesignVue/Icon/asyncCustomIcon.js';
+import { CoreDict } from '@/api/index.js';
+import { useMessage } from 'naive-ui';
+
+const Message = useMessage();
 
 // ! 关于新增修改的表单
 const formData = reactive({
     // 弹窗状态
-    status: true,
+    status: false,
     // 表单数据
     formData: {
         pid: 0,
@@ -16,7 +18,7 @@ const formData = reactive({
         // 字典描述
         dictDesc: '',
         // 字典名
-        dictName: 'AAAAAAA',
+        dictName: '',
         // 图标
         dictIcon: '',
         // 字典的数据类型
@@ -29,15 +31,20 @@ const formData = reactive({
         orderNum: 0,
     },
     // 确认
-    handleAck: (data) => {
-        console.log(data);
-        console.log('确认');
-    },
+    handleAck: (data) => handleCreateAck(data),
     // 取消
     handleCancel: () => {
         formData.status = false;
     },
 });
+// todo 重置分页参数
+// todo 清除数据体
+// todo 清理筛选项
+// ! 确认添加
+async function handleCreateAck(data){
+    await CoreDict.createDict(data);
+    Message.success('添加字典成功!');
+}
 // const cc = SvgComponentList[0]
 </script>
 
@@ -47,14 +54,6 @@ const formData = reactive({
             <CreateAntdButton name="字典" @click="formData.status = true" />
         </template>
         <template #main>
-            <Suspense>
-                <template #default>
-                    <component :is="AsyncIconComponentList1[0]" style="font-size: 1000px"/>
-                </template>
-                <template #fallback>
-                    加载中...
-                </template>
-            </Suspense>
         </template>
         <template #modal>
             <AModal v-model:open="formData.status" title="添加字典" :centered="true" :maskClosable="false">
diff --git a/src/views/Auth/Service/index.vue b/src/views/Auth/Service/index.vue
index 16b9ced..ace682e 100644
--- a/src/views/Auth/Service/index.vue
+++ b/src/views/Auth/Service/index.vue
@@ -3,9 +3,7 @@ import { AddCircleOutline, CheckmarkSharp, Close, Search } from '@vicons/ionicon
 import { DeleteTwotone, EditTwotone } from '@vicons/antd';
 import { CoreService } from '@/api/index.js';
 import { onMounted, reactive, ref } from 'vue';
-import { useMessage, NThemeEditor } from 'naive-ui';
-import { useSystemStore } from '@/stores/system.js';
-const systemStore = useSystemStore();
+import { useMessage } from 'naive-ui';
 
 const Message = useMessage();
 
@@ -334,7 +332,6 @@ onMounted(() => {
                                     <n-input type="textarea" maxlength="255" show-count v-model:value="formData.serviceDesc" placeholder="请输入服务描述" clearable />
                                 </NFormItem>
                             </NForm>
-                            <NThemeEditor></NThemeEditor>
                         </div>
                     </template>
                     <template #footer>