From 4c8dd189b6988f1adfe010ca1153a7e7027ec24f Mon Sep 17 00:00:00 2001
From: "gary.fu" <xuebaiyouling@gmail.com>
Date: Mon, 29 Jan 2024 09:25:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=B8=80=E4=BA=9B=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common-form-control/common-form-label.vue |  23 ++++
 src/components/common-table-form/index.vue    | 100 ++++++++++++++++++
 .../common-table-form/table-form-control.vue  |  50 +++++++++
 3 files changed, 173 insertions(+)
 create mode 100644 src/components/common-form-control/common-form-label.vue
 create mode 100644 src/components/common-table-form/index.vue
 create mode 100644 src/components/common-table-form/table-form-control.vue

diff --git a/src/components/common-form-control/common-form-label.vue b/src/components/common-form-control/common-form-label.vue
new file mode 100644
index 0000000..797b391
--- /dev/null
+++ b/src/components/common-form-control/common-form-label.vue
@@ -0,0 +1,23 @@
+<script setup>
+defineProps({
+  component: {
+    type: Object,
+    default: null
+  }
+})
+</script>
+
+<template>
+  <div class="common-form-label">
+    <slot />
+    <component
+      :is="component"
+      v-if="component"
+      v-bind="$attrs"
+    />
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/common-table-form/index.vue b/src/components/common-table-form/index.vue
new file mode 100644
index 0000000..5d76ba6
--- /dev/null
+++ b/src/components/common-table-form/index.vue
@@ -0,0 +1,100 @@
+<script setup>
+import { computed } from 'vue'
+import TableFormControl from '@/components/common-table-form/table-form-control.vue'
+
+const props = defineProps({
+  formOptions: {
+    type: Array,
+    default: () => []
+  },
+  model: {
+    type: Object,
+    required: true
+  },
+  dataListKey: {
+    type: String,
+    default: 'items'
+  },
+  showOperation: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const dataList = computed(() => {
+  return props.model[props.dataListKey] || []
+})
+
+const emit = defineEmits(['delete', 'change'])
+
+const deleteItem = (item, index) => {
+  emit('delete', {
+    item, index
+  })
+}
+
+const formChange = ($event, row, $index, option) => {
+  const args = [$event, {
+    model: row,
+    index: $index,
+    option
+  }]
+  if (option.formChange) { // 动态表单change事件
+    option.formChange(...args)
+  }
+  emit('change', ...args)
+}
+
+const options = computed(() => {
+  return props.formOptions.filter(option => option.enabled !== false)
+})
+
+</script>
+
+<template>
+  <el-table
+    :data="dataList"
+    border
+    class="common-table-form"
+  >
+    <el-table-column
+      v-for="(option, index) in options"
+      :key="index"
+      :label="option.label||$t(option.labelKey)"
+      :width="option.width"
+    >
+      <template #default="{row, $index}">
+        <table-form-control
+          :model="row"
+          label-width="0"
+          :option="option"
+          :prop="`${dataListKey}.${$index}.${option.prop}`"
+          @change="formChange($event, row, $index, option)"
+        />
+      </template>
+    </el-table-column>
+    <el-table-column
+      v-if="showOperation"
+      :label="$t('common.label.operation')"
+    >
+      <template #default="{row, $index}">
+        <div class="el-form-item">
+          <el-link
+            type="danger"
+            :underline="false"
+            @click="deleteItem(row, $index)"
+          >
+            <common-icon
+              icon="CloseBold"
+              size="18"
+            />
+          </el-link>
+        </div>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/common-table-form/table-form-control.vue b/src/components/common-table-form/table-form-control.vue
new file mode 100644
index 0000000..d4cdb03
--- /dev/null
+++ b/src/components/common-table-form/table-form-control.vue
@@ -0,0 +1,50 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  /**
+   * @type {CommonFormOption}
+   */
+  option: {
+    type: Object,
+    required: true
+  },
+  model: {
+    type: Object,
+    required: true
+  },
+  labelWidth: {
+    type: String,
+    default: null
+  },
+  prop: {
+    type: String,
+    default: ''
+  }
+})
+
+const dynamicOption = computed(() => {
+  let option = props.option
+  if (option.dynamicOption) {
+    return { ...option.dynamicOption(props.model, option) }
+  } else if (option.dynamicAttrs) {
+    option = { ...option, attrs: option.dynamicAttrs(props.model, option) }
+  }
+  return option
+})
+
+</script>
+
+<template>
+  <common-form-control
+    :model="model"
+    :label-width="labelWidth"
+    :option="dynamicOption"
+    :prop="prop"
+    v-bind="$attrs"
+  />
+</template>
+
+<style scoped>
+
+</style>