管道基础大数据平台系统开发-【前端】-新系統界面
Surpriseplus
2023-02-06 4e3d77dcbe421a4d6611ebcdd1ac3165cb36ad4b
src/views/datamanage/catalogueManage.vue
@@ -1,12 +1,12 @@
<template>
  <div class="cataLogBox">
  <div class="subpage_Box">
    <My-bread :list="[
        `${$t('dataManage.dataManage')}`,
        `${$t('dataManage.catalogueManage')}`,
      ]"></My-bread>
    <el-divider />
    <div class="cataLogContent">
      <div class="cataLog_leftTree">
      <div class="cataLog_leftTree subpage_Div">
        <div style="min-width:450px">
          <el-tree
            ref="tree"
@@ -15,14 +15,14 @@
            :data="dirList"
            :highlight-current="true"
            :expand-on-click-node="false"
            :default-expand-all="true"
            :default-expanded-keys="expandData"
            @node-click="handleNodeClick"
          >
          </el-tree>
        </div>
      </div>
      <div class="cataLog_rightContent">
      <div class="cataLog_rightContent subpage_Div">
        <div style="display:flex;justify-content:space-between">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">{{
@@ -31,6 +31,7 @@
          </el-breadcrumb>
          <div>
            <el-button
              v-if="menuStatus.update"
              :disabled="itemdetail.pid == null ? true : false"
              @click="setEditNode(1)"
              type="info"
@@ -38,6 +39,7 @@
              size="small"
            >向上移动</el-button>
            <el-button
              v-if="menuStatus.update"
              :disabled="itemdetail.pid == null ? true : false"
              @click="setEditNode(2)"
              type="info"
@@ -45,6 +47,7 @@
              size="small"
            >向下移动</el-button>
            <el-button
              v-if="menuStatus.insert"
              :disabled="itemdetail.pid == null ? true : false"
              @click="setNewNode(1)"
              type="success"
@@ -52,6 +55,7 @@
              size="small"
            >新增同级</el-button>
            <el-button
              v-if="menuStatus.insert"
              :disabled="itemdetail.pid == null ? true : false"
              @click="setNewNode(2)"
              type="success"
@@ -59,6 +63,7 @@
              size="small"
            >新增子级</el-button>
            <el-button
              v-if="menuStatus.delete"
              @click="setDelNode()"
              :disabled="itemdetail.pid == null ? true : false"
              type="danger"
@@ -103,6 +108,7 @@
          </el-form-item>
          <div class="btnBox">
            <el-button
              v-if="menuStatus.update"
              class="primary"
              size="small"
              @click="updCata('itemdetail')"
@@ -110,6 +116,7 @@
              $t('common.preservation')
            }}</el-button>
            <el-button
              v-if="menuStatus.update"
              type="info"
              size="small"
              @click="reset"
@@ -198,6 +205,7 @@
  updateDirTrees,
  insertDir,
  deleteDir,
  getPerms,
} from '../../api/api';
import MyBread from '../../components/MyBread.vue';
export default {
@@ -214,6 +222,11 @@
      }
    };
    return {
      menuStatus: {
        delete: false,
        insert: false,
        update: false,
      },
      defaultProps: {
        children: 'children',
        label: 'name',
@@ -241,6 +254,7 @@
        name: [{ required: true, validator: validName, trigger: 'blur' }],
      },
      newNode: null,
      expandData: [],
    };
  },
  methods: {
@@ -260,7 +274,10 @@
          if (this.itemdetail.id != null) {
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.itemdetail.id);
              // this.expandData=[1]
              // this.$refs.tree.setCurrentKey(this.itemdetail.id);
              // document.getElementById(this.itemdetail.id).click();
            });
          }
@@ -416,6 +433,7 @@
                      message: '添加成功',
                      type: 'success',
                    });
                    this.itemdetail = {};
                    this.ruleForm = {};
                    this.dialogFormVisible = false;
