zc_saas_admin/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' : ''"
          :size="size"
          v-for="(item, index) in lists"
          :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' : ''"
          :size="size"
          v-for="(item, index) in lists5"
          :key="index"
          @click="topSearchsh(item.value)"
          >{{ item.label }}</el-button
        >
      </div>
    </div>
    <!-- <div class="inputListBox" v-if="classType">
      <div>
        <el-button
          :type="formData.goodsType === item.value ? 'primary' : ''"
          :size="size"
          v-for="(item, index) in classLists"
          :key="index"
          @click="classSearch(item.value)"
          >{{ item.label }}</el-button
        >
      </div>
    </div> -->
    <div class="inputListBoxs">
      <div class="fon_sIcon" v-if="redIcon">
        <el-tooltip
          effect="light"
          class="item"
          content="该页面中的数据查询，针对的是「有效、有课程内容」的视频商品"
          placement="bottom-start"
        >
          <i class="el-icon-warning-outline iconStyS"></i>
        </el-tooltip>
      </div>
      <div
        class="fon_s"
        style="padding-top: 10px; width: 70px; text-align: end"
        v-else
      >
        筛选：
      </div>
      <el-form :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"
            :size="size"
            @change="changeEducationType"
          >
            <el-option
              v-for="(items, indexs) in educationType"
              :key="indexs"
              :label="items.educationName"
              :value="items.id"
            ></el-option>
          </el-select>
          <!-- 业务层次 -->
          <el-select
            v-else-if="item.scope === 'businessLevel'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            :size="size"
            @change="changeBusinessLevel"
          >
            <el-option
              v-for="(items, indexs) in newBusinessLevel"
              :key="indexs"
              :label="items.projectName + '-' + items.businessName"
              :value="items.id"
            ></el-option>
          </el-select>
          <!-- 院校 -->
          <el-select
            v-else-if="item.scope === 'schoolList'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            :size="size"
          >
            <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"
            :size="size"
          >
            <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 === 'ProfessionalList'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            :size="size"
          >
            <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"
            :size="size"
          >
            <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"
            :size="size"
          >
            <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 === 'paperType'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            :size="size"
          >
            <el-option
              v-for="(items, indexs) in paperType"
              :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"
            :size="size"
          >
            <el-option
              v-for="(items, indexs) in certificate"
              :key="indexs"
              :label="items.certificateName"
              :value="items.id"
            ></el-option>
          </el-select>
          <!-- 考试标题 -->
          <el-select
            v-else-if="item.scope === 'examList'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            :size="size"
          >
            <el-option
              v-for="(items, indexs) in examList"
              :key="indexs"
              :label="items.applyName"
              :value="items.applyId"
            ></el-option>
          </el-select>
          <!-- 考试地点 -->
          <el-select
            v-else-if="item.scope === 'applySiteAddress'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            :size="size"
          >
            <el-option
              v-for="(items, indexs) in applySiteAddress"
              :key="indexs"
              :label="items.siteAddress"
              :value="item.getType === 1 ? items.siteAddress : items.siteId"
            ></el-option>
          </el-select>
          <!-- 前培标题 -->
          <el-select
            v-else-if="item.scope === 'beforeList'"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            :size="size"
          >
            <el-option
              v-for="(items, indexs) in beforeList"
              :key="indexs"
              :label="items.beforeName"
              :value="items.beforeId"
            ></el-option>
          </el-select>
          <!-- 自定义select -->
          <el-select
            :clearable="item.noClear === false ? false : true"
            v-else-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]"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            :size="size"
            value-format="timestamp"
          >
          </el-date-picker>
          <el-date-picker
            v-else-if="item.scope === 'datePickerA'"
            v-model="formData[item.prop]"
            type="datetime"
            :size="size"
            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
            v-else-if="!item.scope"
            clearable
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            :size="size"
          ></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>
        </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,
        },
      ],
      lists5: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "通过",
          value: 1,
        },
        {
          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", //输入框尺寸类型
      newBusinessLevel: [], //业务层次-筛选后的数据
      newSchoolList: [], //院校-筛选后的数据
      newProfessional: [], //专业-筛选后的数据
      newSujectType: [], //科目-筛选后的数据
      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: {
    ...mapGetters([
      "educationType",
      "Professional",
      "examList",
      "beforeList",
      "applySiteAddress",
      "certificate"
    ]),
    /**
     * @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 {
              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
              ) {
                return items;
              }
              if (
                items.scope === "Professional" &&
                this.educationType[indexType].tireStatus.indexOf("4") !== -1
              ) {
                return items;
              }
            }
          } else {
            if (items.diff === "gfxs") {
              if (this.formData["studyStatus"] == 2) {
                return items;
              }
            } else {
              return items;
            }
          }
        });
        return arrsy;
      };
    },
  },
  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("结束时间不能小于开始时间,请重新选择结束时间");
        }
      }
    },
    /**
     *
     * @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
     * @remark 点击教育类型触发事件
     */
    changeEducationType(id) {
      const indexs = this.educationType.findIndex((item) => {
        return item.id === id;
      });
      this.tireStatus = this.educationType[indexs].tireStatus;
      if (this.formData.businessId) {
        this.formData.businessId = "";
      }
      if (this.formData.schoolId) {
        this.formData.schoolId = "";
      }
      if (this.formData.ProfessionalId) {
        this.formData.ProfessionalId = "";
      }
      if (this.formData.subjectId) {
        this.formData.subjectId = "";
      }
      this.$api
        .inquirebusinessList({ status: 1, educationId: id })
        .then((res) => {
          this.newBusinessLevel = res.rows;
        });

      this.$api
        .inquireUserSchool({ status: 1, educationId: id })
        .then((res) => {
          this.newSchoolList = res.rows;
        });
      this.$api
        .inquireCourseMajor({ status: 1, educationId: id })
        .then((res) => {
          this.newProfessional = res.rows;
        });
      this.$api
        .inquireCourseSubject({ status: 1, educationId: id })
        .then((res) => {
          this.newSujectType = res.rows;
        });
    },
    /**
     *
     * @param {int} id
     * @remark 点击业务层次触发事件
     */
    changeBusinessLevel(id) {},
  },
};
</script>

<style lang="less" scoped>
.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>