高级搜索实现

1、实现效果

页面初始化效果

单选选中效果

全部选择效果

取消选中(点击各查询条件或者已选条件的叉号)

2、代码实现

主页面方法

<template>
  <div class="pageContainer">
    <div class="superSearchArea" v-show="!searchMoreFlag">
      <div
              class="clearfix"
              v-for="renderItem in renderEntity"
              :key="renderItem.entityType"
      >
        <div :class="renderItem.isSelectTypeNameClass ? 'selectTitle selectTitleSpace fl': 'selectTitle fl'">{{ renderItem.selectTypeName }}</div>
        <div class="selectType">
          <div
                  :class="submitReadySelectObj[renderItem.entityType].length === renderItem.entityList.length ? 'selectAll fl selectAllActive': 'selectAll fl '"
                  @click="handleAllSelect(renderItem.entityType)"
          >
            {{ renderItem.allSelectName }}
          </div>
          <div
                  v-for="item in renderItem.entityList"
                  :key="item.key"
                  @click="handleSelectType(item.type, item.key, item.value, item.id, renderItem.entityType)"
                  :class="item.isSelect ? 'selectItem selectActive' : 'selectItem'"
          >
            {{ item.value }}
          </div>
        </div>
      </div>
      <!-- 已选条件 -->
      <div class="clearfix">
        <div class="selectTitle fl">已选条件</div>
        <ul class="readySelectType fl clearfix">
          <li
            v-for="item in allReadySelectArr"
            :key="item.key"
          >
            <span class="fl">{{ item.text }}</span><label
              class="fr"
              @click="delReadySelectItem(item.key, item.list, item.id)"
            >X</label>
          </li>
        </ul>
      </div>
      <!-- 化学成分,力学性能,关键字搜素 -->
      <select-component
        :keyWords="keyWords"
        :materialArr="materialArr"
        :dynamicsArr="dynamicsArr"
        @changeKeyWords="changeKeyWords"
        ref="selectComponent"
      ></select-component>
      <!-- 搜素及清空条件 -->
      <div class="searchBtnArea">
        <div
          class="clearInfo fr"
          @click="clearSelectInfo"
        >
          <img
            src="@/assets/mainPage/clearinfo.png"
            alt="clearinfo"
          /> 清空条件
        </div>
        <div class="searchBtn">
          <el-button
            type="danger"
            @click="searchInfo"
          >搜索</el-button>
        </div>
      </div>
    </div>
    <!-- 底部表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column label="牌号">
        <template slot-scope="{row}">
          <span
            @click="handleGoInfo('gcss', row.steelNum)"
            class="handGoInfo"
          > {{ row.steelNum }} </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="applyStandard"
        label="适用标准"
      >
      </el-table-column>
      <el-table-column
        prop="system"
        label="体系"
      >
      </el-table-column>
      <el-table-column
        prop="steelNum"
        label="牌号"
      >
      </el-table-column>
      <el-table-column
        prop="dataSource"
        label="数据来源"
      >
      </el-table-column>
      <el-table-column
        prop="materialType"
        label="材料类别"
      >
      </el-table-column>
      <el-table-column label="配送信息">
        <el-table-column
          prop="C"
          label="C"
        >
        </el-table-column>
        <el-table-column
          prop="Si"
          label="Si"
        >
        </el-table-column>
        <el-table-column
          prop="Mn"
          label="Mn"
        >
        </el-table-column>
        <el-table-column
          prop="P"
          label="P"
        >
        </el-table-column>
        <el-table-column
          prop="S"
          label="S"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column label="力学性能">
        <el-table-column
          prop="YS"
          label="YS"
        >
        </el-table-column>
        <el-table-column
          prop="Rm"
          label="Rm"
        >
        </el-table-column>
        <el-table-column
          prop="Akv"
          label="Akv"
        >
        </el-table-column>
      </el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>value

