soc_app/src/views/menu/problemItem/detail.vue

<template>
  <div class="question-edit">
    <nav-bar></nav-bar>
    <div class="page-container">
      <!--   基本信息   -->
      <div v-if="taskInfo">
        <div class="card">
          <div class="mainItem">
            <van-row>
              <van-col :span="7" class="label">
                <div>问题名称</div>
              </van-col>
              <van-col :span="17">
                <span>
                  {{ taskInfo.srcTaskName }}
                </span>
              </van-col>
            </van-row>
          </div>
          <div class="bigbox">
            <div class="mainItem">
              <van-row>
                <van-col :span="7" class="label">
                  <div>问题状态</div>
                </van-col>
                <van-col :span="17">
                  <span
                    v-if="taskInfo.reformStatus && taskInfo.reformStatus==10 && taskInfo.overdueStatus"
                    :style="{ color: getState(getDictLabel(taskInfo.overdueStatus, 'app_question_status')) }"
                  >
                    {{ getDictLabel(taskInfo.overdueStatus, 'app_question_status') }}
                  </span>
                  <span
                    v-else-if="taskInfo.reformStatus"
                    :style="{ color: getState(getDictLabel(taskInfo.reformStatus, 'app_question_status')) }"
                  >
                    {{ getDictLabel(taskInfo.reformStatus, 'app_question_status') }}
                  </span>
                  <span
                    v-else
                    :style="{ color: getState(getDictLabel(taskInfo.confirmStatus, 'app_question_status')) }"
                  >
                    {{ getDictLabel(taskInfo.confirmStatus, 'app_question_status') }}
                  </span>
                </van-col>
              </van-row>
            </div>
            <div class="mainItem">
              <van-row>
                <van-col :span="7" class="label">
                  <div>隐患所在机构</div>
                </van-col>
                <van-col :span="17">
                  <span>
                    {{ taskInfo.orgName }}
                  </span>
                </van-col>
              </van-row>
            </div>

            <div class="mainItem">
              <van-row>
                <van-col :span="7" class="label">
                  <div>检查项</div>
                </van-col>
                <van-col :span="17">
                  <span>
                    {{ taskInfo.checkItem }}
                  </span>
                </van-col>
              </van-row>
            </div>

            <div class="mainItem">
              <van-row>
                <van-col :span="7" class="label">
                  <div>检查内容</div>
                </van-col>
                <van-col :span="17">
                  <span>
                    {{ taskInfo.checkContent }}
                  </span>
                </van-col>
              </van-row>
            </div>

            <div class="mainItem">
              <van-row>
                <van-col :span="7" class="label">
                  <div>隐患描述</div>
                </van-col>
                <van-col :span="17">
                  <span>
                    {{ taskInfo.questionDesc }}
                  </span>
                </van-col>
              </van-row>
            </div>

            <div class="mainItem">
              <van-row>
                <van-col :span="7" class="label">
                  <div>发现时间</div>
                </van-col>
                <van-col :span="17">
                  <span>
                    {{ taskInfo.submitTime }}
                  </span>
                </van-col>
              </van-row>
            </div>

            <div class="mainItem">
              <van-row>
                <van-col :span="7" class="label">
                  <div>提出人</div>
                </van-col>
                <van-col :span="17">
                  <span>
                    {{ taskInfo.submitorName }}
                  </span>
                </van-col>
              </van-row>
            </div>

            <div class="mainItem">
              <van-row>
                <van-col :span="7" class="label">
                  <div>整改期限</div>
                </van-col>
                <van-col :span="17">
                  <span>
                    {{ formatDate(taskInfo.reformDeadline, 'YYYY-MM-DD') }}
                  </span>
                </van-col>
              </van-row>
            </div>

            <div class="mainItem" v-if="taskInfo.images && taskInfo.images.length > 0">
              <van-row>
                <van-col :span="7" class="label">
                  <div>隐患图片</div>
                </van-col>
                <van-col :span="17">
