zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化字典管理弹窗逻辑

This commit is contained in:
sc 2021-07-12 15:48:04 +08:00
parent 72ffa8dce9
commit 424d9e1199
3 changed files with 150 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/views/setting/dic/dic.vue
View File

@ -1,24 +1,35 @@
<template> <template>
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left"> <el-dialog :title="titleMap[mode]" v-model="visible" :width="330" destroy-on-close @closed="$emit('closed')">
<el-form-item label="编码" prop="code"> <el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
<el-input v-model="form.code" clearable></el-input> <el-form-item label="编码" prop="code">
</el-form-item> <el-input v-model="form.code" clearable placeholder="字典编码"></el-input>
<el-form-item label="字典名称" prop="name"> </el-form-item>
<el-input v-model="form.name" clearable></el-input> <el-form-item label="字典名称" prop="name">
</el-form-item> <el-input v-model="form.name" clearable placeholder="字典显示名称"></el-input>
<el-form-item label="父路径" prop="parentId"> </el-form-item>
<el-cascader v-model="form.parentId" :options="dic" :props="dicProps" :show-all-levels="false" clearable></el-cascader> <el-form-item label="父路径" prop="parentId">
</el-form-item> <el-cascader v-model="form.parentId" :options="dic" :props="dicProps" :show-all-levels="false" clearable></el-cascader>
</el-form> </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> </template>
<script> <script>
export default { export default {
props: { emits: ['success', 'closed'],
mode: { type: String, default: "add" }
},
data() { data() {
return { return {
mode: "add",
titleMap: {
add: '新增字典',
edit: '编辑字典'
},
visible: false,
isSaveing: false,
form: { form: {
id:"", id:"",
name: "", name: "",
@ -45,18 +56,31 @@
this.getDic() this.getDic()
}, },
methods: { methods: {
//显示
open(mode='add'){
this.mode = mode;
this.visible = true;
return this;
},
//获取字典列表 //获取字典列表
async getDic(){ async getDic(){
var res = await this.$API.dic.list.get(); var res = await this.$API.dic.list.get();
this.dic = res.data; this.dic = res.data;
}, },
//表单提交方法 //表单提交方法
submit(callback){ submit(){
this.$refs.dialogForm.validate((valid) => { this.$refs.dialogForm.validate(async (valid) => {
if (valid) { if (valid) {
callback(this.form) this.isSaveing = true;
}else{ var res = await this.$API.user.save.post(this.form);
return false; 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'})
}
} }
}) })
}, },

140
src/views/setting/dic/index.vue
View File

@ -61,21 +61,9 @@
</el-container> </el-container>
</el-container> </el-container>
<el-dialog :title="titleMap[dicMode]" v-model="dicDialogVisible" :width="330" destroy-on-close> <dic-dialog v-if="dialog.dic" ref="dicDialog" @success="handleDicSuccess" @closed="dialog.dic=false"></dic-dialog>
<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>
<el-dialog :title="titleMap[listMode]" v-model="listDialogVisible" :width="330" destroy-on-close> <list-dialog v-if="dialog.list" ref="listDialog" @success="handleListSuccess" @closed="dialog.list=false"></list-dialog>
<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>
</template> </template>
@ -92,15 +80,11 @@
}, },
data() { data() {
return { return {
showDicloading: true, dialog: {
dicDialogVisible: false, dic: false,
isDicSaveing: false, info: false
dicMode: 'add',
titleMap: {
add: "新增",
edit: "编辑",
show: "查看"
}, },
showDicloading: true,
dicList: [], dicList: [],
dicFilterText: '', dicFilterText: '',
dicProps: { dicProps: {
@ -108,10 +92,6 @@
}, },
listApi: null, listApi: null,
listApiParams: {}, listApiParams: {},
listDialogVisible: false,
listDialogParams: {},
isListSaveing: false,
listMode: 'add',
selection: [] selection: []
} }
}, },
@ -150,59 +130,19 @@
}, },
//树增加 //树增加
addDic(){ addDic(){
this.dicMode = 'add'; this.dialog.dic = true
this.dicDialogVisible = true; this.$nextTick(() => {
this.$refs.dicDialog.open()
})
}, },
//编辑树 //编辑树
dicEdit(data){ dicEdit(data){
this.dicMode = 'edit'; this.dialog.dic = true
this.dicDialogVisible = true;
this.$nextTick(() => { this.$nextTick(() => {
var editNode = this.$refs.dic.getNode(data.id); var editNode = this.$refs.dic.getNode(data.id);
var editNodeParentId = editNode.level==1?undefined:editNode.parent.data.id var editNodeParentId = editNode.level==1?undefined:editNode.parent.data.id
data.parentId = editNodeParentId data.parentId = editNodeParentId
this.$refs.dicDialog.setData(data) this.$refs.dicDialog.open('edit').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'})
}
}) })
}, },
//树点击事件 //树点击事件
@ -258,17 +198,20 @@
}, },
//添加明细 //添加明细
addInfo(){ addInfo(){
var dicCurrentKey = this.$refs.dic.getCurrentKey(); this.dialog.list = true
this.listDialogParams = {code: dicCurrentKey}; this.$nextTick(() => {
this.listMode = 'add'; var dicCurrentKey = this.$refs.dic.getCurrentKey();
this.listDialogVisible = true; const data = {
dic: dicCurrentKey
}
this.$refs.listDialog.open().setData(data)
})
}, },
//编辑明细 //编辑明细
table_edit(row){ table_edit(row){
this.listMode = 'edit'; this.dialog.list = true
this.listDialogVisible = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.listDialog.setData(row) this.$refs.listDialog.open('edit').setData(row)
}) })
}, },
//删除明细 //删除明细
@ -332,6 +275,45 @@
row.yx = val; row.yx = val;
this.$message.success(`操作成功id:${row.id} val:${val}`) this.$message.success(`操作成功id:${row.id} val:${val}`)
}, 500) }, 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)
})
}
} }
} }
} }

