feat: 表单设置完成

src/views/generator-code/components/generator-form/generatorOptions.ts

@@ -0,0 +1,42 @@
+import type { FormRules } from 'naive-ui';
+
+export const serverOptions = [
+  { name: 'controller', label: 'controller' },
+  { name: 'mapper', label: 'mapper' },
+  { name: 'resourceMapper', label: 'resourceMapper' },
+  { name: 'service', label: 'service' },
+  { name: 'serviceImpl', label: 'serviceImpl' },
+];
+
+export const webOptions = [
+  { name: 'api', label: 'api' },
+  { name: 'columns', label: 'columns' },
+  { name: 'dialog', label: 'dialog' },
+  { name: 'hook', label: 'hook' },
+  { name: 'index', label: 'index' },
+  { name: 'store', label: 'store' },
+  { name: 'labels', label: 'labels' },
+];
+
+export const rules: FormRules = {
+  author: { required: true, trigger: ['blur', 'change', 'input'], message: '作者不能为空' },
+  packageName: { required: true, trigger: ['blur', 'change', 'input'], message: '包名不能为空' },
+  requestMapping: {
+    required: true,
+    trigger: ['blur', 'change', 'input'],
+    message: '请求路径不能为空',
+  },
+  className: { required: true, trigger: ['blur', 'change', 'input'], message: '类名不能为空' },
+  tableName: { required: true, trigger: ['blur', 'change', 'input'], message: '表名不能为空' },
+  simpleDateFormat: {
+    required: true,
+    trigger: ['blur', 'change', 'input'],
+    message: '日期格式不能为空',
+  },
+  // generatorServer: {
+  //   required: true,
+  //   trigger: ['blur', 'change', 'input'],
+  //   message: '选择要生成的服务端',
+  // },
+  // generatorWeb: { required: true, trigger: ['blur', 'change', 'input'], message: '选择要生成的前端' },
+};

src/views/generator-code/components/generator-form/index.vue

@@ -1,48 +1,130 @@
 <template>
-  <n-form ref="formRef" :label-width="80" :model="formValue" :rules="rules" inline>
-    <n-form-item label="姓名" path="user.name">
-      <n-input v-model:value="formValue.name" placeholder="输入姓名" />
-    </n-form-item>
-    <n-form-item label="年龄" path="user.age">
-      <n-input v-model:value="formValue.age" placeholder="输入年龄" />
-    </n-form-item>
-    <n-form-item label="电话号码" path="phone">
-      <n-input v-model:value="formValue.phone" placeholder="电话号码" />
-    </n-form-item>
+  <n-form ref="formRef" :label-width="80" :model="formValue" :rules="rules">
+    <n-grid :cols="24" :x-gap="24">
+      <n-form-item-gi :span="8" label="作者名称" path="author">
+        <n-input v-model:value="formValue.author" placeholder="输入姓名" />
+      </n-form-item-gi>
+      <n-form-item-gi :span="8" label="requestMapping名称" path="requestMapping">
+        <n-input v-model:value="formValue.requestMapping" placeholder="输入年龄" />
+      </n-form-item-gi>
+      <n-form-item-gi :span="8" label="表名称" path="tableName">
+        <n-input v-model:value="formValue.tableName" placeholder="电话号码" />
+      </n-form-item-gi>
+    </n-grid>
+
+    <n-grid :cols="24" :x-gap="24">
+      <n-form-item-gi :span="8" label="类名称" path="className">
+        <n-input v-model:value="formValue.className" placeholder="电话号码" />
+      </n-form-item-gi>
+      <n-form-item-gi :span="8" label="包名称" path="packageName">
+        <n-input v-model:value="formValue.packageName" placeholder="电话号码" />
+      </n-form-item-gi>
+      <n-form-item-gi :span="8" label="时间格式" path="simpleDateFormat">
+        <n-input v-model:value="formValue.simpleDateFormat" placeholder="电话号码" />
+      </n-form-item-gi>
+    </n-grid>
+
+    <n-grid :cols="24" :x-gap="24">
+      <n-form-item-gi :span="8" label="去除开头前缀" path="tablePrefixes">
+        <n-input v-model:value="formValue.tablePrefixes" placeholder="电话号码" />
+      </n-form-item-gi>
+      <n-form-item-gi :span="8" label="生成后端" path="generatorServer">
+        <n-checkbox-group v-model:value="formValue.generatorServer">
+          <n-space>
+            <n-checkbox v-for="(item, index) in serverOptions" :key="index" :value="item.name">
+              {{ item.label }}
+            </n-checkbox>
+          </n-space>
+        </n-checkbox-group>
+      </n-form-item-gi>
+      <n-form-item-gi :span="8" label="生成前端" path="generatorWeb">
+        <n-checkbox-group v-model:value="formValue.generatorWeb">
+          <n-space>
+            <n-checkbox v-for="(item, index) in webOptions" :key="index" v-model:value="item.name">
+              {{ item.label }}
+            </n-checkbox>
+          </n-space>
+        </n-checkbox-group>
+      </n-form-item-gi>
+    </n-grid>
+
     <n-form-item>
