szhd-safety-web-new/src/views/task/list/components/addPatrol.vue

<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增检查' : '编辑检查'" :form="form"
      :rules="rules" @submit="submit">
      <template v-slot:mission_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>任务专题：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.mission_id" filterable clearable placeholder="请选择任务专题" style="width: 400px;">
              <el-option v-for="item in unitList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:date>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>检查日期：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker style="width: 400px;" v-model="form.date" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" type="datetime"
              placeholder="选择检查日期">
            </el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:siteName>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>检查地点：
          </div>
          <div class="xy-table-item-content">
            <el-select @change="changeSite" v-model="form.siteName" filterable clearable placeholder="请选择检查地点" style="width: 400px;">
              <el-option v-for="item in siteList" :key="-1" label="选择地图位置" :value="-1">
              </el-option>
              <el-option v-for="item in siteList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:ask_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>问题类型：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.ask_id" filterable clearable placeholder="请选择问题类型" style="width: 400px;">
              <el-option v-for="item in askList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:ask_department>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>建议科室：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.ask_department" type='text' placeholder="请输入建议科室" clearable
              style="width: 400px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:ask_introduce>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>问题描述：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.ask_introduce" :rows='5' type='textarea' placeholder="请输入问题描述" clearable
              style="width: 400px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:tips>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>整改建议：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.tips" :rows='5' type='textarea' placeholder="请输入整改建议" clearable
              style="width: 400px;"></el-input>
          </div>
        </div>
      </template>

      <template v-slot:file_ids>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>附件：
          </div>
          <div class="xy-table-item-content">
            <el-upload :action="action" class='upload-demo' list-type="picture-card" :file-list="pictureList"
              ref="pictureUpload" style="width:600px" :auto-upload="true" :data="uploadOther"
              :on-preview="handlePictureCardPreview" :on-success="handlesuccess" :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </div>
      </template>
    </xy-dialog>
    <el-dialog :visible.sync="showPic">
      <img width="100%" :src="showPicUrl" alt="">
    </el-dialog>
    <avue-input-map ref="maps" :params="mapparams" placeholder="请选择地图" v-model="mapform"></avue-input-map>


  </div>
</template>

