shuili-vue/src/views/dike/engineeringCondition/dikeCompare/components/bainBenefitIndex.vue

<template>
  <div>
    <el-select
      v-model="histroy"
      placeholder="请选择版本"
      style="margin-bottom: 10px; width: 250px"
    >
      <el-option
        v-for="(sub, index) in sumData"
        :key="sub.id"
        :label="
          sub.exprDate ? '版本' + index + ' - ' + sub.exprDate : '当前版本'
        "
        :value="sub.id"
        @click.native="chooseEdition(sub)"
      ></el-option>
    </el-select>
    <el-descriptions
      class="margin-top"
      :column="2"
      border
      :labelStyle="{
        'text-align': 'left',
        width: '180px',
        height: '50px',
      }"
      :contentStyle="{ minWidth: '250px' }"
    >
      <el-descriptions-item :contentClassName="isDiff('prArea')">
        <template slot="label"> 保护面积 </template>
        {{ this.form.prArea }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('prinArea')">
        <template slot="label"> 保护耕地面积 </template>
        {{ this.form.prinArea }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('prvlNum')">
        <template slot="label"> 保护村数 </template>
        {{ this.form.prvlNum }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('prfxasNum')">
        <template slot="label"> 保护固定资产 </template>
        {{ this.form.prfxasNum }}
      </el-descriptions-item>

      <el-descriptions-item :contentClassName="isDiff('ptPp')">
        <template slot="label"> 保护人口 </template>
        {{ this.form.ptPp }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('prhuNum')">
        <template slot="label"> 保护房屋 </template>
        {{ this.form.prhuNum }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('prfcMn')">
        <template slot="label"> 保护工矿 </template>
        {{ this.form.prfcMn }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('prCt')">
        <template slot="label"> 保护城镇 </template>
        {{ this.form.prCt }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('prRl')">
        <template slot="label"> 保护铁路 </template>
        {{ this.form.prRl }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('prHg')">
        <template slot="label"> 保护公路 </template>
        {{ this.form.prHg }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('prsTes')">
        <template slot="label"> 保护重点设施 </template>
        {{ this.form.prsTes }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('note')">
        <template slot="label"> 备注 </template>
        {{ this.form.note }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- <div class="btnList">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div> -->
  </div>
</template>

<script>
import { getDikeCompare } from "@/api/yg/dikeCompare";

export default {
  name: "Gcxy",
  props: ["bainBenefitIndexData"],
  inject: ["getDiff", "granParentEle"],
  data() {
    return {
      histroy: "当前版本",
      sumData: [],
      // 表单参数
      form: {},
      diffPart: [],
    };
  },
  created() {
    if (this.bainBenefitIndexData && this.bainBenefitIndexData.id) {
      console.log(
        "this.bainBenefitIndexData in bainBenefitIndex",
        this.bainBenefitIndexData
      );
      this.form = this.bainBenefitIndexData;
      console.log("this.form", this.form);
      this.histroy = this.form.id;
      this.$nextTick(() => {
        this.diffPart = this.getDiff("bainBenefitIndex");
        console.log("this.diffPart in bainBenefitIndex", this.diffPart);
      });
    }
    getDikeCompare(this.$route.query.dikeCode).then((res) => {
      this.sumData = res.data.gcxy;
      console.log("this.sumData in bainBenefitIndex", this.sumData);
      // res.data.jbxx.map((item) => {
      //   if (!item.exprDate) this.baseData = item;
      // });
      // res.data.gcgl.map((item) => {
      //   if (!item.exprDate) this.bainBenefitIndexData = item;
      // });
    });
  },
  watch: {
    histroy: function (n, o) {
      // this.$nextTick(() => {
      //   this.diffPart = this.getDiff();
      // });
      setTimeout(() => {
        // this.diffPart = this.getDiff();
        const childrenEles = Object.keys(this.granParentEle);
        for (let index = 0; index < childrenEles.length; index++) {
          // console.log(33333333, childrenEles[index]);
          this.granParentEle[
            childrenEles[index]
          ].$refs.bainBenefitIndex.diffPart =
            this.granParentEle[
              childrenEles[index]
            ].$refs.bainBenefitIndex.getDiff("bainBenefitIndex");
        }
      }, 10);
    },
  },
  methods: {
    isDiff(name) {
      return this.diffPart.some((item) => item === name) ? "diffEle" : "";
    },
    chooseEdition(data) {
      this.form = data;
    },
  },
};
</script>
<style lang="scss" scoped>
.btnList {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1;
}
</style>
<style lang="scss">
.diffEle {
  color: #f13939;
  // background: skyblue;
}
</style>