mirror of
https://gitee.com/log4j/pig-ui.git
synced 2025-01-03 23:42:23 +08:00
加入页面缓存
This commit is contained in:
zhaolulu
parent
43c2be60b2
commit
2e2472fd12
@ -1,296 +0,0 @@
|
||||
<template>
|
||||
<div class="crud-container pull-auto">
|
||||
<!-- <div class="crud-header">
|
||||
<el-button type="primary" @click="handleAdd" size="small">新 增</el-button>
|
||||
<el-button @click="toggleSelection([tableData[1]])" size="small">切换第二选中状态</el-button>
|
||||
<el-button @click="toggleSelection()" size="small">取消选择</el-button>
|
||||
</div> -->
|
||||
<el-table :data="tableData" :height="tableOption.height" ref="table" style="width:99.5%;margin:0 auto;box-sizing:border-box;" :border="tableOption.border" v-loading="tableLoading" @selection-change="handleSelectionChange">
|
||||
<!-- 选择框 -->
|
||||
<template v-if="tableOption.selection">
|
||||
<el-table-column type="selection" width="55">
|
||||
</el-table-column>
|
||||
</template>
|
||||
<!-- 序号 -->
|
||||
<template v-if="tableOption.index">
|
||||
<el-table-column type="index" width="50">
|
||||
</el-table-column>
|
||||
</template>
|
||||
<!-- 循环列 -->
|
||||
<template v-for="(column,index) in tableOption.column">
|
||||
<el-table-column :width="column.width" :label="column.label" :fixed="column.fixed" :sortable="column.sortable" v-if="!column.hide">
|
||||
<template slot-scope="scope">
|
||||
<slot :row="scope.row" :dic="DIC[column.dicData]" :name="column.prop" v-if="column.solt"></slot>
|
||||
<span v-else-if="!column.overHidden" v-html="handleDetail(scope.row,column)"></span>
|
||||
<el-popover v-else trigger="hover" placement="top">
|
||||
<p>{{column.label}}: {{ scope.row[column.prop]}}</p>
|
||||
<div slot="reference" class="name-wrapper">
|
||||
<span v-html="handleDetail(scope.row,column)" class="crud--overflow"></span>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column label="操作" :width="width" v-if="tableOption.menu==undefined?true:tableOption.menu">
|
||||
<template slot-scope="scope">
|
||||
<template v-if="menu">
|
||||
<el-button type="primary" icon="el-icon-edit" size="small" @click="handleEdit(scope.row,scope.$index)" v-if="tableOption.editBtn==undefined?true:tableOption.meeditBtnnu">编 辑</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" size="small" @click="handleDel(scope.row,scope.$index)" v-if="tableOption.delBtn==undefined?true:tableOption.delBtn">删 除</el-button>
|
||||
</template>
|
||||
<slot :row="scope.row" name="menu"></slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination v-if="tableOption.page==undefined?true:tableOption.page" class="crud-pagination pull-right" :current-page.sync="page.currentPage" :background="page.background?page.background:true" :page-size="page.pageSize" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" :total="page.total"></el-pagination>
|
||||
<el-dialog :title="boxType==0?'新增':'编辑'" :visible.sync="boxVisible" width="50%" :before-close="boxhandleClose">
|
||||
<el-form ref="tableForm" :model="tableForm" label-width="80px" :rules="tableFormRules">
|
||||
<el-row :gutter="20" :span="24">
|
||||
<template v-for="(column,index) in tableOption.column">
|
||||
<el-col :span="column.span||12">
|
||||
<el-form-item :label="column.label" :prop="column.prop" v-if="!column.visdiplay">
|
||||
<template v-if="column.type == 'select'">
|
||||
<el-select v-model="tableForm[column.prop]" :placeholder="'请选择'+column.label">
|
||||
<el-option v-for="(item,index) in DIC[column.dicData]" :key="index" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-if="column.type == 'radio'">
|
||||
<el-radio v-for="(item,index) in DIC[column.dicData]" v-model="tableForm[column.prop]" :label="item.value" :key="index">{{item.label}}</el-radio>
|
||||
</template>
|
||||
<template v-if="column.type == 'date'">
|
||||
<el-date-picker v-model="tableForm[column.prop]" type="date" :placeholder="'请输入'+column.label"> </el-date-picker>
|
||||
</template>
|
||||
<template v-if="column.type == 'checkbox'">
|
||||
<el-checkbox-group v-model="tableForm[column.prop]">
|
||||
<el-checkbox v-for="(item,index) in DIC[column.dicData]" :label="item.value" :key="index">{{item.label}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<template v-if="!column.type">
|
||||
<el-input v-model="tableForm[column.prop]" :placeholder="'请输入'+column.label"></el-input>
|
||||
</template>
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="handleUpdate" v-if="boxType==1">修 改</el-button>
|
||||
<el-button type="primary" @click="handleSave" v-else>新 增</el-button>
|
||||
<el-button @click="boxVisible = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { findByvalue } from "@/util/util";
|
||||
import { mapActions } from "vuex";
|
||||
export default {
|
||||
name: "crud",
|
||||
data() {
|
||||
return {
|
||||
boxVisible: false,
|
||||
boxType: 0,
|
||||
DIC: {},
|
||||
tableForm: {},
|
||||
tableFormRules: {},
|
||||
tableIndex: -1,
|
||||
tableSelect: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
//规则初始化
|
||||
this.rulesInit();
|
||||
//初始化字典
|
||||
this.dicInit();
|
||||
},
|
||||
wathch: {
|
||||
tableOption: function(n, o) {
|
||||
this.rulesInit();
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
props: {
|
||||
beforeClose: Function,
|
||||
beforeOpen: Function,
|
||||
page: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
total: 0, //总页数
|
||||
currentPage: 0, //当前页数
|
||||
pageSize: 10, //每页显示多少条
|
||||
background: true //背景颜色
|
||||
};
|
||||
}
|
||||
},
|
||||
tableLoading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
menu: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
width: {
|
||||
type: String
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: []
|
||||
},
|
||||
tableOption: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["GetDic"]),
|
||||
rulesInit() {
|
||||
this.tableFormRules = {};
|
||||
this.tableOption.column.forEach(ele => {
|
||||
if (ele.rules) this.tableFormRules[ele.prop] = ele.rules;
|
||||
});
|
||||
},
|
||||
dicInit() {
|
||||
this.GetDic(this.tableOption.dic).then(data => {
|
||||
this.DIC = data;
|
||||
});
|
||||
},
|
||||
formInit() {
|
||||
const list = this.tableOption.column;
|
||||
let from = {};
|
||||
list.forEach(ele => {
|
||||
if (ele.type == "checkbox" || ele.type == "radio") {
|
||||
from[ele.prop] = [];
|
||||
} else {
|
||||
from[ele.prop] = "";
|
||||
}
|
||||
});
|
||||
this.tableForm = Object.assign({}, from);
|
||||
},
|
||||
//页码回掉
|
||||
handleCurrentChange(val) {
|
||||
this.$emit("handleCurrentChange", val);
|
||||
},
|
||||
findByvalue(dic, val) {
|
||||
return findByvalue(dic, val);
|
||||
},
|
||||
// 选中实例
|
||||
toggleSelection(rows) {
|
||||
if (rows) {
|
||||
rows.forEach(row => {
|
||||
this.$refs.table.toggleRowSelection(row);
|
||||
});
|
||||
} else {
|
||||
this.$refs.table.clearSelection();
|
||||
}
|
||||
},
|
||||
//选择回调
|
||||
handleSelectionChange(val) {
|
||||
this.tableSelect = val;
|
||||
this.$emit("handleSelectionChange", val);
|
||||
},
|
||||
//处理数据
|
||||
handleDetail(row, column) {
|
||||
let result = "";
|
||||
if (column.dataDetail) {
|
||||
if (column.type) {
|
||||
result = findByvalue(this.DIC[column.dicData], row[column.prop]);
|
||||
} else {
|
||||
result = row[column.prop];
|
||||
}
|
||||
result = column.dataDetail(row);
|
||||
} else {
|
||||
if (column.type) {
|
||||
result = findByvalue(this.DIC[column.dicData], row[column.prop]);
|
||||
} else {
|
||||
result = row[column.prop];
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
// 新增
|
||||
handleAdd() {
|
||||
//form表单初始化
|
||||
this.formInit();
|
||||
this.boxType = 0;
|
||||
if (typeof this.beforeClose === "function") this.beforeOpen(this.show);
|
||||
else this.show();
|
||||
},
|
||||
// 编辑
|
||||
handleEdit(row, index) {
|
||||
this.tableForm = Object.assign({}, row);
|
||||
this.tableIndex = index;
|
||||
this.boxType = 1;
|
||||
if (typeof this.beforeClose === "function") this.beforeOpen(this.show);
|
||||
else this.show();
|
||||
},
|
||||
// 删除
|
||||
handleDel(row, index) {
|
||||
this.$emit("handleDel", row, index);
|
||||
},
|
||||
//保存
|
||||
handleSave() {
|
||||
this.$refs["tableForm"].validate(valid => {
|
||||
if (valid) {
|
||||
this.$emit("handleSave", this.tableForm, this.hide);
|
||||
}
|
||||
});
|
||||
},
|
||||
//更新
|
||||
handleUpdate() {
|
||||
this.$refs["tableForm"].validate(valid => {
|
||||
if (valid) {
|
||||
const index = this.tableIndex;
|
||||
this.$emit("handleUpdate", this.tableForm, index, this.hide);
|
||||
}
|
||||
});
|
||||
},
|
||||
//显示表单
|
||||
show(cancel) {
|
||||
if (cancel !== true) {
|
||||
this.boxVisible = true;
|
||||
}
|
||||
},
|
||||
//隐藏表单
|
||||
hide(cancel) {
|
||||
if (cancel !== false) {
|
||||
this.boxVisible = false;
|
||||
}
|
||||
},
|
||||
//窗口关闭处理事件
|
||||
boxhandleClose() {
|
||||
//释放form表单
|
||||
this.tableForm = {};
|
||||
if (typeof this.beforeClose === "function") this.beforeClose(this.hide);
|
||||
else this.hide();
|
||||
}
|
||||
},
|
||||
components: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.crud-container {
|
||||
// padding: 8px 10px;
|
||||
}
|
||||
.crud-pagination {
|
||||
margin-top: 15px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.crud-header {
|
||||
margin-bottom: 10px;
|
||||
& > .el-button {
|
||||
padding: 12px 25px;
|
||||
}
|
||||
}
|
||||
.crud--overflow {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@ -1,103 +0,0 @@
|
||||
<template>
|
||||
<div class="pull-auto">
|
||||
<el-row :span="24">
|
||||
<template v-for="item in data">
|
||||
<el-col :span="span">
|
||||
<div class="item" :style="{background:item.color}">
|
||||
<div class="item-header">
|
||||
<p>{{item.title}}</p>
|
||||
<span>{{item.subtitle}}</span>
|
||||
</div>
|
||||
<div class="item-body">
|
||||
<h2>{{item.count}}</h2>
|
||||
</div>
|
||||
<div class="item-footer">
|
||||
<span>{{item.allcount}}</span>
|
||||
<p>{{item.text}}</p>
|
||||
</div>
|
||||
<p class="item-tip">{{item.key}}</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "datashow",
|
||||
data() {
|
||||
return {
|
||||
span: this.option.span || 6,
|
||||
data: this.option.data || []
|
||||
};
|
||||
},
|
||||
props: {
|
||||
option: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item {
|
||||
position: relative;
|
||||
margin: 15px;
|
||||
padding: 12px;
|
||||
height: 144px;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
}
|
||||
.item-header {
|
||||
position: relative;
|
||||
& > p {
|
||||
margin: 0px;
|
||||
font-size: 14px;
|
||||
}
|
||||
& > span {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
.item-body {
|
||||
& > h2 {
|
||||
margin: 0;
|
||||
font-size: 32px;
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
.item-footer {
|
||||
line-height: 16px;
|
||||
& > span {
|
||||
font-size: 10px;
|
||||
}
|
||||
& > p {
|
||||
margin: 0px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.item-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 100%;
|
||||
font-size: 48px;
|
||||
transform: rotate(-40deg);
|
||||
opacity: 0.1;
|
||||
}
|
||||
</style>
|
||||
@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<div class="pull-auto">
|
||||
<el-row :span="24">
|
||||
<template v-for="item,index in data">
|
||||
<el-col :span="span">
|
||||
<div class="item">
|
||||
<img :src="item.src" class="item-img" />
|
||||
<div class="item-text" :style="{color:colorText,backgroundColor:bgText}">
|
||||
<h3>{{item.name}}</h3>
|
||||
<p>{{item.text}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "cardData",
|
||||
data() {
|
||||
return {
|
||||
span: this.option.span || 6,
|
||||
data: this.option.data || [],
|
||||
colorText: this.option.colorText || "#fff",
|
||||
bgText: this.option.bgText || "#2e323f",
|
||||
borderColor: this.option.borderColor || "#2e323f"
|
||||
};
|
||||
},
|
||||
props: {
|
||||
option: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
watch: {},
|
||||
computed: {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$height: 340px;
|
||||
.item {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 50px;
|
||||
width: 230px;
|
||||
height: $height;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
border-color: #fff;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
&:hover .item-text {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.item-img {
|
||||
width: 100%;
|
||||
background: red;
|
||||
border-radius: 5px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.item-text {
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
padding: 20px 15px;
|
||||
width: 100%;
|
||||
height: $height;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
opacity: 0.9;
|
||||
transition: top 0.4s;
|
||||
& > p {
|
||||
font-size: 12px;
|
||||
line-height: 25px;
|
||||
text-indent: 2em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,77 +0,0 @@
|
||||
<template>
|
||||
<div class="pull-auto easyData-contailer">
|
||||
<el-row :span="24">
|
||||
<template v-for="item in data">
|
||||
<el-col :span="span">
|
||||
<div class="item" :class="[{'item--easy':discount}]">
|
||||
<div class="item-icon" :style="{color:color}">
|
||||
<i :class="item.icon"></i>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<span>{{item.title}}</span>
|
||||
<h3 :style="{color:color}">{{item.count}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "easyData",
|
||||
data() {
|
||||
return {
|
||||
span: this.option.span || 6,
|
||||
data: this.option.data,
|
||||
color: this.option.color || "rgb(63, 161, 255)",
|
||||
discount: this.option.discount || false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
option: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.easyData-contailer {
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 80px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.item-icon {
|
||||
margin-top: 3px;
|
||||
margin-right: 8px;
|
||||
& > i {
|
||||
font-size: 46px !important;
|
||||
}
|
||||
}
|
||||
.item-info {
|
||||
line-height: 25px;
|
||||
& > span {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.item--easy {
|
||||
flex-direction: column;
|
||||
& > .item-icon {
|
||||
margin: 0;
|
||||
}
|
||||
& > .item-info {
|
||||
margin-top: -15px;
|
||||
& > span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,125 +0,0 @@
|
||||
<template>
|
||||
<div class="from-container pull-auto">
|
||||
<el-form ref="form" :model="form" label-width="80px" :rules="formRules">
|
||||
<el-row :gutter="20" :span="24">
|
||||
<template v-for="(column,index) in formOption.column">
|
||||
<el-col :span="column.span||12">
|
||||
<el-form-item :label="column.label" :prop="column.prop" v-if="!column.visdiplay">
|
||||
<template v-if="column.type == 'select'">
|
||||
<el-select v-model="form[column.prop]" :placeholder="'请选择'+column.label" :disabled="column.disabled">
|
||||
<el-option
|
||||
v-for="(item,index) in DIC[column.dicData]"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-if="column.type == 'radio'">
|
||||
<el-radio v-for="(item,index) in DIC[column.dicData]" v-model="form[column.prop]" :disabled="column.disabled" :label="item.value" :key="index">{{item.label}}</el-radio>
|
||||
</template>
|
||||
<template v-if="column.type == 'date'">
|
||||
<el-date-picker v-model="form[column.prop]" type="date" :placeholder="'请输入'+column.label" :disabled="column.disabled"> </el-date-picker>
|
||||
</template>
|
||||
<template v-if="column.type == 'checkbox'">
|
||||
<el-checkbox-group v-model="form[column.prop]">
|
||||
<el-checkbox v-for="(item,index) in DIC[column.dicData]" :label="item.value" :key="index" :disabled="column.disabled">{{item.label}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<template v-if="!column.type">
|
||||
<el-input v-model="form[column.prop]" :placeholder="'请输入'+column.label" :disabled="column.disabled"></el-input>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSubmit">{{formSubmitText}}</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from "vuex";
|
||||
export default {
|
||||
name: "from",
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
formRules: {},
|
||||
DIC: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
//规则初始化
|
||||
this.rulesInit();
|
||||
//初始化dic字典
|
||||
this.dicInit();
|
||||
//初始化form表单
|
||||
this.formInit();
|
||||
},
|
||||
watch: {
|
||||
formOption: function(n, o) {
|
||||
this.rulesInit();
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
computed: {},
|
||||
props: {
|
||||
formOption: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: {}
|
||||
},
|
||||
formSubmitText: {
|
||||
type: String,
|
||||
default: "提交"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["GetDic"]),
|
||||
rulesInit() {
|
||||
this.formRules = {};
|
||||
this.formOption.column.forEach(ele => {
|
||||
if (ele.rules) this.formRules[ele.prop] = ele.rules;
|
||||
});
|
||||
},
|
||||
dicInit() {
|
||||
this.GetDic(this.formOption.dic).then(data => {
|
||||
this.DIC = data;
|
||||
});
|
||||
},
|
||||
formInit() {
|
||||
const list = this.formOption.column;
|
||||
let form = {};
|
||||
list.forEach(ele => {
|
||||
if (ele.type == "checkbox" || ele.type == "radio") {
|
||||
form[ele.prop] = [];
|
||||
} else {
|
||||
form[ele.prop] = "";
|
||||
}
|
||||
});
|
||||
this.form = Object.assign({}, form);
|
||||
},
|
||||
handleSubmit() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.$emit("handleSubmit", this.form);
|
||||
} else {
|
||||
this.$emit("handleSubmit");
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
components: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.from-container {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
</style>
|
||||
@ -8,7 +8,7 @@ import { mapState, mapGetters } from "vuex";
|
||||
import NProgress from "nprogress"; // progress bar
|
||||
import "nprogress/nprogress.css"; // progress bar style
|
||||
export default {
|
||||
name: "myiframe",
|
||||
name: "AvueIframe",
|
||||
data() {
|
||||
return {
|
||||
urlPath: this.getUrlPath() //iframe src 路径
|
||||
@ -5,7 +5,10 @@
|
||||
<sidebar class="left pull-chheight"></sidebar>
|
||||
<div class="right">
|
||||
<tags ref="nav" class="nav"></tags>
|
||||
<router-view class="main pull-chheight"></router-view>
|
||||
<keep-alive>
|
||||
<router-view v-if="!$route.meta.keepAlive" class="main pull-chheight"></router-view>
|
||||
</keep-alive>
|
||||
<router-view v-if="$route.meta.keepAlive" class="main pull-chheight"></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
48
src/router/_router.js
Normal file
48
src/router/_router.js
Normal file
@ -0,0 +1,48 @@
|
||||
const _import = require('./_import');
|
||||
import Layout from '@/page/index/'
|
||||
export default [ {
|
||||
path: '/wel',
|
||||
component: Layout,
|
||||
redirect: '/wel/index',
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
name: '首页',
|
||||
component: _import('wel')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
name: '主页',
|
||||
redirect: '/wel'
|
||||
}, {
|
||||
path: '/info',
|
||||
component: Layout,
|
||||
redirect: '/info/index',
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
name: '修改信息',
|
||||
component: _import('admin/user/info', 'views')
|
||||
}
|
||||
]
|
||||
},{
|
||||
menuId: 1,
|
||||
path: '/admin',
|
||||
component: Layout,
|
||||
name: '系统管理',
|
||||
hidden: false,
|
||||
redirect: '/admin/user',
|
||||
meta: {
|
||||
title: '系统管理',
|
||||
},
|
||||
children: [
|
||||
{ menuId: 2, path: 'user', component: _import('admin/user/index', 'views'), name: '用户管理', meta: { title: '用户管理' } },
|
||||
{ menuId: 3, path: 'menu', component: _import('admin/menu/index', 'views'), name: '菜单管理', meta: { title: '菜单管理' } },
|
||||
{ menuId: 4, path: 'role', component: _import('admin/role/index', 'views'), name: '角色管理', meta: { title: '角色管理' } },
|
||||
{ menuId: 5, path: 'dept', component: _import('admin/dept/index', 'views'), name: '部门管理', meta: { title: '部门管理',keepAlive:true } },
|
||||
{ menuId: 6, path: 'dict', component: _import('admin/dict/index', 'views'), name: '字典管理', meta: { title: '字典管理' } },
|
||||
{ menuId: 7, path: 'log', component: _import('admin/log/index', 'views'), name: '日志管理', meta: { title: '日志管理' } }
|
||||
]
|
||||
}]
|
||||
@ -4,13 +4,8 @@ import { routerMode } from '@/config/env';
|
||||
import store from '@/store'
|
||||
import { getStore, getSessionStore, vaildUtil } from '@/util/yun'
|
||||
|
||||
|
||||
|
||||
import Myiframe from '@/components/iframe/iframe.vue'
|
||||
import Layout from '@/page/index/'
|
||||
import errorPage404 from '@/components/errorPage/404.vue';
|
||||
import errorPage403 from '@/components/errorPage/403.vue';
|
||||
import errorPage500 from '@/components/errorPage/500.vue';
|
||||
import viewRouter from './_router'
|
||||
const _import = require('./_import');
|
||||
Vue.use(VueRouter);
|
||||
export default new VueRouter({
|
||||
@ -34,25 +29,9 @@ export const asyncRouterMap = [
|
||||
{ path: '/login', name: '登录页', component: _import('login/index') },
|
||||
{ path: '/lock', name: '锁屏页', component: _import('lock/index') },
|
||||
{ path: '*', redirect: '/404', hidden: true },
|
||||
{ path: '/404', component: errorPage404, name: '404' },
|
||||
{ path: '/403', component: errorPage403, name: '403' },
|
||||
{ path: '/500', component: errorPage500, name: '500' },
|
||||
{
|
||||
path: '/',
|
||||
name: '主页',
|
||||
redirect: '/wel'
|
||||
}, {
|
||||
path: '/info',
|
||||
component: Layout,
|
||||
redirect: '/info/index',
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
name: '修改信息',
|
||||
component: _import('admin/user/info', 'views')
|
||||
}
|
||||
]
|
||||
},
|
||||
{ path: '/404', component: _import('error-page/404','components'), name: '404' },
|
||||
{ path: '/403', component: _import('error-page/403','components'), name: '403' },
|
||||
{ path: '/500', component: _import('error-page/500','components'), name: '500' },
|
||||
{
|
||||
path: '/myiframe',
|
||||
component: Layout,
|
||||
@ -61,39 +40,10 @@ export const asyncRouterMap = [
|
||||
{
|
||||
path: ":routerPath",
|
||||
name: 'iframe',
|
||||
component: Myiframe,
|
||||
component: _import('iframe/main','components'),
|
||||
props: true
|
||||
}
|
||||
]
|
||||
|
||||
}, {
|
||||
path: '/wel',
|
||||
component: Layout,
|
||||
redirect: '/wel/index',
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
name: '首页',
|
||||
component: _import('wel')
|
||||
}
|
||||
]
|
||||
}, {
|
||||
menuId: 1,
|
||||
path: '/admin',
|
||||
component: Layout,
|
||||
name: '系统管理',
|
||||
hidden: false,
|
||||
redirect: '/admin/user',
|
||||
meta: {
|
||||
title: '系统管理',
|
||||
},
|
||||
children: [
|
||||
{ menuId: 2, path: 'user', component: _import('admin/user/index', 'views'), name: '用户管理', meta: { title: '用户管理' } },
|
||||
{ menuId: 3, path: 'menu', component: _import('admin/menu/index', 'views'), name: '菜单管理', meta: { title: '菜单管理' } },
|
||||
{ menuId: 4, path: 'role', component: _import('admin/role/index', 'views'), name: '角色管理', meta: { title: '角色管理' } },
|
||||
{ menuId: 5, path: 'dept', component: _import('admin/dept/index', 'views'), name: '部门管理', meta: { title: '部门管理' } },
|
||||
{ menuId: 6, path: 'dict', component: _import('admin/dict/index', 'views'), name: '字典管理', meta: { title: '字典管理' } },
|
||||
{ menuId: 7, path: 'log', component: _import('admin/log/index', 'views'), name: '日志管理', meta: { title: '日志管理' } }
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
].concat(viewRouter)
|
||||
|
||||
@ -34,7 +34,7 @@ const navs = {
|
||||
mutations: {
|
||||
ADD_TAG: (state, action) => {
|
||||
state.tag = action;
|
||||
setStore({ name: 'tag', content: state.tag })
|
||||
setStore({ name: 'tag', content: state.tag,type:'session' })
|
||||
if (state.tagList.some(a => a.value === action.value)) return
|
||||
state.tagList.push({
|
||||
label: action.label,
|
||||
@ -42,17 +42,17 @@ const navs = {
|
||||
query: action.query,
|
||||
})
|
||||
state.tagList = setFistTag(state.tagList);
|
||||
setStore({ name: 'tagList', content: state.tagList })
|
||||
setStore({ name: 'tagList', content: state.tagList,type:'session' })
|
||||
},
|
||||
SET_TAG_CURRENT: (state, tagCurrent) => {
|
||||
state.tagCurrent = tagCurrent;
|
||||
setStore({ name: 'tagCurrent', content: state.tagCurrent })
|
||||
setStore({ name: 'tagCurrent', content: state.tagCurrent,type:'session' })
|
||||
},
|
||||
SET_TAG: (state, value) => {
|
||||
state.tagList.forEach((ele, num) => {
|
||||
if (ele.value === value) {
|
||||
state.tag = state.tagList[num];
|
||||
setStore({ name: 'tag', content: state.tag })
|
||||
setStore({ name: 'tag', content: state.tag,type:'session' })
|
||||
}
|
||||
});
|
||||
},
|
||||
@ -69,8 +69,8 @@ const navs = {
|
||||
state.tagList = state.tagList.slice(num, num + 1)
|
||||
state.tag = state.tagList[0];
|
||||
state.tagList[0].close = false;
|
||||
setStore({ name: 'tag', content: state.tag })
|
||||
setStore({ name: 'tagList', content: state.tagList })
|
||||
setStore({ name: 'tag', content: state.tag,type:'session' })
|
||||
setStore({ name: 'tagList', content: state.tagList,type:'session' })
|
||||
}
|
||||
})
|
||||
|
||||
@ -80,8 +80,8 @@ const navs = {
|
||||
if (ele.value === action.value) {
|
||||
state.tagList.splice(num, 1)
|
||||
state.tagList = setFistTag(state.tagList);
|
||||
setStore({ name: 'tag', content: state.tag })
|
||||
setStore({ name: 'tagList', content: state.tagList })
|
||||
setStore({ name: 'tag', content: state.tag,type:'session' })
|
||||
setStore({ name: 'tagList', content: state.tagList,type:'session' })
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user