feat: 字典项新增功能

src/api/system/dictionary.ts

@@ -18,4 +18,14 @@ export const addDictionary = (data:any) => request.patch('/dictionary',data)
 /**
  * 删除字典
  */
-export const deleteDictionary =(id:string) => request.delete(`/dictionary/${id}`)
+export const deleteDictionary =(id:string) => request.delete(`/dictionary/${id}`)
+
+/**
+ * 查询字典项
+ */
+export const queryDicItem = (data:any)=>request.post('/dictionary-item/_query',data)
+
+/**
+ * 保存字典项
+ */
+export const saveDicItem = (data:any) => request.patch('/dictionary-item',data)

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

@@ -12,9 +12,9 @@
     </div>
     
     <div>
-        <j-tree :tree-data="listData" :fieldNames="{title:'name',key:'id'}" blockNode @select="selectDic" :selectedKeys="selectedKeys">
+        <j-tree :tree-data="listData" :fieldNames="{title:'name',key:'id'}" blockNode  :selectedKeys="selectedKeys">
             <template #title="item">
-                <div class="treeItem">
+                <div class="treeItem" @click="()=>selectDic(item.data)">
                     <div class="itemText">{{ item.name }}</div>
                     <div>
                         <j-popconfirm :title="item.data.status === 1 ? '确定禁用？' : '确定启用？'" @confirm="()=>updateDic(item.data)">
@@ -42,15 +42,18 @@ const saveShow = ref(false)
 const addType = ref('add')
 const listData = ref<any[]>([])
 const editData = ref()
-const selectedKeys = ref([])
+const selectedKeys:any = ref([])
 const showSave = () =>{
     saveShow.value = true
     addType.value = 'add'
 }
