suojin
/
bladex_sabar
mirror of https://git.javablade.com/blade/Saber.git
22
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

⚡ 增加表格横向、纵向demo

Browse Source
dev
smallchill 6 years ago
parent e3b31c175a
commit fb4b5023bc
4 changed files with 1015 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      src/api/system/dict.js
  2. 26
      src/router/views/index.js
  3. 479
      src/views/util/demo/dict-horizontal.vue
  4. 484
      src/views/util/demo/dict-vertical.vue

26
src/api/system/dict.js
Unescape View File

@ -11,6 +11,32 @@ export const getList = (current, size, params) => {
}
})
}
export const getParentList = (current, size, params) => {
return request({
url: '/api/blade-system/dict/parent-list',
method: 'get',
params: {
...params,
current,
size,
}
})
}
export const getChildList = (current, size, parentId, params) => {
return request({
url: '/api/blade-system/dict/child-list',
method: 'get',
params: {
...params,
current,
size,
parentId,
}
})
}
export const remove = (ids) => {
return request({
url: '/api/blade-system/dict/remove',

26
src/router/views/index.js
Unescape View File

@ -35,6 +35,32 @@ export default [{
component: () =>
import( /* webpackChunkName: "views" */ '@/views/util/test')
}]
}, {
path: '/dict-horizontal',
component: Layout,
redirect: '/dict-horizontal/index',
children: [{
path: 'index',
name: '字典管理',
meta: {
i18n: 'dict'
},
component: () =>
import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-horizontal')
}]
}, {
path: '/dict-vertical',
component: Layout,
redirect: '/dict-vertical/index',
children: [{
path: 'index',
name: '字典管理',
meta: {
i18n: 'dict'
},
component: () =>
import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-vertical')
}]
}, {
path: '/info',
component: Layout,

479
src/views/util/demo/dict-horizontal.vue
Unescape View File

@ -0,0 +1,479 @@
<template>
<div>
<basic-container>
<el-row>
<el-col :span="12">
<avue-crud
:option="option"
: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>
</el-col>
<el-col :span="12">
<avue-crud
:option="option"
: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>
</el-col>
</el-row>
</basic-container>
</div>
</template>
<script>
import {
getParentList,
getChildList,
remove,
update,
add,
getDict,
} from "@/api/system/dict";
import {mapGetters} from "vuex";
export default {
data() {
return {
parentId: 0,
formParent: {},
formChild: {},
selectionList: [],
query: {},
loading: true,
pageParent: {
pageSize: 10,
pageSizes: [10, 30, 50, 100, 200],
currentPage: 1,
total: 0
},
pageChild: {
pageSize: 10,
pageSizes: [10, 30, 50, 100, 200],
currentPage: 1,
total: 0
},
dataParent: [],
dataChild: [],
option: {
tip: false,
tree: true,
border: true,
index: true,
selection: true,
viewBtn: true,
searchShow: false,
menuWidth: 300,
dialogWidth: 880,
dialogHeight: 320,
column: [
{
label: "字典编号",
prop: "code",
search: true,
span: 24,
rules: [
{
required: true,
message: "请输入字典编号",
trigger: "blur"
}
]
},
{
label: "字典键值",
prop: "dictKey",
type: "number",
rules: [
{
required: true,
message: "请输入字典键值",
trigger: "blur"
}
]
},
{
label: "字典名称",
prop: "dictValue",
search: true,
align: "center",
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
}
]
}
};
},
computed: {
...mapGetters(["permission"]),
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)
};
},
ids() {
let ids = [];
this.selectionList.forEach(ele => {
ids.push(ele.id);
});
return ids.join(",");
}
},
methods: {
rowSave(row, loading, done) {
add(row).then(
() => {
loading();
this.onLoadParent(this.pageParent);
this.$message({
type: "success",
message: "操作成功!"
});
},
error => {
done();
console.log(error);
}
);
},
rowUpdate(row, index, loading, done) {
update(row).then(
() => {
loading();
this.onLoadParent(this.pageParent);
this.$message({
type: "success",
message: "操作成功!"
});
},
error => {
done();
console.log(error);
}
);
},
rowDel(row) {
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
return remove(row.id);
})
.then(() => {
this.onLoadParent(this.pageParent);
this.$message({
type: "success",
message: "操作成功!"
});
});
},
handleRowClick(row) {
this.parentId = row.id;
this.onLoadChild(this.pageChild);
},
searchReset() {
this.query = {};
this.onLoadParent(this.pageParent);
},
searchChange(params) {
this.query = params;
this.pageParent.currentPage = 1;
this.onLoadParent(this.pageParent, params);
},
selectionChange(list) {
this.selectionList = list;
},
selectionClear() {
this.selectionList = [];
this.$refs.crud.toggleSelection();
},
handleDelete() {
if (this.selectionList.length === 0) {
this.$message.warning("请选择至少一条数据");
return;
}
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
return remove(this.ids);
})
.then(() => {
this.onLoadParent(this.pageParent);
this.$message({
type: "success",
message: "操作成功!"
});
this.$refs.crud.toggleSelection();
});
},
beforeOpen(done, type) {
if (["edit", "view"].includes(type)) {
getDict(this.formParent.id).then(res => {
this.formParent = res.data.data;
});
}
done();
},
currentChange(currentPage) {
this.pageParent.currentPage = currentPage;
},
sizeChange(pageSize) {
this.pageParent.pageSize = pageSize;
},
refreshChange() {
this.onLoadParent(this.page, this.query);
},
rowSaveChild(row, loading, done) {
add(row).then(
() => {
loading();
this.onLoadChild(this.pageChild);
this.$message({
type: "success",
message: "操作成功!"
});
},
error => {
done();
console.log(error);
}
);
},
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();
},
currentChangeChild(currentPage) {
this.pageChild.currentPage = currentPage;
},
sizeChangeChild(pageSize) {
this.pageChild.pageSize = pageSize;
},
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();
});
},
onLoadChild(page, params = {}) {
this.loading = true;
getChildList(
page.currentPage,
page.pageSize,
this.parentId,
Object.assign(params, this.query)
).then(res => {
const data = res.data.data;
this.pageChild.total = data.total;
this.dataChild = data.records;
this.loading = false;
this.selectionClear();
});
}
}
};
</script>
<style>
</style>

