<el-header height="62px" class="filter-container">
<el-row>
<el-col :span="21">
<el-form :inline="true" :model="formSearch" class="demo-form-inline">
<el-form-item>
<el-input v-model="formSearch.value" placeholder="请输入水道名称" clearable></el-input>
</el-form-item>
<el-form-item>
<el-select v-model="formSearch.type" filterable clearable placeholder="请选择水道类型">
<el-option v-for="item in dataType" :key="item.value" :label="item.text" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="formSearch.official" placeholder="请选择水道性质" filterable clearable>
<el-option key="true" label="正式水道" value="true"></el-option>
<el-option key="false" label="测试水道" value="false"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loadMain" size="small" icon="el-icon-search" round>搜索</el-button>
</el-form-item>
</el-form>
</el-col>
<el-col :span="3" style="text-align: right">
<el-button @click="handleAdd" v-show="visibleBtnAdd" type="success" size="small" icon="el-icon-plus" round>新增水道</el-button>
</el-col>
</el-row>
</el-header>
<el-main ref="layoutMain" class="table-container">
<el-table :data="dataMain" :height="heightMain" stripe highlight-current-row class="el-table-border">
<el-table-column prop="name" label="水道名称"></el-table-column>
<el-table-column prop="swzName" label="水位站"></el-table-column>
<el-table-column prop="typeName" label="水道类型" width="100"></el-table-column>
<el-table-column prop="isOfficial" label="水道性质" align="center" width="100" :formatter="formatOfficial"></el-table-column>
<el-table-column prop="startName" label="水道起点" width="100"></el-table-column>
<el-table-column prop="endName" label="水道讫点" width="100"></el-table-column>
<el-table-column label="里程" width="100">
<template slot-scope="scope">{{ Math.abs(scope.row.endMileage - scope.row.startMileage) + '公里' }}</template>
</el-table-column>
<el-table-column prop="remark" label="水道概况" width="200"></el-table-column>
<el-table-column label="操作" align="center" fixed="right" width="150">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.row)" v-show="visibleBtnEdit" type="primary" size="mini" round plain>编辑</el-button>
<el-button @click="handleDelete(scope.row)" v-show="visibleBtnDelete" type="danger" size="mini" round plain>删除</el-button>
</template>
</el-table-column>
</el-table>
</el-main>
<el-footer>
<el-pagination
@size-change="handlePageSizeChange"
@current-change="handlePageCurrentChange"
:current-page="dataPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="dataSize"
:total="dataTotal"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</el-footer>
<el-dialog
:title="dataRecordTitle[actionDialogRecord]"
:visible.sync="visibleDialogRecord"
:close-on-click-modal="false"
:before-close="handleClose" >
<el-form
class="large-space"
ref="formRecord"
:model="formRecord"
:rules="ruleRecord"
label-position="left"
label-width="90px">
<el-row :gutter="24">
<el-col :span="4"><strong>图片信息</strong></el-col>
<el-col :span="20">
<el-upload
:action="imageUpload"
:headers="headers"
:with-credentials="true"
list-type="picture-card"
:file-list="formRecord.waterInfomationPicDTO"
:on-success="handleAvatarSuccess"
:on-preview="handlePictureCardPreview"
:before-upload="beforeAvatarUpload"
:on-remove="handleRemove" style="float: left; margin-bottom: 10px">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" size="tiny">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-col>
</el-row>
<el-form-item label="水道名称" prop="name">
<el-input v-model="formRecord.name"></el-input>
</el-form-item>
<el-row :gutter="20">
<el-col :span="12"><el-form-item label="水道类型" prop="type">
<el-select v-model="formRecord.type" filterable placeholder="请选择水道类型" style="width: 100%">
<el-option v-for="item in dataType" :key="item.value" :label="item.text" :value="item.value">
</el-option>
</el-select>
</el-form-item></el-col>
<el-col :span="12"><el-form-item label="水道性质" prop="official">
<el-switch
v-model="formRecord.official"
:disabled.sync="disabledSelOfficial"
active-text="正式水道"
inactive-text="测试水道"
></el-switch>
</el-form-item></el-col>
</el-row>
<!-- <el-form-item label="位置" prop="waterway">
<map-box v-loading="loadingWaterway" @mapReady="handleMapReady" class="map-box"></map-box>
</el-form-item> -->
<el-row :gutter="20">
<el-col :span="12"><el-form-item label="水道起点" prop="start">
<el-select ref="selStart" v-model="formRecord.start" filterable placeholder="请选择水道起点" style="width: 100%">
<el-option v-for="item in dataNode" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item></el-col>
<el-col :span="12"><el-form-item label="水道讫点" prop="end">
<el-select ref="selEnd" v-model="formRecord.end" filterable placeholder="请选择水道讫点" style="width: 100%">
<el-option v-for="item in dataNode" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12"><el-form-item label="水位站" prop="swzId">
<el-select ref="selStation" v-model="formRecord.swzId" filterable placeholder="请选择关联水位站" style="width: 100%">
<el-option v-for="item in dataWaterStation" :key="item[0]" :label="item[1]" :value="item[0]">
</el-option>
</el-select>
</el-form-item></el-col>
</el-row>
<el-form-item label="水道概况" prop="remark">
<el-input type="textarea" v-model="formRecord.remark"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleCancel">取消</el-button>
<el-button @click="handleSave" type="primary">保存</el-button>
</div>
</el-dialog>
.map-box { height: 200px; overflow: auto; border: 1px solid #ebeef5; } import $ from 'jquery' import waves from '@/directive/waves/index.js' import MapBox from '@/components/mapBox.vue' import { addGraphicsLayer, RAddListGraphic, RegClick } from '@/filters/RMapUitl.js' import { queryWaterwayList, queryWaterwayPointList, waterInfomationList } from '@/api/base/waterway' import { debounce, getTableHeight } from '@/utils' import { queryNodeList } from '@/api/base/node' import { queryChannelTypeList, queryChannelFullList, queryChannelAdd, queryChannelEdit, queryChannelDelete } from '@/api/base/channel' import { fetchSelectData, getCoordinate, addWaterStation, getWaterStation, updateWaterStation, getUpload, deletePicByid, fetchCjjmDetail } from '@/api/water/waterStation.js' import {getToken} from '@/utils/auth' // 验权 export default { name: 'channel_page', directives: { waves }, components: { MapBox }, data() { return { visibleBtnAdd: true, visibleBtnEdit: true, visibleBtnDelete: true, formSearch: { type: undefined, value: '', official: undefined }, formRecord: { id: null, name: '', type: null, official: false, waterway: null, startId: null, endId: null, start: null, end: null, swzId: null, remark: '', waterInfomationPicDTO: [] }, imageUpload: getUpload(), headers: {'X-Token': getToken()}, heightMain: getTableHeight(10), dataWaterway: [], dataWaterStation: [], dataType: [], dataNode: [], dataMain: [], dataTotal: 0, dataPage: 1, dataSize: 10, loadingData: false, loadingWaterway: false, visibleDialogRecord: false, disabledSelOfficial: false, actionDialogRecord: '', fullscreenLoading: false, dialogVisible: false, dialogImageUrl: '' } }, computed: { ruleRecord: () => { return { name: [ { required: true, message: '请输入水道名称', trigger: 'blur' }, { max: 30, message: '长度不得超过30个字符', trigger: 'blur' } ], type: [ { required: true, message: '请选择水道类型', trigger: 'blur' } ], waterway: [ { required: true, message: '请选择水道位置', trigger: 'blur' } ], start: [ { required: true, message: '请选择水道起点', trigger: 'blur' } ], end: [ { required: true, message: '请选择水道讫点', trigger: 'blur' } ], swzId: [ { required: true, message: '请选择水位站', trigger: 'blur' } ], remark: [ { max: 100, message: '长度不得超过100个字符', trigger: 'blur' } ] } }, dataRecordTitle: () => { return { add: '新增水道', edit: '编辑水道' } } }, beforeDestroy() { window.removeEventListener('resize', this.__resizeHanlder) }, mounted() { this.__resizeHanlder = debounce(() => { this.heightMain = getTableHeight(10) }, 100) window.addEventListener('resize', this.__resizeHanlder) this.loadMain() queryChannelTypeList(null, result => { this.dataType = result }) this.dataWaterway = [] queryWaterwayList(null, result => { if (result) { for (const i in result) { const record = result[i] queryWaterwayPointList({ 'waterway': record.id }, ((me, polyline) => { return result => { if (result) { for (const i in result) { const record = result[i] if (polyline.geometry.length > 0) { polyline.geometry += '#' } polyline.geometry += record.long + ',' + record.lat } } me.dataWaterway.push(polyline) } })(this, { 'id': record.id, 'xtype': 'polyline', 'style': { 'stype': 'lineSymbol' }, 'geometry': '' })) } } }), // 新建水道->水位站选项数据获取 waterInfomationList(null, result => { if (result) { this.dataWaterStation = result } }) }, methods: { // 上传照片之前判断是否符合格式要求 beforeAvatarUpload(file) { // 照片格式 const picArr = ['image/jpeg', 'image/JPEG', 'image/png', 'image/PNG'] // 照片大小 const isLt2M = file.size / 1024 / 1024 < 2 // 一次上传照片数量 const maxLength = this.formRecord.waterInfomationPicDTO.length < 5 if (picArr.indexOf(file.type) < 0) { this.$message.error('上传图片只能是 JPG 或者 PNG 格式!') return false } if (!maxLength) { this.$message.error('图片最多只能上传五张!') return false } if (!isLt2M) { this.$message.error('上传图片大小不能超过 2MB!') return false } this.imgLoading = true }, // 上传照片成功 handleAvatarSuccess(res) { if (res.status) { const urlObj = {} urlObj.url = res.imageUrl this.formRecord.waterInfomationPicDTO.push(urlObj) this.imgLoading = false } }, // 删除照片 handleRemove(file, fileList) { deletePicByid(file.id).then(() => { }) this.formRecord.waterInfomationPicDTO = fileList }, // 放大图片 handlePictureCardPreview(file) { this.dialogImageUrl = file.url this.dialogVisible = true }, beforeClose() { this.$refs.formRecord.resetFields() this.actionDialogRecord = '' this.disabledSelOfficial = false this.formRecord.id = null this.formRecord.name = '' this.formRecord.type = null this.formRecord.official = false this.formRecord.waterway = null this.formRecord.startId = null this.formRecord.endId = null this.formRecord.swzId = null this.formRecord.remark = '' }, resetSearch() { this.formSearch.type = undefined this.formSearch.value = '' this.formSearch.official = undefined this.dataPage = 1 }, loadNode() { debugger const param = {} if (this.formRecord.waterway !== null) { param.waterway = this.formRecord.waterway } queryNodeList(param, result => { this.dataNode = result }, null, () => { if (this.formRecord.start) { this.formRecord.startId = this.formRecord.start } if (this.formRecord.end) { this.formRecord.endId = this.formRecord.end } this.formRecord.start = null this.formRecord.end = null for (const i in this.dataNode) { const node = this.dataNode[i] if (this.formRecord.startId && node.id === this.formRecord.startId) { this.formRecord.start = node.id } if (this.formRecord.endId && node.id === this.formRecord.endId) { this.formRecord.end = node.id } } }) }, loadMain() { this.loadingData = true const param = {} if (this.formSearch.type) { param.type = this.formSearch.type } if (this.formSearch.value) { param.value = this.formSearch.value } if (this.formSearch.official) { param.isOfficial = this.formSearch.official } queryChannelFullList(param, this.dataPage, this.dataSize, (data, total) => { if (data) { this.dataMain = data } else { this.dataMain = [] } if (total) { this.dataTotal = total } else { this.dataTotal = this.dataMain.length } }, null, () => { this.loadingData = false }) }, formatOfficial(row, column) { const value = row[column.property] if (value === undefined || value === null) { return '' } else { if (value === true || value === 'true' || value === '1') { return '正式水道' } else { return '测试水道' } } }, handleMapReady() { this.loadingWaterway = true addGraphicsLayer({ 'type': 'GraphicsLayer', 'layerid': 'WaterwayLayer' }, (me => { return layer => { RAddListGraphic(layer, me.dataWaterway) RegClick(layer, me.handleMapLineClick) } })(this)) this.loadingWaterway = false }, handleMapLineClick(evt) { this.formRecord.waterway = evt.graphic.attributes.id this.loadNode() }, handleAdd() { this.loadNode() this.actionDialogRecord = 'add' this.visibleDialogRecord = true }, handleEdit(r) { this.disabledSelOfficial = true this.formRecord.id = r.id this.formRecord.name = r.name this.formRecord.type = r.typeId this.formRecord.official = r.isOfficial //this.formRecord.waterway = r.waterwayId this.formRecord.startId = r.startId this.formRecord.endId = r.endId this.formRecord.remark = r.remark this.loadNode() this.actionDialogRecord = 'edit' this.visibleDialogRecord = true }, handleDelete(r) { this.$confirm('确认删除？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.fullscreenLoading = true queryChannelDelete({ 'id': r.id }, () => { this.resetSearch() this.loadMain() this.$notify({ type: 'success', title: '成功', message: '操作成功!' }) }, null, () => { this.fullscreenLoading = false }) }) }, handlePageSizeChange(v) { this.dataSize = v this.loadMain() }, handlePageCurrentChange(v) { this.dataPage = v this.loadMain() }, handleSave() { this.$refs.formRecord.validate((valid) => { if (valid) { const param = { 'name': this.formRecord.name, 'type': this.formRecord.type, 'waterway': this.formRecord.waterway, 'start': this.formRecord.start, 'end': this.formRecord.end, 'swzId': this.formRecord.swzId, 'sdzp': this.formRecord.waterInfomationPicDTO } if (this.formRecord.remark) { param['remark'] = this.formRecord.remark } const done = () => { this.handleCancel() this.resetSearch() this.loadMain() this.$notify({ type: 'success', title: '成功', message: '操作成功!' }) } const always = () => { this.fullscreenLoading = false } this.fullscreenLoading = true switch (this.actionDialogRecord) { case 'add': param['isOfficial'] = this.formRecord.official queryChannelAdd(param, done, null, always) break case 'edit': param['id'] = this.formRecord.id param['waterway'] = 0 queryChannelEdit(param, done, null, always) break default: always() } } else { return false } }) }, handleCancel() { this.beforeClose() this.visibleDialogRecord = false }, handleClose(done) { this.beforeClose() done() } } }
data() {
return {
visibleBtnAdd: true,
visibleBtnEdit: true,
visibleBtnDelete: true,
formSearch: {
type: undefined,
value: '',
official: undefined
},
formRecord: {
id: null,
name: '',
type: null,
official: true,
waterway: null,
startId: null,
endId: null,
start: null,
end: null,
swzId: null,
remark: '',
waterInfomationPicDTO: []
},
在声明的时候，你的official属性错了，应该为true，希望能给你有些帮助