ECS5 / ECS5.0Web · Files

<template>
  <el-container class="sys-container">
    <div class="left-nav">
      <el-tree :data="treeOpt.data" node-key="id" :props="treeOpt.defaultProps" :default-expand-all="false"
        :expand-on-click-node="false" :check-strictly="true" :highlight-current="true" @node-click="roleNodeClick"
        style="margin-top: 5px; " ref="treePer">
        <!-- 自定义节点模板 -->
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <i v-if="data.permissionType === 10" class="icon-module"></i>
            <i v-if="data.permissionType === 1" class="icon-folder"></i>
            <i v-if="data.permissionType === 5" class="icon-menu"></i>
            <i v-if="data.permissionType === 15" class="icon-btn"></i>
            <span>{{ node.label }}</span>
          </span>
        </template>
      </el-tree>

    </div>

    <!-- 右侧内容区 -->
    <el-main class="right-content">
      <!-- 操作按钮区 -->
      <el-row class="toolbar">
        <el-button icon="el-icon-refresh" @click="btnRefresh">刷新</el-button>
        <el-button type="primary" icon="el-icon-circle-plus" @click="editOrAddOpen">新增</el-button>

        <el-button type="warning" icon="el-icon-check" style="margin-left: 80px;"
          @click="roleAddOrEditSave(1)">保存</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="deleteAciton">删除</el-button>
      </el-row>

      <!-- 表单内容区 -->
      <div class="form-container">
        <el-form label-width="100px" label-position="right">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24">
              <el-form-item label="父菜单：">
                <el-input v-model="editOrAddOpt.form.parentMenuVal" placeholder="" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :xs="24" :sm="8">
              <el-form-item label="编码：">
                <el-input v-model="editOrAddOpt.form.permissionCode" maxlength="20" show-word-limit
                  placeholder=""></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8">
              <el-form-item label="名称：">
                <el-input v-model="editOrAddOpt.form.permissionName" maxlength="20" show-word-limit
                  placeholder=""></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8">
              <el-form-item label="类型：">
                <el-select v-model="editOrAddOpt.form.permissionType" placeholder="请选择">
                  <el-option v-for="(value, key) in permissionTypeData" :key="key" :label="value"
                    :value="Number(key)" />
                </el-select>

              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="路径：">
            <el-input v-model="editOrAddOpt.form.url" maxlength="240" show-word-limit placeholder="/"></el-input>
          </el-form-item>

          <el-row :gutter="20">
            <el-col :xs="24" :sm="12">
              <el-form-item label="备注：">
                <el-input v-model="editOrAddOpt.form.remark" maxlength="40" show-word-limit placeholder=""></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12">
              <el-form-item label="排序：">
                <el-input v-model="editOrAddOpt.form.orderNum" maxlength="5" type="number" placeholder=""></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-main>
  </el-container>
</template>

<script>