-const queryData = () =>{
+const queryData = (first?:Boolean) =>{
     getDicList({sorts: [{ name: 'createTime', order: 'desc' }]}).then((res:any)=>{
         if(res.status === 200){
             listData.value = res.result
+            if(first){
+                selectDic(res.result[0])
+            }
         }
     })
 }
@@ -102,14 +105,11 @@ const updateDic = (data:any)=>{
  * 切换选中字典
  */
 const selectDic = (selectKeys:any)=>{
-    selectedKeys.value = selectKeys
+    selectedKeys.value = [selectKeys.id]
-    const selectData = listData.value.filter((item:any)=>{
+    emit('selectData',selectKeys)
-       return item.id = selectKeys[0]
-    })[0]
-    emit('selectData',selectData)
 }
 onMounted(()=>{
-    queryData()
+    queryData(true)
 })
 </script>
 <style lang="less" scoped>

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

@@ -0,0 +1,104 @@
+<template>
+  <j-modal visible :title="type ==='add' ? '新增':'编辑'" @cancel="close" @ok="submitData" :maskClosable="false" :confirmLoading="loading">
+    <j-form :model="form" layout="vertical" :rules="rules" ref="formRef">
+        <j-form-item label="name"  name="name">
+            <j-input placeholder="con_type" v-model:value="form.name"></j-input>
+        </j-form-item>
+        <j-form-item label="value" name="value">
+            <j-input placeholder="con_type" v-model:value="form.value"></j-input>
+        </j-form-item>
+        <j-form-item label="text" name="text">
+            <j-input placeholder="连接失败" v-model:value="form.text"></j-input>
+        </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 { saveDicItem } from '@/api/system/dictionary';
+import { onlyMessage } from '@/utils/comm';
+const props = defineProps({
+    type:{
+        type:String,
+        default:'add'
+    },
+    dicId:{
+        type:String,
+        default:''
+    },
+    sort:{
+        type:Number,
+        default:1
+    }
+})
+const emit = defineEmits(['closeModal','refresh'])
+const form = ref({
+    dictId:'',
+    name:'',
+    value:'',
+    text:'',
+    ordinal:0
+})
+
+const loading = ref(false)
+const formRef = ref()
+/*
+* 校验id
+ */
+ const validateInput = async (_rule: Rule, value: string) => {
+    if (value) {
+        if (!isInput(value)) {
+            return Promise.reject('请输入英文或者数字或者-或者_');
+        }
+    } else {
+        return Promise.resolve();
+    }
+};
+const rules = {
+    name: [
+        { required:true,message:'请输入name'},
+        { validator: validateInput, trigger: 'blur' },
+        { max: 64, message: '最多可输入64位字符', trigger: 'change' },
+    ],
+    value: [
+        { required: true, message: '请输入value', trigger: 'blur' },
+        { max: 64, message: '最多可输入64位字符', trigger: 'change' },
+    ],
+    text: [
+        { required: true, message: '请输入text', trigger: 'blur' },
+        { max: 64, message: '最多可输入64位字符', trigger: 'change' },
+    ]
+}
+const submitData = () =>{
+    formRef.value.validate().then(async()=>{
+        loading.value = true
+        const res = await saveDicItem(form.value)
+        if(res.status ===200){
+            onlyMessage('操作成功!')
+            emit('refresh')
+        }else{
+            onlyMessage('操作失败!','error')
+        }
+        loading.value = false
+    })
+}
+const close = () =>{
+    emit('closeModal')
+}
+
+watch(()=>props.dicId,()=>{
+    form.value.dictId = props.dicId
+},{
+    immediate:true
+})
+
+watch(()=>props.sort,()=>{
+    form.value.ordinal = props.sort
+},{
+    immediate:true
+})
+</script>
+<style lang="less" scoped>
+</style>

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

@@ -5,16 +5,138 @@
         <div>说明：<span>{{ data.describe }}</span></div>
         <div>创建日期：<span>{{ data.name }}</span></div>
     </div>
+    <div class="contain">
+        <pro-search
+            :columns="columns"
+            @search="handleSearch"
+        />
+        <JProTable :columns="columns" 
+                    model="TABLE" 
+                    :request="queryItem"
+                    :params="params"
+                    ref="tableRef"
+        >
+            <template #headerTitle>
+                    <PermissionButton
+                        type="primary"
+                        @click="add"
+                    >
+                        新增
+                    </PermissionButton>
+            </template>
+        </JProTable>
+    </div>
   </div>
+  <Save v-if="saveVisible" :dicId='data.id' :sort=sort @closeModal="closeModal" @refresh="refresh"/>
 </template>
 
 <script lang="ts" setup>
+import { queryDicItem } from '@/api/system/dictionary'
+import Save from './Save/index.vue'
 const props = defineProps({
     data:{
         type:Object,
         default:{}
     }
 })
+const params = ref()
+const tableRef = ref()
+const saveVisible = ref(false)
+const sort = ref(0)
+const columns = [
+    {
+        title:'序号',
+        dataIndex:'ordinal',
+        key:'ordinal',
+        search:{
+            type:'number'
+        }
+    },
+    {
+        title: 'name',
+        dataIndex: 'name',
+        key: 'name', 
+        ellipsis: true,
+        search:{
+            type:'string'
+        }
+    },
+    {
+        title: 'value',
+        dataIndex: 'value',
+        key: 'value',
+        ellipsis: true,
+        search:{
+            type:'string'
+        }
+    },
+    {
+        title: 'text',
+        dataIndex: 'text',
+        key: 'text',
+        ellipsis: true,
+        search:{
+            type:'string'
+        }
+    },{
+        title:'操作',
+        dataIndex:'action',
+        key:'action',
+        scopedSlots: true,
+    }
+];
+
+const add = () =>{
+    saveVisible.value = true
+}
+
+const closeModal = () =>{
+    saveVisible.value = false
+}
+const handleSearch = (i:any)=>{
+    params.value = i
+}
+const refresh = () =>{
+    saveVisible.value = false
+    tableRef.value.reload()
+}
+const queryItem =async(_params:any)=>{
+    if (props.data?.id) {
+            const params = {
+                ..._params,
+                sorts: [{ name: 'createTime', order: 'desc' }],
+                terms: [
+                    ..._params.terms,
+                    {
+                        column: 'dictId',
+                        termType: 'eq',
+                        value: props.data?.id
+                    },
+                ],
+            };
+            const resp: any = await queryDicItem(params);
+            sort.value = resp?.result?.total + 1
+            if(resp.status===200){
+                return {
+                code: resp.status,
+                result: resp.result,
+                status: resp.status,
+                };
+            }
+        } else {
+            sort.value= 1
+            return {
+                code: 200,
+                result: {
+                    data: [],
+                    pageIndex: 0,
+                    pageSize: 0,
+                    total: 0,
+                },
+                status: 200,
+            };
+        }
+    }
 </script>
 <style lang="less" scoped>
 .des_head{