684 lines
19 KiB
Vue
684 lines
19 KiB
Vue
<!--
|
||
* @name: 页面基本结构组件
|
||
* @author: zhangpengcheng
|
||
* @date: 2022-08-23
|
||
-->
|
||
<!-- style="overflow: auto;" -->
|
||
<template>
|
||
<div class="container" v-loading="loading" :style="'backgroundColor:' +
|
||
bgColor +
|
||
';paddingBottom:' +
|
||
paddingBottom +
|
||
';height:' +
|
||
bodyHight
|
||
" ref="baseLayout">
|
||
<!-- 标题 -->
|
||
<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="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.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.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.prop] ? '#000' : '#c0c4cc' }" style="width: 100%; margin: 0"
|
||
@click="elDialogClick(row, indexRow, indexRow)">
|
||
{{
|
||
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.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.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-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 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>
|
||
</div>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<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";
|
||
// import fetch from '../../api/request'
|
||
import { getApiSign } from "@/utils/apiSign";
|
||
// import domainsFuc from '@/api/domains.js'
|
||
export default {
|
||
components: {
|
||
// heightTransition,
|
||
basePage,
|
||
// 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,
|
||
default: "#ffffff",
|
||
},
|
||
// 背景颜色
|
||
mainColor: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
// 底部padding
|
||
paddingBottom: {
|
||
type: String,
|
||
// default: '68px'
|
||
},
|
||
// 高度
|
||
bodyHight: {
|
||
type: [Number, String],
|
||
default: "calc(100vh - 88px)",
|
||
},
|
||
// 搜索配置
|
||
searchModel: {
|
||
type: Array,
|
||
default: () => {
|
||
return [];
|
||
},
|
||
},
|
||
// 搜索配置
|
||
nowBtnTab: {
|
||
type: Array,
|
||
default: () => {
|
||
return [];
|
||
},
|
||
},
|
||
// 按钮配置
|
||
nowBtns: {
|
||
type: Array,
|
||
default: () => {
|
||
return [];
|
||
},
|
||
},
|
||
// 按钮配置
|
||
buttonList: {
|
||
type: Array,
|
||
default: () => {
|
||
return [];
|
||
},
|
||
},
|
||
// 是否展示分页
|
||
isPage: {
|
||
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: "",
|
||
},
|
||
// 导入接口地址
|
||
importUrl: {
|
||
default: "",
|
||
},
|
||
//多选
|
||
selectTable: {
|
||
default: "",
|
||
},
|
||
//单选
|
||
only: {
|
||
default: "",
|
||
},
|
||
},
|
||
watch: {},
|
||
|
||
data() {
|
||
return {
|
||
// 表单数据
|
||
ruleForm: {},
|
||
// queryShow: true,
|
||
onlyUrl: "",
|
||
clientHeight: "",
|
||
// 上传请求头
|
||
uploadHeaders: {},
|
||
// uurl: domainsFuc().domain,
|
||
uurl: "http://www.wldxt.cn:8089/taizhou/daxitong/crm/",
|
||
// 参数
|
||
model: {},
|
||
// 收起/展开搜索
|
||
isSearch: false,
|
||
// 分页数据
|
||
pageModel: {
|
||
total: 0,
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
},
|
||
// 清除状态
|
||
clearState: 0,
|
||
// 操作按钮
|
||
tableHeight: "calc(100vh - 218px)",
|
||
loading: false,
|
||
};
|
||
},
|
||
created() {
|
||
},
|
||
mounted() {
|
||
this.watchSize();
|
||
document.addEventListener("keydown", (e) => {
|
||
let key = window.event.keyCode;
|
||
if (key == 13) {
|
||
this.testEnter();
|
||
}
|
||
});
|
||
// window.onresize = () => {
|
||
// this.clientHeight = document.documentElement.clientHeight;
|
||
// },
|
||
// this.importUpload(); //初始化上传
|
||
},
|
||
computed: {
|
||
// menuJson() {
|
||
// return JSON.parse(localStorage.getItem(TokenKeys.MENU_JSON))
|
||
// }
|
||
},
|
||
methods: {
|
||
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);
|
||
});
|
||
});
|
||
}
|
||
},
|
||
getTableHight(height = 0) {
|
||
// 导航栏+标签栏 102 按钮列表64 查询条件64 分页32 102 + 64 + 32
|
||
let reduceHight = 0;
|
||
let windowHeight = this.$refs.baseLayout.offsetHeight;
|
||
if (this.isPage) {
|
||
reduceHight = reduceHight + 52;
|
||
}
|
||
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.pageIndex = 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);
|
||
},
|
||
// 搜索按钮点击事件
|
||
funSearchBtnClick(item) {
|
||
this.$emit("onFuncSearchBtn", item);
|
||
},
|
||
// 返回
|
||
goBack() {
|
||
this.$router.go(-1);
|
||
},
|
||
// 按钮点击事件
|
||
funNewClick(item) {
|
||
if (item.menuName == "刷新") {
|
||
this.$tab.refreshPage(this.$route);
|
||
} else {
|
||
this.$emit("onFuncBtn", 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) {
|
||
// 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));
|
||
},
|
||
// 条件查询-下拉框
|
||
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, row);
|
||
}
|
||
},
|
||
// 刷新
|
||
refresh() {
|
||
|
||
},
|
||
// 页数或每页条数更改时触发
|
||
onPageChange() {
|
||
this.$emit("pageChange", this.mergeParam());
|
||
},
|
||
// 合并参数
|
||
mergeParam(state) {
|
||
if (state) {
|
||
this.pageModel.pageIndex = 1;
|
||
}
|
||
let page = {
|
||
pageIndex: this.pageModel.pageIndex,
|
||
pageSize: this.pageModel.pageSize,
|
||
};
|
||
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.$emit("onQuery", this.mergeParam(true));
|
||
},
|
||
testEnter() {
|
||
if (this.enterClickType) {
|
||
this.search();
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang='scss'>
|
||
p {
|
||
margin: 0;
|
||
}
|
||
|
||
::v-deep .iconfont {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.queryIcon {
|
||
font-size: 16px;
|
||
color: #606266;
|
||
margin-right: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.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); */
|
||
/* @include fontBase(16px, #fff); */
|
||
font-size: 14px;
|
||
padding: 12px;
|
||
}
|
||
|
||
.buttonList {}
|
||
|
||
.buttonList+.buttonList {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.main {
|
||
/* height: auto !important; */
|
||
overflow-y: auto;
|
||
flex-wrap: wrap;
|
||
|
||
/* padding:0 12px; */
|
||
.search {
|
||
height: auto;
|
||
background: #f5f5f5;
|
||
border: 1px solid #d8d8d8;
|
||
padding: 12px;
|
||
transition: all 0.2s ease-in-out;
|
||
|
||
.row {
|
||
/* @include fontBase(14px, #333) */
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.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>
|