@pubinfo/module-rbac 2.0.0-beta.3

package/src/views/data-permission/index.vue

@@ -0,0 +1,190 @@
+<script setup lang="tsx">
+import type { ProColumns } from '@pubinfo/pro-components';
+import type { dataPermissionType } from './enum';
+import { deleteRbacPubDataPermissionsDelete, postRbacPubDataPermissionsPageQuery } from '@/api/modules/rbac';
+import { ProTable } from '@pubinfo/pro-components';
+import { useToggle } from '@vueuse/core';
+import { message, Modal } from 'ant-design-vue';
+import CreateAndEditDataPermission from './components/createAndEditDataPermission.vue';
+import { ACTION, dataPermissionOptionsAll, dataPermissionTypeLabel } from './enum';
+
+defineOptions({
+  name: 'DataPermission',
+});
+
+const tableRef = ref();
+const drawerRef = ref();
+const columns: ProColumns<API.shujuquanxianshituduixiang> = [
+  {
+    valueType: 'a-input',
+    title: '数据权限名称',
+    dataIndex: 'name',
+    fieldProps: {
+      placeholder: '请输入',
+      allowClear: true,
+    },
+  },
+  {
+    valueType: 'a-select',
+    title: '数据权限规则',
+    dataIndex: 'type',
+    fieldProps: {
+      placeholder: '请选择',
+      allowClear: true,
+      options: dataPermissionOptionsAll,
+    },
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '创建时间',
+    dataIndex: 'createTime',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '更新时间',
+    dataIndex: 'updateTime',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '操作',
+    dataIndex: 'action',
+    width: 200,
+    fixed: 'right',
+  },
+];
+
+async function request(params: any) {
+  const { current, pageSize, type, name } = params;
+  const ps: any = {
+    pageSize,
+    currentPage: current,
+    doSearchTotal: true,
+    type,
+    name,
+  };
+
+  const res = await postRbacPubDataPermissionsPageQuery(ps);
+
+  return {
+    success: res.success,
+    data: res.data?.records ?? [],
+    total: res.data?.total ?? 0,
+  };
+}
+
+function getListData() {
+  tableRef.value.reload();
+}
+
+const [loading, setLoading] = useToggle(false);
+function onAction(key: string, record?: API.shujuquanxianshituduixiang): void {
+  if (loading.value) {
+    return;
+  }
+  switch (key) {
+    case ACTION.ADD:
+      drawerRef.value.open(key);
+      break;
+    case ACTION.EDIT:
+      drawerRef.value.open(key, record);
+      break;
+    case ACTION.REMOVE:
+      Modal.confirm({
+        title: '删除',
+        content: '确定要删除该权限吗？',
+        async onOk() {
+          setLoading(true);
+          deleteRbacPubDataPermissionsDelete({ id: record?.id as string })
+            .then((res: API.ResponseDataVoid) => {
+              if (res.success) {
+                message.success('删除成功');
+                getListData();
+              }
+            })
+            .finally(() => setLoading(false));
+        },
+      });
+      break;
+  }
+}
+</script>
+
+<template>
+  <div
+    w-full
+    h-full
+    py-10px
+    px-10px
+    flex
+    flex-col
+    class="page-data-permission"
+  >
+    <ProTable
+      ref="tableRef"
+      row-key="id"
+      :request="request"
+      :columns="columns"
+      auto-height
+      :scroll="{ x: 1000 }"
+    >
+      <template #toolbar>
+        <a-button
+          v-auth="'data_permission_create'"
+          type="primary"
+          @click="onAction(ACTION.ADD)"
+        >
+          <PlusCircleOutlined />
+          {{ ACTION.ADD }}
+        </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'type'">
+          <span>{{ dataPermissionTypeLabel[record.type as dataPermissionType] }}</span>
+        </template>
+
+        <template v-if="column.dataIndex === 'action'">
+          <a-space>
+            <a
+              v-auth="'data_permission_edit'"
+              class="flex items-center hover:opacity-80"
+              @click="onAction(ACTION.EDIT, record)"
+            >
+              <PubinfoIcon name="edit" class="text-base" />
+              <span class="ml-4px">{{ ACTION.EDIT }}</span>
+            </a>
+            <a
+              v-auth="'data_permission_delete'"
+              flex
+              items-center
+              text-red-500
+              hover:cursor-pointer
+              hover:text-red-500
+              hover:opacity-80
+              @click="onAction(ACTION.REMOVE, record)"
+            >
+              <PubinfoIcon name="remove" class="text-base" />
+              <span class="ml-4px">{{ ACTION.REMOVE }}</span>
+            </a>
+          </a-space>
+        </template>
+      </template>
+    </ProTable>
+    <CreateAndEditDataPermission ref="drawerRef" @submit="getListData" />
+  </div>
+</template>
+
+<style lang="scss">
+.page-data-permission {
+  .ant-card.pro-table {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .ant-form-item-label {
+    width: 102px !important;
+  }
+}
+</style>

package/src/views/dictionary/components/drawerDictionary.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+import type { FormExpose } from 'ant-design-vue/es/form/Form';
+import { postDictTypeSave } from '@/api/modules/configData';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+import { ACTION } from '../enum';
+
+defineOptions({
+  name: 'DrawerDictionary',
+});
+
+const emit = defineEmits(['submit']);
+
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
+  code: [{ required: true, message: '请输入类型编码', trigger: 'blur' }],
+};
+const state = reactive({
+  title: '',
+});
+const [open, setOpen] = useToggle(false);
+const formRef = ref<FormExpose>();
+const form = ref<Partial<API.DictTypeSaveDto>>({});
+
+async function onOpen(key: ACTION, record?: API.DictTypeVo) {
+  setOpen(true);
+  state.title = key;
+  if (key === ACTION.EDIT) {
+    form.value = { ...record ?? {} };
+  }
+  else {
+    form.value = {};
+  }
+}
+const [loading, setLoading] = useToggle(false);
+
+function onSubmit() {
+  formRef.value?.validate().then(() => {
+    setLoading(true);
+    const params: any = { ...form.value };
+    postDictTypeSave(params)
+      .then((res: API.ResponseDataString) => {
+        if (res.success) {
+          message.success(`${state.title}成功！`);
+          setOpen(false);
+          emit('submit');
+        }
+      })
+      .finally(() => setLoading(false));
+  });
+}
+
+function close() {
+  setOpen(false);
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    :title="`${state.title}类型`"
+    placement="right"
+    :width="520"
+    destroy-on-close
+    :footer-style="{ textAlign: 'right' }"
+    @close="close"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ span: 4 }"
+    >
+      <a-form-item label="类型名称" name="name">
+        <a-input v-model:value="form.name" :maxlength="30" />
+      </a-form-item>
+      <a-form-item label="类型编码" name="code">
+        <a-input v-model:value="form.code" :maxlength="30" :disabled="state.title === ACTION.EDIT" />
+      </a-form-item>
+      <a-form-item label="描述" name="description">
+        <a-textarea
+          v-model:value="form.description"
+          :rows="3"
+          show-count
+          :maxlength="200"
+        />
+      </a-form-item>
+      <a-form-item label="排序" name="sort">
+        <a-input-number v-model:value="form.sort" />
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <a-space>
+        <a-button @click="close">
+          取消
+        </a-button>
+        <a-button type="primary" :loading="loading" @click="onSubmit()">
+          提交
+        </a-button>
+      </a-space>
+    </template>
+  </a-drawer>
+</template>

