shuili-vue/src/views/dyke/engineeringCondition/dykeBaseInfo/options/index.vue

<template>
  <div class="app-container">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" style="margin-bottom: 20px">
      <el-breadcrumb-item
        v-for="(item, index) in routeList"
        :key="item + index"
        :to="routeList.length !== index + 1 ? { path: item.path } : undefined"
        >{{ item.routeName }}</el-breadcrumb-item
      >
    </el-breadcrumb>

    <div class="pageTop">
      <el-page-header @back="goBack" :content="routeList[1].routeName">
      </el-page-header>
      <el-button type="primary" @click="goCompare">对比修改记录</el-button>
    </div>

    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
      style="margin-bottom: 20px"
    >
      <el-tab-pane label="堤防基本信息" name="basePage" :lazy="true">
        <basePage ref="basePage" />
      </el-tab-pane>
      <el-tab-pane
        label="工程管理"
        name="projectManagement"
        :disabled="!routeList[1].isEdit"
        :lazy="true"
      >
        <projectManagement
          :embankmentCode="$refs.basePage.copyForm.embankmentCode"
          v-if="activeName === 'projectManagement'"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import basePage from "./basePage.vue";
import projectManagement from "./projectManagement.vue";
// import { getSluiceInfo } from "@/api/yg/sluiceInfo";
export default {
  components: {
    basePage,
    projectManagement,
  },
  data() {
    return {
      activeName: "basePage",
      routeList: [],
      formData: {},
    };
  },
  created() {
    this.routeList = JSON.parse(this.$store.state.basePageData.routeList);
    // console.log("this.routeList", this.routeList);
    // if (this.routeList[1].isEdit) {
    //   // this.formData = JSON.parse(this.$store.state.basePageData.baseFormData);
    //   this.formData = JSON.parse(this.$store.state.basePageData.baseFormData);
    // }
    this.getList();
  },
  methods: {
    goCompare() {
      this.$router.push({
        path:
          "/dyke/engineeringCondition/dykeCompare?embankmentCode=" +
          this.$refs.basePage.copyForm.embankmentCode,
      });
    },
    goBack() {
      this.$router.back();
    },
    getList() {
      const id = this.$route.query.baseDataId;
      // getSluiceInfo(id).then((response) => {
      //   this.formData = response.data;
      //   // console.log("this.formData", this.formData);
      // });
    },
    // 切换标签页
    handleClick(tab, event) {
      // this.getList();
      // console.log("切换标签页", tab, event);
      // console.log("切换标签页", this.routeList[1].routeName);
      this.routeList[1].routeName = tab.label;
      // console.log(
      //   "this.$refs.basePage.copyForm.sluiceCode",
      //   this.$refs.basePage.copyForm.sluiceCode
      // );
    },
  },
};
</script>
<style lang="scss" scoped>
.pageTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
</style>