目录结构

源码

index.vue

<template>
  <el-form class="mb-5" :rules="rules" :model="queryForm" ref="queryDOM" label-width="80">
    <el-row :gutter="20">
      <slot></slot>
      <el-col class="text-end" :span="btnSpan">
        <el-button @click="searchData" type="primary" :loading="loading">搜索</el-button>
        <el-button @click="resetQuery" :loading="loading">重置</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
/**
* @author        全易
* @time          2023-12-19 16:12:34  星期二
* @description   数据条件过滤容器
**/
import propsData from "./props.js"

const queryDOM = ref(null);
const props = defineProps(propsData)

// 重置查询
function resetQuery() {
  queryDOM.value.resetFields()
  props.searchData()
};

// 校验表单
async function validate() {
  return await queryDOM.value.validate((valid, fields) => { });
}

// 重置表单
function reset() {
  return new Promise((resolve, reject) => {
    queryDOM.value.resetFields()
    resolve(true)
  })
}

defineExpose({
  validate, reset
})
</script>

<style lang="less" scoped></style>

props.js

export default {
  btnSpan: {
    type: Number,
    default: 4
  },
  loading: {
    type: Boolean,
    default: false
  },
  rules: {
    type: Object
  },
  queryForm: {
    type: Object,
    require: true
  },
  searchData: {
    type: Function
  },
  resetData: {
    type: Function
  }
}

使用说明

• 默认使用

<data-filter ref="queryDOM" :queryForm="queryForm" :btnSpan="24" :searchData="searchData">
    <el-col :span="4">
        <el-form-item label="项目编号" prop="menuName">
            <el-input v-model="queryForm.menuName" clearable />
        </el-form-item>
    </el-col>
</data-filter>

• 需要校验

 <cit-filter :searchData="queryForm" :resetData="queryReset" ref="queryDOM" :queryForm="queryForm" :rules="queryRules" :btnSpan="20">
     <el-col :span="4">
         <el-form-item label="项目编号" prop="menuName">
             <el-input v-model="queryForm.menuName" clearable />
         </el-form-item>
     </el-col>
</cit-filter>


<script setup>
    async function filterData() {
        const res = await instance.proxy.$refs.queryDOM.validate()
        console.log(res);
    }
    async function queryReset() {
        const res = await instance.proxy.$refs.queryDOM.reset()
        console.log(res);
    }
</script>

参数

见\props.js