CZC/operationSupport/src/views/ownerManagement/landlordReview/examine.vue

<template>
  <div>
    <el-form
      ref="formData"
      :model="formData"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item
        label="审核"
        prop="radio"
      >
        <el-radio-group
          v-model="formData.radio"
          @change="formDataRadio"
        >
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">不通过</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-if="formData.radio == 1 ? true : false">
        <el-form-item
          label="计费面积"
          key="0"
        >
          <el-input
            class="aaaa"
            v-model="formData.measureArea"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="计费规则"
          prop="Rule"
          key="1"
        >
          <el-select
            v-model="formData.Rule"
            placeholder="请选择计费规则"
          >
            <el-option
              v-for="(item,index) in billing"
              :key="index"
              :label="item.name"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div v-if="formData.radio == 2 ? true : false">
        <el-form-item
          label="不通过原因"
          prop="desc"
          key="3"
        >
          <el-input
            type="textarea"
            v-model="formData.desc"
          ></el-input>
        </el-form-item>

      </div>
    </el-form>
  </div>
</template>



<script>
export default {
  props: ['params'],
  data () {
    return {
      formData: {
        radio: 1,
        measureArea: '',
        Rule: '',
        desc: ''
      },
      id: '',
      communityId: '',
      billing: [],
      rules: {
        radio: [
          { required: true, message: '请选择审核方式', trigger: 'change' }
        ],
        Rule: [
          { required: true, message: '请选择计费规则', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写不通过原因', trigger: 'blur' }
        ],
      },
    }
  },
  methods: {
    submit () {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          let url = '/czc-community/landlordAudit/audit';
          if (this.formData.radio == 1) {
            var params = {
              auditStatus: this.formData.radio,
              area: this.formData.measureArea,
              id: this.id,
              strategyId: this.formData.Rule,
            }
          } else if (this.formData.radio == 2) {
            var params = {
              auditStatus: this.formData.radio,
              id: this.id,
              remark: this.formData.desc
            }
          }
          this.$http.post(url, params).then(({ data, status, msg }) => {
            if (status == 0) {
              this.$message.success(msg);
              this.$emit('close');
            } else {
              this.$message.error(msg);
            }
          })
        } else {
          this.$message.error(msg);
        }
      })


    },
    formDataRadio () {
      if (this.formData.radio == 1) {
        this.formData.desc = '';
      } else if (this.formData.radio == 2) {
        this.formData.measureArea = this.params.row.area;
        this.formData.Rule = '';
      }
    },
    communityRules () {
      this.$http.get('/czc-charge/scChargeStrategy/list', { communityId: this.communityId }).then(({ status, data, msg }) => {
        if (status == 0) {
          data.map((item, index) => {
            this.billing.push({
              name: item.chargeName,
              label: item.id
            })
          })
        }
      })
    }
  },
  created () {
    this.communityId = this.params.communityId;
    this.id = this.params.row.id;
    this.formData.measureArea = this.params.row.area;
    this.communityRules();
  }

}
</script>

<style>
.el-textarea__inner {
    height: 150px !important;
}
.aaaa input::-webkit-outer-spin-button,
.aaaa input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.aaaa input[type='number'] {
    -moz-appearance: textfield;
}
</style>