<script>
  import {
    Message
  } from 'element-ui'
  import {
    getparameteritem
  } from "@/api/system/dictionary.js";
  import {
    save,
    get
  } from "@/api/task/patrol.js";
  import {
    listunit
  } from "@/api/task/unit.js";
  import {
    listaddress
  } from '@/api/address'
  import {
    listdept
  } from "@/api/system/department.js"
  import {
    listCommonuser
  } from "@/api/common.js"
  import {
    getToken
  } from '@/utils/auth'
  export default {
    components: {

    },
    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        uploadOther: {
          token: ""
        },
        action: `${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
        pictureList: [],
        showPic: false,
        showPicUrl: '',
        unitList: [],
        siteList: [],
        askList: [],
        mission_id:'',
        mapparams: {
          zoom: 11,
        },
        mapform: [],
        form: {
          mission_id: '',
          date: '',
          site_id: '',
          siteName:'',
          address:'',
          lat:'',
          lon:'',
          ask_id: '',
          ask_department:'',
          ask_introduce: '',
          tips: '',
          file_ids: [],
        },

        rules: {
          // mission_id: [{
          //   required: true,
          //   message: '请选择任务专题'
          // }],
          date: [{
            required: true,
            message: '请选择检查日期'
          }],
          siteName: [{
            required: true,
            message: '请选择检查地点'
          }],
          ask_id: [{
            required: true,
            message: '请选择问题类型'
          }],
          ask_introduce: [{
            required: true,
            message: '请输入问题描述'
          }]
        }
      }
    },
    created() {
      this.uploadOther.token = getToken();
      this.getUnit()
      this.getAddress()
      this.getAsk()
      // this.loadDeptOptions()
      // this.loadUser()
    },
    methods: {
      // 获取 专项任务
      async getUnit() {
        const res = await listunit({
          page: 1,
          page_size: 9999
        })

        this.unitList = res.data
      },
      changeSite(e){
        console.log(e)
        if(e==-1){
          this.form.site_id = ''
          this.form.address = ''
          this.form.lat = ''
          this.form.lon = ''
          this.form.siteName = ''
          this.$refs.maps.box = true
        }else{
          this.siteList.map(item=>{
            if(item.id==e){
              this.form.site_id = item.id
              this.form.address = item.address
              this.form.lat = item.lat
              this.form.lon = item.lon
              this.form.siteName = item.name
            }
          })
        }
      },
      async getAddress() {
        const res = await listaddress({
          page: 1,
          page_size: 9999
        })
        this.siteList = res.data
      },
      async getAsk(label) {
        const res = await getparameteritem('askList')
        this.askList = res.detail
      },
      handleRemove(file, fileList) {
        this.pictureList = fileList
      },
      handlesuccess(response, file, fileList) {
        this.pictureList = fileList
      },
      handlePictureCardPreview(file) {
        this.showPicUrl = file.url;
        this.showPic = true;
      },
      async getDetail() {
        const res = await get(this.id)
        this.form = {
          mission_id: res?.mission_id,
          date: res?.date,
          site_id: res?.site_id,
          siteName:'',
          address:res?.address,
          lat:res?.lat,
          lon:res?.lon,
          ask_id: res?.ask_id,
          ask_department:res?.ask_department,
          ask_introduce: res?.ask_introduce,
          tips: res?.tips,
          file_ids: res?.file_ids,
        }
        this.mapform = [res.lon, res.lat, res.address]
        for (var f of res.files) {
          this.pictureList.push({
            id: f.id,
            url: f.url,
            name: f.original_name
          })
        }
        // res.guide_upload ? this.guidePictureList.push(res.guide_upload) : ''
      },
      submit() {
        let _files = []
        if (this.pictureList.length > 0) {
          for (var h of this.pictureList) {
            if (h.response) {
              _files.push(h.response.id)
            } else {
              _files.push(h.id)
            }
          }
          this.form.file_ids = _files
        } else {
          this.form.file_ids = []
        }
        console.log(this.form)
        // return
        if (this.type === 'add') {
          save({
            ...this.form
          }).then(res => {
            Message({
              type: 'success',
              message: '新增检查成功'
            })
            this.isShow = false
            this.$emit('refresh')
          })
          return
        }
        if (this.type === 'editor') {
          save({
            id: this.id,
            ...this.form
          }).then(res => {
            Message({
              type: 'success',
              message: '编辑检查成功'
            })
            this.isShow = false
            this.$emit('refresh')
          })
        }
      },
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            this.getDetail()
          }
          if(this.type==='add'){
            for(var k of this.unitList){
              console.log("adddd",k.name)
              if(k.name=='日常巡查'){
                this.form.mission_id = k.id
              }
            }
          }
        } else {
          this.id = ''
          this.pictureList = []
          this.mission_id = ''
          this.mapform=[]
          this.$refs['dialog'].reset()
        }
      },
      mission_id(newval){
        console.log("newval",newval)
        if(newval){
          this.form.mission_id = this.mission_id
        }
      },
      mapform(newVal, oldVal) {
        this.form.lon = newVal[0];
        this.form.lat = newVal[1];
        this.form.address = newVal[2];
        this.form.siteName = newVal[2]
      }
    }

  }
</script>

<style scoped lang="scss">
  // .xy-table-item-label {
  //   width: 160px;
  // }
  ::v-deep .ask_department{
    flex-basis: 100%;
  }
  ::v-deep .avue-input-map{
    display: none;
  }
  ::v-deep .site_id,::v-deep .address,::v-deep .lat,::v-deep .lon{
    display: none;
  }
  .img__delete {
    transform: scale(0.8, 0.8);

    position: absolute;
    top: 4px;
    right: 4px;
  }

  ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  ::v-deep .el-upload--picture-card {
    font-size: 28px;
    color: #8c939d;
    width: 146px !important;
    height: 146px !important;
    line-height: 146px !important;
    text-align: center;
  }

  ::v-deep .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 146px !important;
    height: 146px !important;
    line-height: 146px !important;
    text-align: center;
  }

  ::v-deep .avatar {
    width: 80px !important;
    display: block;
    border-radius: 6px;
  }

  // ::v-deep .xy-table-item-label {
  //   width: 160px !important;
  // }

  ::v-deep .el-date-editor .el-range-separator {
    width: auto !important;
  }

  ::v-deep .el-input-number .el-input__inner {
    text-align: left !important;
  }

  .searchCompanys {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;

    .el-input {
      width: 80%
    }
  }
</style>