搜索优化

董国庆

2026-01-27 f556fdf58de548da52f3286f39ab3dab6968b727

搜索优化

 screen/src/view/projectList/index.vue

@@ -22,7 +22,7 @@
            v-model="searchProjectId"
            placeholder="请选择项目"
            class="flex1"
            clearable
            @change="handleSearch"
          >
            <el-option
              v-for="item in projectOptions"
@@ -32,10 +32,17 @@
            >
            </el-option>
          </el-select>
          <img
            src="../../assets/img/down-circle@2x.png"
            class="w--15 h--16 shrink0"
          />
          <div class="flex a-center gap--5">
            <i
              @click.stop="clearSearchProjectId"
              class="el-icon-circle-close c-fff cursor-pointer"
              v-show="searchProjectId"
            />
            <img
              src="../../assets/img/down-circle@2x.png"
              class="w--15 h--16 shrink0"
            />
          </div>
        </div>
        <div
          class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox"
@@ -45,7 +52,7 @@
            v-model="projectType"
            placeholder="请选择项目类型"
            class="flex1"
            clearable
            @change="handleSearch"
          >
            <el-option
              v-for="item in projectTypeOptions"
@@ -55,10 +62,17 @@
            >
            </el-option>
          </el-select>
          <img
            src="../../assets/img/down-circle@2x.png"
            class="w--15 h--16 shrink0"
          />
          <div class="flex a-center gap--5">
            <i
              @click.stop="clearProjectType"
              class="el-icon-circle-close c-fff cursor-pointer"
              v-show="projectType !== null && projectType !== ''"
            />
            <img
              src="../../assets/img/down-circle@2x.png"
              class="w--15 h--16 shrink0"
            />
          </div>
        </div>
        <div
          class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox"
@@ -68,7 +82,7 @@
            v-model="riskLevel"
            placeholder="请选择项目风险"
            class="flex1"
            clearable
            @change="handleSearch"
          >
            <el-option
              v-for="item in riskLevelOptions"
@@ -78,10 +92,17 @@
            >
            </el-option>
          </el-select>
          <img
            src="../../assets/img/down-circle@2x.png"
            class="w--15 h--16 shrink0"
          />
          <div class="flex a-center gap--5">
            <i
              @click.stop="clearRiskLevel"
              class="el-icon-circle-close c-fff cursor-pointer"
              v-show="riskLevel !== null && riskLevel !== ''"
            />
            <img
              src="../../assets/img/down-circle@2x.png"
              class="w--15 h--16 shrink0"
            />
          </div>
        </div>
        <div
          @click="handleClick(1)"
@@ -93,6 +114,7 @@
            type="datetime"
            placeholder=""
            clearable
            @change="handleSearch"
          >
          </el-date-picker>
          <div
@@ -123,6 +145,7 @@
            type="datetime"
            placeholder=""
            clearable
            @change="handleSearch"
          >
          </el-date-picker>
          <div
@@ -580,6 +603,24 @@
      this.loadTableData();
    },

    // 清除项目选择
    clearSearchProjectId() {
      this.searchProjectId = null;
      this.handleSearch();
    },

    // 清除项目类型
    clearProjectType() {
      this.projectType = null;
      this.handleSearch();
    },

    // 清除风险等级
    clearRiskLevel() {
      this.riskLevel = null;
      this.handleSearch();
    },

    // 分页大小改变
    handleSizeChange(val) {
      this.pageSize = val;
@@ -979,6 +1020,19 @@
    display: none;
  }

  ::v-deep .el-select__caret {
    display: none;
  }

  .el-icon-circle-close {
    font-size: 16px;
    transition: color 0.3s;

    &:hover {
      color: #00ebfc;
    }
  }

  .btn {
    position: absolute;
    top: -2px;