69
src/views/setting/dic/list.vue
View File

@ -1,28 +1,38 @@
<template> <template>
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left"> <el-dialog :title="titleMap[mode]" v-model="visible" :width="330" destroy-on-close @closed="$emit('closed')">
<el-form-item label="所属字典" prop="dic"> <el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
<el-cascader v-model="form.dic" :options="dic" :props="dicProps" :show-all-levels="false" clearable></el-cascader> <el-form-item label="所属字典" prop="dic">
</el-form-item> <el-cascader v-model="form.dic" :options="dic" :props="dicProps" :show-all-levels="false" clearable></el-cascader>
<el-form-item label="项名称" prop="name"> </el-form-item>
<el-input v-model="form.name" clearable></el-input> <el-form-item label="项名称" prop="name">
</el-form-item> <el-input v-model="form.name" clearable></el-input>
<el-form-item label="键值" prop="key"> </el-form-item>
<el-input v-model="form.key" clearable></el-input> <el-form-item label="键值" prop="key">
</el-form-item> <el-input v-model="form.key" clearable></el-input>
<el-form-item label="是否有效" prop="yx"> </el-form-item>
<el-switch v-model="form.yx" active-value="1" inactive-value="0"></el-switch> <el-form-item label="是否有效" prop="yx">
</el-form-item> <el-switch v-model="form.yx" active-value="1" inactive-value="0"></el-switch>
</el-form> </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> </template>
<script> <script>
export default { export default {
props: { emits: ['success', 'closed'],
mode: { type: String, default: "add" },
params: { type: Object, default: () => {} }
},
data() { data() {
return { return {
mode: "add",
titleMap: {
add: '新增项',
edit: '编辑项'
},
visible: false,
isSaveing: false,
form: { form: {
id: "", id: "",
dic: "", dic: "",
@ -56,18 +66,31 @@
this.getDic() this.getDic()
}, },
methods: { methods: {
//显示
open(mode='add'){
this.mode = mode;
this.visible = true;
return this;
},
//获取字典列表 //获取字典列表
async getDic(){ async getDic(){
var res = await this.$API.dic.list.get(); var res = await this.$API.dic.list.get();
this.dic = res.data; this.dic = res.data;
}, },
//表单提交方法 //表单提交方法
submit(callback){ submit(){
this.$refs.dialogForm.validate((valid) => { this.$refs.dialogForm.validate(async (valid) => {
if (valid) { if (valid) {
callback(this.form) this.isSaveing = true;
}else{ var res = await this.$API.user.save.post(this.form);
return false; 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'})
}
} }
}) })
}, },