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

<template>
  <div class="question-edit">
    <nav-bar></nav-bar>
    <div class="page-container">
      <!--   基本信息   -->
      <div class="card" v-if="taskInfo">
        <van-panel :title="taskInfo.srcTaskName">
          <div class="panel-box">
<!--            <div class="panel-box-item">-->
<!--              <van-row>-->
<!--                <van-col span="8">-->
<!--                  <span class="item-label">隐患所在机构：</span>-->
<!--                </van-col>-->
<!--                <van-col span="14">-->
<!--                  <span class="item-value">{{taskInfo.orgName}}</span>-->
<!--                </van-col>-->
<!--              </van-row>-->
<!--            </div>-->
            <van-cell title="隐患所在机构" :label="taskInfo.orgName" />
            <van-cell title="检查项" :label="taskInfo.checkItem" />
            <van-cell title="检查内容" :label="taskInfo.checkContent" />
            <van-cell title="隐患描述" :label="taskInfo.questionDesc" />
            <van-cell title="发现日期" :label="taskInfo.submitTime" />
            <van-cell title="提出人" :label="taskInfo.submitorName" />
            <van-cell title="整改期限" :label="formatDate(taskInfo.reformDeadline,'YYYY-MM-DD')" />
            <van-cell title="隐患图片" :border="false" >
              <div v-if="v.img" class="nfc-img" v-for="(v,i) in taskInfo.images" :key="v.img" @click="preViewNFC(i)">
                <img :src="imgUrl(v.img)" alt="" >
                <span>{{v.checkName}}</span>
              </div>
            </van-cell>
          </div>
        </van-panel>
      </div>


      <div class="card" v-if="taskInfo.confirm" >
        <van-panel title="处理">
          <div class="panel-box">
            <van-cell title="处理意见" :label="taskInfo.confirm.executeStatus === 0 ? '确认' : '提出异议'"></van-cell>
            <van-cell v-show="taskInfo.confirm.executeStatus===1" title="异议内容" :label="taskInfo.confirm.description"></van-cell>
            <van-cell title="异议人" :label="taskInfo.confirm.executorName"></van-cell>
          </div>
        </van-panel>
      </div>

      <div class="card" v-if="taskInfo.confirmDissent" >
        <van-panel title="审批">
          <div class="panel-box">
            <van-cell title="审核结果" :label="taskInfo.confirmDissent.executeStatus === 0 ? '同意' : '不同意'"></van-cell>
<!--            <van-cell title="审核人" :label="taskInfo.confirmDissent.executorName"></van-cell>-->
            <van-cell v-show="taskInfo.confirmDissent.executeStatus===1" title="原因" :label="taskInfo.confirmDissent.description"></van-cell>
          </div>
        </van-panel>
      </div>

      <div class="card" v-if="taskInfo.reform" >
        <van-panel title="整改">
          <div class="panel-box">
            <van-cell title="整改日期" :label="formatDate(taskInfo.reform.executeTime,'YYYY-MM-DD')"></van-cell>
<!--            <van-cell title="审核结果" :label="taskInfo.reform.executeStatus === 0 ? '已整改' : '未整改'"></van-cell>-->
            <van-cell title="整改描述" :label="taskInfo.reform.description"></van-cell>
            <div class="upload-box" v-if="taskInfo.reform.images.length > 0">
              <van-cell>
                <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>
              </van-cell>
            </div>
          </div>
        </van-panel>
      </div>



      <div class="card" 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
              label="异议内容"
              type="textarea"
              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" 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
              label="原因"
              type="textarea"
              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" v-if="type === 'reform'">
        <van-panel title="整改">
          <div class="panel-box">
            <date-cell required  title="整改日期" v-model="reformData.reformDate" dateType="date" />
            <van-field
              required
              v-model="reformData.description"
              rows="1"
              autosize
              label="整改描述："
              type="textarea"
              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/uploader';
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 {
      //基本信息
      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','rectification_deadline'],
    }
  },
  mounted() {
    console.log('系统信息：'+window.navigator.platform);
    this.getData();
  },
  computed:{
    ...mapGetters(['orgId','id','dictionary'])
  },
  methods:{
    formatDate,
    //图片预览
    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 && !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) => {
        if (r.data) {
          this.$toast("提交成功");
          this.$emit("success");
          this.$router.go(-1);
        }
      });
    },

    //初始化数据
    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.areaList = [];
      this.taskInfo= [];
      this.selectArea = [];
      this.NFCList = [];
      this.checkList = [];
      this.checkItemList = [];
      this.NFCNum = 0;
      this.enable = false;
    },
  }
}
</script>

<style lang="scss">
//.question-edit{
//  .van-panel__header{
//    color:red
//  }
//}

</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;
  }
}
.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{
  margin: 30px;
}
.nfc-img{
  display: inline-block;
  width: 140px;
  height: 140px;
  margin: 0 10px;
  position: relative;
  >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>