init
This commit is contained in:
kk
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div class="affix">
|
||||
<avue-affix id="avue-view">
|
||||
<span class="affix-affix">固定在最顶部</span>
|
||||
</avue-affix>
|
||||
<div class="affix-line"></div>
|
||||
<avue-affix id="avue-view" :offset-top="50">
|
||||
<span class="affix-affix">固定在距离顶部 50px 的位置</span>
|
||||
</avue-affix>
|
||||
<div class="affix-line"></div>
|
||||
<avue-affix id="avue-view" :offset-top="100">
|
||||
<span class="affix-affix">固定在距离顶部 100px 的位置</span>
|
||||
</avue-affix>
|
||||
<div class="affix-line"></div>
|
||||
<avue-affix id="avue-view" :offset-top="150">
|
||||
<span class="affix-affix">固定在距离顶部 150px 的位置</span>
|
||||
</avue-affix>
|
||||
<div style="height: 2000px">
|
||||
<div style="padding: 15px 20px; font-size: 18px">往下拉就会出现图钉</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.affix {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
|
||||
&-affix {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
padding: 10px 30px;
|
||||
text-align: center;
|
||||
background: rgba(0, 153, 229, 0.9);
|
||||
}
|
||||
|
||||
&-line {
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<h3>这个页面会被 keep-alive</h3>
|
||||
<el-tag
|
||||
>在下面的输入框输入任意字符后，切换到其它页面，再回到此页时输入框文字保留，证明被缓存
|
||||
</el-tag>
|
||||
<br />
|
||||
<br />
|
||||
<el-tag>同时滚动下拉，返回时还会保持滚动条所在的位置</el-tag>
|
||||
<br />
|
||||
<br />
|
||||
<el-input v-model="value" placeholder="input here" />
|
||||
|
||||
<div style="height: 1000px"></div>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<h3>点击新增或编辑跳转到新的页面</h3>
|
||||
<avue-crud :option="option" :data="data">
|
||||
<template #menu-left>
|
||||
<el-button type="primary" @click="handleForm()" icon="el-icon-plus">add</el-button>
|
||||
</template>
|
||||
<template #menu="{ row }">
|
||||
<el-button type="primary" text @click="handleForm(row.id)" icon="el-icon-edit"
|
||||
>edit
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
addBtn: false,
|
||||
editBtn: false,
|
||||
column: [
|
||||
{
|
||||
label: '姓名',
|
||||
prop: 'name',
|
||||
},
|
||||
],
|
||||
},
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'small',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleForm(id) {
|
||||
this.$router.push({
|
||||
path: '/form-detail/index',
|
||||
query: {
|
||||
id: id,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<h3>数据展示</h3>
|
||||
<avue-data-pay :option="option"></avue-data-pay>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
span: 8,
|
||||
data: [
|
||||
{
|
||||
title: '后台模版',
|
||||
src: '/img/bg/vip1.png',
|
||||
money: '299',
|
||||
dismoney: '199',
|
||||
tip: '/永久',
|
||||
color: '#808695',
|
||||
subtext: '购买',
|
||||
click: () => {
|
||||
this.box = true;
|
||||
},
|
||||
list: [
|
||||
{
|
||||
title: '点击体验',
|
||||
href: 'https://cli1.avue.top',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '面向全屏幕尺寸的响应式适配能力',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '支持IE9+等系列浏览器',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '全新的前端错误日志监控机制',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '基于最新的avuex底层开发',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '前端路由动态服务端加载',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '灵活的多款主题自由配置',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '模块的可拆卸化,达到开箱即用',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '免费的私人git私服',
|
||||
},
|
||||
{
|
||||
title: '专属会员群',
|
||||
},
|
||||
{
|
||||
title: '前端最新干货分享',
|
||||
},
|
||||
{
|
||||
title: '赠送 Avue-cli脚手架文档（价值¥59.99）',
|
||||
href: 'https://www.kancloud.cn/smallwei/avue',
|
||||
},
|
||||
{
|
||||
title: '赠送 Avue 修仙系列视频教程',
|
||||
href: 'https://www.bilibili.com/video/av24644922',
|
||||
check: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Avuex源码',
|
||||
src: '/img/bg/vip2.png',
|
||||
color: '#ffa820',
|
||||
money: '999',
|
||||
dismoney: '399',
|
||||
tip: '/永久',
|
||||
subtext: '购买',
|
||||
click: () => {
|
||||
this.box = true;
|
||||
},
|
||||
list: [
|
||||
{
|
||||
title: '一键集成表格的导出excel,打印,等功能',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '底层代码可重用轻松对接多个UI框架',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '底层更加完善的开发错误调试机制',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '一套代码多个终端自适应',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '一键集成表格的导出excel，打印，等常用功能',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '表格的批量操作,表单的级联操作更加便捷',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '新增大量常用组件（搜索，选项卡）',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '新增大量全新可配置的骚属性',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '丰富的数据展示模版组件包',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '专属的开发者文档，助你快速掌握',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '赠送 Avue-cli脚手架文档（价值¥59.99）',
|
||||
href: 'https://www.kancloud.cn/smallwei/avue',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '赠送 Avue 修仙系列视频教程',
|
||||
href: 'https://www.bilibili.com/video/av24644922',
|
||||
check: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '全家桶',
|
||||
src: '/img/bg/vip3.png',
|
||||
color: '#ef4868',
|
||||
money: '999.99',
|
||||
dismoney: '399.99',
|
||||
tip: '/永久',
|
||||
subtext: '购买',
|
||||
click: () => {
|
||||
this.box = true;
|
||||
},
|
||||
list: [
|
||||
{
|
||||
title: '授权商业化开发,永久更新授权使用',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '后期更新和新产品将全部免费',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '拥有avuex系列的全部特权和全部源码',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '免费的私人git私服',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '专属会员群',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '前端最新干货分享',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '赠送 Avue-cli脚手架文档（价值¥59.99）',
|
||||
href: 'https://www.kancloud.cn/smallwei/avue',
|
||||
check: true,
|
||||
},
|
||||
{
|
||||
title: '赠送 Avue 修仙系列视频教程',
|
||||
href: 'https://www.bilibili.com/video/av24644922',
|
||||
check: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
@@ -0,0 +1,352 @@
|
||||
<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 #menu-left>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
v-if="permission.dict_delete"
|
||||
plain
|
||||
@click="handleDelete"
|
||||
>删 除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #isSealed="{ row }">
|
||||
<el-tag>{{ row.isSealed === 0 ? '否' : '是' }}</el-tag>
|
||||
</template>
|
||||
<template #menu="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
icon="el-icon-circle-plus"
|
||||
@click.stop="handleAdd(scope.row, scope.index)"
|
||||
>新增子项
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getList, remove, update, add, getDict, getDictTree } from '@/api/system/dict';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
selectionList: [],
|
||||
query: {},
|
||||
loading: true,
|
||||
page: {
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
option: {
|
||||
tip: false,
|
||||
searchShow: true,
|
||||
searchMenuSpan: 6,
|
||||
tree: true,
|
||||
border: true,
|
||||
index: true,
|
||||
selection: true,
|
||||
viewBtn: true,
|
||||
menuWidth: 300,
|
||||
dialogWidth: 880,
|
||||
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,
|
||||
},
|
||||
],
|
||||
},
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission']),
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.validData(this.permission.dict_add, false),
|
||||
viewBtn: this.validData(this.permission.dict_view, false),
|
||||
delBtn: this.validData(this.permission.dict_delete, false),
|
||||
editBtn: this.validData(this.permission.dict_edit, false),
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
let ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
getDictTree().then(res => {
|
||||
const column = this.findColumn(this.optionChild.column, 'parentId');
|
||||
column.dicData = res.data.data;
|
||||
});
|
||||
},
|
||||
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.value = row.code;
|
||||
item.addDisabled = true;
|
||||
}
|
||||
if (item.prop === 'parentId') {
|
||||
item.value = row.id;
|
||||
item.addDisabled = true;
|
||||
}
|
||||
});
|
||||
this.$refs.crud.rowAdd();
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
add(row).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
update(row).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
return remove(row.id);
|
||||
})
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
});
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
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.onLoad(this.page);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDict(this.form.id).then(res => {
|
||||
this.form = res.data.data;
|
||||
});
|
||||
}
|
||||
done();
|
||||
},
|
||||
beforeClose(done) {
|
||||
this.$refs.crud.tableForm = {};
|
||||
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.value = '';
|
||||
item.addDisabled = false;
|
||||
}
|
||||
if (item.prop === 'parentId') {
|
||||
item.value = '';
|
||||
item.addDisabled = false;
|
||||
}
|
||||
});
|
||||
done();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
|
||||
this.data = res.data.data;
|
||||
this.loading = false;
|
||||
this.selectionClear();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,469 @@
|
||||
<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 #menu-left>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
v-if="permission.dict_delete"
|
||||
plain
|
||||
@click="handleDelete"
|
||||
>删 除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #isSealed="{ row }">
|
||||
<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 #menu-left>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
v-if="permission.dict_delete"
|
||||
plain
|
||||
@click="handleDelete"
|
||||
>删 除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #isSealed="{ row }">
|
||||
<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,
|
||||
searchShow: true,
|
||||
searchMenuSpan: 6,
|
||||
tree: true,
|
||||
border: true,
|
||||
index: true,
|
||||
selection: true,
|
||||
viewBtn: true,
|
||||
menuWidth: 300,
|
||||
dialogWidth: 880,
|
||||
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.validData(this.permission.dict_add, false),
|
||||
viewBtn: this.validData(this.permission.dict_view, false),
|
||||
delBtn: this.validData(this.permission.dict_delete, false),
|
||||
editBtn: this.validData(this.permission.dict_edit, false),
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
let ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
rowSave(row, done, loading) {
|
||||
add(row).then(
|
||||
() => {
|
||||
this.onLoadParent(this.pageParent);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
update(row).then(
|
||||
() => {
|
||||
this.onLoadParent(this.pageParent);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
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, done) {
|
||||
this.query = params;
|
||||
this.pageParent.currentPage = 1;
|
||||
this.onLoadParent(this.pageParent, params);
|
||||
done();
|
||||
},
|
||||
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, done, loading) {
|
||||
add(row).then(
|
||||
() => {
|
||||
this.onLoadChild(this.pageChild);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdateChild(row, index, done, loading) {
|
||||
update(row).then(
|
||||
() => {
|
||||
this.onLoadChild(this.pageChild);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
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, done) {
|
||||
this.query = params;
|
||||
this.pageChild.currentPage = 1;
|
||||
this.onLoadChild(this.pageChild, params);
|
||||
done();
|
||||
},
|
||||
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>
|
||||
@@ -0,0 +1,474 @@
|
||||
<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 #menu-left>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
v-if="permission.dict_delete"
|
||||
plain
|
||||
@click="handleDelete"
|
||||
>删 除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #isSealed="{ row }">
|
||||
<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 #menu-left>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
v-if="permission.dict_delete"
|
||||
plain
|
||||
@click="handleDelete"
|
||||
>删 除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #isSealed="{ row }">
|
||||
<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,
|
||||
searchShow: true,
|
||||
searchMenuSpan: 6,
|
||||
tree: true,
|
||||
border: true,
|
||||
index: true,
|
||||
selection: true,
|
||||
viewBtn: true,
|
||||
height: 300,
|
||||
menuWidth: 300,
|
||||
dialogWidth: 880,
|
||||
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.validData(this.permission.dict_add, false),
|
||||
viewBtn: this.validData(this.permission.dict_view, false),
|
||||
delBtn: this.validData(this.permission.dict_delete, false),
|
||||
editBtn: this.validData(this.permission.dict_edit, false),
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
let ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
rowSave(row, done, loading) {
|
||||
add(row).then(
|
||||
() => {
|
||||
this.onLoadParent(this.pageParent);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
update(row).then(
|
||||
() => {
|
||||
this.onLoadParent(this.pageParent);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
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, done) {
|
||||
this.query = params;
|
||||
this.pageParent.currentPage = 1;
|
||||
this.onLoadParent(this.pageParent, params);
|
||||
done();
|
||||
},
|
||||
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, done, loading) {
|
||||
add(row).then(
|
||||
() => {
|
||||
this.onLoadChild(this.pageChild);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdateChild(row, index, done, loading) {
|
||||
update(row).then(
|
||||
() => {
|
||||
this.onLoadChild(this.pageChild);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
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, done) {
|
||||
this.query = params;
|
||||
this.pageChild.currentPage = 1;
|
||||
this.onLoadChild(this.pageChild, params);
|
||||
done();
|
||||
},
|
||||
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>
|
||||
@@ -0,0 +1,465 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<basic-container>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="clearfix">
|
||||
<span>字典列表</span>
|
||||
</div>
|
||||
</template>
|
||||
<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 #menu-left>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
v-if="permission.dict_delete"
|
||||
plain
|
||||
@click="handleDelete"
|
||||
>删 除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #isSealed="{ row }">
|
||||
<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">
|
||||
<template #header>
|
||||
<div class="clearfix">
|
||||
<span>[{{ dictValue }}] 字典详情</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="clearfix">
|
||||
<avue-crud
|
||||
:option="optionChild"
|
||||
:table-loading="loadingChild"
|
||||
:data="dataChild"
|
||||
ref="crudChild"
|
||||
v-model="formChild"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpenChild"
|
||||
:before-close="beforeCloseChild"
|
||||
@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 #menu-left>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
v-if="permission.dict_delete"
|
||||
plain
|
||||
@click="handleDelete"
|
||||
>删 除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #menu="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
icon="el-icon-circle-plus"
|
||||
@click.stop="handleAdd(scope.row, scope.index)"
|
||||
v-if="userInfo.authority.includes('admin')"
|
||||
>新增子项
|
||||
</el-button>
|
||||
</template>
|
||||
<template #isSealed="{ row }">
|
||||
<el-tag>{{ row.isSealed === 0 ? '否' : '是' }}</el-tag>
|
||||
</template>
|
||||
</avue-crud>
|
||||
</div>
|
||||
</el-card>
|
||||
</basic-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getParentList,
|
||||
getChildList,
|
||||
remove,
|
||||
update,
|
||||
add,
|
||||
getDict,
|
||||
getDictTree,
|
||||
} from '@/api/system/dict';
|
||||
import { optionParent, optionChild } from '@/option/system/dict';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dictValue: '暂无',
|
||||
parentId: -1,
|
||||
formParent: {},
|
||||
formChild: {},
|
||||
selectionList: [],
|
||||
query: {},
|
||||
loading: true,
|
||||
loadingChild: 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: [],
|
||||
optionParent: optionParent,
|
||||
optionChild: optionChild,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userInfo', 'permission']),
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.validData(this.permission.dict_add, false),
|
||||
delBtn: this.validData(this.permission.dict_delete, false),
|
||||
editBtn: this.validData(this.permission.dict_edit, false),
|
||||
viewBtn: false,
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
let ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
getDictTree().then(res => {
|
||||
const column = this.findColumn(this.optionChild.column, 'parentId');
|
||||
column.dicData = res.data.data;
|
||||
});
|
||||
},
|
||||
handleAdd(row) {
|
||||
this.$refs.crudChild.value.dictValue = '';
|
||||
this.$refs.crudChild.value.dictKey = '';
|
||||
this.$refs.crudChild.value.sort = 0;
|
||||
this.$refs.crudChild.value.isSealed = 0;
|
||||
this.$refs.crudChild.value.remark = '';
|
||||
this.$refs.crudChild.modelValue.parentId = row.id;
|
||||
this.$refs.crudChild.option.column.filter(item => {
|
||||
if (item.prop === 'parentId') {
|
||||
item.value = row.id;
|
||||
}
|
||||
});
|
||||
this.$refs.crudChild.rowAdd();
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
const form = {
|
||||
...row,
|
||||
dictKey: -1,
|
||||
};
|
||||
add(form).then(
|
||||
() => {
|
||||
this.onLoadParent(this.pageParent);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
update(row).then(
|
||||
() => {
|
||||
this.onLoadParent(this.pageParent);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
this.onLoadChild(this.pageChild);
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
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.query = {};
|
||||
this.parentId = row.id;
|
||||
this.dictValue = row.dictValue;
|
||||
this.$refs.crudChild.value.code = row.code;
|
||||
this.$refs.crudChild.modelValue.parentId = row.id;
|
||||
this.$refs.crudChild.option.column.filter(item => {
|
||||
if (item.prop === 'code') {
|
||||
item.value = row.code;
|
||||
}
|
||||
if (item.prop === 'parentId') {
|
||||
item.value = row.id;
|
||||
}
|
||||
});
|
||||
this.onLoadChild(this.pageChild);
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoadParent(this.pageParent);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.pageParent.currentPage = 1;
|
||||
this.onLoadParent(this.pageParent, params);
|
||||
done();
|
||||
},
|
||||
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.pageParent, this.query);
|
||||
},
|
||||
rowSaveChild(row, done, loading) {
|
||||
add(row).then(
|
||||
() => {
|
||||
this.onLoadChild(this.pageChild);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdateChild(row, index, done, loading) {
|
||||
update(row).then(
|
||||
() => {
|
||||
this.onLoadChild(this.pageChild);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
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, done) {
|
||||
this.query = params;
|
||||
this.pageChild.currentPage = 1;
|
||||
this.onLoadChild(this.pageChild, params);
|
||||
done();
|
||||
},
|
||||
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 (['add', 'edit'].includes(type)) {
|
||||
this.initData();
|
||||
}
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDict(this.formChild.id).then(res => {
|
||||
this.formChild = res.data.data;
|
||||
});
|
||||
}
|
||||
done();
|
||||
},
|
||||
beforeCloseChild(done) {
|
||||
this.$refs.crudChild.modelValue.parentId = this.parentId;
|
||||
this.$refs.crudChild.option.column.filter(item => {
|
||||
if (item.prop === 'parentId') {
|
||||
item.value = this.parentId;
|
||||
}
|
||||
});
|
||||
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.loadingChild = true;
|
||||
getChildList(
|
||||
page.currentPage,
|
||||
page.pageSize,
|
||||
this.parentId,
|
||||
Object.assign(params, this.query)
|
||||
).then(res => {
|
||||
this.dataChild = res.data.data;
|
||||
this.loadingChild = false;
|
||||
this.selectionClear();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,459 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<basic-container>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="clearfix">
|
||||
<span>业务字典列表</span>
|
||||
</div>
|
||||
</template>
|
||||
<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 #menu-left>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
v-if="permission.dict_delete"
|
||||
plain
|
||||
@click="handleDelete"
|
||||
>删 除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #isSealed="{ row }">
|
||||
<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">
|
||||
<template #header>
|
||||
<div class="clearfix">
|
||||
<span>[{{ dictValue }}] 业务字典详情</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="clearfix">
|
||||
<avue-crud
|
||||
:option="optionChild"
|
||||
:table-loading="loadingChild"
|
||||
:data="dataChild"
|
||||
ref="crudChild"
|
||||
v-model="formChild"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpenChild"
|
||||
:before-close="beforeCloseChild"
|
||||
@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 #menu-left>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
v-if="permission.dict_delete"
|
||||
plain
|
||||
@click="handleDelete"
|
||||
>删 除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #menu="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
icon="el-icon-circle-plus"
|
||||
@click.stop="handleAdd(scope.row, scope.index)"
|
||||
v-if="userInfo.authority.includes('admin')"
|
||||
>新增子项
|
||||
</el-button>
|
||||
</template>
|
||||
<template #isSealed="{ row }">
|
||||
<el-tag>{{ row.isSealed === 0 ? '否' : '是' }}</el-tag>
|
||||
</template>
|
||||
</avue-crud>
|
||||
</div>
|
||||
</el-card>
|
||||
</basic-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getParentList,
|
||||
getChildList,
|
||||
remove,
|
||||
update,
|
||||
add,
|
||||
getDict,
|
||||
getDictTree,
|
||||
} from '@/api/system/dictbiz';
|
||||
import { optionParent, optionChild } from '@/option/system/dictbiz';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dictValue: '暂无',
|
||||
parentId: -1,
|
||||
formParent: {},
|
||||
formChild: {},
|
||||
selectionList: [],
|
||||
query: {},
|
||||
loading: true,
|
||||
loadingChild: 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: [],
|
||||
optionParent: optionParent,
|
||||
optionChild: optionChild,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userInfo', 'permission']),
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.validData(this.permission.dictbiz_add, false),
|
||||
delBtn: this.validData(this.permission.dictbiz_delete, false),
|
||||
editBtn: this.validData(this.permission.dictbiz_edit, false),
|
||||
viewBtn: false,
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
let ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
getDictTree().then(res => {
|
||||
const column = this.findColumn(this.optionChild.column, 'parentId');
|
||||
column.dicData = res.data.data;
|
||||
});
|
||||
},
|
||||
handleAdd(row) {
|
||||
this.$refs.crudChild.modelValue.parentId = row.id;
|
||||
this.$refs.crudChild.option.column.filter(item => {
|
||||
if (item.prop === 'parentId') {
|
||||
item.value = row.id;
|
||||
}
|
||||
});
|
||||
this.$refs.crudChild.rowAdd();
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
const form = {
|
||||
...row,
|
||||
dictKey: -1,
|
||||
};
|
||||
add(form).then(
|
||||
() => {
|
||||
this.onLoadParent(this.pageParent);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
update(row).then(
|
||||
() => {
|
||||
this.onLoadParent(this.pageParent);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
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.query = {};
|
||||
this.parentId = row.id;
|
||||
this.dictValue = row.dictValue;
|
||||
this.$refs.crudChild.value.code = row.code;
|
||||
this.$refs.crudChild.modelValue.parentId = row.id;
|
||||
this.$refs.crudChild.option.column.filter(item => {
|
||||
if (item.prop === 'code') {
|
||||
item.value = row.code;
|
||||
}
|
||||
if (item.prop === 'parentId') {
|
||||
item.value = row.id;
|
||||
}
|
||||
});
|
||||
this.onLoadChild(this.pageChild);
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoadParent(this.pageParent);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.pageParent.currentPage = 1;
|
||||
this.onLoadParent(this.pageParent, params);
|
||||
done();
|
||||
},
|
||||
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.pageParent, this.query);
|
||||
},
|
||||
rowSaveChild(row, done, loading) {
|
||||
add(row).then(
|
||||
() => {
|
||||
this.onLoadChild(this.pageChild);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdateChild(row, index, done, loading) {
|
||||
update(row).then(
|
||||
() => {
|
||||
this.onLoadChild(this.pageChild);
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
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, done) {
|
||||
this.query = params;
|
||||
this.pageChild.currentPage = 1;
|
||||
this.onLoadChild(this.pageChild, params);
|
||||
done();
|
||||
},
|
||||
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 (['add', 'edit'].includes(type)) {
|
||||
this.initData();
|
||||
}
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDict(this.formChild.id).then(res => {
|
||||
this.formChild = res.data.data;
|
||||
});
|
||||
}
|
||||
done();
|
||||
},
|
||||
beforeCloseChild(done) {
|
||||
this.$refs.crudChild.modelValue.parentId = this.parentId;
|
||||
this.$refs.crudChild.option.column.filter(item => {
|
||||
if (item.prop === 'parentId') {
|
||||
item.value = this.parentId;
|
||||
}
|
||||
});
|
||||
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.loadingChild = true;
|
||||
getChildList(
|
||||
page.currentPage,
|
||||
page.pageSize,
|
||||
this.parentId,
|
||||
Object.assign(params, this.query)
|
||||
).then(res => {
|
||||
this.dataChild = res.data.data;
|
||||
this.loadingChild = false;
|
||||
this.selectionClear();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<h3>{{ $route.query.id ? '编辑' : '新增' }}</h3>
|
||||
<avue-form :option="option" v-model="form">
|
||||
<template #menu-form>
|
||||
<el-button icon="el-icon-back" @click="handleBack()">返 回</el-button>
|
||||
</template>
|
||||
</avue-form>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
option: {
|
||||
labelWidth: 110,
|
||||
column: [
|
||||
{
|
||||
label: '姓名',
|
||||
prop: 'name',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleBack() {
|
||||
this.$router.$avueRouter.closeTag();
|
||||
this.$router.back();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<h3>表单例子</h3>
|
||||
<avue-form :option="option" v-model="form"></avue-form>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
option: {
|
||||
labelWidth: 110,
|
||||
column: [
|
||||
{
|
||||
label: '用户名',
|
||||
prop: 'username',
|
||||
row: true,
|
||||
},
|
||||
{
|
||||
label: '密码',
|
||||
prop: 'password',
|
||||
type: 'password',
|
||||
row: true,
|
||||
},
|
||||
{
|
||||
label: '再次输入密码',
|
||||
prop: 'password',
|
||||
type: 'newpassword',
|
||||
row: true,
|
||||
},
|
||||
{
|
||||
label: '申请日期',
|
||||
prop: 'date',
|
||||
type: 'date',
|
||||
row: true,
|
||||
},
|
||||
{
|
||||
label: '个性签名',
|
||||
prop: 'textarea',
|
||||
type: 'textarea',
|
||||
minRows: 8,
|
||||
row: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<h3>请打开浏览器控制台，然后点击下面的按钮</h3>
|
||||
<el-button type="danger" @click="handleNewError">触发一个错误</el-button>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleNewError() {
|
||||
window.console.log(a); // eslint-disable-line
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div>
|
||||
<basic-container>
|
||||
<h3>表格权限控制</h3>
|
||||
<avue-crud ref="crud" :permission="permission" :option="option" :data="data">
|
||||
<template #expand="scope">
|
||||
{{ scope }}
|
||||
</template>
|
||||
</avue-crud>
|
||||
</basic-container>
|
||||
<basic-container>
|
||||
权限开关
|
||||
<el-switch
|
||||
:active-value="false"
|
||||
:inactive-value="true"
|
||||
v-model="text"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
>
|
||||
</el-switch>
|
||||
<p>
|
||||
具体参考<a href="https://avuex.avue.top/#/doc/crud-permission"
|
||||
>https://avuex.avue.top/#/doc/crud-permission</a
|
||||
>
|
||||
</p>
|
||||
</basic-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
text: false,
|
||||
permission: {},
|
||||
option: {
|
||||
expand: true,
|
||||
column: [
|
||||
{
|
||||
label: '姓名',
|
||||
prop: 'name',
|
||||
},
|
||||
{
|
||||
label: '年龄',
|
||||
prop: 'sex',
|
||||
},
|
||||
],
|
||||
},
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
name: '张三',
|
||||
sex: 12,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '李四',
|
||||
sex: 20,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
text() {
|
||||
if (this.text === true) {
|
||||
this.permission = {
|
||||
delBtn: false,
|
||||
addBtn: false,
|
||||
};
|
||||
} else {
|
||||
this.permission = {
|
||||
delBtn: true,
|
||||
addBtn: true,
|
||||
};
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<h3>存储</h3>
|
||||
<el-tag class="title">基本读写删(持久化存储)</el-tag>
|
||||
<div class="box">
|
||||
<el-button type="primary" @click="setItem({ name: 'username', value: 'avuex' })"
|
||||
>set('username', 'avuex')
|
||||
</el-button>
|
||||
|
||||
<el-button type="success" @click="getItem({ name: 'username' })">get('username')</el-button>
|
||||
|
||||
<el-button type="danger" @click="delItem({ name: 'username' })"
|
||||
>remove('username')
|
||||
</el-button>
|
||||
</div>
|
||||
<el-tag class="title">设置session(session存储)</el-tag>
|
||||
<div class="box">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="setItem({ name: 'username', value: 'avuex', type: 'session' })"
|
||||
>set('username', 'avuex')
|
||||
</el-button>
|
||||
|
||||
<el-button type="success" @click="getItem({ name: 'username', type: 'session' })"
|
||||
>get('username')
|
||||
</el-button>
|
||||
|
||||
<el-button type="danger" @click="delItem({ name: 'username', type: 'session' })"
|
||||
>remove('username')
|
||||
</el-button>
|
||||
</div>
|
||||
<el-tag class="title">获取所有可以获得的数据</el-tag>
|
||||
<div class="box">
|
||||
<el-button type="success" @click="getAll()">getAll(持久化存储)</el-button>
|
||||
<el-button type="success" @click="getAll({ type: 'session' })"
|
||||
>getAll(session存储)
|
||||
</el-button>
|
||||
<el-button type="danger" @click="clearAll()">delAll(持久化存储)</el-button>
|
||||
<el-button type="danger" @click="clearAll({ type: 'session' })"
|
||||
>delAll(session存储)
|
||||
</el-button>
|
||||
</div>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { setStore, getStore, removeStore, clearStore, getAllStore } from '@/utils/store';
|
||||
|
||||
export default {
|
||||
name: 'store',
|
||||
methods: {
|
||||
setItem(params = {}) {
|
||||
const { name, value, type } = params;
|
||||
setStore({
|
||||
name: name,
|
||||
content: value,
|
||||
type: type,
|
||||
});
|
||||
this.$message(`设置数据 ${name} = ${value}`);
|
||||
},
|
||||
getItem(params = {}) {
|
||||
const { name, type } = params;
|
||||
const content = getStore({
|
||||
name: name,
|
||||
type: type,
|
||||
});
|
||||
this.$message(`获取数据 ${name} = ${content}`);
|
||||
},
|
||||
delItem(params = {}) {
|
||||
const { name, type } = params;
|
||||
removeStore({ name, type });
|
||||
this.$message(`删除数据 ${name}`);
|
||||
},
|
||||
clearAll(params = {}) {
|
||||
clearStore(params);
|
||||
this.$message(`清除全部数据完成`);
|
||||
},
|
||||
getAll(params = {}) {
|
||||
const list = getAllStore(params);
|
||||
window.console.log(list);
|
||||
this.$message(`结果已经打印到控制台`);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.title {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<h3>表格例子</h3>
|
||||
<avue-crud :option="option" v-model:page="page" :data="data" />
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
page: {
|
||||
total: 122,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
username: 'smallwei',
|
||||
name: 'avue',
|
||||
password: '123456',
|
||||
newpassword: '123456',
|
||||
date: '2019-01-01',
|
||||
textarea: '这是一条很长很长很长很长很长很长很长很长的个性签名',
|
||||
},
|
||||
{
|
||||
username: 'smallwei',
|
||||
name: 'avue',
|
||||
password: '123456',
|
||||
newpassword: '123456',
|
||||
date: '2019-01-01',
|
||||
textarea: '这是一条很长很长很长很长很长很长很长很长的个性签名',
|
||||
},
|
||||
|
||||
{
|
||||
username: 'smallwei',
|
||||
name: 'avue',
|
||||
password: '123456',
|
||||
newpassword: '123456',
|
||||
date: '2019-01-01',
|
||||
textarea: '这是一条很长很长很长很长很长很长很长很长的个性签名',
|
||||
},
|
||||
{
|
||||
username: 'smallwei',
|
||||
name: 'avue',
|
||||
password: '123456',
|
||||
newpassword: '123456',
|
||||
date: '2019-01-01',
|
||||
textarea: '这是一条很长很长很长很长很长很长很长很长的个性签名',
|
||||
},
|
||||
{
|
||||
username: 'smallwei',
|
||||
name: 'avue',
|
||||
password: '123456',
|
||||
newpassword: '123456',
|
||||
date: '2019-01-01',
|
||||
textarea: '这是一条很长很长很长很长很长很长很长很长的个性签名',
|
||||
},
|
||||
{
|
||||
username: 'smallwei',
|
||||
name: 'avue',
|
||||
password: '123456',
|
||||
newpassword: '123456',
|
||||
date: '2019-01-01',
|
||||
textarea: '这是一条很长很长很长很长很长很长很长很长的个性签名',
|
||||
},
|
||||
{
|
||||
username: 'smallwei',
|
||||
name: 'avue',
|
||||
password: '123456',
|
||||
newpassword: '123456',
|
||||
date: '2019-01-01',
|
||||
textarea: '这是一条很长很长很长很长很长很长很长很长的个性签名',
|
||||
},
|
||||
],
|
||||
option: {
|
||||
column: [
|
||||
{
|
||||
label: '用户名',
|
||||
prop: 'username',
|
||||
span: 14,
|
||||
row: true,
|
||||
},
|
||||
{
|
||||
label: '姓名',
|
||||
prop: 'name',
|
||||
span: 14,
|
||||
row: true,
|
||||
},
|
||||
{
|
||||
label: '密码',
|
||||
prop: 'password',
|
||||
type: 'password',
|
||||
span: 14,
|
||||
row: true,
|
||||
},
|
||||
{
|
||||
label: '确认密码',
|
||||
prop: 'newpassword',
|
||||
type: 'password',
|
||||
hide: true,
|
||||
span: 14,
|
||||
row: true,
|
||||
},
|
||||
{
|
||||
label: '申请日期',
|
||||
prop: 'date',
|
||||
type: 'date',
|
||||
span: 14,
|
||||
row: true,
|
||||
},
|
||||
{
|
||||
label: '个性签名',
|
||||
prop: 'textarea',
|
||||
type: 'textarea',
|
||||
minRows: 8,
|
||||
span: 24,
|
||||
overHidden: true,
|
||||
row: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<h3>标签</h3>
|
||||
<el-button type="primary" @click="$router.push('/test/index')">打开一个页面</el-button>
|
||||
<el-button type="primary" @click="$router.$avueRouter.closeTag('/test/index')"
|
||||
>关闭打开的页面
|
||||
</el-button>
|
||||
<el-button type="primary" @click="$router.$avueRouter.closeTag()">关闭本标签</el-button>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div>
|
||||
<basic-container>测试页</basic-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'wel',
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped="scoped" lang="scss"></style>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="height: 2000px; background-color: #fff">
|
||||
<div style="padding: 15px 20px; font-size: 18px">往下拉就会出现返回菜单</div>
|
||||
</div>
|
||||
<avue-back-top id="avue-view"></avue-back-top>
|
||||
<avue-back-top id="avue-view" :height="100" :bottom="200">
|
||||
<div class="top">返回顶端</div>
|
||||
</avue-back-top>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.top {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
background: rgba(0, 153, 229, 0.7);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user