esua-epdc-admin/src/views/modules/events/issue-process-detail-view.vue

<template>
    <div class="project-handle">
            <div class="project-detail">
                <div class="project-detail-tip">议题详情</div>
                <el-form label-position="right" label-width="120px">
                    <el-form-item label="议题内容:" prop="eventContent">
                        <div>{{dataForm.issueContent}}</div>
                        <el-image v-for="url in dataForm.images"
                                  style="width: 100px; height: 100px; margin-right: 10px"
                                  :key="url"
                                  :src="url"
                                  :preview-src-list="previewImgList"
                                  @click="clickImg(url)">
                        </el-image>
                    </el-form-item>
                    <el-form-item label="所属网格:" prop="ownGrid">
                        <div>{{dataForm.ownGrid}}</div>
                    </el-form-item>
                    <el-form-item label="上报时间:" prop="distributeTime">
                        <div>
                            {{dataForm.distributeTime}}
                        </div>
                    </el-form-item>
                    <el-form-item label="上报人:" prop="nickName">
                        <div>{{dataForm.nickName}}</div>
                    </el-form-item>
                    <el-form-item label="电话:" prop="mobile">
                        <div>{{dataForm.mobile}}</div>
                    </el-form-item>
                    <el-form-item label="所属类别:" prop="categoryName">
                        <div>{{dataForm.categoryName}}</div>
                    </el-form-item>
                </el-form>
                <div class="container">
                    <div class="location"><span style="font-weight: bold;color: #606266">上报位置:</span> {{dataForm.address}}</div>
                    <div id="map"></div>
                </div>
            </div>
            <div class="project-progress">
                <div class="project-progress-tip">处理进展</div>
                    <el-timeline>
                        <el-timeline-item
                          v-for="(jobFeedbackDTO, index) in dataForm.jobFeedbackDTOS"
                          :key="index" placement="top"
                          :color="index === dataForm.jobFeedbackDTOS.length - 1 ? '#ccc': 'green'">
                            <div v-if="jobFeedbackDTO.stateName === '【反馈】'">{{jobFeedbackDTO.createdTime}} <span style="font-weight: bold;color: #606266">{{'【回应】'}}</span></div>
                            <div v-else>{{jobFeedbackDTO.createdTime}} <span style="font-weight: bold;color: #606266">{{jobFeedbackDTO.stateName}}</span></div>
                            <div>处理部门： {{jobFeedbackDTO.handlerDept}}</div>
                            <div>处理意见： {{jobFeedbackDTO.advice}}</div>
                        </el-timeline-item>
                    </el-timeline>
            </div>
            <div class="handle-operation">
               <div class="handle-operation-tip">处理操作</div>
              <el-form ref="dataForm" label-width="120px" label-position="right" style="width: 720px;" :model="dataForm" :rules="dataRule">
                <el-form-item label="处理:" prop="state">
                    <el-select v-model="dataForm.state" placeholder="请选择">
                        <el-option
                                v-for="item in verifyOptions"
                                :key="item.verifyFlag"
                                :label="item.verifyTitle"
                                :value="item.verifyFlag">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="处理意见:" prop="advice">
                    <el-input v-model="dataForm.advice" type="textarea" placeholder="请您填写居民诉求的处理情况及答复意见，向居民公开展示，500字以内"></el-input>
                </el-form-item>
                <el-form-item style="float: right;">
                    <el-button size="small" style="width: 95px" type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
                    <el-button size="small" style="width: 95px" @click="backToItemDeal">返回</el-button>
                </el-form-item>
              </el-form>
            </div>
    </div>
</template>

