yg-yygl 0.0.1

package/src/views/sys/role/components/role-permission.vue

@@ -0,0 +1,605 @@
+<script lang="tsx" setup>
+import type { TableData } from '@udp/component-ui';
+
+import type { RoleGroupBaseType } from '../../../../api/role';
+
+import { computed, nextTick, ref, unref, watch } from 'vue';
+
+import { Table, useTable } from '@udp/component-ui';
+
+import { QuestionFilled } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+import {
+  queryPermissionButtons,
+  queryPermissions,
+  saveBusinessPermission,
+  saveFunctionPermission,
+} from '../../../../api/role';
+
+interface TableRowType extends TableData {
+  id: string;
+  menuName: string;
+  menuType: number;
+  permissionCode?: string;
+  functionPermission?: string;
+  businessPermission?: any[] | null;
+  children?: TableRowType[];
+  hasChildren?: boolean;
+  icon?: string;
+  url?: string;
+  target?: string;
+  parentId?: string;
+  permissionType?: string;
+  orderBy?: number;
+  visual?: number;
+  remarks?: string;
+  stopUse?: number;
+  parentCodes?: string;
+  labels?: any[];
+}
+
+type PropsType = {
+  groupInfo?: RoleGroupBaseType;
+  isView?: boolean;
+};
+
+const props = defineProps<PropsType>();
+
+/** 列表数据获取API配置 */
+const api = {
+  list: (_params: any) => {
+    // 构造请求参数
+    const reqParams = {
+      roleId: props.groupInfo?.id,
+    };
+    return queryPermissionButtons(reqParams).then((res) => {
+      if (res.data && Array.isArray(res.data)) {
+        // 处理menuType类型，确保是数字
+        res.data.forEach((item: TableRowType) => {
+          if (item.menuType !== undefined) {
+            item.menuType = Number(item.menuType);
+          }
+
+          // 处理子项的menuType
+          if (item.children && Array.isArray(item.children)) {
+            item.children.forEach((child: TableRowType) => {
+              if (child.menuType !== undefined) {
+                child.menuType = Number(child.menuType);
+              }
+            });
+          }
+        });
+      }
+
+      return res;
+    });
+  },
+};
+
+// 使用Table钩子获取数据
+const { loading, data, refresh } = useTable({
+  api,
+  initParams: { roleStatus: 1 },
+});
+
+// 表格数据处理
+const formattedData = computed(() => {
+  const rawData = unref(data);
+  if (!rawData || !Array.isArray(rawData)) {
+    return [];
+  }
+  return rawData;
+});
+
+// 监控数据变化，如果有预选行ID则自动选中
+watch(
+  () => formattedData.value,
+  () => {
+    // 如果存在currentRowId，则选中对应行
+    if (currentRowId.value) {
+      nextTick(() => {
+        const findRow = async (data: any[]) => {
+          for (const item of data) {
+            if (item.id === currentRowId.value) {
+              const treeTable = await getElTableExpose();
+              treeTable?.clearSelection();
+              treeTable?.toggleRowSelection(item, true);
+              return;
+            }
+            if (item.children && item.children.length > 0) {
+              findRow(item.children);
+            }
+          }
+        };
+        findRow(formattedData.value);
+      });
+    }
+  },
+  {
+    deep: true,
+  },
+);
+
+// 引用表格实例
+const tableRef = ref<any>(null);
+
+// 获取表格实例
+const getElTableExpose = () => {
+  return tableRef.value?.getElTableExpose?.();
+};
+
+/** 表格列配置 */
+const tableColumns = [
+  {
+    prop: 'menuName',
+    label: '规则名称',
+    minWidth: 300,
+  },
+  {
+    prop: 'menuType',
+    label: '模块类型',
+    minWidth: 100,
+    formatter: (row: TableRowType) => {
+      if (row.menuType === 1) {
+        return '菜单权限';
+      } else if (row.menuType === 2) {
+        return '按钮权限';
+      } else {
+        return '未知类型';
+      }
+    },
+  },
+  {
+    prop: 'functionPermission',
+    label: '功能数据权限范围',
+    minWidth: 150,
+    formatter: (row: TableRowType) => {
+      if (row.menuType === 1) {
+        return ' - ';
+      } else
+        switch (row.permissionType) {
+          case '1': {
+            return '当前账号';
+          }
+          case '2': {
+            return '当前账号主组织';
+          }
+          case '3': {
+            return '当前账号主组织及下级组织';
+          }
+          case '4': {
+            return '当前账号附属组织';
+          }
+          case '5': {
+            return '当前账号附属组织及下级组织';
+          }
+          case '6': {
+            return '当前账号主组织及附属组织';
+          }
+          case '7': {
+            return '当前账号主组织及下级组织、附属组织及下级组织';
+          }
+          default: {
+            return '本角色';
+          }
+        }
+    },
+  },
+  {
+    prop: 'businessPermission',
+    label: '业务数据权限范围',
+    minWidth: 150,
+    formatter: (row: TableRowType) => {
+      if (row.menuType === 1) {
+        return ' - ';
+      }
+      return row.businessPermission && row.businessPermission.length > 0
+        ? '自定义条件组'
+        : '本角色';
+    },
+  },
+];
+
+// 权限数据相关状态
+const activeKey = ref('1');
+const selectedData = ref('1');
+const isShowTabs = ref(false);
+const currentRowId = ref('');
+// 树形表格配置
+const treeProps = {
+  children: 'children',
+  hasChildren: true,
+  checkStrictly: true,
+};
+const permissionCode = ref('');
+
+// 点击行处理
+const handleRowClick = async (row: TableData) => {
+  console.log('点击行，当前isShowTabs:', isShowTabs.value);
+  console.log('行数据:', row);
+
+  if (props.isView) {
+    return;
+  }
+
+  const rowData = row as TableRowType;
+  const treeTable = await getElTableExpose();
+  treeTable?.clearSelection();
+  treeTable?.toggleRowSelection(row, true);
+
+  // 如果点击的是按钮权限(menuType为非1)，则显示右侧面板
+  if (rowData.menuType === 1) {
+    console.log('不显示右侧面板, menuType为1');
+    isShowTabs.value = false;
+    currentRowId.value = '';
+  } else {
+    console.log('显示右侧面板, menuType不为1:', rowData.menuType);
+    isShowTabs.value = true;
+    currentRowId.value = rowData.id;
+    permissionCode.value = rowData.permissionCode || '';
+    getPermissionData();
+  }
+
+  console.log('处理完成后isShowTabs:', isShowTabs.value);
+};
+
+// 选择行处理（与参考组件保持一致）
+const handleSelect = async (selection: TableData[], row: TableData) => {
+  handleRowClick(row);
+};
+
+// 加载权限详情数据
+const tabLoading = ref(false);
+const getPermissionData = () => {
+  tabLoading.value = true;
+  queryPermissions({
+    menuId: currentRowId.value,
+    roleId: unref(props).groupInfo!.id,
+    permissionCode: permissionCode.value,
+  }).then((res) => {
+    selectedData.value = res.functionPermission || null;
+    checkData.value = res.businessPermission || [];
+    checkedOption.value = res.businessPermission?.length
+      ? checkData.value.filter((item: any) => item.express?.length > 0)
+      : [];
+    tabLoading.value = false;
+  });
+};
+
+const checkData = ref<any>([]);
+const checkedOption = ref<any>([]);
+const innerFormRef = ref();
+
+const rules = ref({
+  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+  age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
+});
+const options = ref([
+  {
+    label: '且',
+    value: 'AND',
+  },
+  {
+    label: '或',
+    value: 'OR',
+  },
+]);
+const conditionsOption = ref([
+  { value: 'equal', label: '等于（=）' },
+  { value: 'in', label: '包含（in）' },
+  { value: 'NotIn', label: '不包含（not in）' },
+  { value: 'isnull', label: '为空（is null）' },
+  { value: 'IsNotNull', label: '不为空（is not null）' },
+  { value: 'gt', label: '大于（>）' },
+  { value: 'lt', label: '小于（<）' },
+  { value: 'gte', label: '大于等于（>=）' },
+  { value: 'lte', label: '小于等于（<=）' },
+  { value: 'Like', label: '匹配（Like）' },
+  { value: 'NotLike', label: '不匹配（not like）' },
+]);
+const addRow = (item: any) => {
+  console.log('item', item);
+  if (item.express && item.express.length < 10) {
+    item.express.push({
+      sort: item.express.length,
+      andOr: 'AND',
+      column: '',
+      condition: 'equal',
+      value: '',
+    });
+  } else {
+    ElMessage.warning('最多只能添加10条规则');
+  }
+};
+const deleteRow = (item: any) => {
+  item.express?.pop();
+};
+
+// 处理条件选择变化
+const handleConditionChange = (item1: any) => {
+  // 获取之前的条件值（如果不存在则初始化为当前值）
+  const previousCondition = item1._previousCondition || item1.condition;
+
+  // 当选择为空或不为空时，保存当前值并清空输入框
+  if (item1.condition === 'isnull' || item1.condition === 'IsNotNull') {
+    // 如果当前有值，保存到临时属性
+    if (item1.value && item1.value.trim() !== '') {
+      item1._savedValue = item1.value;
+    }
+    item1.value = '';
+  }
+
+  // 当从"为空"/"不为空"切换回其他条件时，恢复之前保存的值
+  if (
+    item1.condition !== 'isnull' &&
+    item1.condition !== 'IsNotNull' &&
+    (previousCondition === 'isnull' || previousCondition === 'IsNotNull')
+  ) {
+    if (item1._savedValue !== undefined && item1._savedValue !== null) {
+      item1.value = item1._savedValue;
+    }
+  }
+
+  // 更新之前的条件值，用于下次变化时判断
+  item1._previousCondition = item1.condition;
+};
+
+// 判断输入框是否应该禁用
+const isInputDisabled = (condition: string) => {
+  return condition === 'isnull' || condition === 'IsNotNull';
+};
+
+// 保存按钮状态
+const btnLoading = ref(false);
+
+// 保存功能数据权限
+const savePermission = () => {
+  btnLoading.value = true;
+  saveFunctionPermission({
+    roleId: unref(props).groupInfo!.id,
+    menuId: currentRowId.value,
+    permissionType: selectedData.value,
+  })
+    .then(() => {
+      btnLoading.value = false;
+      ElMessage.success('保存成功');
+
+      // 刷新左侧表格数据
+      refresh();
+    })
+    .finally(() => {
+      btnLoading.value = false;
+    });
+};
+
+const checkSave = () => {
+  btnLoading.value = true;
+  // console.log('checkData', checkData.value)
+  // console.log('checkedOption.value', checkedOption.value)
+  saveBusinessPermission({
+    roleId: unref(props).groupInfo!.id,
+    menuId: currentRowId.value,
+    rules: checkData.value.filter((item: any) =>
+      checkedOption.value.includes(item),
+    ),
+  })
+    .then(() => {
+      btnLoading.value = false;
+      ElMessage.success('保存成功');
+
+      // 刷新左侧表格数据
+      refresh();
+    })
+    .finally(() => {
+      btnLoading.value = false;
+    });
+};
+
+// 监听角色组信息变化
+watch(
+  () => unref(props).groupInfo,
+  () => {
+    if (unref(props).groupInfo?.id) {
+      // 重置当前状态
+      isShowTabs.value = false;
+      currentRowId.value = '';
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+// 清除选择，将Radio重置为未选中状态
+const resetRadioSelection = () => {
+  selectedData.value = '';
+  savePermission();
+};
+</script>
+
+<template>
+  <div id="TheBox" class="flex h-full w-full overflow-auto p-[10px]">
+    <div class="w-0 flex-auto">
+      <Table
+        ref="tableRef"
+        :columns="tableColumns"
+        :data="formattedData"
+        :loading="loading"
+        row-key="id"
+        :tree-props="treeProps"
+        default-expand-all
+        @row-click="handleRowClick"
+        @select="handleSelect"
+        highlight-current-row
+        stripe
+        :show-top-actions="false"
+        :show-toolbar="false"
+        class="h-full border border-solid border-[#e4e7ed]"
+      />
+    </div>
+
+    <el-card
+      class="ml-[20px] flex !w-[40%]"
+      v-if="isShowTabs"
+      shadow="never"
+      body-class="!px-[20px] !py-[5px] h-full w-full"
+    >
+      <el-tabs v-model="activeKey" v-loading="tabLoading" class="h-full w-full">
+        <el-tab-pane label="功能数据权限" name="1" class="flex h-full flex-col">
+          <!-- radio列表 -->
+          <div class="mb-[10px] font-bold">权限范围</div>
+          <el-radio-group
+            v-model="selectedData"
+            class="flex flex-1 flex-col !items-start"
+          >
+            <el-radio value="1">当前账号</el-radio>
+            <el-radio value="2">当前账号主组织</el-radio>
+            <el-radio value="3">当前账号主组织及下级组织</el-radio>
+            <el-radio value="4">当前账号附属组织</el-radio>
+            <el-radio value="5">当前账号附属组织及下级组织</el-radio>
+            <el-radio value="6">当前账号主组织及附属组织</el-radio>
+            <el-radio value="7">当前账号主组织及下级组织、附属组织及下级组织</el-radio>
+          </el-radio-group>
+          <div class="flex justify-end py-3">
+            <el-button @click="resetRadioSelection" class="mr-[10px]">
+              重置
+            </el-button>
+            <el-button
+              type="primary"
+              @click="savePermission"
+              :loading="btnLoading"
+            >
+              保存
+            </el-button>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="业务数据权限" name="2" class="flex h-full flex-col">
+          <!-- checkbox列表 -->
+          <div class="flex items-center font-bold">
+            表格列表
+            <el-tooltip
+              content="如果是加密字段，需要填写数据库中存入的加密值！"
+              placement="top"
+            >
+              <el-icon class="text-warning-500 ml-1 cursor-pointer">
+                <QuestionFilled />
+              </el-icon>
+            </el-tooltip>
+          </div>
+          <el-checkbox-group
+            v-model="checkedOption"
+            class="flex flex-1 flex-col overflow-y-auto py-2"
+          >
+            <div v-for="item in checkData" :key="item.id">
+              <el-checkbox :value="item">{{ item.tableName }}</el-checkbox>
+              <div
+                class="text-12px my-10px"
+                v-if="checkedOption.includes(item)"
+              >
+                <fieldset class="py-20px px-10px">
+                  <legend>{{ item.tableName }}</legend>
+                  <div>
+                    <el-form
+                      ref="innerFormRef"
+                      :model="item"
+                      :rules="rules"
+                      size="small"
+                    >
+                      <el-form-item
+                        v-for="item1 in item.express"
+                        :key="item1.sort"
+                      >
+                        <el-row :gutter="10" class="w-full">
+                          <el-col :span="6">
+                            <el-select
+                              v-model="item1.andOr"
+                              clearable
+                              :disabled="item1.sort === 0"
+                              placeholder=""
+                              :show-arrow="false"
+                            >
+                              <el-option
+                                v-for="item2 in options"
+                                :key="item2.value"
+                                :label="item2.label"
+                                :value="item2.value"
+                              />
+                            </el-select>
+                          </el-col>
+                          <el-col :span="6">
+                            <el-select
+                              v-model="item1.column"
+                              clearable
+                              placeholder=""
+                              :show-arrow="false"
+                            >
+                              <el-option
+                                v-for="item2 in item.fields"
+                                :key="item2.columnName"
+                                :label="item2.columnComment"
+                                :value="item2.columnName"
+                              />
+                            </el-select>
+                          </el-col>
+                          <el-col :span="6">
+                            <el-select
+                              v-model="item1.condition"
+                              clearable
+                              placeholder=""
+                              :show-arrow="false"
+                              @change="handleConditionChange(item1)"
+                            >
+                              <el-option
+                                v-for="item2 in conditionsOption"
+                                :key="item2.value"
+                                :label="item2.label"
+                                :value="item2.value"
+                              />
+                            </el-select>
+                          </el-col>
+                          <el-col :span="6">
+                            <el-input
+                              placeholder=""
+                              v-model="item1.value"
+                              maxlength="50"
+                              :disabled="isInputDisabled(item1.condition)"
+                            />
+                          </el-col>
+                        </el-row>
+                      </el-form-item>
+                      <div class="w-full">
+                        <el-button plain @click="addRow(item)">
+                          添加一行
+                        </el-button>
+                        <el-button plain type="danger" @click="deleteRow(item)">
+                          删除一行
+                        </el-button>
+                      </div>
+                    </el-form>
+                  </div>
+                </fieldset>
+              </div>
+            </div>
+          </el-checkbox-group>
+          <div class="flex w-full justify-end py-3">
+            <el-button type="primary" @click="checkSave" :loading="btnLoading">
+              保存
+            </el-button>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-table .el-table__header-wrapper .el-checkbox) {
+  display: none; // 隐藏表头的全选框
+}
+.el-tab-pane {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/src/views/sys/role/components/role-type-tag.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps<{
+  value?: number | string;
+}>();
+</script>
+
+<template>
+  <span
+    class="inline-flex h-6 items-center rounded-md border px-2 text-xs font-medium"
+    :class="
+      Number(value) === 1
+        ? 'border-amber-200 bg-amber-50 text-amber-600'
+        : 'border-blue-200 bg-blue-50 text-blue-600'
+    "
+  >
+    {{ Number(value) === 1 ? '系统角色' : '普通角色' }}
+  </span>
+</template>