表格跳转处理

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动画
  */

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"

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"
+        v-if="column.click"
-        :href="column.link"
         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>

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: {

src/views/tools/TableEdit.vue

@@ -1,19 +1,71 @@
 <script setup>
-import { useRouter } from 'vue-router'
+import { ref } from 'vue'
-const router = useRouter()
+
+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>
+  <el-container class="container-center">
-    <strong>编辑数据</strong>
+    <common-form
-    <br>
+      class="form-edit-width"
-    <el-link
+      :model="userDto"
-      type="primary"
+      :options="userFormOptions"
-      @click="router.replace('/tables')"
+      label-width="120px"
-    >
+      back-url="/tables"
-      {{ $t('common.label.back') }}
+      @submit-form="submitForm"
-    </el-link>
+    />
-  </div>
+  </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',