Merge remote-tracking branch 'origin/master'

jiangping

2024-06-28 43942a545271345ce26e40d82bb97138c5ea7611

 admin/src/components/operation/HiddenDangerParam.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,277 @@
<template>
  <GlobalWindow
    title="新增隐患随手拍"
    width="600px"
    :visible.sync="isShowModal"
    :confirm-working="isWorking"
    @confirm="confirm"
  >
    <el-form :model="param" ref="paramRef" :rules="rules">
      <el-form-item label="提报人" prop="realname">
        <div>{{ userInfo.realname }}</div>
      </el-form-item>
      <el-form-item label="联系电话" prop="mobile">
        {{ userInfo.mobile }}
      </el-form-item>
      <el-form-item label="提报时间" prop="submitTime">
        <el-date-picker
          v-model="param.submitTime"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          default-time="08:00:00"
        />
      </el-form-item>
      <el-form-item label="隐患区域" prop="areaId">
        <el-select v-model="param.areaId" @change="changeArea" placeholder="请选择">
          <el-option
            v-for="item in addrList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="处理人" prop="checkUserId">
        <el-select v-model="param.checkUserId" placeholder="请选择">
          <el-option
            v-for="item in memberList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="隐患类型" prop="cateId">
        <el-select v-model="param.cateId" placeholder="请选择">
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="现场情况">
        <div class="file_list">
          <el-upload
            class="avatar-uploader"
            :data="uploadData"
            :auto-upload="true"
            :action="uploadImgUrl"
            :show-file-list="false"
            :on-success="uploadAvatarSuccess"
            :before-upload="beforeUpload"
          >
            <div class="upload_wrap">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <div>图片/视频</div>
            </div>
          </el-upload>
          <div v-for="(item, i) in fileList" :key="i" class="item">
            <i @click="handleDelImg(i)" class="el-icon-error close"></i>
            <el-image
              :src="item.fileurlFull"
              :preview-src-list="[item.fileurlFull]"
              v-if="item.type == 0"
              class="img"
            ></el-image>
            <video
              :src="item.fileurlFull"
              controls
              v-if="item.type == 1"
              class="img"
            ></video>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="情况说明" prop="content">
        <el-input
          type="textarea"
          :rows="4"
          v-model="param.content"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
    </el-form>
  </GlobalWindow>
</template>

<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import UploadFaceImg from '@/components/common/UploadFaceImg'
import dayjs from 'dayjs'
import { allList, memberList } from '@/api/business/hiddenDangerParam'
import { create } from '@/api/business/hiddenDanger'
export default {
  name: 'OperaVisitsHkWindow',
  extends: BaseOpera,
  components: {
    GlobalWindow
  },
  data () {
    return {
      isShowModal: false,
      param: {},
      userInfo: this.$store.state.userInfo,
      uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/uploadBatch',
      typeList: [],
      addrList: [],
      memberList: [],
      fileList: [],

      uploadData: {
        folder: 'HIDDEN_DANGER_FILE'
      },
      rules: {
        // starttime: [{ required: true, message: '请选择日期', trigger: 'change' }],
        areaId: [{ required: true, message: '请选择', trigger: 'change' }],
        cateId: [{ required: true, message: '请选择', trigger: 'change' }],
        checkUserId: [{ required: true, message: '请选择', trigger: 'change' }],
        faceImgUrl: [{ required: true, message: '请上传', trigger: 'change' }],

        content: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.$set(this.param, 'submitTime', dayjs().format('YYYY-MM-DD HH:mm:ss'))
    this.initData()
  },
  methods: {
    initData () {
      allList({ type: 1 }).then(res => { // ç±»åž‹
        this.typeList = res || []
      })
      allList({ type: 0 }).then(res => { // ä½ç½®
        this.addrList = res || []
      })
      memberList({}).then(res => {
        this.memberList = res || []
      })
    },
    changeArea (e) {
      const item = this.addrList.find(i => i.id === e)
      const arr = []
      const memberIds = item.memberIds.split(',')
      const memberNames = item.memberNames.split(',')
      if (memberIds && memberIds.length === 1) {
        this.$set(this.param, 'checkUserId', memberIds[0])
      }
      memberIds.forEach((mem, i) => {
        arr.push({
          id: memberIds[i],
          name: memberNames[i]
        })
      })
      this.memberList = arr
    },
    beforeUpload (file) {
      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'image/jpeg', 'image/png', 'image/gif'].indexOf(file.type) == -1) {
        this.$message.error('请上传正确的视频/图片格式')
        return false
      }
    },
    uploadAvatarSuccess (file) {
      console.log('file', file)
      const item = file.data[0]
      if (['.mp4', '.avi', '.flv', '.wmv'].some(char => item.imgaddr.includes(char))) {
        this.fileList.push({
          type: 1,
          fileurl: item.imgaddr,
          fileurlFull: item.url
        })
      } else {
        this.fileList.push({
          type: 0,
          fileurl: item.imgaddr,
          fileurlFull: item.url
        })
      }
      console.log('file', this.fileList)
      // this.$set(this.param, 'faceImg', file.imgurl)
      // this.$set(this.param, 'faceImgUrl', file.imgurlfull)
    },
    handleDelImg (i) {
      this.fileList.splice(i, 1)
    },
    // åŒæ­¥ä¿¡æ¯
    confirm () {
      this.$refs.paramRef.validate((valid) => {
        if (!valid) {
          return
        }
        // è°ƒç”¨æ–°å»ºæŽ¥å£
        this.isWorking = true
        create({
          ...this.param,
          applyCheckUserId: this.param.checkUserId,
          submitFileList: this.fileList,
          memberId: this.userInfo.memberId
        })
          .then(() => {
            this.visible = false
            this.$tip.apiSuccess('提交成功')
            this.$emit('success')
            this.$emit('close')
          })
          .finally(() => {
            this.isWorking = false
          })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
$image-width: 90px;
.avatar-uploader {
  width: $image-width !important;
  height: $image-width;
  margin-bottom: 30px;
  .upload_wrap {
    width: 90px;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    color: #999999;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    text-align: center;
  }
}
.file_list {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 140px;
    max-height: 140px;
    margin-left: 10px;
    position: relative;
    .close{
      font-size: 20px;
      position: absolute;
      right: -10px;
      top: -10px;
      z-index: 111;
      color: red;
      cursor: pointer;
    }
    .img {
      width: 140px;
      max-height: 90px;
    }
  }
}
</style>