fix: 搭建代码生成页面

apps/web-antd/src/views/code-generation/components/fileds.vue

@@ -1,64 +1,185 @@
 <script lang="ts" setup>
+import { computed, ref } from 'vue';
+
 import { Page } from '@vben/common-ui';
 
-import { Button, message } from 'ant-design-vue';
+import { Button, Input, Select, Switch, Table } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-
-import { gridOptions } from '../config/table';
-
-defineOptions({
-  name: 'CodeGenerationFiledTable',
-});
+import filedType from '#/util/json/filedType.json';
+import formType from '#/util/json/formType.json';
 
 interface RowType {
-  category: string;
-  color: string;
-  id: string;
-  price: string;
-  productName: string;
-  releaseDate: string;
+  name: string;
+  type: string;
+  type_length: string;
+  default: string;
+  comment: string;
+  not_null: boolean;
+  formShow: boolean;
+  tableShow: boolean;
+  formType: string;
+  search: boolean;
+  searchValue: string;
 }
+const createEmptyRow = (): RowType => ({
+  name: '',
+  type: 'string',
+  type_length: '',
+  default: '',
+  comment: '',
+  not_null: true,
+  formShow: true,
+  tableShow: true,
+  formType: 'VbenInput',
+  search: true,
+  searchValue: '=',
+});
 
-const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
+const tableData = ref<RowType[]>([createEmptyRow()]);
+// 暴露常量
+defineExpose({
+  tableData,
+});
 
-function hasEditStatus(row: RowType) {
-  return gridApi.grid?.isEditByRow(row);
-}
+// 添加行
+const addRow = () => tableData.value.push(createEmptyRow());
 
-function editRowEvent(row: RowType) {
-  gridApi.grid?.setEditRow(row);
-}
-
-async function saveRowEvent(row: RowType) {
-  await gridApi.grid?.clearEdit();
-
-  gridApi.setLoading(true);
-  setTimeout(() => {
-    gridApi.setLoading(false);
-    message.success({
-      content: `保存成功！category=${row.category}`,
-    });
-  }, 600);
-}
-
-const cancelRowEvent = (_row: RowType) => {
-  gridApi.grid?.clearEdit();
+// 删除行
+const deleteRow = (index: number) => {
+  if (tableData.value.length > 1) {
+    tableData.value.splice(index, 1);
+  }
 };
+
+// 表格列配置
+const columns = computed(() => [
+  { title: '字段名', dataIndex: 'name', width: 150 },
+  { title: '类型', dataIndex: 'type', width: 120 },
+  { title: '字段长度', dataIndex: 'type_length', width: 120 },
+  { title: '默认值', dataIndex: 'default', width: 120 },
+  { title: '注释', dataIndex: 'comment', width: 200 },
+  { title: '基础配置', dataIndex: 'base', width: 100 },
+  { title: '搜索配置', dataIndex: 'search', width: 120 },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 100,
+    fixed: 'right',
+  },
+]);
 </script>
 
 <template>
   <Page auto-content-height>
-    <Grid>
-      <template #action="{ row }">
-        <template v-if="hasEditStatus(row)">
-          <Button type="link" @click="saveRowEvent(row)">保存</Button>
-          <Button type="link" @click="cancelRowEvent(row)">取消</Button>
+    {{ tableData }}
+    <Table
+      :columns="columns"
+      :data-source="tableData"
+      :pagination="false"
+      bordered
+      row-key="index"
+    >
+      <template #bodyCell="{ column, record, index }">
+        <!-- 操作列 -->
+        <template v-if="column.dataIndex === 'action'">
+          <div class="flex gap-2">
+            <Button danger @click="deleteRow(index)">删除</Button>
+            <Button type="primary" @click="addRow"> 添加行 </Button>
+          </div>
         </template>
-        <template v-else>
-          <Button type="link" @click="editRowEvent(row)">编辑</Button>
+
+        <!-- 字段名编辑 -->
+        <template v-if="column.dataIndex === 'name'">
+          <Input v-model:value="record.name" autofocus />
+        </template>
+
+        <!-- 类型选择 -->
+        <template v-if="column.dataIndex === 'type'">
+          <Select
+            v-model:value="record.type"
+            :options="filedType"
+            show-search
+            style="width: 100%"
+            autofocus
+          />
+        </template>
+
+        <!-- 默认值编辑 -->
+        <template v-if="column.dataIndex === 'type_length'">
+          <Input v-model:value="record.type_length" autofocus />
+        </template>
+
+        <!-- 默认值编辑 -->
+        <template v-if="column.dataIndex === 'default'">
+          <Input v-model:value="record.default" autofocus />
+        </template>
+
+        <!-- 注释编辑 -->
+        <template v-if="column.dataIndex === 'comment'">
+          <Input v-model:value="record.comment" autofocus />
+        </template>
+
+        <!-- 基础配置 -->
+        <template v-if="column.dataIndex === 'base'">
+          <!-- 开关控件 -->
+          <div>可以为空： <Switch v-model:checked="record.null" /></div>
+          <div class="mt-2">
+            表单显示： <Switch v-model:checked="record.formShow" />
+          </div>
+          <div class="mt-2">
+            表格显示： <Switch v-model:checked="record.tableShow" />
+          </div>
+          <div class="mt-2">
+            开启查询： <Switch v-model:checked="record.search" />
+          </div>
+        </template>
+        <!-- 搜索配置 -->
+        <template v-if="column.dataIndex === 'search'">
+          <!-- 开关控件 -->
+          <div class="mt-2">
+            表单类型：
+            <Select
+              v-model:value="record.formType"
+              :options="formType"
+              show-search
+              style="width: 100%"
+              :disabled="!record.formShow"
+              autofocus
+            />
+          </div>
+          <div class="mt-2">
+            查询类型：
+            <Select
+              v-model:value="record.searchValue"
+              :options="[
+                {
+                  label: '绝对查询',
+                  value: '=',
+                },
+                {
+                  label: '模糊查询',
+                  value: 'like',
+                },
+              ]"
+              style="width: 100%"
+              :disabled="!record.search"
+              autofocus
+            />
+          </div>
+        </template>
+        <!-- 搜索配置 -->
+        <template v-if="column.dataIndex === 'formType'">
+          <!-- 开关控件 -->
         </template>
       </template>
-    </Grid>
+    </Table>
   </Page>
 </template>
+
+<style scoped>
+.ant-table-cell {
+  min-height: 45px;
+  padding: 8px 16px !important;
+  cursor: pointer;
+}
+</style>