fix: 责任单位修改

quanyawei

2024-09-12 293a5597a6823edc5c64372ec41b1024c9f87ee0

 src/views/toCarryOutLegislativeReforms/components/newWorkOrder.vue

@@ -1,11 +1,36 @@
<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="900px" center :before-close="close">
    <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-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-form-item
                label="上报时间："
                prop="escalationTime"
                class="span"
              >
                <el-date-picker
                  v-model="formData.escalationTime"
                  value-format="yyyy-MM-dd"
@@ -16,15 +41,44 @@
              </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-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"
@@ -35,8 +89,16 @@
              </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-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"
@@ -49,8 +111,17 @@
          </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-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"
@@ -61,16 +132,33 @@
              </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-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"
@@ -81,59 +169,150 @@
              </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-form-item label="问题描述：" prop="problemDescribe" class="span">
              <el-input v-model="formData.problemDescribe" type="textarea" :rows="4" placeholder="请输入内容" />
            <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-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">
                <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"
                      v-if="file.fileType === 1"
                      style="width: 100px; height: 100px"
                      :src="file.url"
                      :preview-src-list="fileBaseList"
                      :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
                      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">
      <div style="text-align: center;">
    <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"
          style="width: 300px; height: 500px"
          :src="dialogImageUrl"
          controls
          autoplay
@@ -147,22 +326,31 @@
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 },
    isToMap: { type: Boolean, required: true, default: false },
    pageState: { type: String, required: true, default: 'add' },
    parentFormData: { type: Object, default: () => {} }
  },
  data() {
  data () {
    return {
      videoVisible: false,
      formData: {
        unitId: '',
        escalationUnitId: '',
        changeType: '',
        polluteType: '',
        escalationTime: new Date(),
        fileBaseList: [],
        escalationName: '',
        keyPoint: 0,
        changeDay: 0,
        investigationType: 1
        investigationType: 1,
        pollutePosition: ''
      },
      fileBaseList: [],
      fileBaseListCover: [],
@@ -187,9 +375,7 @@
        changeType: [
          { required: true, message: '请选择整改类型', trigger: 'change' }
        ],
        changeDay: [
          { required: true, message: '请输入天数', trigger: 'blur' }
        ],
        changeDay: [{ required: true, message: '请输入天数', trigger: 'blur' }],
        escalationUnitId: [
          { required: true, message: '请选择上报单位', trigger: 'change' }
        ],
@@ -206,23 +392,31 @@
    }
  },
  computed: {
    uploadTermExcelUrl() {
    uploadTermExcelUrl () {
      return `${requestObj.baseUrl}/file/upload`
    }
  },
  watch: {
    'pageState': {
      handler(newVal) {
    pageState: {
      handler (newVal) {
        if (this.pageState === 'edit') {
          if (this.parentFormData.fileBaseList && this.parentFormData.fileBaseList.length > 0) {
          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}`) // 原图
                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}`,
                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
@@ -236,22 +430,15 @@
      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
    }

  async created () {
    this.getUnitList()
    this.getContaminateList()

    console.log('oldValue', this.parentFormData)

    bus.$on('changeFileAfterList', (type, fileList) => {
      this.formData.fileBaseList = []
      if (fileList.length > 0) {
        fileList.map((item) => {
        fileList.map(item => {
          if (item.response) {
            console.log('item.response.data', item.response.data)
            this.formData.fileBaseList.push(item.response.data)
@@ -261,44 +448,82 @@
    })
  },
  methods: {
    openVideo(item) {
    toMap () {
      this.$emit('update:isToMap', true)
    },
    changeKeyPoint (data) {
      this.$forceUpdate()
    },
    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() {
    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'
      }).then((res) => {
      }).then(res => {
        this.unitList = res.data
        this.getContaminateList()
      })
    },
    getContaminateList() {
    getContaminateList () {
      this.$request({
        url: '/allocation/contaminate',
        method: 'get'
      }).then((res) => {
      }).then(res => {
        this.polluteList = res.data
        if (!(JSON.stringify(this.parentFormData) === '{}')) {
          this.formData = this.parentFormData
          this.formData.polluteType = String(this.parentFormData.polluteType)
          this.formData.keyPoint = Number(this.parentFormData.keyPoint)
        } else {
          const name = this.$store.state.user.name
          this.formData.escalationName = name
          this.formData.changeType = this.Dic.changeEnum[0].value
          this.formData.unitId = this.unitList[0].unitId
          this.formData.escalationUnitId = this.unitList[0].unitId
          this.formData.polluteType = this.polluteList[0].dataKey
        }
      })
    },
    close() {
      this.$nextTick(function() {
    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 => {
@@ -309,7 +534,8 @@
        })
      }
      this.formData.state = val
      this.$refs.ruleForm.validate((valid) => {

      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // this.formData.fileBaseList = [...this.parentFormData.fileBaseList, this.formData.fileBaseList]
          this.$emit('handleSubmit', this.formData)
@@ -323,36 +549,54 @@
</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;
  display: inline-block !important;
  margin-right: 10px;
}
.textBox {
    display: flex;
    justify-content: space-between;
    margin-left: 15px;
  display: flex;
  justify-content: space-between;
  margin-left: 15px;
}

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

      div {
          width: 100%;
      }
    div {
      width: 100%;
    }
  }
}

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

        div {
            width: 100%;
        }
    div {
      width: 100%;
    }
  }

}
/deep/.el-checkbox__inner {
  border-radius: 50%;
}
/deep/.el-input-group__append {
  width: 60px !important;
  padding: 0;
  text-align: center;
  cursor: pointer;
}
</style>