From 21293b5484339664bcf606ecf2c9378d8d3dbf6d Mon Sep 17 00:00:00 2001
From: leiqiaochu <leiqiaochu@aossci.com>
Date: Fri, 1 Sep 2023 10:05:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E5=AD=97=E5=85=B8?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/dictionary.ts                  |  16 +++
 .../system/Dictionary/components/Left.vue     |  37 +++++-
 .../Dictionary/components/save/index.vue      | 116 ++++++++++++++++++
 src/views/system/Dictionary/index.vue         |  22 +++-
 4 files changed, 182 insertions(+), 9 deletions(-)
 create mode 100644 src/api/system/dictionary.ts
 create mode 100644 src/views/system/Dictionary/components/save/index.vue

diff --git a/src/api/system/dictionary.ts b/src/api/system/dictionary.ts
new file mode 100644
index 00000000..4cfd5a06
--- /dev/null
+++ b/src/api/system/dictionary.ts
@@ -0,0 +1,16 @@
+import server, { request } from '@/utils/request';
+
+/**
+ * 查询字典列表
+ */
+export const getDicList = (data:any) => request.post('/dictionary/_query/no-paging',data)
+
+/**
+ * 查询字典ID是否重复
+ */
+export const verifyId = (id:string) => request.post(`/dictionary/_exists`,{where:`id is ${id}`})
+
+/**
+ * 保存字典
+ */
+export const addDictionary = (data:any) => request.post('/dictionary',data)
\ No newline at end of file
diff --git a/src/views/system/Dictionary/components/Left.vue b/src/views/system/Dictionary/components/Left.vue
index 6997d978..ab7d77de 100644
--- a/src/views/system/Dictionary/components/Left.vue
+++ b/src/views/system/Dictionary/components/Left.vue
@@ -6,22 +6,51 @@
         </template>
     </j-input>
     <div class="controls">
-        <j-button type="primary">新增字典</j-button>
+        <j-button type="primary" @click="showSave" style="width: 60%;">新增字典</j-button>
         <j-button type="text">下载</j-button>
         <j-button type="text">导入</j-button>
     </div>
     <div>
-        <j-list>
+        <j-list :dataSource="listData">
             <template #renderItem="{ item }">
-                
+                <j-list-item>
+                    {{ item.name }}
+                    <template #actions>
+                        <j-switch :checked="item.status"></j-switch>
+                        <j-button type='text'>删除</j-button>
+                        <j-button type="text">编辑</j-button>
+                    </template>
+                </j-list-item>
             </template>
         </j-list>
     </div>
   </div>
+  <Save v-if="saveShow" :type="addType" @close-save="saveShow = false" @success="saveSuccess"/>
 </template>
 
 <script lang="ts" setup>
