表格跳转处理

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>

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',