第五节：搜索组件封装剖析、弹框的使用、页面各组件联调

一. 搜索框组件封装

1. 核心思路

 (1). 搜索框分为两部分：按钮区域 和 表单内容区域

 (2). 按钮区域：

        搜索和重置两个按钮为默认按钮，通过emits('update:xxx', xxx);对外暴露，调用父组件的更新方法。

        然后声明一块  <slot name="myOwnArea"> </slot> 具名插槽区域，用于父组件自己扩展按钮

 (3). 表单内容区域：

   A. activeName: 在父组件中直接 :activeName=“xxx”，进行传递，主要用于搜索框展开默认显示的区域名称

   B. 表单域的三个基本属性，父组件通过v-bind绑定searchFormConfig进行传递，分别是：

      isInline：是否是行内显示、label-position：表单域标签的位置、label-width：表单中form-item中对应标题的宽度

   C. 表单数据对象 :model="modelValue", 父组件通过 v-model绑定， 子组件通过 modelValue接收，然后给el-form上的model绑定

   D. 表单内容： 遍历 formItems

     a. 通过v-bind="item.otherOptions"，绑定组件特有的属性

     b. 绑定值的方式，详见下面的2 【子传父的两种模式】

组件代码分享： 

<!--搜索栏区域封装 -->
<template>
    <div class="mySearchArea">
        <el-collapse v-model="activeName" accordion class="my-collapse" @change="handleChange">
            <el-collapse-item name="firstCollaspe">
                <template #title>
                    <div class="my-collapse-title" @click.stop="">
                        <el-button size="small" type="primary" @click.stop="searchClick">搜索</el-button>
                        <el-button size="small" @click.stop="resetClick">重置</el-button>
                        <!-- 具名插槽，用于外界自己扩展按钮，用法  #myOwnArea -->
                        <slot name="myOwnArea"> </slot>
                    </div>
                </template>
                <!-- 搜索区域内容 -->
                <el-card shadow="never" class="my-card-search">
                    <el-form ref="searchFormRef" :inline="isInLine" :label-position="labelPosition" :label-width="labelWidth" :model="modelValue">
                        <template v-for="item in formItems" :key="item.field">
                            <el-form-item :label="item.label">
                                <!-- 1. input标签 -->
                                <!-- 特别注意：$event就是修改后的值 -->
                                <template v-if="item.type === 'input'">
                                    <el-input
                                        v-bind="item.otherOptions"
                                        :placeholder="item.placeholder"
                                        :modelValue="myFormData[`${item.field}`]"
                                        @update:modelValue="handleValueChange($event, item.field)"
                                        @keyup.enter="searchClick"
                                    ></el-input>
                                </template>
                                <!-- 2. select标签 -->
                                <template v-else-if="item.type === 'select'">
                                    <el-select
                                        v-bind="item.otherOptions"
                                        :placeholder="item.placeholder"
                                        :modelValue="myFormData[`${item.field}`]"
                                        @update:modelValue="handleValueChange($event, item.field)"
                                    >
                                        <el-option v-for="oItem in item.options" :label="oItem.label" :value="oItem.value"></el-option>
                                    </el-select>
                                </template>
                                <!-- 3. date-picker标签 -->
                                <!--特别注意： start-placeholder 和 startPlaceholder 写法是等价的 -->
                                <template v-else-if="item.type === 'datepicker'">
                                    <el-date-picker
                                        v-bind="item.otherOptions"
                                        :modelValue="myFormData[`${item.field}`]"
                                        @update:modelValue="handleValueChange($event, item.field)"
                                    >
                                    </el-date-picker>
                                </template>
                            </el-form-item>
                        </template>

                        <!-- <el-form-item label="账号">
                            <el-input placeholder="请输入" v-model.trim="formData.userAccount" @keyup.enter="searchClick"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input placeholder="请输入" v-model.trim="formData.userRealName" @keyup.enter="searchClick"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-select placeholder="请选择" v-model="formData.userSex" style="width: 181px">
                                <el-option label="全部" value="-1"></el-option>
                                <el-option label="男" value="0"></el-option>
                                <el-option label="女" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="联系方式">
                            <el-input placeholder="请输入" v-model.trim="formData.userPhone" @keyup.enter="searchClick"></el-input>
                        </el-form-item>
                        <el-form-item label="创建时间">
                            <el-date-picker
                                start-placeholder="开始日期"
                                range-separator="至"
                                end-placeholder="结束日期"
                                v-model="formData.operateDateRange"
                                type="daterange"
                                value-format="YYYY-MM-DD"
                                style="width: 479px"
                            >
                            </el-date-picker>
                        </el-form-item> -->
                    </el-form>
                </el-card>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script setup>
