advises-admin/src/components/from/index.vue

<template>
  <el-form label-position="right" label-width="auto" class="layout-container-form"
    :model="form" @submit.prevent>
    <el-row :gutter="24">
      <el-col v-for="item in formItems" :key="item.prop" :span="item.colSpan || 8" :xs="24" :sm="12" :md="12" :lg="8"
        :xl="6">
        <el-form-item :label="item.label" :label-width="item.labelWidth" class="form-item">
          <el-input v-if="item.type === 'append'" v-model.number="form[item.prop]" :placeholder="item.placeholder"
            clearable @clear="form[item.prop] = ''" class="fixed-width-input">
            <template #append>岁</template>
          </el-input>
          <el-input v-if="item.type === 'input'" v-model.trim="form[item.prop]"
            :placeholder="form[item.placeholder] || '请输入'" :clearable="true" @keyup.enter="handleEnter(item)"
            @clear="form[item.prop] = ''" class="fixed-width-input"></el-input>
          <el-select v-else-if="item.type === 'select'" v-model="form[item.prop]" :placeholder="item.placeholder || '请选择'"
            filterable :clearable="item.clearable === false ? false : true" @clear="form[item.prop] = ''"
            class="fixed-width-select" @change="handleSelect(form[item.prop], item)">
            <el-option v-for="option in item.options" :key="option.value" :label="option.label"
              :value="option.value"></el-option>
          </el-select>
          <el-select v-else-if="item.type === 'selectGroup'" v-model="form[item.prop]" :clearable="true" filterable
            class="fixed-width-select">
            <el-option-group v-for="group in item.options" :key="group.id" :label="group.shelfName">
              <el-option v-for="s in group.children" :key="s.id" :label="s.shelfName" :value="s.shelfName" />
            </el-option-group>
          </el-select>
          <div v-else-if="item.type === 'date'">
            <el-date-picker v-model="form[item.prop]" :type="item.dateType" :placeholder="item.placeholder"
              :clearable="true" class="fixed-width-picker" style="width: 250px;"></el-date-picker>
          </div>
          <div v-else-if="item.type === 'daterange'">
            <el-date-picker v-model="form[item.prop]" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" size="default" :clearable="true" style="width: 230px;" />
          </div>
          <div v-else-if="item.type === 'date'">
            <el-date-picker v-model="form[item.prop]" type="date" :placeholder="item.placeholder || '请选择'" :size="default" />
          </div>
          <el-text v-if="item.type === 'text'">{{ item.label }}</el-text>
          <div v-if="item.type === 'table'">
            <slot></slot>
          </div>
        </el-form-item>
      </el-col>
      <el-col v-if="is_button" :span="6" class="is_button" :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
        <div v-if="formItems.length < 3" style="margin-left: 200px;"></div>
        <div v-else style="width:15px"></div>
        <el-button type="primary" :style="{ marginLeft: !is_reset ? '100px' : '' }" @click="submitForm">搜索</el-button>
        <el-button class="default-but" @click="resetForm" v-if="is_reset">重置</el-button>
        <el-button v-if="is_add_button" type="primary" @click="addForm">+ {{ is_add_button }}</el-button>
      </el-col>
    </el-row>

  </el-form>
</template>

<script>
import { reactive, onBeforeMount,watchEffect } from "vue";

export default {
  props: {
    formItems: {
      type: Array,
      required: true,
    },
    // 是否显示按钮
    is_button: {
      type: Boolean,
      default: true,
    },
    // 重置按钮
    is_reset: {
      type: Boolean,
      default: true,
    },
    // 自定义按钮
    is_add_button: {
      type: String,
      default: '',
    }
  },
  setup(props, { emit }) {
    const form = reactive({
      // 表单项的初始值
    });
    
    function initFormDefaults() {
      props.formItems.forEach(item => {
        // console.log('item', item)
        if (item.defaultVal) {
          Object.assign(form, {
            [item.prop]: item.defaultVal
          })
        }
      })
    }
    
    function submitForm() {
      // 执行搜索逻辑
      // 可以通过 form 获取表单数据进行搜索操作
      // console.log("搜索表单提交", form);
      // 触发自定义事件，并将数据作为参数传递给父组件
      emit("formSubmitted", form);
    }
    function handleEnter(item) {
      // 当用户按下回车键时，执行搜索逻辑
      if (item.type === "input" && item.needEnterEvent) {
        submitForm();
      }
    }

    function resetForm() {
      // 重置表单
      for (const item of props.formItems) {
        form[item.prop] = null;
      }
      emit("formReset");
      // 重置其他表单项的值
    }

    function addForm() {
      emit('addForm')
    }

    function handleSelect(e,item) {
      // console.log('e :===>>', e);
      // console.log('e :===>>', item);
      emit('formChangeSelect',item,e)
    }

    onBeforeMount(() => {
      initFormDefaults()
    })

    watchEffect(() => {
      initFormDefaults()
    })

    return {
      form,
      submitForm,
      resetForm,
      handleEnter,
      addForm,
      handleSelect,
    };
  },
};
</script>

<style scoped>
.fixed-width-input,
.fixed-width-select,
.fixed-width-picker {
  min-width: 250px;
  max-width: 250px;     
}

:deep() {
  .fixed-width-input .el-input__wrapper,
  .fixed-width-select .el-input__wrapper,
  .fixed-width-picker .el-input__wrapper {
    background-color: var(--system-page-background);
    color: var(--system-page-color);
    border-color: var(--system-page-border-color);
  }

  .el-input__wrapper,
  .default-but {
    background-color: var(--system-page-background);
    color: var(--system-page-color);
    border-color: var(--system-page-border-color);
  }
}


.is_button {
  display: flex;
  text-align: center;
  margin-top: 15px;
}


::v-deep(.custom-date-picker .el-input__inner) {
  width: 250px !important;
  /* 你想要设置的宽度 */
  border-bottom-color: red !important;
}
</style>