feat: 数据字典新增功能
This commit is contained in:
leiqiaochu
parent
97c4ace8a3
commit
21293b5484
|
|
@ -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)
|
||||
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue