优化一些显示问题

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)
 }
 

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>
 

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"

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的一部分 */

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'
 

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')
-  }
-}