shuili-vue/src/views/dyke/engineeringCondition/dykeCompare/components/projectManagement.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.recordLoseEfficacyTime
            ? '版本' + index + ' - ' + sub.recordLoseEfficacyTime
            : '当前版本'
        "
        :value="sub.id"
        @click.native="chooseEdition(sub)"
      ></el-option>
    </el-select>
    <el-descriptions
      class="margin-top"
      :column="2"
      border
      :labelStyle="{
        'text-align': 'left',
        width: '120px',
        height: '50px',
      }"
      :contentStyle="{}"
    >
      <el-descriptions-item
        :contentClassName="isDiff('engineeringManagementUnit')"
      >
        <template slot="label"> 工程管理单位 </template>
        {{ this.form.engineeringManagementUnit }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('managementUnitNature')">
        <template slot="label"> 工程管理单位性质 </template>
        {{ managementUnitNatureFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('engineeringManagementOwnership')"
      >
        <template slot="label"> 工程管理单位权属 </template>
        {{ engineeringManagementOwnershipFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('engineeringManagementPerson')"
      >
        <template slot="label"> 工程管理单位责任人 </template>
        {{ this.form.engineeringManagementPerson }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('engineeringManagementPosition')"
      >
        <template slot="label"> 工程管理单位责任人职务 </template>
        {{ this.form.engineeringManagementPosition }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('engineeringManagementPhone')"
      >
        <template slot="label"> 工程管理单位责任人手机号码 </template>
        {{ this.form.engineeringManagementPhone }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('waterAdministrativeDepartment')"
      >
        <template slot="label"> 水行政主管部门 </template>
        {{ waterAdministrativeDepartmentFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('administrationDepartmentNature')"
      >
        <template slot="label"> 水行政主管部门性质 </template>
        {{ administrationDepartmentNatureFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('administrationDepartmentPerson')"
      >
        <template slot="label"> 水行政主管部门责任人 </template>
        {{ this.form.administrationDepartmentPerson }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('administrationDepartmentPosition')"
      >
        <template slot="label"> 水行政主管部门责任人职务 </template>
        {{ this.form.administrationDepartmentPosition }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('administrationDepartmentPhone')"
      >
        <template slot="label"> 水行政主管部门责任人手机号码 </template>
        {{ this.form.administrationDepartmentPhone }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('centralizedManagementDepartment')"
      >
        <template slot="label"> 行业归口管理部门 </template>
        {{ centralizedManagementDepartmentFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('managementDelimitation')"
      >
        <template slot="label"> 管理范围划界 </template>
        {{ managementDelimitationFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('delimitationTime')">
        <template slot="label"> 管理范围划界完成时间 </template>
        {{ this.form.delimitationTime }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('')">
        <template slot="label"> 管理范围划界证明材料 </template>
        <!-- {{ this.form.delimitationEvidence }} -->
        <div
          v-for="(item, index) in JSON.parse(
            this.form.delimitationEvidence
              ? this.form.delimitationEvidence
              : JSON.stringify({})
          )"
          :key="item + index"
        >
          <span :class="isDiff('delimitationEvidence')">
            <i class="el-icon-document"></i>
            <span>{{ item.name }}</span>
          </span>
          <i
            class="el-icon-download"
            @click="downloadFile(item, index)"
            style="cursor: pointer"
          ></i>
        </div>
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('managementConfirmation')"
      >
        <template slot="label"> 管理范围确权 </template>
        {{ managementConfirmationFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('confirmationTime')">
        <template slot="label"> 管理范围确权完成时间 </template>
        {{ this.form.confirmationTime }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('')">
        <template slot="label"> 管理范围确权证明材料 </template>
        <!-- {{ this.form.confirmationEvidence }} -->
        <div
          v-for="(item, index) in JSON.parse(
            this.form.confirmationEvidence
              ? this.form.confirmationEvidence
              : JSON.stringify({})
          )"
          :key="item + index"
        >
          <span :class="isDiff('confirmationEvidence')">
            <i class="el-icon-document"></i>
            <span>{{ item.name }}</span>
          </span>
          <i
            class="el-icon-download"
            @click="downloadFile(item, index)"
            style="cursor: pointer"
          ></i>
        </div>
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('protectionDelimitation')"
      >
        <template slot="label"> 保护范围划界 </template>
        {{ protectionDelimitationFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('protectionTime')">
        <template slot="label"> 保护范围划界完成时间 </template>
        {{ this.form.protectionTime }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('')">
        <template slot="label"> 保护范围划界证明材料 </template>
        <!-- {{ this.form.protectionEvidence }} -->
        <div
          v-for="(item, index) in JSON.parse(
            this.form.protectionEvidence
              ? this.form.protectionEvidence
              : JSON.stringify({})
          )"
          :key="item + index"
        >
          <span :class="isDiff('protectionEvidence')">
            <i class="el-icon-document"></i>
            <span>{{ item.name }}</span>
          </span>
          <i
            class="el-icon-download"
            @click="downloadFile(item, index)"
            style="cursor: pointer"
          ></i>
        </div>
      </el-descriptions-item>

      <el-descriptions-item :contentClassName="isDiff('')">
        <template slot="label"> 工程照片 </template>
        <!-- {{ this.form.engineeringPanoramicPhotos }} -->
        <div
          v-for="(item, index) in JSON.parse(
            this.form.engineeringPanoramicPhotos
              ? this.form.engineeringPanoramicPhotos
              : JSON.stringify({})
          )"
          :key="item + index"
        >
          <span :class="isDiff('engineeringPanoramicPhotos')">
            <i class="el-icon-document"></i>
            <span>{{ item.name }}</span>
          </span>
          <i
            class="el-icon-download"
            @click="downloadFile(item, index)"
            style="cursor: pointer"
          ></i>
        </div>
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('monitoringType')">
        <template slot="label"> 监控类型 </template>
        {{ monitoringTypeFormat(this.form.monitoringType) }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
import { getDikeCompare } from "@/api/yg/dikeCompare";
import { getFileStream } from "@/api/system/upload";
export default {
  props: ["projectManagementData"],
  inject: ["getDiff", "granParentEle"],
  data() {
    return {
      histroy: "当前版本",
      sumData: [],
      form: {},
      // 工程管理单位性质字典
      managementUnitNatureOptions: [],
      // 工程管理单位权属字典
      engineeringManagementOwnershipOptions: [],
      // 水行政主管部门字典
      waterAdministrativeDepartmentOptions: [],
      // 水行政主管部门性质字典
      administrationDepartmentNatureOptions: [],
      // 行业归口管理部门字典
      centralizedManagementDepartmentOptions: [],
      // 管理范围划界字典
      managementDelimitationOptions: [],
      // 管理范围确权字典
      managementConfirmationOptions: [],
      // 保护范围划界字典
      protectionDelimitationOptions: [],
      // 监控类型字典
      monitoringTypeOptions: [],
      diffPart: [],
    };
  },
  created() {
    if (this.projectManagementData && this.projectManagementData.id) {
      console.log(
        "this.projectManagementData in projectManagement",
        this.projectManagementData
      );
      this.form = this.projectManagementData;
      console.log("this.form", this.form);
      this.histroy = this.form.id;
      this.$nextTick(() => {
        this.diffPart = this.getDiff("projectManagement");
        console.log("this.diffPart in projectManagement", this.diffPart);
      });
    }

    this.getDicts("engineering_management_nature").then((response) => {
      this.managementUnitNatureOptions = response.data;
    });
    this.getDicts("engineering_management_ownership").then((response) => {
      this.engineeringManagementOwnershipOptions = response.data;
    });
    this.getDicts("water_administrative_department").then((response) => {
      this.waterAdministrativeDepartmentOptions = response.data;
    });
    this.getDicts("water_administrative_department_nature").then((response) => {
      this.administrationDepartmentNatureOptions = response.data;
    });
    this.getDicts("centralized_management_department").then((response) => {
      this.centralizedManagementDepartmentOptions = response.data;
    });
    this.getDicts("scope_delineation").then((response) => {
      this.managementDelimitationOptions = response.data;
    });
    this.getDicts("scope_confirmation").then((response) => {
      this.managementConfirmationOptions = response.data;
    });
    this.getDicts("scope_delineation").then((response) => {
      this.protectionDelimitationOptions = response.data;
    });
    this.getDicts("monitoring_type").then((response) => {
      this.monitoringTypeOptions = response.data;
    });

    getDikeCompare(this.$route.query.embankmentCode).then((res) => {
      this.sumData = res.data.gcgl;
      console.log("this.sumData in projectManagement", this.sumData);
      // res.data.jbxx.map((item) => {
      //   if (!item.recordLoseEfficacyTime) this.baseData = item;
      // });
      // res.data.gcgl.map((item) => {
      //   if (!item.recordLoseEfficacyTime) this.projectManagementData = item;
      // });
    });
  },
  watch: {
    // baseprojectManagementDataData: function (n, o) {
    //   this.projectManagementData = n;
    //   this.form = this.projectManagementData;
    //   this.histroy = this.form.id;
    //   // this.diffPart = this.getDiff();
    //   // setTimeout(() => {
    //   //   this.diffPart = this.getDiff();
    //   // }, 10);

    //   // 异步,待数据更新完时执行
    //   this.$nextTick(() => {
    //     console.log(123456);
    //     // console.log(99999999999, this.granParentEle);
    //     this.diffPart = this.getDiff("projectManagement");
    //   });
    // },

    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.projectManagement.diffPart =
            this.granParentEle[
              childrenEles[index]
            ].$refs.projectManagement.getDiff("projectManagement");
        }
      }, 10);
    },
  },
  methods: {
    isDiff(name) {
      return this.diffPart.some((item) => item === name) ? "diffEle" : "";
    },
    chooseEdition(data) {
      this.form = data;
    },
    // 工程管理单位性质字典翻译
    managementUnitNatureFormat(row, column) {
      return this.selectDictLabel(
        this.managementUnitNatureOptions,
        row.managementUnitNature
      );
    },
    // 工程管理单位权属字典翻译
    engineeringManagementOwnershipFormat(row, column) {
      return this.selectDictLabel(
        this.engineeringManagementOwnershipOptions,
        row.engineeringManagementOwnership
      );
    },
    // 水行政主管部门字典翻译
    waterAdministrativeDepartmentFormat(row, column) {
      return this.selectDictLabel(
        this.waterAdministrativeDepartmentOptions,
        row.waterAdministrativeDepartment
      );
    },
    // 水行政主管部门性质字典翻译
    administrationDepartmentNatureFormat(row, column) {
      return this.selectDictLabel(
        this.administrationDepartmentNatureOptions,
        row.administrationDepartmentNature
      );
    },
    // 行业归口管理部门字典翻译
    centralizedManagementDepartmentFormat(row, column) {
      return this.selectDictLabel(
        this.centralizedManagementDepartmentOptions,
        row.centralizedManagementDepartment
      );
    },
    // 管理范围划界字典翻译
    managementDelimitationFormat(row, column) {
      return this.selectDictLabel(
        this.managementDelimitationOptions,
        row.managementDelimitation
      );
    },
    // 管理范围确权字典翻译
    managementConfirmationFormat(row, column) {
      return this.selectDictLabel(
        this.managementConfirmationOptions,
        row.managementConfirmation
      );
    },
    // 保护范围划界字典翻译
    protectionDelimitationFormat(row, column) {
      return this.selectDictLabel(
        this.protectionDelimitationOptions,
        row.protectionDelimitation
      );
    },
    // 监控类型字典翻译
    monitoringTypeFormat(data) {
      let res = "";
      let arr = data ? JSON.parse(data) : [];
      // console.log("XXXXXXXXXXXXXXXXXXXXXX", data);
      if (arr) {
        arr.forEach((item) => {
          res =
            res + "+" + this.selectDictLabel(this.monitoringTypeOptions, item);
        });
        return res.slice(1);
      }
    },
    // 查看信息中, 下载
    downloadFile(info, index) {
      console.log(info);
      this.handlePreview(info);
    },
    // 点击预览的文件进行下载
    handlePreview(file) {
      // console.log(file);
      getFileStream({ fileName: file.fileName }).then((res) => {
        const blob = new Blob([res], {
          // type类型后端返回来的数据中会有，根据自己实际进行修改
          // 表格下载为 application/xlsx，压缩包为 application/zip等，
          type: "application/xlsx",
        }); //excel,pdf等
        const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
        const a = document.createElement("a"); //创建a标签
        a.style.display = "none";
        a.href = href; // 指定下载链接
        a.download = file.name; //指定下载文件名
        a.click(); //触发下载
        URL.revokeObjectURL(a.href); //释放URL对象
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
<style lang="scss">
.diffEle {
  color: #f13939;
  // background: skyblue;
}
</style>