JLH/JLHAPP/src/components/lj-win-index-common-list.vue

<!--
@name 模板组件：单据列表查询通用模板窗口（升级版）
@desc 基于vant-ui, 数据获取请求、下拉刷新、上拉加载更多、高级搜索、扫描等功能

【必填参数】：
    @param {String} [title] - 标题名称
    @param {String} [apiName] - 获取单据列表的接口的接口
    @param {function} [dataLoadedCallback] - “加载更多”完成时的数据处理回调（函数入参：接口返回的原对象；返回boolean，true继续加载，false没有更多）
    @param {function} [dataResetCallback] - “下拉刷新”或高级搜索触发的数据处理回调（入参：接口返回原对象）


【选填参数】
    @param {Boolean} [addable] - 是否显示加号图标, default: false
    @param {Boolean} [fixable] - 是否显示维修图标, default: false
    @param {Boolean} [tranable] - 是否显示调动图表, default: false
    @param {Array} [queryFields] - 同lj-query-list的queryFields，设置后显示筛选按钮，点击弹出高级筛选框
        @Object:{
            title {String}: "标题",
            property {String}: "属性名",
            initValue {Number/String}: "默认赋值",
            group {String}: "属性分组名称"
        }
    @param {Array} [queryQuick] - 同lj-query-list的queryFields，tabs栏快捷筛选
        @Object:{
            title {String}: "标题",
            property {String}: "属性名",
            initValue {Number/String}: "默认赋值",
            group {String}: "属性分组名称"

            title {String}: "标题",
            property {String}: "属性名称",
            type {String}: "类型",
                'radio1': 单选，排版：单行
                'radio2': 单选，排版：一行两个
                'radio3': 单选，排版：一行三个
                'cascader': 层级选择
            initValue {Number/String}: "默认赋值",
            selectOptions: {
                optionsApi {String}: "api接口名称", 动态获取数据
                requestbody {Object}: "接口参数",
                resultName {String}: "", 返回对象名
                options {Array} 选项列表 
                valueMap {Object} "自定义 options 结构中的字段", default: { text: 'text', value: 'value', children: 'children' },
            }
        }
    @param {Array} [queryHardParms] - 同lj-query-list的hardParms, 默认筛选赋值参数
    @param {Boolean} [ifShowSearchbar] - 是否使用搜索栏, default: false
    @param {String} [searchText] - 搜索关键字, default: false
        @example=> v-on:update:searchText="emitChangeKeyword"
    @param {Array} [searchActions] - 搜索栏快捷列表
        @Object:{
            title {String}: "全部",
            property {String}: "属性名",
        }
    @param {String} [hint] - 继承lj-searchbar-pro: 输入框默认提示信息, default: "请输入关键字搜索"

【插槽】
    @slot [header] - app bar中间，默认为标题
    @slot [header_right] - appbar 右侧，通常为图标按钮
    @slot [header_sub] - appbar下方子标题，固定在顶部
    @slot [body_list] - 中间内容，通常为单据列表
    @slot [footer] - 底部，固定
-->

