ACP数字中台

# 页面搜索

注：此搜索注意安全过滤的问题，当前版本集成处理为安全等保三级验证通过，不过在项目中依然要注意此问题

# 示例工程

系统应用集成示例工程打开 (opens new window)

# 本内容你将获得

  • 灵活配置前端搜索
  • 前后端搜索整合的思路

# 界面搜索配置

本文说明和阐述如何在前后端分离场景下使用契合平台的自定义数据列表搜索方式，如下：

  1. 搜索表单使用 v-model 绑定数据字段对象，如下：
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
    <el-form-item label="运单id" prop="transportOrderId">
    <el-input
        v-model="queryParams.transportOrderId"
        placeholder="请输入运单id"
        clearable
        size="small"
        @keyup.enter.native="handleQuery"
    />
    </el-form-item>
    <el-form-item label="异常类型id。取自字典表" prop="abnormalTypeId">
    <el-input
        v-model="queryParams.abnormalTypeId"
        placeholder="请输入异常类型id。取自字典表"
        clearable
        size="small"
        @keyup.enter.native="handleQuery"
    />
    </el-form-item>
    <el-form-item>
    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
    </el-form-item>
</el-form>
  1. 使用字段搜索类型配置定义字段匹配模式，将配置对象写在组件的 data 内，定义各个字段的搜索匹配模式，如下：
data(){
  return {

        // 查询数据对象
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          transportOrderId: null,
          abnormalTypeId: null,
          abnormalTypeName: null,
          pics: null,
          operator: null,
          lastUpdateOperator: null
        },
        //搜索参数字段类型配置，配置对象的key必须和搜索字段同名
        // 未做配置定义的字段将会原样输出到后端，通常分页参数不需要配置
        // Condition 对象封装了快捷函数直接生成匹配规则,
        // import Condition from 'alinesno-ui/packages/Search/Condition'
        queryParamsConfig: {
          transportOrderId: Condition.like(),
          abnormalTypeId: Condition.like(),
          abnormalTypeName: Condition.eq(),
          pics: Condition.contains(),
          operator: Condition.eq(),
          lastUpdateOperator: Condition.eq(),
          //指定排序字段，字段值为 true 升序,false 降序
          addTime: Condition.orderBy()
        }
 }

  }

methods:{
     /** 搜索按钮操作 */
      handleQuery() {
        // 使用全局的搜索参数处理方法预处理
        this.searchParams = this.searchParam(this.queryParamsConfig, this.queryParams);
        this.queryParams.pageNum = 1;
        this.getList();
      },
}
  1. 默认情况下脚手架生成的页面会包含默认行为和数据字段配置，如不满足可按需修改配置，当前支持如下的字段匹配模式:
export const Condition = {
  /**
   * 模糊搜索
   */
  like: () => likeBuilder,
  /**
   * 相等搜索
   */
  eq: () => eqBuilder,
  /**
   * 不等搜索
   */
  ne: () => neBuilder,
  /**
   * 时间范围搜索
   */
  rangeDate: () => rangeDateBuilder,
  /**
   * 数值范围搜索
   */
  rangeSize: () => rangeSizeBuilder,
  /**
   * 列表包含搜索
   */
  contains: () => containsBuilder,
  /**
   * 大于等于搜索
   */
  ge: () => geBuilder,
  /**
   * 大于搜索
   */
  gt: () => gtBuilder,
  /**
   * 小等于搜索
   */
  le: () => leBuilder,
  /**
   * 小于搜索
   */
  lt: () => ltBuilder,
  /**
   * 时间字段大于等于搜索
   */
  geTime: () => geTimeBuilder,
  /**
   * 时间字段大于搜索
   */
  gtTime: () => gtTimeBuilder,
  /**
   * 时间字段小于等于搜索
   */
  leTime: () => leTimeBuilder,
  /**
   * 时间字段小于搜索
   */
  ltTime: () => ltTimeBuilder,
  /**
   * 排序字段,字段值类型为 Boolean
   */
  orderBy: () => orderByBuilder()
}

# 其它

以下为待从项目中抽取整合的内容

  1. 激活下拉搜索建设;
  2. 公共弹出搜索；
  3. 人员组织机构;

← 缓存使用 →