优化字典管理弹窗逻辑
This commit is contained in:
sc
parent
72ffa8dce9
commit
424d9e1199
|
|
@ -1,24 +1,35 @@
|
|||
<template>
|
||||
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
|
||||
<el-form-item label="编码" prop="code">
|
||||
<el-input v-model="form.code" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="字典名称" prop="name">
|
||||
<el-input v-model="form.name" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="父路径" prop="parentId">
|
||||
<el-cascader v-model="form.parentId" :options="dic" :props="dicProps" :show-all-levels="false" clearable></el-cascader>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog :title="titleMap[mode]" v-model="visible" :width="330" destroy-on-close @closed="$emit('closed')">
|
||||
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
|
||||
<el-form-item label="编码" prop="code">
|
||||
<el-input v-model="form.code" clearable placeholder="字典编码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="字典名称" prop="name">
|
||||
<el-input v-model="form.name" clearable placeholder="字典显示名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="父路径" prop="parentId">
|
||||
<el-cascader v-model="form.parentId" :options="dic" :props="dicProps" :show-all-levels="false" clearable></el-cascader>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="visible=false" >取 消</el-button>
|
||||
<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
mode: { type: String, default: "add" }
|
||||
},
|
||||
emits: ['success', 'closed'],
|
||||
data() {
|
||||
return {
|
||||
mode: "add",
|
||||
titleMap: {
|
||||
add: '新增字典',
|
||||
edit: '编辑字典'
|
||||
},
|
||||
visible: false,
|
||||
isSaveing: false,
|
||||
form: {
|
||||
id:"",
|
||||
name: "",
|
||||
|
|
@ -45,18 +56,31 @@
|
|||
this.getDic()
|
||||
},
|
||||
methods: {
|
||||
//显示
|
||||
open(mode='add'){
|
||||
this.mode = mode;
|
||||
this.visible = true;
|
||||
return this;
|
||||
},
|
||||
//获取字典列表
|
||||
async getDic(){
|
||||
var res = await this.$API.dic.list.get();
|
||||
this.dic = res.data;
|
||||
},
|
||||
//表单提交方法
|
||||
submit(callback){
|
||||
this.$refs.dialogForm.validate((valid) => {
|
||||
submit(){
|
||||
this.$refs.dialogForm.validate(async (valid) => {
|
||||
if (valid) {
|
||||
callback(this.form)
|
||||
}else{
|
||||
return false;
|
||||
this.isSaveing = true;
|
||||
var res = await this.$API.user.save.post(this.form);
|
||||
this.isSaveing = false;
|
||||
if(res.code == 200){
|
||||
this.$emit('success', this.form, this.mode)
|
||||
this.visible = false;
|
||||
this.$message.success("操作成功")
|
||||
}else{
|
||||
this.$alert(res.message, "提示", {type: 'error'})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -61,21 +61,9 @@
|
|||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<el-dialog :title="titleMap[dicMode]" v-model="dicDialogVisible" :width="330" destroy-on-close>
|
||||
<dic-dialog ref="dicDialog" :mode="dicMode"></dic-dialog>
|
||||
<template #footer>
|
||||
<el-button @click="dicDialogVisible=false" >取 消</el-button>
|
||||
<el-button type="primary" @click="saveDic()" :loading="isDicSaveing">保 存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<dic-dialog v-if="dialog.dic" ref="dicDialog" @success="handleDicSuccess" @closed="dialog.dic=false"></dic-dialog>
|
||||
|
||||
<el-dialog :title="titleMap[listMode]" v-model="listDialogVisible" :width="330" destroy-on-close>
|
||||
<list-dialog ref="listDialog" :mode="listMode" :params="listDialogParams"></list-dialog>
|
||||
<template #footer>
|
||||
<el-button @click="listDialogVisible=false" >取 消</el-button>
|
||||
<el-button type="primary" @click="saveList()" :loading="isListSaveing">保 存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<list-dialog v-if="dialog.list" ref="listDialog" @success="handleListSuccess" @closed="dialog.list=false"></list-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
|
|
@ -92,15 +80,11 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
showDicloading: true,
|
||||
dicDialogVisible: false,
|
||||
isDicSaveing: false,
|
||||
dicMode: 'add',
|
||||
titleMap: {
|
||||
add: "新增",
|
||||
edit: "编辑",
|
||||
show: "查看"
|
||||
dialog: {
|
||||
dic: false,
|
||||
info: false
|
||||
},
|
||||
showDicloading: true,
|
||||
dicList: [],
|
||||
dicFilterText: '',
|
||||
dicProps: {
|
||||
|
|
@ -108,10 +92,6 @@
|
|||
},
|
||||
listApi: null,
|
||||
listApiParams: {},
|
||||
listDialogVisible: false,
|
||||
listDialogParams: {},
|
||||
isListSaveing: false,
|
||||
listMode: 'add',
|
||||
selection: []
|
||||
}
|
||||
},
|
||||
|
|
@ -150,59 +130,19 @@
|
|||
},
|
||||
//树增加
|
||||
addDic(){
|
||||
this.dicMode = 'add';
|
||||
this.dicDialogVisible = true;
|
||||
this.dialog.dic = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dicDialog.open()
|
||||
})
|
||||
},
|
||||
//编辑树
|
||||
dicEdit(data){
|
||||
this.dicMode = 'edit';
|
||||
this.dicDialogVisible = true;
|
||||
this.dialog.dic = true
|
||||
this.$nextTick(() => {
|
||||
var editNode = this.$refs.dic.getNode(data.id);
|
||||
var editNodeParentId = editNode.level==1?undefined:editNode.parent.data.id
|
||||
data.parentId = editNodeParentId
|
||||
this.$refs.dicDialog.setData(data)
|
||||
})
|
||||
},
|
||||
//保存数据
|
||||
saveDic(){
|
||||
this.$refs.dicDialog.submit(async (formData) => {
|
||||
this.isDicSaveing = true;
|
||||
var res = await this.$API.user.save.post(formData);
|
||||
this.isDicSaveing = false;
|
||||
if(res.code == 200){
|
||||
//这里选择刷新整个表格 OR 插入/编辑现有表格数据
|
||||
if(this.dicMode == 'add'){
|
||||
formData.id = (Math.random() * (500 - 400 + 1) | 0) + 400;
|
||||
if(this.dicList.length > 0){
|
||||
this.$refs.table.upData({
|
||||
code: formData.code
|
||||
})
|
||||
}else{
|
||||
this.listApiParams = {
|
||||
code: formData.code
|
||||
}
|
||||
this.listApi = this.$API.dic.info;
|
||||
}
|
||||
this.$refs.dic.append(formData, formData.parentId[0])
|
||||
this.$refs.dic.setCurrentKey(formData.id)
|
||||
}
|
||||
if(this.dicMode == 'edit'){
|
||||
var editNode = this.$refs.dic.getNode(formData.id);
|
||||
//判断是否移动？
|
||||
var editNodeParentId = editNode.level==1?undefined:editNode.parent.data.id
|
||||
if(editNodeParentId != formData.parentId){
|
||||
var obj = editNode.data;
|
||||
this.$refs.dic.remove(formData.id)
|
||||
this.$refs.dic.append(obj, formData.parentId[0])
|
||||
}
|
||||
Object.assign(editNode.data, formData)
|
||||
}
|
||||
this.dicDialogVisible = false;
|
||||
this.$message.success("操作成功")
|
||||
}else{
|
||||
this.$alert(res.message, "提示", {type: 'error'})
|
||||
}
|
||||
this.$refs.dicDialog.open('edit').setData(data)
|
||||
})
|
||||
},
|
||||
//树点击事件
|
||||
|
|
@ -258,17 +198,20 @@
|
|||
},
|
||||
//添加明细
|
||||
addInfo(){
|
||||
var dicCurrentKey = this.$refs.dic.getCurrentKey();
|
||||
this.listDialogParams = {code: dicCurrentKey};
|
||||
this.listMode = 'add';
|
||||
this.listDialogVisible = true;
|
||||
this.dialog.list = true
|
||||
this.$nextTick(() => {
|
||||
var dicCurrentKey = this.$refs.dic.getCurrentKey();
|
||||
const data = {
|
||||
dic: dicCurrentKey
|
||||
}
|
||||
this.$refs.listDialog.open().setData(data)
|
||||
})
|
||||
},
|
||||
//编辑明细
|
||||
table_edit(row){
|
||||
this.listMode = 'edit';
|
||||
this.listDialogVisible = true;
|
||||
this.dialog.list = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.listDialog.setData(row)
|
||||
this.$refs.listDialog.open('edit').setData(row)
|
||||
})
|
||||
},
|
||||
//删除明细
|
||||
|
|
@ -332,6 +275,45 @@
|
|||
row.yx = val;
|
||||
this.$message.success(`操作成功id:${row.id} val:${val}`)
|
||||
}, 500)
|
||||
},
|
||||
//本地更新数据
|
||||
handleDicSuccess(data, mode){
|
||||
if(mode=='add'){
|
||||
data.id = new Date().getTime()
|
||||
if(this.dicList.length > 0){
|
||||
this.$refs.table.upData({
|
||||
code: data.code
|
||||
})
|
||||
}else{
|
||||
this.listApiParams = {
|
||||
code: data.code
|
||||
}
|
||||
this.listApi = this.$API.dic.info;
|
||||
}
|
||||
this.$refs.dic.append(data, data.parentId[0])
|
||||
this.$refs.dic.setCurrentKey(data.id)
|
||||
}else if(mode=='edit'){
|
||||
var editNode = this.$refs.dic.getNode(data.id);
|
||||
//判断是否移动？
|
||||
var editNodeParentId = editNode.level==1?undefined:editNode.parent.data.id
|
||||
if(editNodeParentId != data.parentId){
|
||||
var obj = editNode.data;
|
||||
this.$refs.dic.remove(data.id)
|
||||
this.$refs.dic.append(obj, data.parentId[0])
|
||||
}
|
||||
Object.assign(editNode.data, data)
|
||||
}
|
||||
},
|
||||
//本地更新数据
|
||||
handleListSuccess(data, mode){
|
||||
if(mode=='add'){
|
||||
data.id = new Date().getTime()
|
||||
this.$refs.table.tableData.push(data)
|
||||
}else if(mode=='edit'){
|
||||
this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
|
||||
Object.assign(item, data)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,38 @@
|
|||
<template>
|
||||
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
|
||||
<el-form-item label="所属字典" prop="dic">
|
||||
<el-cascader v-model="form.dic" :options="dic" :props="dicProps" :show-all-levels="false" clearable></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="项名称" prop="name">
|
||||
<el-input v-model="form.name" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="键值" prop="key">
|
||||
<el-input v-model="form.key" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否有效" prop="yx">
|
||||
<el-switch v-model="form.yx" active-value="1" inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog :title="titleMap[mode]" v-model="visible" :width="330" destroy-on-close @closed="$emit('closed')">
|
||||
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
|
||||
<el-form-item label="所属字典" prop="dic">
|
||||
<el-cascader v-model="form.dic" :options="dic" :props="dicProps" :show-all-levels="false" clearable></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="项名称" prop="name">
|
||||
<el-input v-model="form.name" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="键值" prop="key">
|
||||
<el-input v-model="form.key" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否有效" prop="yx">
|
||||
<el-switch v-model="form.yx" active-value="1" inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="visible=false" >取 消</el-button>
|
||||
<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
mode: { type: String, default: "add" },
|
||||
params: { type: Object, default: () => {} }
|
||||
},
|
||||
emits: ['success', 'closed'],
|
||||
data() {
|
||||
return {
|
||||
mode: "add",
|
||||
titleMap: {
|
||||
add: '新增项',
|
||||
edit: '编辑项'
|
||||
},
|
||||
visible: false,
|
||||
isSaveing: false,
|
||||
form: {
|
||||
id: "",
|
||||
dic: "",
|
||||
|
|
@ -56,18 +66,31 @@
|
|||
this.getDic()
|
||||
},
|
||||
methods: {
|
||||
//显示
|
||||
open(mode='add'){
|
||||
this.mode = mode;
|
||||
this.visible = true;
|
||||
return this;
|
||||
},
|
||||
//获取字典列表
|
||||
async getDic(){
|
||||
var res = await this.$API.dic.list.get();
|
||||
this.dic = res.data;
|
||||
},
|
||||
//表单提交方法
|
||||
submit(callback){
|
||||
this.$refs.dialogForm.validate((valid) => {
|
||||
submit(){
|
||||
this.$refs.dialogForm.validate(async (valid) => {
|
||||
if (valid) {
|
||||
callback(this.form)
|
||||
}else{
|
||||
return false;
|
||||
this.isSaveing = true;
|
||||
var res = await this.$API.user.save.post(this.form);
|
||||
this.isSaveing = false;
|
||||
if(res.code == 200){
|
||||
this.$emit('success', this.form, this.mode)
|
||||
this.visible = false;
|
||||
this.$message.success("操作成功")
|
||||
}else{
|
||||
this.$alert(res.message, "提示", {type: 'error'})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue