vue-insagent-pc/src/components/Form/retrievalForm.vue

<template>
  <el-form ref="form" :model="formData" :inline="true" :label-width="labelWidth" size="small">
    <el-row>
      <div>
        <el-col :span="6" v-for="field in formFields" :key="field.label">
          <el-form-item :label="field.label" v-show="field.Retained !== false">
            <template v-if="field.type === 'input'">
              <el-input v-model="formData[field.name]" :placeholder="'请输入' + field.label"></el-input>
            </template>
            <template v-else-if="field.type === 'select'">
              <el-select v-model="formData[field.name]" filterable clearable :placeholder="'请选择' + field.label"
                @change="selectChange($event, field.name)">
                <el-option v-for="(option, index) in field.options" :key="index"
                  :label="field.optionsIabel ? option[field.optionsIabel] : option.name"
                  :value="field.optionsValue ? option[field.optionsValue] : option.id"></el-option>
              </el-select>
            </template>
            <template v-else-if="field.type === 'date'">
              <el-date-picker type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" v-model="formData[field.list]" style="width: 100%;"
                @change="dateChange($event, field.name)"></el-date-picker>
            </template>
            <template v-else-if="field.type === 'switch'">
              <el-switch v-model="formData[field.name]"></el-switch>
            </template>
            <template v-else-if="field.type === 'checkbox'">
              <el-checkbox-group v-model="formData[field.name]">
                <el-checkbox v-for="(option, index) in field.options" :key="index" :label="option.label"
                  :name="field.name"></el-checkbox>
              </el-checkbox-group>
            </template>
            <template v-else-if="field.type === 'radio'">
              <el-radio-group v-model="formData[field.name]">
                <el-radio v-for="(option, index) in field.options" :key="index" :label="option.label"></el-radio>
              </el-radio-group>
            </template>
            <template v-else-if="field.type === 'textarea'">
              <el-input type="textarea" v-model="formData[field.name]"></el-input>
            </template>
          </el-form-item>
        </el-col>
      </div>
      <el-col :span="2" :offset="1" style="margin-top: 10px;" class="fold">
        <span @click="toggleCollapse">折叠筛选信息</span>
        <img src="../../../src/icon/Arrow.png" alt
          :style="{ weith: '10px', height: '10px', transform: `rotate(${isCollapsed ? 0 : 180}deg)` }" />
      </el-col>
      <el-col :span="2" style="text-align: right;">
        <el-button size="small" type="primary" @click="handleSubmit">查询</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  props: {
    fields: {
      type: Array,
      required: true
    },
    labelWidth: {
      type: String,
      default: '120px'
    }
  },
  data() {
    return {
      formFields: [], // 动态表单字段配置
      formData: {}, // 表单数据对象
      isCollapsed: true,
    };
  },
  computed: {
    currentDate() {
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');
      const day = String(today.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  },
  created() {
    this.fields.forEach((field) => {
      if (field.type === 'date' && !this.formData[field.list]) {
        this.$set(this.formData, field.list, [this.currentDate, this.currentDate]);
        this.$set(this.formData, field.name[0], this.currentDate);
        this.$set(this.formData, field.name[1],this.currentDate );
      }
    });
    this.formFields = this.fields;
    this.resetForm();
    this.defaultTime=this.currentDate;
  },

  methods: {
    selectChange(id, filed) {
      switch (filed) {
        case 'provinceId':
            console.log(this.formData)
          break;
        case 'cityId':

          break;
        case 'countyId':

          break;

        default:
          break;
      }
      if (id) {
        this.$emit('areaSelectChange', { id, filed });
      }
    },
    dateChange(event, filed) {
      if (event) {
        this.formData[filed[0]] = event[0];
        this.formData[filed[1]] = event[1];
      } else {
        this.formData[filed[0]] = "";
        this.formData[filed[1]] = "";
      }
    },
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed; // 切换折叠状态
      this.$emit('toggleCollapse', this.isCollapsed);

    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('submit', this.formData);
        } else {
          // 表单验证失败，做相应处理
        }
      });
    },
    resetForm() {
    }
  }
};
</script>
<style scoped lang="scss">
.el-form-item>>>.el-input {
  width: 250px;
}

.el-form-item>>>.el-form-item__content {
  width: 250px;
}

.fold {
  font-size: 14px;
  color: #D42426;
  cursor: pointer;

}

>>>.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
</style>