@pubinfo/module-rbac 2.0.0-beta.3

package/src/views/page_w_setting/index.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { postSysconfigAddOrEidtSysThemeStyleConfig } from '@/api/modules/configData';
+import { useSettingsStore } from '@/stores';
+import { message } from 'ant-design-vue';
+
+defineOptions({
+  name: 'PageWSetting',
+});
+
+const settingsStore = useSettingsStore();
+
+const widthMode = ref(settingsStore.globalSettings.layout.widthMode);
+
+const widthModeList = reactive<
+  {
+    describe: string
+    active: Settings.layout['widthMode']
+    class: string
+  }[]
+>([
+  {
+    describe: '自适应',
+    active: 'adaption',
+    class: 'mode-adaption',
+  },
+  {
+    describe: '自适应 (有最小宽度)',
+    active: 'adaption-min-width',
+    class: 'mode-adaption-min-width',
+  },
+  {
+    describe: '定宽居中',
+    active: 'center',
+    class: 'mode-center',
+  },
+  {
+    describe: '定宽居中 (有最大宽度)',
+    active: 'center-max-width',
+    class: 'mode-center-max-width',
+  },
+]);
+
+function clickHandle(item: Settings.layout['widthMode']) {
+  if (item) {
+    widthMode.value = item;
+    settingsStore.globalSettings.layout.widthMode = item;
+    const jsonStr = JSON.stringify({
+      layout: {
+        widthMode: item,
+      },
+    });
+    postSysconfigAddOrEidtSysThemeStyleConfig({ content: jsonStr }).then((res: API.ResponseDataBoolean) => {
+      if (res.success) {
+        message.success('设置成功');
+      }
+    });
+  }
+}
+</script>
+
+<template>
+  <div
+    w-full
+    h-full
+    p-10px
+  >
+    <div class="w-full h-full bg-white overflow-y-auto p-10px flex flex-col box-border dark:bg-[#141414]">
+      <div class="bg-[#F0F4FF] h-[38px] pl-[16px] flex flex-row items-center dark:bg-[#32353B]">
+        <PubinfoIcon name="icon_page_size" class="text-base mr-[6px]" :size="22" />
+        <span class="text-[16px] text-[#1d2129] dark:text-[#C9CDD4]">页宽模式</span>
+      </div>
+      <div class="mt-[15px] flex-1 flex flex-row">
+        <div class="flex-none w-[110px] text-right font-400 text-[#4e5969] text-[14px] pt-10px dark:text-[#C9CDD4]">
+          模式选择
+        </div>
+        <div class="flex-auto grid grid-cols-3 gap-[20px] px-30px w-full h-0 max-w-1500px" aspect="[3/2]">
+          <div
+            v-for="mode in widthModeList"
+            :key="mode.active"
+            class="item dark:bg-[#3A3E43]"
+            :class="[widthMode === mode.active ? 'active' : '', `item-${mode.active}`]"
+            aspect="[9/6]"
+            @click="clickHandle(mode.active)"
+          >
+            <div class="text-[#4E5969] text-[14px] dark:text-[#C9CDD4]">
+              {{ mode.describe }}
+            </div>
+            <div class="my-12px w-48px h-32px mode" />
+            <div class="flex-1 w-[75%] rounded-[8px] jb py-[10px] flex justify-center">
+              <div class="layout-demo" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.item {
+  display: flex;
+  flex-direction: column;
+  place-items: center center;
+  padding-top: 26px;
+  cursor: pointer;
+  background: linear-gradient(180deg, var(--g-bg) 0%, var(--g-bg) 100%);
+  border: 1px solid var(--g-tabbar-tab-hover-bg);
+  border-radius: 8px;
+
+  .jb {
+    background: linear-gradient(180deg, var(--g-container-bg) 0%, #fff0 100%);
+
+    .layout-demo {
+      width: 70%;
+    }
+  }
+
+  &-adaption {
+    .mode {
+      background: url("@/assets/images/page-width/icon_auto.webp") no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .layout-demo {
+      background: url("@/assets/images/page-width/auto.webp") no-repeat;
+      background-size: 100%;
+    }
+  }
+
+  &-adaption-min-width {
+    .mode {
+      background: url("@/assets/images/page-width/icon_auto_min_w.webp") no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .layout-demo {
+      background: url("@/assets/images/page-width/auto_min_w.webp") no-repeat;
+      background-size: 100%;
+    }
+  }
+
+  &-center {
+    .mode {
+      background: url("@/assets/images/page-width/icon_middle.webp") no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .layout-demo {
+      background: url("@/assets/images/page-width/middle.webp") no-repeat;
+      background-size: 100%;
+    }
+  }
+
+  &-center-max-width {
+    .mode {
+      background: url("@/assets/images/page-width/icon_middle_max_w.webp") no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .layout-demo {
+      background: url("@/assets/images/page-width/middle_max_w.webp") no-repeat;
+      background-size: 100%;
+    }
+  }
+
+  &.active {
+    border: 2.6px solid rgb(var(--ui-primary));
+    border-radius: 8px;
+    box-shadow: 0 2.6px 13px 0 #59626940;
+  }
+}
+
+[data-theme="dark"],
+[data-theme="dracula"],
+[data-theme="luxury"],
+[data-theme="stone"],
+[data-theme="night"],
+[data-theme="synthwave"] {
+  .item {
+    background: #3a3e43;
+    border: 1px solid transparent;
+    // .jb {
+    //   background: linear-gradient(180deg, #ffffff1a 0%, #ffffff00 100%);
+    // }
+    &-adaption {
+      .mode {
+        background: url("@/assets/images/page-width/icon_auto_dark.webp") no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .layout-demo {
+        background: url("@/assets/images/page-width/auto_dark.webp") no-repeat;
+        background-size: 100%;
+      }
+    }
+
+    &-adaption-min-width {
+      .mode {
+        background: url("@/assets/images/page-width/icon_auto_min_w_dark.webp") no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .layout-demo {
+        background: url("@/assets/images/page-width/auto_min_w_dark.webp") no-repeat;
+        background-size: 100%;
+      }
+    }
+
+    &-center {
+      .mode {
+        background: url("@/assets/images/page-width/icon_middle_dark.webp") no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .layout-demo {
+        background: url("@/assets/images/page-width/middle_dark.webp") no-repeat;
+        background-size: 100%;
+      }
+    }
+
+    &-center-max-width {
+      .mode {
+        background: url("@/assets/images/page-width/icon_middle_max_w_dark.webp") no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .layout-demo {
+        background: url("@/assets/images/page-width/middle_max_w_dark.webp") no-repeat;
+        background-size: 100%;
+      }
+    }
+
+    &.active {
+      border: 2.6px solid rgb(var(--ui-primary));
+    }
+  }
+}
+</style>

package/src/views/position/components/drawerPosition.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+import type { FormExpose } from 'ant-design-vue/es/form/Form';
+import { getDictItemList } from '@/api/modules/configData';
+import { getRbacPostDetailById, postRbacPostSave } from '@/api/modules/rbac';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+import { ACTION } from '../enum';
+
+defineOptions({
+  name: 'DrawerPosition',
+});
+
+const emit = defineEmits(['submit']);
+
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '请输入岗位名称', trigger: 'blur' },
+    { max: 64, message: '长度不能超过64位', trigger: 'change' }],
+  code: [{ required: true, message: '请输入岗位编码', trigger: 'blur' },
+    { max: 32, message: '长度不能超过32位', trigger: 'change' }],
+  type: [{ required: true, message: '请选择岗位类别', trigger: ['blur', 'change'] }],
+};
+const state = reactive({
+  title: '',
+  type: '',
+});
+const [open, setOpen] = useToggle(false);
+const typeOptions: Ref<{ label?: string, value?: string }[] | undefined> = ref([]);
+
+getDictItemList({ dictCode: 'positionType' }).then((res: API.ResponseDataListDictItemVo) => {
+  typeOptions.value = res.data?.map((e) => {
+    return {
+      label: e.dictLabel,
+      value: e.dictValue,
+    };
+  });
+});
+
+const formRef = ref<FormExpose>();
+const form = ref<API.PubPostDto>({ enable: true });
+async function onOpen(key: ACTION, record?: API.PubPost) {
+  setOpen(true);
+  state.title = key;
+  if (key === ACTION.EDIT) {
+    const res = await getRbacPostDetailById({ id: record?.id as string });
+    if (res.success) {
+      form.value = res.data ?? {};
+    }
+  }
+  else {
+    form.value = { enable: true };
+  }
+}
+
+const [loading, setLoading] = useToggle(false);
+
+function onSubmit() {
+  formRef.value?.validate().then(() => {
+    setLoading(true);
+    const params: API.PubPostDto = { ...form.value };
+    postRbacPostSave(params)
+      .then((res: API.ResponseDataString) => {
+        if (res.success) {
+          message.success(`${state.title}成功！`);
+          setOpen(false);
+          emit('submit');
+        }
+      })
+      .finally(() => setLoading(false));
+  });
+}
+function close() {
+  setOpen(false);
+  form.value = { enable: true };
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    :title="`${state.title}岗位`"
+    placement="right"
+    :width="600"
+    destroy-on-close
+    :footer-style="{ textAlign: 'right' }"
+    @close="close"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ span: 4 }"
+      :label-wrap="true"
+    >
+      <a-form-item label="岗位名称" name="name">
+        <a-input v-model:value="form.name" :maxlength="64" />
+      </a-form-item>
+      <a-form-item label="岗位编码" name="code">
+        <a-input v-model:value="form.code" :disabled="state.title === ACTION.EDIT" :maxlength="32" />
+      </a-form-item>
+      <a-form-item label="岗位类别" name="type">
+        <a-select v-model:value="form.type" :options="typeOptions" />
+      </a-form-item>
+      <a-form-item label="描述" name="description">
+        <a-textarea
+          v-model:value="form.description"
+          :rows="3"
+          show-count
+          :maxlength="120"
+        />
+      </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/position/enum.ts

@@ -0,0 +1,8 @@
+export enum ACTION {
+  /** 新增 */
+  ADD = '新增',
+  /** 编辑 */
+  EDIT = '编辑',
+  /** 删除 */
+  REMOVE = '删除',
+}

package/src/views/position/index.vue

@@ -0,0 +1,167 @@
+<script setup lang="tsx">
+import type { ProColumns } from '@pubinfo/pro-components';
+import { deleteRbacPostDeleteById, postRbacPostFindPage } from '@/api/modules/rbac';
+import { ProTable } from '@pubinfo/pro-components';
+import { Badge, message, Modal } from 'ant-design-vue';
+import DrawerPosition from './components/drawerPosition.vue';
+import { ACTION } from './enum';
+
+defineOptions({
+  name: 'PositionManage',
+});
+const { auth } = useAuth();
+
+const tableRef = ref<typeof ProTable>();
+const drawerPositionRef = ref<InstanceType<typeof DrawerPosition>>();
+
+function getPositionData() {
+  tableRef.value?.reload();
+}
+
+async function request(params: any) {
+  const { current, pageSize, ...rest } = params;
+  const res = await postRbacPostFindPage({
+    currentPage: current,
+    pageSize,
+    ...rest,
+  });
+  return {
+    success: res.success,
+    data: res.data?.records ?? [],
+    total: res.data?.total ?? 0,
+  };
+}
+const columns: ProColumns<API.PubPost> = [
+  {
+    valueType: 'a-input',
+    bind: 'value',
+    minWidth: 200,
+    title: '岗位名称',
+    dataIndex: 'name',
+    ellipsis: true,
+    fieldProps: {
+      placeholder: '请输入岗位名称',
+      allowClear: true,
+    },
+  },
+  {
+    hideInSearch: true,
+    minWidth: 100,
+    title: '岗位编码',
+    dataIndex: 'code',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    minWidth: 100,
+    title: '岗位类别',
+    dataIndex: 'type',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    minWidth: 100,
+    title: '是否启用',
+    dataIndex: 'enable',
+    customRender: ({ text }: { text: string }) => {
+      return (
+        text
+          ? <Badge status="success" text="启用" />
+          : <Badge status="error" text="禁用" />
+      );
+    },
+  },
+  {
+    hideInSearch: true,
+    minWidth: 100,
+    title: '描述',
+    dataIndex: 'description',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    width: 160,
+    title: '操作',
+    dataIndex: 'action',
+    fixed: 'right',
+    hideInTable() {
+      return !auth([
+        'region_add_child',
+        'region_edit',
+        'region_remove',
+      ]);
+    },
+  },
+];
+
+function onAction(key: string, record?: API.PubPost): void {
+  switch (key) {
+    case ACTION.EDIT:
+      drawerPositionRef.value?.open(key, record);
+      break;
+    case ACTION.ADD:
+      drawerPositionRef.value?.open(key);
+      break;
+    case ACTION.REMOVE:
+      Modal.confirm({
+        title: '删除',
+        content: '确定要删除该岗位吗？',
+        onOk() {
+          deleteRbacPostDeleteById({ id: record?.id as string }).then((res: API.ResponseDataVoid) => {
+            if (res.success) {
+              message.success('删除成功');
+              getPositionData();
+            }
+          });
+        },
+      });
+      break;
+  }
+}
+</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: 1100 }"
+    >
+      <template #toolbar>
+        <a-button v-auth="'position_add'" type="primary" @click="onAction(ACTION.ADD)">
+          <PlusCircleOutlined />
+          {{ ACTION.ADD }}
+        </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'type'">
+          <div class="flex items-center">
+            <PubinfoIcon name="icon_position_type" class="text-20px" />
+            <span class="ml-4px">{{ record.type }}</span>
+          </div>
+        </template>
+        <template v-if="column.dataIndex === 'action'">
+          <a-space>
+            <a v-auth="'position_edit'" class="flex items-center" @click="onAction(ACTION.EDIT, record)">
+              <PubinfoIcon name="edit" class="text-base" />
+              <span class="ml-4px">{{ ACTION.EDIT }}</span>
+            </a>
+            <span v-auth="'position_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>
+            </span>
+          </a-space>
+        </template>
+      </template>
+    </ProTable>
+    <DrawerPosition ref="drawerPositionRef" @submit="getPositionData()" />
+  </div>
+</template>

package/src/views/region/components/drawerRegion.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+import type { FormExpose } from 'ant-design-vue/es/form/Form';
+import { getRegionGetRegionDetailByCode, postRegionAddRegion, postRegionUpdateRegion } from '@/api/modules/assist';
+import { getDictItemList } from '@/api/modules/configData';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+import { ACTION } from '../enum';
+
+defineOptions({
+  name: 'DrawerRegion',
+});
+
+const emit = defineEmits(['submit']);
+
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '请输入区域名称', trigger: 'blur' },
+    { max: 128, message: '长度不能超过128位', trigger: 'change' }],
+  type: [{ required: true, message: '请选择区域范围', trigger: 'blur' }],
+  regionCode: [{ required: true, message: '请输入区域编码', trigger: 'blur' },
+    { max: 16, message: '长度不能超过16位', trigger: 'change' }],
+  code: [{ required: true, message: '请输入行政区划编码', trigger: 'blur' },
+    { max: 16, message: '长度不能超过16位', trigger: 'change' }],
+};
+
+const state = reactive({
+  title: '',
+  type: '',
+});
+const [open, setOpen] = useToggle(false);
+const formRef = ref<FormExpose>();
+
+const form = ref<Partial<API.PubRegionAddDto & { parentName: string }>>({ parentId: '' });
+
+const rangeOptions: Ref<{ label?: string, value?: string }[] | undefined> = ref([]);
+getDictItemList({ dictCode: 'regionType' }).then((res: API.ResponseDataListDictItemVo) => {
+  rangeOptions.value = res.data?.map((e) => {
+    return {
+      label: e.dictLabel,
+      value: e.dictValue,
+    };
+  });
+});
+
+async function onOpen(key: ACTION, record?: API.PubRegion) {
+  setOpen(true);
+  state.title = key;
+  if (key === ACTION.EDIT) {
+    const res = await getRegionGetRegionDetailByCode({ code: record?.code as string });
+    if (res.success) {
+      form.value = res.data ?? {};
+    }
+  }
+  else if (key === ACTION.ADDNEXT) {
+    form.value = {
+      parentName: record?.name,
+      parentId: record?.id,
+    };
+  }
+  else {
+    form.value = {
+      parentId: '',
+    };
+  }
+}
+
+const [loading, setLoading] = useToggle(false);
+function onSubmit() {
+  const request = state.title === ACTION.EDIT ? postRegionUpdateRegion : postRegionAddRegion;
+  formRef.value?.validate().then(() => {
+    setLoading(true);
+    const params: any = { ...form.value };
+    request(params)
+      .then((res: API.ResponseDataBoolean) => {
+        if (res.success) {
+          message.success(`${state.title}成功！`);
+          setOpen(false);
+          emit('submit');
+        }
+      })
+      .finally(() => setLoading(false));
+  });
+}
+function close() {
+  form.value = {
+    parentId: '',
+  };
+  setOpen(false);
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    :title="`${state.title}区域`"
+    placement="right"
+    :width="600"
+    destroy-on-close
+    :footer-style="{ textAlign: 'right' }"
+    @close="close"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+      :label-wrap="true"
+    >
+      <a-form-item v-if="form.parentId !== '' && form.parentId !== '0'" label="上级区域">
+        {{ form.parentName }}
+      </a-form-item>
+      <a-form-item label="区域名称" name="name">
+        <a-input v-model:value="form.name" :maxlength="128" />
+      </a-form-item>
+      <a-form-item label="区域范围" name="type">
+        <a-select v-model:value="form.type" :options="rangeOptions" />
+      </a-form-item>
+      <a-form-item label="区域编码" name="regionCode">
+        <a-input v-model:value="form.regionCode" :maxlength="16" />
+      </a-form-item>
+      <a-form-item label="行政区划编码" name="code">
+        <a-input v-model:value="form.code" :disabled="state.title === ACTION.EDIT" :maxlength="16" />
+      </a-form-item>
+      <a-form-item label="排序">
+        <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>