|
|
@@ -1,185 +1,142 @@
|
|
|
<template>
|
|
|
- <basic-container>
|
|
|
- <avue-crud
|
|
|
- :option="option"
|
|
|
- :table-loading="loading"
|
|
|
- :data="data"
|
|
|
- ref="crud"
|
|
|
- v-model="form"
|
|
|
- :permission="permissionList"
|
|
|
- :before-open="beforeOpen"
|
|
|
- :before-close="beforeClose"
|
|
|
- @row-del="rowDel"
|
|
|
- @row-update="rowUpdate"
|
|
|
- @row-save="rowSave"
|
|
|
- @search-change="searchChange"
|
|
|
- @search-reset="searchReset"
|
|
|
- @selection-change="selectionChange"
|
|
|
- @current-change="currentChange"
|
|
|
- @size-change="sizeChange"
|
|
|
- @refresh-change="refreshChange"
|
|
|
- @on-load="onLoad"
|
|
|
- >
|
|
|
- <template slot="menuLeft">
|
|
|
- <el-button
|
|
|
- type="danger"
|
|
|
- size="small"
|
|
|
- icon="el-icon-delete"
|
|
|
- v-if="permission.dict_delete"
|
|
|
- plain
|
|
|
- @click="handleDelete"
|
|
|
- >删 除
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- <template slot-scope="{row}" slot="isSealed">
|
|
|
- <el-tag>{{row.isSealed===0?'否':'是'}}</el-tag>
|
|
|
- </template>
|
|
|
- <template slot-scope="scope" slot="menu">
|
|
|
- <el-button
|
|
|
- type="text"
|
|
|
- icon="el-icon-check"
|
|
|
- size="small"
|
|
|
- @click.stop="handleAdd(scope.row,scope.index)"
|
|
|
- >新增子项
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </avue-crud>
|
|
|
- </basic-container>
|
|
|
+ <div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="11">
|
|
|
+ <basic-container>
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>字典列表</span>
|
|
|
+ </div>
|
|
|
+ <div class="clearfix">
|
|
|
+ <avue-crud
|
|
|
+ :option="optionParent"
|
|
|
+ :table-loading="loading"
|
|
|
+ :data="dataParent"
|
|
|
+ :page="pageParent"
|
|
|
+ ref="crud"
|
|
|
+ v-model="formParent"
|
|
|
+ :permission="permissionList"
|
|
|
+ :before-open="beforeOpen"
|
|
|
+ @row-del="rowDel"
|
|
|
+ @row-update="rowUpdate"
|
|
|
+ @row-save="rowSave"
|
|
|
+ @row-click="handleRowClick"
|
|
|
+ @search-change="searchChange"
|
|
|
+ @search-reset="searchReset"
|
|
|
+ @selection-change="selectionChange"
|
|
|
+ @current-change="currentChange"
|
|
|
+ @size-change="sizeChange"
|
|
|
+ @refresh-change="refreshChange"
|
|
|
+ @on-load="onLoadParent"
|
|
|
+ >
|
|
|
+ <template slot="menuLeft">
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ v-if="permission.dict_delete"
|
|
|
+ plain
|
|
|
+ @click="handleDelete"
|
|
|
+ >删 除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{row}" slot="isSealed">
|
|
|
+ <el-tag>{{row.isSealed===0?'否':'是'}}</el-tag>
|
|
|
+ </template>
|
|
|
+ </avue-crud>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </basic-container>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="13">
|
|
|
+ <basic-container>
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>[{{dictValue}}] 字典详情</span>
|
|
|
+ </div>
|
|
|
+ <div class="clearfix">
|
|
|
+ <avue-crud
|
|
|
+ :option="optionChild"
|
|
|
+ :table-loading="loading"
|
|
|
+ :data="dataChild"
|
|
|
+ :page="pageChild"
|
|
|
+ ref="crudChild"
|
|
|
+ v-model="formChild"
|
|
|
+ :permission="permissionList"
|
|
|
+ :before-open="beforeOpenChild"
|
|
|
+ @row-del="rowDelChild"
|
|
|
+ @row-update="rowUpdateChild"
|
|
|
+ @row-save="rowSaveChild"
|
|
|
+ @search-change="searchChangeChild"
|
|
|
+ @search-reset="searchResetChild"
|
|
|
+ @selection-change="selectionChangeChild"
|
|
|
+ @current-change="currentChangeChild"
|
|
|
+ @size-change="sizeChangeChild"
|
|
|
+ @refresh-change="refreshChangeChild"
|
|
|
+ @on-load="onLoadChild"
|
|
|
+ >
|
|
|
+ <template slot="menuLeft">
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ v-if="permission.dict_delete"
|
|
|
+ plain
|
|
|
+ @click="handleDelete"
|
|
|
+ >删 除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{row}" slot="isSealed">
|
|
|
+ <el-tag>{{row.isSealed===0?'否':'是'}}</el-tag>
|
|
|
+ </template>
|
|
|
+ </avue-crud>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </basic-container>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
- getList,
|
|
|
+ getParentList,
|
|
|
+ getChildList,
|
|
|
remove,
|
|
|
update,
|
|
|
add,
|
|
|
getDict,
|
|
|
getDictTree
|
|
|
} from "@/api/system/dict";
|
|
|
+ import {optionParent, optionChild} from "@/const/system/dict";
|
|
|
import {mapGetters} from "vuex";
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- form: {},
|
|
|
+ dictValue: '暂无',
|
|
|
+ parentId: -1,
|
|
|
+ formParent: {},
|
|
|
+ formChild: {},
|
|
|
selectionList: [],
|
|
|
query: {},
|
|
|
loading: true,
|
|
|
- page: {
|
|
|
+ pageParent: {
|
|
|
pageSize: 10,
|
|
|
+ pageSizes: [10, 30, 50, 100, 200],
|
|
|
currentPage: 1,
|
|
|
total: 0
|
|
|
},
|
|
|
- option: {
|
|
|
- tip: false,
|
|
|
- tree: true,
|
|
|
- border: true,
|
|
|
- index: true,
|
|
|
- selection: true,
|
|
|
- viewBtn: true,
|
|
|
- menuWidth: 300,
|
|
|
- dialogWidth: 880,
|
|
|
- dialogHeight: 320,
|
|
|
- column: [
|
|
|
- {
|
|
|
- label: "字典编号",
|
|
|
- prop: "code",
|
|
|
- search: true,
|
|
|
- span: 24,
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入字典编号",
|
|
|
- trigger: "blur"
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- label: "字典名称",
|
|
|
- prop: "dictValue",
|
|
|
- search: true,
|
|
|
- align: "center",
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入字典名称",
|
|
|
- trigger: "blur"
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- label: "上级字典",
|
|
|
- prop: "parentId",
|
|
|
- type: "tree",
|
|
|
- dicData: [],
|
|
|
- hide: true,
|
|
|
- props: {
|
|
|
- label: "title"
|
|
|
- },
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: false,
|
|
|
- message: "请选择上级字典",
|
|
|
- trigger: "click"
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- label: "字典键值",
|
|
|
- prop: "dictKey",
|
|
|
- type: "number",
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入字典键值",
|
|
|
- trigger: "blur"
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- label: "字典排序",
|
|
|
- prop: "sort",
|
|
|
- type: "number",
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入字典排序",
|
|
|
- trigger: "blur"
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- label: "是否封存",
|
|
|
- prop: "isSealed",
|
|
|
- type: "select",
|
|
|
- dicData: [
|
|
|
- {
|
|
|
- label: "否",
|
|
|
- value: 0
|
|
|
- },
|
|
|
- {
|
|
|
- label: "是",
|
|
|
- value: 1
|
|
|
- }
|
|
|
- ],
|
|
|
- slot: true,
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请选择是否封存",
|
|
|
- trigger: "blur"
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- label: "字典备注",
|
|
|
- prop: "remark",
|
|
|
- search: true,
|
|
|
- hide: true
|
|
|
- }
|
|
|
- ]
|
|
|
+ pageChild: {
|
|
|
+ pageSize: 10,
|
|
|
+ pageSizes: [10, 30, 50, 100, 200],
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0
|
|
|
},
|
|
|
- data: []
|
|
|
+ dataParent: [],
|
|
|
+ dataChild: [],
|
|
|
+ optionParent: optionParent,
|
|
|
+ optionChild: optionChild,
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -187,9 +144,9 @@
|
|
|
permissionList() {
|
|
|
return {
|
|
|
addBtn: this.vaildData(this.permission.dict_add, false),
|
|
|
- viewBtn: this.vaildData(this.permission.dict_view, false),
|
|
|
delBtn: this.vaildData(this.permission.dict_delete, false),
|
|
|
- editBtn: this.vaildData(this.permission.dict_edit, false)
|
|
|
+ editBtn: this.vaildData(this.permission.dict_edit, false),
|
|
|
+ viewBtn: false,
|
|
|
};
|
|
|
},
|
|
|
ids() {
|
|
|
@@ -201,26 +158,15 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- handleAdd(row) {
|
|
|
- this.$refs.crud.value.code = row.code;
|
|
|
- this.$refs.crud.value.parentId = row.id;
|
|
|
- this.$refs.crud.option.column.filter(item => {
|
|
|
- if (item.prop === "code") {
|
|
|
- item.valueDefault = row.code;
|
|
|
- item.addDisabled = true;
|
|
|
- }
|
|
|
- if (item.prop === "parentId") {
|
|
|
- item.valueDefault = row.id;
|
|
|
- item.addDisabled = true;
|
|
|
- }
|
|
|
- });
|
|
|
- this.$refs.crud.rowAdd();
|
|
|
- },
|
|
|
rowSave(row, loading, done) {
|
|
|
- add(row).then(
|
|
|
+ const form = {
|
|
|
+ ...row,
|
|
|
+ dictKey: -1,
|
|
|
+ }
|
|
|
+ add(form).then(
|
|
|
() => {
|
|
|
loading();
|
|
|
- this.onLoad(this.page);
|
|
|
+ this.onLoadParent(this.pageParent);
|
|
|
this.$message({
|
|
|
type: "success",
|
|
|
message: "操作成功!"
|
|
|
@@ -236,7 +182,7 @@
|
|
|
update(row).then(
|
|
|
() => {
|
|
|
loading();
|
|
|
- this.onLoad(this.page);
|
|
|
+ this.onLoadParent(this.pageParent);
|
|
|
this.$message({
|
|
|
type: "success",
|
|
|
message: "操作成功!"
|
|
|
@@ -258,21 +204,36 @@
|
|
|
return remove(row.id);
|
|
|
})
|
|
|
.then(() => {
|
|
|
- this.onLoad(this.page);
|
|
|
+ this.onLoadParent(this.pageParent);
|
|
|
this.$message({
|
|
|
type: "success",
|
|
|
message: "操作成功!"
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
+ handleRowClick(row) {
|
|
|
+ this.parentId = row.id;
|
|
|
+ this.dictValue = row.dictValue;
|
|
|
+ this.$refs.crudChild.value.code = row.code;
|
|
|
+ this.$refs.crudChild.value.parentId = row.id;
|
|
|
+ this.$refs.crudChild.option.column.filter(item => {
|
|
|
+ if (item.prop === "code") {
|
|
|
+ item.valueDefault = row.code;
|
|
|
+ }
|
|
|
+ if (item.prop === "parentId") {
|
|
|
+ item.valueDefault = row.id;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.onLoadChild(this.pageChild);
|
|
|
+ },
|
|
|
searchReset() {
|
|
|
this.query = {};
|
|
|
- this.onLoad(this.page);
|
|
|
+ this.onLoadParent(this.pageParent);
|
|
|
},
|
|
|
searchChange(params) {
|
|
|
this.query = params;
|
|
|
- this.page.currentPage = 1;
|
|
|
- this.onLoad(this.page, params);
|
|
|
+ this.pageParent.currentPage = 1;
|
|
|
+ this.onLoadParent(this.pageParent, params);
|
|
|
},
|
|
|
selectionChange(list) {
|
|
|
this.selectionList = list;
|
|
|
@@ -295,7 +256,7 @@
|
|
|
return remove(this.ids);
|
|
|
})
|
|
|
.then(() => {
|
|
|
- this.onLoad(this.page);
|
|
|
+ this.onLoadParent(this.pageParent);
|
|
|
this.$message({
|
|
|
type: "success",
|
|
|
message: "操作成功!"
|
|
|
@@ -305,51 +266,156 @@
|
|
|
},
|
|
|
beforeOpen(done, type) {
|
|
|
if (["edit", "view"].includes(type)) {
|
|
|
- getDict(this.form.id).then(res => {
|
|
|
- this.form = res.data.data;
|
|
|
+ getDict(this.formParent.id).then(res => {
|
|
|
+ this.formParent = res.data.data;
|
|
|
});
|
|
|
}
|
|
|
done();
|
|
|
},
|
|
|
- beforeClose(done) {
|
|
|
- this.$refs.crud.value.code = "";
|
|
|
- this.$refs.crud.value.parentId = "";
|
|
|
- this.$refs.crud.value.addDisabled = false;
|
|
|
- this.$refs.crud.option.column.filter(item => {
|
|
|
- if (item.prop === "code") {
|
|
|
- item.valueDefault = "";
|
|
|
- item.addDisabled = false;
|
|
|
+ currentChange(currentPage) {
|
|
|
+ this.pageParent.currentPage = currentPage;
|
|
|
+ },
|
|
|
+ sizeChange(pageSize) {
|
|
|
+ this.pageParent.pageSize = pageSize;
|
|
|
+ },
|
|
|
+ refreshChange() {
|
|
|
+ this.onLoadParent(this.pageParent, this.query);
|
|
|
+ },
|
|
|
+ rowSaveChild(row, loading, done) {
|
|
|
+ add(row).then(
|
|
|
+ () => {
|
|
|
+ loading();
|
|
|
+ this.onLoadChild(this.pageChild);
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "操作成功!"
|
|
|
+ });
|
|
|
+ },
|
|
|
+ error => {
|
|
|
+ done();
|
|
|
+ console.log(error);
|
|
|
}
|
|
|
- if (item.prop === "parentId") {
|
|
|
- item.valueDefault = "";
|
|
|
- item.addDisabled = false;
|
|
|
+ );
|
|
|
+ },
|
|
|
+ rowUpdateChild(row, index, loading, done) {
|
|
|
+ update(row).then(
|
|
|
+ () => {
|
|
|
+ loading();
|
|
|
+ this.onLoadChild(this.pageChild);
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "操作成功!"
|
|
|
+ });
|
|
|
+ },
|
|
|
+ error => {
|
|
|
+ done();
|
|
|
+ console.log(error);
|
|
|
}
|
|
|
- });
|
|
|
+ );
|
|
|
+ },
|
|
|
+ rowDelChild(row) {
|
|
|
+ this.$confirm("确定将选择数据删除?", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ return remove(row.id);
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.onLoadChild(this.pageChild);
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "操作成功!"
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ searchResetChild() {
|
|
|
+ this.query = {};
|
|
|
+ this.onLoadChild(this.pageChild);
|
|
|
+ },
|
|
|
+ searchChangeChild(params) {
|
|
|
+ this.query = params;
|
|
|
+ this.pageChild.currentPage = 1;
|
|
|
+ this.onLoadChild(this.pageChild, params);
|
|
|
+ },
|
|
|
+ selectionChangeChild(list) {
|
|
|
+ this.selectionList = list;
|
|
|
+ },
|
|
|
+ selectionClearChild() {
|
|
|
+ this.selectionList = [];
|
|
|
+ this.$refs.crudChild.toggleSelection();
|
|
|
+ },
|
|
|
+ handleDeleteChild() {
|
|
|
+ if (this.selectionList.length === 0) {
|
|
|
+ this.$message.warning("请选择至少一条数据");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$confirm("确定将选择数据删除?", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ return remove(this.ids);
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.onLoadChild(this.pageChild);
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "操作成功!"
|
|
|
+ });
|
|
|
+ this.$refs.crudChild.toggleSelection();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeOpenChild(done, type) {
|
|
|
+ if (["edit", "view"].includes(type)) {
|
|
|
+ getDict(this.formChild.id).then(res => {
|
|
|
+ this.formChild = res.data.data;
|
|
|
+ });
|
|
|
+ }
|
|
|
done();
|
|
|
},
|
|
|
- currentChange(currentPage) {
|
|
|
- this.page.currentPage = currentPage;
|
|
|
+ currentChangeChild(currentPage) {
|
|
|
+ this.pageChild.currentPage = currentPage;
|
|
|
},
|
|
|
- sizeChange(pageSize) {
|
|
|
- this.page.pageSize = pageSize;
|
|
|
+ sizeChangeChild(pageSize) {
|
|
|
+ this.pageChild.pageSize = pageSize;
|
|
|
},
|
|
|
- refreshChange() {
|
|
|
- this.onLoad(this.page, this.query);
|
|
|
+ refreshChangeChild() {
|
|
|
+ this.onLoadChild(this.pageChild, this.query);
|
|
|
+ },
|
|
|
+ onLoadParent(page, params = {}) {
|
|
|
+ this.loading = true;
|
|
|
+ getParentList(
|
|
|
+ page.currentPage,
|
|
|
+ page.pageSize,
|
|
|
+ Object.assign(params, this.query)
|
|
|
+ ).then(res => {
|
|
|
+ const data = res.data.data;
|
|
|
+ this.pageParent.total = data.total;
|
|
|
+ this.dataParent = data.records;
|
|
|
+ this.loading = false;
|
|
|
+ this.selectionClear();
|
|
|
+ });
|
|
|
},
|
|
|
- onLoad(page, params = {}) {
|
|
|
+ onLoadChild(page, params = {}) {
|
|
|
this.loading = true;
|
|
|
- getList(
|
|
|
+ getChildList(
|
|
|
page.currentPage,
|
|
|
page.pageSize,
|
|
|
+ this.parentId,
|
|
|
Object.assign(params, this.query)
|
|
|
).then(res => {
|
|
|
- this.data = res.data.data;
|
|
|
+ const data = res.data.data;
|
|
|
+ this.pageChild.total = data.total;
|
|
|
+ this.dataChild = data.records;
|
|
|
+ this.loading = false;
|
|
|
getDictTree().then(res => {
|
|
|
const data = res.data.data;
|
|
|
- const index = this.$refs.crud.findColumnIndex("parentId");
|
|
|
- this.option.column[index].dicData = data;
|
|
|
+ const index = this.$refs.crudChild.findColumnIndex("parentId");
|
|
|
+ this.optionChild.column[index].dicData = data;
|
|
|
});
|
|
|
- this.loading = false;
|
|
|
this.selectionClear();
|
|
|
});
|
|
|
}
|
|
|
@@ -358,4 +424,11 @@
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
+ .el-card__header {
|
|
|
+ padding: 2px 18px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-card__body {
|
|
|
+ padding: 10px !important;
|
|
|
+ }
|
|
|
</style>
|