patrol-maintain-web/src/views/rain/maintain/components/editMire.vue

<template>
  <div>
    <!--污泥外运 4 -->
    <dialogShow :title="title" :is-show.sync="isShow" :width="width" @resetform="resetForm('form')">
      <template v-slot:content>
        <el-form :model="form" :rules="rules" ref="form" label-position="right" :label-width="labelwidth">
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属道路" prop="road_id">
                <el-select class="width100" v-model="roadName" filterable remote @change="chooseRoad"
                  :disabled="roaddisabled" clearable @focus="remoteRoad" reserve-keyword placeholder="请输入关键词查找道路信息"
                  :remote-method="remoteMethod" :loading="roadloading">
                  <el-option v-for="item in roadsList" :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="date">
                <el-date-picker class="width100" v-model="form.date" type="datetime" placeholder="选择日期时间"
                  value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备用排放点" prop="address">
                <el-input type="text" v-model="form.address" placeholder="请填写备用排放点" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="描述" prop="content">
                <el-input type="textarea" v-model="form.content" placeholder="请填写描述" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="附件" prop="files_list">
                <el-upload multiple action="/api/admin/upload-file" list-type="picture-card" :file-list="filesList"
                  ref="pictureUpload" :auto-upload="true" :data="uploadOther" :on-error="handleError"
                  :on-success="function(responsose,file,fileList) {return handlesuccess(responsose,file,fileList,1)}">
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file" slot-scope="{file}">
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                    <span class="el-upload-list__item-actions">
                      <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file,filesList)">
                        <i class="el-icon-zoom-in"></i>
                      </span>
                      <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>

      </template>

      <template v-slot:footerbtn>
        <el-button type="primary" v-preventReClick @click="submitForm('form')">保存</el-button>
      </template>

    </dialogShow>


    <div>
      <el-dialog class="common-dialog showbigimg" :visible.sync="dialogVisible">
        <i v-if="noNext" class="el-icon-arrow-left" @click="showNextBigPic"></i>
        <div v-for="(item,index) in filesImgList" :key="index">
          <img width="100%" :src="item.url" v-if="dialogImageIndex==index">
        </div>
        <i v-if="noNext" class="el-icon-arrow-right" @click="showNextBigPic('next')"></i>
      </el-dialog>
    </div>
  </div>

</template>

