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 1/2] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=B8=80=E4=BA=9B?=
 =?UTF-8?q?=E6=98=BE=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>

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

---
 src/components/common-autocomplete/index.vue  | 23 +++++-----
 src/components/common-form-control/index.vue  | 45 ++++++++++++++++++-
 src/components/common-form/index.vue          | 15 ++++++-
 src/components/common-form/public.d.ts        |  4 ++
 .../common-table/common-table-column.vue      |  2 +-
 src/components/utils/index.js                 | 13 ------
 6 files changed, 74 insertions(+), 28 deletions(-)

diff --git a/src/components/common-autocomplete/index.vue b/src/components/common-autocomplete/index.vue
index 11da421..03bbb65 100644
--- a/src/components/common-autocomplete/index.vue
+++ b/src/components/common-autocomplete/index.vue
@@ -51,7 +51,7 @@ const props = defineProps({
   },
   inputWidth: {
     type: String,
-    default: '200px'
+    default: ''
   },
   autocompleteConfig: {
     type: Object,
@@ -194,10 +194,21 @@ const onInputKeywords = debounce((input) => {
   }
 }, props.debounceTime)
 
+const calcDefaultLabelFunc = () => {
+  if (!props.useIdModel) {
+    const value = props.modelValue
+    return value && isObject(value) ? value[labelProp.value] : ''
+  }
+  return props.defaultLabel
+}
+
+const calcDefaultLabel = computed(calcDefaultLabelFunc)
+
 onMounted(() => {
   onClickOutside(autocompletePopover.value?.popperRef?.contentRef, () => {
     popoverVisible.value = false
   })
+  setAutocompleteLabel(calcDefaultLabel.value)
 })
 
 watch(() => popoverVisible.value, (val) => {
@@ -211,7 +222,6 @@ watch(() => popoverVisible.value, (val) => {
 })
 
 watch(() => props.modelValue, (value) => {
-  console.info('=====================value', value)
   if (!props.useIdModel) {
     setAutocompleteLabel(value && isObject(value) ? value[labelProp.value] : '')
     if (isEmpty(value)) {
@@ -220,13 +230,7 @@ watch(() => props.modelValue, (value) => {
   }
 })
 
-watch(() => {
-  if (!props.useIdModel) {
-    const value = props.modelValue
-    return value && isObject(value) ? value[labelProp.value] : ''
-  }
-  return props.defaultLabel
-}, (label) => {
+watch(calcDefaultLabelFunc, (label) => {
   setAutocompleteLabel(label)
 })
 
@@ -287,7 +291,6 @@ const moveSelection = function (down) {
     currentOnIndex.value = -1
     currentOnRow.value = null
   }
-  console.info('=================', tableRef.value.table, currentOnIndex.value, currentOnRow.value)
   tableRef.value.table?.setCurrentRow(currentOnRow.value)
 }
 
diff --git a/src/components/common-form-control/index.vue b/src/components/common-form-control/index.vue
index b744d6a..6b77616 100644
--- a/src/components/common-form-control/index.vue
+++ b/src/components/common-form-control/index.vue
@@ -5,6 +5,7 @@ import ControlChild from '@/components/common-form-control/control-child.vue'
 import { useInputType } from '@/components/utils'
 import cloneDeep from 'lodash/cloneDeep'
 import { get, set } from 'lodash'
+import dayjs from 'dayjs'
 
 /**
  * @type {{option:CommonFormOption}}
@@ -38,9 +39,40 @@ const modelAttrs = computed(() => {
   if (inputType.value === 'common-autocomplete' && option.getAutocompleteLabel) {
     attrs.defaultLabel = option.getAutocompleteLabel(props.model, option)
   }
+  if (inputType.value === 'el-date-picker') {
+    attrs.disabledDate = (date) => {
+      const option = props.option
+      let result = false
+      if (option.minDate) {
+        result = date.getTime() < dayjs(option.minDate).startOf('d').toDate().getTime()
+      }
+      if (result && option.maxDate) {
+        result = date.getTime() > dayjs(option.maxDate).startOf('d').toDate().getTime()
+      }
+      return result
+    }
+  }
+  attrs.defaultValue = modelValue.value || option.minDate
   return attrs
 })
 
+watch(() => [inputType.value, props.option.minDate, props.option.maxDate], ([type, minDate, maxDate]) => {
+  const option = props.option
+  const date = modelValue.value
+  if (type === 'el-date-picker' && date && !option.disabled && option.clearInvalidDate !== false) {
+    let invalid = false
+    if (minDate) {
+      invalid = date.getTime() < dayjs(option.minDate).startOf('d').toDate().getTime()
+    }
+    if (invalid && maxDate) {
+      invalid = date.getTime() > dayjs(option.maxDate).startOf('d').toDate().getTime()
+    }
+    if (invalid) {
+      modelValue.value = undefined
+    }
+  }
+})
+
 const label = computed(() => {
   const option = props.option
   if (option.labelKey) {
@@ -142,6 +174,12 @@ const controlChange = (...args) => {
 
 const formItemEnabled = computed(() => props.option.enabled !== false)
 
+const controlLabelWidth = computed(() => {
+  const option = props.option
+  const labelWidth = props.labelWidth
+  return option.labelWidth || modelAttrs.value.labelWidth || labelWidth
+})
+
 </script>
 
 <template>
@@ -150,13 +188,15 @@ const formItemEnabled = computed(() => props.option.enabled !== false)
     ref="formItemRef"
     :rules="rules"
     :prop="option.prop"
-    :label-width="labelWidth"
+    :label-width="controlLabelWidth"
+    v-bind="$attrs"
   >
     <template
       v-if="showLabel"
       #label
     >
-      <span>{{ label }}</span>
+      <slot name="beforeLabel" />
+      <span :class="option.labelCls">{{ label }}</span>
       <el-tooltip
         v-if="option.tooltip||option.tooltipFunc"
         class="box-item"
@@ -200,6 +240,7 @@ const formItemEnabled = computed(() => props.option.enabled !== false)
         />
       </template>
     </component>
+    <slot name="after" />
   </el-form-item>
 </template>
 
diff --git a/src/components/common-form/index.vue b/src/components/common-form/index.vue
index 63d6c37..fc2f03c 100644
--- a/src/components/common-form/index.vue
+++ b/src/components/common-form/index.vue
@@ -23,6 +23,14 @@ const props = defineProps({
     type: Object,
     default: null
   },
+  className: {
+    type: String,
+    default: 'common-form'
+  },
+  buttonStyle: {
+    type: [String, Object],
+    default: ''
+  },
   validateOnRuleChange: {
     type: Boolean,
     default: false
@@ -78,7 +86,7 @@ defineExpose({
 <template>
   <el-form
     ref="form"
-    class="common-form"
+    :class="className"
     :model="formModel"
     :label-width="labelWidth"
     v-bind="$attrs"
@@ -106,7 +114,10 @@ defineExpose({
       :model="formModel"
       name="default"
     />
-    <el-form-item v-if="showButtons">
+    <el-form-item
+      v-if="showButtons"
+      :style="buttonStyle"
+    >
       <el-button
         v-if="showSubmit"
         type="primary"
diff --git a/src/components/common-form/public.d.ts b/src/components/common-form/public.d.ts
index 86671f2..871e53a 100644
--- a/src/components/common-form/public.d.ts
+++ b/src/components/common-form/public.d.ts
@@ -14,6 +14,10 @@ export interface CommonFormOption {
     label?: string;
     /** 用于国际化的label */
     labelKey?: string;
+    /**
+     * 样式自定义
+     */
+    labelCls?: string;
     /** 是否必填,后面解析成为rules的一部分 */
     required?: boolean;
     /** 正则表达式验证，解析成为rules的一部分 */
diff --git a/src/components/common-table/common-table-column.vue b/src/components/common-table/common-table-column.vue
index 5a82ae0..7f45000 100644
--- a/src/components/common-table/common-table-column.vue
+++ b/src/components/common-table/common-table-column.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { formatDate } from '@/components/utils'
+import { formatDate } from '@/utils'
 import { computed } from 'vue'
 import { get } from 'lodash'
 
diff --git a/src/components/utils/index.js b/src/components/utils/index.js
index 0cff6b5..6c767b5 100644
--- a/src/components/utils/index.js
+++ b/src/components/utils/index.js
@@ -1,6 +1,5 @@
 import { ref } from 'vue'
 import { $i18nBundle } from '@/messages'
-import dayjs from 'dayjs'
 
 const calcWithIf = menuItem => {
   ['icon', 'labelKey', 'label', 'html'].forEach(key => {
@@ -74,15 +73,3 @@ export const useParentRoute = function (route) {
   }
   return route
 }
-
-export const formatDate = (date, format) => {
-  if (date) {
-    return dayjs(date).format(format || 'YYYY-MM-DD HH:mm:ss')
-  }
-}
-
-export const formatDay = (date, format) => {
-  if (date) {
-    return dayjs(date).format(format || 'YYYY-MM-DD')
-  }
-}