<template>
|
<a-modal :visible="visible" title="历史数据显示" @cancel="handleCancel" footer='' width="60%">
|
<a-card :bordered="false" style="margin-top:-15px">
|
<div >
|
<div >
|
<a-form-model>
|
<a-row>
|
<a-col :span="8">
|
<a-form-model-item :labelCol="{span:16}" :wrapperCol="{span:20}">
|
<a-select
|
placeholder="选择组织(输入名称搜索)"
|
allow-clear
|
show-search
|
style="width:200px"
|
:filter-option="filterOption"
|
@change="handleChange"
|
>
|
<!-- @change="handleChange" -->
|
<a-select-option v-for="(item,index) in orgData" :key="index" :value="item.id">
|
{{ item.name }}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="6">
|
<a-form-model-item
|
:labelCol="{span:16}" :wrapperCol="{span:20}"
|
fieldDecoratorId="name"
|
>
|
<a-input v-model="serchName" placeholder="请输入设备名称"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
</a-form-model>
|
</div>
|
<av-standard-table
|
:dataSource="dataSource"
|
:columns="columns"
|
:paginationProps="pagination"
|
@tableChange="handlerTableChange"
|
></av-standard-table>
|
<!-- :loading="tableLoading"
|
:paginationProps="pagination"
|
@tableChange="handlerTableChange"
|
@selectChange="handlerSelectChange"-->
|
</div>
|
</a-card>
|
</a-modal>
|
</template>
|
|
<script lang="tsx">
|
import {Component, Vue, Prop, Emit, Watch} from "vue-property-decorator";
|
import { get, post } from "@/util/request";
|
|
@Component({
|
components: {
|
}
|
})
|
export default class historyTable extends Vue {
|
// 历史数据显示隐藏标识
|
@Prop({
|
type: Boolean,
|
default: false
|
})
|
private visible!: boolean
|
|
@Prop({
|
type: Array,
|
default: []
|
})
|
private orgData!: any[]
|
|
|
//存放分页数据
|
private pagination: any = {
|
total: 0,
|
current: 1,
|
pageSize: 5,
|
showSizeChanger: false,
|
showQuickJumper: false
|
};
|
|
// 查询数据
|
private serchName: string = ''
|
|
// 存放组织查询的id
|
private orgId: any = null
|
|
// 存放下拉数据
|
private dataSource: any = null
|
|
private columns: any[] = [
|
{
|
title: "名称",
|
dataIndex: "name"
|
},
|
{
|
title: "mac",
|
dataIndex: "mac"
|
},
|
{
|
title: "型号",
|
dataIndex: "version.name"
|
},
|
{
|
title: "历史组织",
|
dataIndex: "organization.name"
|
},
|
{
|
title: "政府站点",
|
dataIndex: "govMonitorPoint.name"
|
},
|
{
|
title: "维护人",
|
dataIndex: "operates"
|
},
|
{
|
title: "设备类型",
|
dataIndex: "specialType.name"
|
},
|
{
|
title: "更新时间",
|
dataIndex: "updateTime"
|
},
|
{
|
title: "操作",
|
customRender: this.opRender
|
}
|
];
|
|
@Watch('visible',{
|
deep: true
|
})
|
private wacthVisible(newVal: boolean, oldVal: boolean) {
|
this.getHistoryData()
|
}
|
|
@Watch('serchName',{
|
deep: true
|
})
|
private wacthSerchName(newVal: boolean, oldVal: boolean) {
|
this.getHistoryData()
|
}
|
|
// 下拉模糊查询
|
private filterOption(input: any, option: any) {
|
return (
|
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
);
|
}
|
|
//下拉组织数据
|
private handleChange(selectedItems:any) {
|
if (selectedItems === undefined) {
|
this.orgId = null
|
}else {
|
this.orgId = selectedItems;
|
}
|
this.getHistoryData()
|
}
|
private getHistoryData() {
|
get('specialDeviceHistory/getSpecialDeviceHistoryByCondition', {
|
current: this.pagination.current,
|
size:this.pagination.pageSize,
|
organization_id: this.orgId,
|
keyword: this.serchName
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
const specialDevices = res.data.data.specialDevices
|
// 处理维护人数组，以字符串方式显示
|
specialDevices.forEach((item: any) => {
|
let operates = ''
|
if (item.operates) {
|
for (let i = 0; i < item.operates.length; i++) {
|
operates += item.operates[i].name+'、'
|
}
|
}
|
if (operates.length > 0) {
|
operates = operates.substr(0, operates.length - 1);
|
}
|
item.operates = operates
|
})
|
this.pagination.total = res.data.data.totalNumber;
|
this.pagination.current = res.data.data.current;
|
|
this.dataSource = specialDevices
|
console.log(this.dataSource);
|
|
}
|
})
|
}
|
|
// 监听分页数据下标变化
|
private handlerTableChange(pagination: any, filter: any, sorter: any): void {
|
this.pagination.current = pagination.current
|
this.getHistoryData()
|
}
|
|
@Emit('hFlag')
|
private sendFlag(flag: boolean) {
|
return flag;
|
}
|
// 隐藏model框
|
private handleCancel() {
|
this.sendFlag(false)
|
}
|
|
// 删除数据
|
private deleteHistoryDevice(record: any) {
|
post('specialDeviceHistory/delete', {
|
id: record.id
|
}
|
).then((res: any) => {
|
if (res.data.code === 0) {
|
this.$message.success(res.data.message)
|
this.pagination.current = 0
|
this.getHistoryData()
|
} else {
|
this.$message.warning(res.data.message)
|
}
|
})
|
}
|
|
private opRender(text: string, record: any, index: number) {
|
return (
|
<div>
|
<a-popconfirm
|
title="确认删除吗？"
|
ok-text="确定"
|
cancel-text="取消"
|
onConfirm={() => this.deleteHistoryDevice(record)}
|
>
|
<a href="#">删除</a>
|
</a-popconfirm>
|
</div>
|
)
|
;
|
}
|
|
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
