dvcp_v2_wxcp_app/library/apps/AppMonitoringObject/MonitorRemoveView.vue

<template>
  <div class="MonitorRemoveView">
    <div class="user-info" v-if="info">
      <div class="title">审核信息</div>
      <div class="info">
        <div class="item">
          <span>操作类型：</span>
          <span style="color: #2EA222;" v-if="info.operationType == 0">申请纳入监测</span>
          <span style="color: #2EA222;" v-if="info.operationType == 1">申请解除风险</span>
        </div>
        <div class="item">
          <span>监测类型：</span>
          <span v-if="info.operationType == 0">{{ $dict.getLabel('fpRiskType', info.bizDictValue) }}</span>
          <span v-if="info.operationType == 1">{{ $dict.getLabel('fpRiskEliminationMethod', info.bizDictValue) }}</span>
        </div>
        <div class="item">
          <span>申请人：</span>
          <span>{{ info.operationUserName }}</span>
        </div>
        <div class="item">
          <span>申请时间：</span>
          <span>{{ info.createTime }}</span>
        </div>
        <div class="item">
          <span>备注说明：</span>
          <span>{{ info.detail }}</span>
        </div>
        <div class="item">
          <span style="color: #999;">图片：</span>
          <div class="imgs" v-if="info.files && info.files.length">
            <image :src="img.url" @click="prevImg(info.files, img.url)" v-for="(img, index) in info.files"
                   :key="index"/>
          </div>
        </div>
      </div>
    </div>
    <div class="result">
      <div class="title">处理意见</div>
      <AiGroup>
        <AiItem label="审核结果" required>
          <div class="check-item" :class="{active:form.pass==1}" @click="form.pass='1'">{{ type == 0 ? '纳入监测' : '解除风险' }}<img
              src="./components/img/check-icon.png" alt=""></div>
          <div class="check-item" :class="{active:form.pass=='0'}" @click="form.pass='0'">驳回申请<img src="./components/img/check-icon.png"/></div>
        </AiItem>
        <AiItem label="监测对象类型" required v-if="form.pass==1">
          <AiSelect v-model="form.objectType" dict="fpType"/>
        </AiItem>
        <AiItem label="备注说明" topLabel>
          <u-input v-model="form.opinion" type="textarea" placeholder="请输入备注说明" height="200" :maxlength="500"></u-input>
        </AiItem>
        <AiItem label="图片" topLabel>
          <span slot="sub" class="color-999" v-text="`(最多9张)`"/>
          <AiUploader :def.sync="form.files" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"></AiUploader>
        </AiItem>
      </AiGroup>
    </div>
    <div class="btn" @click="submit">提交</div>

  </div>
</template>

<script>
export default {
  name: "MonitorRemoveView",
  // 网格长审核
  data() {
    return {
      info: {},
      id: '',
      pass: '',
      status: '',
      form: {
        pass: '',
        opinion: '',
        files: [],
      },
      type: '',
    }
  },
  onLoad(o) {
    this.$dict.load('fpRiskType', 'fpRiskEliminationMethod')
    this.pass = o.pass;
    this.id = o.id;
    this.status = o.status;
    this.form.pass = this.pass;
    this.type = o.type
  },
  created() {
    this.getInfo()
    document.title = this.type == 0 ? '纳入监测审核' : '解除风险审核'
  },
  methods: {
    getInfo() {
      this.$http.post(`/app/apppreventionreturntopoverty/popup?id=${this.id}`).then(res => {
        if (res.code === 0) {
          this.info = res.data
        }
      })
    },
    prevImg(urls, img) {
      const imgs = urls.map(v => v.url)
      uni.previewImage({
        urls: imgs,
        current: img
      })
    },

    submit() {
      if (this.form.pass == 1 && !this.form.objectType) {
        return this.$u.toast('请选择监测对象类型')
      }
      let url = '', params = {
        ...this.form,
        id: this.id,
      }
      if (this.type == 0) {   // 纳入审核
        url = `/app/apppreventionreturntopoverty/examine`
      } else if (this.type == 1) {     // 解除审核
        url = `/app/apppreventionreturntopoverty/relieve`
      }
      const formData = new FormData()
      for (let key in params) {
        formData.append(key, params[key])
      }
      this.$http.post(url, formData).then(res => {
        if (res.code == 0) {
          this.$u.toast('提交成功')
          uni.$emit('reload')
          setTimeout(() => {
            uni.navigateBack({
              delta: 2
            })
          }, 600)
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.MonitorRemoveView {
  .user-info {
    background: #FFF;

    .title {
      padding: 30px 32px;
      box-sizing: border-box;
      border-bottom: 1px solid #DDDDDD;
      font-weight: 600;
    }

    .info {
      padding: 30px 32px;
      box-sizing: border-box;

      .item {
        display: flex;

        span {
          padding: 12px 0;
        }

        span:first-child {
          width: 140px;
          color: #999999;
          text-align: right;
        }

        span:last-child {
          color: #343D65;
        }

        .imgs {
          image {
            width: 136px;
            height: 136px;
            margin-right: 8px;
            margin-bottom: 8px;
          }
        }
      }
    }
  }

  .result {
    margin-top: 16px;
    padding-bottom: 112px;
    box-sizing: border-box;

    .title {
      height: 112px;
      padding: 30px 32px;
      font-weight: 600;
      box-sizing: border-box;
      border-bottom: 1px solid #DDDDDD;
      background: #FFF;
    }

    .check-item {
      display: inline-block;
      width: 140px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      background: #F5F5F5;
      border-radius: 4px;
      font-size: 30px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333;
      position: relative;

      &.active {
        background: #E7F1FE;
        color: #1174FE;

        img {
          display: block;
          position: absolute;
          bottom: 0;
          right: 0;
          width: 48px;
          height: 48px;
        }
      }

      img {
        display: none;
      }

      &:nth-of-type(1) {
        margin-right: 36px;
      }
    }

    ::v-deep .ai-uploader .fileList .default {
      width: 160px;
      height: 160px;
    }
  }

  .btn {
    width: 100%;
    height: 112px;
    line-height: 112px;
    text-align: center;
    background: #3192F4;
    color: #FFFFFF;
    position: fixed;
    bottom: 0;
    left: 0;
  }

  .bg-fff {
    background: #fff;
  }
}
</style>