sily_boy 2019-05-19 00:34 采纳率: 100%
浏览 1659
已采纳

vue 修改的时候报undefind错误


<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() } } }
  • 写回答

1条回答 默认 最新

  • shichengzhe 2019-05-19 10:24
    关注

    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,希望能给你有些帮助

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 数学的三元一次方程求解
  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题