nsgk_mobile/src/views/onlineHome/homestead/freeExit/freeExitDetail.vue

<template>
  <div class="app-container">
    <van-nav-bar
      left-arrow
      fixed
      placeholder
      @click-left="$router.back(-1)"
    >
      <template #title>
        <p style="font-weight: bold;">无偿退出</p>
      </template>
    </van-nav-bar>
    <div class="main_box">
      <van-field
        readonly
        v-model="circulation.zjddm"
        label="宅基地代码"
        input-align="right"
      />
      <van-field readonly v-model="circulation.sqrxm" label="申请人姓名" input-align="right" label-width="auto"/>
      <van-field
        readonly
        v-model="circulation.sqrzjlx"
        label="申请人证件类型"
        input-align="right"
        label-width="auto"
      />
      <van-field readonly v-model="circulation.sqrzjhm" label="申请人证件号码" input-align="right" label-width="auto"/>
    </div>
    <p class="main_title">退出信息</p>
    <div class="main_box">
      <van-field
        readonly
        v-model="circulation.tcqllx"
        label="退出权利类型"
        input-align="right"
        label-width="auto"
      />
      <van-field
        readonly
        v-model="circulation.tclx"
        label="退出类型"
        input-align="right"
        label-width="auto"
      />
      <van-field
        readonly
        v-model="circulation.tcfs"
        label="退出方式"
        input-align="right"
        label-width="auto"
      />
      <van-field readonly v-model="circulation.tcmj" label="退出面积(㎡)" input-align="right" label-width="auto"/>
      <van-field readonly v-model="circulation.tcnx" label="退出年限" input-align="right" label-width="auto"/>
    </div>

    <p class="main_title">补偿信息</p>
    <div class="main_box">
      <van-field
        readonly
        v-model="circulation.bcfs"
        label="补偿方式"
        label-width="auto"
        input-align="right"
      />
      <van-field readonly v-model="circulation.bcje" label="补偿金额(元)" input-align="right" label-width="auto"/>
      <van-field readonly v-model="circulation.zhfwmj" label="置换房屋面积(㎡)" input-align="right" label-width="auto"/>
      <van-field readonly v-model="circulation.zhfwzl" label="置换房屋坐落" input-align="right" label-width="auto"/>
      <van-field readonly v-model="circulation.bz" label="备注" input-align="right" label-width="auto"/>
    </div>

    <!-- 审批 -->
    <!-- <template v-if="approval.type === 'todo'">
      <div class="main_box examine_box">
        <van-row type="flex" justify="space-between" align="center">
          <van-col span="5">审核<br/>意见</van-col>
          <van-col span="19">
            <van-field required :readonly="approval.type !== 'todo'" v-model="approval.comment" rows="2" autosize type="textarea" placeholder="审核意见"/>
          </van-col>
        </van-row>
      </div>

      <van-row style="margin-top: 0.2rem;">
        <van-col span="12" align="center">
          <van-button type="info" native-type="submit" class="submitButton" @click="complete(true)">同意</van-button>
        </van-col>
        <van-col span="12" align="center">
          <van-button type="danger" native-type="submit" class="submitButton" @click="complete(false)">驳回</van-button>
        </van-col>
      </van-row>
      <div class="clear"></div>
    </template> -->
  </div>
</template>

<script>
  import { getZyyctc } from "@/api/onlineHome/homestead/paidExit";
  import request from '@/utils/request';
  import {Notify} from "vant";
  export default {
    name: "freeExitDetail",
    data() {
      return {
        circulation:[],
        approval: {
          taskId: null,
          instanceId: null,
          type: null,
          id: null,
          comment: '',
        },
      };
    },
    created() {
      this.approval.id = this.$route.query.id;
      this.approval.instanceId = this.$route.query.instanceId;
      this.approval.type = this.$route.query.type;
      this.approval.taskId = this.$route.query.taskId;
      this.getDetail();
    },
    methods: {
      getDetail(){
        getZyyctc(this.$route.query.id).then(response => {
          console.log(response)
          this.circulation = response.data;
          //退出权利类型
          this.houseGetDicts("tcqllx").then((res) => {
            this.circulation.tcqllx = this.selectDictLabel(res.data, response.data.tcqllx);
          });
          //退出类型
          this.houseGetDicts("tclx").then((res) => {
            this.circulation.tclx = this.selectDictLabel(res.data, response.data.tclx);
          });
          //退出方式
          this.houseGetDicts("tcfs").then((res) => {
            this.circulation.tcfs = this.selectDictLabel(res.data, response.data.tcfs);
          });
          //申请人证件类型
          this.houseGetDicts("zjlx").then((res) => {
            this.circulation.sqrzjlx = this.selectDictLabel(res.data, response.data.sqrzjlx);
          });
          //补偿方式
          this.houseGetDicts("bcfs").then((res) => {
            this.circulation.bcfs = this.selectDictLabel(res.data, response.data.bcfs);
          });
        });
      },
      /* complete(pass) {
        if(!this.approval.taskId || !this.approval.instanceId || this.approval.type !== 'todo')
        {
          console.error("无效操作");
          return false;
        }
        if(!this.approval.comment)
        {
          this.notify("请填写审批意见", 'danger');
          return false;
        }
        let data = {
          taskId: this.approval.taskId,
          instanceId: this.approval.instanceId,
          variables: JSON.stringify({
            pass: pass ? "true" : "false",
            comment: this.approval.comment ? this.approval.comment : (pass ? '同意' : '驳回'),
          }),
        };
        request({
          url: "/activiti/process/complete",
          method: "post",
          params: data,
        }).then((response) => {
          this.notify("操作成功", 'success');
          this.$router.back();
        }).catch(e => {
          this.notify("操作失败!", 'danger');
        });
        return true;
      }, */
      notify(message, type) {
        Notify.clear();
        Notify({ type: type || 'primary', message: message });
      },
    },
  }
</script>

<style scoped lang="scss">
  .app-container {
    padding: 2% 0;
  }
  .main_title{
    font-size: 0.4rem;
    color: #1D6FE9;
    margin: 0.2rem 6%;
    position: relative;
  }
  .main_box{
    width: 96%;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    overflow: hidden;
    background-color: #FFF;
  }
  .submitButton{
    width: 80%;
    margin: 0 auto;
    background-color: #1D6FE9;

  }
  .examine_box{
    background-color: #1D6FE9!important;
    padding: 0.18rem!important;
    padding-left: 0!important;
    border-radius: 0.15rem!important;
    margin-top: 0.3rem!important;
    .van-col:first-child{
      color: #FFF!important;
      font-size: 0.45rem!important;
      text-align: center!important;
    }
    .van-col:last-child{
      background-color: #FFF!important;
      border-radius: 0.15rem!important;
      overflow: hidden!important;
      .van-radio-group--horizontal{
        padding: 0.2rem 0;
        border-bottom: 1px solid #eee;
      }
    }
  }
</style>