484
src/views/util/demo/dict-vertical.vue
Unescape View File

@ -0,0 +1,484 @@
<template>
<div>
<basic-container>
<el-row>
<el-col :span="24">
<avue-crud
:option="option"
: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>
</el-col>
</el-row>
</basic-container>
<basic-container>
<el-row>
<el-col :span="24">
<avue-crud
:option="option"
: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>
</el-col>
</el-row>
</basic-container>
</div>
</template>
<script>
import {
getParentList,
getChildList,
remove,
update,
add,
getDict,
} from "@/api/system/dict";
import {mapGetters} from "vuex";
export default {
data() {
return {
parentId: 0,
formParent: {},
formChild: {},
selectionList: [],
query: {},
loading: true,
pageParent: {
pageSize: 5,
pageSizes: [5, 10, 30, 50, 100, 200],
currentPage: 1,
total: 0
},
pageChild: {
pageSize: 5,
pageSizes: [5, 10, 30, 50, 100, 200],
currentPage: 1,
total: 0
},
dataParent: [],
dataChild: [],
option: {
tip: false,
tree: true,
border: true,
index: true,
selection: true,
viewBtn: true,
searchShow: false,
height: 300,
menuWidth: 300,
dialogWidth: 880,
dialogHeight: 320,
column: [
{
label: "字典编号",
prop: "code",
search: true,
span: 24,
rules: [
{
required: true,
message: "请输入字典编号",
trigger: "blur"
}
]
},
{
label: "字典键值",
prop: "dictKey",
type: "number",
rules: [
{
required: true,
message: "请输入字典键值",
trigger: "blur"
}
]
},
{
label: "字典名称",
prop: "dictValue",
search: true,
align: "center",
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
}
]
}
};
},
computed: {
...mapGetters(["permission"]),
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)
};
},
ids() {
let ids = [];
this.selectionList.forEach(ele => {
ids.push(ele.id);
});
return ids.join(",");
}
},
methods: {
rowSave(row, loading, done) {
add(row).then(
() => {
loading();
this.onLoadParent(this.pageParent);
this.$message({
type: "success",
message: "操作成功!"
});
},
error => {
done();
console.log(error);
}
);
},
rowUpdate(row, index, loading, done) {
update(row).then(
() => {
loading();
this.onLoadParent(this.pageParent);
this.$message({
type: "success",
message: "操作成功!"
});
},
error => {
done();
console.log(error);
}
);
},
rowDel(row) {
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
return remove(row.id);
})
.then(() => {
this.onLoadParent(this.pageParent);
this.$message({
type: "success",
message: "操作成功!"
});
});
},
handleRowClick (row) {
this.parentId = row.id;
this.onLoadChild(this.pageChild);
},
searchReset() {
this.query = {};
this.onLoadParent(this.pageParent);
},
searchChange(params) {
this.query = params;
this.pageParent.currentPage = 1;
this.onLoadParent(this.pageParent, params);
},
selectionChange(list) {
this.selectionList = list;
},
selectionClear() {
this.selectionList = [];
this.$refs.crud.toggleSelection();
},
handleDelete() {
if (this.selectionList.length === 0) {
this.$message.warning("请选择至少一条数据");
return;
}
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
return remove(this.ids);
})
.then(() => {
this.onLoadParent(this.pageParent);
this.$message({
type: "success",
message: "操作成功!"
});
this.$refs.crud.toggleSelection();
});
},
beforeOpen(done, type) {
if (["edit", "view"].includes(type)) {
getDict(this.formParent.id).then(res => {
this.formParent = res.data.data;
});
}
done();
},
currentChange(currentPage) {
this.pageParent.currentPage = currentPage;
},
sizeChange(pageSize) {
this.pageParent.pageSize = pageSize;
},
refreshChange() {
this.onLoadParent(this.page, this.query);
},
rowSaveChild(row, loading, done) {
add(row).then(
() => {
loading();
this.onLoadChild(this.pageChild);
this.$message({
type: "success",
message: "操作成功!"
});
},
error => {
done();
console.log(error);
}
);
},
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();
},
currentChangeChild(currentPage) {
this.pageChild.currentPage = currentPage;
},
sizeChangeChild(pageSize) {
this.pageChild.pageSize = pageSize;
},
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();
});
},
onLoadChild(page, params = {}) {
this.loading = true;
getChildList(
page.currentPage,
page.pageSize,
this.parentId,
Object.assign(params, this.query)
).then(res => {
const data = res.data.data;
this.pageChild.total = data.total;
this.dataChild = data.records;
this.loading = false;
this.selectionClear();
});
}
}
};
</script>
<style>
</style>
Write Preview
Loading…
Cancel
Save