-      <n-button attr-type="button" @click="handleValidateClick">验证</n-button>
+      <n-button attr-type="button" class="w-full" type="primary" @click="onSubmit">
+        开始生成
+      </n-button>
     </n-form-item>
   </n-form>
 </template>
 
 <script lang="ts" setup>
-import { FormRules, NButton, NForm, NFormItem, NInput, useMessage } from 'naive-ui';
-import { reactive, ref } from 'vue';
+import {
+  NButton,
+  NCheckbox,
+  NCheckboxGroup,
+  NForm,
+  NFormItem,
+  NFormItemGi,
+  NGrid,
+  NInput,
+  NSpace,
+  useMessage,
+} from 'naive-ui';
+import { onMounted, reactive, ref } from 'vue';
+import { useRoute } from 'vue-router';
 
-const rules: FormRules = {
-  input: {
-    required: true,
-    trigger: ['focus', 'input'],
-    renderMessage: () => {
-      return localeRef.value === '语言1'
-        ? '抽离透传归因分析作为抓手为产品赋能'
-        : '方法论是组合拳达到平台化标准';
-    },
-  },
-};
+import {
+  rules,
+  serverOptions,
+  webOptions,
+} from '@/views/generator-code/components/generator-form/generatorOptions';
+
+const route = useRoute();
 const message = useMessage();
 const formRef = ref();
-const formValue = reactive({});
+const formValue = reactive({
+  author: 'Bunny',
+  packageName: 'cn.bunny.services',
+  requestMapping: '/api',
+  className: '',
+  tableName: '',
+  simpleDateFormat: 'yyyy-MM-dd HH:mm:ss',
+  tablePrefixes: 't_,sys_,qrtz_,log_',
+  generatorServer: undefined,
+  generatorWeb: undefined,
+});
 
-const handleValidateClick = (e: MouseEvent) => {
+/* 提交表单 */
+const onSubmit = (e: MouseEvent) => {
   e.preventDefault();
-  formRef.value?.validate((errors: any) => {
+  formRef.value?.validate(async (errors: any) => {
     if (!errors) {
+      console.log(formValue);
       message.success('验证成功');
     } else {
-      console.log(errors);
-      message.error('验证失败');
+      errors.forEach((error: any) => {
+        error.forEach((err: any) => {
+          message.error(`${err.message}->${err.field}`);
+        });
+      });
     }
   });
 };
+
+/* 初始化表单信息 */
+const formValueInit = () => {
+  // 初始化表名称
+  const tableName = route.query.tableName;
+  formValue.tableName = tableName.toString();
+
+  // 替换类名称
+  let className: any = tableName as any;
+  formValue.tablePrefixes.split(/[,，]/).forEach((item) => {
+    className = className.replace(item, '');
+  });
+  formValue.className = className;
+};
+
+onMounted(() => {
+  formValueInit();
+});
 </script>

src/views/generator-code/index.vue

@@ -6,7 +6,6 @@ import { useRoute, useRouter } from 'vue-router';
 import { useTableStore } from '@/store/modules/table';
 import Index from '@/views/generator-code/components/columns-info/index.vue';
 import GeneratorForm from '@/views/generator-code/components/generator-form/index.vue';
-import Home from '@/views/home/index.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -35,6 +34,7 @@ onMounted(() => {
   <n-card>
     <template #header>
       <n-card title="数据库信息">
+        <span class="color-blue" @click="router.push('/')">回到首页</span>
         <ul>
           <li>表名：{{ route.query.tableName }}</li>
           <li>表注释：{{ tableInfo.comment }}</li>
@@ -49,11 +49,6 @@ onMounted(() => {
         <index />
       </n-tab-pane>
 
-      <n-tab-pane name="home" tab="数据库表" @click="router.push('/')">
-        <a class="inline-block color-blue" href="/">回到首页</a>
-        <home />
-      </n-tab-pane>
-
       <n-tab-pane name="the beatles" tab="生成">
         <generator-form />
       </n-tab-pane>