数据权限可直接修改关联表

权限配置提示
2024-11-22 11:29:47 +08:00
parent 934c9073c1
commit 4231f1dd6d
4 changed files with 121 additions and 3 deletions
--- a/src/components/CreateCodeStep/src/components/SelectDatabase.vue
+++ b/src/components/CreateCodeStep/src/components/SelectDatabase.vue
@ -2,7 +2,7 @@
  <BasicModal
    wrap-class-name="fixedHeight"
    @register="registerModal"
-    :title="t('选择数据库')"
+    :title="t('选择数据库表')"
    v-bind="$attrs"
    width="800px"
    :fixedHeight="true"
@ -45,6 +45,12 @@
  const selectedKeys = ref<string[] | number[]>([]);

  const emit = defineEmits(['success', 'register']);
+  const props=defineProps({
+      forbidUncheck:{
+          type:Boolean,
+          default:true
+      }
+  });

  const { createMessage } = useMessage();
  const selectTableName = ref<string[]>([]);
@ -73,7 +79,7 @@
    rowSelection: {
      type: 'checkbox',
      getCheckboxProps: (record) => ({
-        disabled: selectTableName.value.includes(record.tableName),
+        disabled: props.forbidUncheck&&selectTableName.value.includes(record.tableName),
      }),
      onChange: (selectedRowKeys) => {
        //搜索后会把原有选中项清空 所以需要进行存储
--- a/src/views/system/dataAuthority/components/AuthDrawer.vue
+++ b/src/views/system/dataAuthority/components/AuthDrawer.vue
@ -163,7 +163,31 @@
        <a-textarea v-model:value="formState.remark" :placeholder="t('请输入备注')" />
      </a-form-item>
    </a-form>
+
+      <BasicTable @register="registerEffectTable">
+          <template #toolbar>
+              <a-button type="primary" @click="addEffectTable"> {{ t('添加生效数据库表') }} </a-button>
+          </template>
+          <template #bodyCell="{ column, text, record }">
+              <template v-if="column.dataIndex == 'action'">
+                  <TableAction
+                      :actions="[
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                title: t('删除'),
+                popConfirm: {
+                  title: t('是否确认删除'),
+                  confirm: handleEffectTableDelete.bind(null, record),
+                },
+              },
+            ]"
+                  />
+              </template>
+          </template>
+      </BasicTable>
  </BasicDrawer>
+    <SelectDatabase @register="registerModal" @success="handleSelectEffectTable" :forbidUncheck=false ></SelectDatabase>
 </template>
 <script lang="ts">
  import { defineComponent, ref, computed, unref, reactive, h, watch, nextTick } from 'vue';
@ -184,6 +208,9 @@

  import { addAuth, updateAuth } from '/@/api/system/authorize';
  import { useI18n } from '/@/hooks/web/useI18n';
+  import {useModal} from "/@/components/Modal";
+  import {TableConfig} from "/@/model/generator/tableConfig";
+  import SelectDatabase from "/@/components/CreateCodeStep/src/components/SelectDatabase.vue";
  const { t } = useI18n();
  export const formSchema: FormSchema[] = [
    {
@ -378,10 +405,12 @@
  }
  const isCustom = ref<number>(0);
  const editableData = ref<DataItem[]>([]);
+  const tableList=ref<DataItem[]>([]);
  const selectUser = ref<boolean>(false);
  export default defineComponent({
-    name: 'MenuDrawer',
+    name: 'AuthDrawer',
    components: {
+        SelectDatabase,
      BasicDrawer,
      BasicForm,
      TableAction,
@ -454,6 +483,8 @@
        }
      });

+        const [registerModal, { openModal }] = useModal();
+
      const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
        labelWidth: 100,
        schemas: formSchema,
@ -467,6 +498,9 @@
        pagination: false,
        striped: false,
        useSearchForm: false,
+          formConfig:{
+              showActionButtonGroup: false,
+          },
        bordered: true,
        showIndexColumn: false,
        canResize: false,
@ -484,6 +518,7 @@
        setDrawerProps({ confirmLoading: false });
        isUpdate.value = !!data?.isUpdate;
        editableData.value = [];
+          tableList.value = [];
        const treeData = await getRoleAllList();
        const filterOption = (input: string, option: any) => {
          return option.name.indexOf(input) >= 0;
@ -515,11 +550,50 @@
              setTableData(editableData.value);
            });
          }
