feat(vben5): Realize the item management of the data dictionary

apps/vben5/packages/@abp/platform/package.json

@@ -32,7 +32,11 @@
     "@vben/layouts": "workspace:*",
     "@vben/locales": "workspace:*",
     "ant-design-vue": "catalog:",
+    "lodash.clonedeep": "catalog:",
     "vue": "catalog:*",
     "vxe-table": "catalog:"
+  },
+  "devDependencies": {
+    "@types/lodash.clonedeep": "catalog:"
   }
 }

apps/vben5/packages/@abp/platform/src/components/data-dictionaries/DataDictionaryItemDrawer.vue

@@ -3,9 +3,9 @@ import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
 
 import type { DataDto, DataItemDto } from '../../types/dataDictionaries';
 
-import { h, reactive, ref } from 'vue';
+import { defineAsyncComponent, h, reactive, ref } from 'vue';
 
-import { useVbenDrawer } from '@vben/common-ui';
+import { useVbenDrawer, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import { isNullOrWhiteSpace } from '@abp/core';
@@ -17,12 +17,12 @@ import {
   EditOutlined,
   PlusOutlined,
 } from '@ant-design/icons-vue';
-import { Button } from 'ant-design-vue';
+import { Button, message, Modal } from 'ant-design-vue';
 
 import { useDataDictionariesApi } from '../../api';
 import { ValueType } from '../../types/dataDictionaries';
 
-const { getApi } = useDataDictionariesApi();
+const { deleteItemApi, getApi } = useDataDictionariesApi();
 
 const dataItems = ref<DataItemDto[]>([]);
 const pageState = reactive({
@@ -140,6 +140,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions,
 });
 
+const [DataDictionaryItemModal, itemModalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(
+    () => import('./DataDictionaryItemModal.vue'),
+  ),
+});
+
 async function onGet() {
   const { id } = drawerApi.getData<DataDto>();
   if (isNullOrWhiteSpace(id)) {
@@ -173,11 +179,39 @@ function onPageChange() {
   });
 }
 
-function onCreate() {}
+function onCreate() {
+  const data = drawerApi.getData<DataDto>();
+  itemModalApi.setData({ data });
+  itemModalApi.open();
+}
 
-function onUpdate(_row: DataItemDto) {}
+function onUpdate(row: DataItemDto) {
+  const data = drawerApi.getData<DataDto>();
+  itemModalApi.setData({ data, item: row });
+  itemModalApi.open();
+}
 
-function onDelete(_row: DataItemDto) {}
+function onDelete(row: DataItemDto) {
+  Modal.confirm({
+    afterClose: () => {
+      gridApi.setLoading(false);
+    },
+    centered: true,
+    content: `${$t('AbpUi.ItemWillBeDeletedMessage')}`,
+    onOk: async () => {
+      try {
+        gridApi.setLoading(true);
+        const { id } = drawerApi.getData<DataDto>();
+        await deleteItemApi(id, row.name);
+        message.success($t('AbpUi.DeletedSuccessfully'));
+        onGet();
+      } finally {
+        gridApi.setLoading(false);
+      }
+    },
+    title: $t('AbpUi.AreYouSure'),
+  });
+}
 </script>
 
 <template>
@@ -216,6 +250,7 @@ function onDelete(_row: DataItemDto) {}
         </div>
       </template>
     </Grid>
+    <DataDictionaryItemModal @change="onGet" />
   </Drawer>
 </template>
 

apps/vben5/packages/@abp/platform/src/components/data-dictionaries/DataDictionaryItemModal.vue