@@ -574,11 +592,11 @@
            this.getDirTree();
            return;
          } else {
            alert('调整失败,请重试!');
            this.$message.error('修改失败,请重试!');
          }
        })
        .catch(() => {
          alert('修改失败,请重试!');
          this.$message.error('修改失败,请重试!');
        });
    },
    handleNodeClick(data, node) {
@@ -604,7 +622,7 @@
                }, 500);
              })
              .catch((res) => {
                alert('修改失败,请重试!');
                this.$message.error('修改失败,请重试!');
                this.fullscreenLoading = false;
              });
          } else {
@@ -620,15 +638,47 @@
        this.itemdetail = JSON.parse(this.backUpData);
      }
    },
    showPermsMenu(res) {
      switch (res.tag) {
        case '/delete':
          this.menuStatus.delete = true;
          break;
        case '/insert':
          this.menuStatus.insert = true;
          break;
        case '/update':
          this.menuStatus.update = true;
          break;
      }
    },
    getPerms() {
      var val = this.$store.state.currentPerms;
      var permsEntity = this.$store.state.permsEntity;
      if (!permsEntity || !permsEntity.length) {
        getPerms().then((res) => {
          if (res.code == 200) {
            permsEntity = res.result;
          }
        });
      }
      for (var i = 0; i < permsEntity.length; i++) {
        if (val === permsEntity[i].perms) {
          console.log(i, permsEntity[i])
          this.showPermsMenu(permsEntity[i]);
        }
      }
    },
  },
  mounted() {
    this.getDirTree();
    this.getPerms();
  },
};
</script>
<style lang="less" scoped>
.cataLogBox {
.subpage_Box {
  height: 98%;
  width: 98%;
  padding: 1%;
@@ -640,7 +690,6 @@
    .cataLog_leftTree {
      width: 15%;
      height: 91%;
      border: 1px solid white;
      border-radius: 5px;
      padding: 1%;
      overflow-y: auto;
@@ -648,123 +697,9 @@
    .cataLog_rightContent {
      width: 80%;
      height: 91%;
      border: 1px solid white;
      border-radius: 5px;
      padding: 1%;
    }
  }
  // .cataSettings_tree {
  //   position: relative;
  //   width: 344px;
  //   height: 100%;
  //   background: rgb(240, 242, 245);
  //   padding: 20px;
  //   border-radius: 10px;
  //   box-sizing: border-box;
  //   overflow: auto;
  //   .saveBtn {
  //     position: absolute;
  //     left: 250px;
  //     top: 23px;
  //   }
  //   .cataTreeBox {
  //     height: 88%;
  //     width: 100%;
  //     overflow: auto;
  //     .el-tree {
  //       background: transparent;
  //       font-size: 15px;
  //       font-family: Microsoft YaHei;
  //       font-weight: 400;
  //       color: #000000;
  //       /deep/ .el-tree-node {
  //         padding-top: 10px;
  //         // padding-bottom: 10px;
  //       }
  //       /deep/ .el-tree-node:focus > .el-tree-node__content {
  //         background-color: #b9b9b9;
  //       }
  //       /deep/ .el-tree-node__content:hover {
  //         background-color: rgb(153, 153, 153);
  //       }
  //       .btnBox {
  //         margin: 0 10px 0 5px;
  //         .el-button + .el-button {
  //           margin-left: 5px;
  //         }
  //       }
  //     }
  //   }
  // }
  // .itemSettings {
  //   width: calc(100% - 344px);
  //   border-radius: 10px;
  //   background: rgb(240, 242, 245);
  //   margin-left: 10px;
  //   height: 100%;
  //   padding: 10px;
  //   box-sizing: border-box;
  //   .title_box {
  //     background: #fff;
  //     padding: 10px;
  //     margin-bottom: 24px;
  //     display: flex;
  //     border-radius: 10px;
  //     border: 1px solid rgb(202, 201, 204);
  //     box-sizing: border-box;
  //   }
  //   .form_box {
  //     border: 1px solid rgb(202, 201, 204);
  //     border-radius: 10px;
  //     background: #fff;
  //     padding-top: 30px;
  //     box-sizing: border-box;
  //     width: 100%;
  //     .el-input,
  //     /deep/ .el-textarea {
  //       width: 400px;
  //     }
  //     .btnBox {
  //       margin: 0 270px 20px;
  //       width: 200px;
  //       display: flex;
  //       justify-content: space-between;
  //     }
  //   }
  // }
  // /deep/ .el-dialog__body {
  //   padding: 0 30px 0 0;
  // }
  .el-icon-delete-solid {
    color: gray;
  }
  .el-icon-circle-plus {
    color: gray;
  }
  /deep/.el-form-item__label {
    color: white;
  }
  // 设置输入框的背景色、字体颜色、边框属性设置;
  /deep/.el-input__inner {
    background-color: transparent !important ;
    color: #fff;
    border: 1px solid;
  }
  /deep/ .el-dialog {
    background: #303030;
  }
  /deep/.el-range-editor.is-active,
  .el-range-editor.is-active:hover,
  .el-select .el-input.is-focus .el-input__inner {
    border: 1px solid;
  }
  /deep/.el-dialog__title {
    color: white;
  }
  .primary {
    background: #409eff;
    border: #409eff;
    color: white;
  }
}
</style>