chore: 完善form demo

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>