优化功能模块页面

This commit is contained in:
季圣华
2022-07-28 23:55:14 +08:00
parent 0fd608fd98
commit f03902bb74
3 changed files with 69 additions and 21 deletions

View File

@@ -72,6 +72,7 @@ const getAllMaterialAttribute = (params)=>getAction("/materialAttribute/getAll",
const addFunction = (params)=>postAction("/function/add",params); const addFunction = (params)=>postAction("/function/add",params);
const editFunction = (params)=>putAction("/function/update",params); const editFunction = (params)=>putAction("/function/update",params);
const checkFunction = (params)=>getAction("/function/checkIsNameExist",params); const checkFunction = (params)=>getAction("/function/checkIsNameExist",params);
const checkNumber = (params)=>getAction("/function/checkIsNumberExist",params);
//系统配置 //系统配置
const addSystemConfig = (params)=>postAction("/systemConfig/add",params); const addSystemConfig = (params)=>postAction("/systemConfig/add",params);
const editSystemConfig = (params)=>putAction("/systemConfig/update",params); const editSystemConfig = (params)=>putAction("/systemConfig/update",params);
@@ -163,6 +164,7 @@ export {
addFunction, addFunction,
editFunction, editFunction,
checkFunction, checkFunction,
checkNumber,
addSystemConfig, addSystemConfig,
editSystemConfig, editSystemConfig,
checkSystemConfig, checkSystemConfig,

View File

@@ -104,20 +104,21 @@
} }
}, },
{title: '编号 ', dataIndex: 'number', width: 80}, {title: '编号 ', dataIndex: 'number', width: 80},
{title: '名称', dataIndex: 'name', width: 100}, {title: '名称', dataIndex: 'name', width: 120, ellipsis:true},
{title: '上级编号', dataIndex: 'parentNumber', width: 80}, {title: '上级编号', dataIndex: 'parentNumber', width: 80},
{title: '链接', dataIndex: 'url', width: 250}, {title: '上级名称', dataIndex: 'parentName', width: 120, ellipsis:true},
{title: '组件', dataIndex: 'component', width: 250}, {title: '链接', dataIndex: 'url', width: 250, ellipsis:true},
{title: '排序', dataIndex: 'sort', width: 80}, {title: '组件', dataIndex: 'component', width: 250, ellipsis:true},
{title: '排序', dataIndex: 'sort', width: 60},
{ {
title: '是否启用', dataIndex: 'enabled', width: 80, align: "center", title: '是否启用', dataIndex: 'enabled', width: 80, align: "center",
scopedSlots: { customRender: 'customRenderFlag' } scopedSlots: { customRender: 'customRenderFlag' }
}, },
{title: '图标', dataIndex: 'icon', width: 110}, {title: '图标', dataIndex: 'icon', width: 120},
{ {
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
width: 200, width: 150,
align:"center", align:"center",
scopedSlots: { customRender: 'action' }, scopedSlots: { customRender: 'action' },
} }

View File