<!--                  <div class="nfc-img" v-for="(v,i) in ['/2023/12/18/20231218165501A031.png','/2023/12/18/20231218165501A031.png','/statics/2023/12/18/20231218165501A031.png','/statics/2023/12/18/20231218165501A031.png']" :key="v" @click="clickImage(taskInfo.images,i)">-->
<!--                    <img :src="imgUrl(v)" alt="" >-->
<!--                  </div>-->
                  <div class="nfc-img" v-for="(v,i) in taskInfo.images" :key="v" @click="clickImage(taskInfo.images,i)">
                    <img :src="imgUrl(v)" alt="" >
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
      </div>

      <div v-if="taskInfo.reform">
        <p class="info-title">整改情况</p>
        <div class="card">
          <div class="mainItem">
            <van-row>
              <van-col :span="7" class="label"><div>整改日期</div></van-col>
              <van-col :span="17"><span>{{formatDate(taskInfo.reform.reformDate,'YYYY-MM-DD')}}</span></van-col>
            </van-row>
          </div>

          <div class="mainItem">
            <van-row>
              <van-col :span="7" class="label"><div>整改描述</div></van-col>
              <van-col :span="17"><span>{{taskInfo.reform.description}}</span></van-col>
            </van-row>
          </div>

          <div class="mainItem" v-if="taskInfo.reform.images">
            <van-row>
              <van-col :span="7" class="label"><div>上传信息</div></van-col>
              <van-col :span="17">
                <div v-if="taskInfo.reform.images && taskInfo.reform.images.length > 0">
                  <div
                    class="nfc-img van-hairline--surround"
                    v-for="(v, i) in taskInfo.reform.images"
                    :key="v"
                    @click="clickImage(taskInfo.reform.images, i)"
                  >
                    <img :src="imgUrl(v)" alt="" />
                  </div>
                </div>
              </van-col>
            </van-row>
          </div>
        </div>
      </div>

      <div v-if="taskInfo.confirm">
        <p class="info-title">处理情况</p>
        <div class="card">
          <div class="mainItem">
            <van-row>
              <van-col :span="7" class="label"><div>处理意见</div></van-col>
              <van-col :span="17"><span>{{taskInfo.confirm.executeStatus === 0 ? '确认' : '提出异议'}}</span></van-col>
            </van-row>
          </div>

          <div class="mainItem" v-show="taskInfo.confirm.executeStatus === 1">
            <van-row>
              <van-col :span="7" class="label"><div>异议内容</div></van-col>
              <van-col  :span="17"><span>{{taskInfo.confirm.description}}</span></van-col>
            </van-row>
          </div>

          <div class="mainItem">
            <van-row>
              <van-col :span="7" class="label"><div>异议人</div></van-col>
              <van-col  :span="17"><span>{{taskInfo.confirm.executorName}}</span></van-col>
            </van-row>
          </div>
        </div>
      </div>

      <div v-if="taskInfo.confirmDissent">
        <p class="info-title">审批情况</p>
        <div class="card">
          <div class="mainItem">
            <van-row>
              <van-col :span="7" class="label"><div>审核结果</div></van-col>
              <van-col :span="17"><span>{{taskInfo.confirmDissent.executeStatus === 0 ? '同意' : '不同意'}}</span></van-col>
            </van-row>
          </div>
          <div class="mainItem" v-show="taskInfo.confirmDissent.executeStatus === 1">
            <van-row>
              <van-col :span="7" class="label"><div>原因</div></van-col>
              <van-col :span="17"><span>{{taskInfo.confirmDissent.description}}</span></van-col>
            </van-row>
          </div>
        </div>
      </div>

      <div class="card edit-panel" v-if="type === 'confirm'">
        <van-panel title="确认">
          <div class="panel-box">
            <van-radio-group v-model="confirmData.status" required>
              <van-cell-group>
                <van-cell title="确认情况" clickable>
                  <template #right-icon>
                    <van-radio :name="0" />
                  </template>
                </van-cell>
                <van-cell title="提出异议" clickable>
                  <template #right-icon>
                    <van-radio :name="1" />
                  </template>
                </van-cell>
              </van-cell-group>
            </van-radio-group>

            <van-field
              v-show="confirmData.status"
              v-model="confirmData.description"
              rows="1"
              autosize
              required
              :maxlength="200"
              label="异议内容"
              type="textarea"
              show-word-limit
              placeholder="请输入"
            />
            <div class="big-btn-box" v-if="taskInfo.orgId == orgId && taskInfo.confirmStatus == 0">
              <van-button type="info" size="large" @click="onSubmit('确认')">提交</van-button>
            </div>
          </div>
        </van-panel>
      </div>

      <div class="card edit-panel" v-if="type === 'confirmDissent'">
        <van-panel title="审批">
          <div class="panel-box">
            <van-radio-group v-model="confirmDissentData.status" required>
              <van-cell-group>
                <van-cell title="同意" clickable>
                  <template #right-icon>
                    <van-radio :name="0" />
                  </template>
                </van-cell>
                <van-cell title="不同意" clickable>
                  <template #right-icon>
                    <van-radio :name="1" />
                  </template>
                </van-cell>
              </van-cell-group>
            </van-radio-group>

            <van-field
              v-show="confirmDissentData.status"
              v-model="confirmDissentData.description"
              rows="1"
              autosize
              required
              :maxlength="200"
              label="原因"
              :rules="[{ required: true, message: '请输入' }]"
              type="textarea"
              show-word-limit
              placeholder="请输入"
            />
            <div class="big-btn-box" v-if="taskInfo.submitorId == id && taskInfo.confirmStatus == 1">
              <van-button type="info" size="large" @click="onSubmit('审核')">提交</van-button>
            </div>
          </div>
        </van-panel>
      </div>

      <div class="card edit-panel" v-if="type === 'reform'">
        <van-panel title="整改情况">
          <div class="panel-box">
            <date-cell
              required
              :min-date="dayjs(taskInfo.submitTime).toDate()"
              :max-date="maxDate"
              is-row
              title="整改日期"
              v-model="reformData.reformDate"
              dateType="date"
            />
            <van-field
              required
              v-model="reformData.description"
              rows="1"
              autosize
              :maxlength="200"
              label="整改描述："
              type="textarea"
              show-word-limit
              placeholder="请输入"
            />
            <div class="upload-box">
              <uploader :maxCount="5" v-model="reformData.images" />
            </div>
            <div
              class="big-btn-box"
              v-if="taskInfo.orgId == orgId && taskInfo.confirmStatus == 2 && taskInfo.reformStatus != 11"
            >
              <van-button type="info" size="large" @click="onSubmit('整改')">提交</van-button>
            </div>
          </div>
        </van-panel>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import SelectCell from '@/components/selectCell'
