初始化项目
This commit is contained in:
18500206848
46
src/views/util/affix.vue
Normal file
46
src/views/util/affix.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<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>
|
||||
22
src/views/util/cache.vue
Normal file
22
src/views/util/cache.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<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>
|
||||
59
src/views/util/crud-form.vue
Normal file
59
src/views/util/crud-form.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<h3>点击新增或编辑跳转到新的页面</h3>
|
||||
<avue-crud :option="option"
|
||||
:data="data">
|
||||
<template slot="menuLeft">
|
||||
<el-button type="primary"
|
||||
size="small"
|
||||
@click="handleForm()"
|
||||
icon="el-icon-plus">add</el-button>
|
||||
</template>
|
||||
<template slot="menu"
|
||||
slot-scope="{row}">
|
||||
<el-button size="small"
|
||||
type="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>
|
||||
199
src/views/util/data.vue
Normal file
199
src/views/util/data.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<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>
|
||||
359
src/views/util/demo/dict-classic.vue
Normal file
359
src/views/util/demo/dict-classic.vue
Normal file
@@ -0,0 +1,359 @@
|
||||
<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>
|
||||
</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,
|
||||
indexLabel: "序号",
|
||||
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.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(",");
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
getDictTree().then(res => {
|
||||
const column = this.findObject(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.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>
|
||||
470
src/views/util/demo/dict-horizontal.vue
Normal file
470
src/views/util/demo/dict-horizontal.vue
Normal file
@@ -0,0 +1,470 @@
|
||||
<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,
|
||||
searchShow: true,
|
||||
searchMenuSpan: 6,
|
||||
tree: true,
|
||||
border: true,
|
||||
index: true,
|
||||
indexLabel: "序号",
|
||||
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.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, 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>
|
||||
475
src/views/util/demo/dict-vertical.vue
Normal file
475
src/views/util/demo/dict-vertical.vue
Normal file
@@ -0,0 +1,475 @@
|
||||
<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,
|
||||
searchShow: true,
|
||||
searchMenuSpan: 6,
|
||||
tree: true,
|
||||
border: true,
|
||||
index: true,
|
||||
indexLabel: "序号",
|
||||
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.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, 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>
|
||||
40
src/views/util/form-detail.vue
Normal file
40
src/views/util/form-detail.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<h3>{{$route.query.id?'编辑':'新增'}}</h3>
|
||||
<avue-form :option="option"
|
||||
v-model="form">
|
||||
<template slot="menuForm">
|
||||
<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>
|
||||
55
src/views/util/form.vue
Normal file
55
src/views/util/form.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<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>
|
||||
43
src/views/util/import-error-dialog.vue
Normal file
43
src/views/util/import-error-dialog.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<el-dialog title="错误信息" :visible.sync="visible" append-to-body>
|
||||
<div class="ied">
|
||||
<ul>
|
||||
<li v-for="(item,index) in data" :key="index">{{item}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="close">关闭</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [],
|
||||
visible: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
show(data) {
|
||||
this.data = data;
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.table && this.$refs.table.doLayout();
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.data = [];
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ied ul li {
|
||||
list-style: none;
|
||||
padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
19
src/views/util/logs.vue
Normal file
19
src/views/util/logs.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<h3>请打开浏览器控制台，然后点击下面的按钮</h3>
|
||||
<el-button type="danger"
|
||||
size="small"
|
||||
@click="handleNewError">触发一个错误
|
||||
</el-button>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleNewError() {
|
||||
window.console.log(a); // eslint-disable-line
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
250
src/views/util/mission-view.vue
Normal file
250
src/views/util/mission-view.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div class="mission-view">
|
||||
<el-form label-position="left" size="small">
|
||||
<el-collapse
|
||||
v-model="activeNames"
|
||||
@change="handleChange"
|
||||
class="avue-group"
|
||||
>
|
||||
<el-collapse-item title="任务信息" name="1" disabled="true">
|
||||
<template slot="title">
|
||||
<div class="avue-group__header">
|
||||
<div class="avue-group__title">任务信息</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col span="12">
|
||||
<el-form-item label="任务名称：">{{
|
||||
model.missionTitle
|
||||
}}</el-form-item>
|
||||
</el-col>
|
||||
<el-col span="12">
|
||||
<el-form-item label="任务编码：">{{
|
||||
model.missionNo
|
||||
}}</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col span="12">
|
||||
<el-form-item label="报名截止：">{{
|
||||
format(model.etimePub)
|
||||
}}</el-form-item>
|
||||
</el-col>
|
||||
<el-col span="12">
|
||||
<el-form-item label="任务时间："
|
||||
>{{ format(model.stime) }} 至
|
||||
{{ format(model.etime) }}</el-form-item
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
|
||||
<el-collapse-item title="任务要求" name="2" disabled="true">
|
||||
<template slot="title">
|
||||
<div class="avue-group__header">
|
||||
<div class="avue-group__title">任务要求</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col span="12">
|
||||
<el-form-item label="招聘人数："
|
||||
>{{ model.peopleNum }}人</el-form-item
|
||||
>
|
||||
</el-col>
|
||||
<el-col span="12">
|
||||
<el-form-item label="参考工资："
|
||||
>{{ model.wage
|
||||
}}{{ wageUnitCategory[model.wageUnitCategory] }}</el-form-item
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col span="12">
|
||||
<el-form-item label="行业类型：">{{
|
||||
model.tradeNames
|
||||
}}</el-form-item>
|
||||
</el-col>
|
||||
<el-col span="12">
|
||||
<el-form-item>
|
||||
<label slot="label"
|
||||
>工 种：</label
|
||||
>
|
||||
{{ model.worktypeNames }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col span="24">
|
||||
<el-form-item label="技能要求：">
|
||||
<el-tag
|
||||
:key="skill"
|
||||
v-for="skill in getSkill(model.skillNames)"
|
||||
>{{ skill }}</el-tag
|
||||
>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col span="24">
|
||||
<el-form-item label="任务描述：">{{
|
||||
model.missionDesc
|
||||
}}</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
|
||||
<el-collapse-item title="人员要求" name="3" disabled="true">
|
||||
<template slot="title">
|
||||
<div class="avue-group__header">
|
||||
<div class="avue-group__title">人员要求</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col span="16">
|
||||
<el-form-item label="人员属性：">{{
|
||||
model.userNature
|
||||
}}</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col span="8">
|
||||
<el-form-item label="性别要求：">{{ gender[model.sex] }}</el-form-item>
|
||||
</el-col> -->
|
||||
<el-col span="8">
|
||||
<el-form-item label="年龄要求：">{{
|
||||
model.ageDesc
|
||||
}}</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
|
||||
<el-col span="16">
|
||||
<el-form-item label="学历要求：">{{
|
||||
education[model.education]
|
||||
}}</el-form-item>
|
||||
</el-col>
|
||||
<el-col span="8">
|
||||
<el-form-item label="经验要求：">{{
|
||||
model.experienceDesc
|
||||
}}</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
|
||||
<el-collapse-item title="联系人" name="4" disabled="true">
|
||||
<template slot="title">
|
||||
<div class="avue-group__header">
|
||||
<div class="avue-group__title">联系人</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col span="8">
|
||||
<el-form-item label="联 系 人：">{{
|
||||
model.callName
|
||||
}}</el-form-item>
|
||||
</el-col>
|
||||
<el-col span="8">
|
||||
<el-form-item label="联系方式：">{{
|
||||
model.callTel
|
||||
}}</el-form-item>
|
||||
</el-col>
|
||||
<el-col span="8">
|
||||
<el-form-item>
|
||||
<label slot="label"
|
||||
>座 机：</label
|
||||
>
|
||||
{{ model.callNumber }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col span="24">
|
||||
<el-form-item label="工作地址：" v-if="model.cityId"
|
||||
>{{ city[0].label }} {{ city[1].label }}
|
||||
{{ city[2].label }}</el-form-item
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col span="24">
|
||||
<el-form-item label="详细地址：">{{
|
||||
model.address
|
||||
}}</el-form-item>
|
||||
<select-map
|
||||
:lat="model.lat"
|
||||
:lng="model.lon"
|
||||
:isCanEdit="false"
|
||||
:type="'view'"
|
||||
></select-map>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SelectMap from "@/components/map/selectLocation";
|
||||
import { mapGetters } from "vuex";
|
||||
import { dateFormat } from "@/util/date";
|
||||
import {
|
||||
wageUnitCategoryState,
|
||||
educationState,
|
||||
genderState,
|
||||
} from "@/common/dic";
|
||||
|
||||
function getDic(arr) {
|
||||
let rel = {};
|
||||
arr.forEach((element) => {
|
||||
rel[element.value] = element.label;
|
||||
});
|
||||
return rel;
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { SelectMap },
|
||||
props: { model: Object },
|
||||
data() {
|
||||
return {
|
||||
activeNames: ["1", "2", "3", "4"],
|
||||
wageUnitCategory: getDic(wageUnitCategoryState),
|
||||
education: getDic(educationState),
|
||||
gender: getDic(genderState),
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
getSkill(skillStr) {
|
||||
return skillStr.split(",");
|
||||
},
|
||||
format(date) {
|
||||
if (date) {
|
||||
return dateFormat(new Date(date), "yyyy/MM/dd");
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["area"]),
|
||||
city() {
|
||||
return this.$store.getters.getAreaParents(this.model.cityId);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.mission-view .el-tag + .el-tag {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.mission-view .el-form {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.mission-view .el-form .el-col {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.mission-view .el-form .el-col .el-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.mission-view .el-collapse {
|
||||
border-top: 0px;
|
||||
}
|
||||
</style>
|
||||
82
src/views/util/permission.vue
Normal file
82
src/views/util/permission.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div>
|
||||
<basic-container>
|
||||
<h3>表格权限控制</h3>
|
||||
<avue-crud ref="crud"
|
||||
:permission="permission"
|
||||
:option="option"
|
||||
:data="data">
|
||||
<template slot="expand"
|
||||
slot-scope="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>
|
||||
122
src/views/util/store.vue
Normal file
122
src/views/util/store.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<h3>存储</h3>
|
||||
<el-tag class="title"
|
||||
size="small">基本读写删(持久化存储)
|
||||
</el-tag>
|
||||
<div class="box">
|
||||
<el-button type="primary"
|
||||
size="small"
|
||||
@click="setItem({name:'username', value:'avuex'});">set('username', 'avuex')
|
||||
</el-button>
|
||||
|
||||
<el-button type="success"
|
||||
size="small"
|
||||
@click="getItem({name:'username'});">get('username')
|
||||
</el-button>
|
||||
|
||||
<el-button type="danger"
|
||||
size="small"
|
||||
@click="delItem({name:'username'});">remove('username')
|
||||
</el-button>
|
||||
</div>
|
||||
<el-tag class="title"
|
||||
size="small">设置session(session存储)
|
||||
</el-tag>
|
||||
<div class="box">
|
||||
<el-button type="primary"
|
||||
size="small"
|
||||
@click="setItem({name:'username', value:'avuex',type:'session'});">set('username', 'avuex')
|
||||
</el-button>
|
||||
|
||||
<el-button type="success"
|
||||
size="small"
|
||||
@click="getItem({name:'username',type:'session'});">get('username')
|
||||
</el-button>
|
||||
|
||||
<el-button type="danger"
|
||||
size="small"
|
||||
@click="delItem({name:'username',type:'session'});">remove('username')
|
||||
</el-button>
|
||||
</div>
|
||||
<el-tag class="title"
|
||||
size="small">获取所有可以获得的数据
|
||||
</el-tag>
|
||||
<div class="box">
|
||||
<el-button type="success"
|
||||
size="small"
|
||||
@click="getAll()">getAll(持久化存储)
|
||||
</el-button>
|
||||
<el-button type="success"
|
||||
size="small"
|
||||
@click="getAll({type:'session'})">getAll(session存储)
|
||||
</el-button>
|
||||
<el-button type="danger"
|
||||
size="small"
|
||||
@click="clearAll()">delAll(持久化存储)
|
||||
</el-button>
|
||||
<el-button type="danger"
|
||||
size="small"
|
||||
@click="clearAll({type:'session'})">delAll(session存储)
|
||||
</el-button>
|
||||
</div>
|
||||
</basic-container>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
setStore,
|
||||
getStore,
|
||||
removeStore,
|
||||
clearStore,
|
||||
getAllStore
|
||||
} from "@/util/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>
|
||||
129
src/views/util/table.vue
Normal file
129
src/views/util/table.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<h3>表格例子</h3>
|
||||
<avue-crud :option="option"
|
||||
:page.sync="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>
|
||||
27
src/views/util/tags.vue
Normal file
27
src/views/util/tags.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<h3>标签</h3>
|
||||
<el-button type="primary"
|
||||
size="small"
|
||||
@click="$router.push('/test/index')">打开一个页面
|
||||
</el-button>
|
||||
<el-button type="primary"
|
||||
size="small"
|
||||
@click="$router.$avueRouter.closeTag('/test/index')">关闭打开的页面
|
||||
</el-button>
|
||||
<el-button type="primary"
|
||||
size="small"
|
||||
@click="$router.$avueRouter.closeTag()">关闭本标签
|
||||
</el-button>
|
||||
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
21
src/views/util/test.vue
Normal file
21
src/views/util/test.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<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>
|
||||
28
src/views/util/top.vue
Normal file
28
src/views/util/top.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<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