fl-web-component 0.1.0

package/packages/components/model/components/proof-role.vue

@@ -0,0 +1,535 @@
+<template>
+  <div>
+		<div class="trigger-button">
+      <el-button type="text" @click="triggerDialog"
+        ><i class="pre-img"></i>角色管理</el-button
+      >
+    </div>
+
+      <!-- @handleClose="handleClose"
+      @submitDialogData="submitDialogData" -->
+
+		<com-dialog
+      v-if="dialogVisible"
+      dialog-title="角色管理"
+      :visible="dialogVisible"
+      :popup-width="'50%'"
+      :footerDisabled="true"
+      @handleClose="handleClose"
+    >
+			<el-row :gutter="10" class="mb8">
+				<el-col :span="1.5">
+					<el-button
+						type="primary"
+						icon="el-icon-plus "
+						size="small"
+						@click="handleAdd"
+						v-hasPermi="[
+							`project:role:add:proj:${defaultParams.projectId}`,
+						]"
+						>新增</el-button
+					>
+				</el-col>
+			</el-row>
+
+			<el-table
+				v-loading="loading"
+				:data="roleList"
+				max-height="65vh"
+				@selection-change="handleSelectionChange"
+			>
+        <el-table-column label="序号" type="index" width="80" />
+        <el-table-column
+					label="角色名称"
+          width="250"
+          prop="roleName"
+					:show-overflow-tooltip="true"
+				/>
+				<el-table-column
+					label="权限字符"
+					prop="roleKey"
+					:show-overflow-tooltip="true"
+					width="200"
+				/>
+				<el-table-column label="创建时间" prop="createTime">
+					<template slot-scope="scope">
+						<span>{{ parseTime(scope.row.createTime) }}</span>
+					</template>
+				</el-table-column>
+				<el-table-column
+					label="操作"
+					class-name="small-padding fixed-width"
+				>
+					<template slot-scope="{ row }">
+						<el-button
+							v-show="row.projectId"
+							v-hasPermi="[
+								`project:role:edit:proj:${projectId}`,
+							]"
+							size="mini"
+							type="text"
+							@click="handleUpdate(row)"
+							>编辑</el-button
+						>
+						<!-- builtIn：'0' 内置，'2' 非内置 -->
+						<template v-if="row.builtIn === '2'">
+							<el-button
+								v-show="row.projectId"
+								v-hasPermi="[
+									`project:role:remove:proj:${projectId}`,
+								]"
+								size="mini"
+								type="text"
+								@click="handleDelete(row)"
+								>删除</el-button
+							>
+						</template>
+					</template>
+				</el-table-column>
+			</el-table>
+
+			<!-- <pagination
+				v-show="total > 0"
+				:total="total"
+				:page.sync="queryParams.pageNum"
+				:limit.sync="queryParams.pageSize"
+				@pagination="getList"
+			/> -->
+		</com-dialog>
+    <!-- 新增或编辑角色配置对话框 -->
+		<!-- append-to-body -->
+		<!-- :close-on-click-modal="false" -->
+    <com-dialog
+			v-if="dialogOperate.visible"
+			:dialog-title="title"
+      :visible="dialogOperate.visible"
+      width="500px"
+      @handleClose="handleOperateClose"
+      @submitDialogData="submitForm"
+    >
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="角色名称" prop="roleName">
+          <el-input
+            v-trim
+            v-model="form.roleName"
+            placeholder="请输入角色名称"
+          />
+        </el-form-item>
+        <el-form-item prop="roleKey">
+          <span slot="label">
+            <el-tooltip
+              content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)"
+              placement="top"
+            >
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+            权限字符
+          </span>
+          <el-input
+            v-trim
+            v-model="form.roleKey"
+            placeholder="请输入权限字符"
+          />
+        </el-form-item>
+        <!-- <el-form-item label="角色顺序" prop="roleSort">
+            <el-input-number
+              ref="refRoleSort"
+              v-trim
+              v-model="form.roleSort"
+              controls-position="right"
+              @input.native="roleSortCheck"
+            />
+          </el-form-item> -->
+        <el-form-item label="菜单权限">
+          <el-checkbox
+            v-model="menuExpand"
+            @change="handleCheckedTreeExpand($event)"
+            >展开/折叠</el-checkbox
+          >
+          <el-checkbox
+            v-model="menuNodeAll"
+            @change="handleCheckedTreeNodeAll($event)"
+            >全选/全不选</el-checkbox
+          >
+          <el-checkbox
+            v-model="form.menuCheckStrictly"
+            @change="handleCheckedTreeConnect($event)"
+            >父子联动</el-checkbox
+          >
+          <el-tree
+            class="tree-border"
+            :data="menuOptions"
+            show-checkbox
+            ref="menu"
+            node-key="id"
+            :check-strictly="!form.menuCheckStrictly"
+            empty-text="加载中，请稍候"
+            :props="defaultProps"
+          ></el-tree>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input
+            v-trim
+            v-model="form.remark"
+            type="textarea"
+            maxlength="255"
+            placeholder="请输入内容"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+		</com-dialog>
+  </div>
+</template>
+
+<script>
+import * as modelApi from '../api/index';
+import proRole from '@/api/pro-role/pro-role';
+
+export default {
+  name: 'ProRole',
+  computed: {
+    projectId() {
+      return this.defaultParams.projectId;
+    },
+  },
+	components: {
+    ComDialog: () => import('./com-dialogWrapper'),
+  },
+  watch: {
+    // projectId(val) {
+    //   if (!val) return;
+    //   this.getList();
+    // },
+  },
+	props: {
+    defaultParams: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+			dialogVisible: false,
+			dialogOperate: {
+        visible: false,
+      },
+			// 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 角色表格数据
+      roleList: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      menuExpand: false,
+      menuNodeAll: false,
+      deptExpand: true,
+      deptNodeAll: false,
+      // 日期范围
+      dateRange: [],
+      // 菜单列表
+      menuOptions: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        roleName: undefined,
+        roleKey: undefined,
+        status: undefined,
+      },
+      // 表单参数
+      form: {},
+      defaultProps: {
+        children: 'children',
+        label: 'label',
+      },
+      // 表单校验
+      rules: {
+        roleName: [
+          { required: true, message: '角色名称不能为空', trigger: 'change' },
+          { max: 16, message: '角色名称不能大于16个字符', trigger: 'change' },
+        ],
+        roleKey: [
+          { required: true, message: '权限字符不能为空', trigger: 'change' },
+        ],
+        // roleSort: [
+        //   { required: true, message: "角色顺序不能为空", trigger: "change" },
+        //   {
+        //     pattern: /^([0-9][0-9]{0,2}|1000)$/,
+        //     message: "请输入0-1000间的整数",
+        //     trigger: "change",
+        //   },
+        // ],
+      },
+      roleNames: [],
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+		triggerDialog() {
+      this.dialogVisible = !this.dialogVisible;
+      console.log(this.dialogVisible);
+    },
+    checkSelectable({ projectId }) {
+      return Boolean(projectId);
+    },
+    // 查询角色列表
+    getList() {
+      // this.queryParams.projectId;
+      const projectId = this.defaultParams.projectId;
+      // console.log(this.defaultParams);
+      this.loading = true;
+      modelApi
+        .getRoleList({projectId})
+        .then((response) => {
+          this.roleList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+    },
+    // 查询菜单树结构
+    getMenuTreeselect() {
+      proRole.menuTreeselect().then((response) => {
+        this.menuOptions = response;
+      });
+    },
+    /* 弹窗 关闭 操作 */
+    handleClose() {
+      this.dialogVisible = false;
+    },
+    // 所有菜单节点数据
+    getMenuAllCheckedKeys() {
+      // 目前被选中的菜单节点
+      let checkedKeys = this.$refs.menu.getCheckedKeys();
+      // 半选中的菜单节点
+      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
+      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+      return checkedKeys;
+    },
+    // 根据角色ID查询菜单树结构
+    getRoleMenuTreeselect(roleId) {
+      return proRole
+        .roleMenuTreeselect(this.projectId, roleId)
+        .then((response) => {
+          this.menuOptions = response.menus;
+          return response;
+        });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      if (this.$refs.menu != undefined) {
+        this.$refs.menu.setCheckedKeys([]);
+      }
+      (this.menuExpand = false),
+        (this.menuNodeAll = false),
+        (this.deptExpand = true),
+        (this.deptNodeAll = false),
+        (this.form = {
+          roleId: undefined,
+          roleName: undefined,
+          roleKey: undefined,
+          // roleSort: 0,
+          status: '0',
+          menuIds: [],
+          deptIds: [],
+          menuCheckStrictly: true,
+          deptCheckStrictly: true,
+          remark: undefined,
+        });
+      this.resetForm('form');
+    },
+    // 搜索按钮操作
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.queryParams.pageSize = 10;
+      this.getList();
+    },
+    // 重置按钮操作
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm('queryForm');
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.roleId);
+      this.roleNames = selection.map((item) => item.roleName);
+      const flag = Boolean(selection.find((item) => item.builtIn === '0'));
+      // this.single = selection.length != 1 || flag;
+      this.single = selection.length != 1;
+      this.multiple = !selection.length || flag;
+    },
+    // 树权限（展开/折叠）
+    handleCheckedTreeExpand(value) {
+      let treeList = this.menuOptions;
+      for (let i = 0; i < treeList.length; i++) {
+        this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
+      }
+    },
+    // 树权限（全选/全不选）
+    handleCheckedTreeNodeAll(value) {
+      this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
+    },
+    // 树权限（父子联动）
+    handleCheckedTreeConnect(value) {
+      this.form.menuCheckStrictly = value ? true : false;
+    },
+    // 新增按钮操作
+    handleAdd() {
+      this.reset();
+      this.getMenuTreeselect();
+      this.dialogOperate.visible = true;
+      this.title = '新增角色';
+    },
+    /* 弹窗 关闭 操作 */
+    handleOperateClose() {
+      this.resetForm();
+      this.dialogOperate.visible = false;
+    },
+    resetForm() {
+      // this.reset();
+      // this.$refs.form.resetFields();
+      // this.dialogForm.userId = '';
+      // this.dialogForm.roleId = '';
+      // this.dialogForm.operateType = '';
+    },
+    // 编辑按钮操作
+    handleUpdate(row) {
+			this.dialogOperate.visible = true;
+      this.reset();
+      const roleId = row.roleId || this.ids;
+      const roleMenu = this.getRoleMenuTreeselect(roleId);
+      proRole.getRole(roleId).then((response) => {
+        this.form = response;
+        this.open = true;
+        this.$nextTick(() => {
+          roleMenu.then((res) => {
+            let checkedKeys = res.checkedKeys;
+            checkedKeys.forEach((v) => {
+              this.$nextTick(() => {
+                this.$refs.menu.setChecked(v, true, false);
+              });
+            });
+          });
+        });
+        this.title = '编辑角色';
+      });
+    },
+    // 分配用户操作
+    // handleAuthUser: function (row) {
+    //   const roleId = row.roleId;
+    //   this.$router.push({
+    //     path: "/project/pro-config/pro-user/" + roleId,
+    //     query: {
+    //       projectId: this.projectId,
+    //     },
+    //   });
+    // },
+    // 提交按钮
+    submitForm: function () {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.form.projectId = Number(this.projectId);
+          if (this.form.roleId != undefined) {
+            this.form.menuIds = this.getMenuAllCheckedKeys();
+            proRole.updateRole(this.form).then((response) => {
+              this.$modal.msgSuccess('编辑成功');
+              this.dialogOperate.visible = false;
+              this.getList();
+            });
+          } else {
+            this.form.menuIds = this.getMenuAllCheckedKeys();
+            proRole.addRole(this.form).then((response) => {
+              this.$modal.msgSuccess('新增成功');
+              this.dialogOperate.visible = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    // 删除按钮操作
+    handleDelete(row) {
+      const roleIds = row.roleId || this.ids.join(',');
+      const roleNames = row.roleName || this.roleNames;
+      this.$confirm('确认删除角色 "' + roleNames + '"？', '移除', {
+          type: 'error',
+        })
+        .then(() => {
+          this.$modal.loading('正在删除，请稍候...');
+          proRole
+            .delRole({
+              roleIds,
+              projectId: this.defaultParams.projectId,
+            })
+            .then(() => {
+              this.getList();
+              this.$modal.msgSuccess('删除成功');
+            })
+            .finally(() => {
+              this.$modal.closeLoading();
+            });
+        })
+        .catch(() => {});
+    },
+    // 导出按钮操作
+    handleExport() {
+      this.download(
+        'system/role/export',
+        {
+          ...this.queryParams,
+        },
+        `role_${new Date().getTime()}.xlsx`
+      );
+    },
+    // 校验排序
+    // roleSortCheck(val) {
+    //   const key = this.$refs.refRoleSort.displayValue;
+    //   if (val.data === null && key === "") {
+    //     this.$set(this.form, "roleSort", undefined);
+    //   } else {
+    //     this.$set(this.form, "roleSort", key);
+    //   }
+    //   if (this.form.roleSort) {
+    //     this.form.roleSort = this.form.roleSort.replace(/\D/g, "");
+    //   }
+    // },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .trigger-button {
+  span {
+    display: flex;
+    align-items: center;
+    color: #2e3136;
+  }
+  .pre-img {
+    background-image: url('../../../assets/proof/role@2x.png');
+    width: 30px;
+    height: 30px;
+    display: inline-block;
+    background-size: cover;
+  }
+}
+</style>