import DateCell from '@/components/dateCell'
import Uploader from '@/components/upload/gxuploader.vue'
import { taskDetails, confirm, confirmDissent, reform } from './api'
import { formatDate } from '@/filters/filter'
import { ImagePreview } from 'vant'
import { mapGetters } from 'vuex'
import { imgUrl } from '@/utils'
import dayjs from 'dayjs'
export default {
  components: { NavBar, SelectCell, DateCell, Uploader },
  data() {
    return {
      maxDate: new Date(),
      //基本信息
      taskInfo: [],
      formData: {},
      //确认
      confirmData: {
        status: 0,
        description: null
      },
      //审核
      confirmDissentData: {
        status: 0,
        description: null
      },
      //整改
      reformData: {
        reformDate: null,
        description: null,
        images: null
      },
      type: null,
      preViewImages: {},
      dicts: ['resumption_status']
    }
  },
  mounted() {
    console.log('系统信息：' + window.navigator.platform)
    this.getData()
  },
  computed: {
    ...mapGetters(['orgId', 'id', 'dictionary'])
  },
  methods: {
    dayjs,
    formatDate,
    getState(state) {
      switch (state) {
        case '待整改':
          return '#008cd6'
        case '已整改':
          return '#009240'
        case '已逾期':
          return '#D7000F'
      }
    },
    //图片预览
    clickImage(arr, i) {
      this.preViewImages.images = arr.map(v => imgUrl(v))
      this.preViewImages.startPosition = i
      ImagePreview(this.preViewImages)
    },
    //提交
    onSubmit(type) {
      let data, queryMethod
      switch (type) {
        case '确认':
          data = this.confirmData
          queryMethod = confirm
          break
        case '审核':
          data = this.confirmDissentData
          queryMethod = confirmDissent
          break
        case '整改':
          data = this.reformData
          queryMethod = reform
      }
      if (type === '确认' || type === '审核') {
        if (data.status == 1 && !data.description) {
          return this.$toast('请填写信息')
        }
      } else {
        if (!data.reformDate || !data.description) {
          return this.$toast('请填写完整信息')
        }
        if (data.images) {
          let img = data.images.map(v => {
            return v.imgPath
          })
          data.images = img.toString()
        }
      }
      data.id = this.taskInfo.id
      queryMethod(data).then(r => {
        this.$toast('提交成功')
        this.$router.replace({
          name: 'problemItem',
          path: '/problemItem',
          params: { event: 'refresh' }
        })
      })
    },

    //初始化数据
    getData() {
      let id = this.$route.query.id
      this.type = this.$route.query.type
      taskDetails(id).then(res => {
        this.taskInfo = res.data
        this.taskInfo.confirm = res.data.flows.find(d => d.executeStep === 1)
        this.taskInfo.confirmDissent = res.data.flows.find(d => d.executeStep === 2)
        this.taskInfo.reform = res.data.flows.find(d => d.executeStep === 11)
        if (this.taskInfo.reform && this.taskInfo.reform.images) {
          this.taskInfo.reform.images = this.taskInfo.reform.images.split(',')
        }
      })
    },

    //返回
    goBack() {
      this.$router.go(-1)
      this.clearData()
    },

    //清空数据
    clearData() {
      this.taskInfo = []
      //确认
      this.confirmData = {
        status: 0,
        description: null
      }
      //审核
      this.confirmDissentData = {
        status: 0,
        description: null
      }
      //整改
      this.reformData = {
        reformDate: null,
        description: null,
        images: null
      }
    }
  }
}
</script>

