chore: 完善form demo

apps/web-antd/src/api/base.ts

@@ -1,53 +0,0 @@
-import { requestClient } from './request';
-
-export type ID = number | string;
-export type IDS = (number | string)[];
-
-export interface BaseEntity {
-  createBy?: string;
-  createDept?: string;
-  createTime?: string;
-  updateBy?: string;
-  updateTime?: string;
-}
-
-/**
- * 分页查询参数
- * @param pageNum 当前页
- * @param pageSize 每页大小
- * @param orderByColumn 排序字段
- * @param isAsc 是否升序
- */
-export interface PageQuery {
-  isAsc?: boolean;
-  orderByColumn?: string;
-  pageNum?: number;
-  pageSize?: number;
-}
-
-/**
- * @description:  contentType
- */
-export enum ContentTypeEnum {
-  // form-data  upload
-  FORM_DATA = 'multipart/form-data;charset=UTF-8',
-  // form-data qs
-  FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
-  // json
-  JSON = 'application/json;charset=UTF-8',
-}
-
-/**
- * 通用下载接口 封装一层
- * @param url 请求地址
- * @param data  请求参数
- * @returns blob二进制
- */
-export function commonExport(url: string, data: Record<string, any>) {
-  return requestClient.post<Blob>(url, data, {
-    data,
-    headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
-    isTransformResponse: false,
-    responseType: 'blob',
-  });
-}

apps/web-antd/src/api/common.d.ts

@@ -0,0 +1,34 @@
+export type ID = number | string;
+export type IDS = (number | string)[];
+
+export interface BaseEntity {
+  createBy?: string;
+  createDept?: string;
+  createTime?: string;
+  updateBy?: string;
+  updateTime?: string;
+}
+
+/**
+ * 分页信息
+ * @param rows 结果集
+ * @param total 总数
+ */
+export interface PageResult<T = any> {
+  rows: T[];
+  total: number;
+}
+
+/**
+ * 分页查询参数
+ * @param pageNum 当前页
+ * @param pageSize 每页大小
+ * @param orderByColumn 排序字段
+ * @param isAsc 是否升序
+ */
+export interface PageQuery {
+  isAsc?: boolean;
+  orderByColumn?: string;
+  pageNum?: number;
+  pageSize?: number;
+}

apps/web-antd/src/api/helper.ts

@@ -1,5 +1,7 @@
 import { isObject, isString } from '@vben/utils';
 