/**
 *监听搜索框打开or折叠
 */
const handleChange = val => {
    emits('update:handleChange', val);
};

// 1. 接收父组件传递过来的值
const props = defineProps({
    // 搜索框展开默认显示的区域名称
    activeName: {
        type: String,
        default: 'firstCollaspe',
    },
    //form表单中的内容, 父组件v-model默认绑定的接收值就是modelValue
    modelValue: {
        type: Object,
        required: true,
    },
    // 表单中form-item中对应标题的宽度
    labelWidth: {
        type: String,
        default: '85px',
    },
    // 表单域标签的位置
    labelPosition: {
        type: String,
        default: 'right',
    },
    // 行内表单模式
    isInLine: {
        type: Boolean,
        default: true,
    },
    // form中各个表单子元素的属性集合
    formItems: {
        type: Array,
        default: () => [],
    },
});

// 需要符合单项数据流原则，不要直接对prop中接收的对象进行修改
const myFormData = ref({ ...props.modelValue });

// 2. 声明对外传递事件
// 注意：这里声明的'update:modelValue'和上面input标签中用的不是一个！！！
// 上面input中的等价于@input/change, 而这里的'update:modelValue'用于向父组件传递值的
const emits = defineEmits(['update:searchClick', 'update:resetClick', 'update:modelValue', 'update:handleChange']);

/**
 * 搜索事件
 */
const searchClick = () => {
    emits('update:searchClick');
};

/**
 * 重置事件
 */
const resetClick = () => {
    emits('update:resetClick');
};

/**
 * 监听form表单中内容的变化
 * @param {String、Array} pageInfo 变化后的属性内容
 * @param {String} field  对应的属性名称
 */
const handleValueChange = (newValue, field) => {
    // 下面代码针对父组件中的ref对象有效(直接传递...props.modelValue生效，就不符合单项数据流原则了)【不推荐使用了】
    // emits('update:modelValue', { ...myFormData.value, [field]: newValue });

    // 下面代码针对父组件中的 reactive或ref 对象有效
    emits('update:modelValue', Object.assign(myFormData.value, { [field]: newValue }));
};
</script>

<style scoped lang="scss">
.mySearchArea {
    margin-bottom: 10px;
    .el-form--inline .el-form-item {
        vertical-align: baseline;
    }
}
/* 【el-collapse】样式重写 */
.my-collapse {
    border: none;
    .my-collapse-title {
        padding: 0px 5px;
    }
}

/* 重写折叠栏的高度 */
.el-collapse {
    --el-collapse-header-height: 40px;
}

/* 内部card中body样式重写 */
.my-card-search {
    border: none;
    max-height: 122px;
    box-sizing: border-box;
    overflow: auto;
    /* 内容区域的padding */
    .el-card__body {
        padding: 10px 5px;
    }
}
</style>
<style lang="scss">
/* 样式重写(加上scoped标签无效) */
.el-collapse-item__content {
    padding-bottom: 0 !important;
}
</style>

父页面代码分享：

<template>
    <div>
        <!-- 1. 搜索栏区域 -->
        <ypfSearch
            :activeName="activeName"
            v-bind="searchFormConfig"
            v-model="formData"
            @update:searchClick="searchClick"
            @update:resetClick="resetClick"
            @update:handleChange="myHandleChange"
        >
            <!-- 此处可以通过具名插槽扩展自己的内容 <template #myOwnArea> </template> -->
        </ypfSearch>

        <!-- 2. 内容区域  -->
        <ypfTable
            ref="ypfTableRef"
            v-bind="contentTableConfig"
            :tableRows="tableData.tableRows"
            :propList="bindPropList"
            :tableTotal="tableData.total"
            :page="tableData.param"
            @update:page="UpdatePage"
            @update:tableSelChange="tableSelChange"
            @update:sortChange="sortChange"
        >
            <!-- 2.1 按钮区域 -->
            <template #btnLeft>
                <el-button size="small" type="success" @click="onOpenAddDialog" v-auth="authList.add"> 新增 </el-button>
                <el-button size="small" type="danger" @click="deleteObjs(null)" v-auth="authList.delMany"> 删除 </el-button>
            </template>
            <template #btnRight>
                <el-button size="small" type="primary" round v-auth="authList.excel" @click="exportExcel"> 导出 </el-button>
                <el-button size="small" type="success" round v-auth="authList.arrange" @click="openSettingDialog"> 设置 </el-button>
            </template>
            <!-- 2.2 表格区域 -->
            <template #userSex="myInfo">
                <el-tag type="success" v-if="myInfo.row1.userSex == 0">男</el-tag>
                <el-tag type="info" v-else>女</el-tag>
            </template>
            <template #addTime="myInfo">
                {{ formatDate(new Date(myInfo.row1.addTime), 'YYYY-mm-dd') }}
            </template>
            <template #handler="myInfo">
                <el-button size="small" type="text" @click="onOpenEditDialog(myInfo.row1)" v-auth="authList.edit">修改</el-button>
                <el-button size="small" type="text" @click="deleteObjs(myInfo.row1.id)" v-auth="authList.delOne">删除</el-button>
            </template>

            <!-- 2.3 分页区域 -->
        </ypfTable>

        <!-- 3. 弹框区域 -->
        <AddUer ref="addDialogRef" @updateTableInfo="initTableData" />
        <EditUser ref="editDialogRef" @updateTableInfo="initTableData" />
        <Setting ref="setDialogRef" @updateTableColumn="initTableColumn" :propList="propList" :pageName="pageName"></Setting>
    </div>
</template>
<script setup name="systemUser">
import { getCurrentInstance, nextTick, onMounted, reactive } from 'vue';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import AddUer from '/@/views/system/user/component/addUser.vue';
import EditUser from '/@/views/system/user/component/editUser.vue';
import Setting from '/@/components/setting/index.vue';
import { myAxios } from '/@/utils/request';
import { formatDate } from '/@/utils/formatTime';
import { auth } from '/@/utils/authFunction';
import { Session } from '/@/utils/storage';
import ypfTable from '/@/components/ypfTable/index.vue';
import ypfSearch from '/@/components/ypfSearch/index.vue';
import { contentTableConfig } from './config/tableConfig';
import { searchFormConfig } from './config/searchFormConfig';
import { TrimObjStrPros } from '/@/utils/myTools';

const { proxy, type } = getCurrentInstance();
const store = useStore();
const pageName = type.name; //当前页面的name值(systemUser)
const columnLocalKey = `${store.state.userInfos.userInfos.userAccount}_${pageName}`; //表格显示列数据对应的缓存key, eg: admin_systemUser

// 表格对象
const ypfTableRef = ref(null);
/**
 * 监听搜索栏折叠or展开时触发
 */
const myHandleChange = () => {
    // 必须加个延迟，否则获取的高度是折叠前的高度
    setTimeout(() => ypfTableRef.value?.calTableHeight(), 500);
};

// 按钮权限对象
const authList = reactive({
    search: '/system/user/search',
    add: '/system/user/add',
    edit: '/system/user/edit',
    delOne: '/system/user/delOne',
    delMany: '/system/user/delMany',
    excel: '/system/user/excel',
    arrange: '/system/user/arrange',
});
// 绑定组件对象区域
const addDialogRef = ref(null);
const editDialogRef = ref(null);
const setDialogRef = ref(null);
// 表格区域
const tableData = reactive({
    tableRows: [], //表格数据源
    total: 0,
    selectRowIds: [], //表格选中行的id数组
    param: {
        pageNum: 1,
        pageSize: 10,
        sortName: '', //排序字段名称
        sortDirection: '', //排序方式
    },
});
//表格显示列和排列顺序(默认的)
let propList = ref(contentTableConfig.originPropList);
// 绑定用的[...propList.value]
let bindPropList = ref([]);

//搜索栏区域
const activeName = ref('firstCollaspe'); //对应collapse-item的name值，用于默认展开
// 优化：formData中的属性，不需要再写了，完全可以用searchFormConfig配置中的field属性即可
let formOriginData = {};
for (const item of searchFormConfig.formItems) {
    formOriginData[item.field] = '';
    // 下面是处理默认赋值
    if (item.field == 'userSex') {
        formOriginData[item.field] = -1;
    }
}
let formData = ref(formOriginData);

/**
 * 初始化表格数据
 */
const initTableData = async () => {
    if (!auth(authList.search)) {
        ElMessage.error('您没有查询权限');
        return;
    }
    //将string类型的对象去空格
    let myTrimData = TrimObjStrPros(formData.value);
    const { status, data } = await myAxios({
        url: proxy.$url.GetUserInforByConditionUrl,
        data: { ...tableData.param, ...myTrimData },
    });
    if (status == 'ok') {
        tableData.tableRows = data.tableRows;
        tableData.total = data.total;
    }
};
/**
  * 初始化表格显示列和顺序
  * @param {Array} newColumnData 子页面传递过来的表格显示列和顺序
  * 格式： [ { id: '1', label: '账号', columnName: 'userAccount', isSelect: true },
            { id: '2', label: '姓名', columnName: 'userRealName', isSelect: false }    ]
 */
const initTableColumn = async newColumnData => {
    let myColumnData = null;
    if (newColumnData) {
        //一.表示从子页面被动调用
        myColumnData = newColumnData;
    } else {
        // 二. 表示主页面主动加载
        //1. 先从缓存中读取
        myColumnData = Session.get(columnLocalKey);
        //2. 缓存中没有，则请求接口
        if (!myColumnData) {
            const { status, data } = await myAxios({
                url: proxy.$url.GetUserMenuColumnsUrl,
                data: { menuName: pageName },
            });
            if (status == 'ok' && data) {
                myColumnData = data;
                Session.set(columnLocalKey, myColumnData); //存到缓存中
            }
        }
    }
    //3. 处理数据
    if (myColumnData) {
        //3.1 表示从缓存 或 接口 或子页面传递 中拿到了数据
        let latestColumnData = [];
        myColumnData.forEach(item => {
            let newItem = propList.value.find(propItem => propItem.prop === item.columnName && item.isSelect == true);
            if (newItem) latestColumnData.push(newItem);
        });
        bindPropList.value = []; //必须先清空一下，才会触发数据改变
        nextTick(() => {
            bindPropList.value = [...latestColumnData];
        });
    } else {
        //3.2 表示缓存或者接口中都没有数据，直接用前端都默认值赋值
        nextTick(() => {
            bindPropList.value = [...propList.value];
        });
    }
};
/**
 * 搜索事件
 */
const searchClick = async () => {
    // console.log(formData.value);
    await initTableData();
};
/**
 * 重置事件
 */
const resetClick = async () => {
    // 清空数据
    Object.keys(formData.value).forEach(key => {
        formData.value[key] = '';
        // 下面是处理默认赋值问题
        if (key == 'userSex') {
            formData.value[key] = -1;
        }
    });
    await initTableData();
};

// 打开新增弹窗
const onOpenAddDialog = () => {
    addDialogRef.value.openDialog();
};
/**
 * 打开修改弹窗
 * @param {Object} row：该行数据
 */
const onOpenEditDialog = row => {
    editDialogRef.value.openDialog(row);
};
/**
 * 打开设置弹框
 */
const openSettingDialog = () => {
    setDialogRef.value.openDialog();
};

/**
 * 删除(单个 和 多个)
 * @param {String} row 单个删除时，删除的id
 * 对于多个删除，deleteId 为 null
 */
const deleteObjs = async deleteId => {
    let delIdsStr = deleteId ?? tableData.selectRowIds;
    if (delIdsStr.length === 0) {
        proxy.$message('请选择要删除的行');
        return;
    }
    let confirmResult = await proxy.$myConfirm('您确定要删除该账户吗?');
    if (confirmResult == 'confirm') {
        const { status, msg } = await myAxios({
            url: proxy.$url.DelUserUrl,
            data: { delIdsStr },
        });
        if (status === 'ok') {
            ElMessage.success(msg);
            await initTableData();
        }
    }
};

/**
 * 监听表格选中行变化
 * @param {Array} selections 变化后的数组(数组元素为每行的数据)
 */
const tableSelChange = selections => {
    let selectRowIds = selections.map(item => item.id); //返回一个id集合数组
    tableData.selectRowIds = selectRowIds;
};

/**
 * 监听子页面传递过来的表格排序参数
 * @param {Object}  pageInfo {sortName: xx, sortDirection: xx}
 * 解释：sortName 表格排序列名称, sortDirection 表格排序方式
 */
const sortChange = async ({ sortName, sortDirection }) => {
    if (sortName && sortDirection) {
        tableData.param.sortName = sortName;
        tableData.param.sortDirection = sortDirection;
        await initTableData();
    }
};

/**
 * 监听子页面传递的表格分页参数
 * @param {Object} pageInfo {pageNum: xx, pageSize: xx}
 */
const UpdatePage = pageInfo => {
    if (pageInfo) {
        //tableData.param 中的sortDirection和sortName被置为 "", 不影响业务
        tableData.param = { ...pageInfo };
        initTableData();
    }
};

