0
点赞
收藏
分享

微信扫一扫

VUE快速改造前端高级搜索

更新说明:

  • 支持本地存储,默认1天,7天
  • 支持当字段少于2个,自动隐藏“展开”按钮
  • 增加时间组件、时间范围组件
  • 简化组件代码
  • 不影响自动代码生成的搜索条件,不影响其他代码逻辑

截图

VUE快速改造前端高级搜索_搜索

步骤

如果部分代码,无法复制,可以参考:src/views/purchase/cgreturn/index.vue

  1. 每个列表Index界面,都有搜索,将<a-form>(含)下代码 ,直接复制替换以下即可

VUE快速改造前端高级搜索_下拉框_02

<AdvancedSearch :optionsList="optionslist" @query="handleAdQuery" @reset="resetQuery"></AdvancedSearch>

    handleAdQuery (val) {
      this.queryParam.pageNum = 1
      this.queryParam = { ...this.queryParam, ...val }
      this.getList()
    },

离线存储:【如果不需要,勿写,否则可能导致数据紊乱】

lsKey:唯一编号,建议用模块名命名:采购单退货,cgReturn1201

<AdvancedSearch lsKey="cgdana" :optionsList="optionslist" @query="handleAdQuery" @reset="resetQuery"></AdvancedSearch>

  1. 重要:参考搜索条件字段配置代码,需要根据实际需改

optionslist: [
        {
          key: 'thNums',//必填,唯一,推荐和生成的表列实体字段一致
          label: '退货单号',//必填,
          type: 'input',
          placeholder:'请输入客户名称/客户手机号',// 非必填,
          checked: true,
          disable: false,
          defaultValue: '',
          data: []
        },
        {
          key: 'queryTime',
          label: '退货日期',
          type: 'date',
          checked: true,
          disable: false,
          defaultValue: '',
          valueFormat:'YYYY-MM-DD',
          format:'YYYY-MM-DD',
          data: []
        },
        {

          key: 'thAmount',
          label: '退货金额',
          type: 'input',
          checked: true,
          disable: false,
          defaultValue: '',
          data: []
        },
        {
          placeholder:'请输入源采购单编号',
          key: 'cgNum',
          label: '源采购单编号',
          type: 'bizSelect', // 业务表下拉框
          selectDict: 'cg_return,th_amount,id',
          // selectDict: 'sys_dict_data,dict_label,dict_value,dict_type=\'retype\'',
          checked: true,
          disable: false,
          defaultValue: '',
          data: []
        },
        {
          key: 'manner',
          label: '退回方式',
          type: 'bizDict',// 系统字典
          selectDict: 'outw_type',
          checked: true,
          disable: false,
          defaultValue: '',
          data: []
        },
        {
          key: 'amount',
          label: '已收货金额',
          type: 'input',
          checked: true,
          disable: false,
          defaultValue: '',
          data: []
        },
        {
          key: 'zdPerson',
          label: '制单人',
          type: 'input',
          checked: true,
          disable: false,
          defaultValue: '',
          data: []
        },
        {
          key: 'cgSta',
          label: '状态',
          type: 'select',
          checked: true,
          disable: false,
          defaultValue: '',
          data: []
        },

      ],

  1. 更改查询SQL,尽可能全,或者直接代码生成

VUE快速改造前端高级搜索_下拉框_03

字段配置含义

参数

类型

必填

说明

key

String

必填,唯一,推荐和生成的表列实体字段一致

label

String

标题名称,建议不超过4个字符,且长度统一

type

String

组件类型:

input 输入框

bizDict:系统字典,见前端手册系统字典下拉框组件使用手册

bizSelect:业务表下拉框

date:日期组件,默认年-月-日

dateRange:日期范围组件,默认年-月-日

select:旧版本下拉框

selectDict

String

type为bizDict、bizSelect时,必填

valueFormat

String

组件为date、dateRange必填

不写默认:YYYY-MM-DD

其他格式:YYYY-MM-DD HH:mm:ss

checked

Bool

复制即可

true

disable

Bool

复制即可

false

defaultValue

String

复制即可

''

data

Array

复制即可

[]

placeholder

String

提示语,默认为label标题

注意

如果部分代码,无法复制,可以参考:src/views/purchase/cgreturn/index.vue

技术支持

如果有更高级的需求,请联系我们!


举报

相关推荐

0 条评论