VUE快速改造前端高级搜索

更新说明：

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

截图

步骤

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

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

<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>

2. 重要：参考搜索条件字段配置代码，需要根据实际需改

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: []
        },

      ],

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

字段配置含义

注意

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

技术支持

如果有更高级的需求，请联系我们！