zjyzt_gis_master_web_ui/src/components/DataLayer/LayerManagement.vue

<template>
  <el-container :class="'content'">
    <el-header>
      <el-button type="primary" class="add-item" @click="handleAddClass">
        图层新增
      </el-button>
    </el-header>
    <el-main>
      <el-tree
        class="item-tree"
        :data="layerList"
        node-key="id"
        :props="defaultProps"
        default-expand-all
      >
        <span class="operations" slot-scope="{ node, data }">
          <span class="node-label">
            <i v-if="data.isLeaf" class="el-icon-s-flag leaf-icon"></i>
            {{ node.label }}
          </span>
          <span>
            <template v-if="data.isLeaf">
              <el-button
                type="text"
                icon="el-icon-warning-outline"
                @click.stop="handleLook(data)"
                title="查看"
              >
              </el-button>
              <el-button
                type="text"
                icon="el-icon-edit iconfont"
                @click.stop="handleEdit(data)"
                title="编辑"
              ></el-button>
              <el-button
                type="text"
                icon="el-icon-delete iconfont"
                @click.stop="handleDelete(data)"
                title="删除"
              >
              </el-button>
            </template>
          </span>
        </span>
      </el-tree>
    </el-main>
    <!--添加栏目弹窗-->
    <LayerDetail
      v-bind="{
        isShow: isShowAddModelDetailDialog,
        edit: edit,
        title: title,
        beforeClose: beforeCloseAddDetailDialog,
        updateData: getMenu,
        formData: modelDeatailData,
        operationType: operationType, // 0 增加，1 查看，2 编辑
      }"
    ></LayerDetail>
  </el-container>
</template>

<script>
import api from "@/api/model";

export default {
  components: {
    LayerDetail: () => import("@/components/DataLayer/LayerDetail.vue"),
  },
  data() {
    return {
      title: "图层新增", // 图层修改
      isShowAddModelDetailDialog: false,
      edit: false,
      layerList: [],
      defaultProps: {
        children: "models",
        label: "title",
      },
      modelDeatailData: null,
      operationType: 0,
    };
  },
  created() {},
  methods: {
    // 增加图层
    handleAddClass() {
      this.edit = true;
      this.title = "图层新增";
      this.operationType = 0;
      this.modelDeatailData = {
        alpha: "",
        content: "",
        createDate: "",
        fillColor: "#FF0000",
        geometryType: "Point",
        iconUrl: "",
        id: "",
        jsonStr: "",
        lineWidth: "",
        tableName: "",
        threeId: "",
        title: "",
        type: 0,
        updateDate: "",
      };
      this.isShowAddModelDetailDialog = true;
    },

    // 目录
    getMenu() {
      getMenu();
    },

    // 渲染列表前数据整理
    handleMenuDataBeforeRenderUI(data) {
      if (data)
        return data.map(function (item) {
          item.title = item.name;
          item.models = item.models.map(function (params) {
            params.isLeaf = true;
            return params;
          });
          return item;
        });
    },

    // 模型窗体关闭前
    beforeCloseAddDetailDialog(judge) {
      this.isShowAddModelDetailDialog = false;
      if (judge) this.getMenu();
    },

    // 查看模型
    handleLook(data) {
      let that = this;
      api
        .getDetailModelInfo({
          id: data.id,
        })
        .then((result) => {
          if (result.code == 200) {
            that.modelDeatailData = result.content;
            that.title = "图层详情";
            that.operationType = 1;
            that.edit = false;
            that.isShowAddModelDetailDialog = true;
          } else {
            this.$checkRequestCode(result);
          }
        })
        .catch((err) => {
          that.$message({
            type: "error",
            message: err,
          });
        });
    },

    // 编辑模型
    handleEdit(data) {
      let that = this;
      api
        .getDetailModelInfo({
          id: data.id,
        })
        .then((result) => {
          if (result.code == 200) {
            that.modelDeatailData = result.content;
            that.title = "图层编辑";
            that.operationType = 2;
            that.edit = true;
            that.isShowAddModelDetailDialog = true;
          } else {
            this.$checkRequestCode(result);
          }
        })
        .catch((err) => {
          that.$message({
            type: "error",
            message: err,
          });
        });
    },

    // 删除模型
    handleDelete(data) {
      this.$confirm("此操作将删除图层和其中数据，不可恢复，是否继续?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let that = this;
          api
            .delModel({
              id: data.id,
            })
            .then(function (response) {
              if (response.code == 200) {
                that.$message({ type: "success", message: "删除成功!" });
              } else {
                this.$checkRequestCode(result);
              }
              that.getMenu();
            })
            .catch((err) => {
              that.$message({
                type: "error",
                message: err,
              });
              that.getMenu();
            });
        })
        .catch(() => {
          that.$message({
            type: "waring",
            message: "服务器异常，请稍后重试！",
          });
          that.getMenu();
        });
    },
  },
  computed: {
    layerData() {
      return this.$store.state.layerList;
    },
  },
  watch: {
    layerData: {
      immediate: true,
      handler(newVal, oldName) {
        if (newVal) this.layerList = this.handleMenuDataBeforeRenderUI(newVal);
      },
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  width: calc(100% - 20px);
  margin-left: 20px;
  .el-header {
    background: #ffffff;
    margin-bottom: 20px;
    padding-top: 10px;
  }

  .el-main { 
    background: #ffffff;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;

    position: relative;
    border-radius: 5px;
    padding: 20px 50px;

    .item-tree { 
      .operations {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;

        .single {
          margin-right: 28px;
        }
      }

      .node-label {
        font-size: 14px;

        .empty-icon {
          color: #c0c4cc;
          width: 12px;
          height: 12px;
          padding: 6px;
          margin-left: -24px;
        }

        .leaf-icon {
          margin-right: 5px;
          margin-left: -15px;
        }
      }

      /deep/ .el-tree-node__content {
        height: 40px;
        cursor: default;

        .el-icon-caret-right {
          padding: 20px;
        }
      }
    }
  }
}
</style>