<template>
|
<a-modal :title="modalTitle" :width="1048" :visible="modalVisible" :footer="null" @cancel="$emit('closeModal')">
|
<a-form layout="inline" @keyup.enter.native="loadData(1)">
|
<a-form-item label="设备编号">
|
<a-input v-model="queryParam.equipmentId"></a-input>
|
</a-form-item>
|
<a-form-item>
|
<a-space>
|
<a-button type="primary" @click="loadData(1)">查询</a-button>
|
<a-button type="primary" @click="searchReset">重置</a-button>
|
</a-space>
|
</a-form-item>
|
</a-form>
|
<a-table :columns="modalTableColumns" :dataSource="dataSource" :pagination="ipagination"
|
@change="handleTableChange" style="margin-top: 20px"></a-table>
|
</a-modal>
|
</template>
|
|
<script>
|
import { putAction, getAction } from '@/api/manage'
|
import { filterObj } from '@/utils/util'
|
|
export default {
|
name: 'SignageModal',
|
components: {},
|
mixins: [],
|
props: {
|
modalTitle: {
|
type: String
|
},
|
modalDataApiUrl: {
|
type: String
|
},
|
modalVisible: {
|
type: Boolean
|
},
|
modalTableColumns: {
|
type: Array
|
}
|
},
|
watch: {
|
modalVisible: {
|
handler(newVal) {
|
// 打开弹窗时数据回到第一页且每页显示最大条数恢复为最小值
|
if (newVal) {
|
this.searchReset()
|
this.ipagination.pageSize = +this.ipagination.pageSizeOptions[0]
|
}
|
}
|
}
|
},
|
data() {
|
return {
|
queryParam: {},
|
loading: false,
|
/* 分页参数 */
|
ipagination: {
|
current: 1,
|
pageSize: 10,
|
pageSizeOptions: ['10', '20', '30'],
|
showTotal: (total, range) => {
|
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
},
|
showQuickJumper: true,
|
showSizeChanger: true,
|
total: 0
|
},
|
dataSource: []
|
}
|
},
|
methods: {
|
loadData(arg) {
|
if (!this.modalDataApiUrl) {
|
this.$message.error('请设置接口地址!')
|
return
|
}
|
//加载数据 若传入参数1则加载第一页的内容
|
if (arg === 1) this.ipagination.current = 1
|
const params = this.getQueryParams()//查询条件
|
console.log('params', params)
|
if (!params) return false
|
this.loading = true
|
getAction(this.modalDataApiUrl, params).then((res) => {
|
if (res.success) {
|
this.dataSource = res.result.records || res.result
|
if (res.result.total) this.ipagination.total = res.result.total
|
else this.ipagination.total = 0
|
} else {
|
this.$message.warning(res.message)
|
}
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
|
getQueryParams() {
|
//获取查询条件
|
let sqp = {}
|
const param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
|
param.field = this.getQueryField()
|
param.pageNo = this.ipagination.current
|
param.pageSize = this.ipagination.pageSize
|
return filterObj(param)
|
},
|
|
getQueryField() {
|
let str = 'id,'
|
this.modalTableColumns.forEach(function(value) {
|
str += ',' + value.dataIndex
|
})
|
return str
|
},
|
|
searchReset() {
|
this.queryParam = {}
|
this.loadData(1)
|
},
|
|
/**
|
* 分页变化时触发
|
* @param pagination 分页参数
|
*/
|
handleTableChange(pagination) {
|
this.ipagination = pagination
|
this.loadData()
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
/deep/ .ant-modal-content {
|
background-color: #000;
|
}
|
|
/deep/ .ant-modal-header {
|
background-color: #000;
|
}
|
|
/deep/ .ant-modal-title {
|
color: #fff;
|
}
|
|
/deep/ .ant-modal-close {
|
color: #fff;
|
}
|
|
/deep/ .ant-input {
|
color: #fff;
|
background-color: #000;
|
}
|
|
/deep/ .ant-form-item-label label {
|
color: #fff;
|
}
|
|
/deep/ .ant-table-thead th {
|
background-color: #5C5C5C;
|
color: #fff;
|
}
|
|
/deep/ .ant-table-tbody td {
|
background-color: #262626;
|
color: #fff;
|
}
|
|
/deep/ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
|
background: #7E7E7E;
|
}
|
|
/deep/ .ant-table-placeholder {
|
background-color: #000;
|
}
|
|
/deep/ .ant-table-placeholder .ant-empty-description {
|
color: #fff;
|
}
|
|
/deep/ .ant-pagination-item a {
|
background-color: #000;
|
color: #fff;
|
}
|
|
/deep/ .ant-pagination-item-link {
|
background-color: #000;
|
color: #fff;
|
}
|
|
/deep/ .ant-pagination-item-link:hover {
|
color: #1890FF;
|
border-color: #1890FF;
|
}
|
|
/deep/ .ant-pagination-item-active {
|
background-color: #000;
|
}
|
|
/deep/ .ant-select-selection--single {
|
background-color: #000;
|
color: #fff;
|
}
|
|
/deep/ .ant-pagination-options-quick-jumper {
|
color: #fff;
|
}
|
|
/deep/ .ant-pagination-options-quick-jumper input {
|
background-color: #000;
|
color: #fff;
|
}
|
|
/deep/ .ant-select-dropdown-menu-item {
|
background-color: #000;
|
color: #fff;
|
}
|
|
/deep/ .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
|
background-color: #1890FF;
|
}
|
</style>
|
