From 9b0c5f637372e71a98ba7947cf9be216f85f96c0 Mon Sep 17 00:00:00 2001
From: Gary Fu <xuebaiyouling@gmail.com>
Date: Sun, 31 Dec 2023 21:48:42 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E5=8D=95=E6=8C=89=E9=92=AE=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=EF=BC=8C=E7=AE=80=E5=8D=95=E8=A1=A8=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common-form/index.vue          | 47 +++++++++++++++-
 .../common-table/common-table-column.vue      | 35 ++++++++++++
 src/components/common-table/index.vue         | 56 +++++++++++++++++++
 src/components/index.js                       |  2 +
 src/messages/common_cn.js                     |  2 +
 src/messages/common_en.js                     |  2 +
 .../components/global/GlobalSettings.vue      |  1 +
 src/views/tools/Forms.vue                     | 29 +++++++++-
 src/views/tools/Tables.vue                    | 51 +++++++++++++++--
 9 files changed, 219 insertions(+), 6 deletions(-)
 create mode 100644 src/components/common-table/common-table-column.vue
 create mode 100644 src/components/common-table/index.vue

diff --git a/src/components/common-form/index.vue b/src/components/common-form/index.vue
index 405f350..cc008a9 100644
--- a/src/components/common-form/index.vue
+++ b/src/components/common-form/index.vue
@@ -3,6 +3,17 @@ import { computed, ref } from 'vue'
 import cloneDeep from 'lodash/cloneDeep'
 import { $i18nBundle } from '@/messages'
 
