feat: 普通表单

src/lang/modules/enUS.ts

@@ -2,11 +2,11 @@ export default {
   language: {
     ["login"]: "login",
     ["home"]: "home",
-    ["basic-table"]: "basic table",
+    ["table-management"]: "table management",
     ["common-table"]: "common table",
     ["custom-table"]: "custom table",
-    ["common-components"]: "common components",
+    ["form-management"]: "form management",
-    ["form-component"]: "form components",
+    ["common-form"]: "common form",
     ["dynamic-form"]: "dynamic form",
     ["multilevel-menu"]: "multilevel menu",
     ["second-menu-1"]: "second-menu-1",

src/lang/modules/zhCN.ts

@@ -2,11 +2,11 @@ export default {
   language: {
     ["login"]: "登录",
     ["home"]: "首页",
-    ["basic-table"]: "表格 Table",
+    ["table-management"]: "列表管理",
-    ["common-table"]: "普通表格",
+    ["common-table"]: "普通列表",
-    ["custom-table"]: "自定义表格",
+    ["custom-table"]: "自定义列表",
-    ["common-components"]: "常用组件",
+    ["form-management"]: "表单管理",
-    ["form-component"]: "表单组件",
+    ["common-form"]: "普通表单",
     ["dynamic-form"]: "动态表单",
     ["multilevel-menu"]: "多级菜单",
     ["second-menu-1"]: "二级菜单-1",

src/router/route.ts

@@ -66,11 +66,11 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         }
       },
       {
-        path: "/basic-table",
+        path: "/table-management",
-        name: "basic-table",
+        name: "table-management",
-        redirect: "/basic-table/common-table",
+        redirect: "/table-management/common-table",
         meta: {
-          title: "basic-table",
+          title: "table-management",
           link: "",
           hide: false,
           keepAlive: true,
@@ -81,9 +81,9 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         },
         children: [
           {
-            path: "/basic-table/common-table",
+            path: "/table-management/common-table",
             name: "common-table",
-            component: () => import("@/views/basic-table/common-table/common-table.vue"),
+            component: () => import("@/views/table-management/common-table/common-table.vue"),
             meta: {
               title: "common-table",
               link: "",
@@ -96,9 +96,9 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             }
           },
           {
-            path: "/basic-table/custom-table",
+            path: "/table-management/custom-table",
             name: "custom-table",
-            component: () => import("@/views/basic-table/custom-table/custom-table.vue"),
+            component: () => import("@/views/table-management/custom-table/custom-table.vue"),
             meta: {
               title: "custom-table",
               link: "",
@@ -113,11 +113,11 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         ]
       },
       {
-        path: "/common-components",
+        path: "/form-management",
-        name: "common-components",
+        name: "form-management",
-        redirect: "/common-components/form-component",
+        redirect: "/form-management/common-form",
         meta: {
-          title: "common-components",
+          title: "form-management",
           link: "",
           hide: false,
           keepAlive: true,
@@ -128,11 +128,11 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         },
         children: [
           {
-            path: "/common-components/form-component",
+            path: "/form-management/common-form",
-            name: "form-component",
+            name: "common-form",
-            component: () => import("@/views/common-components/form-component/form-component.vue"),
+            component: () => import("@/views/form-management/common-form/common-form.vue"),
             meta: {
-              title: "form-component",
+              title: "common-form",
               link: "",
               hide: false,
               keepAlive: true,
@@ -143,9 +143,9 @@ export const dynamicRoutes: RouteRecordRaw[] = [
             }
           },
           {
-            path: "/common-components/dynamic-form",
+            path: "/form-management/dynamic-form",
             name: "dynamic-form",
-            component: () => import("@/views/common-components/dynamic-form/dynamic-form.vue"),
+            component: () => import("@/views/form-management/dynamic-form/dynamic-form.vue"),
             meta: {
               title: "dynamic-form",
               link: "",

src/views/common-components/form-component/form-component.vue

@@ -1,9 +0,0 @@
-<template>
-  <div>
-    <div>表单数据</div>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style lang="scss" scoped></style>

src/views/form-management/common-form/common-form.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="dc-page">
+    <a-form ref="formRef" :size="form.size" :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
+      <a-form-item field="size" label="表单大小">
+        <a-radio-group v-model="form.size" type="button">
+          <a-radio value="mini">迷你</a-radio>
+          <a-radio value="small">偏小</a-radio>
+          <a-radio value="medium">中等</a-radio>
+          <a-radio value="large">偏大</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item
+        field="name"
+        label="用户名称"
+        :rules="[
+          { required: true, message: '用户名称不能为空' },
+          { minLength: 5, message: '必须大于 5 个字符' }
+        ]"
+        :validate-trigger="['change', 'input']"
+      >
+        <a-input v-model="form.name" placeholder="请输入用户名称" allow-clear />
+      </a-form-item>
+      <a-form-item
+        field="age"
+        label="年龄"
+        :rules="[
+          { required: true, message: '年龄为必填项' },
+          { type: 'number', max: 200, message: '年龄上限为 200 岁' }
+        ]"
+      >
+        <a-input-number v-model="form.age" placeholder="请输入您的年龄" allow-clear />
+      </a-form-item>
+      <a-form-item field="section" label="选项" :rules="[{ required: true, message: '选项不能为空' }]">
+        <a-select v-model="form.section" placeholder="请选择" allow-clear>
+          <a-option value="section one">Section One</a-option>
+          <a-option value="section two">Section Two</a-option>
+          <a-option value="section three">Section Three</a-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item field="province" label="地区" :rules="[{ required: true, message: '地区不能为空' }]">
+        <a-cascader v-model="form.province" :options="options" placeholder="请选择地区" allow-clear />
+      </a-form-item>
+      <a-form-item field="options" label="爱好" :rules="[{ type: 'array', minLength: 2, message: '请选择' }]">
+        <a-checkbox-group v-model="form.options">
+          <a-checkbox value="option one">听歌</a-checkbox>
+          <a-checkbox value="option two">看电影</a-checkbox>
+          <a-checkbox value="option three">旅游</a-checkbox>
+          <a-checkbox value="option four">电竞</a-checkbox>
+        </a-checkbox-group>
+      </a-form-item>
+      <a-form-item field="date" label="日期">
+        <a-date-picker v-model="form.date" placeholder="请选择日期" />
+      </a-form-item>
+      <a-form-item field="time" label="时间">
+        <a-time-picker v-model="form.time" placeholder="请选择时间" />
+      </a-form-item>
+      <a-form-item field="radio" label="性别" :rules="[{ required: true, message: '性别不能为空' }]">
+        <a-radio-group v-model="form.radio">
+          <a-radio value="man">男</a-radio>
+          <a-radio value="woman">女</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item field="slider" label="进度" :rules="[{ type: 'number', min: 5, message: '最小为5' }]">
+        <a-slider v-model="form.slider" :max="10" />
+      </a-form-item>
+      <a-form-item field="score" label="评分">
+        <a-rate v-model="form.score" allow-clear />
+      </a-form-item>
+      <a-form-item field="switch" label="状态" :rules="[{ type: 'boolean', true: true, message: '请打开开关' }]">
+        <a-switch v-model="form.switch" />
+      </a-form-item>
+      <a-form-item field="multiSelect" label="多选">
+        <a-select v-model="form.multiSelect" placeholder="请选择" multiple>
+          <a-option value="section one">多选一</a-option>
+          <a-option value="section two">多选二</a-option>
+          <a-option value="section three">多选三</a-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item field="treeSelect" label="分组">
+        <a-tree-select :data="treeData" v-model="form.treeSelect" placeholder="请选择分组" />
+      </a-form-item>
+      <a-form-item>
+        <a-space>
+          <a-button html-type="submit">提交</a-button>
+          <a-button @click="$refs.formRef.resetFields()">重置</a-button>
+        </a-space>
+      </a-form-item>
+    </a-form>
+    {{ form }}
+  </div>
+</template>
+
+<script setup lang="ts">
+const handleSubmit = ({ values, errors }) => {
+  console.log("values:", values, "\nerrors:", errors);
+};
+
+const form = reactive({
+  size: "medium",
+  name: "",
+  age: undefined,
+  section: "",
+  province: "guanggu",
+  options: [],
+  date: "",
+  time: "",
+  radio: "man",
+  slider: 5,
+  score: 5,
+  switch: false,
+  multiSelect: ["section one"],
+  treeSelect: "node1"
+});
+const options = [
+  {
+    value: "hubei",
+    label: "湖北",
+    children: [
+      {
+        value: "wuhan",
+        label: "武汉",
+        children: [
+          {
+            value: "guanggu",
+            label: "光谷"
+          }
+        ]
+      },
+      {
+        value: "xiaogan",
+        label: "孝感"
+      },
+      {
+        value: "huanggang",
+        label: "黄冈"
+      },
+      {
+        value: "xianning",
+        label: "咸宁"
+      }
+    ]
+  },
+  {
+    value: "hunan",
+    label: "湖南",
+    children: [
+      {
+        value: "changsha",
+        label: "长沙",
+        children: [
+          {
+            value: "yuelu",
+            label: "岳麓"
+          }
+        ]
+      }
+    ]
+  }
+];
+const treeData = [
+  {
+    key: "node1",
+    title: "分组01",
+    children: [
+      {
+        key: "node1-01",
+        title: "分组01-01"
+      }
+    ]
+  },
+  {
+    key: "node2",
+    title: "分组02",
+    children: [
+      {
+        key: "node2-01",
+        title: "分组02-01"
+      },
+      {
+        key: "node2-01",
+        title: "分组02-02"
+      }
+    ]
+  }
+];
+</script>
+
+<style lang="scss" scoped></style>

src/views/table-management/custom-table/custom-table.vue

@@ -140,12 +140,11 @@
       @page-change="pageChange"
       @page-size-change="pageSizeChange"
     >
-
+      <template #content="{ record }">
-    <template #content="{ record }">
         <a-space>
           <SvgIcon :name="'word'" :size="18" v-if="record.content == '图文'" />
-          <SvgIcon :name="'video'" :size="18" v-if="record.content == '视频'"/>
+          <SvgIcon :name="'video'" :size="18" v-if="record.content == '视频'" />
-          <SvgIcon :name="'mp3'" :size="18" v-if="record.content == '音频'"/>
+          <SvgIcon :name="'mp3'" :size="18" v-if="record.content == '音频'" />
           <span>{{ record.content }}</span>
         </a-space>
       </template>
@@ -208,7 +207,7 @@ const columns = ref([
     title: "内容载体",
     dataIndex: "content",
     checked: true,
-    slotName: "content",
+    slotName: "content"
   },
   {
     title: "筛选方式",
@@ -390,7 +389,6 @@ const popupVisibleChange = (visible: boolean) => {
         onEnd(e: any) {
           // 移动结束后，获得新旧下标，这里不会实际更改原始值
           const { oldIndex, newIndex } = e;
-          console.log("移动",columns.value, columnsShow.value);
           // 根据新旧下标更改原始值，更改弹窗columns和列表columns
           exchangeArray(columns.value, oldIndex, newIndex);
           exchangeArray(columnsShow.value, oldIndex, newIndex);