-
+import { getDicList } from '@/api/system/dictionary';
+import Save from './save/index.vue'
+const saveShow = ref(false)
+const addType = ref('add')
+const listData = ref<any[]>([])
+const showSave = () =>{
+    saveShow.value = true
+    addType.value = 'add'
+}
+const queryData = () =>{
+    getDicList({sorts: [{ name: 'createTime', order: 'desc' }]}).then((res:any)=>{
+        if(res.status === 200){
+            listData.value = res.result
+        }
+    })
+}
+const saveSuccess = () =>{
+    queryData()
+}
+onMounted(()=>{
+    queryData()
+})
 </script>
 <style lang="less" scoped>
 .controls{
diff --git a/src/views/system/Dictionary/components/save/index.vue b/src/views/system/Dictionary/components/save/index.vue
new file mode 100644
index 00000000..f77cf5b0
--- /dev/null
+++ b/src/views/system/Dictionary/components/save/index.vue
@@ -0,0 +1,116 @@
+<template>
+  <j-modal 
+    :title="type==='add'?'新增字典':'编辑字典'" 
+    visible 
+    @cancel="closeModal"
+    @ok="submitData"  
+    width="650px" 
+    :maskClosable="false"
+    :confirmLoading="loading"
+  >
+    <j-form layout="vertical" :rules="rules" ref="formRef" :model="form">
+        <j-form-item label="字典ID" name="id">
+            <j-input v-model:value="form.id"></j-input>
+        </j-form-item>
+        <j-form-item label="字典名称" name="name">
+            <j-input v-model:value="form.name"></j-input>
+        </j-form-item>
+        <j-form-item label="状态" name="status">
+            <j-radio-group v-model:value="form.status">
+                <j-radio-button :value="1">启用</j-radio-button>
+                <j-radio-button :value="0">禁用</j-radio-button>
+            </j-radio-group>
+        </j-form-item>
+        <j-form-item label="说明" name="describe">
+            <j-textarea :rows="4" :maxlength="200" v-model:value="form.describe"></j-textarea>
+        </j-form-item>
+    </j-form>
+  </j-modal>
+</template>
+
+<script lang="ts" setup>
+import { isInput } from '@/utils/regular';
+import type { Rule } from 'ant-design-vue/es/form';
+import { verifyId,addDictionary } from '@/api/system/dictionary'
+import { onlyMessage } from '@/utils/comm';
+import { error } from 'console';
+const props = defineProps({
+    type:{
+        type:String,
+        default:'add'
+    }
+})
+const emit = defineEmits(['closeSave','success'])
+const loading = ref(false)
+const formRef = ref()
+const form = reactive({
+    id:'',
+    name:'',
+    describe:'',
+    status:0,
+})
+/**
+ * 校验id
+ */
+ const validateInput = async (_rule: Rule, value: string) => {
+    if (value) {
+        if (!isInput(value)) {
+            return Promise.reject('请输入英文或者数字或者-或者_');
+        } else {
+            if (props.type === 'add') {
+                const res:any = await verifyId(value);
+                if (res.status === 200 && res.result) {
+                    return Promise.reject('ID重复');
+                } else {
+                    return Promise.resolve();
+                }
+            }
+        }
+    } else {
+        return Promise.resolve();
+    }
+};
+
+const rules = {
+    id: [
+        { required:true,message:'请输入ID'},
+        { validator: validateInput, trigger: 'blur' },
+        { max: 64, message: '最多可输入64位字符', trigger: 'change' },
+    ],
+    name: [
+        { required: true, message: '请输入名称', trigger: 'blur' },
+        { max: 64, message: '最多可输入64位字符', trigger: 'change' },
+    ],
+    status: [
+        {
+            required: true,
+            message:'请选择状态',
+            trigger: 'blur',
+        },
+    ],
+    description: [
+        { max: 200, message: '最多可输入200位字符', trigger: 'blur' },
+    ],
+}
+
+const submitData = () =>{
+    formRef.value.validate().then(async()=>{
+        loading.value = true
+        if(props.type === 'add'){
+            const res = await addDictionary(form)
+            if(res.status === 200){
+                onlyMessage('保存成功!')
+                emit('success')
+            }else{
+                onlyMessage('操作失败!','error')
+            }
+        }
+        loading.value = false
+    })
+}
+const closeModal = ()=>{
+    emit('closeSave')
+}
+</script>
+<style lang="less" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/system/Dictionary/index.vue b/src/views/system/Dictionary/index.vue
index 09785d2f..4e272aaf 100644
--- a/src/views/system/Dictionary/index.vue
+++ b/src/views/system/Dictionary/index.vue
@@ -1,11 +1,13 @@
 <template>
    <page-container>
-        <div class="dictionary_contain">
-            <div class="dictionary_left">
-                <Left/>
+        <FullPage>
+            <div class="dictionary_contain">
+                <div class="dictionary_left">
+                    <Left/>
+                </div>
+                <div class="dictionary_right"></div>
             </div>
-            <div class="dictionary_right"></div>
-        </div>
+        </FullPage>
    </page-container>
 </template>
 
@@ -17,5 +19,15 @@ import Left from './components/Left.vue'
     display: flex;
     background-color: #fff;
     padding: 24px;
+    height: 100%;
+}
+.dictionary_left{
+    border-right: 1px solid #f0f0f0;
+    padding-right: 24px;
+    flex:1;
+    height:100%
+}
+.dictionary_right{
+    flex:4
 }
 </style>
\ No newline at end of file