/**
 * 按顺序导出显示列的excel表格
 */
const exportExcel = async () => {
    let confirmResult = await proxy.$myConfirm('您确定要导出Excel吗?');
    let myTrimData = TrimObjStrPros(formData.value); //将string类型的对象去空格
    let searchStr = JSON.stringify(myTrimData); //搜索条件字符串
    let pageStr = JSON.stringify(tableData.param); //分页条件字符串
    //需要导出列的信息  注：只有含有excelWidth属性的列才是需要导出的列
    let bindPropListStr = JSON.stringify(bindPropList.value.filter(item => item.excelWidth));
    if (confirmResult == 'confirm') {
        // 版本1-路径的形式
        // window.location.href = proxy.$url.UserDownLoadFileExcelUrl + '?auth=' + Session.get('token') + '&searchStr=' + searchStr + '&pageStr=' + pageStr + '&bindPropListStr=' + bindPropListStr;

        // 版本2-文件流版本
        await myAxios({
            url: proxy.$url.UserDownLoadFileExcelUrl2,
            responseType: 'blob',
            data: { searchStr, pageStr, bindPropListStr },
        });
    }
};

// 页面实例挂载完成后
onMounted(async () => {
    // 1. 初始化表格显示列和排列顺序
    await initTableColumn();
    // 2. 初始化表格数据
    await initTableData();
});
</script>

配置文件代码分享：

const searchFormConfig = {
    labelWidth: '85px', //表单中form-item中对应标题的宽度
    labelPosition: 'right', //表单域标签的位置
    isInLine: true, //行内表单模式
    formItems: [
        {
            field: 'userAccount',
            type: 'input',
            label: '账号',
            placeholder: '请输入',
            otherOptions: {}, //对应form-item特有属性，比如后面的时间框
        },
        {
            field: 'userRealName',
            type: 'input',
            label: '姓名',
            placeholder: '请输入',
            otherOptions: {},
        },
        {
            field: 'userSex',
            type: 'select',
            label: '性别',
            placeholder: '请选择',
            options: [
                { label: '全部', value: -1 },
                { label: '男', value: 0 },
                { label: '女', value: 1 },
            ],
            otherOptions: {
                style: 'width: 181px',
            },
        },
        {
            field: 'userPhone',
            type: 'input',
            label: '联系方式',
            placeholder: '请输入',
            otherOptions: {},
        },
        {
            field: 'operateDateRange',
            type: 'datepicker',
            label: '创建时间',
            otherOptions: {
                startPlaceholder: '开始时间',
                rangeSeparator: '至',
                endPlaceholder: '结束时间',
                type: 'daterange',
                valueFormat: 'YYYY-MM-DD',
                style: 'width: 479px',
            },
        },
    ],
};

export { searchFormConfig };

 

2. ypf-search组件传值方案【子传父】

(1). 方案1

   子组件通过 :modelValue="myFormData[`${item.field}`]" 绑定值，通过@update:modelValue="handleValueChange($event, item.field)"监听变化， 因为要遵循单向数据流原则，绑定的是myFromData, const myFormData = ref({ ...props.modelValue });  在handleValueChange方法中通过 ，由于中转了一下，绑定的是myFormData，所以通过Object.assign处理后，传值 emits('update:modelValue', Object.assign(props.modelValue, { [field]: newValue })); 向父组件传值， 父组件通过v-model的形式绑定，能监听formData变化的同时，直接赋值，只需要监听 @update:searchClick=“xxx”，里面调用初始化数据方法initTableData即可（该方法内部的formData已经更新赋值）

        详见【components/ypfSearch/index.vue 】

<!--搜索栏区域封装 -->
<template>
    <div class="mySearchArea">
        <el-collapse v-model="activeName" accordion class="my-collapse" @change="handleChange">
            <el-collapse-item name="firstCollaspe">
                <template #title>
                    <div class="my-collapse-title" @click.stop="">
                        <el-button size="small" type="primary" @click.stop="searchClick">搜索</el-button>
                        <el-button size="small" @click.stop="resetClick">重置</el-button>
                        <!-- 具名插槽，用于外界自己扩展按钮，用法  #myOwnArea -->
                        <slot name="myOwnArea"> </slot>
                    </div>
                </template>
                <!-- 搜索区域内容 -->
                <el-card shadow="never" class="my-card-search">
                    <el-form ref="searchFormRef" :inline="isInLine" :label-position="labelPosition" :label-width="labelWidth" :model="modelValue">
                        <template v-for="item in formItems" :key="item.field">
                            <el-form-item :label="item.label">
                                <!-- 1. input标签 -->
                                <!-- 特别注意：$event就是修改后的值 -->
                                <template v-if="item.type === 'input'">
                                    <el-input
                                        v-bind="item.otherOptions"
                                        :placeholder="item.placeholder"
                                        :modelValue="myFormData[`${item.field}`]"
                                        @update:modelValue="handleValueChange($event, item.field)"
                                        @keyup.enter="searchClick"
                                    ></el-input>
                                </template>
                                <!-- 2. select标签 -->
                                <template v-else-if="item.type === 'select'">
                                    <el-select
                                        v-bind="item.otherOptions"
                                        :placeholder="item.placeholder"
                                        :modelValue="myFormData[`${item.field}`]"
                                        @update:modelValue="handleValueChange($event, item.field)"
                                    >
                                        <el-option v-for="oItem in item.options" :label="oItem.label" :value="oItem.value"></el-option>
                                    </el-select>
                                </template>
                                <!-- 3. date-picker标签 -->
                                <!--特别注意： start-placeholder 和 startPlaceholder 写法是等价的 -->
                                <template v-else-if="item.type === 'datepicker'">
                                    <el-date-picker
                                        v-bind="item.otherOptions"
                                        :modelValue="myFormData[`${item.field}`]"
                                        @update:modelValue="handleValueChange($event, item.field)"
                                    >
                                    </el-date-picker>
                                </template>
                            </el-form-item>
                        </template>

                        <!-- <el-form-item label="账号">
                            <el-input placeholder="请输入" v-model.trim="formData.userAccount" @keyup.enter="searchClick"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input placeholder="请输入" v-model.trim="formData.userRealName" @keyup.enter="searchClick"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-select placeholder="请选择" v-model="formData.userSex" style="width: 181px">
                                <el-option label="全部" value="-1"></el-option>
                                <el-option label="男" value="0"></el-option>
                                <el-option label="女" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="联系方式">
                            <el-input placeholder="请输入" v-model.trim="formData.userPhone" @keyup.enter="searchClick"></el-input>
                        </el-form-item>
                        <el-form-item label="创建时间">
                            <el-date-picker
                                start-placeholder="开始日期"
                                range-separator="至"
                                end-placeholder="结束日期"
                                v-model="formData.operateDateRange"
                                type="daterange"
                                value-format="YYYY-MM-DD"
                                style="width: 479px"
                            >
                            </el-date-picker>
                        </el-form-item> -->
                    </el-form>
                </el-card>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script setup>
/**
 *监听搜索框打开or折叠
 */
const handleChange = val => {
    emits('update:handleChange', val);
};

// 1. 接收父组件传递过来的值
const props = defineProps({
    // 搜索框展开默认显示的区域名称
    activeName: {
        type: String,
        default: 'firstCollaspe',
    },
    //form表单中的内容, 父组件v-model默认绑定的接收值就是modelValue
    modelValue: {
        type: Object,
        required: true,
    },
    // 表单中form-item中对应标题的宽度
    labelWidth: {
        type: String,
        default: '85px',
    },
    // 表单域标签的位置
    labelPosition: {
        type: String,
        default: 'right',
    },
    // 行内表单模式
    isInLine: {
        type: Boolean,
        default: true,
    },
    // form中各个表单子元素的属性集合
    formItems: {
        type: Array,
        default: () => [],
    },
});

// 需要符合单项数据流原则，不要直接对prop中接收的对象进行修改
const myFormData = ref({ ...props.modelValue });

// 2. 声明对外传递事件
// 注意：这里声明的'update:modelValue'和上面input标签中用的不是一个！！！
// 上面input中的等价于@input/change, 而这里的'update:modelValue'用于向父组件传递值的
const emits = defineEmits(['update:searchClick', 'update:resetClick', 'update:modelValue', 'update:handleChange']);

/**
 * 搜索事件
 */
const searchClick = () => {
    emits('update:searchClick');
};

/**
 * 重置事件
 */
const resetClick = () => {
    emits('update:resetClick');
};

/**
 * 监听form表单中内容的变化
 * @param {String、Array} pageInfo 变化后的属性内容
 * @param {String} field  对应的属性名称
 */
