<!-- element通用Table组件 -->
|
<template>
|
<div class="app_table_container">
|
<el-row :gutter="20">
|
<el-col :span="4" :xs="24" v-if="showDeptSearch">
|
<!-- 侧边部门搜索框Start -->
|
<deptSearchComponent ref="deptSearchComponent" @on-selectDept="handleSelectDept"></deptSearchComponent>
|
<!-- 侧边部门搜索框End -->
|
</el-col>
|
<el-col :span="showDeptSearch ? 20 : 24" :xs="24">
|
<div class="right_table_container">
|
<!-- 头部操作区Start -->
|
<div class="top_filter_box">
|
<!-- table表单搜索项 -->
|
<div class="table_filter">
|
<div class="option_item" v-for="(item, index) in tableFilter" :key="index" >
|
<!-- <el-cascader class="filter_item" placeholder="区域" v-if="item.type === 'areaPicker'" clearable
|
:props="{ checkStrictly: true }" :show-all-levels="false" :options="regionData"
|
v-model="selectedAreaOptions" @change="handleAreaChange(item, $event)"></el-cascader>
|
<el-cascader change-on-select class="filter_item" v-if="item.type === 'cascader'"
|
v-model="filterParamsCascader[item.fieldName]" :options="item.options"
|
:props="{ value: 'id', label: 'name' }" clearable :placeholder="item.placeholder"
|
@change="cascaderOnChange(item, $event)"></el-cascader> -->
|
<!-- 这个日期选择器用于配合接口通用的参数 start_time、end_time -->
|
<!-- <el-date-picker class="filter_item" v-if="item.type === 'datePicker'" type="daterange" placeholder="开始时间"
|
clearable range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
|
v-model="dateRange" @change="onDateRangeChanged" :picker-options="pickerOptions" />
|
<el-date-picker class="filter_item" v-if="item.type === 'singleDatePicker' && quickSelectTimeValue === 0"
|
v-model="filterParams[item.fieldName]" type="date" @input="onSingleDatePicker(filterParams[item.fieldName])"
|
value-format="yyyy-MM-dd" :picker-options="pickerOptions" :placeholder="item.placeholder">
|
</el-date-picker>
|
<el-select class="filter_item" v-model="quickSelectTimeValue" :placeholder="item.placeholder || '请选择'"
|
v-if="item.type === 'quickSelectTime'" clearable @change="handlerQuickSelectTime(item)"
|
@clear="clearQuickSelectTime(item)">
|
<el-option v-for="item in quickSelectTimeOptions" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select> -->
|
<div class="filter_item" v-if="item.type === 'search'" :style="{width: item.width || ''}">
|
<div class="filter_item_title">{{ item.title }}：</div>
|
<el-input size="small" v-model="filterParams[item.fieldName]" :placeholder="item.placeholder"
|
clearable
|
prefix-icon="el-icon-search" @keyup.enter.native="getData" @clear="getData"
|
>
|
</el-input>
|
</div>
|
<div class="filter_item" v-if="item.type === 'default'" :style="{width: item.width || ''}">
|
<div class="filter_item_title">{{ item.title }}：</div>
|
<el-select size="small" :popper-append-to-body="false" filterable
|
@change="filterOnChange(item.fieldName, $event)" v-model="filterParams[item.fieldName]"
|
:placeholder="item.placeholder" :clearable="item.clearable"
|
>
|
<el-option v-for="(optionItem, optionIndex) in item.options" :key="optionIndex"
|
:label="optionItem['label'] || optionItem['name']"
|
:value="optionItem['value'] || optionItem['id']"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<!-- 搜索输入框， 搜索按钮及刷新按钮 -->
|
<div class="table_search" v-if="showSearchBtn">
|
<el-button @click="getData" type="primary" size="mini" icon="el-icon-search">搜索</el-button>
|
<el-button @click="clearFilter" size="mini" icon="el-icon-refresh">重置</el-button>
|
</div>
|
</div>
|
<!-- 顶部operation slot插槽 -->
|
<div class="top_button_box">
|
<div class="operation_box">
|
<slot name="operatorBox"></slot>
|
</div>
|
<div class="right_button_box">
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getData"></right-toolbar>
|
</div>
|
</div>
|
</div>
|
<!-- 头部操作区End -->
|
|
<!-- 表格内容区Start -->
|
<el-table v-loading="loading" :border="border" ref="multipleTable" :size="tableSize" :data="tableData"
|
style="width: 100%;" :height="tableHeight" @select="selectEvent" @select-all="selectEvent"
|
@sort-change="columnSortChange" :row-class-name="rowClass" :cell-class-name="changeCellStyle"
|
:header-cell-style="headerRowStyle" @row-click="getRowData"
|
>
|
<template v-for="(item, index) in myColumns">
|
<!--selection多选框类型-->
|
<el-table-column :key="index" :prop="item.prop" :label="item.label" :width="item.width || ''"
|
type="selection" :align="columnAlign" v-if="item.type === 'selection'"
|
/>
|
<!--slot类型-->
|
<el-table-column :sortable="item.sortable ? 'custom' : false" :prop="item.prop" :label="item.label"
|
:width="item.width || ''" :type="item.type || ''" :align="columnAlign"
|
v-if="item.type === 'slot'"
|
>
|
<div slot-scope="{row,column, $index}">
|
<slot :name="item.slotName" v-bind:row="row" v-bind:column="column" v-bind:index="$index">
|
</slot>
|
</div>
|
</el-table-column>
|
<!--expand类型-->
|
<el-table-column :key="index" :type="item.type || ''" :align="columnAlign" v-if="item.type === 'expand'">
|
<template slot-scope="{row}">
|
<slot :name="item.slotName" v-bind:row="row">
|
</slot>
|
</template>
|
</el-table-column>
|
<!--filter类型-->
|
<el-table-column :key="index" :sortable="item.sortable ? 'custom' : false" :prop="item.prop"
|
:label="item.label" :width="item.width || ''" :type="item.type || ''"
|
:align="columnAlign"
|
v-if="item.type === 'filter'"
|
>
|
<div slot-scope="{row}">
|
{{ item.filterFunction(row[item.prop], item.filterOptions) }}
|
</div>
|
</el-table-column>
|
<!--custom类型-->
|
<el-table-column :key="index" :sortable="item.sortable ? 'custom' : false" :prop="item.prop"
|
:label="item.label" :width="item.width || ''" :type="item.type || ''"
|
:align="columnAlign"
|
v-if="item.type === 'custom'"
|
>
|
<template slot-scope="{row, column, $index}">
|
{{ item.customFunction(row, column, $index) }}
|
</template>
|
</el-table-column>
|
<!--操作区-->
|
<el-table-column :key="index" :prop="item.prop" :label="item.label" :width="item.width || '180'"
|
:type="item.type || ''" :align="columnAlign" v-if="item.type === 'operator'"
|
>
|
<div slot-scope="{row, column, $index}">
|
<!--启用开关-->
|
<el-switch v-if="item.btn.rowSwitchBtn" :value="row.display === 1" @change="displayChange(row.id)"/>
|
<!--编辑按钮-->
|
<router-link v-if="item.btn.rowEditBtn"
|
:to="{ name: permissionFirstUpperCase + 'Detail', params: { id: row.id } }"
|
>
|
<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
|
</router-link>
|
<!--删除按钮-->
|
<el-button v-if="item.btn.rowDeleteBtn" @click="deleteById(row.id)" type="danger"
|
icon="el-icon-delete"
|
size="mini"
|
></el-button>
|
</div>
|
</el-table-column>
|
|
<el-table-column v-if="item.type === 'multilevel'" :key="index" :label="item.label"
|
:width="item.width || ''" :align="columnAlign"
|
>
|
<template v-for="(child, childIndex) in item.child">
|
<el-table-column :key="childIndex" :sortable="child.sortable ? 'custom' : false" :prop="child.prop"
|
:label="child.label" :width="child.width || ''" :type="child.type || ''"
|
:align="columnAlign"
|
v-if="child.type === 'default'"
|
>
|
</el-table-column>
|
<!--custom类型-->
|
<el-table-column :key="childIndex" :sortable="child.sortable ? 'custom' : false" :prop="child.prop"
|
:label="child.label" :width="child.width || ''" :type="child.type || ''"
|
:align="columnAlign"
|
v-if="child.type === 'custom'"
|
>
|
<div slot-scope="{row, column, $index}">
|
{{ child.customFunction(row, column, $index) }}
|
</div>
|
</el-table-column>
|
</template>
|
</el-table-column>
|
<!--默认情况-->
|
<el-table-column :key="index" :sortable="item.sortable ? 'custom' : false" :prop="item.prop"
|
:label="item.label" :width="item.width || ''" :type="item.type || ''"
|
:align="columnAlign"
|
:fixed="item.fixed || false" v-if="item.type === 'default'"
|
>
|
</el-table-column>
|
</template>
|
</el-table>
|
<!-- 表格内容区End -->
|
|
<!--分页器Start-->
|
<div class="footer" v-if="!APITable">
|
<el-pagination :pager-count="pagerCount" class="pagination" :hide-on-single-page="false" :background=true
|
@size-change="handleSizeChange" @current-change="handleCurrentChange"
|
:current-page="currentPage"
|
:page-sizes="[10, 20, 30, 50, 100]" :page-size="pageSize" :layout="layout"
|
:total="totalElements"
|
>
|
</el-pagination>
|
</div>
|
<!--分页器End-->
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import request from '@/utils/request'
|
import deptSearchComponent from './deptSearchComponent.vue'
|
import RightToolbar from '../RightToolbar'
|
|
export default {
|
name: 'AppTable',
|
components: {
|
deptSearchComponent,
|
RightToolbar
|
},
|
props: {
|
// column对齐方式
|
columnAlign: {
|
String,
|
default: () => {
|
return 'center'
|
}
|
},
|
// 是否展示左侧部门筛选
|
showDeptSearch: {
|
type: Boolean,
|
default: () => {
|
return false
|
}
|
},
|
// 是否展示搜索按钮
|
showSearchBtn: {
|
type: Boolean,
|
default: () => {
|
return true
|
}
|
},
|
// 总页数
|
pagerCount: {
|
type: Number,
|
default: () => {
|
return 7
|
}
|
},
|
// true: 如果是传数据过来而不是后台接口返回的数据， 不使用分页器
|
APITable: {
|
type: Boolean,
|
default: () => {
|
return false
|
}
|
},
|
// innerHeight - heightPx 用于table的高度
|
heightPx: {
|
type: Number,
|
default: () => {
|
return 260
|
}
|
},
|
// 是否展示高度
|
heightShow: {
|
type: Boolean,
|
default: () => {
|
return false
|
}
|
},
|
// 主题色 默认default 深色dark
|
theme: {
|
String,
|
default: () => {
|
return 'default'
|
}
|
},
|
// 接口请求的地址
|
url: String,
|
// 表格的controller名
|
controller: String,
|
// 是否显示边框表格 默认显示
|
border: {
|
type: Boolean,
|
default: () => {
|
return false
|
}
|
},
|
// 表格的列
|
tableColumns: Array,
|
// 是否展示斑马纹
|
stripe: {
|
type: Boolean,
|
default: () => {
|
return true
|
}
|
},
|
// 是否显示多选框
|
selection: {
|
type: Boolean,
|
default: () => {
|
return false
|
}
|
},
|
// 是否显示索引值
|
showIndex: {
|
type: Boolean,
|
default: () => {
|
return true
|
}
|
},
|
// 是否显示新增按钮
|
addBtn: {
|
type: Boolean,
|
default: () => {
|
return true
|
}
|
},
|
// 筛选框数组
|
tableFilter: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
// 筛选框所选的值
|
filterParams: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
// 请求时的额外参数
|
requestParams: Object,
|
parentCallGetData: { // 父组件主动去调getData方法再去请求数据 一般用于要指定requestParams时
|
type: Boolean,
|
default: () => {
|
return false
|
}
|
},
|
cancelCheckBox: {
|
// 是否显示作废项的checkbox
|
type: Boolean,
|
default: () => {
|
return false
|
}
|
},
|
// 定制数据 一般用于模拟后台返回写前端字段的时候用
|
customData: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
tableSize: {
|
type: String,
|
default: () => {
|
return 'mini'
|
}
|
}
|
},
|
data() {
|
return {
|
// 显示搜索条件
|
showSearch: true,
|
// 部门名称
|
deptName: undefined,
|
// 时间选择器的选项配置
|
pickerOptions: {
|
// 禁用当前时间之间的选项
|
disabledDate(time) {
|
return time.getTime() > Date.now()
|
}
|
},
|
// 加载动画
|
loading: false,
|
// 地区选择器选择的数据
|
selectedAreaOptions: [],
|
// 地区数据
|
// regionData: regionData,
|
// 表格高度
|
tableHeight: null,
|
// 表格数据
|
tableData: [],
|
// 处理后的列数据
|
myColumns: [],
|
// 当前页面的permission大写名称
|
permissionUpperCase: '',
|
// 当前页面的permission首字母大写名称
|
permissionFirstUpperCase: '',
|
// 已选中列表
|
selectedList: [],
|
// 搜索的内容
|
searchText: '',
|
// 当前分页数
|
currentPage: 1,
|
// 每页数量
|
pageSize: 10,
|
// 数据总条数
|
totalElements: 0,
|
// 级联选择器的配置
|
filterParamsCascader: {},
|
// 排序规则
|
sort: '',
|
// 时间筛选区间
|
dateRange: [],
|
// 时间选择器配置项
|
quickSelectTimeOptions: [
|
{
|
label: '自定义',
|
value: 0
|
},
|
{
|
label: '今天',
|
value: 1
|
},
|
{
|
label: '昨天',
|
value: 2
|
},
|
{
|
label: '最近2天',
|
value: 3
|
},
|
{
|
label: '最近7天',
|
value: 4
|
},
|
{
|
label: '最近一个月',
|
value: 5
|
}
|
],
|
// 快速时间选择器，选种的值
|
quickSelectTimeValue: null
|
}
|
},
|
computed: {
|
// 页码的布局
|
layout() {
|
if (this.$store.getters.device === 'mobile') {
|
return 'prev, pager, next'
|
} else {
|
return 'total, sizes, prev, pager, next, jumper'
|
}
|
},
|
// 判断是否有选择列表
|
disabledBatch() {
|
return this.selectedList.length === 0
|
}
|
},
|
watch: {
|
tableColumns: {
|
immediate: true,
|
handler: 'handlerColumns'
|
},
|
// 弃用
|
// controller: {
|
// immediate: true,
|
// handler: function () {
|
// if (this.controller !== '') {
|
// 将传入的controller名字转换成大写和首字母大写
|
// this.permissionUpperCase = this.controller.toUpperCase()
|
// this.permissionFirstUpperCase = this.controller.charAt(0).toUpperCase() + this.controller.slice(1)
|
// }
|
// }
|
// },
|
tableFilter: {
|
immediate: true,
|
deep: true,
|
handler: function() {
|
this.tableFilter.forEach(val => {
|
if (!val.type) {
|
val.type = 'default'
|
}
|
if (val.type === 'cascader') {
|
this.emptyToNull(val.options)
|
this.filterParamsCascader[val.fieldName] = []
|
}
|
})
|
}
|
},
|
quickSelectTimeValue: {
|
handler: function(val) {
|
}
|
}
|
},
|
mounted() {
|
if (!this.parentCallGetData) {
|
this.getData()
|
}
|
if (this.heightShow) {
|
this.tableHeight = window.innerHeight - this.heightPx
|
}
|
},
|
activated() {
|
if (!this.parentCallGetData) {
|
this.getData()
|
}
|
},
|
methods: {
|
// 导出列表数据excel表格
|
exportExcel(exportUrl) {
|
const url = exportUrl ? exportUrl : this.url.replace('list', 'export')
|
const obj = Object.assign({}, this.filterParams, this.requestParams, {
|
pageNum: this.currentPage,
|
pageSize: this.pageSize,
|
sort: this.sort
|
})
|
this.download(url, obj, `${url.split('/')[2]}_${new Date().getTime()}.xlsx`)
|
},
|
// 清除所有筛选项然后重新获取数据
|
clearFilter() {
|
this.filterParams = {}
|
this.getData()
|
},
|
// 处理选择了部门，
|
handleSelectDept(deptId) {
|
this.filterParams.deptId = deptId
|
this.currentPage = 1
|
this.pageSize = 10
|
this.getData()
|
this.$emit('onSelectDept', deptId)
|
},
|
/**
|
* 获取表格数据
|
* */
|
getData() {
|
this.loading = true
|
if (this.filterParams.start_time) {
|
this.filterParams.start_time = this.filterParams.start_time.indexOf(' 00:00:00') < 0 ? this.filterParams.start_time + ' 00:00:00' : this.filterParams.start_time
|
}
|
if (this.filterParams.end_time) {
|
this.filterParams.end_time = this.filterParams.end_time.indexOf(' 23:59:59') < 0 ? this.filterParams.end_time + ' 23:59:59' : this.filterParams.end_time
|
}
|
const obj = Object.assign({}, this.filterParams, this.requestParams, {
|
pageNum: this.currentPage,
|
pageSize: this.pageSize,
|
sort: this.sort
|
})
|
// 清除无用参数
|
for (const params in obj) {
|
if (obj[params] === undefined || obj[params] === null || obj[params] === '') {
|
delete obj[params]
|
}
|
}
|
const successFunc = (res) => {
|
console.log(res)
|
if(this.url == '/oilWall/queryPage' ){
|
this.loading = false
|
this.tableData = res.data.list
|
this.totalElements = res.data.length
|
this.$emit('on-getData', res.data)
|
}else if(this.url == '/syLock/query'){
|
this.loading = false
|
this.tableData = res.data.list
|
this.totalElements = res.data.total
|
this.$emit('on-getData', res.data)
|
}else{
|
this.loading = false
|
this.tableData = res.rows
|
this.totalElements = res.total
|
this.$emit('on-getData', res.rows)
|
}
|
}
|
const customDataSuccessFunc = () => {
|
this.loading = false
|
this.tableData = this.customData
|
this.$emit('on-getData', this.customData)
|
}
|
const errorFunc = () => {
|
this.loading = false
|
}
|
if (this.customData.length === 0) {
|
// 调用列表请求接口
|
if (this.url) {
|
request({
|
url: this.url,
|
method: 'get',
|
params: obj
|
}).then(res => {
|
successFunc(res)
|
})
|
}
|
} else {
|
customDataSuccessFunc()
|
}
|
},
|
// 处理列数据
|
handlerColumns() {
|
const columnsArr = []
|
// 判断是否有多选框
|
if (this.selection) {
|
columnsArr.push({
|
width: 50,
|
type: 'selection'
|
})
|
}
|
// 判断是否显示索引值
|
if (this.showIndex) {
|
columnsArr.push({
|
label: '序号',
|
width: 50,
|
type: 'index'
|
})
|
}
|
this.tableColumns.forEach(val => {
|
if (!val.type) {
|
val.type = 'default'
|
}
|
// filter类型的table列
|
if (val.type === 'filter') {
|
val.filterFunction = (prop, filterOptions) => {
|
const result = filterOptions.find(val => parseInt(prop) === parseInt(val.key))
|
if (!result) {
|
return '未找到对应的filter值'
|
} else {
|
return result.value
|
}
|
}
|
}
|
// todo 层级的需要看一下， 现在没有这个属性了
|
if (val.type === 'multilevel') {
|
val.child.forEach(val => {
|
if (!val.type) {
|
val.type = 'default'
|
}
|
})
|
}
|
columnsArr.push(val)
|
})
|
this.myColumns = columnsArr
|
},
|
/**
|
* 选择时触发的事件
|
* @param selectList
|
*/
|
selectEvent(selectList) {
|
this.selectedList = selectList
|
this.$emit('on-select-checkbox', selectList)
|
},
|
/**
|
* 顶部筛选项发生变化触发的事件
|
* @param {*} fieldName
|
* @param {*} value
|
*/
|
filterOnChange(fieldName, value) {
|
this.$emit('on-select-selectBox', fieldName, value)
|
if (!this.parentCallGetData) {
|
this.getData()
|
}
|
},
|
/**
|
* 更改表格每页展示数目
|
* @param val 每页条数
|
*/
|
handleSizeChange(val) {
|
this.currentPage = 1
|
this.pageSize = val
|
this.getData()
|
},
|
/**
|
* 更改当前页码
|
* @param val 页码
|
*/
|
handleCurrentChange(val) {
|
this.currentPage = val
|
this.getData()
|
},
|
/**
|
* 移除空的children 用于多层选择器
|
* @param options
|
* @returns {boolean}
|
*/
|
emptyToNull(options) {
|
if (!options) {
|
return false
|
}
|
options.forEach(option => {
|
if (option.children && option.children.length === 0) {
|
option.children = null
|
} else {
|
this.emptyToNull(option.children)
|
}
|
})
|
},
|
/**
|
* 多层级选择器 onchange时
|
* @param item
|
* @param $event
|
* @returns {IterableIterator<*>}
|
*/
|
cascaderOnChange(item, $event) {
|
this.filterParams[item.fieldName] = $event[$event.length - 1]
|
this.getData()
|
},
|
/**
|
* 地区选择器 onchange时
|
* @param item
|
*/
|
handleAreaChange(item) {
|
if (this.selectedAreaOptions.length) {
|
if (this.selectedAreaOptions.length === 1) {
|
this.filterParams.province = CodeToText[this.selectedAreaOptions[0]]
|
// 选择了省
|
} else if (this.selectedAreaOptions.length === 2) {
|
// 选到了市
|
this.filterParams.province = CodeToText[this.selectedAreaOptions[0]]
|
this.filterParams.city = CodeToText[this.selectedAreaOptions[1]] === '市辖区' ? CodeToText[this.selectedAreaOptions[0]] : CodeToText[this.selectedAreaOptions[1]]
|
} else {
|
// 选到了区
|
// 选到了市
|
this.filterParams.province = CodeToText[this.selectedAreaOptions[0]]
|
this.filterParams.city = CodeToText[this.selectedAreaOptions[1]] === '市辖区' ? CodeToText[this.selectedAreaOptions[0]] : CodeToText[this.selectedAreaOptions[1]]
|
this.filterParams.area = CodeToText[this.selectedAreaOptions[2]] === '市辖区' ? '' : CodeToText[this.selectedAreaOptions[2]]
|
}
|
} else {
|
this.filterParams.province = this.filterParams.city = this.filterParams.area = ''
|
}
|
this.getData()
|
},
|
toggleSelection(rows) {
|
if (rows) {
|
rows.forEach(row => {
|
this.$refs.multipleTable.toggleRowSelection(row)
|
})
|
} else {
|
this.$refs.multipleTable.clearSelection()
|
}
|
},
|
/**
|
* 点击排序时触发
|
*/
|
columnSortChange(e) {
|
let sort = ''
|
let sortBy = ''
|
if (e.column) {
|
sort = e.prop
|
sortBy = e.order === 'ascending' ? 'asc' : 'desc'
|
}
|
this.sort = `${sort},${sortBy}`
|
this.getData()
|
},
|
/**
|
* 时间段filter选择器onchange时
|
*/
|
onDateRangeChanged(date) {
|
if (!date) {
|
this.dateRange = [null, null]
|
}
|
this.initPageGetDate()
|
},
|
/**
|
* 重置页码数并且重新请求
|
*/
|
initPageGetDate() {
|
this.currentPage = 1
|
this.$nextTick(() => {
|
this.getData()
|
})
|
},
|
/**
|
* 单选日期选择器onChange
|
*/
|
onSingleDatePicker(e) {
|
if (!this.parentCallGetData) {
|
this.initPageGetDate()
|
}
|
},
|
/**
|
* 处理快速选择时间筛选
|
* @param item
|
***/
|
handlerQuickSelectTime(item) {
|
const val = this.quickSelectTimeValue
|
if (val === 0) {
|
this.filterParams[item.params[0]] = ''
|
this.filterParams[item.params[1]] = ''
|
} else if (val === 1) {
|
this.filterParams[item.params[0]] = moment().format('YYYY-MM-DD') + ' 00:00:00'
|
this.filterParams[item.params[1]] = moment().format('YYYY-MM-DD') + ' 23:59:59'
|
} else if (val === 2) {
|
this.filterParams[item.params[0]] = moment().add(-1, 'days').format('YYYY-MM-DD') + ' 00:00:00'
|
this.filterParams[item.params[1]] = moment().add(-1, 'days').format('YYYY-MM-DD') + ' 23:59:59'
|
} else if (val === 3) {
|
this.filterParams[item.params[0]] = moment().add(-1, 'days').format('YYYY-MM-DD') + ' 00:00:00'
|
this.filterParams[item.params[1]] = moment().format('YYYY-MM-DD') + ' 23:59:59'
|
} else if (val === 4) {
|
this.filterParams[item.params[0]] = moment().add(-7, 'days').format('YYYY-MM-DD') + ' 00:00:00'
|
this.filterParams[item.params[1]] = moment().format('YYYY-MM-DD') + ' 23:59:59'
|
} else if (val === 5) {
|
this.filterParams[item.params[0]] = moment().add(-1, 'months').format('YYYY-MM-DD') + ' 00:00:00'
|
this.filterParams[item.params[1]] = moment().format('YYYY-MM-DD') + ' 23:59:59'
|
}
|
this.initPageGetDate()
|
},
|
/**
|
* 清空快速选择时间
|
* @param item
|
*/
|
clearQuickSelectTime(item) {
|
this.filterParams[item.params[0]] = ''
|
this.filterParams[item.params[1]] = ''
|
this.initPageGetDate()
|
},
|
/**
|
* 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。
|
* @param {row, rowIndex}
|
* @returns {string}
|
*/
|
rowStyle({
|
row,
|
rowIndex
|
}) {
|
if (this.theme === 'dark') {
|
return 'background: #000c26; color: #2ac2e2'
|
} else {
|
return ''
|
}
|
},
|
rowClass() {
|
if (this.theme === 'dark') {
|
return 'app-table-dark-row'
|
} else {
|
return ''
|
}
|
},
|
/**
|
* 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。
|
* @param row
|
* @param rowIndex
|
*/
|
headerRowStyle({
|
row,
|
rowIndex
|
}) {
|
if (this.theme === 'dark') {
|
return 'background: #000c26 !important; color: #fff !important'
|
} else {
|
return ''
|
}
|
},
|
changeCellStyle({
|
row,
|
column,
|
rowIndex,
|
columnIndex
|
}) {
|
if (this.myColumns[columnIndex + 1] && this.myColumns[columnIndex + 1].cellClassName) {
|
return this.myColumns[columnIndex + 1].cellClassName
|
}
|
return ''
|
},
|
getRowData(row){
|
this.$emit('clickRow', row)
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.app_table_container {
|
width: 100%;
|
|
.top_filter_box {
|
|
.table_filter {
|
display: flex;
|
flex-wrap: wrap;
|
|
.option_item {
|
margin-bottom: 10px;
|
|
.filter_item {
|
width: 260px;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
margin-right: 10px;
|
|
.filter_item_title {
|
width: 100px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
font-size: 14px;
|
font-weight: 600;
|
// margin-right: 10px;
|
}
|
}
|
}
|
|
.table_search {
|
margin-bottom: 10px;
|
margin-right: 10px;
|
display: flex;
|
}
|
}
|
|
.top_button_box {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.operation_box {
|
}
|
|
.right_button_box {
|
}
|
}
|
|
.operation_box {
|
display: flex;
|
margin-bottom: 10px;
|
}
|
|
}
|
|
|
.footer {
|
display: flex;
|
justify-content: flex-end;
|
margin: 20px 0;
|
}
|
}
|
</style>
|
