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>
|