saas_entrepot_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_s"
        style="padding-top: 10px; width: 70px; text-align: end"
      >
        筛选：
      </div>
      <el-form :inline="true" :model="formData" class="tsxnz demo-form-inline">
        <template v-for="(item, index) in formList">
          <el-form-item :key="index" :label="item.label" v-if="ifCs(item)">
            <!-- 教育类型 -->
            <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 === '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>
            <!-- 自定义select -->
            <el-select
              clearable
              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"
              ></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-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="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="date"
              :size="size"
                value-format="timestamp"
                :placeholder="item.placeholder2"
                @change="change2(item.prop1,item.prop2)"
              >
              </el-date-picker>
            </div>
            <el-input
              v-else
              clearable
              v-model="formData[item.prop]"
              :placeholder="item.placeholder"
              :size="size"
            ></el-input>
          </el-form-item>
        </template>
        <el-form-item>
          <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"], //参考文档 component.md
  data() {
    return {
      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", //输入框尺寸类型
      // formData: {
      //   status: "0,1",
      //   pageSize: this.pageSizes,
      //   pageNum: this.pageNums,
      // }, //表单数据收集
      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"]),
  },
  created() {
    var self = this;
    // document.onkeydown = function (e) {
    //   var key = window.event.keyCode;
    //   if (key === 13) {
    //     self.search();
    //   }
    // };
  },
  methods: {
    change1(data1,data2){
      if(this.formData[data1]){
        if(this.formData[data2] && this.formData[data1]>this.formData[data2]){
          this.formData[data1] = ''
          this.$message.warning("开始时间不能大于结束时间,请重新选择开始时间")
        }
      }
    },
    change2(data1,data2){
      if(this.formData[data2]){
        if(this.formData[data1] && this.formData[data2]<this.formData[data1]){
          this.formData[data2] = ''
          this.$message.warning("结束时间不能小于开始时间,请重新选择结束时间")
        }
      }
    },
    topSearch(status) {
      this.formData.goodsType = status;
      this.$emit("search", 3);
    },
    topSearchsh(types) {
      this.formData.status = types;
      this.$emit("search", 3);
    },
    // classSearch(status) {
    //   this.formData.classType = status;
    //   this.$emit("search", 3);
    // },
    ifCs(item) {
      if (item.scope === "businessLevel" && !this.formData[item.edu]) {
        return false;
      } else if (item.scope === "schoolList" && !this.formData[item.edu]) {
        return false;
      } else if (item.scope === "Professional" && !this.formData[item.edu]) {
        return false;
      } else if (item.scope === "sujectType" && !this.formData[item.edu]) {
        return false;
      } else {
        return true;
      }
    },
    //搜索
    search() {
      this.$emit("search", 1);
    },
    //重置
    init() {
      this.$emit("init");
    },
    handleChanges(int1, int2) {
      if (int1 !== undefined && int2 !== undefined) {
        if (int1 > int2) {
          this.$message.error("请规范输入取值范围");
        }
      }
    },
    changeEducationType(id) {
      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;
        });
      console.log(this.newBusinessLevel, this.newSchoolList);
    },
    changeBusinessLevel(id) {},
  },
};
</script>

<style lang="less" scoped>
.fon_s {
  font-size: 14px;
  color: #6b6b6b;
}
.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>