fix:地图

quanyawei

2024-01-09 4462b1bf81d82cf690b16aad2cc0955a7c6e0b01

 src/views/toCarryOutLegislativeReforms/components/newWorkOrder.vue

@@ -1,120 +1,322 @@
<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" top="30px" width="900px" center :before-close="close">
      <div slot="title" class="titBox">
    <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="120px" :model="formData" class="demo-form-inline" :rules="rules">
        <el-form
          ref="ruleForm"
          :disabled="pageState === 'detail'"
          label-width="120px"
          :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
                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
                label="污染位置："
                prop="pollutePosition"
                class="span"
              >
                <!-- el-icon-map-location -->
                <el-input
                  v-model="formData.pollutePosition"
                  type="text"
                  placeholder="请选择"
                  size="small"
                >
                  <template
                    slot="append"
                  >
                    <div
                      style="line-height: 2;"
                      @click="toMap()"
                    >
                      定位
                    </div>
                  </template>
                </el-input>
              </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-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-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-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-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-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
                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-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-col :span="24">
              <el-form-item label="任务分类：" prop="keyPointlist" class="span">
                <el-radio-group v-model="formData.keyPoint" size="small">
                  <el-radio v-for="item in Dic.emphasisEnum" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
              <el-form-item
                label="任务分类："
                prop="keyPointlist"
                class="span"
              >
                <el-radio-group
                  v-model="formData.keyPoint"
                  size="small"
                >
                  <el-radio
                    v-for="item in Dic.emphasisEnum"
                    :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
              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="
                  <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)">
                      "
                      :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" />
              <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
        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">
    <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 />
        <video
          ref="video"
          style="width: 300px; height: 500px"
          :src="dialogImageUrl"
          controls
          autoplay
        />
      </div>
    </el-dialog>
  </div>
@@ -130,10 +332,11 @@
  props: {
    title: { type: String, default: '' },
    visible: { type: Boolean, required: true },
    isToMap: { type: Boolean, required: true, default: false },
    pageState: { type: String, required: true, default: 'add' },
    parentFormData: { type: Object, default: () => {} }
  },
  data() {
  data () {
    return {
      videoVisible: false,
      formData: {
@@ -146,7 +349,8 @@
        escalationName: '',
        keyPoint: 0,
        changeDay: 0,
        investigationType: 1
        investigationType: 1,
        pollutePosition: ''
      },
      fileBaseList: [],
      fileBaseListCover: [],
@@ -188,13 +392,13 @@
    }
  },
  computed: {
    uploadTermExcelUrl() {
    uploadTermExcelUrl () {
      return `${requestObj.baseUrl}/file/upload`
    }
  },
  watch: {
    pageState: {
      handler(newVal) {
      handler (newVal) {
        if (this.pageState === 'edit') {
          if (
            this.parentFormData.fileBaseList &&
@@ -226,7 +430,7 @@
      immediate: true
    }
  },
  async created() {
  async created () {
    this.getUnitList()

    console.log('oldValue', this.parentFormData)
@@ -244,10 +448,13 @@
    })
  },
  methods: {
    changeKeyPoint(data) {
    toMap () {
      this.$emit('update:isToMap', true)
    },
    changeKeyPoint (data) {
      this.$forceUpdate()
    },
    getPreviewImages(index, list) {
    getPreviewImages (index, list) {
      let startIndex = 0
      const chechList = _.cloneDeep(list)
      chechList.forEach((item, i) => {
@@ -266,22 +473,22 @@
      var remain = imgList.splice(0, startIndex)
      return start.concat(remain)
    },
    openVideo(item) {
    openVideo (item) {
      console.log('item', item)
      this.dialogImageUrl = item.url
      this.videoVisible = true
    },
    handleCancel() {
    handleCancel () {
      this.dialogImageUrl = ''
      this.videoVisible = false
    },
    changeEnumList(val) {
    changeEnumList (val) {
      if (val === 1) {
        this.formData.changeDay = 0
      }
    },
    // 获取责任单位list
    getUnitList() {
    getUnitList () {
      this.$request({
        url: '/allocation/unit',
        method: 'get'
@@ -290,7 +497,7 @@
        this.getContaminateList()
      })
    },
    getContaminateList() {
    getContaminateList () {
      this.$request({
        url: '/allocation/contaminate',
        method: 'get'
@@ -310,13 +517,13 @@
        }
      })
    },
    close() {
    close () {
      this.$nextTick(function () {
        this.$refs.ruleForm.resetFields()
      })
      this.$emit('update:visible', false)
    },
    handleSubmit(val) {
    handleSubmit (val) {
      console.log('this.formData', this.formData)
      if (this.fileBaseListCover && this.fileBaseListCover.length > 0) {
        this.fileBaseListCover.forEach(item => {
@@ -386,4 +593,10 @@
/deep/.el-checkbox__inner {
  border-radius: 50%;
}
/deep/.el-input-group__append {
  width: 60px !important;
  padding: 0;
  text-align: center;
  cursor: pointer;
}
</style>