import * as userApi from "@/api/systemPermission/userPermission";
export default {
  data() {
    const editOrAddData = {
      parentMenuVal: "",
      permissionCode: "",
      permissionName: "",
      packagearentId: 1,
      orderNum: 0,
      parentId: 0,

      url: "",
      permissionType: "",
      Id: 0,
      icon: "",
      perms: "",
      remark: "",
      created: this.$moment().format('YYYY-MM-DD-HH:mm:ss')
    };
    return {
      tableData: [],
      editOrAddOpt: {
        flag: "add",
        form: { ...editOrAddData },
        formDefaultData: JSON.parse(JSON.stringify(editOrAddData))
      },

      permissionTypeData: userApi.typeMap,
      //临时存储的数据
      treeOpt: {
        data: [],       // 处理后的数据（展示用）
        originData: [], // 原始数据
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        selectRowData: null
      }
    };
  },
  methods: {
    /**
     * 查询或者搜索
     */
    btnRefresh() {
      this.getAllPermissionList();
    },

    /**
     * get Permission data,from to api server
     */
    getAllPermissionList() {
      userApi.getAllPermission().then(res => {
        userApi.ajaxSuccessBefore(res, (res) => {
          debugger
          this.treeOpt.data = userApi.transformToTreeData(res.data);
          this.treeOpt.originData = res.data;

          this.$nextTick(() => {
            const firstNode = this.$refs.treePer.root.childNodes[0]
            if (firstNode) firstNode.expand()
          })
        })
      })
    },

    /**
     * 新增或者编辑弹出框
     */
    editOrAddOpen() {
      debugger
      if (this.treeOpt.selectRowData == null) {
        this.$message.error("请选择节点数据后再新增!");
        return;
      }
      this.editOrAddOpt.flag = "add";
      this.editOrAddOpt.form = JSON.parse(JSON.stringify(this.editOrAddOpt.formDefaultData));
      this.editOrAddOpt.form.parentMenuVal = this.treeOpt.selectRowData.label
    },

    /**
     * 新增或者编辑 保存操作
     */
    roleAddOrEditSave() {
      debugger
      if (this.treeOpt.selectRowData == null) {
        this.$message.error("请选择节点数据后再新增!");
        return;
      }
      if (this.treeOpt.selectRowData.permissionType == 15) {
        this.$message.error("按钮子节点无法新增保存!");
        return;
      }
      if (this.editOrAddOpt.form.permissionCode == null || this.editOrAddOpt.form.permissionCode == "") {
        this.$message.error("编码不能为空!");
        return;
      }
      if (this.editOrAddOpt.form.permissionName == null || this.editOrAddOpt.form.permissionName == "") {
        this.$message.error("名称不能为空!");
        return;
      }
      if (this.editOrAddOpt.form.permissionType == "") {
        this.$message.error("请选择类型!");
        return;
      }

      if (this.editOrAddOpt.flag == "add") {
        this.editOrAddOpt.form.parentId = this.treeOpt.selectRowData.id
      }
      this.editOrAddOpt.form.icon = userApi.getIcon(this.editOrAddOpt.form.permissionType)
      userApi.savePermission(this.editOrAddOpt.form).then(res => {
        userApi.ajaxSuccessBefore(res, (res) => {
          this.cleraVal();
          this.getAllPermissionList();
        }, this)
      });
    },

    //删除
    deleteAciton() {
      if (this.treeOpt.selectRowData == null) {
        this.$message.error("请选择节点数据后再删除!");
        return;
      }
      var title = `此操作将永久删除该数据,【${this.treeOpt.selectRowData.label}】，是否继续？`;
      this.$confirm(title, '提示', { type: 'warning', })
        .then(() => {
          userApi.deletePermissionByIds([this.treeOpt.selectRowData.id]).then(res => {
            userApi.ajaxSuccessBefore(res, (res) => {
              this.cleraVal();
              this.getAllPermissionList();
            }, this)
          });
        }).catch()
    },

    roleNodeClick(data, node, event) {
      this.treeOpt.selectRowData = data;
      console.log("selectRowData", data)

      //right form is set value
      var result = this.treeOpt.originData.find(x => x.id == data.id)
      this.editOrAddOpt.form = { ...result }
      this.editOrAddOpt.form.parentMenuVal = data.label;
      this.editOrAddOpt.flag = "view"
      this.editOrAddOpt.form.parentId = this.treeOpt.selectRowData.parentId
    },
    cleraVal() {
      this.treeOpt.selectRowData = null;
      this.editOrAddOpt.form = JSON.parse(JSON.stringify(this.editOrAddOpt.formDefaultData));
    }
  },
  mounted() {
    debugger
    this.getAllPermissionList();
  },
}
</script>

<style scoped>
.sys-container {
  width: 100%;

  .left-nav {
    width: 400px;
    border: 1px solid #e5e9f2;
    border-radius: 4px;
    height: 83vh;
    margin-top: 7px;
    margin-left: 7px;
    overflow: auto;
  }

  .right-content {
    background: #fff;
    margin-top: 7px;
    margin-left: 7px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    .toolbar {
      margin-bottom: 7px;
    }

    .form-container {
      padding: 20px;
      background: #fff;
      border-radius: 4px;
    }

    .el-form-item {
      margin-bottom: 22px;
    }
  }

}

/* 图标样式 */
.custom-tree-node i[class^="icon-"] {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  vertical-align: middle;
}

.icon-module {
  background: url(~@/assets/images/module.png) no-repeat center/contain;
}

.icon-folder {
  background: url(~@/assets/images/folder.png) no-repeat center/contain;
}

.icon-menu {
  background: url(~@/assets/images/menu.png) no-repeat center/contain;
}

.icon-btn {
  background: url(~@/assets/images/btn.png) no-repeat center/contain;
}
</style>