create-lumal-admin 0.0.5-beta → 0.0.6-beta

package/templates/features/system/src/modules/system/dictionary/DictionaryItemView.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { SchemaFormItem, SchemaTableColumn } from '@lumal/core/components';
+import type { DictionaryItem } from './types';
+import { LumalPage, LumalSchemaTable } from '@lumal/core/components';
+import { LumalIcon } from '@lumal/icons-vue';
+import { ElAlert, ElButton, ElColorPicker, ElOption, ElSelect } from 'element-plus';
+import { computed, shallowRef, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { permissionStore, service } from '../../../app/services/session';
+import BaseEntityDialog from '../../../shared/components/BaseEntityDialog.vue';
+import { useAsyncData } from '../../../shared/composables/use-async-data';
+import { useEntityEditor } from '../../../shared/composables/use-entity-editor';
+import { statusOptions } from '../../../shared/status';
+import { createDictionaryService, dictionaryItemInput, parseItem } from './api';
+import { dictionaryStore } from './cache';
+
+/***********************分类筛选与实时字典缓存*********************/
+const route = useRoute();
+const typeCode = shallowRef(typeof route.query.typeCode === 'string' ? route.query.typeCode : '');
+const api = createDictionaryService(service, () => dictionaryStore.clearDictionary());
+const types = useAsyncData(api.types, []);
+const state = useAsyncData(() => api.items(typeCode.value), [] as DictionaryItem[]);
+const can = (action: string) => permissionStore.hasPermission(`system:dict:${action}`);
+watch(
+  () => route.query.typeCode,
+  (value) => {
+    typeCode.value = typeof value === 'string' ? value : '';
+  },
+);
+watch(typeCode, () => {
+  void state.reload();
+});
+const editor = useEntityEditor<DictionaryItem, ReturnType<typeof dictionaryItemInput>>({
+  create: api.createItem,
+  update: api.updateItem,
+  remove: api.removeItem,
+  toInput: dictionaryItemInput,
+  reload: state.load,
+});
+const columns: SchemaTableColumn<DictionaryItem>[] = [
+  { field: 'label', label: '显示名称', minWidth: 160 },
+  { field: 'value', label: '字典值', minWidth: 150 },
+  { field: 'typeCode', label: '分类', minWidth: 150 },
+  { field: 'color', label: '颜色', width: 120 },
+  { field: 'order', label: '排序', width: 80 },
+  { field: 'status', label: '状态', options: statusOptions, width: 100 },
+];
+const schemas = computed<SchemaFormItem[]>(() => [
+  {
+    field: 'typeCode',
+    label: '分类',
+    component: 'select',
+    required: true,
+    options: types.data.value.map((row) => ({ label: row.name, value: row.code })),
+  },
+  { field: 'label', label: '显示名称', required: true },
+  { field: 'value', label: '字典值', required: true },
+  { field: 'color', label: '颜色' },
+  { field: 'order', label: '排序', component: 'number', defaultValue: 0 },
+  { field: 'status', label: '状态', component: 'select', options: statusOptions, defaultValue: 'enabled' },
+]);
+</script>
+
+<template>
+  <LumalPage class="lumal-admin-page" title="字典项管理" no-padding>
+    <ElAlert
+      v-if="editor.error.value || types.error.value"
+      :title="editor.error.value || types.error.value"
+      type="error"
+      :closable="false"
+    >
+      <ElButton v-if="types.error.value" link @click="types.reload"> 重试分类加载 </ElButton>
+    </ElAlert>
+    <LumalSchemaTable
+      :rows="state.data.value"
+      :columns="columns"
+      :loading="state.loading.value"
+      :error="state.error.value"
+      :action-width="160"
+      @retry="state.reload"
+    >
+      <template #toolbar>
+        <ElSelect v-model="typeCode" clearable aria-label="字典分类" placeholder="全部分类" style="width: 240px">
+          <ElOption v-for="type in types.data.value" :key="type.id" :label="type.name" :value="type.code" />
+        </ElSelect>
+        <ElButton
+          v-if="can('create')"
+          type="primary"
+          :disabled="!!types.error.value || !types.data.value.length"
+          @click="
+            editor.openCreate({
+              typeCode: typeCode || types.data.value[0]?.code,
+              status: 'enabled',
+              order: 0,
+              color: '',
+            })
+          "
+        >
+          新增字典项
+        </ElButton>
+      </template>
+      <template #toolbar-tools>
+        <ElButton title="重新加载" aria-label="重新加载" @click="state.reload">
+          <LumalIcon name="lumal:refresh" />
+        </ElButton>
+      </template>
+      <template #table-color="{ value }">
+        <span :style="{ color: String(value || 'inherit') }">{{ value || '-' }}</span>
+      </template>
+      <template #actions="{ row }">
+        <ElButton v-if="can('update')" link @click="editor.openEdit(parseItem(row))"> 编辑 </ElButton>
+        <ElButton
+          v-if="can('delete')"
+          link
+          type="danger"
+          :disabled="editor.saving.value"
+          @click="editor.remove(parseItem(row))"
+        >
+          删除
+        </ElButton>
+      </template>
+    </LumalSchemaTable>
+    <BaseEntityDialog
+      v-model:visible="editor.visible.value"
+      v-model:model="editor.model.value"
+      :title="editor.editing.value ? '编辑字典项' : '新增字典项'"
+      :schemas="schemas"
+      :editing="!!editor.editing.value"
+      :saving="editor.saving.value"
+      :error="editor.error.value"
+      @submit="editor.submit"
+    >
+      <template #field-color="{ value }">
+        <ElColorPicker
+          :model-value="String(value || '')"
+          @update:model-value="editor.model.value = { ...editor.model.value, color: $event || '' }"
+        />
+      </template>
+    </BaseEntityDialog>
+  </LumalPage>
+</template>

package/templates/features/system/src/modules/system/dictionary/DictionaryTypeView.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import type { SchemaFormItem, SchemaTableColumn } from '@lumal/core/components';
+import type { DictionaryType } from './types';
+import { LumalPage, LumalSchemaTable } from '@lumal/core/components';
+import { LumalIcon } from '@lumal/icons-vue';
+import { ElAlert, ElButton, ElInput } from 'element-plus';
+import { computed, shallowRef } from 'vue';
+import { useRouter } from 'vue-router';
+import { permissionStore, service } from '../../../app/services/session';
+import BaseEntityDialog from '../../../shared/components/BaseEntityDialog.vue';
+import { useAsyncData } from '../../../shared/composables/use-async-data';
+import { useEntityEditor } from '../../../shared/composables/use-entity-editor';
+import { statusOptions } from '../../../shared/status';
+import { createDictionaryService, dictionaryTypeInput, parseType } from './api';
+import { dictionaryStore } from './cache';
+
+/***********************字典分类与关联项入口*********************/
+const api = createDictionaryService(service, () => dictionaryStore.clearDictionary());
+const state = useAsyncData(api.types, [] as DictionaryType[]);
+const keyword = shallowRef('');
+const router = useRouter();
+const can = (action: string) => permissionStore.hasPermission(`system:dict:${action}`);
+const displayed = computed(() => state.data.value.filter((row) => `${row.name} ${row.code}`.includes(keyword.value)));
+const editor = useEntityEditor<DictionaryType, ReturnType<typeof dictionaryTypeInput>>({
+  create: api.createType,
+  update: api.updateType,
+  remove: api.removeType,
+  toInput: dictionaryTypeInput,
+  reload: state.load,
+  removeMessage: (row) => `删除分类「${row.name}」及其所有字典项？`,
+});
+const columns: SchemaTableColumn<DictionaryType>[] = [
+  { field: 'name', label: '字典名称', minWidth: 160 },
+  { field: 'code', label: '编码', minWidth: 150 },
+  { field: 'status', label: '状态', options: statusOptions, width: 100 },
+  { field: 'description', label: '说明', minWidth: 200 },
+];
+const schemas: SchemaFormItem[] = [
+  { field: 'name', label: '字典名称', required: true },
+  {
+    field: 'code',
+    label: '编码',
+    required: true,
+    editDisabled: true,
+    rules: [{ pattern: /^[a-z][\w-]*$/, message: '使用字母开头的编码' }],
+  },
+  { field: 'status', label: '状态', component: 'select', options: statusOptions, defaultValue: 'enabled' },
+  { field: 'description', label: '说明', component: 'textarea', span: 24 },
+];
+</script>
+
+<template>
+  <LumalPage class="lumal-admin-page" title="字典分类" no-padding>
+    <ElAlert v-if="editor.error.value" :title="editor.error.value" type="error" :closable="false" />
+    <LumalSchemaTable
+      :rows="displayed"
+      :columns="columns"
+      :loading="state.loading.value"
+      :error="state.error.value"
+      :action-width="240"
+      @retry="state.reload"
+    >
+      <template #toolbar>
+        <ElInput
+          v-model="keyword"
+          aria-label="搜索字典分类"
+          placeholder="搜索名称或编码"
+          clearable
+          style="max-width: 260px"
+        />
+        <ElButton v-if="can('create')" type="primary" @click="editor.openCreate({ status: 'enabled' })">
+          新增分类
+        </ElButton>
+      </template>
+      <template #toolbar-tools>
+        <ElButton title="重新加载" aria-label="重新加载" @click="state.reload">
+          <LumalIcon name="lumal:refresh" />
+        </ElButton>
+      </template>
+      <template #actions="{ row }">
+        <ElButton link @click="router.push({ path: '/system/dictionaries/items', query: { typeCode: row.code } })">
+          字典项
+        </ElButton>
+        <ElButton v-if="can('update')" link @click="editor.openEdit(parseType(row))"> 编辑 </ElButton>
+        <ElButton
+          v-if="can('delete')"
+          link
+          type="danger"
+          :disabled="editor.saving.value"
+          @click="editor.remove(parseType(row))"
+        >
+          删除
+        </ElButton>
+      </template>
+    </LumalSchemaTable>
+    <BaseEntityDialog
+      v-model:visible="editor.visible.value"
+      v-model:model="editor.model.value"
+      :title="editor.editing.value ? '编辑分类' : '新增分类'"
+      :schemas="schemas"
+      :editing="!!editor.editing.value"
+      :saving="editor.saving.value"
+      :error="editor.error.value"
+      @submit="editor.submit"
+    />
+  </LumalPage>
+</template>

package/templates/features/system/src/modules/system/dictionary/api.ts

@@ -0,0 +1,61 @@
+import type { SchemaFormModel } from '@lumal/core/components';
+import type { BusinessTransport } from '../../../app/services/contracts';
+import type { DictionaryItem, DictionaryItemInput, DictionaryType, DictionaryTypeInput } from './types';
+import { formStatus, integer, object, rows, text } from '../../../shared/api';
+
+export function dictionaryTypeInput(model: SchemaFormModel): DictionaryTypeInput {
+  return {
+    name: text(model.name, '字典名称', true),
+    code: text(model.code, '字典编码', true),
+    description: text(model.description, '说明'),
+    status: formStatus(model),
+  };
+}
+export function dictionaryItemInput(model: SchemaFormModel): DictionaryItemInput {
+  const color = text(model.color, '颜色');
+  if (color && !/^#[\da-f]{6}$/i.test(color)) throw new Error('颜色必须是六位十六进制值');
+  return {
+    typeCode: text(model.typeCode, '字典分类', true),
+    label: text(model.label, '显示名称', true),
+    value: text(model.value, '字典值', true),
+    color,
+    order: integer(model.order ?? 0),
+    status: formStatus(model),
+  };
+}
+export function parseType(value: unknown): DictionaryType {
+  const raw = object(value);
+  return { ...dictionaryTypeInput(raw), id: text(raw.id, '字典 ID', true) };
+}
+export function parseItem(value: unknown): DictionaryItem {
+  const raw = object(value);
+  return { ...dictionaryItemInput(raw), id: text(raw.id, '字典项 ID', true) };
+}
+export function createDictionaryService(transport: BusinessTransport, invalidate: () => void = () => {}) {
+  async function mutation<T>(
+    method: 'POST' | 'PUT' | 'DELETE',
+    path: string,
+    input: object | undefined,
+    parse: (value: unknown) => T,
+  ) {
+    const result = await transport.request(method, path, { body: input });
+    // 先使旧请求失效再刷新消费者，防止旧字典响应回填。
+    invalidate();
+    return parse(result);
+  }
+  return {
+    types: async () => rows(await transport.request('GET', '/system/dictionaries/types'), parseType),
+    items: async (typeCode: string) =>
+      rows(await transport.request('GET', '/system/dictionaries/items', { query: { typeCode } }), parseItem),
+    createType: (input: DictionaryTypeInput) => mutation('POST', '/system/dictionaries/types', input, parseType),
+    updateType: (id: string, input: DictionaryTypeInput) =>
+      mutation('PUT', `/system/dictionaries/types/${encodeURIComponent(id)}`, input, parseType),
+    removeType: (id: string) =>
+      mutation('DELETE', `/system/dictionaries/types/${encodeURIComponent(id)}`, undefined, () => undefined),
+    createItem: (input: DictionaryItemInput) => mutation('POST', '/system/dictionaries/items', input, parseItem),
+    updateItem: (id: string, input: DictionaryItemInput) =>
+      mutation('PUT', `/system/dictionaries/items/${encodeURIComponent(id)}`, input, parseItem),
+    removeItem: (id: string) =>
+      mutation('DELETE', `/system/dictionaries/items/${encodeURIComponent(id)}`, undefined, () => undefined),
+  };
+}

package/templates/features/system/src/modules/system/dictionary/cache.ts

@@ -0,0 +1,9 @@
+import { createDictionaryStore } from '@lumal/core/dictionary';
+import { application, service } from '../../../app/services/session';
+
+export const dictionaryStore = createDictionaryStore({
+  fetcher: async (code) => ({
+    items: await service.request('GET', `/system/dictionaries/options/${encodeURIComponent(code)}`),
+  }),
+});
+application.onReset(() => dictionaryStore.clearDictionary());

package/templates/features/system/src/modules/system/dictionary/routes.ts

@@ -0,0 +1,32 @@
+import type { AppModule } from '../../../app/module';
+
+export const menus: AppModule['menus'] = [
+  {
+    path: '/system/dictionaries/types',
+    name: 'DictionaryTypes',
+    component: 'system/dictionaries/types',
+    meta: { title: '字典分类', authority: ['system:dict:list'], keepAlive: true, order: 5 },
+  },
+  {
+    path: '/system/dictionaries/items',
+    name: 'DictionaryItems',
+    component: 'system/dictionaries/items',
+    meta: { title: '字典项管理', authority: ['system:dict:list'], keepAlive: true, order: 6 },
+  },
+];
+export const views: AppModule['views'] = {
+  'system/dictionaries/types': () => import('./DictionaryTypeView.vue'),
+  'system/dictionaries/items': () => import('./DictionaryItemView.vue'),
+};
+export const permissions: AppModule['permissions'] = [
+  {
+    id: 'system-dictionary',
+    label: '字典管理',
+    children: [
+      { id: 'system:dict:list', label: '查询字典', permission: 'system:dict:list' },
+      { id: 'system:dict:create', label: '新增字典', permission: 'system:dict:create' },
+      { id: 'system:dict:update', label: '修改字典', permission: 'system:dict:update' },
+      { id: 'system:dict:delete', label: '删除字典', permission: 'system:dict:delete' },
+    ],
+  },
+];

package/templates/features/system/src/modules/system/dictionary/types.ts

@@ -0,0 +1,22 @@
+import type { Status } from '../../../shared/api';
+
+export interface DictionaryTypeInput {
+  name: string;
+  code: string;
+  description: string;
+  status: Status;
+}
+export interface DictionaryType extends DictionaryTypeInput {
+  id: string;
+}
+export interface DictionaryItemInput {
+  typeCode: string;
+  label: string;
+  value: string;
+  color: string;
+  order: number;
+  status: Status;
+}
+export interface DictionaryItem extends DictionaryItemInput {
+  id: string;
+}