<template>
|
<a-modal :title="modalTitle" :width="modalWidth" :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.equipmentNum"></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" :loading="loading"
|
@change="handleTableChange" style="margin-top: 20px" rowKey="equipmentNum"></a-table>
|
</a-modal>
|
</template>
|
|
<script>
|
import { putAction, getAction } from '@/api/manage'
|
import { filterObj } from '@/utils/util'
|
|
export default {
|
name: 'SignageModal',
|
components: {},
|
props: {
|
modalWidth: {
|
type: Number,
|
default: 1048
|
},
|
modalTitle: {
|
type: String
|
},
|
modalDataApiUrl: {
|
type: String
|
},
|
modalVisible: {
|
type: Boolean
|
},
|
modalDataApiParams: {
|
type: Object
|
}
|
},
|
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: [],
|
modalTableColumns: [
|
{
|
title: '#',
|
dataIndex: '',
|
key: 'rowIndex',
|
width: 60,
|
align: 'center',
|
customRender: function(t, r, index) {
|
return parseInt(index) + 1
|
}
|
},
|
{
|
width: 150,
|
align: 'center',
|
title: '设备编号',
|
dataIndex: 'equipmentNum',
|
key: 'equipmentNum'
|
},
|
{
|
width: 200,
|
align: 'center',
|
title: '设备名称',
|
dataIndex: 'equipmentName',
|
key: 'equipmentName'
|
},
|
{
|
width: 200,
|
align: 'center',
|
title: '设备型号',
|
dataIndex: 'equipmentModel',
|
key: 'equipmentModel'
|
},
|
{
|
width: 250,
|
align: 'center',
|
title: '规格',
|
key: 'specification',
|
dataIndex: 'specification'
|
},
|
{
|
width: 140,
|
align: 'center',
|
title: '技术状态',
|
key: 'technologyStatus',
|
dataIndex: 'technologyStatus'
|
}
|
]
|
}
|
},
|
methods: {
|
loadData(arg) {
|
if (!this.modalDataApiUrl) {
|
this.$message.error('请设置接口地址!')
|
return
|
}
|
//加载数据 若传入参数1则加载第一页的内容
|
if (arg === 1) this.ipagination.current = 1
|
const params = this.getQueryParams()//查询条件
|
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.modalDataApiParams, 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.dataSource = []
|
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>
|