<template>
    <lj-win-common :title="title" right-drawer-title="搜索" @fix-body="fixbody" :closeWinHandler="handleCloseWin"
                   ref="baseWin">
        <slot slot="header" name="header"></slot>
        <slot name="header_right" slot="header_right"></slot>
        <mu-button v-if="addable" icon slot="header_right" @click="handleAddButton">
            <i class="iconfont icon-add"></i></mu-button>
        <mu-button v-if="fixable" icon slot="header_right" @click="handleFixButton">
            <i class="iconfont icon-weixiu"></i></mu-button>
        <mu-button v-if="tranable" icon slot="header_right" @click="handleTranButton">
            <i class="iconfont icon-cart"></i></mu-button>
        <!-- <mu-button v-if="showFilter" icon slot="header_right" @click="openRightDrawer">
            <i class="iconfont icon-filter"></i></mu-button> -->
            
        <slot name="header_sub" slot="header_sub" :ifShowSearchbar="ifShowSearchbar" :searchtext="keyword" :search="handleSearchbar">
            <lj-searchbar-pro
                v-if="ifShowSearchbar"
                ref="searchbarPro"
                :keyword="keyword"
                :apiName="postApiName"
                v-on:update:keyword="emitChangeKeyword"
                :actions="searchActions"
                :hint="hint"
                :popoOffset="popoOffset"
                scanicon
                @search="handleSearchbar"
                @cancel="handleSearchbarCancel"
                @focusSearch="handleSearchFocus"
                @blurSearch="handleSearchBlur"
                @scan-click="handleSearchScan"
                @click-right-btn="openFilterPopup"
            >
                <template slot="right" slot-scope="data" v-if="!showQuickFilter && showFilter">
                    <div class="right-part" @click="data.clickRightBtn" :class="{'filtering': ifBottomFilter}">
                        <i class="iconfont" :class="ifBottomFilter ? 'icon-filter_dark' : 'icon-filter_light'"></i>
                    </div>
                </template>
            </lj-searchbar-pro>
            <lj-tabs-quick
                v-if="ifTabsQuick"
                ref="ljTabsQuick"
                :apiName="postApiName"
                :query-fields="queryQuick"
                @click-right-btn="openFilterPopup"
                @confirm="handleFilterConfirm"
            >
                <template slot="right" slot-scope="data" v-if="showFilter">
                    <div class="right-part" @click="data.clickRightBtn" :class="{'filtering': ifBottomFilter}">
                        筛选
                        <i class="iconfont" :class="ifBottomFilter ? 'icon-filter_dark' : 'icon-filter_light'"></i>
                    </div>
                </template>
            </lj-tabs-quick>
            <lj-tabs-filtrate
                v-else-if="showQuickFilter"
                ref="ljTabsFiltrate"
                :apiName="postApiName"
                :query-fields="queryQuick"
                @click-right-btn="openFilterPopup"
                @confirm="handleFilterConfirm"
            >
                <template slot="right" slot-scope="data" v-if="showFilter">
                    <div class="right-part" @click="data.clickRightBtn" :class="{'filtering': ifBottomFilter}">
                        筛选
                        <i class="iconfont" :class="ifBottomFilter ? 'icon-filter_dark' : 'icon-filter_light'"></i>
                    </div>
                </template>
            </lj-tabs-filtrate>
        </slot>
        <div class="body" slot="body" ref="bodyref">
            <lj-widget-refresh-list
                ref="refresh_list"
                offset="100"
                ifwhite
                @onRefresh="refresh"
                @onLoad="load"
            >
                <!-- :style="{'height': bodyHeight, 'overflow': 'auto'}" -->
                <template slot="list_body">
                    <slot name="body_list" ref="bodyListRef"/>
                </template>
            </lj-widget-refresh-list>

            <lj-bottom-filtrate
                v-if="showFilter"
                ref="ljBottomFiltrate"
                :query-fields="queryFields"
                :hard-parms="queryHardParms"
                :binding-parms="bindingParms"
                @confirm="handleFilterConfirm"
                @filter="handleFilterBottomFiltering"
            >
            </lj-bottom-filtrate>
            
            <lj-to-top ref="scrollToTop" :pageindex="currentPageIndex"></lj-to-top>
        </div>
        <slot slot="footer" name="footer"></slot>
    </lj-win-common>
