fix(加班申请、工作报告、我的绩效): 重构页面样式、修复一系列bug、对不合理的地方进行调整。

src/components/custom/table-search-fields.vue

@@ -22,6 +22,10 @@ export interface SearchField {
   dateType?: 'date' | 'month';
   /** dateRange 字段的日期范围粒度 */
   dateRangeType?: 'daterange' | 'monthrange';
+  /** 日期面板展示格式 */
+  format?: string;
+  /** 自定义范围分隔文案 */
+  rangeSeparator?: string;
   /** 日期字段提交格式 */
   valueFormat?: string;
   /** 占位列数，默认 1 */
@@ -36,6 +40,10 @@ export interface SearchField {
   placeholder?: string;
   /** select 类型的自定义选项渲染函数 */
   renderOption?: (option: Option) => VNode | VNode[] | string;
+  /** 值写回模型前的转换函数 */
+  transformValue?: (value: any) => any;
+  /** 从模型值解析展示值 */
+  resolveValue?: (value: any) => any;
 }
 
 interface Props {
@@ -60,6 +68,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 interface Emits {
+  (e: 'update:modelValue', value: Record<string, any>): void;
   (e: 'search'): void;
   (e: 'reset'): void;
 }
@@ -122,6 +131,19 @@ function handleReset() {
 function handleSearch() {
   emit('search');
 }
+
+function updateFieldValue(field: SearchField, value: any) {
+  const nextValue = field.transformValue ? field.transformValue(value) : value;
+  emit('update:modelValue', {
+    ...props.modelValue,
+    [field.key]: nextValue
+  });
+}
+
+function getFieldValue(field: SearchField) {
+  const value = props.modelValue[field.key];
+  return field.resolveValue ? field.resolveValue(value) : value;
+}
 </script>
 
 <!-- eslint-disable vue/no-mutating-props -->
@@ -139,19 +161,19 @@ function handleSearch() {
           <ElFormItem :label="field.label">
             <ElInput
               v-if="field.type === 'input'"
-              :model-value="props.modelValue[field.key]"
+              :model-value="getFieldValue(field)"
               :placeholder="field.placeholder"
               clearable
               :disabled="props.disabled"
-              @update:model-value="val => (props.modelValue[field.key] = val)"
+              @update:model-value="val => updateFieldValue(field, val)"
             />
             <ElSelect
               v-else-if="field.type === 'select'"
-              :model-value="props.modelValue[field.key]"
+              :model-value="getFieldValue(field)"
               :placeholder="field.placeholder"
               clearable
               :disabled="props.disabled"
-              @update:model-value="val => (props.modelValue[field.key] = val)"
+              @update:model-value="val => updateFieldValue(field, val)"
             >
               <ElOption v-for="opt in field.options" :key="opt.value" :label="opt.label" :value="opt.value">
                 <template v-if="field.renderOption" #default>
@@ -161,34 +183,37 @@ function handleSearch() {
             </ElSelect>
             <ElDatePicker
               v-else-if="field.type === 'date'"
-              :model-value="props.modelValue[field.key]"
+              :model-value="getFieldValue(field)"
               :type="field.dateType || 'date'"
               :placeholder="field.placeholder"
               clearable
               :disabled="props.disabled"
+              :format="field.format"
               :value-format="field.valueFormat || 'YYYY-MM-DD'"
-              @update:model-value="val => (props.modelValue[field.key] = val)"
+              @update:model-value="val => updateFieldValue(field, val)"
             />
             <ElDatePicker
               v-else-if="field.type === 'dateRange'"
-              :model-value="props.modelValue[field.key]"
+              :model-value="getFieldValue(field)"
               :type="field.dateRangeType || 'daterange'"
               :placeholder="field.placeholder"
               clearable
               :disabled="props.disabled"
+              :format="field.format"
               :value-format="field.valueFormat || 'YYYY-MM-DD'"
+              :range-separator="field.rangeSeparator || '至'"
               :start-placeholder="field.dateRangeType === 'monthrange' ? '开始月份' : '开始日期'"
               :end-placeholder="field.dateRangeType === 'monthrange' ? '结束月份' : '结束日期'"
-              @update:model-value="val => (props.modelValue[field.key] = val)"
+              @update:model-value="val => updateFieldValue(field, val)"
             />
             <DictSelect
               v-else-if="field.type === 'dict'"
-              :model-value="props.modelValue[field.key]"
+              :model-value="getFieldValue(field)"
               :dict-code="field.dictCode!"
               :placeholder="field.placeholder"
               :disabled="props.disabled"
               :show-remark="field.showRemark"
-              @update:model-value="val => (props.modelValue[field.key] = val)"
+              @update:model-value="val => updateFieldValue(field, val)"
             />
           </ElFormItem>
         </ElCol>
@@ -236,19 +261,19 @@ function handleSearch() {
           <ElFormItem :label="field.label">
             <ElInput
               v-if="field.type === 'input'"
-              :model-value="props.modelValue[field.key]"
+              :model-value="getFieldValue(field)"
               :placeholder="field.placeholder"
               clearable
               :disabled="props.disabled"
-              @update:model-value="val => (props.modelValue[field.key] = val)"
+              @update:model-value="val => updateFieldValue(field, val)"
             />
             <ElSelect
               v-else-if="field.type === 'select'"
-              :model-value="props.modelValue[field.key]"
+              :model-value="getFieldValue(field)"
               :placeholder="field.placeholder"
               clearable
               :disabled="props.disabled"
-              @update:model-value="val => (props.modelValue[field.key] = val)"
+              @update:model-value="val => updateFieldValue(field, val)"
             >
               <ElOption v-for="opt in field.options" :key="opt.value" :label="opt.label" :value="opt.value">
                 <template v-if="field.renderOption" #default>
@@ -258,34 +283,37 @@ function handleSearch() {
             </ElSelect>
             <ElDatePicker
               v-else-if="field.type === 'date'"
-              :model-value="props.modelValue[field.key]"
+              :model-value="getFieldValue(field)"
               :type="field.dateType || 'date'"
               :placeholder="field.placeholder"
               clearable
               :disabled="props.disabled"
+              :format="field.format"
               :value-format="field.valueFormat || 'YYYY-MM-DD'"
-              @update:model-value="val => (props.modelValue[field.key] = val)"
+              @update:model-value="val => updateFieldValue(field, val)"
             />
             <ElDatePicker
               v-else-if="field.type === 'dateRange'"
-              :model-value="props.modelValue[field.key]"
+              :model-value="getFieldValue(field)"
               :type="field.dateRangeType || 'daterange'"
               :placeholder="field.placeholder"
               clearable
               :disabled="props.disabled"
+              :format="field.format"
               :value-format="field.valueFormat || 'YYYY-MM-DD'"
+              :range-separator="field.rangeSeparator || '至'"
               :start-placeholder="field.dateRangeType === 'monthrange' ? '开始月份' : '开始日期'"
               :end-placeholder="field.dateRangeType === 'monthrange' ? '结束月份' : '结束日期'"
-              @update:model-value="val => (props.modelValue[field.key] = val)"
+              @update:model-value="val => updateFieldValue(field, val)"
             />
             <DictSelect
               v-else-if="field.type === 'dict'"
-              :model-value="props.modelValue[field.key]"
+              :model-value="getFieldValue(field)"
               :dict-code="field.dictCode!"
               :placeholder="field.placeholder"
               :disabled="props.disabled"
               :show-remark="field.showRemark"
-              @update:model-value="val => (props.modelValue[field.key] = val)"
+              @update:model-value="val => updateFieldValue(field, val)"
             />
           </ElFormItem>
         </ElCol>