Merge branch 'feature_1.0'

quanyawei

2023-10-07 9083fd270cd172f998eb2dd3dfae59187a70cb1a

 src/views/toCarryOutLegislativeReforms/components/newWorkOrder.vue

New file
@@ -0,0 +1,393 @@
<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" top="30px" width="900px" center :before-close="close">
      <div slot="title" class="titBox">
        <div>{{ parentFormData.allocationNum }}</div>
        <div>{{ title }}</div>
      </div>
      <div>
        <el-form ref="ruleForm" :disabled="pageState==='detail'" label-width="100px" :model="formData" class="demo-form-inline" :rules="rules">
          <el-row>
            <el-col :span="12">
              <el-form-item label="上报时间：" prop="escalationTime" class="span">
                <el-date-picker
                  v-model="formData.escalationTime"
                  value-format="yyyy-MM-dd"
                  size="small"
                  type="date"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="污染位置：" prop="pollutePosition" class="span">
                <el-input v-model="formData.pollutePosition" type="text" placeholder="请选择" size="small" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="责任主体：" prop="unitId" class="span">
                <el-select v-model="formData.unitId" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in unitList"
                    :key="item.unitId"
                    :label="item.unitName"
                    :value="item.unitId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="污染分类：" prop="polluteType" class="span">
                <el-select v-model="formData.polluteType" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in polluteList"
                    :key="item.dataKey"
                    :label="item.dataValue"
                    :value="item.dataKey"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="整改类型：" prop="changeType" class="span">
                <el-select v-model="formData.changeType" placeholder="请选择" size="small" @change="changeEnumList">
                  <el-option
                    v-for="item in Dic.changeEnum"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="限期天数：" prop="changeDay" class="span">
                <el-input-number v-model="formData.changeDay" :disabled="formData.changeType===1" :min="0" label="请输入" />
                <!-- <el-input v-model.number="formData.changeDay" :disabled="formData.changeType===1" type="text" placeholder="请输入" size="small" /> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="上报单位：" prop="escalationUnitId" class="span">
                <el-select v-model="formData.escalationUnitId" placeholder="请选择" size="small">
                  <el-option
                    v-for="item in unitList"
                    :key="item.unitId"
                    :label="item.unitName"
                    :value="item.unitId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上报人：" prop="escalationName" class="span">
                <el-input v-model="formData.escalationName" type="text" placeholder="请选择" size="small" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="排查方式：" prop="investigationType" class="span">
                <el-radio-group v-model="formData.investigationType" size="small">
                  <el-radio v-for="(item) in Dic.investigationEnum" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="问题描述：" prop="problemDescribe" class="span">
              <el-input v-model="formData.problemDescribe" type="textarea" :rows="4" placeholder="请输入内容" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="附件：">
              <div>
                <div v-if="pageState==='edit'">
                  <div v-for="(file,index) in fileBaseListCover" :key="file.fileId+index" class="block">
                    <el-image
                      v-if="file.fileType ===1"
                      style="width: 100px; height: 100px"
                      :src="file.url"
                      :preview-src-list="getPreviewImages(file.fileId,fileBaseList)"
                      :initial-index="index"
                    />
                    <video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
                      您的浏览器不支持 video 标签。
                    </video>
                  </div>
                </div>
              </div>
              <uploadFile v-if="pageState!=='detail'" :upload-url="uploadTermExcelUrl" :sys-code="sysCode" />
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">关闭</el-button>
        <el-button v-if="pageState!=='detail'" type="info" @click="handleSubmit('9')">保存</el-button>
        <el-button v-if="pageState!=='detail'" type="primary" @click="handleSubmit('10')">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="videoVisible" width="600px" :modal-append-to-body="false" :destroy-on-close="true" @close="handleCancel">
      <div style="text-align: center;">
        <video
          ref="video"
          style="width: 300px;height: 500px"
          :src="dialogImageUrl"
          controls
          autoplay
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import uploadFile from '@/components/UploadExcel/index'
import bus from '@/Bus'
import requestObj from '@/utils/request'
import _ from 'lodash'
export default {
  components: { uploadFile },
  props: {
    title: { type: String, default: '' },
    visible: { type: Boolean, required: true },
    pageState: { type: String, required: true, default: 'add' },
    parentFormData: { type: Object, default: () => {} }
  },
  data() {
    return {
      videoVisible: false,
      formData: {
        fileBaseList: [],
        escalationName: '',
        changeDay: 0,
        investigationType: 1
      },
      fileBaseList: [],
      fileBaseListCover: [],
      sysCode: '1010201', //
      Dic: JSON.parse(localStorage.getItem('dict')),
      unitList: [],
      polluteList: [],
      dialogImageUrl: '',
      rules: {
        escalationTime: [
          { required: true, message: '请选择上报时间', trigger: 'change' }
        ],
        pollutePosition: [
          { required: true, message: '请输入污染位置', trigger: 'blur' }
        ],
        unitId: [
          { required: true, message: '请选择责任主体', trigger: 'change' }
        ],
        polluteType: [
          { required: true, message: '请选择污染分类', trigger: 'change' }
        ],
        changeType: [
          { required: true, message: '请选择整改类型', trigger: 'change' }
        ],
        changeDay: [
          { required: true, message: '请输入天数', trigger: 'blur' }
        ],
        escalationUnitId: [
          { required: true, message: '请选择上报单位', trigger: 'change' }
        ],
        investigationType: [
          { required: true, message: '请选择排查方式', trigger: 'change' }
        ],
        escalationName: [
          { required: true, message: '请输入上报人', trigger: 'blur' }
        ],
        problemDescribe: [
          { required: true, message: '请输入问题描述', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    uploadTermExcelUrl() {
      return `${requestObj.baseUrl}/file/upload`
    }
  },
  watch: {
    'pageState': {
      handler(newVal) {
        if (this.pageState === 'edit') {
          if (this.parentFormData.fileBaseList && this.parentFormData.fileBaseList.length > 0) {
            this.parentFormData.fileBaseList.forEach(item => {
              if (item.fileType === 1) {
                this.fileBaseList.push(`${requestObj.baseUrl}file/preview/${item.fileId}`) // 原图
              }
              // const srcApi = item.fileType === 1 ? api + 'preview/' : api + 'preview/cover/'
              // this.fileBaseList.push(`${requestObj.baseUrl}file/preview/${item.fileId}`) // 原图
              this.fileBaseListCover.push({
                url: item.fileType === 1 ? `${requestObj.baseUrl}file/preview/cover/${item.fileId}` : `${requestObj.baseUrl}file/preview/${item.fileId}`,
                fileType: item.fileType,
                fileId: item.fileId,
                fileName: item.fileName
              })
            })
            console.log('fileBaseList', this.fileBaseList)
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    console.log('oldValue', this.parentFormData)
    if (!(JSON.stringify(this.parentFormData) === '{}')) {
      this.formData = this.parentFormData
      this.formData.polluteType = String(this.parentFormData.polluteType)
    } else {
      const name = this.$store.state.user.name
      this.formData.escalationName = name
    }

    this.getUnitList()
    this.getContaminateList()
    bus.$on('changeFileAfterList', (type, fileList) => {
      this.formData.fileBaseList = []
      if (fileList.length > 0) {
        fileList.map((item) => {
          if (item.response) {
            console.log('item.response.data', item.response.data)
            this.formData.fileBaseList.push(item.response.data)
          }
        })
      }
    })
  },
  methods: {
    getPreviewImages(index, list) {
      let startIndex = 0
      const chechList = _.cloneDeep(list)
      chechList.forEach((item, i) => {
        const str = item.substring(item.lastIndexOf('/') + 1)
        console.log('str', str)
        if (Number(str) === Number(index)) {
          startIndex = i
        }
      })

      console.log('index', index)
      console.log('startIndex', startIndex)
      var imgList = [...list]
      if (index === 0) return imgList
      var start = imgList.splice(startIndex)
      var remain = imgList.splice(0, startIndex)
      return start.concat(remain)
    },
    openVideo(item) {
      console.log('item', item)
      this.dialogImageUrl = item.url
      this.videoVisible = true
    },
    handleCancel() {
      this.dialogImageUrl = ''
      this.videoVisible = false
    },
    changeEnumList(val) {
      if (val === 1) {
        this.formData.changeDay = 0
      }
    },
    // 获取责任单位list
    getUnitList() {
      this.$request({
        url: '/allocation/unit',
        method: 'get'
      }).then((res) => {
        this.unitList = res.data
      })
    },
    getContaminateList() {
      this.$request({
        url: '/allocation/contaminate',
        method: 'get'
      }).then((res) => {
        this.polluteList = res.data
      })
    },
    close() {
      this.$nextTick(function() {
        this.$refs.ruleForm.resetFields()
      })
      this.$emit('update:visible', false)
    },
    handleSubmit(val) {
      console.log('this.formData', this.formData)
      if (this.fileBaseListCover && this.fileBaseListCover.length > 0) {
        this.fileBaseListCover.forEach(item => {
          this.formData.fileBaseList.push({
            fileId: item.fileId,
            fileName: item.fileName
          })
        })
      }
      this.formData.state = val
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // this.formData.fileBaseList = [...this.parentFormData.fileBaseList, this.formData.fileBaseList]
          this.$emit('handleSubmit', this.formData)
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.titBox{
  position: relative;
  font-size: 18px;
  div:first-child{
    position: absolute;
    left: 10px;
  }
  div{
    display: inline-block;
  }
}
.block {
    display: inline-block !important;
    margin-right: 10px;
}
.textBox {
    display: flex;
    justify-content: space-between;
    margin-left: 15px;
}

.el-dialog__body>div {
    border-bottom: 1px dashed rgba(187, 187, 187, 1);
}
.span{
  /deep/.el-form-item__content {

      div {
          width: 100%;
      }
  }
}

.textare {
    /deep/.el-form-item__content {
        width: 800px;

        div {
            width: 100%;
        }
    }
  }

</style>