<script>
import { SelectType } from "@/mixins/shycss/selectType";
export default {
  name: "Gcss",
  components: {},
  mixins: [SelectType],
  props: {
    searchMoreFlag: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      matchRelation: {
        // list 与 type对应关系， 主要是用于type对应
        steelTypeList: "SteelTypeList",
        shapeTypeList: "ShapeTypeList",
        productCategoryTypeList: "ProductCategoryTypeList",
        deliveryStateTypeList: "DeliveryStateTypeList",
        standardTypeList: "StandardTypeList",
      },
      submitReadySelectObj: {
        // 查询条件提交数组，放在对象中方便提交
        steelTypeList: [], // 钢类
        shapeTypeList: [], // 形状
        productCategoryTypeList: [], // 产品类别
        deliveryStateTypeList: [], // 交货状态
        standardTypeList: [], // 标准体系
      },
      steelTypeList: [
        // 钢类数组，type: 类别， id: 后台返回唯一键， value: 显示名称  key: 前端唯一键(这里使用v-for循环，且存在多个查询条件，为避免前端v-for在指定key时报错重复，这里组合前端唯一键，使用type_id的形式，如果确定id唯一可删除，isSelect: 选中状态)
        {
          type: "SteelTypeList",
          id: "g01",
          value: "碳素结构钢",
          key: "SteelTypeList_g01",
          isSelect: false,
        },
        {
          type: "SteelTypeList",
          id: "g02",
          value: "低合金高强度钢",
          key: "SteelTypeList_g02",
          isSelect: false,
        },
        {
          type: "SteelTypeList",
          id: "g03",
          value: "合金结构钢",
          key: "SteelTypeList_g03",
          isSelect: false,
        },
        {
          type: "SteelTypeList",
          id: "g04",
          value: "不锈钢",
          key: "SteelTypeList_g04",
          isSelect: false,
        },
        {
          type: "SteelTypeList",
          id: "g05",
          value: "易切削钢",
          key: "SteelTypeList_g05",
          isSelect: false,
        },
        {
          type: "SteelTypeList",
          id: "g06",
          value: "弹簧钢",
          key: "SteelTypeList_g06",
          isSelect: false,
        },
        {
          type: "SteelTypeList",
          id: "g07",
          value: "耐热钢",
          key: "SteelTypeList_g07",
          isSelect: false,
        },
        {
          type: "SteelTypeList",
          id: "g08",
          value: "工模具钢",
          key: "SteelTypeList_g08",
          isSelect: false,
        },
        {
          type: "SteelTypeList",
          id: "g09",
          value: "轴承钢",
          key: "SteelTypeList_g09",
          isSelect: false,
        },
        {
          type: "SteelTypeList",
          id: "g10",
          value: "弹簧钢",
          key: "SteelTypeList_g10",
          isSelect: false,
        },
        {
          type: "SteelTypeList",
          id: "g11",
          value: "铸钢铸铁",
          key: "SteelTypeList_g11",
          isSelect: false,
        },
        {
          type: "SteelTypeList",
          id: "g12",
          value: "耐候钢",
          key: "SteelTypeList_g12",
          isSelect: false,
        },
      ],
      shapeTypeList: [
        // 形状数组
        {
          type: "ShapeTypeList",
          id: "xz01",
          value: "板",
          key: "ShapeTypeList_xz01",
          isSelect: false,
        },
        {
          type: "ShapeTypeList",
          id: "xz02",
          value: "带",
          key: "ShapeTypeList_xz02",
          isSelect: false,
        },
        {
          type: "ShapeTypeList",
          id: "xz03",
          value: "薄带",
          key: "ShapeTypeList_xz03",
          isSelect: false,
        },
        {
          type: "ShapeTypeList",
          id: "xz04",
          value: "棒",
          key: "ShapeTypeList_xz04",
          isSelect: false,
        },
        {
          type: "ShapeTypeList",
          id: "xz05",
          value: "线",
          key: "ShapeTypeList_xz05",
          isSelect: false,
        },
      ],
      productCategoryTypeList: [
        // 产品类别
        {
          type: "ProductCategoryTypeList",
          id: "cplb01",
          value: "热轧钢",
          key: "ProductCategoryTypeList_cplb01",
          isSelect: false,
        },
        {
          type: "ProductCategoryTypeList",
          id: "cplb02",
          value: "冷轧钢",
          key: "ProductCategoryTypeList_cplb02",
          isSelect: false,
        },
        {
          type: "ProductCategoryTypeList",
          id: "cplb03",
          value: "无缝管",
          key: "ProductCategoryTypeList_cplb03",
          isSelect: false,
        },
        {
          type: "ProductCategoryTypeList",
          id: "cplb04",
          value: "焊管",
          key: "ProductCategoryTypeList_cplb04",
          isSelect: false,
        },
        {
          type: "ProductCategoryTypeList",
          id: "cplb05",
          value: "铸造管",
          key: "ProductCategoryTypeList_cplb05",
          isSelect: false,
        },
      ],
      deliveryStateTypeList: [
        // 交货状态
        {
          type: "DeliveryStateTypeList",
          id: "jhzt01",
          value: "热轧",
          key: "DeliveryStateTypeList_jhzt01",
          isSelect: false,
        },
        {
          type: "DeliveryStateTypeList",
          id: "jhzt02",
          value: "冷轧",
          key: "DeliveryStateTypeList_jhzt02",
          isSelect: false,
        },
        {
          type: "DeliveryStateTypeList",
          id: "jhzt03",
          value: "热加工",
          key: "DeliveryStateTypeList_jhzt03",
          isSelect: false,
        },
        {
          type: "DeliveryStateTypeList",
          id: "jhzt04",
          value: "冷加工",
          key: "DeliveryStateTypeList_jhzt04",
          isSelect: false,
        },
      ],
      standardTypeList: [
        // 标准体系
        {
          type: "StandardTypeList",
          id: "bztx01",
          value: "所有企业标准",
          key: "StandardTypeList_bztx01",
          isSelect: false,
        },
        {
          type: "StandardTypeList",
          id: "bztx02",
          value: "中国(GB)",
          key: "StandardTypeList_bztx02",
          isSelect: false,
        },
        {
          type: "StandardTypeList",
          id: "bztx03",
          value: "日本(JIS)",
          key: "StandardTypeList_bztx03",
          isSelect: false,
        },
        {
          type: "StandardTypeList",
          id: "bztx04",
          value: "美国(ASTM)",
          key: "StandardTypeList_bztx04",
          isSelect: false,
        },
      ],
      allReadySelectArr: [], // 所有选中数组，显示使用
      tableData: [
        {
          steelNum: "06Ni1DR",
          applyStandard: "GB 3531-2014",
          system: "中国GB",
          dataSource: "新材道公有云",
          materialType: "钢材",
          C: "≤0.08",
          Si: "0.15~0.35",
          Mn: "0.3~0.8",
          P: "≤0.008",
          S: "≤0.004",
          YS: "≥560",
          Rm: "680~820",
          Akv: "≥100",
        },
        {
          steelNum: "06Ni2DR",
          applyStandard: "GB 3531-2014",
          system: "中国GB",
          dataSource: "新材道公有云",
          materialType: "钢材",
          C: "≤0.08",
          Si: "0.15~0.35",
          Mn: "0.3~0.8",
          P: "≤0.008",
          S: "≤0.004",
          YS: "≥560",
          Rm: "680~820",
          Akv: "≥100",
        },
        {
          steelNum: "06Ni3DR",
          applyStandard: "GB 3531-2014",
          system: "中国GB",
          dataSource: "新材道公有云",
          materialType: "钢材",
          C: "≤0.08",
          Si: "0.15~0.35",
          Mn: "0.3~0.8",
          P: "≤0.008",
          S: "≤0.004",
          YS: "≥560",
          Rm: "680~820",
          Akv: "≥100",
        },
        {
          steelNum: "06Ni4DR",
          applyStandard: "GB 3531-2014",
          system: "中国GB",
          dataSource: "新材道公有云",
          materialType: "钢材",
          C: "≤0.08",
          Si: "0.15~0.35",
          Mn: "0.3~0.8",
          P: "≤0.008",
          S: "≤0.004",
          YS: "≥560",
          Rm: "680~820",
          Akv: "≥100",
        },
        {
          steelNum: "06Ni5DR",
          applyStandard: "GB 3531-2014",
          system: "中国GB",
          dataSource: "新材道公有云",
          materialType: "钢材",
          C: "≤0.08",
          Si: "0.15~0.35",
          Mn: "0.3~0.8",
          P: "≤0.008",
          S: "≤0.004",
          YS: "≥560",
          Rm: "680~820",
          Akv: "≥100",
        },
        {
          steelNum: "06Ni6DR",
          applyStandard: "GB 3531-2014",
          system: "中国GB",
          dataSource: "新材道公有云",
          materialType: "钢材",
          C: "≤0.08",
          Si: "0.15~0.35",
          Mn: "0.3~0.8",
          P: "≤0.008",
          S: "≤0.004",
          YS: "≥560",
          Rm: "680~820",
          Akv: "≥100",
        },
        {
          steelNum: "06Ni7DR",
          applyStandard: "GB 3531-2014",
          system: "中国GB",
          dataSource: "新材道公有云",
          materialType: "钢材",
          C: "≤0.08",
          Si: "0.15~0.35",
          Mn: "0.3~0.8",
          P: "≤0.008",
          S: "≤0.004",
          YS: "≥560",
          Rm: "680~820",
          Akv: "≥100",
        },
        {
          steelNum: "06Ni8DR",
          applyStandard: "GB 3531-2014",
          system: "中国GB",
          dataSource: "新材道公有云",
          materialType: "钢材",
          C: "≤0.08",
          Si: "0.15~0.35",
          Mn: "0.3~0.8",
          P: "≤0.008",
          S: "≤0.004",
          YS: "≥560",
          Rm: "680~820",
          Akv: "≥100",
        },
      ],
      materialArr: [
        // 化学性能
        { key: "C", value: "C" },
        { key: "Si", value: "Si" },
        { key: "Mr", value: "Mr" },
        { key: "P", value: "P" },
        { key: "S", value: "S" },
      ],
      dynamicsArr: [
        // 力学性能
        { key: "qfqd", value: "屈服强度YS(MPa)" },
        { key: "cjg", value: "冲击功Akv(J)" },
        { key: "cjwd", value: "冲击温度(℃)" },
        { key: "klqd", value: "抗拉强度TS(MPa)" },
        { key: "ysl", value: "延伸率A(%)" },
      ],
    };
  },
  watch: {
    // searchMoreFlag(newVal) {
    //   console.log("flag" + newVal);
    // },
  },
  computed: {},
  methods: {
    // 清空搜素条件
    clearSelectInfo() {
      // submitReadySelectObj数据清空
      this.submitReadySelectObj = {
        // 查询条件提交数组
        steelTypeList: [], // 钢类
        shapeTypeList: [], // 形状
        productCategoryTypeList: [], // 产品类别
        deliveryStateTypeList: [], // 交货状态
        standardTypeList: [], // 标准体系
      };
      // 将数据中的isSelect置为false
      this.steelTypeList = [...this.resetIsSelect(this.steelTypeList)];
      this.shapeTypeList = [...this.resetIsSelect(this.shapeTypeList)];
      this.productCategoryTypeList = [
        ...this.resetIsSelect(this.productCategoryTypeList),
      ];
      this.deliveryStateTypeList = [
        ...this.resetIsSelect(this.deliveryStateTypeList),
      ];
      this.standardTypeList = [...this.resetIsSelect(this.standardTypeList)];
      // allReadySelectArr清空
      this.allReadySelectArr = [];
      // selectComponent数据清空
      this.$refs.selectComponent.clearSelectInfo();
    },
    // 搜索
    searchInfo() {
      // 获取selectComponent中的查询内容
      let selectComponentInfo = this.$refs.selectComponent.getSelectInfo();
      // todo 这里需要组合其他查询条件进行请求数据
      this.searchData();
    },
    // 查询数据
    searchData() {},
  },
  created() {},
  mounted() {
  // 修改数据格式，渲染实体
    this.renderEntity = [
      {
        selectTypeName: "钢类",
        allSelectName: "全部",
        isSelectTypeNameClass: true,
        entityType: "steelTypeList",
        entityList: this.steelTypeList,
      },
      {
        selectTypeName: "形状",
        allSelectName: "全部",
        isSelectTypeNameClass: false,
        entityType: "shapeTypeList",
        entityList: this.shapeTypeList,
      },
      {
        selectTypeName: "产品类别",
        allSelectName: "全部",
        isSelectTypeNameClass: false,
        entityType: "productCategoryTypeList",
        entityList: this.productCategoryTypeList,
      },
      {
        selectTypeName: "交货状态",
        allSelectName: "全部",
        isSelectTypeNameClass: false,
        entityType: "deliveryStateTypeList",
        entityList: this.deliveryStateTypeList,
      },
      {
        selectTypeName: "标准体系",
        allSelectName: "所有国际及行业标准",
        isSelectTypeNameClass: false,
        entityType: "standardTypeList",
        entityList: this.standardTypeList,
      },
    ];
  },
};
</script>
<style lang='scss' scoped>
</style>

