ECS5 / ECS5.0Web · Files

<template>
  <div class="sys-container">
    <div class="sys-pb-5">
      <el-button icon="el-icon-refresh-right" size="small" @click="btnRefresh">刷新</el-button>
      <el-button type="primary" size="small" icon="el-icon-plus" @click="editOrAddOpen(null, 'add')"> 新增
      </el-button>
    </div>

    <!-- table -->
    <div class="sys-table-border">
      <el-table :data="tableData" ref="multipleTable" highlight-current-row style="width: 100%" height="570">
        <el-table-column label="序号" width="60" type="index" />
        <el-table-column prop="id" label="id" v-if="false"></el-table-column>
        <el-table-column prop="roleCode" label="角色编码" v-if="false"> </el-table-column>
        <el-table-column prop="roleName" label="角色名称"> </el-table-column>
        <el-table-column prop="remark" label="备注"> </el-table-column>

        <el-table-column prop="created" label="创建时间" width="180"> </el-table-column>
        <el-table-column prop="createdBy" label="创建人"> </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="editOrAddOpen(scope.row, 'edit')">编辑</el-button>
            <el-button style="color: red;" type="text" @click="deleteAciton(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- dialog 新增和编辑 -->
    <el-dialog :title="editOrAddOpt.title" v-if="editOrAddOpt.visible" :close-on-click-modal="false"
      :visible.sync="editOrAddOpt.visible" width="60%">
      <el-form :model="editOrAddOpt.form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="名称">
              <el-input v-model="editOrAddOpt.form.roleCode" ref="roleCode" maxlength="20" show-word-limit
                autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="editOrAddOpt.form.remark" type="textarea" :rows="2" autocomplete="off">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <el-form-item label="权限">
              <el-tree :data="treeOpt.data" show-checkbox node-key="id" :props="treeOpt.defaultProps"
                :default-expand-all="false" :expand-on-click-node="false" :highlight-current="true"
                style="margin-top: 5px; height: 260px; overflow-y: auto;" 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>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="userAddOrEditSave">确 定</el-button>
        <el-button @click="editOrAddOpt.visible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import * as userApi from "@/api/systemPermission/userPermission";
export default {
  data() {
    const editOrAddData = {
      roleCode: "",
      roleName: "",
      remark: null,
      Disable: false,
      //角色拥有的权限数据
      PermissionsIds: [],

      Permissions: null,
      Created: null,
      CreatedBy: null,
      Updated: null,
      UpdatedBy: null,
      Id: 0
    };
    return {
      tableData: [],

      editOrAddOpt: {
        visible: false,
        flag: "add",
        title: "新增",
        form: { ...editOrAddData },
        formDefaultData: JSON.parse(JSON.stringify(editOrAddData)),
      },
      //临时存储的数据
      treeOpt: {
        data: [],       // 处理后的数据（展示用）
        originData: [], // 原始数据
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    };
  },
  methods: {
    /**
     * 查询或者搜索
     */
    btnRefresh() {
      this.getAllPermissionList();
      this.getData();
    },

    getData() {
      userApi.getUserRole().then(res => {
        userApi.ajaxSuccessBefore(res, (res) => {
          this.tableData = res.data;
        })
      });
    },

    /**
     * 获取权限数据
     */
    getAllPermissionList() {
      userApi.getAllPermission().then(res => {
        userApi.ajaxSuccessBefore(res, (res) => {
          this.treeOpt.data = userApi.transformToTreeData(res.data);
          this.treeOpt.originData = res.data;
        })
      })
    },


    /**
     * 新增或者编辑弹出框
     */
    editOrAddOpen(row, flag) {
      debugger
      if (this.treeOpt.data.length == 0) {
        this.$message.error("权限数据加载中...请稍后在操作,反复出现请联系管理员!");
        return;
      }
      this.editOrAddOpt.flag = flag;
      this.editOrAddOpt.visible = true;
      if (flag == "add") {
        this.editOrAddOpt.form = JSON.parse(JSON.stringify(this.editOrAddOpt.formDefaultData));
        this.editOrAddOpt.title = "新增"
      } else {
        this.editOrAddOpt.title = `编辑,用户名【${row.roleName}】`
        this.editOrAddOpt.form = row;
        userApi.getPermissionByRoleId(row.id).then(res => {
          if (res.code !== 'Success') return;
          const keys = res.data.map(x => x.id);
          this.$nextTick(() => {
            this.$refs.treePer.setCheckedKeys(keys);
          });
        });
      }
      this.$nextTick(() => {
        debugger
        const firstNode = this.$refs.treePer.root.childNodes[0]
        if (firstNode) firstNode.expand()
      })
    },

    /**
     * 新增或者编辑 保存操作
     */
    userAddOrEditSave() {
      debugger
      if (this.editOrAddOpt.form.roleCode == "" || this.editOrAddOpt.form.roleCode == null) {
        this.$message.error("权限名称不能为!");
        this.$refs.roleCode.focus();
        return;
      }
      this.editOrAddOpt.form.roleName = this.editOrAddOpt.form.roleCode
      var selectData = this.getSelectRoleVal();
      if (selectData.length == 0) return;
      this.editOrAddOpt.form.PermissionsIds = selectData;

      if (this.editOrAddOpt.flag == "edit") {
        userApi.editRoleAndPermissions(this.editOrAddOpt.form).then(res => {
          userApi.ajaxSuccessBefore(res, (res) => {
            this.editOrAddOpt.visible = false;
            this.getData();
          }, this)
        });
        return
      }
      userApi.addRoleAndPermissions(this.editOrAddOpt.form).then(res => {
        userApi.ajaxSuccessBefore(res, (res) => {
          this.editOrAddOpt.visible = false;
          this.getData();
        }, this)
      });
    },

    //删除
    deleteAciton(row) {
      var title = `此操作将永久删除该数据,【${row.roleName}】，是否继续？`;
      this.$confirm(title, '提示', { type: 'warning', })
        .then(() => {
          userApi.deleteRoleByIds([row.id]).then(res => {
            userApi.ajaxSuccessBefore(res, (res) => {
              this.editOrAddOpt.visible = false;
              this.getData();
            }, this)
          });
        }).catch()
    },

    setCurrent(row) {
      this.$refs.multipleTable.setCurrentRow(row);
    },

    //获取选中的权限
    getSelectRoleVal() {
      var result = this.$refs.treePer.getCheckedKeys();
      if (result.length == 0) {
        this.$message.error("请选择权限数据!");
        return [];
      }
      return result
    },
  },
  mounted() {
    this.getAllPermissionList();
    this.getData();
  },
};
</script>
<style scoped lang="scss">
.sys-container {
  width: 100%;

  .sys-pb-5 {
    padding-bottom: 5px !important;
  }

  .sys-form-item {
    display: flex;
    border-radius: 4px;
    min-height: 46px;
    margin-bottom: 10px;
    align-items: center;
  }

  .sys-table-border {
    border: 1px solid #e5e9f2;
  }


  .sys-pagination-container {
    text-align: center;
  }
}

.current-row {
  background-color: #ecf5ff;
}

/* 图标样式 */
.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>