From 3f9b5827be302ef7390c7d74872c670f6a25bb99 Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Thu, 26 Dec 2024 13:26:30 +0800
Subject: [PATCH] feat(settings): Improve custom Settings.

---
 .../@abp/settings/src/api/definitions.ts      |  12 +-
 .../definitions/SettingDefinitionModal.vue    | 233 +++++++++++++++++-
 .../definitions/SettingDefinitionTable.vue    | 216 +++++++++++++++-
 3 files changed, 452 insertions(+), 9 deletions(-)

diff --git a/apps/vben5/packages/@abp/settings/src/api/definitions.ts b/apps/vben5/packages/@abp/settings/src/api/definitions.ts
index b2eb6c6e8..65c5d0fcd 100644
--- a/apps/vben5/packages/@abp/settings/src/api/definitions.ts
+++ b/apps/vben5/packages/@abp/settings/src/api/definitions.ts
@@ -14,7 +14,9 @@ import { requestClient } from '@abp/request';
  * @param name 设置名称
  */
 export function deleteApi(name: string): Promise<void> {
-  return requestClient.delete(`/api/permission-management/definitions/${name}`);
+  return requestClient.delete(
+    `/api/setting-management/settings/definitions/${name}`,
+  );
 }
 
 /**
@@ -24,7 +26,7 @@ export function deleteApi(name: string): Promise<void> {
  */
 export function getApi(name: string): Promise<SettingDefinitionDto> {
   return requestClient.get<SettingDefinitionDto>(
-    `/api/permission-management/definitions/${name}`,
+    `/api/setting-management/settings/definitions/${name}`,
   );
 }
 