<script>
  import {
    get,
    storemire,
    savemire,
  } from '../../../../api/rain/maintain.js'
  import {
    getparameteritem
  } from '../../../../api/system/dictionary.js'
  import {
    listroad
  } from '../../../../api/basic/road.js'
  import dialogShow from '@/components/dialogShow'
  export default {
    components: {
      dialogShow
    },
    data() {
      return {
        formType: "showform", // 审核：auditform  办结 endform 查看 showform
        title: "污泥外运",
        width: "60%",
        labelwidth: "120px",
        isShow: false,
        infoId: "",
        dialogImageUrl: "",
        dialogVisible: false,
        dialogImageIndex: 0,
        filesImgList: [],
        noNext: false,
        disabled: false,
        uploadOther: {
          token: ""
        },
        mapparams: {
          zoom: 11,
        },
        mapform: [],
        roadsList: [],
        roadName: "",
        roaddisabled: false,
        roadloading: false,
        filesList: [],
        // 区分 排水
        form: {},
        rules: {}

      }
    },
    watch: {
      infoId(val) {
        this.infoId = val
      },
      // mapform(newVal, oldVal) {
      //   this.form.longitude = newVal[0];
      //   this.form.latitude = newVal[1];
      //   // if(this.rainType!=4){
      //   this.form.address = newVal[2];
      //   // }
      // },
    },
    created() {

    },
    methods: {
      initload() {},
      getInfo(id) {
        var that = this;
        // this.resetForm()
        // that.mainList = that.maintaninList['maintainContent_' + this.rainType]
        if (id) {
          that.form = {}
          get(id).then(res => {
            let result = Object.assign(that.form, res);
            that.roadName = ""
            that.roaddisabled = true

            that.form = result['mire_info'];
            that.form['mire_id'] = result['mire_id'];
            that.roadName = that.form.road ? that.form.road.name : ""
            that.mapform = [that.form.longitude, that.form.latitude, that.form.address]
            that.form.old_type = result.old_type
            that.form.type = result.old_type
            let _files = [];
            for (var mod of that.form['mire_files']) {
              let m = Object.assign({}, mod);
              m.url = mod.files.url;
              m.id = mod.files.id;
              m.photoType = "before";
              _files.push(m);
            }

            that.filesList = _files;


          }).catch(error => {
            //reject(error)
          })
        }
      },
      submitForm(formName) {
        var that = this;
        var listUrlbefore = []
        for (var m of this.filesList) {
          m.photoType = "before";
          if (m.response)
            listUrlbefore.push({
              "upload_id": m.response.id
            });
          else
            listUrlbefore.push({
              "upload_id": m.id
            });
        }
        this.form.files_list = listUrlbefore;

        console.log("that.form", that.form)
        // return
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (that.infoId) {
              savemire(that.form).then(response => {
                this.$Message.success('操作成功');
                this.$emit('auditSuccess')
                that.isShow = false;
              }).catch(error => {
                //reject(error)
              })
            } else {
              storemire(that.form).then(response => {
                this.$Message.success('操作成功');
                this.$emit('auditSuccess')
                that.isShow = false;
              }).catch(error => {
                //reject(error)
              })
            }
          } else {
            this.$Message.error('数据校验失败');
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        var that = this;
        that.filesList = [];
        that.roadName = ""
        that.rainType = ""
        that.roaddisabled = false
        this.form = {
          type: 4
        }
      },
      chooseRoad(val) {
        this.form.road_id = val
      },
      remoteRoad() {
        this.roadsList = []
      },
      remoteMethod(query) {
        if (query != '') {
          this.roadloading = true
          listroad({
            name: query
          }).then(res => {
            this.roadloading = false
            this.roadsList = res.data
          })
        } else {
          this.roadsList = []
        }
      },
      handleRemove(file) {
        for (var i = 0; i < this.filesList.length; i++) {
          if (this.filesList[i].url == file.url) {
            this.filesList.splice(i, 1)
          }
        }
      },
      handlesuccess(response, file, fileList, index) {
        if (index == 1) {
          file.photoType = "before"
          this.filesList = fileList;
          // this.form.files_list = listUrl;
        } else {

          file.photoType = "after"
          this.dealFilesList = fileList
        }
        this.$message({
          message: '上传成功',
          type: 'success'
        });
      },

      handleError(err, file, fileList) {
        this.$message.error('上传失败，重新上传');
      },
      handlePictureCardPreview(file, whichfilelist) {
        this.filesImgList = whichfilelist
        if (this.filesImgList.length > 1) {
          this.noNext = true
        } else {
          this.noNext = false
        }
        for (var i = 0; i < this.filesImgList.length; i++) {
          if (this.filesImgList[i].url == file.url) {
            this.dialogImageIndex = i
          }
        }
        this.dialogVisible = true;
      },
      showNextBigPic(next) {
        let imgLength = this.filesImgList.length
        if (next == 'next') {
          this.dialogImageIndex++
          if (this.dialogImageIndex > imgLength - 1) {
            this.dialogImageIndex = 0
          }
        } else {
          this.dialogImageIndex--
          if (this.dialogImageIndex < 0) {
            this.dialogImageIndex = imgLength - 1
          }
        }
      }

    }
  }
</script>

<style>
  .showbigimg {
    cursor: pointer;

  }

  .showbigimg .el-dialog__body {
    text-align: center;
  }

  .showbigimg .el-dialog__body div {
    text-align: center;
    width: 90%;
    display: inline-block;
  }

  .showbigimg .el-icon-arrow-left {
    position: absolute;
    top: 50%;
    left: 1%;
    transform: translate(0%, -50%);
    font-size: 60px;
  }

  .showbigimg .el-icon-arrow-right {
    position: absolute;
    top: 50%;
    right: 1%;
    transform: translate(0%, -50%);
    font-size: 60px;
  }
</style>