shuili-vue/src/views/reservoir/safeMonitorSetting/index.vue

<template>
  <div class="safe-monitor-setting-page">
    <TopBackTitle :showBackBtn="false"></TopBackTitle>
    <div class="container-box flex p-16">
      <div class="tree-box">
        <el-input v-model="filterText" placeholder="请输入关键字"></el-input>
        <el-tree
          class="filter-tree mt-10"
          highlight-current
          :data="treeData"
          :props="defaultProps"
          lazy
          :load="loadTree"
          :filter-node-method="filterNode"
          @node-click="handleClickTree"
          ref="tree"
        >
        </el-tree>
      </div>
      <div class="content-box" ref="contentRef">
        <el-table
          class="mt-12"
          :data="tableData"
          border
          style="width: 100%"
          :height="tableHeight"
        >
          <el-table-column type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column prop="name" label="测站名称"> </el-table-column>
          <el-table-column prop="code" label="测站编码"> </el-table-column>
          <el-table-column prop="flag" label="是否代表站"> </el-table-column>
          <el-table-column prop="type" label="测站类型"> </el-table-column>
          <el-table-column prop="typeNum" label="测站类型编码">
          </el-table-column>
          <el-table-column prop="me" label="监测要素"> </el-table-column>
          <el-table-column prop="preview" label="测站概况"> </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="handleSetForm(scope.row)"
                >告警配置</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="mt-24 flex justify-end">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="params.pageSize"
            :total="params.total"
          >
          </el-pagination>
        </div>

        <el-tabs
          class="mt-12"
          v-model="currentType"
          type="border-card"
          @tab-click="handleChangeTab"
        >
          <el-tab-pane
            lazy
            v-for="tabItem in tabsList"
            :key="tabItem.label"
            :label="tabItem.label"
            :name="tabItem.key"
          >
            <Form
              :disabled="!currentResInfo"
              v-if="formConfig[tabItem.key]"
              :formData="formConfig[tabItem.key].formData"
              :rules="formConfig[tabItem.key].rules"
              :formItems="formConfig[tabItem.key].formItems"
              @submit="handleSaveRowForm"
            ></Form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import TopBackTitle from "@/components/TopBackTitle";

import { getAreasData } from "@/api/areas/index";
import {
  getReservoirBaseListData,
  getReservoirCZListData,
  saveReservoirCZMonitorConfigData,
  getReservoirCZMonitorConfigData,
} from "@/api/reservoir";

import { formConfig } from "./js";
import Form from "./components/Form.vue";

export default {
  components: { TopBackTitle, Form },
  data() {
    return {
      formConfig: JSON.parse(JSON.stringify(formConfig)),
      currentType: "waterCase",
      tabsList: [
        {
          label: "水情监测",
          key: "waterCase",
        },
        {
          label: "降雨监测",
          key: "rainCase",
        },
        {
          label: "渗流监测",
          key: "vadoseCase",
        },
        {
          label: "变形监测",
          key: "distortedCase",
        },
        {
          label: "应力监测",
          key: "stressCase",
        },
        {
          label: "应变监测",
          key: "strainCase",
        },
        {
          label: "水利学量监测",
          key: "wccmCase",
        },
      ],
      filterText: "",
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
        isLeaf: "leaf",
      },
      params: {
        pageSize: 20,
        pageNum: 1,
        total: 0,
      },
      searchCode: "",
      searchType: "",
      searchTypeOptions: [],
      tableData: [],
      currentResInfo: null,
      tableHeight: null,
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  computed: {},
  created() {},
  mounted() {
    let h = this.$refs.contentRef.offsetHeight - 418 - 30;
    this.tableHeight = h > 0 ? h : 300;
  },
  methods: {
    getTableData() {
      getReservoirCZListData({
        pageSize: this.params.pageSize,
        pageNum: this.params.pageNum,
        data: {
          prjcd: this.currentResInfo.resCode,
        },
      }).then((res) => {
        this.tableData = res.records;
        this.params.total = res.total;
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    loadTree(node, resolve) {
      console.log("loadTree-node >>>>>  ", node, node.isLeaf);
      const { level, isLeaf, data } = node;
      if (isLeaf || data.layer === 3) {
        getReservoirBaseListData({
          pageSize: 1000,
          pageNum: 1,
          data: {
            adcd: data.value,
          },
        }).then((res) => {
          console.log("res >>>>>  ", res);
          if (res.records) {
            resolve(
              res.records.map((item) => {
                return {
                  label: item.resName,
                  value: item.resCode,
                  resCode: item.resCode,
                  resName: item.resName,
                  layer: 2,
                  leaf: true,
                };
              })
            );
          }
          resolve([]);
        });
        return;
      }
      // 非最后一级节点处理
      getAreasData(data.value).then((res) => {
        resolve(
          res.data.map((item) => {
            return {
              label: item.name,
              value: item.id,
              parentid: item.parentid,
              layer: item.layer,
              leaf: item.layer < 3,
            };
          })
        );
      });
    },
    handleClickTree(data, node) {
      console.log("handleClickTree >>>>>  ", data, node);
      if (node.leaf) {
        console.log("点击叶子节点----加载水库列表 >>>> ");
        this.tableData = [];
        this.params.pageNum = 1;
        this.getTableData();
      }
    },
    handleSetForm(row) {
      console.log("row >>>>>  ", row);
      this.currentResInfo = row;
      getReservoirCZMonitorConfigData(row.id).then((res) => {
        if (res.data?.length) {
          let tempFormConfig = JSON.parse(JSON.stringify(this.formConfig));
          res.data.forEach((item) => {
            tempFormConfig[item.type].formData = item;
          });
          this.formConfig = tempFormConfig;
        }
      });
    },
    handleSaveRowForm() {
      console.log("this.$refs.formRef >>>>>  ", this.$refs.formRef);
      this.$refs.formRef.submit().then((formData) => {
        console.log("formData >>>>>  ", formData);
        saveReservoirCZMonitorConfigData(formData)
          .then((res) => {
            console.log("res >>>>>  ", res);
            this.$message.success("保存成功");
          })
          .catch((err) => {
            console.log("err >>>>>  ", err);
            this.$message.error("保存失败");
          });
      });
    },
    handleChangeTab(tab) {
      console.log("handleChangeTab >>>>>  ", tab);
    },
  },
};
</script>
<style scoped lang="scss">
.safe-monitor-setting-page {
  position: relative;
  font-size: 14px;
  height: 100%;

  .container-box {
    height: calc(100% - 56px);
  }

  .tree-box {
    flex-shrink: 0;
    width: 240px;
    padding: 12px;
    background: #fff;
    border-radius: 2px;
  }

  .content-box {
    flex: 1;
    background: #fff;
    margin-left: 10px;
    padding: 12px;
    overflow: auto;
  }

  .bottom-box {
    border: 1px solid #ccc;
    padding: 10px;
    background: #f4f5f7;
  }

  .w-100 {
    width: 100px;
  }

  .w-180 {
    width: 180px;
  }

  .w-200 {
    width: 200px;
  }
}
</style>