const handleValueChange = (newValue, field) => {
    // 下面代码针对父组件中的ref对象有效(直接传递...props.modelValue生效，就不符合单项数据流原则了)【不推荐使用了】
    // emits('update:modelValue', { ...myFormData.value, [field]: newValue });

    // 下面代码针对父组件中的 reactive或ref 对象有效
    emits('update:modelValue', Object.assign(myFormData.value, { [field]: newValue }));
};
</script>

<style scoped lang="scss">
.mySearchArea {
    margin-bottom: 10px;
    .el-form--inline .el-form-item {
        vertical-align: baseline;
    }
}
/* 【el-collapse】样式重写 */
.my-collapse {
    border: none;
    .my-collapse-title {
        padding: 0px 5px;
    }
}

/* 重写折叠栏的高度 */
.el-collapse {
    --el-collapse-header-height: 40px;
}

/* 内部card中body样式重写 */
.my-card-search {
    border: none;
    max-height: 122px;
    box-sizing: border-box;
    overflow: auto;
    /* 内容区域的padding */
    .el-card__body {
        padding: 10px 5px;
    }
}
</style>
<style lang="scss">
/* 样式重写(加上scoped标签无效) */
.el-collapse-item__content {
    padding-bottom: 0 !important;
}
</style>

 

(2). 方案2

   子组件通过v-model绑定数据，赋值的同时进行监听，注意，这里并没有直接绑定modelValue, 因为要遵循单向数据流原则，绑定的是myFromData,      const myFormData = ref({ ...props.modelValue });  然后通过watch监听myFormData的变化，并通过emits('update:modelValue', newValue);对外暴露，  父组件通过v-model的形式绑定，能监听formData变化的同时，直接赋值，只需要监听 @update:searchClick=“xxx”，里面调用初始化数据方法initTableData即可（该方法内部的formData已经更新赋值）

        详见【components/ypfSearch/index_v2.vue 】

<!--搜索栏区域封装 -->
<template>
    <div class="mySearchArea">
        <el-collapse v-model="activeName" accordion class="my-collapse" @change="handleChange">
            <el-collapse-item name="firstCollaspe">
                <template #title>
                    <div class="my-collapse-title" @click.stop="">
                        <el-button size="small" type="primary" @click.stop="searchClick">搜索</el-button>
                        <el-button size="small" @click.stop="resetClick">重置</el-button>
                        <!-- 具名插槽，用于外界自己扩展按钮，用法  #myOwnArea -->
                        <slot name="myOwnArea"> </slot>
                    </div>
                </template>
                <!-- 搜索区域内容 -->
                <el-card shadow="never" class="my-card-search">
                    <el-form ref="searchFormRef" :inline="isInLine" :label-position="labelPosition" :label-width="labelWidth" :model="modelValue">
                        <template v-for="item in formItems" :key="item.field">
                            <el-form-item :label="item.label">
                                <!-- 1. input标签 -->
                                <!-- 特别注意：$event就是修改后的值 -->
                                <template v-if="item.type === 'input'">
                                    <el-input
                                        v-bind="item.otherOptions"
                                        :placeholder="item.placeholder"
                                        v-model="myFormData[`${item.field}`]"
                                        @keyup.enter="searchClick"
                                    ></el-input>
                                </template>
                                <!-- 2. select标签 -->
                                <template v-else-if="item.type === 'select'">
                                    <el-select v-bind="item.otherOptions" :placeholder="item.placeholder" v-model="myFormData[`${item.field}`]">
                                        <el-option v-for="oItem in item.options" :label="oItem.label" :value="oItem.value"></el-option>
                                    </el-select>
                                </template>
                                <!-- 3. date-picker标签 -->
                                <!--特别注意： start-placeholder 和 startPlaceholder 写法是等价的 -->
                                <template v-else-if="item.type === 'datepicker'">
                                    <el-date-picker v-bind="item.otherOptions" v-model="myFormData[`${item.field}`]"> </el-date-picker>
                                </template>
                            </el-form-item>
                        </template>
                    </el-form>
                </el-card>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script setup>
import { watch } from '@vue/runtime-core';

/**
 *监听搜索框打开or折叠
 */
const handleChange = val => {
    emits('update:handleChange', val);
};

// 1. 接收父组件传递过来的值
const props = defineProps({
    // 搜索框展开默认显示的区域名称
    activeName: {
        type: String,
        default: 'firstCollaspe',
    },
    //form表单中的内容, 父组件v-model默认绑定的接收值就是modelValue
    modelValue: {
        type: Object,
        required: true,
    },
    // 表单中form-item中对应标题的宽度
    labelWidth: {
        type: String,
        default: '85px',
    },
    // 表单域标签的位置
    labelPosition: {
        type: String,
        default: 'right',
    },
    // 行内表单模式
    isInLine: {
        type: Boolean,
        default: true,
    },
    // form中各个表单子元素的属性集合
    formItems: {
        type: Array,
        default: () => [],
    },
});

