<template>
|
<a-card :bordered="false" style="margin-top:24px">
|
<div class="tableList">
|
<div class="tableListForm">
|
<a-form-model layout="horizontal">
|
<a-row :gutter="15">
|
<a-col :span="5">
|
<a-button
|
icon="plus"
|
type="primary"
|
@click="() => this.handleModalVisible(true)"
|
style="margin-left: 25px;"
|
>新建</a-button>
|
</a-col>
|
<a-col :span="5" style="margin-left: 37%">
|
<a-form-model-item :wrapperCol="wrapperCol">
|
<a-select
|
placeholder="选择站点类型"
|
style="width: 240px;margin-top:4px"
|
@change="handleChange"
|
allow-clear
|
show-search
|
>
|
<a-select-option v-for="(item,index) in stationLevel" :key="index" :value="index">
|
{{ item }}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="5" >
|
<a-form-model-item
|
:wrapperCol="wrapperCol">
|
<a-input v-model="searchName" placeholder="请输入站点名称" allow-clear />
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
</a-form-model
|
>
|
</div>
|
<av-standard-table
|
:dataSource="dataSource"
|
:columns="columns"
|
:loading="tableLoading"
|
:paginationProps="pagination"
|
@tableChange="handlerTableChange"
|
></av-standard-table>
|
</div>
|
<a-modal
|
title="政府站点添加"
|
destroyOnClose
|
:visible="addShowOrHiddenFlag"
|
@ok="addOK"
|
@cancel="addCancel"
|
okText="保存"
|
>
|
<a-form-model
|
style="margin-top: 8px"
|
:model="addForm"
|
:rules="rules"
|
ref="addRulesForm"
|
>
|
<a-form-model-item has-feedback
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="站点编号"
|
prop="guid">
|
<a-input
|
placeholder="请输入站点编号"
|
type="string"
|
v-model="addForm.guid"
|
/>
|
</a-form-model-item>
|
<a-form-model-item has-feedback
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="名称"
|
prop="name">
|
<a-input
|
placeholder="设备名称"
|
type="string"
|
v-model="addForm.name"
|
/>
|
</a-form-model-item>
|
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="经度"
|
prop="longitude"
|
>
|
<a-input
|
placeholder="请输入经度"
|
type="string"
|
v-model="addForm.longitude"
|
/>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="纬度"
|
prop="latitude"
|
>
|
<a-input
|
placeholder="请输入纬度"
|
type="string"
|
v-model="addForm.latitude"
|
/>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="位置"
|
has-feedback
|
prop="position"
|
>
|
<!-- v-decorator="['position', { rules: [{ required: true, message: '定位级别不能为空' }] }]"-->
|
<a-cascader :options="areaData" placeholder="选择城市" @change="positionLevel" labelInValue/>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="站点类型"
|
prop="stationLevel"
|
>
|
<a-select
|
placeholder="选择站点类型"
|
type="string"
|
allow-clear
|
show-search
|
v-model="addForm.stationLevel"
|
>
|
<a-select-option v-for="(item,index) in stationLevel" :key="index" :value = 'index'>{{ item }}</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="描述"
|
prop="desc"
|
>
|
<a-input
|
placeholder="描述"
|
type="string"
|
v-model="addForm.desc"
|
/>
|
</a-form-model-item>
|
</a-form-model>
|
</a-modal>
|
<a-modal
|
title="政府站点编辑"
|
destroyOnClose
|
:visible="editShowOrHiddenFlag"
|
@ok="editSave"
|
@cancel="editCancel"
|
okText="保存"
|
>
|
<a-form-model
|
style="margin-top: 8px"
|
:model="editForm"
|
:rules="rules"
|
ref="editRulesForm"
|
>
|
<a-form-model-item has-feedback
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="站点编号"
|
prop="guid">
|
<a-input
|
placeholder="请输入站点编号"
|
type="string"
|
v-model="editForm.guid"
|
/>
|
</a-form-model-item>
|
<a-form-model-item has-feedback
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="名称"
|
prop="name">
|
<a-input
|
placeholder="设备名称"
|
type="string"
|
v-model="editForm.name"
|
/>
|
</a-form-model-item>
|
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="经度"
|
prop="longitude"
|
>
|
<a-input
|
placeholder="请输入经度"
|
type="string"
|
v-model="editForm.longitude"
|
/>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="纬度"
|
prop="latitude"
|
>
|
<a-input
|
placeholder="请输入纬度"
|
type="string"
|
v-model="editForm.latitude"
|
/>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
:wrapperCol="{ span: 15 }"
|
label="位置"
|
has-feedback
|
prop="position"
|
>
|
<!-- v-decorator="['position', { rules: [{ required: true, message: '定位级别不能为空' }] }]"-->
|
<a-cascader v-model="editForm.position" :options="areaData" placeholder="双击选择城市"
|
@change="positionLevel" labelInValue/>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="站点类型"
|
prop="stationLevel"
|
>
|
<a-select
|
placeholder="选择站点类型"
|
type="string"
|
allow-clear
|
show-search
|
v-model="editForm.stationLevel"
|
>
|
<a-select-option v-for="(item,index) in stationLevel" :key="index" :value = 'index'>{{ item }}</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
<a-form-model-item
|
:labelCol="{ span: 5 }"
|
has-feedback
|
:wrapperCol="{ span: 15 }"
|
label="描述"
|
prop="desc"
|
>
|
<a-input
|
placeholder="描述"
|
type="string"
|
v-model="editForm.desc"
|
/>
|
</a-form-model-item>
|
</a-form-model>
|
</a-modal>
|
</a-card>
|
|
</template>
|
|
<script lang="tsx">
|
import {Component, Vue, Watch} from "vue-property-decorator";
|
import org from '@/util/org'
|
import { get, post } from "@/util/request";
|
@Component({
|
components: {
|
}
|
})
|
export default class govMonitorPoint extends Vue {
|
// 定义样式
|
private wrapperCol: any = {
|
sm: {span: 16}//控制文本框的长度
|
}
|
// 站点id查询条件
|
private stationLevelId: any = ''
|
// 列头
|
private columns: any[] = [
|
{
|
title: "站点编号",
|
dataIndex: "guid"
|
},
|
|
{
|
title: "名称",
|
dataIndex: "name"
|
},
|
{
|
title: "经度",
|
dataIndex: "longitude"
|
},
|
{
|
title: "纬度",
|
dataIndex: "latitude"
|
},
|
{
|
title: "定位",
|
dataIndex: "position"
|
},
|
{
|
title: "站点类型",
|
dataIndex: "stationLevelName"
|
},
|
{
|
title: "描述",
|
dataIndex: "desc"
|
},
|
{
|
title: "操作",
|
customRender: this.opRender
|
}
|
];
|
// 用于查询站点模糊查询
|
private searchName: string = ''
|
// 用于检验是否有数据
|
private tableLoading: boolean = false
|
// 数据
|
private dataSource: any[] =[]
|
// 显示新增隐藏标识
|
private addShowOrHiddenFlag: boolean = false
|
// 显示编辑隐藏标识
|
private editShowOrHiddenFlag: boolean = false
|
// 存放地理位置信息
|
private areaData: any = JSON.parse(JSON.stringify(org))
|
// 指定新增和编辑规则
|
private rules: any = {
|
guid: [
|
{required: true, message: '设备编号不能为空', trigger: ['change', 'blur']},
|
],
|
name: [
|
{required: true, message: '名称不能为空', trigger: ['change', 'blur']},
|
],
|
longitude: [
|
{required: true, message: '经度不能为空', trigger: ['change', 'blur']},
|
],
|
latitude: [
|
{required: true, message: '纬度不能为空', trigger: ['change', 'blur']},
|
],
|
position: [
|
{required: true, message: '请选择定位级别', trigger: ['change', 'blur']},
|
],
|
stationLevel: [
|
{required: true, message: '请选择站点类型', trigger: ['change', 'blur']},
|
]
|
}
|
// 政府站点类型
|
private stationLevel: any = {}
|
// 存放编辑前的数据record
|
private editBeforeRecord: any = null
|
// 新增表单数据
|
private addForm: any = {
|
guid: '',
|
name: '',
|
longitude: '',
|
latitude: '',
|
position: [],
|
stationLevel: undefined,
|
desc: ''
|
}
|
// 编辑表单数据
|
private editForm: any = {
|
id: -1,
|
guid: '',
|
name: '',
|
longitude: '',
|
latitude: '',
|
position: [],
|
stationLevel: undefined,
|
desc: ''
|
}
|
// 分页数据
|
private pagination: any = {
|
total: 0,
|
current: 0,
|
pageSize: 8,
|
showSizeChanger: false,
|
showQuickJumper: false
|
};
|
// 监听站点名称变化
|
@Watch('searchName', {
|
deep: true,
|
immediate:true
|
})
|
private watchName(newVal: string, oldVal: string) {
|
this.searchName = newVal
|
this.pagination.current = 1
|
this.queryGovDatas()
|
}
|
// 生命周期函数
|
private created() {
|
this.selectDatas()
|
this.queryGovDatas()
|
}
|
// 监听分页数据下标变化
|
private handlerTableChange(pagination: any, filter: any, sorter: any): void {
|
this.pagination.current = pagination.current
|
this.queryGovDatas()
|
}
|
//下拉查询框方法
|
private handleChange(selectedItems:any) {
|
if (selectedItems) {
|
this.stationLevelId = selectedItems
|
} else {
|
this.stationLevelId = ''
|
}
|
this.pagination.current = 1
|
this.queryGovDatas()
|
}
|
// 定位级别数据
|
private positionLevel(val: any, selectedOptions: any) {
|
if (selectedOptions && selectedOptions.length > 0) {
|
this.addForm.position = selectedOptions
|
}else {
|
this.addForm.position = undefined
|
}
|
}
|
// 获取下拉框数据
|
private selectDatas() {
|
get("dict/data/query?type=stationLevel ", {}).then(res => {
|
if (res.data.code === 0) {
|
this.stationLevel = res.data.data
|
}
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
}
|
// 查询所有站点信息
|
private queryGovDatas() {
|
get('govMonitorPoint/getGovMonitorPointByCondition', {
|
current: this.pagination.current,
|
size: this.pagination.pageSize,
|
name: this.searchName,
|
stationLevel: this.stationLevelId
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
this.pagination.total = res.data.data.totalNumber;
|
this.pagination.current = res.data.data.current;
|
const govDatas = res.data.data.govMonitorPointList
|
if (govDatas.length > 0) {
|
for (let i = 0; i < govDatas.length; i++) {
|
for (let j = 0; j <govDatas[i].position.length ; j++) {
|
govDatas[i].stationLevelName = this.stationLevel[govDatas[i].stationLevel]
|
}
|
}
|
}
|
this.dataSource = govDatas
|
}
|
})
|
}
|
// 新增显示
|
private handleModalVisible(flag: boolean) {
|
this.addShowOrHiddenFlag = flag
|
}
|
// 新增成功
|
private addOK() {
|
this.$refs.addRulesForm.validate((valid: any) => {
|
if (valid) {
|
post('govMonitorPoint/insert', {
|
guid: this.addForm.guid, //政府站点编码
|
name: this.addForm.name, //名称
|
longitude: this.addForm.longitude, //经度
|
latitude: this.addForm.latitude, //纬度
|
provinceCode: this.addForm.position[0].value,
|
cityCode: this.addForm.position[1].value,
|
areaCode: this.addForm.position[2].value,
|
stationLevel: this.addForm.stationLevel,
|
desc: this.addForm.desc //备注
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
this.pagination.current = 1
|
this.$message.success(res.data.message)
|
this.queryGovDatas()
|
} else {
|
this.$message.warning(res.data.message)
|
}
|
})
|
this.addShowOrHiddenFlag = false
|
this.addForm = {
|
guid: '',
|
name: '',
|
longitude: '',
|
latitude: '',
|
position: [],
|
stationLevel: undefined,
|
desc: ''
|
}
|
this.addShowOrHiddenFlag = false
|
}
|
})
|
}
|
// 新增取消
|
private addCancel() {
|
this.addForm = {
|
guid: '',
|
name: '',
|
longitude: '',
|
latitude: '',
|
position: [],
|
stationLevel: undefined,
|
desc: ''
|
}
|
this.addShowOrHiddenFlag = false
|
}
|
// 编辑显示
|
private editShow(flag:boolean, record: any) {
|
this.editShowOrHiddenFlag = flag
|
this.editBeforeRecord = record
|
const positon = []
|
positon.push(record.provinceCode)
|
positon.push(record.cityCode)
|
positon.push(record.areaCode)
|
this.editForm = {
|
id: record.id,
|
guid: record.guid,
|
name: record.name,
|
longitude: record.longitude,
|
latitude: record.latitude,
|
position: positon,
|
stationLevel: record.stationLevel,
|
desc: record.desc === undefined ? '' : record.desc
|
}
|
}
|
// 编辑保存
|
private editSave() {
|
this.$refs.editRulesForm.validate((valid: any) => {
|
if (valid) {
|
const name = this.editForm.name === this.editBeforeRecord.name ? null : this.editForm.name
|
const guid = this.editForm.guid === this.editBeforeRecord.guid ? null : this.editForm.guid
|
const longitude = this.editForm.longitude === this.editBeforeRecord.longitude ? null : this.editForm.longitude
|
const latitude = this.editForm.latitude === this.editBeforeRecord.latitude ? null : this.editForm.latitude
|
const position = (this.editForm.position[0] ===this.editBeforeRecord.provinceCode &&
|
this.editForm.position[1] ===this.editBeforeRecord.cityCode &&
|
this.editForm.position[2] ===this.editBeforeRecord.areaCode) ? null : this.editForm.position
|
const stationLevel = this.editForm.stationLevel === this.editBeforeRecord.stationLevel ? null : this.editForm.stationLevel
|
const desc = this.editBeforeRecord.desc === undefined ? (this.editForm.desc === '' ? null : this.editForm.desc) :
|
this.editForm.desc === this.editBeforeRecord.desc ? null : this.editForm.desc
|
if (!(name || guid || longitude || latitude || position || stationLevel || desc)) {
|
this.$message.warning('未修改！')
|
} else {
|
post('govMonitorPoint/update', {
|
id: this.editForm.id,
|
guid,
|
name,
|
longitude,
|
latitude,
|
provinceCode: position === null ? null : position[0],
|
cityCode: position === null ? null : position[1],
|
areaCode: position === null ? null : position[2],
|
stationLevel,
|
desc
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
this.$message.success(res.data.message)
|
this.editForm = {
|
id: -1,
|
guid: '',
|
name: '',
|
longitude: '',
|
latitude: '',
|
position: [],
|
stationLevel: undefined,
|
desc: ''
|
}
|
this.editShowOrHiddenFlag = false
|
this.queryGovDatas()
|
} else {
|
this.$message.warning(res.data.message)
|
}
|
})
|
}
|
}
|
})
|
}
|
// 编辑取消
|
private editCancel() {
|
this.editForm = {
|
id: -1,
|
guid: '',
|
name: '',
|
longitude: '',
|
latitude: '',
|
position: [],
|
stationLevel: undefined,
|
desc: ''
|
}
|
this.editShowOrHiddenFlag = false
|
}
|
// 删除
|
private delete(record: any) {
|
post('govMonitorPoint/delete', {
|
id: record.id
|
}).then((res: any) => {
|
if (res.data.code === 0) {
|
this.$message.success(res.data.message)
|
this.pagination.current = 1
|
this.queryGovDatas()
|
} else {
|
this.$message.warning(res.data.message)
|
}
|
})
|
}
|
// 数据操作方法
|
private opRender(text: string, record: any, index: number) {
|
return (
|
<div>
|
<a onClick={() => this.editShow(true, record)}>
|
{" "}
|
编辑{" "}
|
</a>
|
<a-divider type="vertical"/>
|
<a-popconfirm
|
title="确认删除吗？"
|
ok-text="确定"
|
cancel-text="取消"
|
onConfirm={() => this.delete(record)}
|
>
|
<a href="#">删除</a>
|
</a-popconfirm>
|
</div>
|
)
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
