Merge branch 'feature_1.0'

quanyawei

2023-10-07 9083fd270cd172f998eb2dd3dfae59187a70cb1a

 src/views/toCarryOutLegislativeReforms/components/workOrderInformation.vue

New file
@@ -0,0 +1,575 @@
<template>
  <div>
    <el-dialog :title="dialogData.title" top="30px" :visible.sync="visible" width="900px" center :before-close="close">
      <div slot="title" class="titBox">
        <div>{{ parentFormData.allocationNum }}</div>
        <div>{{ dialogData.title }}</div>
      </div>
      <div>
        <div v-if="dialogData.pageType !=='delay'" class="stepsList">
          <el-steps :space="200" :active="parentFormData.approveList.length+1" align-center>
            <el-step
              v-for="(item,index) in setepList"
              :key="index"
              :title="'' + item.createName + ' ' + item.stateName"
              :description="item.createTime"
            />
          </el-steps>
        </div>
        <div class="inforData">
          <el-descriptions title="基本信息" :column="parseInt('4')">
            <el-descriptions-item label="上报时间" label-class-name="itemSpan">{{ parentFormData.escalationTime }}</el-descriptions-item>
            <el-descriptions-item label="污染位置" label-class-name="itemSpan">{{ parentFormData.pollutePosition }}</el-descriptions-item>
            <el-descriptions-item label="责任单位" label-class-name="itemSpan">{{ unitIdFormatter }}</el-descriptions-item>
            <el-descriptions-item label="污染分类" label-class-name="itemSpan">{{ polluteTypeFormatter }}</el-descriptions-item>
            <el-descriptions-item label="整改类型" label-class-name="itemSpan">{{ dictObj.changeEnum[parentFormData.changeType] }}</el-descriptions-item>
            <el-descriptions-item label="期限天数" label-class-name="itemSpan">{{ parentFormData.changeDay }}</el-descriptions-item>
            <el-descriptions-item label="上报单位" label-class-name="itemSpan">{{ updataUnitIdFormatter }}</el-descriptions-item>
            <el-descriptions-item label="上报人" label-class-name="itemSpan">{{ parentFormData.escalationName }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="parseInt('1')">
            <el-descriptions-item label="问题描述" label-class-name="itemSpan" :content-style="{'width': '80%'}">{{ parentFormData.problemDescribe }}</el-descriptions-item>
            <el-descriptions-item label="附件" label-class-name="itemSpan" :content-style="{'width': '80%'}">
              <div>
                <div v-for="(file,index) in fileBaseListCover" :key="file.id+index" class="block">
                  <el-image
                    v-if="file.fileType ===1"
                    style="width: 100px; height: 100px"
                    :src="file.url"
                    :preview-src-list="getPreviewImages(file.id,fileBaseList)"
                    :initial-index="index"
                  />
                  <video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
                    您的浏览器不支持 video 标签。
                  </video>
                </div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <!-- 整改部分操作 -->
        <div v-if="dialogData.pageType ==='work'" class="rectification">
          <div>
            <el-form label-width="90px" class="demo-form-inline">
              <div style="display: flex;">
                <el-form-item label="是否整改:">
                  <el-radio-group v-model="workForme.isChange">
                    <el-radio :label="0">是</el-radio>
                    <el-radio :label="1">否</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="整改人:">
                  <el-input v-model="workForme.changeName" size="mini" placeholder="请输入整改人" />
                </el-form-item>
              </div>
              <el-form-item label="整改反馈:">
                <el-input
                  v-model="workForme.changeDescribe"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容"
                />
              </el-form-item>
              <el-row>
                <el-form-item label="附件:">
                  <uploadFile :upload-url="uploadTermExcelUrl" :sys-code="dialogData.sysCode" />
                </el-form-item>
              </el-row>

            </el-form>
          </div>
        </div>
        <!-- 整改信息 -->
        <div v-if="(dialogData.pageType ==='detail'||dialogData.pageType ==='approve' )&& parentFormData.state >=30">
          <el-row class="rectificationContent">
            <el-col :span="12"><div class="grid-content bg-purple" />
              <el-descriptions title="整改信息" :column="parseInt('2')">
                <el-descriptions-item label="是否整改" label-class-name="itemSpan">{{ parentFormData.changeType }}</el-descriptions-item>
                <el-descriptions-item label="整改人" label-class-name="itemSpan">{{ parentFormData.changeName }}</el-descriptions-item>
              </el-descriptions>
              <el-descriptions :column="parseInt('1')">
                <el-descriptions-item label="整改反馈" label-class-name="itemSpan">{{ parentFormData.changeDescribe }}</el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light" />
              <el-row>
                <el-col :span="3" style="margin-top: 40px;font-size: 15px;color: #101010;"><div class="grid-content bg-purple" />附件：</el-col>
                <el-col :span="21"><div class="grid-content bg-purple-light" />
                  <div>
                    <div v-for="(file,index) in fileChangeListCover" :key="file.id+index" class="block">
                      <el-image
                        v-if="file.fileType ===1"
                        style="width: 100px; height: 100px"
                        :src="file.url"
                        :preview-src-list="getPreviewImages(file.id,fileChangeList)"
                        :initial-index="index"
                      />
                      <video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
                        您的浏览器不支持 video 标签。
                      </video>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <!-- 审批信息 -->
        <div v-if="dialogData.pageType ==='detail'&& parentFormData.state>30">
          <el-row class="rectificationContent">
            <el-col :span="12"><div class="grid-content bg-purple" />
              <el-descriptions title="审批信息" :column="2">
                <el-descriptions-item label="考核打分" label-class-name="itemSpan">{{ parentFormData.checkScore }}</el-descriptions-item>
              </el-descriptions>
              <el-descriptions :column="1">
                <el-descriptions-item label="理由" label-class-name="itemSpan">{{ parentFormData.checkDescribe }}</el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light" />
              <el-row>
                <el-col :span="3" style="margin-top: 40px;font-size: 15px;color: #101010;"><div class="grid-content bg-purple" />附件：</el-col>
                <el-col :span="21"><div class="grid-content bg-purple-light" />
                  <div>
                    <div>
                      <div v-for="(file,index) in fileApproveListCover" :key="file.id+index" class="block">
                        <el-image
                          v-if="file.fileType ===1"
                          style="width: 100px; height: 100px"
                          :src="file.url"
                          :preview-src-list="getPreviewImages(file.id,fileApproveList)"
                          :initial-index="index"
                        />
                        <video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
                          您的浏览器不支持 video 标签。
                        </video>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <!-- 延期信息 -->
        <div v-if="(dialogData.pageType ==='delay' && (dialogData.pageState ==='view' ||dialogData.pageState ==='edit'))">
          <el-row class="rectificationContent">
            <el-col :span="12"><div class="grid-content bg-purple" />
              <el-descriptions title="延期信息" :column="1">
                <el-descriptions-item label="延期天数" label-class-name="itemSpan">{{ parentFormData.extensionNum }}</el-descriptions-item>
                <el-descriptions-item label="延期理由" label-class-name="itemSpan">{{ parentFormData.remake }}</el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light" />
              <el-row>
                <el-col :span="3" style="margin-top: 40px;font-size: 15px;color: #101010;"><div class="grid-content bg-purple" />附件：</el-col>
                <el-col :span="21"><div class="grid-content bg-purple-light" />
                  <div>
                    <div v-for="(file,index) in fileDelayListCover" :key="file.id+index" class="block">
                      <el-image
                        v-if="file.fileType ===1"
                        style="width: 100px; height: 100px"
                        :src="file.url"
                        :preview-src-list="getPreviewImages(file.id,fileDelayList)"
                        :initial-index="index"
                      />
                      <video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
                        您的浏览器不支持 video 标签。
                      </video>
                    </div>
                  </div></el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <!-- 审批操作 -->
        <div v-if="dialogData.pageType ==='approve'" class="examineAndApprove">
          <el-form label-width="90px" :model="rectificationFromData" class="demo-form-inline">
            <el-form-item label="考核打分:">
              <el-input v-model="approveForm.checkScore" style="width: 120px;" size="mini" />
            </el-form-item>
            <el-form-item label="理由:">
              <el-input
                v-model="approveForm.checkDescribe"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
              />
            </el-form-item>
            <el-form-item label="附件:">
              <uploadFile :upload-url="uploadTermExcelUrl" :sys-code="dialogData.sysCode" />
            </el-form-item>
          </el-form>
        </div>
        <!-- 延期操作 -->
        <div v-if="dialogData.pageType ==='delay' && ( dialogData.pageState ==='approve')" class="examineAndApprove">
          <el-form label-width="90px" :model="rectificationFromData" class="demo-form-inline">
            <el-form-item label="延期天数:">
              <el-input v-model="delayForm.extensionNum" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="延期理由:">
              <el-input
                v-model="delayForm.remake"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
              />
            </el-form-item>
            <el-form-item label="附件:">
              <uploadFile :upload-url="uploadTermExcelUrl" :sys-code="dialogData.sysCode" />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close()">关闭</el-button>
        <el-button v-if="dialogData.pageType ==='approve'" type="danger" @click="handleSubmit(50)">拒绝</el-button>
        <el-button v-if="dialogData.pageType ==='delay'&& dialogData.pageState ==='edit'" type="danger" @click="handleDelaySubmit(50)">拒绝</el-button>
        <el-button v-if="dialogData.pageType ==='delay'&& dialogData.pageState ==='edit'" type="primary" @click="handleDelaySubmit(40)">提交</el-button>
        <el-button v-if="dialogData.pageType !=='detail'&& dialogData.pageState ==='approve'" type="primary" @click="handleSubmit(40)">提交</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>
p
<script>
import _ from 'lodash'
import uploadFile from '@/components/UploadExcel/index'
import Bus from '@/Bus'
import requestObj from '@/utils/request'

export default {
  components: {
    uploadFile
  },
  props: {
    dialogData: { type: Object, default: () => {} },
    visible: { type: Boolean, required: true }
  },
  data() {
    return {
      centerDialogVisible: true,
      workForme: {
        isChange: 0,
        changeName: '',
        changeDescribe: ''
      },
      approveForm: {
        checkScore: '',
        checkDescribe: ''
      },
      delayForm: {
        remake: '',
        extensionNum: ''
      },
      rectificationFromData: {

      },
      dialogVisibleMainGraph: false,
      hasFile: '',
      setepListAdd: {
        set1: [
          { createName: '', stateName: '整改', createTime: '' },
          { createName: '', stateName: '审批', createTime: '' },
          { createName: '', stateName: '完成', createTime: '' }
        ],
        set2: [
          { createName: '', stateName: '审批', createTime: '' },
          { createName: '', stateName: '完成', createTime: '' }
        ],
        set3: [
          { createName: '', stateName: '完成', createTime: '' }
        ]
      },
      unitList: [],
      polluteList: [],
      fileList: [],
      Dic: JSON.parse(localStorage.getItem('dict')),
      dictObj: JSON.parse(localStorage.getItem('dictObj')),
      fileBaseList: [],
      fileChangeList: [],
      fileApproveList: [],
      fileBaseListCover: [],
      fileChangeListCover: [],
      fileApproveListCover: [],
      fileDelayListCover: [],
      fileDelayList: [],
      videoVisible: false,
      dialogImageUrl: ''
    }
  },
  computed: {
    uploadTermExcelUrl() {
      return `${requestObj.baseUrl}/file/upload`
    },
    parentFormData() {
      console.log('parentFormData.approveList', this.dialogData.parentFormData)
      return this.dialogData.parentFormData
    },
    updataUnitIdFormatter: function() {
      const data = this.unitList.find(item => item && item.unitId === this.dialogData.parentFormData.escalationUnitId)
      return data ? data.unitName : ''
    },
    unitIdFormatter: function() {
      const data = this.unitList.find(item => item && item.unitId === this.dialogData.parentFormData.unitId)
      return data ? data.unitName : ''
    },
    polluteTypeFormatter: function() {
      const data = this.polluteList.find(item => item && parseInt(item.dataKey) === this.dialogData.parentFormData.polluteType)
      return data ? data.dataValue : ''
    },
    setepList() {
      const leng = this.dialogData.parentFormData.approveList.length
      let data = _.cloneDeep(this.dialogData.parentFormData.approveList)

      if (leng === 1) {
        data = [...data, ...this.setepListAdd.set1]
      }
      if (leng === 2) {
        data = [...data, ...this.setepListAdd.set2]
      }
      if (leng === 3) {
        data = [...data, ...this.setepListAdd.set3]
      }
      console.log('data', leng)
      return data
    }
  },
  watch: {
    'parentFormData': {
      handler(newVal) {
        this.searchthisFileList(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    const name = this.$store.state.user.name
    this.workForme.changeName = name
    this.getContaminateList()
    this.getUnitList()
    Bus.$on('changeFileAfterList', (type, fileList) => {
      console.log('fileList', fileList)
      this.fileList = []
      if (fileList.length > 0) {
        fileList.map((item) => {
          if (item.response) {
            this.fileList.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)
        if (Number(str) === Number(index)) {
          startIndex = i
        }
      })
      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
    },
    searchthisFileList(newVal) {
      if (newVal.fileBaseList && newVal.fileBaseList.length > 0) {
        newVal.fileBaseList.forEach(item => {
          if (item.fileType === 1) {
            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,
            id: item.fileId
          })
        })
        console.log('fileBaseList', this.fileBaseList)
      }
      if (newVal.fileChangeList && newVal.fileChangeList.length > 0) {
        newVal.fileChangeList.forEach(item => {
          if (item.fileType === 1) {
            this.fileChangeList.push(`${requestObj.baseUrl}/file/preview/${item.fileId}`) // 原图
          }
          this.fileChangeListCover.push({
            url: item.fileType === 1 ? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}` : `${requestObj.baseUrl}/file/preview/${item.fileId}`,
            fileType: item.fileType,
            id: item.fileId
          })
        })
      }
      if (newVal.fileApproveList && newVal.fileApproveList.length > 0) {
        newVal.fileApproveList.forEach(item => {
          if (item.fileType === 1) {
            this.fileApproveList.push(`${requestObj.baseUrl}/file/preview/${item.fileId}`) // 原图
          }
          this.fileApproveList.push(`${requestObj.baseUrl}/file/preview/${item.fileId}`) // 原图
          this.fileApproveListCover.push({
            url: item.fileType === 1 ? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}` : `${requestObj.baseUrl}/file/preview/${item.fileId}`,
            fileType: item.fileType,
            id: item.fileId
          })
        })
      }
      if (newVal.fileList && newVal.fileList.length > 0) {
        newVal.fileList.forEach(item => {
          if (item.fileType === 1) {
            this.fileDelayList.push(`${requestObj.baseUrl}/file/preview/${item.fileId}`) // 原图
          }
          this.fileDelayList.push(`${requestObj.baseUrl}/file/preview/${item.fileId}`) // 原图
          this.fileDelayListCover.push({
            url: item.fileType === 1 ? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}` : `${requestObj.baseUrl}/file/preview/${item.fileId}`,
            fileType: item.fileType,
            id: item.fileId
          })
        })
      }
    },
    close() {
      this.$emit('update:visible', false)
    },
    // 获取责任单位list
    getUnitList() {
      this.$request({
        url: '/allocation/unit',
        method: 'get'
      }).then((res) => {
        this.unitList = res.data
      })
    },
    handleDelaySubmit(state) {
      this.$request({
        url: '/allocationExtension/check',
        method: 'get',
        params: {
          id: this.dialogData.parentFormData.id,
          state: state
        }
      }).then((res) => {
        if (res.code === 0) {
          this.$emit('update:visible', false)
          this.$emit('handeleSumit')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleSubmit(state) {
      // 整改
      let api = '/allocation/change'
      let data = {}
      console.log('this.dialogData.pageType', this.dialogData.pageType)
      if (this.dialogData.pageType === 'work') {
        api = '/allocation/change'
        data = {
          'allocationId': this.dialogData.parentFormData.allocationId,
          ...this.workForme,
          'fileChangeList': this.fileList,
          state: 30
        }
      } else if (this.dialogData.pageType === 'approve') {
        api = '/allocation/check'
        data = {
          'allocationId': this.dialogData.parentFormData.allocationId,
          ...this.approveForm,
          'fileApproveList': this.fileList,
          state: state
        }
      } else if (this.dialogData.pageType === 'delay') {
        api = '/allocation/applyfor'
        data = {
          'allocationId': this.dialogData.parentFormData.allocationId,
          ...this.delayForm,
          'fileList': this.fileList
        }
      }
      this.$request({
        url: api,
        method: 'post',
        data: data
      }).then((res) => {
        if (res.code === 0) {
          this.$emit('update:visible', false)
          this.$emit('handeleSumit')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getContaminateList() {
      this.$request({
        url: '/allocation/contaminate',
        method: 'get'
      }).then((res) => {
        this.polluteList = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.titBox{
  position: relative;
  font-size: 18px;
  div:first-child{
    position: absolute;
    left: 10px;
  }
  div{
    display: inline-block;
  }
}
.stepsList {
  border-bottom: 1px dashed rgba(187, 187, 187, 1);
  padding-bottom: 10px;
}
.inforData{
  margin-top: 20px;
  border-bottom: 1px dashed rgba(187, 187, 187, 1);
  padding-bottom: 10px;
  font-size: 15px!important;
  color: rgba(16, 16, 16, 1)!important;
}
  /deep/.itemSpan{
    width: 70px;
    text-align: right;
    font-size: 15px;
    color: rgba(16, 16, 16, 1);
  }
  .rectification ,.examineAndApprove,.rectificationContent{
    margin-top: 20px;
    border-bottom: 1px dashed rgba(187, 187, 187, 1);
    margin-bottom: 10px;
  }
  .block {
    display: inline-block;
    margin-right: 10px;
}
</style>