+/**
+ * @typedef {FormProps} CommonFormProps
+ * @property {[CommonFormOption]} options 配置选项
+ * @property {boolean} showButtons 是否显示按钮区域
+ * @property {boolean} showSubmit 是否显示提交按钮
+ * @property {boolean} showReset 是否显示重置按钮
+ * @method submitForm 提交逻辑
+ */
+/**
+ * @type {CommonFormProps}
+ */
 const props = defineProps({
   /**
    * @type [CommonFormOption]
@@ -17,6 +28,22 @@ const props = defineProps({
   },
   model: {
     type: Object
+  },
+  showButtons: {
+    type: Boolean,
+    default: true
+  },
+  showSubmit: {
+    type: Boolean,
+    default: true
+  },
+  showReset: {
+    type: Boolean,
+    default: true
+  },
+  submitForm: {
+    type: Function,
+    default () {}
   }
 })
 
@@ -68,8 +95,26 @@ const form = ref(null)
       :model="model"
       :option="option"
     />
+    <el-form-item v-if="showButtons">
+      <el-button
+        v-if="showSubmit"
+        type="primary"
+        @click="submitForm(form)"
+      >
+        {{ $t('common.label.submit') }}
+      </el-button>
+      <el-button
+        v-if="showReset"
+        @click="form.resetFields()"
+      >
+        {{ $t('common.label.reset') }}
+      </el-button>
+      <slot
+        :form="form"
+        name="buttons"
+      />
+    </el-form-item>
     <slot
-      name="default"
       :form="form"
     />
   </el-form>
diff --git a/src/components/common-table/common-table-column.vue b/src/components/common-table/common-table-column.vue
new file mode 100644
index 0000000..f9bffaf
--- /dev/null
+++ b/src/components/common-table/common-table-column.vue
@@ -0,0 +1,35 @@
+<script setup>
+/**
+ * 表格列配置信息，对应el-table-column数据
+ * @typedef {Object} CommonTableColumn
+ * @property {string} label 标签头
+ * @property {string} labelKey 国际化
+ * @property {string} property 数据属性
+ * @property {string} width 宽度
+ * @property {boolean} isOperation 是否是操作列
+ */
+/**
+ * 配置信息
+ */
+const props = defineProps({
+  /**
+   * @type {CommonTableColumn}
+   */
+  column: {
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <el-table-column
+    :label="column.label"
+    :property="column.property"
+    :width="column.width"
+  />
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/common-table/index.vue b/src/components/common-table/index.vue
new file mode 100644
index 0000000..c7dfe47
--- /dev/null
+++ b/src/components/common-table/index.vue
@@ -0,0 +1,56 @@
+<script setup>
+/**
+ * @typedef {TableProps} CommonTableProps
+ * @property {[CommonTableColumn]} columns
+ */
+import CommonTableColumn from '@/components/common-table/common-table-column.vue'
+
+/**
+ * @type CommonTableProps
+ */
+const props = defineProps({
+  /**
+   * @type {[CommonTableColumn]}
+   */
+  columns: {
+    type: Array,
+    required: true
+  },
+  /**
+   * 显示数据
+   */
+  data: {
+    type: Array,
+    default () {
+      return []
+    }
+  },
+  highlightCurrentRow: {
+    type: Boolean,
+    default: true
+  },
+  stripe: {
+    type: Boolean,
+    default: true
+  }
+})
+</script>
+
+<template>
+  <el-table
+    :v-bind="$attrs"
+    :highlight-current-row="highlightCurrentRow"
+    :stripe="stripe"
+    :data="data"
+  >
+    <common-table-column
+      v-for="(column, index) in columns"
+      :key="index"
+      :column="column"
+    />
+  </el-table>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/index.js b/src/components/index.js
index ed6fd52..36c2c70 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -4,6 +4,7 @@ import CommonFormControl from '@/components/common-form-control/index.vue'
 import CommonMenu from '@/components/common-menu/index.vue'
 import CommonMenuItem from '@/components/common-menu-item/index.vue'
 import CommonTabsView from '@/components/common-tabs-view/index.vue'
+import CommonTable from '@/components/common-table/index.vue'
 
 /**
  * 自定义通用组件自动注册
@@ -19,5 +20,6 @@ export default {
     Vue.component('CommonMenu', CommonMenu)
     Vue.component('CommonMenuItem', CommonMenuItem)
     Vue.component('CommonTabsView', CommonTabsView)
+    Vue.component('CommonTable', CommonTable)
   }
 }
diff --git a/src/messages/common_cn.js b/src/messages/common_cn.js
index db4ecc2..28bce54 100644
--- a/src/messages/common_cn.js
+++ b/src/messages/common_cn.js
@@ -21,6 +21,8 @@ common.label.personalCenter = '个人中心'
 common.label.personalInfo = '个人资料'
 common.label.about = '关于'
 common.label.logout = '退出'
+common.label.submit = '提交'
+common.label.reset = '重置'
 
 //* =======================msg=====================//
 common.msg.nonNull = '{0}不能为空'
diff --git a/src/messages/common_en.js b/src/messages/common_en.js
index a33ffce..4bbe482 100644
--- a/src/messages/common_en.js
+++ b/src/messages/common_en.js
@@ -21,6 +21,8 @@ common.label.personalCenter = 'Personal Center'
 common.label.personalInfo = 'Personal Info'
 common.label.about = 'About'
 common.label.logout = 'Logout'
+common.label.submit = 'Submit'
+common.label.reset = 'Reset'
 
 //* =======================msg=====================//
 common.msg.nonNull = '{0} is required.'
diff --git a/src/views/components/global/GlobalSettings.vue b/src/views/components/global/GlobalSettings.vue
index 54a598f..4b0084d 100644
--- a/src/views/components/global/GlobalSettings.vue
+++ b/src/views/components/global/GlobalSettings.vue
@@ -88,6 +88,7 @@ const options = [
     </template>
     <template #default>
       <common-form
+        :show-buttons="false"
         :options="options"
         label-position="left"
       />
diff --git a/src/views/tools/Forms.vue b/src/views/tools/Forms.vue
index f779aca..5ab2537 100644
--- a/src/views/tools/Forms.vue
+++ b/src/views/tools/Forms.vue
@@ -75,11 +75,29 @@ const formOptions = [{
       value: 'unknown'
     }
   ]
+}, {
+  label: '地址',
+  prop: 'address',
+  value: '',
+  attrs: {
+    type: 'textarea'
+  }
 }]
 const userDto = ref({
   userName: '',
   userPassword: ''
 })
+const submitForm = (form) => {
+  console.info(form)
+  form.validate((valid) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!')
+      return false
+    }
+  })
+}
 </script>
 
 <template>
@@ -87,8 +105,17 @@ const userDto = ref({
     <common-form
       :model="userDto"
       :options="formOptions"
+      :submit-form="submitForm"
       label-width="120px"
-    />
+    >
+      <template
+        #buttons="{form}"
+      >
+        <el-button @click="form.resetFields()">
+          自定义按钮
+        </el-button>
+      </template>
+    </common-form>
     <div>
       {{ userDto }}
     </div>
diff --git a/src/views/tools/Tables.vue b/src/views/tools/Tables.vue
index 38038b2..9d186eb 100644
--- a/src/views/tools/Tables.vue
+++ b/src/views/tools/Tables.vue
@@ -1,11 +1,54 @@
 <script setup>
-
+const tableData = [
+  {
+    birthday: '2016-05-03',
+    userName: 'Tom',
+    gender: 'male',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    birthday: '2016-05-02',
+    userName: 'Tom',
+    gender: 'female',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    birthday: '2016-05-04',
+    userName: 'Tom',
+    gender: 'male',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    birthday: '2016-05-01',
+    userName: 'Tom',
+    gender: 'female',
+    address: 'No. 189, Grove St, Los Angeles'
+  }
+]
+/**
+ *
+ * @type {[CommonTableColumn]}
+ */
+const columns = [{
+  label: '用户名',
+  property: 'userName'
+}, {
+  label: '性别',
+  property: 'gender'
+}, {
+  label: '出生日期',
+  property: 'birthday'
+}, {
+  label: '地址',
+  property: 'address'
+}]
 </script>
 
 <template>
-  <div>
-    <strong>表格测试</strong>
-  </div>
+  <common-table
+    :data="tableData"
+    :columns="columns"
+  />
 </template>
 
 <style scoped>