// 需要符合单项数据流原则，不要直接对prop中接收的对象进行修改
const myFormData = ref({ ...props.modelValue });

// 2. 声明对外传递事件
const emits = defineEmits(['update:searchClick', 'update:resetClick', 'update:modelValue']);

/**
 * 搜索事件
 */
const searchClick = () => {
    emits('update:searchClick');
};

/**
 * 重置事件
 */
const resetClick = () => {
    emits('update:resetClick');
};

/**
 * 监听form表单中内容的变化
 */
watch(
    myFormData,
    newValue => {
        emits('update:modelValue', newValue);
    },
    { deep: true }
);
</script>

<style scoped lang="scss">
.mySearchArea {
    margin-bottom: 10px;
    .el-form--inline .el-form-item {
        vertical-align: baseline;
    }
}
/* 【el-collapse】样式重写 */
.my-collapse {
    border: none;
    .my-collapse-title {
        padding: 0px 5px;
    }
}

/* 重写折叠栏的高度 */
.el-collapse {
    --el-collapse-header-height: 40px;
}

/* 内部card中body样式重写 */
.my-card-search {
    border: none;
    max-height: 122px;
    box-sizing: border-box;
    overflow: auto;
    /* 内容区域的padding */
    .el-card__body {
        padding: 10px 5px;
    }
}
</style>
<style lang="scss">
/* 样式重写(加上scoped标签无效) */
.el-collapse-item__content {
    padding-bottom: 0 !important;
}
</style>

 

总结：方案2写法更加简洁，无论用哪种方案，父页面中的业务代码都不需要改

 

3. 其它技术点剖析

(1). 父组件重置对象的方案

  A. 针对ypf-search方案1的写法，父组件可以直接 formData.value = {}; 清空数据即可

  B. 针对ypf-search方案2的写法，父组件需要通过遍历属性的写法清空数据  （这种写法是通用的，也适合方案1）

let formOriginData = {};
for (const item of searchFormConfig.formItems) {
	formOriginData[item.field] = '';
	// 下面是处理默认赋值
	if (item.field == 'userSex') {
		formOriginData[item.field] = -1;
	}
}

(2). 搜索框默认赋值的问题

  A. 首先父组件中组装formData的时候需要判断，赋默认值

  B. 父组件中重置方法resetClick中需要赋默认值

(3). 搜索条件去空格方案 【考虑抽离封装一下！！】

   主要针对表格加载方法“initTableData” 和 导出Excel方法“exportExcel”中的 fromData.value，进行处理： 先深拷贝给一个新对象(否则响应式相互影响) → 遍历获取string类型属性→ 去空格

 

4. 其它记录

 (1).  :inline='true',可以让多个表单元素显示在一行上，如果设置为false，则一个<el-form-item/>一行

 (2).  在<el-form/>上设置 label-width="85px"，表示下面所有的 <el-form-item/>标题的宽度为85px，注意是标题(label)，不是输入框。 也可以直接加在<el-form-item/>上，优先级高于加在<el-form/>上的

 (3).  普通的input输入框宽度为181，所以把select下拉框width设置成181，时间选择框width=181+181+85(label)+32(右边距)=479px

 (4).  对于不同的输入框，比如select、date-picker，需要在style中设置样式，比如 style="width: 181px"

 

二. 弹框的使用

1. 如果单独封装一个弹框页面, 那么意味着就没有addUser.vue、editUser.vue这些页面了，所有的业务逻辑都集中index主页面中和封装弹框页面里了；

   另外新增和编辑的api地址不同，通过传值的方式也不是很友好，所以这里目前不倾向彻底封装。

2. 考虑将dialog中的<el-form/>抽离出来，这样既可以简化每个弹框页面的代码，又可以保留这些页面，而且index主页面代码不需要改，目前来看是比较好的方案.

3. dialog内部引用了el-row 和 el-cow响应式布局，不利于封装

   综上所述，弹框组件【暂时不封装】，后面有了好的思路再决定

 

 

三. 其它

 

    后面补充

 

 

 

 

 

 

 

!

• 作       者 : Yaopengfei(姚鹏飞)
• 博客地址 : http://www.cnblogs.com/yaopengfei/
• 声     明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
• 声     明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。