@@ -0,0 +1,293 @@
+<script setup lang="ts">
+import type {
+  DataDto,
+  DataItemCreateDto,
+  DataItemDto,
+  DataItemUpdateDto,
+} from '../../types';
+
+import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { formatToDate, formatToDateTime } from '@abp/core';
+import { message } from 'ant-design-vue';
+import cloneDeep from 'lodash.clonedeep';
+
+import { useDataDictionariesApi } from '../../api';
+import { ValueType } from '../../types';
+
+interface ModalState {
+  data: DataDto;
+  item: DataItemDto;
+}
+
+const emits = defineEmits<{
+  (event: 'change'): void;
+}>();
+
+const { createItemApi, updateItemApi } = useDataDictionariesApi();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  handleSubmit: onSubmit,
+  schema: [
+    {
+      component: 'Input',
+      dependencies: {
+        show: false,
+        triggerFields: ['name'],
+      },
+      fieldName: 'id',
+    },
+    {
+      component: 'Input',
+      dependencies: {
+        disabled: (values) => {
+          return !!values?.id;
+        },
+        triggerFields: ['id'],
+      },
+      fieldName: 'name',
+      label: $t('AppPlatform.DisplayName:Name'),
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        autocomplete: 'off',
+      },
+      fieldName: 'displayName',
+      label: $t('AppPlatform.DisplayName:DisplayName'),
+      rules: 'required',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        onChange(valueType: ValueType) {
+          onValueTypeChange(valueType);
+        },
+        options: [
+          { label: 'String', value: ValueType.String },
+          { label: 'Number', value: ValueType.Numeic },
+          { label: 'Date', value: ValueType.Date },
+          { label: 'DateTime', value: ValueType.DateTime },
+          { label: 'Boolean', value: ValueType.Boolean },
+          { label: 'Array', value: ValueType.Array },
+          // TODO: Object 暂不支持
+          // { label: 'Object', value: ValueType.Object },
+        ],
+      },
+      fieldName: 'valueType',
+      label: $t('AppPlatform.DisplayName:ValueType'),
+      rules: 'selectRequired',
+    },
+    {
+      component: 'Input',
+      fieldName: 'defaultValue',
+      label: $t('AppPlatform.DisplayName:DefaultValue'),
+    },
+    {
+      component: 'Checkbox',
+      fieldName: 'allowBeNull',
+      label: $t('AppPlatform.DisplayName:AllowBeNull'),
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        autoSize: {
+          minRows: 3,
+        },
+      },
+      fieldName: 'description',
+      label: $t('AppPlatform.DisplayName:Description'),
+    },
+  ],
+  showDefaultActions: false,
+});
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      onInit();
+    }
+  },
+});
+
+function onInit() {
+  formApi.resetForm();
+  const state = modalApi.getData<ModalState>();
+  let title = $t('AppPlatform.Data:AppendItem');
+  if (state.item?.id) {
+    onValueTypeChange(state.item.valueType);
+    formApi.setValues({
+      ...state.item,
+      defaultValue: mapFromDefaultValue(state.item),
+    });
+    title = `${$t('AppPlatform.Data:EditItem')} - ${state.item.name}`;
+  } else {
+    formApi.updateSchema([
+      {
+        component: 'Input',
+        componentProps: {
+          autocomplete: 'off',
+        },
+        dependencies: {
+          rules(values) {
+            return values.allowBeNull ? null : 'required';
+          },
+          triggerFields: ['valueType', 'allowBeNull'],
+        },
+        fieldName: 'defaultValue',
+      },
+    ]);
+    formApi.setValues({
+      allowBeNull: true,
+    });
+  }
+  modalApi.setState({ title });
+}
+
+async function onSubmit(values: Record<string, any>) {
+  try {
+    modalApi.setState({ submitting: true });
+    const state = modalApi.getData<ModalState>();
+    const input = cloneDeep(values);
+    input.defaultValue = mapToDefaultValue(input.valueType, input.defaultValue);
+    const api = input.id
+      ? updateItemApi(state.data.id, input.name, input as DataItemUpdateDto)
+      : createItemApi(state.data.id, input as DataItemCreateDto);
+    await api;
+    message.success($t('AbpUi.SavedSuccessfully'));
+    emits('change');
+    modalApi.close();
+  } finally {
+    modalApi.setState({ submitting: false });
+  }
+}
+
+function onValueTypeChange(valueType: ValueType) {
+  let component = 'Input';
+  let componentProps: Record<string, any> | undefined;
+  switch (valueType) {
+    case ValueType.Array: {
+      component = 'Select';
+      componentProps = {
+        mode: 'tags',
+      };
+      break;
+    }
+    case ValueType.Boolean: {
+      component = 'Checkbox';
+      break;
+    }
+    case ValueType.Date:
+    case ValueType.DateTime: {
+      component = 'DatePicker';
+      componentProps = {
+        showTime: valueType === ValueType.DateTime,
+        valueFormat:
+          valueType === ValueType.DateTime
+            ? 'YYYY-MM-DD HH:mm:ss'
+            : 'YYYY-MM-DD',
+      };
+      break;
+    }
+    case ValueType.Numeic: {
+      component = 'InputNumber';
+      break;
+    }
+    case ValueType.String: {
+      componentProps = {
+        autocomplete: 'off',
+      };
+      break;
+    }
+  }
+  formApi.updateSchema([
+    {
+      component,
+      componentProps,
+      dependencies: {
+        rules(values) {
+          return values.allowBeNull ? null : 'required';
+        },
+        triggerFields: ['valueType', 'allowBeNull'],
+      },
+      fieldName: 'defaultValue',
+    },
+  ]);
+  formApi.setFieldValue('defaultValue', undefined);
+}
+
+function mapToDefaultValue(valueType: ValueType, defaultValue?: any) {
+  if (!defaultValue) {
+    return undefined;
+  }
+  switch (valueType) {
+    case ValueType.Array: {
+      return (defaultValue as string[]).join(',');
+    }
+    case ValueType.Boolean: {
+      return (defaultValue as Boolean).toString();
+    }
+    case ValueType.Date: {
+      return formatToDate(defaultValue);
+    }
+    case ValueType.DateTime: {
+      return formatToDateTime(defaultValue);
+    }
+    case ValueType.Numeic: {
+      return (defaultValue as Number).toString();
+    }
+  }
+  return defaultValue;
+}
+
+function mapFromDefaultValue(dataItem: DataItemDto) {
+  if (!dataItem.defaultValue) {
+    return undefined;
+  }
+  let defaultValue: any | undefined;
+  switch (dataItem.valueType) {
+    case ValueType.Array: {
+      defaultValue = dataItem.defaultValue.split(',');
+      break;
+    }
+    case ValueType.Boolean: {
+      defaultValue = Boolean(dataItem.defaultValue);
+      break;
+    }
+    case ValueType.Date: {
+      defaultValue = formatToDate(dataItem.defaultValue);
+      break;
+    }
+    case ValueType.DateTime: {
+      defaultValue = formatToDateTime(dataItem.defaultValue);
+      break;
+    }
+    case ValueType.Numeic: {
+      defaultValue = Number(dataItem.defaultValue);
+      break;
+    }
+    case ValueType.String: {
+      defaultValue = dataItem.defaultValue;
+      break;
+    }
+  }
+  return defaultValue;
+}
+</script>
+
+<template>
+  <Modal>
+    <Form />
+  </Modal>
+</template>
+
+<style scoped></style>