706 lines
17 KiB
Vue
706 lines
17 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
|
||
"
|
||
>
|
||
<!-- 标题 -->
|
||
<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>
|