saas_masterPlatform/src/components/searchBoxNew.vue

<template>
  <div id="searchBoxNew">
    <div class="inputListBox" v-if="topType">
      <div class="fon_s">商品类型：</div>
      <div>
        <el-button
          :type="formData.goodsType === item.value ? 'primary' : ''"
          v-for="(item, index) in $methodsTools.getGoodsType(false)"
          :key="index"
          @click="topSearch(item.value)"
          >{{ item.label }}</el-button
        >
      </div>
    </div>
    <div class="inputListBox" v-if="shType">
      <div class="fon_s">审核状态：</div>
      <div>
        <el-button
          :type="formData.status === item.value ? 'primary' : ''"
          v-for="(item, index) in lists5"
          :key="index"
          @click="topSearchsh(item.value)"
          >{{ item.label }}</el-button
        >
      </div>
    </div>
    <div class="inputListBoxs">
      <div
        class="fon_s"
        style="padding-top: 10px; width: 70px; text-align: end"
        v-if="redIcon !== false && false"
      >
        筛选：
      </div>
      <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"
        >
          <!-- 教育类型 -->
          <el-select
            v-if="item.scope === 'educationType'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            @change="changeEducationType"
          >
            <el-option
              v-for="(items, indexs) in educationType"
              v-show="
                !item.filter ||
                (item.filter && items.educationName === '继续教育')
              "
              :key="indexs"
              :label="
                item.schemeName && items.schemeName
                  ? items.schemeName + ' - ' + items.educationName
                  : items.educationName
              "
              :value="items.id"
            ></el-option>
          </el-select>
          <!-- 项目类型 -->
          <el-select
            v-else-if="item.scope === 'projectLevel'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
          >
            <el-option
              v-for="(items, indexs) in newProjectLevel"
              :key="indexs"
              :label="items.projectName"
              :value="items.id"
            ></el-option>
          </el-select>
          <!-- 业务层次 -->
          <el-select
            v-else-if="item.scope === 'businessLevel'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            @change="changeBusinessLevel($event)"
          >
            <el-option
              v-for="(items, indexs) in newBusinessLevel"
              :key="indexs"
              v-show="
                !item.filter ||
                (item.filter &&
                  (items.projectName === '造价师' ||
                    items.projectName === '建造师') &&
                  items.businessName === '二级')
              "
              :label="items.projectName + '-' + items.businessName"
              :value="items.id"
            ></el-option>
          </el-select>
          <!-- 店铺管理列表 -->
          <el-select
            v-else-if="item.scope === 'merList'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            clearable
            filterable
          >
            <el-option
              v-for="(items, indexs) in merList"
              :key="indexs"
              :label="items.merName"
              :value="items.merId"
            ></el-option>
          </el-select>
          <!-- 商户店铺列表 -->
          <el-select
            v-else-if="item.scope === 'storeList'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            clearable
            filterable
          >
            <el-option
              v-for="(items, indexs) in storeList"
              :key="indexs"
              :label="items.storeName"
              :value="items.storeId"
            ></el-option>
          </el-select>
          <!-- 机构列表 -->
          <el-select
            v-else-if="item.scope === 'systemtenantlist'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            clearable
            :multiple="item.multiple"
            filterable
          >
            <el-option
              v-for="(items, indexs) in systemtenantlist"
              :key="indexs"
              :label="items.tenantName"
              :value="items.tenantId"
            ></el-option>
          </el-select>
          <!-- 职能机构列表 -->
          <el-select
            v-else-if="item.scope === 'topinstitutionList'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            clearable
            filterable
          >
            <el-option
              v-for="(items, indexs) in topinstitutionList"
              :key="indexs"
              :label="items.instName"
              :value="items.instId"
            ></el-option>
          </el-select>
          <!-- 成本分类列表 -->
          <el-select
            v-else-if="item.scope === 'topinstcategoryList'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            clearable
            filterable
          >
            <el-option
              v-for="(items, indexs) in topinstcategoryList"
              :key="indexs"
              :label="items.categoryName"
              :value="items.costCatId"
            ></el-option>
          </el-select>
          <!-- 院校 -->
          <el-select
            v-else-if="item.scope === 'schoolList'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
          >
            <el-option
              v-for="(items, indexs) in newSchoolList"
              :key="indexs"
              :label="items.schoolName"
              :value="items.id"
            ></el-option>
          </el-select>
          <!-- 专业-根据教育类型筛选 -->
          <el-select
            v-else-if="item.scope === 'Professional'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
          >
            <el-option
              v-for="(items, indexs) in newProfessional"
              :key="indexs"
              :label="items.categoryName"
              :value="items.id"
            ></el-option>
          </el-select>
          <!-- 角色列表 -->
          <el-select
            v-else-if="item.scope === 'roleList'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            clearable
          >
            <el-option
              v-for="(items, indexs) in roleList"
              :key="indexs"
              :label="items.roleName"
              :value="items.roleId"
            ></el-option>
          </el-select>
          <!-- 专业 -->
          <el-select
            v-else-if="item.scope === 'ProfessionalList'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
          >
            <el-option
              v-for="(items, indexs) in Professional"
              :key="indexs"
              :label="items.categoryName"
              :value="items.id"
            ></el-option>
          </el-select>
          <!-- 科目 -->
          <el-select
            v-else-if="item.scope === 'sujectType'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
          >
            <el-option
              v-for="(items, indexs) in newSujectType"
              :key="indexs"
              :label="items.subjectName"
              :value="items.id"
            ></el-option>
          </el-select>
          <!-- 题目类型 -->
          <el-select
            v-else-if="item.scope === 'selectBank'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
          >
            <el-option
              v-for="(items, indexs) in optionsBank"
              :key="indexs"
              :label="items.label"
              :value="items.value"
            ></el-option>
          </el-select>
          <!-- 证书类型 -->
          <el-select
            v-else-if="item.scope === 'certificate'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
          >
            <el-option
              v-for="(items, indexs) in certificate"
              :key="indexs"
              :label="items.certificateName"
              :value="items.id"
            ></el-option>
          </el-select>
          <!-- 自定义select -->
          <el-select
            :clearable="item.noClear === false ? false : true"
            :filterable="item.filterable ? true : false"
            :multiple="item.multiple ? true : false"
            v-else-if="item.scope === 'select'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
          >
            <el-option
              v-for="(items, indexs) in item.options"
              :key="indexs"
              :label="items[item.selectLabel || 'label']"
              :value="items[item.selectValue || '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"
              @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"
              @change="
                handleChanges(formData[item.prop1], formData[item.prop2])
              "
            ></el-input-number>
          </div>
          <div v-else-if="item.scope === 'numList1'">
            <el-input-number
              :controls="false"
              v-model="formData[item.prop1]"
              controls-position="right"
              :placeholder="item.placeholder1 || ''"
              :min="0"
              @change="
                handleChanges(formData[item.prop1], formData[item.prop2])
              "
            >
            </el-input-number>
            {{ item.ch || "~" }}
            <el-input-number
              :controls="false"
              v-model="formData[item.prop2]"
              controls-position="right"
              :placeholder="item.placeholder2 || ''"
              :min="0"
              @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"
          ></el-input-number>
          <el-input
            v-else-if="item.scope === 'textarea' && formData[item.prop]"
            type="textarea"
            readonly
            :rows="3"
            placeholder="请输入身份证"
            v-model.trim="formData[item.prop]"
          >
          </el-input>
          <el-cascader
            v-else-if="item.scope === 'cascader'"
            v-model="formData[item.prop]"
            :options="item.options"
            :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"
            :props="{
              label: item.props.label,
              value: item.props.value,
              checkStrictly: true,
              emitPath: false,
            }"
            clearable
          ></el-cascader>
          <!-- pickerOptions json处理后丢失 取原值 -->
          <el-date-picker
            v-else-if="item.scope === 'datePicker'"
            v-model="formData[item.prop]"
            :type="item.type || 'datetimerange'"
            :picker-options="
              item.pickerOptions ? formList[index].pickerOptions : pickerOptions
            "
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            :default-time="['00:00:00', '23:59:59']"
            value-format="timestamp"
            :default-value="item.defaultValue"
          >
          </el-date-picker>

          <el-date-picker
            v-else-if="item.scope === 'datePickerA'"
            v-model="formData[item.prop]"
            :type="item.type || 'datetime'"
            :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"
              :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'"
              value-format="timestamp"
              :placeholder="item.placeholder2"
              @change="change2(item.prop1, item.prop2)"
            >
            </el-date-picker>
          </div>
          <el-date-picker
            v-else-if="item.scope === 'moreMonth'"
            type="months"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder || '选择月份'"
            value-format="timestamp"
          >
          </el-date-picker>
          <el-date-picker
            v-else-if="item.scope === 'years'"
            type="years"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder || '选择年份'"
            :value-format="item.format || 'timestamp'"
          >
          </el-date-picker>
          <slot v-else-if="item.scope === 'slot'" name="slotSearch"></slot>
          <el-input
            :style="item.prop === 'searchKey' ? 'width:260px;' : ''"
            v-else-if="!item.scope"
            clearable
            v-model.trim="formData[item.prop]"
            :placeholder="item.placeholder"
            @keyup.enter.native="search"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button v-if="advanced" type="success" @click="emitAdvanced">{{
            advancedName
          }}</el-button>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="init">重置</el-button>
          <slot name="customize"></slot>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: [
    "formList",
    "topType",
    "formData",
    "shType",
    "redIcon",
    "advanced",
    "advancedName",
  ], //参考文档 component.md
  data() {
    return {
      tireStatus: "", //当前选择的教育类型tireStatus
      lists: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "视频",
          value: 1,
        },
        {
          label: "题库",
          value: 2,
        },
        {
          label: "补考",
          value: 3,
        },
        {
          label: "前培",
          value: 4,
        },
      ],
      classType: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "已开班",
          value: 1,
        },
        {
          label: "预报名(未开班)",
          value: 0,
        },
      ],
      pendlists: [
        {
          label: "初审",
          value: 0,
        },
        {
          label: "复审",
          value: "1,2",
        },
        {
          label: "不通过",
          value: "-1,-2",
        },
        {
          label: "已通过",
          value: 3,
        },
      ],
      lists5: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "待审核",
          value: 2,
        },
        {
          label: "不通过",
          value: 3,
        },
        {
          label: "通过",
          value: 1,
        },
      ],
      lists6: [
        {
          label: "待审核",
          value: 2,
        },
        {
          label: "审核中",
          value: 3,
        },
      ],
      // classLists: [
      //   {
      //     label: "全部",
      //     value: "",
      //   },
      //   {
      //     label: "二建继教",
      //     value: 1,
      //   },
      //   {
      //     label: "七大员继教",
      //     value: 2,
      //   },
      //   {
      //     label: "七大员新考",
      //     value: 3,
      //   },
      // ],
      paperType: [
        {
          label: "发布",
          value: 1,
        },
        {
          label: "未发布",
          value: 0,
        },
      ],
      optionsBank: [
        {
          label: "单选题",
          value: 1,
        },
        {
          label: "多选题",
          value: 2,
        },
        {
          label: "判断题",
          value: 3,
        },
        {
          label: "案例题",
          value: 4,
        },
        {
          label: "简答题",
          value: 5,
        },
      ], //题目类型
      size: "small", //输入框尺寸类型
      newProjectLevel: [], //项目类型-筛选后的数据
      newBusinessLevel: [], //业务层次-筛选后的数据
      newSchoolList: [], //院校-筛选后的数据
      newProfessional: [], //专业-筛选后的数据
      newSujectType: [], //科目-筛选后的数据
      applySiteAddressX: [], //考试地点-根据考试计划过滤而来
      pickerOptions: {},
    };
  },
  computed: {
    ...mapGetters([
      "educationType",
      "Professional",
      "examList",
      "examLists",
      "beforeList",
      "beforeLists",
      "applySiteAddress",
      "certificate",
      "systemtenantlist",
      "roleList",
      "merList",
      "storeList",
      "topinstitutionList",
      "topinstcategoryList",
    ]),
    /**
     * @remarks 过滤选择器列表
     */
    formListComput: function () {
      return function (item) {
        var newOption = JSON.parse(JSON.stringify(item));
        const arrsy = newOption.filter((items) => {
          if (
            items.scope === "businessLevel" ||
            items.scope === "schoolList" ||
            items.scope === "Professional" ||
            items.scope === "sujectType"
          ) {
            if (!this.formData[items.edu]) {
            } else {
              if (this.educationType) {
                const indexType = this.educationType.findIndex((its) => {
                  return its.id === this.formData[items.edu];
                });
                if (
                  items.scope === "businessLevel" &&
                  this.educationType[indexType].tireStatus?.indexOf("2") !== -1
                ) {
                  return items;
                }
                if (
                  items.scope === "schoolList" &&
                  this.educationType[indexType].tireStatus?.indexOf("3") !==
                    -1 &&
                  this.formData["businessId"]
                ) {
                  return items;
                }
                if (
                  items.scope === "Professional" &&
                  this.educationType[indexType].tireStatus?.indexOf("4") !==
                    -1 &&
                  this.formData["businessId"]
                ) {
                  return items;
                }
                if (
                  items.scope === "sujectType" &&
                  this.formData["businessId"]
                ) {
                  return items;
                }
              }
            }
          } else {
            if (items.diff === "gfxs") {
              if (
                this.formData["studyStatus"] == 2 &&
                this.formData["periodStatus"] == 1
              ) {
                return items;
              }
            } else if (items.diff === "ksdd") {
              if (this.formData["applyId"]) {
                return items;
              }
            } else if (items.scope === "projectLevel") {
              if (this.formData["educationId"]) {
                return items;
              }
            } else {
              return items;
            }
          }
        });
        return arrsy;
      };
    },
  },
  methods: {
    /**
     * 手动过滤考试地点
     */
    getChangeAdress(id) {
      this.$api
        .inquirepayservesiteInfo({
          applyId: id,
          addressStatus: 1,
        })
        .then((res) => {
          this.applySiteAddressX = res.rows;
        });
    },
    /**
     * @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("结束时间不能小于开始时间,请重新选择结束时间");
        }
      }
    },
    /**
     *
     * @param {int} status
     * @remark 顶部定制按钮-根据商品类型点击快速搜索
     */
    topSearch(status) {
      this.formData.goodsType = status;
      this.$emit("search", 3);
    },
    /**
     *
     * @param {int} status
     * @remark 顶部定制按钮-根据审核状态点击快速搜索
     */
    topSearchsh(types) {
      this.formData.status = types;
      this.$emit("search", 3);
    },
    /**
     * @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("请规范输入取值范围");
        }
      }
    },
    /**
     *
     * @param {int} id
     * @param {bool} status1 //是否不清空业务层级
     * @remark 点击教育类型触发事件
     */
    changeEducationType(id, status1) {
      if (!id) {
        return;
      }
      const indexs = this.educationType.findIndex((item) => {
        return item.id === id;
      });
      this.tireStatus = this.educationType[indexs].tireStatus || "";
      if (!status1) {
        if (this.formData.projectId) {
          this.formData.projectId = "";
        }
        if (this.formData.businessId) {
          this.formData.businessId = "";
        }
      }
      if (this.formData.subjectId) {
        this.formData.subjectId = "";
      }
      this.$api
        .inquireCourseProjectType({ status: 1, educationId: id })
        .then((res) => {
          this.newProjectLevel = res.rows;
        });
      this.$api
        .inquirebusinessList({ status: 1, educationId: id })
        .then((res) => {
          this.newBusinessLevel = res.rows;
        });
      if (!status1) {
        this.$api
          .inquireCourseSubject({ status: 1, educationId: id })
          .then((res) => {
            this.newSujectType = res.rows;
          });
      }
    },
    /**
     *
     * @param {int} id
     * @remark 点击业务层次触发事件
     */
    changeBusinessLevel(v) {
      if (this.formData.schoolId) {
        this.formData.schoolId = "";
      }
      this.$api.inquireUserSchool({ status: 1, businessId: v }).then((res) => {
        this.newSchoolList = res.rows;
      });
      if (this.formData.majorId) {
        this.formData.majorId = "";
      }
      this.$api.inquireCourseMajor({ status: 1, businessId: v }).then((res) => {
        this.newProfessional = res.rows;
      });
      if (this.formData.subjectId) {
        this.formData.subjectId = "";
      }
      this.$api
        .inquireCourseSubject({ status: 1, businessId: v })
        .then((res) => {
          this.newSujectType = res.rows;
        });
    },
    /**
     * 外部调用-商品新增编辑页
     */
    changeSuject(v) {
      if (v) {
        this.$api
          .inquireCourseSubject({ status: 1, projectId: v })
          .then((res) => {
            this.newSujectType = res.rows;
          });
      } else {
        this.newSujectType = [];
      }
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .el-input__inner {
  &::placeholder {
    color: #a4a4a4;
  }
}
.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: 8px;
  }
}
</style>