package/src/views/dictionary/components/drawerDictionaryItem.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+import type { FormExpose } from 'ant-design-vue/es/form/Form';
+import { postDictItemSave } from '@/api/modules/configData';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+import { ACTION } from '../enum';
+
+defineOptions({
+  name: 'DrawerDictionaryItem',
+});
+
+const emit = defineEmits(['submit']);
+
+const rules: Record<string, Rule[]> = {
+  dictLabel: [{ required: true, message: '请输入字典项名称', trigger: 'blur' }],
+  dictValue: [{ required: true, message: '请输入字典项值', trigger: 'blur' }],
+};
+const state = reactive({
+  title: '',
+  code: '',
+});
+const [open, setOpen] = useToggle(false);
+const formRef = ref<FormExpose>();
+const form = ref<Partial<API.DictItemSaveDto>>({});
+
+async function onOpen(key: ACTION, code: string, record?: API.DictItemVo) {
+  setOpen(true);
+  state.title = key;
+  state.code = code;
+  if (key === ACTION.EDIT) {
+    form.value = record ?? {};
+  }
+  else {
+    form.value = {};
+    form.value.enable = true;
+    form.value.code = code;
+  }
+}
+const [loading, setLoading] = useToggle(false);
+
+function onSubmit() {
+  formRef.value?.validate().then(() => {
+    setLoading(true);
+    const params: any = { ...form.value };
+    postDictItemSave(params)
+      .then((res: API.ResponseDataString) => {
+        if (res.success) {
+          message.success(`${state.title}成功！`);
+          setOpen(false);
+          emit('submit');
+        }
+      })
+      .finally(() => setLoading(false));
+  });
+}
+
+function close() {
+  setOpen(false);
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    :title="`${state.title}字典数据`"
+    placement="right"
+    :width="520"
+    destroy-on-close
+    :footer-style="{ textAlign: 'right' }"
+    @close="close"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+    >
+      <a-form-item label="字典项名称" name="dictLabel">
+        <a-input v-model:value="form.dictLabel" :maxlength="100" />
+      </a-form-item>
+      <a-form-item label="字典项值" name="dictValue">
+        <a-input v-model:value="form.dictValue" :maxlength="100" />
+      </a-form-item>
+      <a-form-item label="描述" name="description">
+        <a-textarea
+          v-model:value="form.description"
+          :rows="3"
+          show-count
+          :maxlength="200"
+        />
+      </a-form-item>
+      <a-form-item label="排序" name="sort">
+        <a-input-number v-model:value="form.sort" />
+      </a-form-item>
+      <a-form-item label="是否启动" name="enable">
+        <a-switch v-model:checked="form.enable" />
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <a-space>
+        <a-button @click="close">
+          取消
+        </a-button>
+        <a-button type="primary" :loading="loading" @click="onSubmit()">
+          提交
+        </a-button>
+      </a-space>
+    </template>
+  </a-drawer>
+</template>

package/src/views/dictionary/enum.ts

@@ -0,0 +1,8 @@
+export enum ACTION {
+  ADD = '新增',
+  ADDNEXT = '字典数据',
+  /** 编辑 */
+  EDIT = '修改',
+  /** 删除 */
+  REMOVE = '删除',
+}

package/src/views/dictionary/index.vue

@@ -0,0 +1,194 @@
+<script setup lang="tsx">
+import type { ProColumns } from '@pubinfo/pro-components';
+import { deleteDictTypeDeleteById, postDictTypePage } from '@/api/modules/configData';
+import { ProTable } from '@pubinfo/pro-components';
+import { message, Modal } from 'ant-design-vue';
+import DrawerDictionary from './components/drawerDictionary.vue';
+import { ACTION } from './enum';
+
+defineOptions({
+  name: 'Dictionary',
+});
+
+const { auth } = useAuth();
+const tableRef = ref();
+const drawerDictionaryRef = ref();
+const columns: ProColumns<API.DictTypeVo> = [
+  {
+    valueType: 'a-input',
+    width: 50,
+    hideInTable: true,
+    title: '名称或编码',
+    dataIndex: 'searchName',
+    fieldProps: {
+      placeholder: '请输入名称或者编码',
+      allowClear: true,
+    },
+  },
+  {
+    hideInSearch: true,
+    minWidth: 100,
+    title: '类型名称',
+    dataIndex: 'name',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    minWidth: 80,
+    title: '类型编码',
+    dataIndex: 'code',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    minWidth: 100,
+    title: '描述',
+    dataIndex: 'description',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    width: 80,
+    minWidth: 60,
+    title: '排序',
+    dataIndex: 'sort',
+  },
+  {
+    hideInSearch: true,
+    title: '操作',
+    dataIndex: 'action',
+    width: 240,
+    fixed: 'right',
+    hideInTable() {
+      return !auth([
+        'dictionary_data',
+        'dictionary_edit',
+        'dictionary_remove',
+      ]);
+    },
+  },
+];
+
+async function request(params: any) {
+  const { current, pageSize, searchName } = params;
+  const res = await postDictTypePage({
+    currentPage: current,
+    pageSize,
+    name: searchName,
+    doSearchTotal: true,
+  });
+  return {
+    success: res.success,
+    data: res.data?.records ?? [],
+    total: res.data?.total ?? 0,
+  };
+}
+
+const router = useRouter();
+
+function onAction(key: string, record?: API.DictTypeVo): void {
+  switch (key) {
+    case ACTION.ADD:
+      drawerDictionaryRef.value.open(key);
+      break;
+    case ACTION.EDIT:
+      drawerDictionaryRef.value.open(key, record);
+      break;
+    case ACTION.REMOVE:
+      Modal.confirm({
+        title: '删除',
+        content: '确定要删除该类型吗？',
+        onOk() {
+          deleteDictTypeDeleteById({ id: record?.id as string })
+            .then((res: API.ResponseDataVoid) => {
+              if (res.success) {
+                message.success('删除成功');
+                getDictionaryData();
+              }
+            });
+        },
+      });
+      break;
+    case ACTION.ADDNEXT:
+      router.push({
+        name: 'DictionaryItem',
+        params: {
+          id: `${record?.id}`,
+        },
+        query: {
+          code: `${record?.code}`,
+        },
+      });
+      break;
+  }
+}
+
+function getDictionaryData() {
+  tableRef.value.reload();
+}
+</script>
+
+<template>
+  <div
+    py-10px
+    px-10px
+    w-full
+    h-full
+  >
+    <ProTable
+      ref="tableRef"
+      row-key="id"
+      :request="request"
+      :columns="columns"
+      auto-height
+      :scroll="{ x: 1040 }"
+    >
+      <template #toolbar>
+        <a-button v-auth="'dictionary_add'" type="primary" @click="onAction(ACTION.ADD)">
+          <PlusCircleOutlined />
+          {{ ACTION.ADD }}
+        </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'code'">
+          <div class="flex items-center">
+            <PubinfoIcon name="icard" class="text-20px" />
+            <span class="ml-4px">{{ record.code }}</span>
+          </div>
+        </template>
+        <template v-if="column.dataIndex === 'action'">
+          <a-space>
+            <a
+              v-auth="'dictionary_data'"
+              class="flex items-center"
+              @click="onAction(ACTION.ADDNEXT, record)"
+            >
+              <PubinfoIcon name="zddata" class="text-20px" />
+              <span class="ml-4px">{{ ACTION.ADDNEXT }}</span>
+            </a>
+            <a
+              v-auth="'dictionary_edit'"
+              class="flex items-center"
+              @click="onAction(ACTION.EDIT, record)"
+            >
+              <PubinfoIcon name="edit" class="text-base" />
+              <span class="ml-4px">{{ ACTION.EDIT }}</span>
+            </a>
+            <a
+              v-auth="'dictionary_remove'"
+              class="flex items-center text-red-500 hover:cursor-pointer hover:opacity-80"
+              @click="onAction(ACTION.REMOVE, record)"
+            >
+              <PubinfoIcon name="remove" class="text-base" />
+              <span class="ml-4px">{{ ACTION.REMOVE }}</span>
+            </a>
+          </a-space>
+        </template>
+      </template>
+    </ProTable>
+    <DrawerDictionary
+      ref="drawerDictionaryRef"
+      @submit="getDictionaryData()"
+    />
+  </div>
+</template>