</template>
<script>
    import LjWinCommon from 'components/lj-win-common';
    // import LjQueryList from "components/lj-query-list";
    import LjSearchbarPro from 'components/lj-searchbar-pro';
    import LjTabsFiltrate from 'components/filtrate-widget/lj-tabs-filtrate'
    import LjTabsQuick from 'components/filtrate-widget/lj-tabs-quick'
    import LjBottomFiltrate from 'components/filtrate-widget/lj-bottom-filtrate'
    import LjWidgetRefreshList from './lj-widget-refresh-list'
    import LjToTop from "./lj-scrolltotop"

    export default {
        name: "lj-win-index-common-list",
        components: {
            // LjQueryList,
            LjWinCommon,
            LjSearchbarPro,
            LjTabsFiltrate,
            LjTabsQuick,
            LjBottomFiltrate,
            LjWidgetRefreshList,
            LjToTop
        },
        props: {
            // 标题名称
            title: {
                type: String,
                required: true
            },
            // 是否显示加号图标
            addable: {
                type: Boolean,
                default: false
            },
            // 是否显示维修图标
            fixable: {
                type: Boolean,
                default: false,
            },
            // 是否显示调动图表
            tranable: {
                type: Boolean,
                default: false,
            },
            // 同lj-query-list的queryFields，设置后显示筛选按钮，点击弹出高级筛选框
            queryFields: {
                type: Array,
                default: function () {
                    return [];
                }
            },
            // 同lj-query-list的hardParms
            queryHardParms: {
                type: Object,
                default: function () {
                    return {};
                }
            },
            // 同lj-query-list的bindingParms
            bindingParms: {
                type: Object,
                default: function () {
                    return {};
                }
            },
            // queryParams: {
            //     type: Array
            // },
            // 获取单据列表的接口的接口
            apiName: {
                type: String,
                // required: true
            },
            // “加载更多”完成时的数据处理回调（函数入参：接口返回的原对象；返回boolean，true继续加载，false没有更多）
            dataLoadedCallback: {
                type: Function
            },
            // “下拉刷新”或高级搜索触发的数据处理回调（入参：接口返回原对象）
            dataResetCallback: {
                type: Function,
                required: true
            },
            // 右侧抽屉初始时是否打开
            // rightDrawerInitOpen: {
            //     type: Boolean,
            //     default: false
            // },
            searchText:{
                type: String,
                default: "" 
            },
            // 搜索栏快捷列表
            searchActions:{
                type: Array,
                default: function() {
                    return []
                }
            },
            // 继承lj-searchbar-pro: 输入框默认提示信息
            hint: {
                type: String,
                default: "请输入关键字搜索"
            },
            // 同lj-query-list的queryFields，快捷筛选
            queryQuick: {
                type: Array,
                default: function() {
                    return []
                }
            },
            // 同lj-query-list的queryFields，快捷筛选，是否使用tag样式
            ifTabsQuick: {
                type: Boolean,
                default: false
            },
            ifShowSearchbar: {
                type: Boolean,
                default: false
            },
            // 搜索下拉，出现位置的偏移量[number, number]
            popoOffset: {
                type: Array,
                default: function() {
                    return [0, 0]
                }
            },
            closeWinHandler: {
                type: Function,
            },
            // 搜索记录，可选，默认用apiName
            habitKey: {
                type: String,
                default: ''
            },
            // 通用接口xml文件名称，可选；使用通用接口必填
            dwname: {
                type: String,
                default: ''
            },
            beforePost: {
                type: Function,
            },
        },
        data() {
            return {
                refreshing: false,
                currentPageIndex: 1,
                currentPageSize: 20,
                currentRequestBody: {},
                ifBottomFilter: false, // 筛选标签状态
                bodyHeight: 'auto',
                userFilterName: '', // 用户筛选记录名称
                postApiName: ""
            }
        },
        created() {
            this.postApiName = this.dwname ? "CommonDynamicSelect" : this.apiName;
            let _apiName = this.dwname || this.apiName;
            this.userFilterName = this.habitKey || _apiName;
        },
        mounted() {
            this.initSearched();
        },
        methods: {
            handleCloseWin() {
                if (this.closeWinHandler){
                    this.closeWinHandler();
                } else {
                    $lj.closeWin();
                }
            },
            fixbody(obj){
                this.bodyHeight = obj.minHeight;
            },
            /**搜索栏：扫码 */
            handleSearchScan(status) {
                this.$emit('scan-click', status);
            },
            /**聚焦搜索条 */
            handleSearchFocus() {
                this.$refs.ljTabsFiltrate && this.$refs.ljTabsFiltrate.close();
                this.$refs.ljTabsQuick && this.$refs.ljTabsQuick.close();
            },
            /**失去聚焦搜索条 */
            handleSearchBlur() {
                setTimeout(() => {
                    this.$refs.baseWin.initStyle();
                }, 200);
            },
            /**取消搜索 */
            handleSearchbarCancel(item) {
                this.$refs.scrollToTop.totop();
                console.log('handleSearchbarCancel item :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(item));
                let searchPro = this.fnSetSearchProperty(item);
                $lj.setUserFilterParams(this.userFilterName, searchPro);
                // this.refresh(item);
                this.$refs.refresh_list.onRefresh(searchPro);
                this.showFilter && this.$refs.ljBottomFiltrate.initSearched(searchPro);
                this.$refs.ljTabsFiltrate && this.$refs.ljTabsFiltrate.close();
                this.$refs.ljTabsQuick && this.$refs.ljTabsQuick.close();
                // 清空关键字
                this.emitChangeKeyword('');
            },
            /**搜索栏-搜索 */
            handleSearchbar(item, ifscan) {
                this.$refs.scrollToTop.totop();
                console.log(' item :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(item));
                // this.refresh(item);
                let searchPro = this.fnSetSearchProperty(item);
                // 记录用户数据
                $lj.setUserFilterParams(this.userFilterName, searchPro);
                this.$refs.refresh_list.onRefresh(searchPro);

                if (ifscan) {
                    this._fnSetSearchedForSearchbar(searchPro);
                } else {
                    this.$refs.ljTabsFiltrate && this.$refs.ljTabsFiltrate.close();
                    this.$refs.ljTabsQuick && this.$refs.ljTabsQuick.close();
                }
                this.showFilter && this.$refs.ljBottomFiltrate.initSearched(searchPro);
                // this.keyword = '';
                this.$refs.searchbarPro.clearText();
            },
            fnSetSearchProperty(item) {
                /**
                 * 情况1：只输入搜索栏
                 * 情况2：只选择tab菜单
                 * 情况3：先选择tab，后输入，属性不冲突
                 *          属性共存
                 *              目前情况：输入时清空tab
                 * 情况4：先输入，后选择tab，属性冲突
                 *          清空输入框
                 * 情况5：先选择tab，后输入，属性冲突
                 *          清空tab选择
                 * 
                 * 先检查【输入】【tab】重复属性
                 * 后判断是否需要清空操作
                 * 
                 * 对于冲突属性，如果是tab
                 */
                // 搜索菜单属性数组
                let SPropArr = []; 
                if (this.searchActions && this.searchActions.length > 0) {
                    for (let i = 0; i < this.searchActions.length; i++) {
                        SPropArr.push(this.searchActions[i].property);
                    }
                }
                let sameProArr = []
                if (this.queryQuick && this.queryQuick.length > 0) {
                    for (let i = 0; i < this.queryQuick.length; i++) {
                        if (SPropArr.indexOf(this.queryQuick[i].property) > -1) {
                            // 记录相同属性
                            sameProArr.push(this.queryQuick[i].property);
                        }
                    }
                }
                console.log('冲突属性 sameProArr :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(sameProArr));
                // 搜索栏与tabs栏没有冲突属性
                if (!sameProArr.length) {
                    return item
                }
                // 检查输入的属性列表
                if (this.$refs.ljTabsFiltrate) {
                    let tabsCurrent = this.$refs.ljTabsFiltrate.currentQueryField;
                    for (const key in item) {
                        if (sameProArr.indexOf(key) > -1) {
                            if (item[key] != '') {
                                // 通过搜索栏，主动搜索, 出现与tabs栏属性冲突，清除tabs栏选择
                                this.$refs.ljTabsFiltrate.fnResetTabs(key);
                                let keywordObjTitle = $lj.getUserFilterTitle(this.userFilterName);
                                console.log('删除前 keywordObjTitle :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(keywordObjTitle));
                                if (keywordObjTitle.hasOwnProperty(key)) {
                                    // Reflect.deleteProperty(keywordObjTitle, key);
                                    keywordObjTitle[key] = '';
                                    $lj.setUserFilterTitle(this.userFilterName, keywordObjTitle);
                                    console.log('删除后 keywordObjTitle :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(keywordObjTitle));
                                }
                            } else {
                                if (this.currentRequestBody[key] && tabsCurrent[key] == this.currentRequestBody[key]) {
                                    // 与tabs栏已有属性共存，读取旧属性
                                    item[key] = this.currentRequestBody[key]
                                }
                            }
                        }
                    }
                }
                console.log('赋值后 item :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(item));
                return item
            },
            /**读取搜索记录 */
            initSearched() {
                console.warn(' this.userFilterName :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.userFilterName));
                let keywordObj = $lj.getUserFilterParams(this.userFilterName);
                let keywordObjTitle = $lj.getUserFilterTitle(this.userFilterName);
                console.log('initSearched keywordObj :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(keywordObj));
                console.log('initSearched keywordObjTitle :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(keywordObjTitle));
                this._fnSetSearchedForTabsFiltrate(keywordObj, keywordObjTitle)
                this._fnSetSearchedForSearchbar(keywordObj)
                // this.refresh(keywordObj);
                this.refresh(Object.assign({}, keywordObj, this.currentRequestBody));

                this.showFilter && this.$refs.ljBottomFiltrate.initSearched(keywordObj);
            },
            /**设置ljTabsFiltrate的搜索状态 */
            _fnSetSearchedForTabsFiltrate(keywordObj, keywordObjTitle) {
                if (JSON.stringify(keywordObj) == '{}') {
                    // 如果是第一次进来，或没有历史搜索记录，读取默认属性
                    for (let i = 0; i < this.queryFields.length; i++) {
                        if (this.queryFields[i].hasOwnProperty("initValue")) {
                            keywordObj[this.queryFields[i].property] = this.queryFields[i].initValue
                        }
                    }
                    for (let i = 0; i < this.queryQuick.length; i++) {
                        if (this.queryQuick[i].hasOwnProperty("initValue")) {
                            keywordObj[this.queryQuick[i].property] = this.queryQuick[i].initValue
                        }
                    }
                    console.log('initSearched 读取默认值 keywordObj :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(keywordObj));
                }
                this.$refs.ljTabsFiltrate && this.$refs.ljTabsFiltrate.initSearched(keywordObj, keywordObjTitle);
                this.$refs.ljTabsQuick && this.$refs.ljTabsQuick.initSearched(keywordObj, keywordObjTitle);
            },
            /**设置SearchbarPro的搜索状态 */
            _fnSetSearchedForSearchbar(keywordObj) {
                let keywordObj_arr = [];
                for (const key in keywordObj) {
                    keywordObj_arr.push(key);
                }

                let searchList = JSON.parse(JSON.stringify(this.searchActions));
                let keywordList = [];
                for (let i = 0; i < searchList.length; i++) {
                    if (keywordObj_arr.indexOf(searchList[i].property) > -1 && keywordObj[searchList[i].property]) {
                        searchList[i].value = keywordObj[searchList[i].property];
                        keywordList.push(searchList[i]);
                        // break;
                    }
                }

                console.log(' _fnSetSearchedForSearchbar :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(keywordList));
                this.$refs.searchbarPro && this.$refs.searchbarPro.initSearch(keywordList);
            },
            /**底部筛选栏-筛选中 -状态 */
            handleFilterBottomFiltering() {
                this.ifBottomFilter = this._fnCheckIfFilter();

                // let keywordObj = $lj.getUserFilterParams(this.apiName);
                console.log(' this.currentRequestBody :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.currentRequestBody));
                let keywordObj = this.currentRequestBody;
                console.log(' handleFilterBottomFiltering keywordObj :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(keywordObj));
                // this._fnSetSearchedForSearchbar(keywordObj);
                this.showFilter && this.$refs.ljBottomFiltrate.autoSetCurrentQuery(keywordObj);
            },
            /**检测是否需要标记：筛选中 */
            _fnCheckIfFilter() {
                console.log(' this.currentRequestBody :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.currentRequestBody));
                let ifFilter = false;
                for (let i = 0; i < this.queryFields.length; i++) {
                    let property = this.queryFields[i].property;
                    if (this.currentRequestBody[property] != this.queryFields[i].initValue) {
                        console.log(' this.queryFields[i] :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.queryFields[i]));
                        ifFilter = true;
                        break;
                    }
                }
                return ifFilter;
            },
            /**重置-底部筛选栏 */  
            // handleFilterReset(item) {
            //     this.ifBottomFilter = false;
            //     let keywordObj = this.$refs.searchbarPro.handleCancel(false);
            //     let maxObj = Object.assign({}, this.currentRequestBody, keywordObj, item, this.queryHardParms);
            //     $lj.setUserFilterParams(this.apiName, maxObj);
            //     // this.refresh(maxObj);
            //     this.$refs.refresh_list.onRefresh(maxObj);
            // },
            /**tabs栏-筛选 */
            handleFilterConfirm(item, titles) {
                this.$refs.scrollToTop.totop();
                console.log('handleFilterConfirm item :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(item));
                console.log('handleFilterConfirm titles :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(titles));
                $lj.setUserFilterParams(this.userFilterName, item);
                titles != undefined && $lj.setUserFilterTitle(this.userFilterName, titles);
                // this.refresh(item);
                this.$refs.refresh_list.onRefresh(item);
                console.log(' handleFilterConfirm this.currentRequestBody :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.currentRequestBody));
                this._fnSetSearchedForSearchbar(this.currentRequestBody);
            },
            /**打开底部筛选栏 */
            openFilterPopup() {
                console.log('this.showFilter && this.$refs.ljBottomFiltrate :>> ', this.showFilter && this.$refs.ljBottomFiltrate);
                this.showFilter && this.$refs.ljBottomFiltrate.open();
            },
            /**回调绑定值 */
            emitChangeKeyword(val) {
                this.$emit('update:searchText', val)
            },
            // openRightDrawer() {
            //     this.$refs.baseWin.openRightDrawer();
            // },
            // closeRightDrawer() {
            //     this.$refs.baseWin.closeRightDrawer();
            // },
            closeWin() {
                $lj.closeWin();
            },
            handleAddButton() {
                this.$emit('add-click');
            },
            handleFixButton() {
                this.$emit('fix-click');
            },
            handleTranButton() {
                this.$emit('tran-click');
            },
            // handleQuerySubmit(queryParams) {
            //     console.log('handleQuerySubmit queryParams :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(queryParams));
            //     this.closeRightDrawer();
            //     this.refresh(queryParams);
            // },
            refresh(queryParams) {
                this.currentPageIndex = 1;
                this.currentRequestBody = Object.assign({}, this.currentRequestBody, queryParams, this.queryHardParms);
                this.currentRequestBody.pagesize = this.currentPageSize;
                this.load((ret) => {
                    this.dataResetCallback(ret);
                });
            },
            load(callback) {
                if (this.dwname) {
                    let _params = JSON.parse(JSON.stringify(this.currentRequestBody));
                    _params = $lj.omit(_params, ['dsname', 'dwname', 'itemname', 'queryParams', 'pageindex', 'pagesize', 'token']);
                    // 删除对象属性（es5)
                    delete _params.pagesize;
                    delete _params.pageindex;

                    console.log("_params ::>>> ", JSON.stringify(_params));
                    if (this.beforePost) {
                        _params = this.beforePost(_params);
                    }
                    // 只保留指定字段属性（es5)
                    this.currentRequestBody.queryParams = _params;
                    this.currentRequestBody = $lj.pick(this.currentRequestBody, ['dsname', 'dwname', 'itemname', 'queryParams', 'pageindex', 'pagesize', 'token']);

                    this.currentRequestBody.dsname = this.dwname;
                    this.currentRequestBody.dwname = "JLH_APP";
                    this.currentRequestBody.itemname = this.userFilterName;
                }
                console.log("this.currentRequestBody ::>>> ", JSON.stringify(this.currentRequestBody));
                
                // this.currentPageIndex++;
                this.currentRequestBody.pageindex = this.currentPageIndex;
                this.currentRequestBody.token = $lj.getStorage("token");

                let self = this;
                $lj.postLJRequest(this.postApiName, this.currentRequestBody, function (ret) {
                    if (ret) {
                        /**处理状态 */
                        let dataArr = [];
                        for (let prop in ret) {
                            if (ret[prop] instanceof Array) {
                                dataArr = ret[prop];
                                break;
                            }
                        }
                        self.$refs.refresh_list.fnReady();
                        self.$refs.refresh_list.fnRefreshed();
                        if (self.currentPageIndex == 1 && !dataArr.length) {
                            self.$refs.refresh_list.fnLoadedAndEmpty();
                            return false;
                        } else if (dataArr.length < self.currentPageSize) {
                            self.$refs.refresh_list.fnLoaded(1);
                        } else {
                            self.currentPageIndex++;
                            self.$refs.refresh_list.fnLoaded(0);
                        }
                        /**回调数据 */
                        if (callback) {
                            callback(ret);
                        } else {
                            self.dataLoadedCallback(ret);
                        }

                    }
                }, function (ret) {
                    self.$refs.refresh_list.fnReady();
                    self.$refs.refresh_list.fnRefreshed();
                    self.$refs.refresh_list.fnLoadError();
                }, true)
            },
            // handleQueryFieldClick(event) {
            //     this.$emit("query-field-click", event);
            // },
            // handleQueryFieldChange(event){
            //     this.$emit("query-field-change", event);
            // },
            // setQueryParam(property, value) {
            //     this.$refs.queryList.setQueryParam(property, value);
            // }
            setQueryParam(property, value) {
                this.$set(this.currentRequestBody, property, value);
                console.log('handleReset!!!! setQueryParamthis.currentQueryField :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.currentQueryField));
            },
        },
        computed: {
            showFilter() {
                return this.queryFields && this.queryFields.length > 0;
            },
            showQuickFilter() {
                return this.queryQuick.length > 0;
            },
            hasLoadmoreFunction() {
                return this.dataLoadedCallback;
            },
            keyword: {
                get() {
                    return this.searchText
                },
                set(val) {
                    this.$emit('update:searchText', val)
                }
            },
        },
        watch: {
            bindingParms: {
                handler(newVal, oldVal) {
                    if (newVal) {
                        for (let prop in newVal) {
                            this.setQueryParam(prop, newVal[prop]);
                        }
                    }
                },
                deep: true,
                immediate: true
            }
        },
    }
</script>

 <style lang="less">
    .body {
        padding-top: 10px;
        & > .van-overlay{
            z-index: 99!important;
        }
        & > .van-popover {
            width: -moz-calc(~"100% - 20px");
            width: -webkit-calc(~"100% - 20px");
            width: calc(~"100% - 20px");
            left: 10px!important;
            right: 10px!important;
            .van-popover__action {
                width: 100%;
            }
        }
        .van-popover__arrow {
            display: none;
        }
    }
 </style>