hzya
/
middleground_code_v2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'huyt' (#5) from huyt into dev 

Reviewed-on: http://192.168.2.237:3000/root/middleground_code_v2/pulls/5
This commit is contained in:
huyt 2024-04-10 09:49:40 +08:00
parent 79afadf02b c3da071985
commit 8e8de806ea
24 changed files with 1337 additions and 585 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

750
src/components/base/baseLayout/index.vue
View File

@ -5,219 +5,142 @@
-->
<!-- style="overflow: auto;" -->
<template>
<div
class="container"
v-loading="loading"
:style="
'backgroundColor:' +
bgColor +
';paddingBottom:' +
paddingBottom +
';height:' +
bodyHight
"
>
<div class="container" v-loading="loading" :style="'backgroundColor:' +
bgColor +
';paddingBottom:' +
paddingBottom +
';height:' +
bodyHight
" ref="baseLayout">
<!-- 标题 -->
<div class="title" flex="cross:center" v-if="showTitle">
<span v-if="!$route.meta.back">{{ title }}</span>
<span @click="goBack" class="back" v-else
><i class="el-icon-arrow-left"></i>返回</span
>
</div>
<!-- <div class="main":style="'backgroundColor:'+ mainColor " > -->
<div
class="main"
:style="{
height: showTitle ? 'calc(100% - 38px)' : '100%',
backgroundColor: mainColor,
}"
>
<!-- 操作按钮 -->
<div
class="pushButton"
flex="cross:centet main:right cross:center"
v-if="operateButtonSwitch"
>
<div class="operationButton" flex="cross:center">
<div v-if="defaultButtonSwitch" style="margin-right: 5px">
<el-button
v-for="(item, index) in defaultButtonList"
:type="item.type ? item.type : 'primary'"
size="small"
class="iconfont buttonList"
:icon="item.icon"
@click="funNewClick(item)"
:key="index"
>
{{ item.menuName }}
</el-button>
</div>
<slot name="btn"></slot>
<el-button
v-for="(item, index) in buttonList"
:type="item.type ? item.type : 'primary'"
size="small"
class="iconfont buttonList"
:icon="item.icon"
@click="funNewClick(item)"
:key="index"
>
<span v-if="item.menuName">{{ item.menuName }}</span>
</el-button>
</div>
<div v-if="fixedButton" style="margin-left: 5px">
<el-tooltip
class="item"
effect="dark"
:content="item.title"
placement="top"
v-for="(item, index) in fixedButtonList"
:key="index"
trigger="hover"
>
<span>
<el-button
size="mini"
:icon="item.icon"
@click.stop="fixedClick(item)"
style="margin: 0"
></el-button>
</span>
</el-tooltip>
</div>
<div flex="cross:center" style="padding: 10px" :style="{
'justify-content':
searchShow || showTitle ? 'space-between' : 'flex-end',
}" v-if="showTitle">
<div class="title" v-if="showTitle">
<span v-if="showTitle">{{ title }}</span>
</div>
<div flex="cross:center" v-if="searchShow">
<i class="queryIcon" :class="queryShow ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
@click="queryShowChange"></i>
<el-dropdown trigger="click">
<span class="el-dropdown-link" style="cursor: pointer; color: #303133; font-size: 14px">
默认条件<i class="el-icon-arrow-down el-icon--right" style="margin-left: 8px"></i>
</span>
<el-dropdown-menu slot="dropdown" style="
padding: 7px 20px;
background-color: #f5f7fa;
border: 1px soild #dcdfe6;
">
<el-dropdown-item command="a" class="requirementList">默认查询
</el-dropdown-item>
<el-dropdown-item v-for="(item, index) in requirementList" :key="item.command" :command="item.command">
<div flex="cross:center main:justify">
<p>{{ item.title }}</p>
<div flex="cross:center ">
<i class="el-icon-edit" @click="edit(item)"></i>
<i class="el-icon-close" @click="del(item)"></i>
</div>
</div>
</el-dropdown-item>
<el-dropdown-item command="d">创建方案</el-dropdown-item>
<el-dropdown-item command="e">高级查询</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- <p>高级查询</p> -->
</div>
<div flex="cross:centet" v-if="buttonList && buttonList.length > 0">
<el-dropdown v-for="(item, index) in buttonList" class="buttonList" :key="index" @command="dropClick">
<el-button :type="item.type ? item.type : 'primary'" size="small" class="iconfont" :icon="item.icon"
@keyup.prevent.native @keydown.enter.prevent.native @click="funNewClick(item)">
{{
item.menuName
}}<i v-if="item.dropList && item.dropList.length > 0" class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<!-- <i class="el-icon-arrow-down el-icon--right"> -->
<el-dropdown-item v-for="(dropItem, dropIndex) in item.dropList" :key="dropIndex" :icon="dropItem.icon"
:command="dropItem.dropFun">{{ dropItem.title }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<!-- <div class="main":style="'backgroundColor:'+ mainColor " > -->
<!-- 搜索 -->
<div class="main" :style="'height:' + mainHight + ';backgroundColor:' + mainColor">
<!-- 搜索 -->
<div
v-show="querySwitch"
style="padding: 5px; background-color: #fff"
flex="cross:center"
ref="serchRefs"
class="searchForTable"
>
<div
v-for="(row, indexRow) in searchList"
class="searchBox"
:key="indexRow"
style="margin-right: 5px"
>
<el-input
v-model="ruleForm[row.columnNameEN]"
clearable
:type="row.type ? row.type : 'text'"
style="width: 100%"
:placeholder="!row.columnNameCN ? '请输入' : row.columnNameCN"
v-if="row.tag === 'elInput'"
min="1"
@keydown.enter.native="handerInputEnter()"
>
<div v-show="queryShow" style="padding: 16px;" flex="cross:center" ref="serchRefs" class="searchContainer">
<div v-for="(row, indexRow) in searchList" class="searchBox" :key="indexRow">
<el-input v-model="ruleForm[row.prop]" clearable :type="row.type ? row.type : 'text'" style="width: 100%"
:placeholder="!row.placeholder ? '请输入' : row.placeholder" v-if="row.tag === 'elInput'" min="1">
</el-input>
<el-date-picker
v-model="ruleForm[row.columnNameEN]"
v-if="row.tag === 'elDatePicker'"
:class="{ one: row.type ? 'date' : row.type }"
style="width: 100%"
:value-format="!row.valueFormat ? 'yyyy-MM-dd' : row.valueFormat"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:type="!row.type ? 'date' : row.type"
:placeholder="!row.columnNameCN ? '请选择' : row.columnNameCN"
>
<el-date-picker v-model="ruleForm[row.prop]" v-if="row.tag === 'elDatePicker'"
:class="{ one: row.type ? 'date' : row.type }" style="width: 100%"
:value-format="!row.valueFormat ? 'yyyy-MM-dd' : row.valueFormat" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" :type="!row.type ? 'date' : row.type"
:placeholder="!row.placeholder ? '请选择' : row.placeholder">
</el-date-picker>
<el-radio-group
v-model="ruleForm[row.columnNameEN]"
v-if="row.tag === 'elRadio'"
>
<el-radio-button
v-for="el in row.options"
:label="el.value"
:key="el.value"
>{{ el.label }}
<el-radio-group v-model="ruleForm[row.prop]" v-if="row.tag === 'elRadio'">
<el-radio-button v-for="el in row.options" :label="el.value" :key="el.value">{{ el.label }}
</el-radio-button>
</el-radio-group>
<div
v-if="row.tag === 'elDialog'"
class="elDialog"
style="cursor: pointer; height: 32px; ine-height: 32px"
>
<p
:style="{
color: ruleForm[row.columnNameEN] ? '#000' : '#c0c4cc',
}"
style="width: 100%; margin: 0"
@click="elDialogClick(row, index, indexRow)"
>
<div v-if="row.tag === 'elDialog'" class="elDialog" style="cursor: pointer; height: 32px; ine-height: 32px">
<p :style="{ color: ruleForm[row.prop] ? '#000' : '#c0c4cc' }" style="width: 100%; margin: 0"
@click="elDialogClick(row, indexRow, indexRow)">
{{
ruleForm[row.columnNameEN]
? ruleForm[row.columnNameEN]
: row.columnNameCN
? row.columnNameCN
ruleForm[row.prop]
? ruleForm[row.prop]
: row.placeholder
? row.placeholder
: "请点击选择"
}}
</p>
<i
class="el-icon-more"
@click="elDialogClick(row, index, indexRow)"
v-if="!row.disabled && !ruleForm[row.columnNameEN]"
></i>
<i
class="el-icon-circle-close"
v-if="!row.disabled && ruleForm[row.columnNameEN]"
@click="elDialogClear(row)"
style="margin-left: 10px"
></i>
<i class="el-icon-more" @click="elDialogClick(row, index, indexRow)"
v-if="!row.disabled && !ruleForm[row.prop]"></i>
<i class="el-icon-circle-close" v-if="!row.disabled && ruleForm[row.prop]" @click="elDialogClear(row)"
style="margin-left: 10px"></i>
</div>
<el-select
v-model="ruleForm[row.columnNameEN]"
filterable
style="width: 100%"
@change="selectChange($event, indexRow)"
:clearable="row.clearable ? row.clearable : true"
:placeholder="!row.columnNameCN ? '请选择' : row.columnNameCN"
v-if="row.tag === 'elSelect'"
>
<el-option
v-for="(el, elIndex) in row.options"
:key="!row.optionValue ? el['value'] : el[row.optionValue]"
:label="!row.optionLabel ? el['label'] : el[row.optionLabel]"
:value="!row.optionValue ? el['value'] : el[row.optionValue]"
>
<el-select v-model="ruleForm[row.prop]" filterable style="width: 100%"
@change="selectChange($event, indexRow, indexRow, row)" :clearable="row.clearable ? row.clearable : true"
:placeholder="!row.placeholder ? '请选择' : row.placeholder" v-if="row.tag === 'elSelect'">
<el-option v-for="(el, elIndex) in row.options" :key="!row.optionValue ? el['value'] : el[row.optionValue]"
:label="!row.optionLabel ? el['label'] : el[row.optionLabel]"
:value="!row.optionValue ? el['value'] : el[row.optionValue]">
</el-option>
</el-select>
</div>
<!-- 搜索按钮 -->
<el-button
type="primary"
size="small"
icon="el-icon-search searchIcon"
@click="search"
title="搜索"
>
搜索
<!-- <el-input
auto-complete="off"
placeholder="验证码"
style="width: calc(100% - 130px)"
v-show="false"
clearable
@keyup.enter.native="testEnter"
>
</el-input> -->
<el-button type="primary" icon="el-icon-search searchIcon" class="searchIcon" v-if="searchBtnShow" @click="search"
@keyup.enter="testEnter" style="margin-left: 15px">
</el-button>
<el-button
v-if="searchList.length > 1"
type="primary"
size="small"
icon="el-icon-refresh-left searchIcon"
class="searchIcon"
@click="refresh"
title="重置"
>重置
<el-button type="primary" icon="el-icon-refresh searchIcon" class="searchIcon" v-if="resetBtnShow"
@click="refresh">
</el-button>
<el-button v-for="item in searchBtnList" :key="item.btnFunction" :type="item.type ? item.type : 'primary'"
size="small" class="searchIcon" :icon="item.icon" style="font-size:14px;" @click="funSearchBtnClick(item)">
{{ item.name }}
</el-button>
<slot name="searchBtn"></slot>
</div>
<div :style="'height:' + getMainHeight()" class="tableHeight">
<slot name="main" :tableHeight="tableHeight"></slot>
<div flex="cross:center" v-if="(searchModel.length != 0 && bottonShow) || nowBtns.length != 0">
<el-button type="primary" icon="el-icon-search" size="small" @click="showSearch" v-if="searchModel.length != 0">检索
</el-button>
<el-button type="primary" icon="el-icon-refresh" :plain="true" size="small" @click="refresh" v-if="false">刷新
</el-button>
</div>
<!-- 主要内容 -->
<slot name="main" :tableHeight="tableHeight"></slot>
<!-- 分页 -->
<base-page
v-if="isPage"
:pageModel.sync="pageModel"
@onPageChange="onPageChange"
></base-page>
<base-page v-if="isPage" :pageModel.sync="pageModel" @onPageChange="onPageChange"></base-page>
</div>
</div>
</template>
@ -225,6 +148,7 @@
<script>
// import heightTransition from '@/common/js/heightTransition'
// import customCascader from "@/components/customCascader";
import elementResizeDetectorMaker from "element-resize-detector";
import { exportDown, wordDown, zipDown } from "@/utils/util.js";
import basePage from "@/components/base/basePage";
import { TokenKeys } from "@/utils/variable";
@ -238,18 +162,59 @@ export default {
// customCascader
},
props: {
// 搜索按钮列表
searchBtnList: {
type: Array,
default: () => {
return [];
},
},
// 是否展示标题
showTitle: {
type: Boolean,
default: true,
},
// 是否显示搜索按钮
searchBtnShow: {
type: Boolean,
default: true,
},
// 是否显示重置按钮
resetBtnShow: {
type: Boolean,
default: true,
},
// main高度
mainHight: {
type: [Number, String, Boolean],
default: "auto",
},
// 标题
title: {
type: String,
default: "",
},
// 标题
fixModel: {
type: String | Array,
default: () => {
return [];
},
},
// 查询列表
requirementList: {
type: Array,
default: () => {
return [];
},
},
// 搜索列表
searchList: {
type: Array,
default: () => {
return [];
},
},
// 背景颜色
bgColor: {
type: String,
@ -268,12 +233,7 @@ export default {
// 高度
bodyHight: {
type: [Number, String],
default: "100%",
},
// main高度
mainHight: {
type: [Number, String, Boolean],
default: "calc(100% - 38px)",
default: "calc(100vh - 88px)",
},
// 搜索配置
searchModel: {
@ -282,50 +242,25 @@ export default {
return [];
},
},
// 搜索配置
nowBtnTab: {
type: Array,
default: () => {
return [];
},
},
// 按钮配置
nowBtns: {
type: Array,
default: () => {
return [];
},
},
// 按钮配置
buttonList: {
type: Array,
default: () => {
return [];
// [{
// icon: 'el-icon-plus',
// menuName: '新增'
// }, {
// icon: 'el-icon-edit',
// menuName: '编辑'
// }, {
// icon: 'el-icon-delete',
// menuName: '删除',
// type: 'danger'
// }, {
// icon: 'el-icon-refresh',
// menuName: '刷新'
// },]
},
},
defaultButtonList: {
type: Array,
default: () => {
return [
{
icon: "el-icon-plus",
menuName: "新增",
},
{
icon: "el-icon-edit",
menuName: "编辑",
},
{
icon: "el-icon-delete",
menuName: "删除",
type: "danger",
},
// {
// icon: 'el-icon-refresh',
// menuName: '刷新'
// },
];
},
},
// 是否展示分页
@ -333,6 +268,24 @@ export default {
type: Boolean,
default: false,
},
// 搜索按钮显示
bottonShow: {
type: Boolean,
default: true,
},
// 默认条件隐藏显示
searchShow: {
type: Boolean,
default: false,
},
queryShow: {
type: Boolean,
default: true,
},
enterClickType: {
type: Boolean,
default: true,
},
// 导出接口地址
exportUrl: {
default: "",
@ -341,61 +294,22 @@ export default {
importUrl: {
default: "",
},
//多选
selectTable: {
default: "",
},
//单选
only: {
default: "",
},
// 左侧固定按钮
fixedButton: {
type: Boolean,
default: false,
},
// 是否显示查询条件
querySwitch: {
type: Boolean,
default: false,
},
// 搜索列表
searchList: {
type: Array,
default: () => {
return [];
},
},
// 操作按钮
operateButtonSwitch: {
type: Boolean,
default: true,
},
// 操作按钮
defaultButtonSwitch: {
type: Boolean,
default: true,
},
// 右侧按钮
fixedButtonList: {
type: Array,
default: () => {
return [
{
icon: "el-icon-s-operation",
title: "筛选",
},
{
icon: "el-icon-printer",
title: "打印",
},
{
icon: "el-icon-folder",
title: "导出",
},
];
},
},
},
watch: {},
data() {
return {
// 表单数据
ruleForm: {},
// queryShow: true,
onlyUrl: "",
clientHeight: "",
// 上传请求头
@ -409,47 +323,26 @@ export default {
// 分页数据
pageModel: {
total: 0,
page: 1,
limit: 20,
pageIndex: 1,
pageSize: 10,
},
// 清除状态
clearState: 0,
// 操作按钮
tableHeight: "calc(100vh - 218px)",
loading: false,
// fixedButtonList: [{
// icon: 'el-icon-s-operation',
// title: '筛选'
// },
// {
// icon: 'el-icon-printer',
// title: '打印'
// },
// {
// icon: 'el-icon-folder',
// title: '导出'
// }
// ],
// defaultButtonList: [
// {
// icon: 'el-icon-plus',
// menuName: '新增'
// }, {
// icon: 'el-icon-edit',
// menuName: '编辑'
// }, {
// icon: 'el-icon-delete',
// menuName: '删除',
// type: 'danger'
// }, {
// icon: 'el-icon-refresh',
// menuName: '刷新'
// },
// ],
tableHeight: "100%",
};
},
created() {},
created() {
},
mounted() {
// this.getTableHight()
this.watchSize();
document.addEventListener("keydown", (e) => {
let key = window.event.keyCode;
if (key == 13) {
this.testEnter();
}
});
// window.onresize = () => {
// this.clientHeight = document.documentElement.clientHeight;
// },
@ -461,40 +354,66 @@ export default {
// }
},
methods: {
getTableHight() {
let height = "100%";
let heightReduce = 0;
if (this.operateButtonSwitch) {
heightReduce = heightReduce + 53;
watchSize() {
const _this = this;
var erd = elementResizeDetectorMaker();
if (!this.queryShow) {
_this.getTableHight();
} else {
erd.listenTo(this.$refs.serchRefs, (element) => {
// 这里的this.$refs.fan指定要监听的元素对象，对应的是<div ref=“fan”></div>
var height = element.offsetHeight;
_this.$nextTick(() => {
_this.getTableHight(height);
});
});
}
if (this.querySwitch) {
heightReduce = heightReduce + 47;
}
if (this.isPage) {
heightReduce = heightReduce + 53;
}
height = "calc(100% - " + heightReduce + "px)";
this.tableHeight = height;
},
getMainHeight() {
// operateButtonSwitch 操作开关 querySwitch查询高 度
let height = "100%";
let heightReduce = 0;
if (this.operateButtonSwitch) {
heightReduce = heightReduce + 56;
}
if (this.querySwitch) {
heightReduce = heightReduce + 33;
}
getTableHight(height = 0) {
// 导航栏+标签栏 102 按钮列表64 查询条件64 分页32 102 + 64 + 32
let reduceHight = 0;
let windowHeight = this.$refs.baseLayout.offsetHeight;
if (this.isPage) {
heightReduce = heightReduce + 56;
reduceHight = reduceHight + 52;
}
height = "calc(100% - " + heightReduce + "px)";
// console.log(height, "height")
return height;
if (this.queryShow) {
let searchHeight = this.$refs.serchRefs.offsetHeight;
reduceHight = reduceHight + searchHeight;
}
if (this.buttonList && this.buttonList.length > 0) {
reduceHight = reduceHight + 68;
}
this.tableHeight = windowHeight - reduceHight + "px";
},
//参数propLabel ， 值value
getField(propLabel, value) {
this.$set(this.ruleForm, propLabel, value);
},
setQueryShow(type) {
this.queryShow = type;
},
elDialogClick(row, index, indexRow) {
if (row.disabled) {
return;
}
this.$emit("elDialogClick", row, index);
},
elDialogClear(row) {
this.resetField(row.prop);
this.$emit("elDialogClear", row);
},
// 重置表单字段
resetField(field) {
if (this.ruleForm[field]) {
this.$set(this.ruleForm, field, "");
}
},
edit(item) {
},
del(item) {
},
pageClear() {
this.pageModel.page = 1;
this.pageModel.pageIndex = 1;
},
// importUpload() {
// const timestamp = new Date().getTime() + '';
@ -520,6 +439,7 @@ export default {
handleError() {
this.$vmNews("上传失败", "error");
},
// 设置按钮
// 自定义级联选择器返回值
getCascader(value, field) {
this.$set(this.model, field, value);
@ -531,9 +451,9 @@ export default {
setPageNum(pageNum) {
this.$set(this.pageModel, "page", pageNum);
},
//参数propLabel ， 值value
getField(propLabel, value) {
this.$set(this.ruleForm, propLabel, value);
// 搜索按钮点击事件
funSearchBtnClick(item) {
this.$emit("onFuncSearchBtn", item);
},
// 返回
goBack() {
@ -541,24 +461,30 @@ export default {
},
// 按钮点击事件
funNewClick(item) {
if (item.menuName == "刷新" || item.btnFunction == "Refresh") {
if (item.menuName == "刷新") {
this.$tab.refreshPage(this.$route);
} else {
this.$emit("onFuncBtn", item);
}
},
// 固定按钮点击事件
fixedClick(item) {
this.$emit("onFixedBtn", item);
dropClick(item) {
this.$emit("dropClick", item);
},
// 查询隐藏展示
queryShowChange() {
this.queryShow = !this.queryShow;
this.$nextTick(() => {
this.watchSize();
});
this.$emit("queryShowChange", this.queryShow);
},
// 操作按钮点击事件
funcClick(btnItem) {
// console.log(btnItem,"btnItem")
this.$emit("onFuncBtn", btnItem);
},
// 导出函数
eventExport(params) {
// console.log(params, 'params')
// console.log(this.onlyUrl ? this.onlyUrl : this.exportUrl, 'this.onlyUrl?this.onlyUrl:this.exportUrl')
// return fetch.get(this.onlyUrl ? this.onlyUrl : this.exportUrl, {
// params,
// responseType: 'blob'
@ -572,22 +498,22 @@ export default {
queryEvent(state) {
this.$emit("onQuery", this.mergeParam(true));
},
// 回车搜索
handerInputEnter() {
this.$emit("handerInputEnter", this.ruleForm);
},
// 条件查询-下拉框
selectChange(event, index, indexItem) {
if (typeof event == "number" && event < 3) {
if (Number(event) == 2) {
event = 0;
} else {
event = event - 1;
}
}
selectChange(event, index, indexItem, row) {
// if (typeof event == "number" && event < 3) {
// if (Number(event) == 2) {
// event = 0;
// } else {
// event = event - 1;
// }
// }
if (event !== "" && event != undefined) {
this.$emit("onElSelect", event, index, indexItem, this.model);
this.$emit("onElSelect", event, index, indexItem, this.model, row);
}
},
// 刷新
refresh() {
},
// 页数或每页条数更改时触发
onPageChange() {
@ -596,11 +522,11 @@ export default {
// 合并参数
mergeParam(state) {
if (state) {
this.pageModel.page = 1;
this.pageModel.pageIndex = 1;
}
let page = {
page: this.pageModel.page,
limit: this.pageModel.limit,
pageIndex: this.pageModel.pageIndex,
pageSize: this.pageModel.pageSize,
};
for (let i in this.model) {
if (!this.model[i]) {
@ -614,41 +540,58 @@ export default {
showSearch() {
this.isSearch = !this.isSearch;
},
// 查询函数
search() {
this.$emit("search", this.ruleForm);
},
// 重置函数
refresh() {
this.ruleForm = Object.assign({}, "");
this.search();
this.$emit("onQuery", this.mergeParam(true));
},
testEnter() {
if (this.enterClickType) {
this.search();
}
},
},
};
</script>
<style scoped lang='scss'>
.pushButton {
/* margin: 12px 10px 10px 10px; */
padding: 10px;
p {
margin: 0;
}
::v-deep .iconfont {
font-size: 12px;
text-align: center;
}
::v-deep .el-tooltip {
padding: 0 3px;
.queryIcon {
font-size: 16px;
color: #606266;
margin-right: 16px;
cursor: pointer;
}
::v-deep .el-button--mini {
padding: 6px 8px;
margin: 5px;
.searchIcon {
font-size: 18px;
/* padding: 0 12px; */
height: 32px;
/* line-height: 32px; */
margin-left: 8px;
display: flex;
justify-content: center;
align-items: center;
}
.requirementList {
width: 160px;
height: 30px;
line-height: 30px;
}
.container {
width: 100%;
height: 100%;
overflow: auto;
.title {
/* @include boxBase(100%, 48px, $base-color); */
@ -657,13 +600,16 @@ export default {
padding: 12px;
}
.buttonList + .buttonList {
margin-left: 5px;
.buttonList {}
.buttonList+.buttonList {
margin-left: 8px;
}
.main {
/* height: auto !important; */
overflow-y: auto;
flex-wrap: wrap;
/* padding:0 12px; */
.search {
@ -672,6 +618,10 @@ export default {
border: 1px solid #d8d8d8;
padding: 12px;
transition: all 0.2s ease-in-out;
.row {
/* @include fontBase(14px, #333) */
}
}
.hide {
@ -702,4 +652,32 @@ export default {
cursor: pointer;
}
}
.elDialog {
display: flex;
/* width: calc(100% - 14px);1 */
align-items: center;
justify-content: space-between;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 0 15px;
cursor: pointer;
background-color: white;
i {
color: #c0c4cc;
}
}
.searchBox {
width: 200px;
}
.searchBox+.searchBox {
margin-left: 8px;
}
::v-deep.el-radio-button--medium .el-radio-button__inner {
padding: 8px !important;
}
</style>

705
src/components/base/baseNewLayout/index.vue Normal file
View File

@ -0,0 +1,705 @@
<!--
* @name: 页面基本结构组件
* @author: zhangpengcheng
* @date: 2022-08-23
-->
<!-- style="overflow: auto;" -->
<template>
<div
class="container"
v-loading="loading"
:style="
'backgroundColor:' +
bgColor +
';paddingBottom:' +
paddingBottom +
';height:' +
bodyHight
"
>
<!-- 标题 -->
<div class="title" flex="cross:center" v-if="showTitle">
<span v-if="!$route.meta.back">{{ title }}</span>
<span @click="goBack" class="back" v-else
><i class="el-icon-arrow-left"></i>返回</span
>
</div>
<!-- <div class="main":style="'backgroundColor:'+ mainColor " > -->
<div
class="main"
:style="{
height: showTitle ? 'calc(100% - 38px)' : '100%',
backgroundColor: mainColor,
}"
>
<!-- 操作按钮 -->
<div
class="pushButton"
flex="cross:centet main:right cross:center"
v-if="operateButtonSwitch"
>
<div class="operationButton" flex="cross:center">
<div v-if="defaultButtonSwitch" style="margin-right: 5px">
<el-button
v-for="(item, index) in defaultButtonList"
:type="item.type ? item.type : 'primary'"
size="small"
class="iconfont buttonList"
:icon="item.icon"
@click="funNewClick(item)"
:key="index"
>
{{ item.menuName }}
</el-button>
</div>
<slot name="btn"></slot>
<el-button
v-for="(item, index) in buttonList"
:type="item.type ? item.type : 'primary'"
size="small"
class="iconfont buttonList"
:icon="item.icon"
@click="funNewClick(item)"
:key="index"
>
<span v-if="item.menuName">{{ item.menuName }}</span>
</el-button>
</div>
<div v-if="fixedButton" style="margin-left: 5px">
<el-tooltip
class="item"
effect="dark"
:content="item.title"
placement="top"
v-for="(item, index) in fixedButtonList"
:key="index"
trigger="hover"
>
<span>
<el-button
size="mini"
:icon="item.icon"
@click.stop="fixedClick(item)"
style="margin: 0"
></el-button>
</span>
</el-tooltip>
</div>
</div>
<!-- 搜索 -->
<div
v-show="querySwitch"
style="padding: 5px; background-color: #fff"
flex="cross:center"
ref="serchRefs"
class="searchForTable"
>
<div
v-for="(row, indexRow) in searchList"
class="searchBox"
:key="indexRow"
style="margin-right: 5px"
>
<el-input
v-model="ruleForm[row.columnNameEN]"
clearable
:type="row.type ? row.type : 'text'"
style="width: 100%"
:placeholder="!row.columnNameCN ? '请输入' : row.columnNameCN"
v-if="row.tag === 'elInput'"
min="1"
@keydown.enter.native="handerInputEnter()"
>
</el-input>
<el-date-picker
v-model="ruleForm[row.columnNameEN]"
v-if="row.tag === 'elDatePicker'"
:class="{ one: row.type ? 'date' : row.type }"
style="width: 100%"
:value-format="!row.valueFormat ? 'yyyy-MM-dd' : row.valueFormat"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:type="!row.type ? 'date' : row.type"
:placeholder="!row.columnNameCN ? '请选择' : row.columnNameCN"
>
</el-date-picker>
<el-radio-group
v-model="ruleForm[row.columnNameEN]"
v-if="row.tag === 'elRadio'"
>
<el-radio-button
v-for="el in row.options"
:label="el.value"
:key="el.value"
>{{ el.label }}
</el-radio-button>
</el-radio-group>
<div
v-if="row.tag === 'elDialog'"
class="elDialog"
style="cursor: pointer; height: 32px; ine-height: 32px"
>
<p
:style="{
color: ruleForm[row.columnNameEN] ? '#000' : '#c0c4cc',
}"
style="width: 100%; margin: 0"
@click="elDialogClick(row, index, indexRow)"
>
{{
ruleForm[row.columnNameEN]
? ruleForm[row.columnNameEN]
: row.columnNameCN
? row.columnNameCN
: "请点击选择"
}}
</p>
<i
class="el-icon-more"
@click="elDialogClick(row, index, indexRow)"
v-if="!row.disabled && !ruleForm[row.columnNameEN]"
></i>
<i
class="el-icon-circle-close"
v-if="!row.disabled && ruleForm[row.columnNameEN]"
@click="elDialogClear(row)"
style="margin-left: 10px"
></i>
</div>
<el-select
v-model="ruleForm[row.columnNameEN]"
filterable
style="width: 100%"
@change="selectChange($event, indexRow)"
:clearable="row.clearable ? row.clearable : true"
:placeholder="!row.columnNameCN ? '请选择' : row.columnNameCN"
v-if="row.tag === 'elSelect'"
>
<el-option
v-for="(el, elIndex) in row.options"
:key="!row.optionValue ? el['value'] : el[row.optionValue]"
:label="!row.optionLabel ? el['label'] : el[row.optionLabel]"
:value="!row.optionValue ? el['value'] : el[row.optionValue]"
>
</el-option>
</el-select>
</div>
<!-- 搜索按钮 -->
<el-button
type="primary"
size="small"
icon="el-icon-search searchIcon"
@click="search"
title="搜索"
>
搜索
</el-button>
<el-button
v-if="searchList.length > 1"
type="primary"
size="small"
icon="el-icon-refresh-left searchIcon"
class="searchIcon"
@click="refresh"
title="重置"
>重置
</el-button>
<slot name="searchBtn"></slot>
</div>
<div :style="'height:' + getMainHeight()" class="tableHeight">
<slot name="main" :tableHeight="tableHeight"></slot>
</div>
<!-- 主要内容 -->
<!-- 分页 -->
<base-page
v-if="isPage"
:pageModel.sync="pageModel"
@onPageChange="onPageChange"
></base-page>
</div>
</div>
</template>
<script>
// import heightTransition from '@/common/js/heightTransition'
// import customCascader from "@/components/customCascader";
import { exportDown, wordDown, zipDown } from "@/utils/util.js";
import basePage from "@/components/base/basePage";
import { TokenKeys } from "@/utils/variable";
// import fetch from '../../api/request'
import { getApiSign } from "@/utils/apiSign";
// import domainsFuc from '@/api/domains.js'
export default {
components: {
// heightTransition,
basePage,
// customCascader
},
props: {
// 是否展示标题
showTitle: {
type: Boolean,
default: true,
},
// 标题
title: {
type: String,
default: "",
},
// 背景颜色
bgColor: {
type: String,
default: "#ffffff",
},
// 背景颜色
mainColor: {
type: String,
default: "",
},
// 底部padding
paddingBottom: {
type: String,
// default: '68px'
},
// 高度
bodyHight: {
type: [Number, String],
default: "100%",
},
// main高度
mainHight: {
type: [Number, String, Boolean],
default: "calc(100% - 38px)",
},
// 搜索配置
searchModel: {
type: Array,
default: () => {
return [];
},
},
// 按钮配置
buttonList: {
type: Array,
default: () => {
return [];
// [{
// icon: 'el-icon-plus',
// menuName: '新增'
// }, {
// icon: 'el-icon-edit',
// menuName: '编辑'
// }, {
// icon: 'el-icon-delete',
// menuName: '删除',
// type: 'danger'
// }, {
// icon: 'el-icon-refresh',
// menuName: '刷新'
// },]
},
},
defaultButtonList: {
type: Array,
default: () => {
return [
{
icon: "el-icon-plus",
menuName: "新增",
},
{
icon: "el-icon-edit",
menuName: "编辑",
},
{
icon: "el-icon-delete",
menuName: "删除",
type: "danger",
},
// {
// icon: 'el-icon-refresh',
// menuName: '刷新'
// },
];
},
},
// 是否展示分页
isPage: {
type: Boolean,
default: false,
},
// 导出接口地址
exportUrl: {
default: "",
},
// 导入接口地址
importUrl: {
default: "",
},
//单选
only: {
default: "",
},
// 左侧固定按钮
fixedButton: {
type: Boolean,
default: false,
},
// 是否显示查询条件
querySwitch: {
type: Boolean,
default: false,
},
// 搜索列表
searchList: {
type: Array,
default: () => {
return [];
},
},
// 操作按钮
operateButtonSwitch: {
type: Boolean,
default: true,
},
// 操作按钮
defaultButtonSwitch: {
type: Boolean,
default: true,
},
// 右侧按钮
fixedButtonList: {
type: Array,
default: () => {
return [
{
icon: "el-icon-s-operation",
title: "筛选",
},
{
icon: "el-icon-printer",
title: "打印",
},
{
icon: "el-icon-folder",
title: "导出",
},
];
},
},
},
data() {
return {
ruleForm: {},
onlyUrl: "",
clientHeight: "",
// 上传请求头
uploadHeaders: {},
// uurl: domainsFuc().domain,
uurl: "http://www.wldxt.cn:8089/taizhou/daxitong/crm/",
// 参数
model: {},
// 收起/展开搜索
isSearch: false,
// 分页数据
pageModel: {
total: 0,
page: 1,
limit: 20,
},
// 清除状态
clearState: 0,
loading: false,
// fixedButtonList: [{
// icon: 'el-icon-s-operation',
// title: '筛选'
// },
// {
// icon: 'el-icon-printer',
// title: '打印'
// },
// {
// icon: 'el-icon-folder',
// title: '导出'
// }
// ],
// defaultButtonList: [
// {
// icon: 'el-icon-plus',
// menuName: '新增'
// }, {
// icon: 'el-icon-edit',
// menuName: '编辑'
// }, {
// icon: 'el-icon-delete',
// menuName: '删除',
// type: 'danger'
// }, {
// icon: 'el-icon-refresh',
// menuName: '刷新'
// },
// ],
tableHeight: "100%",
};
},
created() {},
mounted() {
// this.getTableHight()
// window.onresize = () => {
// this.clientHeight = document.documentElement.clientHeight;
// },
// this.importUpload(); //初始化上传
},
computed: {
// menuJson() {
// return JSON.parse(localStorage.getItem(TokenKeys.MENU_JSON))
// }
},
methods: {
getTableHight() {
let height = "100%";
let heightReduce = 0;
if (this.operateButtonSwitch) {
heightReduce = heightReduce + 53;
}
if (this.querySwitch) {
heightReduce = heightReduce + 47;
}
if (this.isPage) {
heightReduce = heightReduce + 53;
}
height = "calc(100% - " + heightReduce + "px)";
this.tableHeight = height;
},
getMainHeight() {
// operateButtonSwitch 操作开关 querySwitch查询高 度
let height = "100%";
let heightReduce = 0;
if (this.operateButtonSwitch) {
heightReduce = heightReduce + 56;
}
if (this.querySwitch) {
heightReduce = heightReduce + 33;
}
if (this.isPage) {
heightReduce = heightReduce + 56;
}
height = "calc(100% - " + heightReduce + "px)";
// console.log(height, "height")
return height;
},
pageClear() {
this.pageModel.page = 1;
},
// importUpload() {
// const timestamp = new Date().getTime() + '';
// const sign = getApiSign(timestamp);
// this.uploadHeaders['timestamp'] = timestamp;
// this.uploadHeaders['appKey'] = TokenKeys.APP_KEY;
// this.uploadHeaders['sign'] = sign;
// this.uploadHeaders[TokenKeys.ACCESS_TOKEN] = localStorage.getItem(TokenKeys.ACCESS_TOKEN);
// },
handleSuccess(res) {
const { code, msg, data } = res;
if (code && code == 10000) {
this.loading = false;
this.$vmNews("上传成功", "success");
} else {
this.$vmNews(msg);
this.loading = false;
}
},
handleProgress() {
this.loading = true;
},
handleError() {
this.$vmNews("上传失败", "error");
},
// 自定义级联选择器返回值
getCascader(value, field) {
this.$set(this.model, field, value);
},
// 设置分页total值
setPageTotal(total) {
this.$set(this.pageModel, "total", total);
},
setPageNum(pageNum) {
this.$set(this.pageModel, "page", pageNum);
},
//参数propLabel ， 值value
getField(propLabel, value) {
this.$set(this.ruleForm, propLabel, value);
},
// 返回
goBack() {
this.$router.go(-1);
},
// 按钮点击事件
funNewClick(item) {
if (item.menuName == "刷新" || item.btnFunction == "Refresh") {
this.$tab.refreshPage(this.$route);
} else {
this.$emit("onFuncBtn", item);
}
},
// 固定按钮点击事件
fixedClick(item) {
this.$emit("onFixedBtn", item);
},
// 操作按钮点击事件
funcClick(btnItem) {
this.$emit("onFuncBtn", btnItem);
},
// 导出函数
eventExport(params) {
// console.log(params, 'params')
// console.log(this.onlyUrl ? this.onlyUrl : this.exportUrl, 'this.onlyUrl?this.onlyUrl:this.exportUrl')
// return fetch.get(this.onlyUrl ? this.onlyUrl : this.exportUrl, {
// params,
// responseType: 'blob'
// })
},
// 设置某个参数的值
setSomeParam(field, value = null) {
this.$set(this.model, field, value);
},
// 查询、重置事件
queryEvent(state) {
this.$emit("onQuery", this.mergeParam(true));
},
// 回车搜索
handerInputEnter() {
this.$emit("handerInputEnter", this.ruleForm);
},
// 条件查询-下拉框
selectChange(event, index, indexItem) {
if (typeof event == "number" && event < 3) {
if (Number(event) == 2) {
event = 0;
} else {
event = event - 1;
}
}
if (event !== "" && event != undefined) {
this.$emit("onElSelect", event, index, indexItem, this.model);
}
},
// 页数或每页条数更改时触发
onPageChange() {
this.$emit("pageChange", this.mergeParam());
},
// 合并参数
mergeParam(state) {
if (state) {
this.pageModel.page = 1;
}
let page = {
page: this.pageModel.page,
limit: this.pageModel.limit,
};
for (let i in this.model) {
if (!this.model[i]) {
this.model[i] = null;
}
}
let search = Object.assign({}, page, this.model);
return Object.assign({}, page, this.model);
},
// 收起展开分页
showSearch() {
this.isSearch = !this.isSearch;
},
// 查询函数
search() {
this.$emit("search", this.ruleForm);
},
// 重置函数
refresh() {
this.ruleForm = Object.assign({}, "");
this.search();
},
},
};
</script>
<style scoped lang='scss'>
.pushButton {
/* margin: 12px 10px 10px 10px; */
padding: 10px;
}
::v-deep .iconfont {
font-size: 12px;
text-align: center;
}
::v-deep .el-tooltip {
padding: 0 3px;
}
::v-deep .el-button--mini {
padding: 6px 8px;
margin: 5px;
}
.container {
width: 100%;
height: 100%;
.title {
/* @include boxBase(100%, 48px, $base-color); */
/* @include fontBase(16px, #fff); */
font-size: 14px;
padding: 12px;
}
.buttonList + .buttonList {
margin-left: 5px;
}
.main {
/* height: auto !important; */
overflow-y: auto;
/* padding:0 12px; */
.search {
height: auto;
background: #f5f5f5;
border: 1px solid #d8d8d8;
padding: 12px;
transition: all 0.2s ease-in-out;
}
.hide {
height: 0;
}
}
.main::-webkit-scrollbar {
width: 5px;
/* background-color: #D8D8D8; */
}
.main::-webkit-scrollbar-thumb {
border-radius: 5px;
width: 5px;
background: #b4bccc;
}
.w-100 {
width: 100%;
}
.mb-12 {
margin-bottom: 12px;
}
.back {
cursor: pointer;
}
}
</style>

2
src/layout/components/AppMain.vue
View File

@ -35,7 +35,7 @@ export default {
<style lang="scss" scoped>
.openSider {
width: calc(100% - 136px) !important;
width: calc(100% - 136px);
margin-left: 136px;
}
.app-main {

13
src/layout/components/Navbar.vue
View File

@ -10,15 +10,16 @@
<div flex>
<tags-view />
<!-- -->
<!-- <router-link :to="item.path" class="indexRouter" :style="{-->
<!-- color: activePage == index ? '#1478f6' : ''}" v-for="(item,index) in lagerScreenMenuData" :key="index">-->
<!-- <div @click="handlerClick(item,index)" flex>-->
<!-- color: activePage == index ? '#1478f6' : ''}" v-for="(item,index) in lagerScreenMenuData" :key="index"-->
<!-- >-->
<!-- <div @click="handlerClick(item,index)" flex>-->
<!-- <i :class="item.meta.menuIcon"></i>-->
<!-- <p>{{item.meta.title}}</p>-->
<!-- </div>-->
<!-- <p>{{ item.meta.title }}</p>-->
<!-- </div>-->
<!-- </router-link>-->
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />-->
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>-->
</div>
<el-dropdown class="avatar-container right-menu-item hover-effect" style="display:flex;">
<!-- trigger="click" -->

4
src/layout/components/TagsView/index.vue
View File

@ -267,8 +267,8 @@ export default {
border-radius: 4px;
// border-bottom: 1px solid #d8dce5;
// box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
position: fixed;
top: 22px;
//position: fixed;
//top: 22px;
// margin-top: 60px;
z-index: 1000;

322
src/layout/index.vue
View File

@ -1,17 +1,30 @@
<template>
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
<div
:class="classObj"
class="app-wrapper"
:style="{ '--current-color': theme }"
>
<div
:class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
class="main-container"
>
<div :class="{ 'fixed-header': fixedHeader }">
<!-- <tags-view v-if="needTagsView" />-->
<navbar />
<sidebar ref="sidebar" class="sidebar-container" v-if="true" :style="{
<sidebar
ref="sidebar"
class="sidebar-container"
v-if="true"
:style="{
width: sidebar.opened
? '0px'
: childrenType
? childrenWidth
: '128px',
}" @openChildren="openChildren" @changeWidth="changeWidth" />
}"
@openChildren="openChildren"
@changeWidth="changeWidth"
/>
<!-- <tags-view v-if="needTagsView" /> -->
</div>
<app-main />
<right-panel>
@ -22,182 +35,165 @@
</template>
<script>
import router from "@/router";
import RightPanel from "@/components/RightPanel";
import notFound from "@/views/error/404";
import {
import router from "@/router";
import RightPanel from "@/components/RightPanel";
import notFound from "@/views/error/404";
import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components";
import ResizeMixin from "./mixin/ResizeHandler";
import { mapState } from "vuex";
import variables from "@/assets/styles/variables.scss";
export default {
name: "Layout",
components: {
AppMain,
Navbar,
RightPanel,
Settings,
Sidebar,
TagsView
} from "./components";
import ResizeMixin from "./mixin/ResizeHandler";
import {
mapState
} from "vuex";
import variables from "@/assets/styles/variables.scss";
export default {
name: "Layout",
components: {
AppMain,
Navbar,
RightPanel,
Settings,
Sidebar,
TagsView,
notFound,
},
mixins: [ResizeMixin],
computed: {
...mapState({
theme: (state) => state.settings.theme,
sideTheme: (state) => state.settings.sideTheme,
sidebar: (state) => state.app.sidebar,
device: (state) => state.app.device,
notFound: (state) => state.app.notFound,
conciseMenu: (state) => state.settings.conciseMenu,
needTagsView: (state) => state.settings.tagsView,
fixedHeader: (state) => state.settings.fixedHeader,
}),
classObj() {
return {
// hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === "mobile",
};
},
variables() {
return variables;
},
},
data() {
TagsView,
notFound,
},
mixins: [ResizeMixin],
computed: {
...mapState({
theme: (state) => state.settings.theme,
sideTheme: (state) => state.settings.sideTheme,
sidebar: (state) => state.app.sidebar,
device: (state) => state.app.device,
notFound: (state) => state.app.notFound,
conciseMenu: (state) => state.settings.conciseMenu,
needTagsView: (state) => state.settings.tagsView,
fixedHeader: (state) => state.settings.fixedHeader,
}),
classObj() {
return {
childrenType: false,
childrenWidth: "1200px",
// hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === "mobile",
};
},
watch: {
sidebar: {
handler: function (val, oldVal) {
console.log(val,this.childrenType);
if (!val.opened && this.childrenType) {
this.$nextTick(() => {
let newWidth = this.$refs.sidebar.childrenWidth + 128 + "px";
this.childrenWidth = newWidth;
});
}
},
deep: true,
},
variables() {
return variables;
},
mounted() {
this.getMenu();
this.childrenWidth = this.$refs.sidebar.childrenWidth;
// console.log(this.childrenWidth )
},
data() {
return {
childrenType: false,
childrenWidth: "1200px",
};
},
watch: {
sidebar: {
handler: function (val, oldVal) {
if (!val.opened && this.childrenType) {
this.$nextTick(() => {
let newWidth = this.$refs.sidebar.childrenWidth + 128 + "px";
this.childrenWidth = newWidth;
});
}
},
deep: true,
},
methods: {
openChildren(val) {
let newWidth = this.$refs.sidebar.childrenWidth + 128 + "px";
this.childrenWidth = newWidth;
this.childrenType = val;
},
changeWidth(width) {
this.childrenWidth = width + 128 + "px";
},
handleClickOutside() {
this.$store.dispatch("app/closeSideBar", {
withoutAnimation: false,
});
},
getMenu() {
//动态路由注释
// this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
// // console.log(accessRoutes)
// // 根据roles权限生成可访问的路由表
// for (let i = 0, length = accessRoutes.length; i < length; i += 1) {
// const element = accessRoutes[i];
// router.addRoutes(accessRoutes); // 动态添加可访问路由表
// }
// localStorage.setItem("routeList", JSON.stringify(accessRoutes));
// });
},
},
mounted() {
this.getMenu();
this.childrenWidth = this.$refs.sidebar.childrenWidth;
// console.log(this.childrenWidth )
},
methods: {
openChildren(val) {
let newWidth = this.$refs.sidebar.childrenWidth + 128 + "px";
this.childrenWidth = newWidth;
this.childrenType = val;
},
};
changeWidth(width) {
this.childrenWidth = width + 128 + "px";
},
handleClickOutside() {
this.$store.dispatch("app/closeSideBar", {
withoutAnimation: false,
});
},
getMenu() {
//动态路由注释
// this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
// // console.log(accessRoutes)
// // 根据roles权限生成可访问的路由表
// for (let i = 0, length = accessRoutes.length; i < length; i += 1) {
// const element = accessRoutes[i];
// router.addRoutes(accessRoutes); // 动态添加可访问路由表
// }
// localStorage.setItem("routeList", JSON.stringify(accessRoutes));
// });
},
},
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
padding: 0 8px;
background: #fafafa;
&.mobile.openSidebar {
position: fixed;
top: 0;
}
}
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
.defaultMuneStyle {
width: calc(100% - 160px);
margin-left: 160px;
height: 100%;
// padding:10px;
}
.conciseMenuStyle {
width: calc(100% - 70px);
margin-left: 70px;
padding: 10px;
height: 100%;
}
.fixed-header {
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
padding: 0 8px;
background: #fafafa;
&.mobile.openSidebar {
position: fixed;
top: 0;
right: 0;
z-index: 9;
width: calc(100% - #{$base-sidebar-width});
transition: width 0.28s;
}
}
// .hideSidebar .fixed-header {
// width: calc(100% - 54px);
// }
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
.defaultMuneStyle {
width: calc(100% - 160px);
margin-left: 160px;
height: 100%;
// padding:10px;
}
.conciseMenuStyle {
width: calc(100% - 70px);
margin-left: 70px;
padding: 10px;
height: 100%;
}
.fixed-header {
position: fixed;
top: 0;
right: 0;
z-index: 9;
width: calc(100% - #{$base-sidebar-width});
transition: width 0.28s;
}
.sidebarHide .fixed-header {
width: 100%;
}
// .hideSidebar .fixed-header {
// width: calc(100% - 54px);
// }
.mobile .fixed-header {
width: 100%;
}
.webConcat {
position: fixed;
top: 50px;
height: calc(100vh - 50px);
width: 100%;
}
.sidebarHide .fixed-header {
width: 100%;
}
.mobile .fixed-header {
width: 100%;
}
.webConcat {
position: fixed;
top: 50px;
height: calc(100vh - 50px);
width: 100%;
}
</style>

10
src/views/applicationList/applicationAdd.vue
View File

@ -20,7 +20,7 @@
<el-upload class="avatar-uploader" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-progress="handleProgress" :before-upload="beforeUpload" list-type="picture" :limit="1" :disabled="lookFlag" :on-success="handleAvatarSuccess" :show-file-list="false">
<div class="line">
<div class="left">
<img v-if="imgUrl" :src="imgUrl" class="avatar">
<img v-if="imgUrl" :src="imgUrl" class="avatar" @error="handleImageError">
<!-- <el-image style="width: 64px; height: 64px" :src="iconBase64" fit="cover" alt="点击上传">
<template v-slot:error>
<div style="line-height: 64px; font-size: 12px">
@ -76,6 +76,9 @@ export default {
};
},
methods: {
handleImageError(row) {
this.imgUrl = require('./images/1.png')
},
// 文件上传相关时间
handleProgress(file, fileList) {
this.loading = true
@ -306,9 +309,12 @@ export default {
border: 1px dashed #999999;
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
> img {
width: 100%;
height: 100%;
// height: 100%;
}
}
.right {

10
src/views/applicationList/index.vue
View File

@ -48,7 +48,7 @@
<img src="./images/5.png" alt="" />
</template> -->
<template>
<img :src="row.imgUrl" alt="" />
<img :src="row.imgUrl" alt="" @error="handleImageError(row)"/>
</template>
</div>
<div class="nameInfo">
@ -136,6 +136,9 @@ export default {
};
},
methods: {
handleImageError(row) {
row.imgUrl = require('./images/1.png')
},
// 状态改变
async appStatusChange(val, row) {
const res = await getApiModuleApi({
@ -322,10 +325,13 @@ export default {
flex: 0.25;
width: 29px;
height: 29px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 100%;
height: 100%;
// height: 100%;
}
}

10
src/views/applicationList/settingMenu.vue
View File

@ -16,10 +16,10 @@
<img src="./images/4.png" alt="" style="width: 64px; height: 64px"/>
</template>
<template v-else-if="name==='ERP'">
<img src="./images/5.png" alt="" style="width: 64px; height: 64px"/>
<img src="./images/5.png" alt="" />
</template> -->
<template>
<img :src="imgUrl" alt="" style="width: 64px; height: 64px"/>
<img :src="imgUrl" alt="" @error="handleImageError" style="width: 64px;"/>
</template>
</div>
<div class="appName">{{ name }}</div>
@ -62,6 +62,9 @@ export default {
};
},
methods: {
handleImageError(row) {
this.imgUrl = require('./images/1.png')
},
flashActive(val) {
this.menuActived = val
},
@ -137,6 +140,9 @@ export default {
> .img {
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
}
.appName {

2
src/views/intergrationOptionScene/index.vue
View File

@ -304,7 +304,7 @@ export default {
this.searchForm = {};
},
newPage() {
this.$router.push({ name: "sceneAdd" });
this.$router.push({ path: "/add" });
},
homeHandleNodeClick(data) {
this.pageModel.pageIndex = 1;

2
src/views/intergrationOptionScene/sceneAdd.vue
View File

@ -901,6 +901,8 @@ export default {
type: "success",
message: "保存成功！",
});
//面包屑删除
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.back();
}
} catch (error) {

2
src/views/intergrationTask/taskAdd.vue
View File

@ -757,6 +757,8 @@ export default {
message: "保存成功！",
});
this.$router.back();
//面包屑删除
this.$store.dispatch("tagsView/delView", this.$route);
}
} else {
obj["id"] = this.$route.query.id;

1
src/views/systemInit/index.vue
View File

@ -123,6 +123,7 @@ export default {
},
methods: {
baseLogin() {
if (this.loginForm.baseLoginCode == configKey.baseLoginCode && this.loginForm.baseLoginPwd == configKey.baseLoginPwd) {
this.loginType = true
this.dialogVisible = false

2
src/views/systemMaintenance/buttonManagement/index.vue
View File

@ -45,7 +45,7 @@
<script>
import baseTable from '@/components/base/baseTable'
import baseLayout from '@/components/base/baseLayout'
import baseLayout from "@/components/base/baseNewLayout"
import baseDialog from '@/components/base/BaseNewDialog/index.vue'
import baseTree from '@/components/base/BaseMenuTree/index.vue'
import baseForm from '@/components/base/baseNewForm/index.vue'

2
src/views/systemMaintenance/menuManagement/index.vue
View File

@ -29,7 +29,7 @@
<script>
import router from '@/router'
import baseLayout from "@/components/base/baseLayout"
import baseLayout from "@/components/base/baseNewLayout"
import baseForm from "@/components/base/baseNewForm/index.vue"
import baseTree from "@/components/base/BaseMenuTree/index.vue"
import baseTreeclick from "@/components/base/baseTreeClick/index.vue"

2
src/views/systemSettings/jurisdictionManage/roleJurisdiction/index.vue
View File

@ -37,7 +37,7 @@
</template>
<script>
import baseLayout from "@/components/base/baseLayout";
import baseLayout from "@/components/base/baseNewLayout"
import baseTable from "@/components/base/baseTable";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import baseForm from "@/components/base/baseNewForm/index.vue";

2
src/views/systemSettings/jurisdictionManage/roleJurisdiction/jurisdictionSetting.vue
View File

@ -11,7 +11,7 @@
</template>
<script>
import baseLayout from "@/components/base/baseLayout";
import baseLayout from "@/components/base/baseNewLayout"
import baseTable from "@/components/base/baseTable";
import baseTree from "@/components/base/BaseMenuTree/index.vue";
import configData from "./configData";

2
src/views/systemSettings/jurisdictionManage/userJurisdiction/index.vue
View File

@ -49,7 +49,7 @@
<script>
import router from '@/router'
import baseLayout from '@/components/base/baseLayout'
import baseLayout from "@/components/base/baseNewLayout"
import baseTable from '@/components/base/baseTable'
import baseDialog from '@/components/base/BaseNewDialog/index.vue'
import baseForm from '@/components/base/baseNewForm/index.vue'

2
src/views/systemSettings/jurisdictionManage/userJurisdiction/jurisdictionSetting.vue
View File

@ -11,7 +11,7 @@
</template>
<script>
import baseLayout from "@/components/base/baseLayout";
import baseLayout from "@/components/base/baseNewLayout"
import baseTable from "@/components/base/baseTable";
import baseTree from "@/components/base/BaseMenuTree/index.vue";
import configData from "./configData";

67
src/views/systemSettings/jurisdictionManage/userJurisdiction/rightDialog.vue
View File

@ -180,7 +180,56 @@ export default {
})
},
handleSelectionChange(val, row) {
row.check = !row.check
this.multipleSelection = val
let data = this.treeToArray([row])
this.childNode = !row.check
console.log(this.childNode,'this.childNode')
if (data.length > 1) {
console.log(data,'data')
data.forEach((el, index) => {
el.check = this.childNode
this.$refs.multipleTable.toggleRowSelection(el, this.childNode)
})
let ids = data[0].id
let arr = this.treeFindPath(
this.menuDatas,
(data) => data.id == ids,
'id'
)
arr = arr.splice(0, arr.length - 1)
let dataList = []
let allList = this.treeToArray(this.menuDatas)
allList.forEach((el, index) => {
if (arr.includes(el.id)) {
dataList.push(el)
}
})
dataList.forEach((el, index) => {
el.check = true
this.$refs.multipleTable.toggleRowSelection(el, true)
})
} else {
let ids = data[0].id
let arr = this.treeFindPath(
this.menuDatas,
(data) => data.id == ids,
'id'
)
console.log(arr,'arr')
// arr = arr.splice(0, arr.length - 1)
let dataList = []
let allList = this.treeToArray(this.menuDatas)
allList.forEach((el, index) => {
if (arr.includes(el.id)) {
dataList.push(el)
}
})
console.log(dataList,'dataList')
dataList.forEach((el, index) => {
el.check = this.childNode
this.$refs.multipleTable.toggleRowSelection(el, this.childNode )
})
}
},
// 默认选中
exhibitList(menu, homeList, id) {
@ -239,13 +288,13 @@ export default {
}
this.homeListHandle(params.sysPopedomHomeEntities)
this.menuListHandle(this.menuDatas, params.sysPopedomMenuEntities, params.sysPopedomOperateEntities)
const res = await authApi("sysUserService","","saveJurisdiction","",params)
if(res.status == '200'){
this.handleDialogClose();
const res = await authApi('sysUserService', '', 'saveJurisdiction', '', params)
if (res.status == '200') {
this.handleDialogClose()
this.$message({
message: "保存成功",
type: "success",
});
message: '保存成功',
type: 'success'
})
}
},
//处理首页拖拽
@ -265,7 +314,7 @@ export default {
})
}
if (item.children.length) {
this.menuListHandle(item.children, result,btnResult)
this.menuListHandle(item.children, result, btnResult)
}
if (item.buttonList.length) {
this.btnListHandle(item.buttonList, btnResult, item.id)
@ -276,7 +325,7 @@ export default {
btnListHandle(list, btnResult, menuId) {
list.forEach(item => {
if (item.check) {
console.log(btnResult,'btnResult')
console.log(btnResult, 'btnResult')
btnResult.push({
menuId,
operate: item.id

2
src/views/systemSettings/organization/index.vue
View File

@ -31,7 +31,7 @@
<script>
import { authApi } from "@/api/apis/auth";
import baseLayout from "@/components/base/baseLayout";
import baseLayout from "@/components/base/baseNewLayout"
import baseTable from "@/components/base/baseTable";
import baseForm from "@/components/base/baseNewForm/index.vue";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";

2
src/views/systemSettings/userSettings/PersonnelSettings/index.vue
View File

@ -75,7 +75,7 @@
</template>
<script>
import baseLayout from '@/components/base/baseLayout'
import baseLayout from "@/components/base/baseNewLayout"
import baseTable from '@/components/base/baseTable'
// import baseDialog from "@/components/base/BaseNewDialog";
import baseDialog from '@/components/base/BaseNewDialog/index.vue'

2
src/views/systemSettings/userSettings/roleSettings/index.vue
View File

@ -51,7 +51,7 @@
<script>
import baseRightDialog from "@/components/base/baseRightDialog";
import baseLayout from "@/components/base/baseLayout";
import baseLayout from "@/components/base/baseNewLayout"
import BaseTable from '@/components/base/baseTable/index.vue'
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import BaseSelect from '@/components/base/BaseSelect'

2
src/views/systemSettings/userSettings/userInformation/index.vue
View File

@ -56,7 +56,7 @@
</template>
<script>
import baseLayout from '@/components/base/baseLayout'
import baseLayout from "@/components/base/baseNewLayout"
import baseTable from '@/components/base/baseTable'
// import baseDialog from "@/components/base/BaseNewDialog";
import baseDialog from '@/components/base/BaseNewDialog/index.vue'