@@ -37,7 +39,7 @@ export function getListApi(
   input?: SettingDefinitionGetListInput,
 ): Promise<ListResultDto<SettingDefinitionDto>> {
   return requestClient.get<ListResultDto<SettingDefinitionDto>>(
-    `/api/permission-management/definitions`,
+    `/api/setting-management/settings/definitions`,
     {
       params: input,
     },
@@ -53,7 +55,7 @@ export function createApi(
   input: SettingDefinitionCreateDto,
 ): Promise<SettingDefinitionDto> {
   return requestClient.post<SettingDefinitionDto>(
-    '/api/permission-management/definitions',
+    '/api/setting-management/settings/definitions',
     input,
   );
 }
@@ -69,7 +71,7 @@ export function updateApi(
   input: SettingDefinitionUpdateDto,
 ): Promise<SettingDefinitionDto> {
   return requestClient.put<SettingDefinitionDto>(
-    `/api/permission-management/definitions/${name}`,
+    `/api/setting-management/settings/definitions/${name}`,
     input,
   );
 }
diff --git a/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionModal.vue b/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionModal.vue
index 1017376d1..475674827 100644
--- a/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionModal.vue
+++ b/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionModal.vue
@@ -1,7 +1,236 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { PropertyInfo } from '@abp/ui';
+import type { FormInstance } from 'ant-design-vue';
+
+import type { SettingDefinitionDto } from '../../types/definitions';
+
+import {
+  defineEmits,
+  defineOptions,
+  reactive,
+  ref,
+  toValue,
+  useTemplateRef,
+} from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { LocalizableInput, PropertyTable } from '@abp/ui';
+import {
+  Checkbox,
+  Form,
+  Input,
+  message,
+  Select,
+  Tabs,
+  Textarea,
+} from 'ant-design-vue';
+
+import { createApi, getApi, updateApi } from '../../api/definitions';
+
+defineOptions({
+  name: 'SettingDefinitionModal',
+});
+const emits = defineEmits<{
+  (event: 'change', data: SettingDefinitionDto): void;
+}>();
+
+const FormItem = Form.Item;
+const TabPane = Tabs.TabPane;
+
+type TabKeys = 'basic' | 'props';
+
+const defaultModel = {} as SettingDefinitionDto;
+
+const isEditModel = ref(false);
+const activeTab = ref<TabKeys>('basic');
+const form = useTemplateRef<FormInstance>('form');
+const formModel = ref<SettingDefinitionDto>({ ...defaultModel });
+const providerOptions = reactive([
+  { label: $t('AbpSettingManagement.Providers:Default'), value: 'D' },
+  { label: $t('AbpSettingManagement.Providers:Configuration'), value: 'C' },
+  { label: $t('AbpSettingManagement.Providers:Global'), value: 'G' },
+  { label: $t('AbpSettingManagement.Providers:Tenant'), value: 'T' },
+  { label: $t('AbpSettingManagement.Providers:User'), value: 'U' },
+]);
+
+const [Modal, modalApi] = useVbenModal({
+  class: 'w-1/2',
+  draggable: true,
+  fullscreenButton: false,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    await form.value?.validate();
+    const api = isEditModel.value
+      ? updateApi(formModel.value.name, toValue(formModel))
+      : createApi(toValue(formModel));
+    modalApi.setState({ confirmLoading: true, loading: true });
+    api
+      .then((res) => {
+        message.success($t('AbpUi.SavedSuccessfully'));
+        emits('change', res);
+        modalApi.close();
+      })
+      .finally(() => {
+        modalApi.setState({ confirmLoading: false, loading: false });
+      });
+  },
+  onOpenChange: async (isOpen: boolean) => {
+    if (isOpen) {
+      isEditModel.value = false;
+      activeTab.value = 'basic';
+      formModel.value = { ...defaultModel };
+      modalApi.setState({
+        showConfirmButton: true,
+        title: $t('AbpSettingManagement.Definition:AddNew'),
+      });
+      try {
+        modalApi.setState({ loading: true });
+        const { name } = modalApi.getData<SettingDefinitionDto>();
+        name && (await onGet(name));
+      } finally {
+        modalApi.setState({ loading: false });
+      }
+    }
+  },
+  title: $t('AbpSettingManagement.Definition:AddNew'),
+});
+async function onGet(name: string) {
+  isEditModel.value = true;
+  const dto = await getApi(name);
+  formModel.value = dto;
+  modalApi.setState({
+    showConfirmButton: !dto.isStatic,
+    title: `${$t('AbpSettingManagement.Settings')} - ${dto.name}`,
+  });
+}
+function onPropChange(prop: PropertyInfo) {
+  formModel.value.extraProperties ??= {};
+  formModel.value.extraProperties[prop.key] = prop.value;
+}
+function onPropDelete(prop: PropertyInfo) {
+  formModel.value.extraProperties ??= {};
+  delete formModel.value.extraProperties[prop.key];
+}
+</script>
 
 <template>
-  <div></div>
+  <Modal>
+    <Form
+      ref="form"
+      :label-col="{ span: 6 }"
+      :model="formModel"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Tabs v-model:active-key="activeTab">
+        <!-- 基本信息 -->
+        <TabPane key="basic" :tab="$t('AbpSettingManagement.BasicInfo')">
+          <FormItem
+            :label="$t('AbpSettingManagement.DisplayName:Name')"
+            name="name"
+            required
+          >
+            <Input
+              v-model:value="formModel.name"
+              :disabled="formModel.isStatic"
+              autocomplete="off"
+            />
+          </FormItem>
+          <FormItem
+            :label="$t('AbpSettingManagement.DisplayName:DefaultValue')"
+            name="defaultValue"
+          >
+            <Textarea
+              v-model:value="formModel.defaultValue"
+              :allow-clear="true"
+              :auto-size="{ minRows: 3 }"
+              :disabled="formModel.isStatic"
+            />
+          </FormItem>
+          <FormItem
+            :label="$t('AbpSettingManagement.DisplayName:DisplayName')"
+            name="displayName"
+            required
+          >
+            <LocalizableInput
+              v-model:value="formModel.displayName"
+              :disabled="formModel.isStatic"
+            />
+          </FormItem>
+          <FormItem
+            :label="$t('AbpSettingManagement.DisplayName:Description')"
+            name="description"
+          >
+            <LocalizableInput
+              v-model:value="formModel.description"
+              :disabled="formModel.isStatic"
+            />
+          </FormItem>
+          <FormItem
+            :extra="$t('AbpSettingManagement.Description:Providers')"
+            :label="$t('AbpSettingManagement.DisplayName:Providers')"
+            name="providers"
+          >
+            <Select
+              v-model:value="formModel.providers"
+              :allow-clear="true"
+              :disabled="formModel.isStatic"
+              :options="providerOptions"
+              mode="multiple"
+            />
+          </FormItem>
+          <FormItem
+            :extra="$t('AbpSettingManagement.Description:IsInherited')"
+            :label="$t('AbpSettingManagement.DisplayName:IsInherited')"
+            name="isInherited"
+          >
+            <Checkbox
+              v-model:checked="formModel.isInherited"
+              :disabled="formModel.isStatic"
+            >
+              {{ $t('AbpSettingManagement.DisplayName:IsInherited') }}
+            </Checkbox>
+          </FormItem>
+          <FormItem
+            :extra="$t('AbpSettingManagement.Description:IsEncrypted')"
+            :label="$t('AbpSettingManagement.DisplayName:IsEncrypted')"
+            name="isEncrypted"
+          >
+            <Checkbox
+              v-model:checked="formModel.isEncrypted"
+              :disabled="formModel.isStatic"
+            >
+              {{ $t('AbpSettingManagement.DisplayName:IsEncrypted') }}
+            </Checkbox>
+          </FormItem>
+          <FormItem
+            :extra="$t('AbpSettingManagement.Description:IsVisibleToClients')"
+            :label="$t('AbpSettingManagement.DisplayName:IsVisibleToClients')"
+            name="isVisibleToClients"
+          >
+            <Checkbox
+              v-model:checked="formModel.isVisibleToClients"
+              :disabled="formModel.isStatic"
+            >
+              {{ $t('AbpSettingManagement.DisplayName:IsVisibleToClients') }}
+            </Checkbox>
+          </FormItem>
+        </TabPane>
+        <!-- 属性 -->
+        <TabPane key="props" :tab="$t('AbpPermissionManagement.Properties')">
+          <PropertyTable
+            :data="formModel.extraProperties"
+            :disabled="formModel.isStatic"
+            @change="onPropChange"
+            @delete="onPropDelete"
+          />
+        </TabPane>
+      </Tabs>
+    </Form>
+  </Modal>
 </template>
 
 <style scoped></style>
diff --git a/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionTable.vue b/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionTable.vue
index 1017376d1..8cfe20b3d 100644
--- a/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionTable.vue
+++ b/apps/vben5/packages/@abp/settings/src/components/definitions/SettingDefinitionTable.vue
@@ -1,7 +1,219 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { VbenFormProps, VxeGridListeners, VxeGridProps } from '@abp/ui';
+
+import type { SettingDefinitionDto } from '../../types/definitions';
+
+import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { useLocalization, useLocalizationSerializer } from '@abp/core';
+import { useVbenVxeGrid } from '@abp/ui';
+import {
+  DeleteOutlined,
+  EditOutlined,
+  PlusOutlined,
+} from '@ant-design/icons-vue';
+import { Button, message, Modal } from 'ant-design-vue';
+
+import { deleteApi, getListApi } from '../../api/definitions';
+import { SettingDefinitionsPermissions } from '../../constants/permissions';
+
+defineOptions({
+  name: 'SettingDefinitionTable',
+});
+
+const permissionGroups = ref<SettingDefinitionDto[]>([]);
+const pageState = reactive({
+  current: 1,
+  size: 10,
+  total: 0,
+});
+
+const { Lr } = useLocalization();
+const { deserialize } = useLocalizationSerializer();
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  handleReset: onReset,
+  async handleSubmit(params) {
+    pageState.current = 1;
+    await onGet(params);
+  },
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'filter',
+      formItemClass: 'col-span-2 items-baseline',
+      label: $t('AbpUi.Search'),
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: true,
+};
+
+const gridOptions: VxeGridProps<SettingDefinitionDto> = {
+  columns: [
+    {
+      align: 'left',
+      field: 'name',
+      minWidth: 150,
+      title: $t('AbpSettingManagement.DisplayName:Name'),
+    },
+    {
+      align: 'left',
+      field: 'displayName',
+      minWidth: 150,
+      title: $t('AbpSettingManagement.DisplayName:DisplayName'),
+    },
+    {
+      field: 'action',
+      fixed: 'right',
+      slots: { default: 'action' },
+      title: $t('AbpUi.Actions'),
+      width: 180,
+    },
+  ],
+  exportConfig: {},
+  keepSource: true,
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: false,
+    zoom: true,
+  },
+};
+
+const gridEvents: VxeGridListeners<SettingDefinitionDto> = {
+  pageChange(params) {
+    pageState.current = params.currentPage;
+    pageState.size = params.pageSize;
+    onPageChange();
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridEvents,
+  gridOptions,
+});
+
+const [SettingDefinitionModal, modalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(
+    () => import('./SettingDefinitionModal.vue'),
+  ),
+});
+
+async function onGet(input?: Record<string, string>) {
+  try {
+    gridApi.setLoading(true);
+    const { items } = await getListApi(input);
+    pageState.total = items.length;
+    permissionGroups.value = items.map((item) => {
+      const localizableString = deserialize(item.displayName);
+      return {
+        ...item,
+        displayName: Lr(localizableString.resourceName, localizableString.name),
+      };
+    });
+    onPageChange();
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+async function onReset() {
+  await gridApi.formApi.resetForm();
+  const input = await gridApi.formApi.getValues();
+  await onGet(input);
+}
+
+function onPageChange() {
+  const items = permissionGroups.value.slice(
+    (pageState.current - 1) * pageState.size,
+    pageState.current * pageState.size,
+  );
+  gridApi.setGridOptions({
+    data: items,
+    pagerConfig: {
+      currentPage: pageState.current,
+      pageSize: pageState.size,
+      total: pageState.total,
+    },
+  });
+}
+
+function onCreate() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+function onUpdate(row: SettingDefinitionDto) {
+  modalApi.setData(row);
+  modalApi.open();
+}
+
+function onDelete(row: SettingDefinitionDto) {
+  Modal.confirm({
+    centered: true,
+    content: `${$t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.name])}`,
+    onOk: async () => {
+      await deleteApi(row.name);
+      message.success($t('AbpUi.SuccessfullyDeleted'));
+      onGet();
+    },
+    title: $t('AbpUi.AreYouSure'),
+  });
+}
+
+onMounted(onGet);
+</script>
 
 <template>
-  <div></div>
+  <Grid :table-title="$t('AbpSettingManagement.Settings')">
+    <template #toolbar-tools>
+      <Button
+        :icon="h(PlusOutlined)"
+        type="primary"
+        v-access:code="[SettingDefinitionsPermissions.Create]"
+        @click="onCreate"
+      >
+        {{ $t('AbpSettingManagement.Definition:AddNew') }}
+      </Button>
+    </template>
+    <template #action="{ row }">
+      <div class="flex flex-row">
+        <div :class="row.isStatic ? 'w-full' : 'basis-1/2'">
+          <Button
+            :icon="h(EditOutlined)"
+            block
+            type="link"
+            v-access:code="[SettingDefinitionsPermissions.Update]"
+            @click="onUpdate(row)"
+          >
+            {{ $t('AbpUi.Edit') }}
+          </Button>
+        </div>
+        <div v-if="!row.isStatic" class="basis-1/2">
+          <Button
+            :icon="h(DeleteOutlined)"
+            block
+            danger
+            type="link"
+            v-access:code="[SettingDefinitionsPermissions.DeleteOrRestore]"
+            @click="onDelete(row)"
+          >
+            {{ $t('AbpUi.Delete') }}
+          </Button>
+        </div>
+      </div>
+    </template>
+  </Grid>
+  <SettingDefinitionModal @change="() => onGet()" />
 </template>
 
 <style scoped></style>