<style lang="scss">
.question-edit {
  .panel-box {
  }
}
</style>
<style lang="scss" scoped>
.question-edit {
  height: 100%;
  overflow: hidden;
}
.page-container {
  height: calc(100vh - 194px);
  overflow: auto;
  padding: 20px;
}
.flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  > span {
    margin: 0 20px;
  }
}
.info-title {
  height: 100px;
  line-height: 120px;
}
.mainItem {
  font-size: 28px;
  width: 100%;
}
.mainItemData {
  justify-content: end;
}

.van-row {
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  .van-col--7 {
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: rgb(230, 230, 230, 0.4);
    opacity: 1;
  }
  .van-col {
    text-align: justify;
    white-space: pre-wrap;
  }
  .zl {
    display: block !important;
    flex: none !important;
    padding-left: 10px;
  }
  .van-col--17 {
    min-height: 100px;
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 10px;
    padding-left: 10px;
    flex-flow: wrap;
    // opacity: 0.9;
  }
  .tagCls {
    margin-top: 10px;
  }
  .bgc {
    background-color: #fff;
    padding: 10px;
  }
}

.edit-panel {
  margin-top: 20px;
}

.card {
  margin-bottom: 20px;
  box-shadow: 0 10px 10px #eaeaea;
}
.card:last-child {
  margin-bottom: 0;
}
.panel-box {
  padding: 0 20px;
}
.panel-box-item {
  height: 36px;
  line-height: 36px;
}
.item-label {
  width: 100%;
  display: flex;
  justify-content: right;
  align-items: center;
}
.item-value {
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
}
.upload-box {
  padding: 20px 30px;
}
.nfc-img {
  display: inline-block;
  width: 140px;
  height: 140px;
  margin: 10px;
  position: relative;
  //&:first-child{
  //  margin-left: 0;
  //}
  > img {
    width: 100%;
    height: 100%;
    border: none;
  }
  > span {
    position: absolute;
    padding: 0 10px;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    color: #eaeaea;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 30px;
    height: 30px;
  }
}
.big-btn-box {
  padding-bottom: 20px;
}
</style>