@@ -23,22 +23,22 @@
<a-input placeholder="请输入名称" v-decorator.trim="[ 'name', validatorRules.name]" /> <a-input placeholder="请输入名称" v-decorator.trim="[ 'name', validatorRules.name]" />
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级编号"> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级编号">
<a-input placeholder="请输入上级编号" v-decorator.trim="[ 'parentNumber' ]" /> <a-input placeholder="请输入上级编号" v-decorator.trim="[ 'parentNumber', validatorRules.parentNumber ]" />
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="链接"> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="链接">
<a-input placeholder="请输入链接" v-decorator.trim="[ 'url' ]" /> <a-input placeholder="请输入链接" v-decorator.trim="[ 'url', validatorRules.url ]" />
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="组件"> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="组件">
<a-input placeholder="请输入组件" v-decorator.trim="[ 'component' ]" /> <a-input placeholder="请输入组件" v-decorator.trim="[ 'component', validatorRules.component ]" />
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序"> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
<a-input placeholder="请输入排序" v-decorator.trim="[ 'sort' ]" /> <a-input placeholder="请输入排序" v-decorator.trim="[ 'sort', validatorRules.sort ]" />
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="功能按钮"> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="功能按钮">
<j-select-multiple placeholder="请选择功能按钮" v-model="jselectMultiple.value" :options="jselectMultiple.options"/> <j-select-multiple placeholder="请选择功能按钮" v-model="jselectMultiple.value" :options="jselectMultiple.options"/>
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="图标"> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="图标">
<a-input placeholder="请输入图标" v-decorator.trim="[ 'icon' ]" /> <a-input placeholder="请输入图标" v-decorator.trim="[ 'icon', validatorRules.icon ]" />
</a-form-item> </a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否启用"> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否启用">
<a-switch checked-children="启用" un-checked-children="禁用" v-model="enabledSwitch" @change="onChange"/> <a-switch checked-children="启用" un-checked-children="禁用" v-model="enabledSwitch" @change="onChange"/>
@@ -49,7 +49,7 @@
</template> </template>
<script> <script>
import pick from 'lodash.pick' import pick from 'lodash.pick'
import {addFunction,editFunction,checkFunction } from '@/api/api' import {addFunction,editFunction,checkFunction, checkNumber } from '@/api/api'
import {autoJumpNextInput} from "@/utils/util" import {autoJumpNextInput} from "@/utils/util"
import JSelectMultiple from '@/components/jeecg/JSelectMultiple' import JSelectMultiple from '@/components/jeecg/JSelectMultiple'
export default { export default {
@@ -87,17 +87,45 @@
confirmLoading: false, confirmLoading: false,
form: this.$form.createForm(this), form: this.$form.createForm(this),
validatorRules:{ validatorRules:{
number:{
rules: [
{ required: true, message: '请输入编号!' },
{ min: 2, max: 30, message: '长度在 2 30 个字符', trigger: 'blur' },
{ validator: this.validateNumber}
]
},
name:{ name:{
rules: [ rules: [
{ required: true, message: '请输入名称!' }, { required: true, message: '请输入名称!' },
{ min: 2, max: 30, message: '长度在 2 30 个字符', trigger: 'blur' }, { min: 2, max: 30, message: '长度在 2 30 个字符', trigger: 'blur' },
{ validator: this.validatePersonName} { validator: this.validateName}
]},
type:{
rules: [
{ required: true, message: '请选择类型!' }
] ]
} },
parentNumber:{
rules: [
{ required: true, message: '请输入上级编号!' }
]
},
url:{
rules: [
{ required: true, message: '请输入链接!' }
]
},
component:{
rules: [
{ required: true, message: '请输入组件!' }
]
},
sort:{
rules: [
{ required: true, message: '请输入排序!' }
]
},
icon:{
rules: [
{ required: true, message: '请输入图标!' }
]
},
}, },
} }
}, },
@@ -125,7 +153,7 @@
this.jselectMultiple.value = '' this.jselectMultiple.value = ''
} }
this.$nextTick(() => { this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model,'number', 'name', 'parentNumber', 'url', 'component', 'sort', 'pushBtn', 'icon', 'enabled')) this.form.setFieldsValue(pick(this.model,'number', 'name', 'parentNumber', 'parentName', 'url', 'component', 'sort', 'pushBtn', 'icon', 'enabled'))
autoJumpNextInput('functionModal') autoJumpNextInput('functionModal')
}); });
}, },
@@ -163,7 +191,24 @@
handleCancel () { handleCancel () {
this.close() this.close()
}, },
validatePersonName(rule, value, callback){ validateNumber(rule, value, callback){
let params = {
number: value,
id: this.model.id?this.model.id:0
};
checkNumber(params).then((res)=>{
if(res && res.code===200) {
if(!res.data.status){
callback();
} else {
callback("编号已经存在!");
}
} else {
callback(res.data);
}
});
},
validateName(rule, value, callback){
let params = { let params = {
name: value, name: value,
id: this.model.id?this.model.id:0 id: this.model.id?this.model.id:0
@@ -173,7 +218,7 @@
if(!res.data.status){ if(!res.data.status){
callback(); callback();
} else { } else {
callback("名称已经存在"); callback("名称已经存在");
} }
} else { } else {
callback(res.data); callback(res.data);