From 5355e4fd3ecf28589743d278240d17a5ffaeafe6 Mon Sep 17 00:00:00 2001
From: "gary.fu" <xuebaiyouling@gmail.com>
Date: Thu, 4 Jan 2024 11:06:38 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E8=B7=B3=E8=BD=AC=E5=A4=84?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/main.css                           | 11 +++
 src/components/common-form/index.vue          |  4 +-
 .../common-table/common-table-column.vue      |  8 +-
 src/route/ToolsRoutes.js                      |  2 +-
 src/views/tools/TableEdit.vue                 | 76 ++++++++++++++++---
 src/views/tools/Tables.vue                    | 11 ++-
 6 files changed, 90 insertions(+), 22 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index a8f1977..db456b8 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -85,6 +85,17 @@ html, body, #app, .index-container {
     display: block;
 }
 
+.container-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 20px;
+}
+
+.form-edit-width {
+    width:70%
+}
+
 /**
  * slide-fade动画
  */
diff --git a/src/components/common-form/index.vue b/src/components/common-form/index.vue
index 64a5fa4..089a687 100644
--- a/src/components/common-form/index.vue
+++ b/src/components/common-form/index.vue
@@ -119,10 +119,10 @@ defineExpose({
         {{ $t('common.label.reset') }}
       </el-button>
       <el-button
-        v-if="showBack"
+        v-if="showBack||backUrl"
         @click="backUrl?$router.push(backUrl):$router.go(-1)"
       >
-        {{ $t('common.label.reset') }}
+        {{ $t('common.label.back') }}
       </el-button>
       <slot
         :form="form"
diff --git a/src/components/common-table/common-table-column.vue b/src/components/common-table/common-table-column.vue
index d7d81bf..bffed62 100644
--- a/src/components/common-table/common-table-column.vue
+++ b/src/components/common-table/common-table-column.vue
@@ -10,7 +10,6 @@
  * @property {string} slot 自定义插槽
  * @property [ButtonProps] buttons 自定义按钮
  * @property {Object} attrs 其他属性
- * @property {string} link 链接地址
  * @property {Object} linkAttrs 链接配置
  * @method click 点击事件
  * @method formatter 格式化
@@ -47,15 +46,14 @@ const props = defineProps({
     :formatter="column.formatter"
   >
     <template
-      v-if="column.slot||column.link||column.click"
+      v-if="column.slot||column.click"
       #default="scope"
     >
       <el-link
-        v-if="column.link||column.click"
-        :href="column.link"
+        v-if="column.click"
         type="primary"
         v-bind="column.linkAttrs"
-        @click="column.click&&column.click(scope.row, scope)"
+        @click="column.click(scope.row, scope)"
       >
         {{ scope.row[column.property] }}
       </el-link>
diff --git a/src/route/ToolsRoutes.js b/src/route/ToolsRoutes.js
index 9396a39..b7f252f 100644
--- a/src/route/ToolsRoutes.js
+++ b/src/route/ToolsRoutes.js
@@ -18,7 +18,7 @@ export default [{
     name: 'tables-index',
     component: () => import('@/views/tools/Tables.vue')
   }, {
-    path: 'edit',
+    path: 'edit/:id',
     name: 'tables-edit',
     component: () => import('@/views/tools/TableEdit.vue'),
     meta: {
diff --git a/src/views/tools/TableEdit.vue b/src/views/tools/TableEdit.vue
index e7b5331..2d21543 100644
--- a/src/views/tools/TableEdit.vue
+++ b/src/views/tools/TableEdit.vue
@@ -1,19 +1,71 @@
 <script setup>
-import { useRouter } from 'vue-router'
-const router = useRouter()
+import { ref } from 'vue'
+
+const userDto = ref({})
+/**
+ * @type {[CommonFormOption]}
+ */
+const userFormOptions = [{
+  label: '中文名',
+  prop: 'nameCn',
+  placeholder: '请输入中文名',
+  required: true
+}, {
+  label: '英文名',
+  prop: 'nameEn',
+  placeholder: '请输入英文名',
+  required: true
+}, {
+  label: '出生日期',
+  type: 'date-picker',
+  prop: 'birthday',
+  value: '',
+  placeholder: '选择出生日期',
+  required: true
+}, {
+  label: '性别',
+  type: 'radio-group',
+  prop: 'gender',
+  value: '',
+  required: true,
+  children: [
+    {
+      label: '男',
+      value: 'male'
+    },
+    {
+      label: '女',
+      value: 'female'
+    }
+  ]
+}, {
+  label: '地址',
+  prop: 'address',
+  value: '',
+  attrs: {
+    type: 'textarea'
+  }
+}]
+const submitForm = form => {
+  form.validate(valid => {
+    if (valid) {
+      console.log('submit', userDto.value)
+    }
+  })
+}
 </script>
 
 <template>
-  <div>
-    <strong>编辑数据</strong>
-    <br>
-    <el-link
-      type="primary"
-      @click="router.replace('/tables')"
-    >
-      {{ $t('common.label.back') }}
-    </el-link>
-  </div>
+  <el-container class="container-center">
+    <common-form
+      class="form-edit-width"
+      :model="userDto"
+      :options="userFormOptions"
+      label-width="120px"
+      back-url="/tables"
+      @submit-form="submitForm"
+    />
+  </el-container>
 </template>
 
 <style scoped>
diff --git a/src/views/tools/Tables.vue b/src/views/tools/Tables.vue
index 8750bf6..d102b4d 100644
--- a/src/views/tools/Tables.vue
+++ b/src/views/tools/Tables.vue
@@ -2,6 +2,9 @@
 import { onMounted, ref } from 'vue'
 import { loadUsersResult } from '@/services/user/UserService'
 import { useDefaultPage } from '@/config'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
 const page = ref(useDefaultPage())
 
@@ -27,11 +30,15 @@ onMounted(() => {
 const columns = [{
   label: '中文名',
   property: 'nameCn',
-  link: '#/tables/edit'
+  click (data) {
+    router.push(`tables/edit/${data.id}`)
+  }
 }, {
   label: '英文名',
   property: 'nameEn',
-  link: '#/tables/edit'
+  click (data) {
+    router.push(`tables/edit/${data.id}`)
+  }
 }, {
   label: '性别',
   property: 'gender',