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" @change="changeMission" :disabled="hasMissionId" 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" style="font-weight: bold;">
            <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"
              value-format="yyyy-MM-dd" type="date" placeholder="选择检查日期">
            </el-date-picker>
          </div>
        </div>
      </template>

      <template v-slot:ask_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label"  style="font-weight: bold;">
            <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:siteName>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold;">
            <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 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> -->
            <el-cascader v-model="form.siteName" v-if="showCasc" clearable :options="siteList" :props="{'label':'name','value':'id'}"
              placeholder="请选择检查地点" style="width: 290px;margin-right: 10px;" @change="changeSite"></el-cascader>
            <el-input v-model="form.siteName" v-if="!showCasc" type='text' placeholder="请选择检查地点" clearable
              style="width: 290px;margin-right: 10px;" @focus="$refs.maps.box = true"></el-input>
            <el-button type="primary" v-if="showCasc" @click="$refs.maps.box = true;showCasc=false;form.siteName=''">选择地图</el-button>
            <el-button type="primary" v-if="!showCasc" @click="showCasc = true;form.siteName=''">选择站点</el-button>
          </div>
        </div>
      </template>
     <template v-slot:up_admin_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.up_admin_id" @change="changeUpAdmin" filterable allow-create clearable placeholder="请选择上报人" style="width: 400px;">
              <el-option v-for="item in userdata" :key="item.id" :label="item.name" :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-select @change="changeDepartment" v-model="form.ask_department" filterable allow-create clearable placeholder="请选择或输入建议整改科室" style="width: 400px;">
              <el-option v-for="item in depList" :key="item.id" :label="item.name" :value="item.name">
              </el-option>
            </el-select>
            <!-- <el-input v-model="form.ask_department" type='text' placeholder="请输入建议科室" clearable
              style="width: 400px;"></el-input> -->
          </div>
        </div>

      </template>
      <template v-slot:groups v-if="showgroups">
        <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">
            <div>
              {{groupObj.name}}:
              <el-tag style="margin-right:5px" v-for="item in groupObj.details">{{item.name}}</el-tag>
            </div>
          </div>
        </div>
      </template>
      <template v-slot:showgroups v-if="showgroups"></template>
      <template v-slot:ask_introduce>
        <div class="xy-table-item">
          <div class="xy-table-item-label"  style="font-weight: bold;">
            <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: '',
        mission_id:'',
        hasMissionId:false,
        uploadOther: {
          token: ""
        },
        login_id:'',
        department_id:'',
        groupObj:{},
        showgroups:false,
        showCasc:true,
        action: `${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
        pictureList: [],
        showPic: false,
        showPicUrl: '',
        unitList: [],
        siteList: [],
        siteListArr: [],
        askList: [],
        depList:[],
        mapparams: {
          zoom: 11,
        },
        userdata:[],
        mapform: [],
        form: {
          mission_id: '',
          date: '',
          ask_id: '',
          site_id: '',
          siteName: '',
          address: '',
          lat: '',
          lon: '',
          up_admin_id:"",
          ask_department: '',
          groups:'',
          showgroups:"",
          accept_department_ids:[],
          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() {
      // document.getElementById('casc').click()
      this.uploadOther.token = getToken();
      this.loadDeptOptions()
      this.getUnit()
      this.getAddress()
      this.getAsk()
      // this.loadDeptOptions()
      this.loadUser()
    },
    methods: {
      // 获取 专项任务
      changeMission(e){
        console.log("e",e)
        if(e){
          this.getGroups(e)
        }
      },
      changeUpAdmin(){

      },
      getGroups(e){
        this.groupObj = {}
        this.showgroups = false
        this.unitList.map(item=>{
          if(item.id==e){
            if(item.groups&&item.groups.length>0){
              let arr = {}
              item.groups.map(g=>{
                arr['name'] = g.name
                if(g.details&&g.details.length>0){
                  if(g.type==2){
                    g.details.map(d=>{
                      if(d.id==this.department_id){
                        arr['details'] = g.details
                      }
                    })
                  }
                  if(g.type==1){
                    g.details.map(d=>{
                      if(d.id==this.login_id){
                        arr['details'] = g.details
                      }
                    })
                  }
                }
              })
              console.log("arr",arr)
              this.groupObj = arr
              this.showgroups = true
            }
          }
        })
      },
      async getUnit() {
        const res = await getparameteritem('unitTypeList')
        for(var  k of res.detail){
          if(k.remark=='检查'){
            const res1 = await listunit({
              page:1,
              page_size:9999,
              unit_type:k.id,
              audit_status:1
            })
            this.unitList = res1.data
          }
        }
      },
      loadUser() {
        listCommonuser({
          page_size: 999
        }).
        then((res) => {
          this.userdata = res.data?res.data.reverse():[];
        }).catch(error => {
          console.log(error)
        })
      },
      loadDeptOptions() {
        listdept().
        then((res) => {
          this.depList = res;
        }).catch(error => {
          console.log(error)
          reject(error)
        })
      },
      changeSite(e) {
        if(e){
          this.siteListArr.map(item => {
            if (item.id == e[1]) {
              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
            }
          })
        }

      },
      changeDepartment(e){
        console.log("eeee",e)
        this.form.accept_department_ids = []
        if(e){
          this.depList.map(item=>{
            if(e===item.name){
              this.form.accept_department_ids.push(item.id)
            }
          })
        }

      },
      async getAddress() {
        const res = await listaddress({
          page: 1,
          page_size: 9999
        })
        this.siteListArr = res.data
        let arr = this.contactSite(res.data)
        this.siteList = arr
      },
      contactSite(arr) {
        let tempArr = [],
          newArr = []
        for (let i = 0; i < arr.length; i++) {
          if (tempArr.indexOf(arr[i].type) === -1) {
            newArr.push({
              type: arr[i].type,
              name: arr[i]['type_detail']['value'],
              children: [arr[i]]
            })
            tempArr.push(arr[i].type);
          } else {
            for (let j = 0; j < newArr.length; j++) {
              if (newArr[j].type == arr[i].type) {
                newArr[j].children.push(arr[i])
              }
            }
          }
        }
        return newArr
      },
      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,
          ask_id: res?.ask_id,
          site_id: res?.site_id,
          siteName: res.site_id?[undefined,res.site_id]:res.address,
          address: res?.address,
          lat: res?.lat,
          lon: res?.lon,
          up_admin_id:res?.up_admin_id,
          ask_department: res?.ask_department,
          groups:'',
          showgroups:"",
          ask_introduce: res?.ask_introduce,
          tips: res?.tips,
          accept_department_ids:res.accept_department_ids?res.accept_department_ids:[],
          file_ids: res?.file_ids,
        }
        res.mission_id?this.getGroups(res.mission_id):''
        this.showCasc = res.site_id?true:false
        this.$refs.cascader.computePresentText()
        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 = []
        }
        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') {
            this.form.up_admin_id = this.login_id
            // for (var k of this.unitList) {
            //   if (k.name == '日常巡查') {
            //     this.form.mission_id = k.id
            //   }
            // }
          }
        } else {
          this.id = ''
          this.login_id = ''
          this.department_id = ''
          this.groupObj = {}
          this.showgroups = false
          this.pictureList = []
          this.mission_id = ''
          this.mapform = []
          this.showCasc = true
          this.hasMissionId = false
          this.$refs['dialog'].reset()
        }
      },
      mission_id(newval) {
        if (newval) {
          this.form.mission_id = newval
          this.hasMissionId = true
          this.getGroups(newval)
        }
      },
      mapform(newVal, oldVal) {
        this.form.lon = newVal[0];
        this.form.lat = newVal[1];
        this.form.address = newVal[2];
        this.form.siteName = newVal[2]
        this.form.site_id = ''

      }
    }

  }
</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,
  ::v-deep .accept_department_ids
  {
    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>