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 from "nprogress"; // progress bar
|
||||||
import "nprogress/nprogress.css"; // progress bar style
|
import "nprogress/nprogress.css"; // progress bar style
|
||||||
export default {
|
export default {
|
||||||
name: "myiframe",
|
name: "AvueIframe",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urlPath: this.getUrlPath() //iframe src 路径
|
urlPath: this.getUrlPath() //iframe src 路径
|
||||||
@ -5,7 +5,10 @@
|
|||||||
<sidebar class="left pull-chheight"></sidebar>
|
<sidebar class="left pull-chheight"></sidebar>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<tags ref="nav" class="nav"></tags>
|
<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>
|
</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 store from '@/store'
|
||||||
import { getStore, getSessionStore, vaildUtil } from '@/util/yun'
|
import { getStore, getSessionStore, vaildUtil } from '@/util/yun'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
import Myiframe from '@/components/iframe/iframe.vue'
|
|
||||||
import Layout from '@/page/index/'
|
import Layout from '@/page/index/'
|
||||||
import errorPage404 from '@/components/errorPage/404.vue';
|
import viewRouter from './_router'
|
||||||
import errorPage403 from '@/components/errorPage/403.vue';
|
|
||||||
import errorPage500 from '@/components/errorPage/500.vue';
|
|
||||||
const _import = require('./_import');
|
const _import = require('./_import');
|
||||||
Vue.use(VueRouter);
|
Vue.use(VueRouter);
|
||||||
export default new VueRouter({
|
export default new VueRouter({
|
||||||
@ -34,25 +29,9 @@ export const asyncRouterMap = [
|
|||||||
{ path: '/login', name: '登录页', component: _import('login/index') },
|
{ path: '/login', name: '登录页', component: _import('login/index') },
|
||||||
{ path: '/lock', name: '锁屏页', component: _import('lock/index') },
|
{ path: '/lock', name: '锁屏页', component: _import('lock/index') },
|
||||||
{ path: '*', redirect: '/404', hidden: true },
|
{ path: '*', redirect: '/404', hidden: true },
|
||||||
{ path: '/404', component: errorPage404, name: '404' },
|
{ path: '/404', component: _import('error-page/404','components'), name: '404' },
|
||||||
{ path: '/403', component: errorPage403, name: '403' },
|
{ path: '/403', component: _import('error-page/403','components'), name: '403' },
|
||||||
{ path: '/500', component: errorPage500, name: '500' },
|
{ path: '/500', component: _import('error-page/500','components'), name: '500' },
|
||||||
{
|
|
||||||
path: '/',
|
|
||||||
name: '主页',
|
|
||||||
redirect: '/wel'
|
|
||||||
}, {
|
|
||||||
path: '/info',
|
|
||||||
component: Layout,
|
|
||||||
redirect: '/info/index',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: 'index',
|
|
||||||
name: '修改信息',
|
|
||||||
component: _import('admin/user/info', 'views')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/myiframe',
|
path: '/myiframe',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
@ -61,39 +40,10 @@ export const asyncRouterMap = [
|
|||||||
{
|
{
|
||||||
path: ":routerPath",
|
path: ":routerPath",
|
||||||
name: 'iframe',
|
name: 'iframe',
|
||||||
component: Myiframe,
|
component: _import('iframe/main','components'),
|
||||||
props: true
|
props: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
}, {
|
}
|
||||||
path: '/wel',
|
].concat(viewRouter)
|
||||||
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: '日志管理' } }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|||||||
@ -34,7 +34,7 @@ const navs = {
|
|||||||
mutations: {
|
mutations: {
|
||||||
ADD_TAG: (state, action) => {
|
ADD_TAG: (state, action) => {
|
||||||
state.tag = 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
|
if (state.tagList.some(a => a.value === action.value)) return
|
||||||
state.tagList.push({
|
state.tagList.push({
|
||||||
label: action.label,
|
label: action.label,
|
||||||
@ -42,17 +42,17 @@ const navs = {
|
|||||||
query: action.query,
|
query: action.query,
|
||||||
})
|
})
|
||||||
state.tagList = setFistTag(state.tagList);
|
state.tagList = setFistTag(state.tagList);
|
||||||
setStore({ name: 'tagList', content: state.tagList })
|
setStore({ name: 'tagList', content: state.tagList,type:'session' })
|
||||||
},
|
},
|
||||||
SET_TAG_CURRENT: (state, tagCurrent) => {
|
SET_TAG_CURRENT: (state, tagCurrent) => {
|
||||||
state.tagCurrent = tagCurrent;
|
state.tagCurrent = tagCurrent;
|
||||||
setStore({ name: 'tagCurrent', content: state.tagCurrent })
|
setStore({ name: 'tagCurrent', content: state.tagCurrent,type:'session' })
|
||||||
},
|
},
|
||||||
SET_TAG: (state, value) => {
|
SET_TAG: (state, value) => {
|
||||||
state.tagList.forEach((ele, num) => {
|
state.tagList.forEach((ele, num) => {
|
||||||
if (ele.value === value) {
|
if (ele.value === value) {
|
||||||
state.tag = state.tagList[num];
|
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.tagList = state.tagList.slice(num, num + 1)
|
||||||
state.tag = state.tagList[0];
|
state.tag = state.tagList[0];
|
||||||
state.tagList[0].close = false;
|
state.tagList[0].close = false;
|
||||||
setStore({ name: 'tag', content: state.tag })
|
setStore({ name: 'tag', content: state.tag,type:'session' })
|
||||||
setStore({ name: 'tagList', content: state.tagList })
|
setStore({ name: 'tagList', content: state.tagList,type:'session' })
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -80,8 +80,8 @@ const navs = {
|
|||||||
if (ele.value === action.value) {
|
if (ele.value === action.value) {
|
||||||
state.tagList.splice(num, 1)
|
state.tagList.splice(num, 1)
|
||||||
state.tagList = setFistTag(state.tagList);
|
state.tagList = setFistTag(state.tagList);
|
||||||
setStore({ name: 'tag', content: state.tag })
|
setStore({ name: 'tag', content: state.tag,type:'session' })
|
||||||
setStore({ name: 'tagList', content: state.tagList })
|
setStore({ name: 'tagList', content: state.tagList,type:'session' })
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user