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="8" class="label">
                <div>问题名称</div>
              </van-col>
              <van-col :span="16">
              <span>
                {{taskInfo.srcTaskName}}
              </span>
              </van-col>
            </van-row>
          </div>
          <div class="bigbox">
            <div class="mainItem">
              <van-row>
                <van-col :span="8" class="label">
                  <div>问题状态</div>
                </van-col>
                <van-col :span="16">
                 <span v-if="taskInfo.reformStatus" :style="{color:getState(getDictLabel(taskInfo.reformStatus,'question_reform_status'))}">
                  {{getDictLabel(taskInfo.reformStatus,'question_reform_status')}}
                  </span>
                  <span v-else :style="{color:getState(getDictLabel(taskInfo.confirmStatus,'question_confirm_status'))}">
                  {{getDictLabel(taskInfo.confirmStatus,'question_confirm_status')}}
                  </span>
                </van-col>
              </van-row>
            </div>
            <div class="mainItem">
              <van-row>
                <van-col :span="8" class="label">
                  <div>隐患所在机构</div>
                </van-col>
                <van-col :span="16">
                <span>
                  {{taskInfo.orgName}}
                </span>
                </van-col>
              </van-row>
            </div>

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

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

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

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

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

            <div class="mainItem">
              <van-row>
                <van-col :span="8" class="label">
                  <div>整改期限</div>
                </van-col>
                <van-col :span="16">
                 <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="8" class="label">
                  <div>隐患图片</div>
                </van-col>
                <van-col :span="16">
                  <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="8" class="label"><div>整改日期</div></van-col>
              <van-col :span="16"><span>{{formatDate(taskInfo.reform.reformDate,'YYYY-MM-DD')}}</span></van-col>
            </van-row>
          </div>

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

          <div class="mainItem" v-if="taskInfo.reform.images">
            <van-row>
              <van-col :span="8" class="label"><div>上传信息</div></van-col>
              <van-col :span="16">
                <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="8" class="label"><div>处理意见</div></van-col>
              <van-col :span="16"><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="8" class="label"><div>异议内容</div></van-col>
              <van-col  :span="16"><span>{{taskInfo.confirm.description}}</span></van-col>
            </van-row>
          </div>

          <div class="mainItem">
            <van-row >
              <van-col :span="8" class="label"><div>异议人</div></van-col>
              <van-col  :span="16"><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="8" class="label"><div>审核结果</div></van-col>
              <van-col :span="16"><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="8" class="label"><div>原因</div></van-col>
              <van-col :span="16"><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 :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";
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','question_confirm_status','question_reform_status','rectification_deadline'],
    }
  },
  mounted() {
    console.log('系统信息：'+window.navigator.platform);
    this.getData();
  },
  computed:{
    ...mapGetters(['orgId','id','dictionary'])
  },
  methods:{
    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 {
  display: flex;
  font-size: 28px;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
  &:last-child{
    border-bottom:none;
  }
  div {
    flex: 1;
    text-align: left;
  }
  p {
  }
  .label {
    width: 230px;
    flex: none;
  }
  .labelPeople {
    margin-bottom: 20px;
  }
}
.mainItemData {
  justify-content: end;
}


.van-row {
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  .van-col--8 {
    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--16 {
    min-height: 100px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    background-color: #fff;
    padding: 10px;

    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,.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>