+
+            data.record.tableList?.forEach(function(table){
+                tableList.value.push({"tableName":table});
+            });
+            nextTick(() => {
+                setEffectTableData(tableList.value);
+            });
        } else {
          isCustom.value = 0;
        }
      });

+        const [registerEffectTable, { getDataSource:getEffectTableDataSource, setTableData:setEffectTableData }] = useTable({
+            title: '',
+            dataSource: tableList.value,
+            columns:[
+                {
+                    title: t('生效数据库表名'),
+                    dataIndex: 'tableName',
+                    width: 100,
+                },
+            ],
+            pagination: false,
+            striped: false,
+            useSearchForm: false,
+            formConfig:{
+                showActionButtonGroup: false,
+            },
+            bordered: true,
+            showIndexColumn: true,
+            indexColumnProps:{
+                width:20,
+            },
+            canResize: false,
+            rowKey: 'tableName',
+            actionColumn: {
+                width: 80,
+                title: t('操作'),
+                dataIndex: 'action',
+                slots: { customRender: 'action' },
+                fixed: undefined,
+            },
+        });
+
      function handleCreate() {
        let dataSource: DataItem[] = getDataSource();
        let obj = {
@ -533,6 +607,22 @@
        setTableData(dataSource);
      }

+        const selectTableName = computed(() =>
+            [],
+        );
+      function addEffectTable(){
+          try {
+              openModal(true, { databaseId: "master", selectTableName: tableList.value.map((table)=>table.tableName) });
+          } catch (error) {}
+      }
+      function handleSelectEffectTable(selectRows: TableConfig[]){
+          tableList.value=[];
+          selectRows?.forEach(function(table){
+              tableList.value.push({"tableName":table.tableName});
+          });
+          setEffectTableData(tableList.value);
+      }
+
      function changeFieldType(record: Recordable, option) {
        record.fieldValue = record.fieldType > 1 ? option.label : '';
      }
@ -550,6 +640,16 @@
        });
        setTableData(editableData.value);
      }
+        function handleEffectTableDelete(record: Recordable) {
+            const dataSource: DataItem[] = getEffectTableDataSource();
+            tableList.value = [];
+            dataSource.forEach((o) => {
+                if(o.tableName!=record.tableName){
+                    tableList.value.push(o);
+                }
+            });
+            setEffectTableData(tableList.value);
+        }

      const getTitle = computed(() => (!unref(isUpdate) ? t('新增数据权限') : t('编辑数据权限')));

@ -567,6 +667,7 @@
          } else {
            values.remark = formState.remark;
          }
+          values.tableList=getEffectTableDataSource()?.map(item=>item.tableName);

          setDrawerProps({ confirmLoading: true });
          // TODO custom api
@ -602,9 +703,14 @@
        selectUser,
        handleSubmit,
        registerTable,
+          registerEffectTable,
+          addEffectTable,
+          handleSelectEffectTable,
+          registerModal,
        handleCreate,
        changeFieldType,
        handleDelete,
+          handleEffectTableDelete,
        t,
      };
    },
--- a/src/views/system/role/components/AppAuthModal.vue
+++ b/src/views/system/role/components/AppAuthModal.vue
@ -8,6 +8,9 @@
    @ok="handleSubmit"
    width="90%"
  >
+      <template #title>
+          <div>APP功能授权<span style="color:red">（注意：修改角色权限会导致该角色所有用户自动登出，请谨慎操作！）</span></div>
+      </template>
    <a-row :gutter="[16, 16]" class="h-full">
      <a-col :span="6">
        <div class="text-base border-l-6 border-[#5e95ff] pl-3 h-5 leading-5 mb-3 ml-2">{{
--- a/src/views/system/role/components/RoleAuthModal.vue
+++ b/src/views/system/role/components/RoleAuthModal.vue
@ -8,6 +8,9 @@
    @ok="handleSubmit"
    width="90%"
  >
+      <template #title>
+          <div>功能授权<span style="color:red">（注意：修改角色权限会导致该角色所有用户自动登出，请谨慎操作！）</span></div>
+      </template>
    <a-row :gutter="[16, 16]" class="h-full">
      <a-col :span="6">
        <div class="text-base border-l-6 border-[#5e95ff] pl-3 h-5 leading-5 mb-3 ml-2">{{