复用方法

import SelectComponent from '@/views/shycss/component/selectComponent_index';
import Pagination from "@/components/Pagination/Pagination_index";
export const SelectType = {
    components: { SelectComponent, Pagination },
    props: {
        searchMoreFlag: {
            type: Boolean,
        },
        keyWords: {
            type: String
        }
    },
    data() {
        return {
            allReadySelectArr: [], // 所有选中数组，显示使用
            renderEntity: [], // 渲染实体
            total: 8, // 数据总条数
            listQuery: {
                page: 1, // 当前页
                limit: 20, // 每页条数
            }
        }
    },
    methods: {
        // 分页查询方法
        getList(obj) {
            this.listQuery.page = obj.page;
            this.listQuery.limit = obj.limit;
            this.searchData();
        },
        // 修改关键字
        changeKeyWords(val) {
            this.$emit("changeKeyWords", val)
        },
        // 将数组中的isSelect置为false
        resetIsSelect(arr) {
            arr.forEach(item => {
                item.isSelect = false;
            })
            return arr;
        },
        // 查询条件
        handleSelectType(type, key, text, id, list) {
            this[list].some((item) => {
                if (item.key == key) {
                    this.changeSelectItemState(item.isSelect, key, type, id, list, text);
                    item.isSelect = !item.isSelect;
                    return true;
                }
            });
        },
        // 根据查询条件当前选中状态动态新增/删除显示选中数组和提交显示数组中的数据
        // 如果原来是选中状态，则点击后为非选中状态，需要在所有选中数组中删除
        // 如果原来是非选中状态，则点击后为选中状态，需要在所有选中数组中添加
        changeSelectItemState(isSelect, key, type, id, list, text) {
            if (isSelect) {
                // 删除已选数组中的数组
                this.delFromAllReadyArr(key);
                // 删除提交数组中的数据
                this.delFromSubmitReadySelectArr(list, id);
            } else {
                // 新增已选显示数组中的数据
                this.addToAllReadyArr(key, text, list, id);
                // 新增提交数组中的数据
                this.addToSubmitReadySelectArr(type, id, text, list);
            }
        },
        // 添加到显示选中数组
        addToAllReadyArr(key, text, list, id) {
            this.allReadySelectArr.push({ key: key, text: text, list: list, id: id });
        },
        // 添加到提交选中数组中
        addToSubmitReadySelectArr(type, id, text, list) {
            let obj = { key: id, value: text, type: type };
            this.submitReadySelectObj[list].push(obj);
        },
        // 从显示选中数组中删除
        delFromAllReadyArr(key) {
            let flag = false;
            let index = 0;
            this.allReadySelectArr.some((item) => {
                if (item.key == key) {
                    flag = true;
                    return true;
                }
                index++;
            });
            flag && this.allReadySelectArr.splice(index, 1);
        },
        // 删除提交数组中的数据
        delFromSubmitReadySelectArr(list, id) {
            let flag = false,
                index = 0;
            this.submitReadySelectObj[list].some((item) => {
                if (item.key == id) {
                    flag = true;
                    return true;
                }
                index++;
            });
            flag && this.submitReadySelectObj[list].splice(index, 1);
        },
        // 删除所选选项
        delReadySelectItem(key, list, id) {
            // 删除显示选中数组中的对应数据
            this.delFromAllReadyArr(key);
            // 删除提交选中数组中的对应数据
            this.delFromSubmitReadySelectArr(list, id);
            // 取消查询条件的选中样式
            this.cancelIsSelect(this[list], key);
            // 查询数据
            this.searchData();
        },
        // 取消查询条件选中状态
        cancelIsSelect(arr, key) {
            arr.some((item) => {
                if (item.key == key) {
                    item.isSelect = false;
                    return true;
                }
            });
        },
        // 点击全部按钮
        handleAllSelect(list) {
            // 判断提交选中数组中的个数是否等于list数组的个数
            // 如果是则删除显示数组中所有该类型数据，提交数组置空,然后将所有该类型数据select置为false
            // 如果否则说明存在所有或部分数据未被选中，这时候删除显示数组中所有该类型数据，并新增数据；提交选中数组中将该类型所有数据填充，然后将所有该类型数据select置为true
            if (!this.submitReadySelectObj[list] || !this.matchRelation[list]) return;
            // 循环删除显示数组中所有该类型数据
            this.delSpecTypeFromAllReadySelelctArr(list);
            if (this.submitReadySelectObj[list].length === this[list].length) {
                // 提交数组置空
                this.submitReadySelectObj[list] = [];
                this[list].forEach((item) => {
                    // 将所有选项改为非选中状态
                    item.isSelect = false;
                });
            } else {
                // 提交数组置空
                this.submitReadySelectObj[list] = [];
                this[list].forEach((item) => {
                    // push到显示选中数组的对象
                    let obj1 = {
                        key: item.key,
                        text: item.value,
                        list: list,
                        id: item.id,
                    };
                    // push到提交选中数组的对象
                    let obj2 = {
                        key: item.id,
                        value: item.value,
                        type: this.matchRelation[list],
                    };
                    this.allReadySelectArr.push(obj1);
                    this.submitReadySelectObj[list].push(obj2);
                    // 将所有选项改为选中状态
                    item.isSelect = true;
                });
            }
            this.searchData();
        },
        // 循环删除显示数组中所有该类型数据
        delSpecTypeFromAllReadySelelctArr(list) {
            for (let i = this.allReadySelectArr.length - 1; i >= 0; i--) {
                if (this.allReadySelectArr[i].list == list) {
                    this.allReadySelectArr.splice(i, 1);
                }
            }
        },
        // 跳转详情
        handleGoInfo(type, steelName) {
            switch(type) {
                case "gcss":
                    this.$router.push({ path: '/shycss/gcssMainInfo', query: { name: steelName } })
                    break;
                case "yshjsu":
                    this.$router.push({ path: '/shycss/yshjssMainInfo', query: { name: steelName } })
                    break;
                case "hcss":
                    this.$router.push({ path: '/shycss/hcssMainInfo', query: { name: steelName } })
                    break;
            }
        }
    }
}