real3d-portalsite/src/views/ConstructionApplication3D/Demolition/QMSetInfo.vue

<template>
  <!-- @blur="selectBlur($event, index)"  -->
  <div class="ZTGlobal" style="padding: 1rem; width: 100%">
    <el-row :gutter="10">
      <el-col :span="6">青苗补偿标准：</el-col>
      <el-col :span="18">
        <el-select v-model="bcbz" style="width: 90%">
          <el-option
            v-for="item in bcbzList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="6">农作物补偿：</el-col>
      <el-col :span="16"
        ><el-input
          style="width: 100%"
          type="number"
          placeholder="请输入"
          readonly
          v-model="curBCBZ.BCBZ.TDCZ"
        ></el-input>
      </el-col>
      <el-col :span="2">元/亩</el-col>
    </el-row>
    <el-row>
      <el-col :span="6">经济作物：</el-col>
      <el-col :span="16">
        <el-input
          style="width: 100%"
          placeholder="请输入"
          v-model="curBCBZ.BCBZ.TDBCBS"
        ></el-input
      ></el-col>
      <el-col :span="2">元/亩</el-col>
    </el-row>
    <el-row>
      <el-col :span="6">树木补偿：</el-col>
      <el-col :span="16">
        <el-input
          style="width: 100%"
          placeholder="请输入"
          v-model="curBCBZ.BCBZ.TDBCBS"
        ></el-input
      ></el-col>
      <el-col :span="2">元/亩</el-col>
    </el-row>
    <el-row justify="center" type="flex">
      <el-button type="primary" @click="save()">保存</el-button>
      <el-button type="primary" @click="saveAs()">另存为</el-button>
      <el-button type="primary" @click="reset()">重置</el-button>
    </el-row>
    <el-dialog
      title="标准名称设置"
      modal="false"
      :visible.sync="dialogFormVisible"
      modal-append-to-body
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["zdValue"],
  name: "QMSetInfo",
  data() {
    return {
      dialogFormVisible: false,
      ruleForm: {
        name: null,
      },
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      /**
       * 补偿标准绑定值
       */
      bcbz: "",
      // curLabel: '',
      /**
       * 补偿标准列表
       */
      bcbzList: JSON.parse(JSON.stringify(window.ZSBC.ZDBCList)),
      /**
       * 当前标准
       */
      curBCBZ: {
        label: "",
        value: "",
        BCBZ: {
          /**
           * 土地统一年产值
           */
          TDCZ: 0,
          /**
           * 土地补偿倍数
           */

          TDBCBS: 0,
          /**
           * 土地补偿费
           */
          TDBCF: 0,
          /**
           * 安置补偿倍数
           */

          AZBCBS: 0,
          /**
           * 安置补偿费
           */
          AZBCF: 0,
          /**
           * 补偿合计
           */
          BCHJ: 0,
        },
      },
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    initForm() {
      debugger;
      if (this.zdValue && this.zdValue != "") {
        this.bcbz = this.zdValue;
        var item = this.bcbzList.find((t) => t.value == this.bcbz);
        this.curBCBZ = item;
      }
    },
    selectZDBZ() {
      debugger;
      if (this.bcbz && this.bcbz != "") {
        this.curBCBZ = this.bcbzList.find((t) => t.value == this.bcbz);
      }
      this.changeZDBZ();
    },
    /**
     * 选择标准改变
     */
    changeZDBZ() {
      this.curBCBZ.BCBZ.TDBCF =
        this.curBCBZ.BCBZ.TDCZ * this.curBCBZ.BCBZ.TDBCBS;
      this.curBCBZ.BCBZ.AZBCF =
        this.curBCBZ.BCBZ.TDCZ * this.curBCBZ.BCBZ.AZBCBS;
      this.curBCBZ.BCBZ.BCHJ =
        this.curBCBZ.BCBZ.TDBCF + this.curBCBZ.BCBZ.AZBCF;
    },
    /**
     * 重置
     */
    reset() {
      // var val = this.bcbz
      this.bcbzList = JSON.parse(JSON.stringify(window.ZSBC.ZDBCList));
      var item = this.bcbzList.find((t) => t.value == this.bcbz);
      debugger;
      this.curBCBZ = {
        label: item.label,
        value: item.value,
        BCBZ: {
          /**
           * 土地统一年产值
           */
          TDCZ: item.BCBZ.TDCZ,
          /**
           * 土地补偿倍数
           */

          TDBCBS: item.BCBZ.TDBCBS,
          /**
           * 土地补偿费
           */
          TDBCF: item.BCBZ.TDBCF,
          /**
           * 安置补偿倍数
           */

          AZBCBS: item.BCBZ.AZBCBS,
          /**
           * 安置补偿费
           */
          AZBCF: item.BCBZ.AZBCF,
          /**
           * 补偿合计
           */
          BCHJ: item.BCBZ.BCHJ,
        },
      };

      //     var item = this.bcbzList.find(t => t.value == this.bcbz)
      // this.bcbz = val;
    },
    /**
     * 保存修改
     */
    save() {
      if (this.bcbz == "") {
        this.$layer.alert("请选择补偿标准");
        return;
      }
      debugger;
      var index = window.ZSBC.ZDBCList.findIndex((t) => t.value == this.bcbz);
      if (index > -1) {
        window.ZSBC.ZDBCList[index] = this.curBCBZ;
        this.$layer.alert("保存完成");
      }
    },
    /***
     * 另存为
     */
    saveAs() {
      // if (this.bcbz == "") {
      //     this.$layer.alert("请选择补偿标准");
      //     return
      // }
      this.dialogFormVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          this.dialogFormVisible = false;
          this.saveData();
          // this.$layer.alert("保存完成");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /**
     * 另存数据
     */
    saveData() {
      debugger;
      var val = (window.ZSBC.ZDBCList.length + 1).toString();
      var newBCBZ = {
        label: this.ruleForm.name,
        value: val,
        BCBZ: {
          /**
           * 土地统一年产值
           */
          TDCZ: this.curBCBZ.BCBZ.TDCZ,
          /**
           * 土地补偿倍数
           */

          TDBCBS: this.curBCBZ.BCBZ.TDBCBS,
          /**
           * 土地补偿费
           */
          TDBCF: this.curBCBZ.BCBZ.TDBCF,
          /**
           * 安置补偿倍数
           */

          AZBCBS: this.curBCBZ.BCBZ.AZBCBS,
          /**
           * 安置补偿费
           */
          AZBCF: this.curBCBZ.BCBZ.AZBCF,
          /**
           * 补偿合计
           */
          BCHJ: this.curBCBZ.BCBZ.BCHJ,
        },
      };
      window.ZSBC.ZDBCList.push(newBCBZ);
      this.bcbzList = window.ZSBC.ZDBCList;
      this.bcbz = val;
    },
  },
};
</script>
<style lang="scss">
@import "@/../../zt.scss";
</style>
<style scoped>
.el-row {
  /* padding: 0.5rem 0 0.5rem 0; */
  /* display: inline-flex; */
  /* align-items: center; */
  margin-bottom: 0.5rem;
}
.subtitle {
  color: #02a7f0;
  font-weight: 400;
}

/* .el -input>input, .el-select-dropdown, .el-textarea>textarea
{
    color: #fff !important;
    background-color: rgba(4, 28, 50, 0.5) !important;
    border: 1px solid rgba(15, 122, 200, 0.4) !important;
    text-align: center;

} */
/* .el-input
{
   text-align: center;
} */
</style>