saas_member/src/components/searchBoxNew.vue

<template>
  <div id="searchBoxNew">
    <div class="inputListBoxs">
      <el-form
        @submit.native.prevent="() => {}"
        :inline="true"
        :model="formData"
        class="tsxnz demo-form-inline"
      >
        <el-form-item
          v-for="(item, index) in formListComput(formList)"
          :key="index"
          :label="item.label"
        >
          <!-- 自定义select -->
          <el-select
            :clearable="item.noClear === false ? false : true"
            v-if="item.scope === 'select'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            :size="size"
          >
            <el-option
              v-for="(items, indexs) in item.options"
              :key="indexs"
              :label="items.label"
              :value="items.value"
              :disabled="items.disable"
            ></el-option>
          </el-select>
          <div v-else-if="item.scope === 'numList'">
            <el-input-number
              :controls="false"
              v-model="formData[item.prop1]"
              controls-position="right"
              :min="0"
              :max="100"
              :size="size"
              @change="
                handleChanges(formData[item.prop1], formData[item.prop2])
              "
            ></el-input-number
            >~
            <el-input-number
              :controls="false"
              v-model="formData[item.prop2]"
              controls-position="right"
              :min="0"
              :max="100"
              :size="size"
              @change="
                handleChanges(formData[item.prop1], formData[item.prop2])
              "
            ></el-input-number>
          </div>
          <el-input-number
            v-else-if="item.scope === 'inputNumber'"
            v-model="formData[item.prop]"
            controls-position="right"
            :min="0"
            :max="100"
            :size="size"
          ></el-input-number>
          <el-input
            v-else-if="item.scope === 'textarea' && formData[item.prop]"
            type="textarea"
            :size="size"
            readonly
            :rows="3"
            placeholder="请输入身份证"
            v-model="formData[item.prop]"
          >
          </el-input>
          <el-cascader
            v-else-if="item.scope === 'cascader'"
            v-model="formData[item.prop]"
            :options="item.options"
            :size="size"
            :props="{
              label: item.props.label,
              value: item.props.value,
              checkStrictly: true,
              emitPath: false,
            }"
          ></el-cascader>
          <el-cascader
            v-else-if="item.scope === 'cascaderDZ'"
            v-model="formData[item.prop]"
            :options="item.options"
            :size="size"
            :props="{
              label: item.props.label,
              value: item.props.value,
              checkStrictly: true,
              emitPath: false,
            }"
            clearable
          ></el-cascader>
          <el-date-picker
            v-else-if="item.scope === 'datePicker'"
            v-model="formData[item.prop || item.scope]"
            :type="item.type || 'datetimerange'"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            :size="size"
            value-format="timestamp"
            @change="
              (val) => {
                change3(val, item);
              }
            "
          >
          </el-date-picker>
          <el-date-picker
            v-else-if="item.scope === 'datePickerA'"
            v-model="formData[item.prop]"
            type="datetime"
            :size="size"
            :placeholder="item.placeholder"
            value-format="timestamp"
          >
          </el-date-picker>
          <div v-else-if="item.scope === 'moreDataPicker'">
            <el-date-picker
              v-model="formData[item.prop1]"
              :type="item.Diszing ? 'datetime' : 'date'"
              value-format="timestamp"
              :size="size"
              :placeholder="item.placeholder1"
              @change="change1(item.prop1, item.prop2)"
            >
            </el-date-picker>
            <el-date-picker
              style="margin-left: 10px"
              v-model="formData[item.prop2]"
              :type="item.Diszing ? 'datetime' : 'date'"
              :size="size"
              value-format="timestamp"
              :placeholder="item.placeholder2"
              @change="change2(item.prop1, item.prop2)"
            >
            </el-date-picker>
          </div>
          <el-input
            :style="item.prop === 'searchKey' ? 'width:260px;' : ''"
            v-else-if="!item.scope"
            clearable
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            :size="size"
            @keyup.enter.native="search"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="advanced"
            :size="size"
            type="success"
            @click="emitAdvanced"
            >{{ advancedName }}</el-button
          >
          <el-button :size="size" type="primary" @click="search"
            >查询</el-button
          >
          <el-button :size="size" @click="init">重置</el-button>
          <slot name="customize"></slot>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  props: ["formList", "formData", "advanced", "advancedName"], //参考文档 component.md
  data() {
    return {
      size: "small", //输入框尺寸类型
      pickerOptions: {
        //日期选择器近期功能
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  computed: {
    /**
     * @remarks 过滤选择器列表
     */
    formListComput: function () {
      return function (item) {
        var newOption = JSON.parse(JSON.stringify(item));
        const arrsy = newOption.filter((items) => {
          return items;
        });

        return arrsy;
      };
    },
  },
  watch: {},
  methods: {
    /**
     * @remark 高级搜索
     */
    emitAdvanced() {
      this.$emit("Advanced", this.formData);
    },
    /**
     *
     * @param {int} data1
     * @param {int} data2
     * @remark 日期搜索-时间开始选择器触发
     */
    change1(data1, data2) {
      if (this.formData[data1]) {
        if (
          this.formData[data2] &&
          this.formData[data1] > this.formData[data2]
        ) {
          this.formData[data1] = "";
          this.$message.warning("开始时间不能大于结束时间,请重新选择开始时间");
        }
      }
    },
    /**
     *
     * @param {int} data1
     * @param {int} data2
     * @remark 日期搜索-时间结束选择器触发
     */
    change2(data1, data2) {
      if (this.formData[data2]) {
        if (
          this.formData[data1] &&
          this.formData[data2] < this.formData[data1]
        ) {
          this.formData[data2] = "";
          this.$message.warning("结束时间不能小于开始时间,请重新选择结束时间");
        }
      }
    },
    change3(val, { prop1, prop2 }) {
      console.log(val, prop1, prop2);
      if (val) {
        this.formData[prop1] = val[0];
        this.formData[prop2] = val[1];
      } else {
        this.formData[prop1] = undefined;
        this.formData[prop2] = undefined;
      }
    },
    /**
     * @remark 搜索
     */
    search() {
      this.$emit("search", 1);
    },
    /**
     * @remark 重置
     */
    init() {
      this.$emit("init");
    },
    /**
     *
     * @param {int} int1
     * @param {int} int2
     * @remark 数值取值范围选择器
     */
    handleChanges(int1, int2) {
      if (int1 !== undefined && int2 !== undefined) {
        if (int1 > int2) {
          this.$message.error("请规范输入取值范围");
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
#searchBoxNew {
  margin-bottom: 20px;
}
.fon_s {
  font-size: 14px;
  color: #6b6b6b;
}
.fon_sIcon {
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iconStyS {
  font-size: 24px;
  font-weight: bold;
  color: red;
}
.inputListBox {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.inputListBoxs {
  display: flex;
  margin-bottom: 12px;
}
.tsxnz {
  flex: 1;
  /deep/ .el-form-item {
    margin-bottom: 0px;
  }
}
</style>