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

<template>
  <el-form
    ref="form"
    :model="formData"
    :inline="true"
    :label-width="labelWidth"
    size="small"
  >
    <el-row>
      <el-col
        :span="6"
        v-for="field in formFields"
        :key="field.label"
        v-show="field.Retained !== false"
      >
        <el-form-item :label="field.label">
          <template v-if="field.type === 'input'">
            <el-input
              v-model="formData[field.name]"
              :placeholder="'请输入' + field.label"
              clearable
            ></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="field.list == 'payList' ? 'datetimerange' : 'daterange'"
              :format="field.list == 'payList' ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'"
              :value-format="field.list == 'payList' ? 'yyyy-MM-dd HH:mm:ss' : '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>
      <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 v-if="isExport" size="small" type="primary" @click="exportFileSubmit"
          >导出</el-button
        >
        <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",
    },
    dateType :{
      type: String,
      default: "0",
    },
    isExport:{
      type:Boolean,
      default:false,
    }
  },
  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(this.dateType=="1"){
        if (field.label === "报价时间" && !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);
        }
        if (field.label === "签单时间" && !this.formData[field.list]) {
          this.$set(this.formData, field.list, [
            '',
            '',
          ]);
          this.$set(this.formData, field.name[0], '');
          this.$set(this.formData, field.name[1], '');
        }
      }else if(this.dateType=="3"){
        if (field.label === "报价时间" && !this.formData[field.list]) {
          this.$set(this.formData, field.list, [
            '',
            '',
          ]);
          this.$set(this.formData, field.name[0], '');
          this.$set(this.formData, field.name[1], '');
        }
        if (field.label === "签单时间" && !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);
    },
    //导出
    exportFileSubmit(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("exportSubmit", this.formData);
        } else {
          // 表单验证失败，做相应处理
        }
      });
    },
    //查询
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("submit", this.formData);
        } else {
          // 表单验证失败，做相应处理
        }
      });
    },
    resetForm() {},
  },
};
</script>
<style scoped lang="scss">
.el-row {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.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>