feat: 字典项新增功能
This commit is contained in:
leiqiaochu
parent
12055d5e7a
commit
d72e88d725
|
|
@ -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)
|
||||
|
|
@ -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
|
||||
const selectData = listData.value.filter((item:any)=>{
|
||||
return item.id = selectKeys[0]
|
||||
})[0]
|
||||
emit('selectData',selectData)
|
||||
selectedKeys.value = [selectKeys.id]
|
||||
emit('selectData',selectKeys)
|
||||
}
|
||||
onMounted(()=>{
|
||||
queryData()
|
||||
queryData(true)
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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{
|
||||
|
|
|
|||
Loading…
Reference in New Issue