|
<template>
<div class="equipment-container">
<div class="search-container">
<div class="search-ctn">
<div>
<div class="label">设备类型：</div>
<div class="input-rule">
<t-select v-model="queryCondition.equipmentType" style="width: 200px" clearable placeholder="请输入...">
<t-option value="1">风机</t-option>
<t-option value="2">升压站</t-option>
<t-option value="3">船舶</t-option>
</t-select>
</div>
</div>
<div>
<div class="label">设备名称：</div>
<div class="input-rule">
<t-input v-model="queryCondition.equipmentName" style="width: 200px" placeholder="请输入..." clearable></t-input>
<!-- <t-select v-model="queryCondition.equipmentName" filterable clearable :loading.sync="currentLoading" @load="$_onLoad" width="200">-->
<!-- <t-option v-for="item in searchResult"-->
<!-- :key="item.value"-->
<!-- >{{ item.FACILITY_NAME }}</t-option>-->
<!-- </t-select>-->
</div>
</div>
<div>
<div class="label">设备编号：</div>
<div class="input-rule">
<t-input v-model="queryCondition.equipmentNumber" style="width: 200px" placeholder="请输入..." clearable></t-input>
<!-- <t-select filterable-->
<!-- clearable-->
<!-- :loading.sync="currentLoading_n"-->
<!-- @load="$_onLoad_n"-->
<!-- v-model="queryCondition.equipmentNumber"-->
<!-- width="200" id="ccc"-->
<!-- >-->
<!-- <t-option v-for="item in searchResult_n"-->
<!-- :key="item.value"-->
<!-- >{{ item.FACILITY_CODE }}</t-option>-->
<!-- </t-select>-->
</div>
</div>
<div class="btns">
<t-button color="secondary" class="reset-btn" @click="onReset">重置</t-button>
<t-button color="success" icon="search-outline" @click="onSearch">查询</t-button>
<t-button color="secondary" icon="upload-outline" @click="toExport">导出至Excel</t-button>
<t-button color="secondary" icon="delete-outline" @click="toExport">删除</t-button>
</div>
</div>
<div class="search-ctn" style="justify-content: flex-end;">
<div class="btns">
<t-button color="success" icon="upload-outline" @click="onReset">导入</t-button>
<t-button color="success" icon="download-outline" @click="onReset">下载模板</t-button>
<t-button color="success" icon="plus-outline" @click="addEquipment">新增</t-button>
</div>
</div>
</div>
<div>
<t-table :data="table.data">
<t-table-column prop="FACILITY_NAME" label="设备名称"></t-table-column>
<t-table-column prop="FACILITY_CODE" label="设备编号"></t-table-column>
<t-table-column prop="FACILITY_TYPE" label="设备类型">
<template slot-scope="scope">
<div v-if="scope.row.FACILITY_TYPE==1">
<span >风机</span>
</div>
<div v-if="scope.row.FACILITY_TYPE==2">
<span>升压站</span>
</div>
<div v-if="scope.row.FACILITY_TYPE==3">
<span>船舶</span>
</div>
</template>
</t-table-column>
<t-table-column prop="LONGITUDE" label="经度"></t-table-column>
<t-table-column prop="LATITUDE" label="纬度"></t-table-column>
<t-table-column
fixed="right"
label="操作"
width="120"
>
<template slot-scope="scope">
<a href="javascript:void(0)" size="sm" @click="handleClick(scope.row)">编辑</a>
<span class="mod-line">|</span>
<a href="javascript:void(0)" size="sm" @click="remove(scope.row)">删除</a>
</template>
</t-table-column>
</t-table>
<t-pager :total="table.pager.total" :current.sync="table.pager.currentPage"
:page-size.sync="table.pager.size"
:sizer-range="[10,20,50]"
class="px-24 pt-16 float-right"
show-elevator show-sizer
@on-size-change="onSizeChange"
@on-change="onPagerChange">
</t-pager>
</div>
<t-modal :visibled.sync="modal" title="新增设备" >
<t-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" label-position="left">
<t-form-item label="设备类型" prop="type">
<t-select v-model="formValidate.type" placeholder="请选择设备类型" clearable>
<t-option v-for="(item, index) in typeList" :value="item.value" :key="index">{{ item.label }}</t-option>
</t-select>
</t-form-item>
<t-form-item label="设备名称" prop="name">
<t-input v-model="formValidate.name" placeholder="请输入风机名称"></t-input>
</t-form-item>
<t-form-item label="设备编号" prop="number">
<t-input v-model="formValidate.number" placeholder="请输入字母、数字、中划线、下划线、#"></t-input>
</t-form-item>
<t-form-item label="经度" prop="lng">
<t-input v-model="formValidate.lng" placeholder="请输入数字"></t-input>
</t-form-item>
<t-form-item label="纬度" prop="lat">
<t-input v-model="formValidate.lat" placeholder="请输入数字"></t-input>
</t-form-item>
</t-form>
<div slot="footer">
<t-button @click="cancel">取消</t-button>
<t-button class="submit-button" @click="submit">保存</t-button>
</div>
</t-modal>
<t-modal :visibled.sync="updateModal" title="编辑设备" >
<t-form ref="updateRow" :model="updateRow" :rules="updateRowValidate" :label-width="80" label-position="left">
<!-- <t-form-item label="设备类型" prop="type">-->
<!-- <template v-if="updateRow.FACILITY_TYPE==1">-->
<!-- 风机-->
<!-- </template>-->
<!-- <template v-if="updateRow.FACILITY_TYPE==2">-->
<!-- 升压站-->
<!-- </template>-->
<!-- <template v-if="updateRow.FACILITY_TYPE==3">-->
<!-- 船舶-->
<!-- </template>-->
<!-- </t-form-item>-->
<t-form-item label="设备类型" prop="FACILITY_TYPE">
<t-select v-model="updateRow.FACILITY_TYPE" placeholder="请选择设备类型" clearable>
<t-option v-for="(item, index) in typeList" :value="item.value" :key="index">{{ item.label }}</t-option>
</t-select>
</t-form-item>
<t-form-item label="设备名称" prop="FACILITY_NAME">
<t-input v-model="updateRow.FACILITY_NAME" placeholder="请输入风机名称"></t-input>
</t-form-item>
<t-form-item label="设备编号" prop="FACILITY_CODE">
{{updateRow.FACILITY_CODE }}
</t-form-item>
<t-form-item label="经度" prop="LONGITUDE">
<t-input v-model="updateRow.LONGITUDE" placeholder="请输入数字"></t-input>
</t-form-item>
<t-form-item label="纬度" prop="LATITUDE">
<t-input v-model="updateRow.LATITUDE" placeholder="请输入数字"></t-input>
</t-form-item>
</t-form>
<div slot="footer">
<t-button @click="cancel">取消</t-button>
<t-button class="submit-button" @click="updateSubmit">保存</t-button>
</div>
</t-modal>
</div>
</template>
<script>
import './equipment-management.scss'
import services from '../../conf/services'
export default {
data() {
return {
// currentLoading: false,
// searchResult: [],
// demoDataA: [],
// currentLoading_n: false,
// searchResult_n: [],
// demoDataA_n: [],
typeList: [
{
value: '1',
label: '风机'
},
{
value: '2',
label: '升压站'
},
{
value: '3',
label: '船舶'
}
],
table: {
data: [
],
pager: {
currentPage: 1,
size: 10,
total: 0
}
},
queryCondition: {
type: '',
equipmentType: '',
equipmentName: '',
equipmentNumber: ''
},
rangeDate: '',
modal: false,
updateModal: false,
updateRow: {
FACILITY_TYPE: '',
FACILITY_NAME: '',
FACILITY_CODE: '',
LONGITUDE: '',
LATITUDE: ''
},
formValidate: {
type: '',
name: '',
number: '',
lng: '',
lat: ''
},
ruleValidate: {
type: [{
required: true,
message: '设备类型不能为空',
trigger: 'change'
}],
name: [
{
required: true,
message: '设备名称不能为空',
trigger: 'blur'
},
{
message: '设备名称重复',
trigger: 'blur',
validator: function(rule, value, callback) {
// TODO 判断编号重复
if (false) {
callback(rule.message)
}else {
return true
}
}
}
],
number: [
{
required: true,
message: '编号不能为空',
trigger: 'blur'
},
{
message: '请输入字母、数字、中划线、下划线、#',
trigger: 'blur',
validator: function(rule, value, callback) {
if (!/^[a-zA-Z0-9-_#]+$/.test(value)) {
callback(rule.message)
} else {
// TODO 判断编号重复
if (false) {
rule.message = '编号重复'
callback(rule.message)
}else {
return true
}
}
}
}
],
lng: [
{
required: true,
message: '经度不能为空',
trigger: 'blur'
},
{
message: '请输入数字',
trigger: 'blur',
validator: function(rule, value, callback) {
if (isNaN(value)) {
callback(rule.message)
}else {
return true
}
}
}
],
lat: [
{
required: true,
message: '经度不能为空',
trigger: 'blur'
},
{
message: '请输入数字',
trigger: 'blur',
validator: function(rule, value, callback) {
if (isNaN(value)) {
callback(rule.message)
}else {
return true
}
}
}
]
},
updateRowValidate: {
FACILITY_TYPE: [{
required: true,
message: '设备类型不能为空',
trigger: 'change'
}],
FACILITY_NAME: [
{
required: true,
message: '设备名称不能为空',
trigger: 'blur'
},
{
message: '设备名称重复',
trigger: 'blur',
validator: function(rule, value, callback) {
// TODO 判断编号重复
if (false) {
callback(rule.message)
}else {
return true
}
}
}
],
LONGITUDE: [
{
required: true,
message: '经度不能为空',
trigger: 'blur'
},
{
message: '请输入数字',
trigger: 'blur',
validator: function(rule, value, callback) {
if (isNaN(value)) {
callback(rule.message)
}else {
return true
}
}
}
],
LATITUDE: [
{
required: true,
message: '经度不能为空',
trigger: 'blur'
},
{
message: '请输入数字',
trigger: 'blur',
validator: function(rule, value, callback) {
if (isNaN(value)) {
callback(rule.message)
}else {
return true
}
}
}
]
}
}
},
mounted() {
this.getList(1, 10, '', '', '')
},
methods: {
// $_onLoad(filterValue) {
// this.queryCondition.equipmentName = filterValue
// window.setTimeout(() => {
// var params = new FormData()
// params.append('data', JSON.stringify({
// params: {
// FACILITY_NAME: filterValue
// }
// }))
// this.$test.post(services.equipment.GET_EQUIPMENT, params
// ).then(res => {
// // 请求成功处理...
// let d = res.data.result.list.concat()
// this.searchResult = d
// this.currentLoading = false
// }).catch(res => {
// // 请求失败处理...
// })
// }, 1000)
// },
// $_onLoad_n(filterValue) {
// this.queryCondition.equipmentNumber = filterValue
// window.setTimeout(() => {
// var params = new FormData()
// params.append('data', JSON.stringify({
// params: {
// FACILITY_CODE: filterValue
// }
// }))
// this.$test.post(services.equipment.GET_EQUIPMENT, params
// ).then(res => {
// // 请求成功处理...
// let d = res.data.result.list.concat()
// this.searchResult_n = d
// this.currentLoading_n = false
// }).catch(res => {
// // 请求失败处理...
// })
// }, 1000)
// },
getList(pageNum, pageSize, type, name, number) {
var params = new FormData()
params.append('data', JSON.stringify({
params: {
pageNum: pageNum,
pageSize: pageSize,
FACILITY_CODE: number,
FACILITY_TYPE: type,
FACILITY_NAME: name
}
}))
this.$test.post(services.equipment.GET_EQUIPMENT, params
).then(res => {
// 请求成功处理...
this.table.data = res.data.result.list
this.table.pager.total = res.data.result.total
this.table.pager.currentPage = res.data.result.pageNum
}).catch(res => {
// 请求失败处理...
})
},
onChange(value) {
console.log('date change:' + value)
},
onReset() {
this.queryCondition.equipmentType = ''
this.queryCondition.equipmentName = ''
this.queryCondition.equipmentNumber = ''
this.searchResult = [
{
FACILITY_CODE: '',
FACILITY_ID: '',
FACILITY_NAME: '',
FACILITY_TYPE: '',
LATITUDE: '',
LONGITUDE: ''
}
]
this.searchResult_n = [
{
FACILITY_CODE: '',
FACILITY_ID: '',
FACILITY_NAME: '',
FACILITY_TYPE: '',
LATITUDE: '',
LONGITUDE: ''
}
]
this.onSearch()
},
onSearch() {
console.log(this.queryCondition.equipmentType)
console.log(this.queryCondition.equipmentName)
this.getList(1, this.table.pager.size, this.queryCondition.equipmentType, this.queryCondition.equipmentName, this.queryCondition.equipmentNumber)
},
toExport() {
},
onPagerChange(page) {
this.getList(page, this.table.pager.size, '', '', '')
},
onSizeChange(number) {
this.getList(1, number, '', '', '')
},
cancel() {
this.modal = false
this.updateModal = false
this.formValidate.type = ''
this.formValidate.name = ''
this.formValidate.number = ''
this.formValidate.lng = ''
this.formValidate.lat = ''
this.getList(this.table.pager.currentPage, this.table.pager.size, this.queryCondition.equipmentType, this.queryCondition.equipmentName, this.queryCondition.equipmentNumber)
},
submit() {
debugger
this.$refs.formValidate.validate(valid => {
console.log(valid)
if (valid) {
var params = new FormData()
params.append('data', JSON.stringify({
params: {
FACILITY_TYPE: this.formValidate.type,
FACILITY_NAME: this.formValidate.name,
FACILITY_CODE: this.formValidate.number,
LONGITUDE: this.formValidate.lng,
LATITUDE: this.formValidate.lat
}
}))
this.$test.post(services.equipment.ADD_EQUIPMENT, params
).then(res => {
// 请求成功处理...
this.$Message.success('提交成功!')
this.cancel()
// this.getList(this.table.pager.currentPage, this.table.pager.size, this.queryCondition.equipmentType, this.queryCondition.equipmentName, this.queryCondition.equipmentNumber)
}).catch(res => {
// 请求失败处理...
})
} else {
this.$Message.danger('表单验证失败!')
}
})
},
updateSubmit() {
debugger
this.$refs.updateRow.validate(valid => {
console.log(valid)
if (valid) {
var params = new FormData()
params.append('data', JSON.stringify({
params: {
FACILITY_ID: this.updateRow.FACILITY_ID,
FACILITY_TYPE: this.updateRow.FACILITY_TYPE,
FACILITY_NAME: this.updateRow.FACILITY_NAME,
LONGITUDE: this.updateRow.LONGITUDE,
LATITUDE: this.updateRow.LATITUDE
}
}))
this.$test.post(services.equipment.ADD_EQUIPMENT, params
).then(res => {
// 请求成功处理...
this.$Message.success('提交成功!')
this.cancel()
}).catch(res => {
// 请求失败处理...
})
} else {
this.$Message.danger('表单验证失败!')
}
})
},
addEquipment() {
this.modal = true
},
handleClick(row) {
this.updateModal = true
this.updateRow = row
},
remove(row) {
let that = this
let confirm = {
title: '请确认',
content: '删除后不可恢复,确认删除吗?',
ok: function () {
var params = new FormData()
params.append('data', JSON.stringify({
params: {
FACILITY_ID: row.FACILITY_ID
}
}))
this.$test.post(services.equipment.DEL_EQUIPMENT, params
).then(res => {
// 请求成功处理...
that.$Message.success('操作成功')
that.getList(that.table.pager.currentPage, that.table.pager.size, that.queryCondition.equipmentType, that.queryCondition.equipmentName, that.queryCondition.equipmentNumber)
}).catch(res => {
// 请求失败处理...
})
}
}
this.$Confirm.confirm(confirm)
}
}
}
</script>
|