<script>
import BMap from 'BMap'
import 'element-ui/lib/theme-chalk/timeline.css'
import 'element-ui/lib/theme-chalk/timeline-item.css'
import 'element-ui/lib/theme-chalk/image.css'
import debounce from 'lodash/debounce'
export default {
  name: 'itemDealDetailView',
  data () {
    return {
      map: '',
      dataForm: {
        id: '',
        issueContent: '',
        nickName: '',
        distributeTime: '',
        advice: '',
        state: '',
        jobFeedbackDTOS: [],
        images: []
      },
      previewImgList: [],
      verifyOptions: [{
        verifyFlag: '1',
        verifyTitle: '回应'
      }, {
        verifyFlag: '2',
        verifyTitle: '关闭议题'
      }, {
        verifyFlag: '4',
        verifyTitle: '转为项目'
      }]
    }
  },
  mounted () {
    this.dataForm.id = this.$route.query.id
    this.init()
  },
  computed: {
    dataRule () {
      return {
        advice: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        eventState: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        state: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    backToItemDeal () {
      this.$parent.selectComponent = 'IssueProcessList'
    },
    initBmap (latitude, longitude) {
      this.map = new BMap.Map('map')
      const point = new BMap.Point(longitude, latitude)
      var marker = new BMap.Marker(point)
      this.map.addOverlay(marker)
      this.map.centerAndZoom(point, 13)
      this.map.enableScrollWheelZoom(true)
    },
    init () {
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.getInfo()
        }
      })
    },
    clickImg (url) {
      this.previewImgList = []
      this.previewImgList.push(url)
    },
    // 获取信息
    getInfo () {
      this.$http.get(`/events/issue/waitHandleIssueDetail/${this.dataForm.id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
        this.initBmap(this.dataForm.issueLatitude, this.dataForm.issueLongitude)
      }).catch(() => {})
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        if (this.dataForm.advice.length > 500) {
          return this.$message.error('处理意见不超过500字')
        }
        this.$http['post']('/events/issue/issueWaitHandleSubmit', this.dataForm).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
          this.$parent.selectComponent = 'IssueProcessList'
        }).catch(() => {})
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>

<style lang="scss">
    .project-handle {
        .el-timeline {
            padding-left: 9px;
            font-size: 13px;
        }
        .el-textarea {
          width: 600px !important;
        }
        .el-input {
          width: 600px !important;
        }
    }
    .el-form-item__label {
        font-weight: bold;
    }
</style>

<style lang="scss" scoped>
    .project-handle {
        width: 100%;
        height: calc(100vh - 120px);
        background: #ffffff;
        box-sizing: border-box;
        padding: 10px;
        .project-detail {
            width: 79%;
            height: 49%;
            border: 2px solid #ccc;
            box-sizing: border-box;
            padding: 10px;
            padding-top: 20px;
            float:left;
            margin-bottom: 1%;
            position:relative;
            .project-detail-tip {
              position: absolute;
              top: 0;
              left:0;
              width: 80px;
              height: 30px;
              line-height: 30px;
              color: #ffffff;
              background: #4ac38b;
              text-align:center;
            }
            .el-form {
                width: 58%;
                height: 100%;
                float:left;
                overflow-y:auto;
                &::-webkit-scrollbar {
                    width: 5px;
                    height: 1px;
                }
                &::-webkit-scrollbar-thumb {
                    border-radius: 5px;
                    background: #fff;
                }
                &::-webkit-scrollbar-track {
                    border-radius: 10px;
                    background: #fff;
                }
            }
            .container {
                width: 40%;
                height: 100%;
                float: right;
                .location {
                    height: 30px;
                    line-height: 30px;
                }
                #map {
                    width: 100%;
                    height: calc(100% - 30px);
                }
            }
        }
        .project-progress {
            width: 20%;
            height: 100%;
            float: right;
            border: 2px solid #ccc;
            box-sizing: border-box;
            margin-left: 1%;
            padding-top: 20px;
            overflow-y:auto;
            position: relative;
            padding-top: 40px;
            .project-progress-tip {
              position: absolute;
              top: 0;
              left:0;
              width: 80px;
              height: 30px;
              line-height: 30px;
              color: #ffffff;
              background: #0098ff;
              text-align:center;
            }
            &::-webkit-scrollbar {
                width: 5px;
                height: 1px;
            }
            &::-webkit-scrollbar-thumb {
                border-radius: 5px;
                background: #aaa;
            }
            &::-webkit-scrollbar-track {
                border-radius: 10px;
                background: #ccc;
            }
        }
        .handle-operation {
          padding-top: 30px;
          box-sizing: border-box;
          width: 79%;
          height: 49%;
          box-sizing: border-box;
          border: 2px solid #ccc;
          float:left;
          position: relative;
          overflow-y: auto;
          .handle-operation-tip {
            position: absolute;
            top: 0;
            left:0;
            width: 80px;
            height: 30px;
            line-height: 30px;
            color: #ffffff;
            background: #ff7600;
            text-align:center;
          }
          &::-webkit-scrollbar {
            width: 5px;
            height: 1px;
          }
          &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background: #aaa;
          }
          &::-webkit-scrollbar-track {
            border-radius: 10px;
            background: #ccc;
          }
        }
    }
</style>