fl-web-component 1.2.11 → 1.2.13

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

@@ -1,504 +0,0 @@
-<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>