+import { requestClient } from './request';
+
 const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 
 export function joinTimestamp<T extends boolean>(
@@ -67,3 +69,30 @@ export function setObjToUrlParams(baseUrl: string, obj: any): string {
     ? baseUrl + parameters
     : baseUrl.replace(/\/?$/, '?') + parameters;
 }
+
+/**
+ * @description:  contentType
+ */
+export enum ContentTypeEnum {
+  // form-data  upload
+  FORM_DATA = 'multipart/form-data;charset=UTF-8',
+  // form-data qs
+  FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
+  // json
+  JSON = 'application/json;charset=UTF-8',
+}
+
+/**
+ * 通用下载接口 封装一层
+ * @param url 请求地址
+ * @param data  请求参数
+ * @returns blob二进制
+ */
+export function commonExport(url: string, data: Record<string, any>) {
+  return requestClient.post<Blob>(url, data, {
+    data,
+    headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
+    isTransformResponse: false,
+    responseType: 'blob',
+  });
+}

apps/web-antd/src/api/system/config/index.ts

@@ -0,0 +1,55 @@
+import type { Config } from './model';
+
+import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+enum Api {
+  configExport = '/system/config/export',
+  configInfoByKey = '/system/config/configKey',
+  configList = '/system/config/list',
+  configRefreshCache = '/system/config/refreshCache',
+  root = '/system/config',
+}
+
+export function configList(params?: PageQuery) {
+  return requestClient.get<PageResult<Config>>(Api.configList, { params });
+}
+
+export function configInfo(configId: ID) {
+  return requestClient.get<Config>(`${Api.root}/${configId}`);
+}
+
+export function configExport(data: any) {
+  return commonExport(Api.configExport, data);
+}
+
+/**
+ * 刷新缓存
+ * @returns void
+ */
+export function configRefreshCache() {
+  return requestClient.deleteWithMsg<void>(Api.configRefreshCache);
+}
+
+export function configUpdate(data: any) {
+  return requestClient.putWithMsg<void>(Api.root, data);
+}
+
+export function configAdd(data: any) {
+  return requestClient.postWithMsg<void>(Api.root, data);
+}
+
+export function configRemove(configIds: IDS) {
+  return requestClient.deleteWithMsg<void>(`${Api.root}/${configIds}`);
+}
+
+/**
+ * 获取配置信息
+ * @param configKey configKey
+ * @returns info
+ */
+export function configInfoByKey(configKey: string) {
+  return requestClient.get<Config>(`${Api.configInfoByKey}/${configKey}`);
+}

apps/web-antd/src/api/system/config/model.d.ts

@@ -0,0 +1,9 @@
+export interface Config {
+  configId: number;
+  configName: string;
+  configKey: string;
+  configValue: string;
+  configType: string;
+  remark: string;
+  createTime: string;
+}

apps/web-antd/src/api/system/dict/dict-data.ts

@@ -1,8 +1,8 @@
 import type { DictData } from './dict-data-model';
 
-import type { ID, IDS, PageQuery } from '#/api/base';
+import type { ID, IDS, PageQuery } from '#/api/common';
 
-import { commonExport } from '#/api/base';
+import { commonExport } from '#/api/helper';
 import { requestClient } from '#/api/request';
 
 enum Api {

apps/web-antd/src/api/system/dict/dict-type.ts

@@ -1,8 +1,8 @@
 import type { DictType } from './dict-type-model';
 
-import type { ID, IDS, PageQuery } from '#/api/base';
+import type { ID, IDS, PageQuery } from '#/api/common';
 
-import { commonExport } from '#/api/base';
+import { commonExport } from '#/api/helper';
 import { requestClient } from '#/api/request';
 
 enum Api {

apps/web-antd/src/views/system/config/config-modal.vue

@@ -5,6 +5,7 @@ import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import { useVbenForm } from '#/adapter';
+import { configAdd, configUpdate } from '#/api/system/config';
 import { getDictOptions } from '#/utils/dict';
 
 const emit = defineEmits<{ reload: [] }>();
@@ -19,26 +20,6 @@ const title = computed(() => {
   return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
 });
 
-const [BasicModal, modalApi] = useVbenModal({
-  fullscreenButton: false,
-  onCancel: handleCancel,
-  onConfirm: handleConfirm,
-  onOpenChange: (isOpen) => {
-    if (!isOpen) {
-      return null;
-    }
-    const { record, update } = modalApi.getData() as ModalProps;
-    isUpdate.value = update;
-    if (update && record) {
-      console.log(record);
-    }
-  },
-});
-
-function modalLoading(loading: boolean) {
-  modalApi.setState({ confirmLoading: loading, loading });
-}
-
 const [BasicForm, formApi] = useVbenForm({
   schema: [
     {
@@ -86,7 +67,7 @@ const [BasicForm, formApi] = useVbenForm({
       },
       defaultValue: 'N',
       fieldName: 'configType',
-      label: '参数键值',
+      label: '是否内置',
       rules: 'required',
     },
     {
@@ -101,21 +82,38 @@ const [BasicForm, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
-function wait(ms: number) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, ms);
-  });
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    const { record, update } = modalApi.getData() as ModalProps;
+    isUpdate.value = update;
+    if (update && record) {
+      for (const key in record) {
+        await formApi.setFieldValue(key, record[key]);
+      }
+    }
+  },
+});
+
+function modalLoading(loading: boolean) {
+  modalApi.setState({ confirmLoading: loading, loading });
 }
 
 async function handleConfirm() {
   try {
     modalLoading(true);
-    const { results, valid } = await formApi.validate();
+    const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
-    console.log(results);
-    await wait(1000);
+    const data = await formApi.getValues();
+    console.log(data);
+    await (isUpdate.value ? configUpdate(data) : configAdd(data));
     emit('reload');
     await handleCancel();
   } catch (error) {

apps/web-antd/src/views/system/config/index.vue

@@ -1,7 +1,16 @@
 <script setup lang="ts">
+import type { Recordable } from '@vben/types';
+import type { ColumnsType } from 'ant-design-vue/es/table';
+
+import type { Config } from '#/api/system/config/model';
+
+import { onMounted, ref } from 'vue';
+
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import { Space, Table } from 'ant-design-vue';
+
+import { configList } from '#/api/system/config';
 
 import configModal from './config-modal.vue';
 
@@ -14,16 +23,72 @@ function handleAdd() {
   modalApi.open();
 }
 
-function reload() {
-  message.success('reload test');
+async function handleEdit(record: Recordable<any>) {
+  modalApi.setData({ record, update: true });
+  modalApi.open();
 }
+
+const configDataList = ref<Config[]>([]);
+async function reload() {
+  const resp = await configList();
+  configDataList.value = resp.rows;
+}
+
+onMounted(reload);
+
+const columns: ColumnsType = [
+  {
+    align: 'center',
+    dataIndex: 'configName',
+    title: '参数名称',
+  },
+  {
+    align: 'center',
+    dataIndex: 'configKey',
+    title: '参数KEY',
+  },
+  {
+    align: 'center',
+    dataIndex: 'configValue',
+    title: '参数Value',
+  },
+  {
+    align: 'center',
+    dataIndex: 'remark',
+    ellipsis: true,
+    title: '备注',
+  },
+  {
+    align: 'center',
+    dataIndex: 'createTime',
+    title: '创建时间',
+  },
+  {
+    align: 'center',
+    dataIndex: 'action',
+    title: '操作',
+  },
+];
 </script>
 
 <template>
   <Page>
-    <a-button type="primary" @click="handleAdd">
-      {{ $t('pages.common.add') }}
-    </a-button>
+    <div class="mb-[16px] flex justify-end">
+      <a-button type="primary" @click="handleAdd">
+        {{ $t('pages.common.add') }}
+      </a-button>
+    </div>
+    <Table :columns :data-source="configDataList" size="middle">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'action'">
+          <Space>
+            <a-button size="small" type="primary" @click="handleEdit(record)">
+              {{ $t('pages.common.edit') }}
+            </a-button>
+          </Space>
+        </template>
+      </template>
+    </Table>
     <ConfigModal @reload="reload" />
   </Page>
 </template>