<!-- 功能：封装带请求的table列表的公共方法; 作者：LZJ; 时间：2022年10月17日 14:28:17-->
<template>
    <div id="QueryTableMixinTest">
        <code>
            // 此mixin里面的代码不需要更改
            <CodeBuild :script-obj="scriptMixinObj">
                <pre slot="methods">
            // 获取列表数据
            getTableList() {
                <font class="string-tag">this</font>.$nextTick(<font class="keyword-tag">async</font>() => {
                    if (<font class="string-tag">this</font>.$refs && <font class="string-tag">this</font>.$refs[<font class="string-tag">'FHTable'</font>]) {
                        <font class="string-tag">this</font>.$refs[<font class="string-tag">'FHTable'</font>].getTableList();
                    }
                });
            },
            // 查询的表单条件
            formItemChange(<font class="string-tag">formItemObj</font>) {
                // 根据prop的类型来判断是哪个搜索框的数据需要处理
                <font class="string-tag">this</font>.formItem.form[<font class="string-tag">formItemObj.prop</font>] = formItemObj.val;
            },
            // 搜索按钮点击
            searchClick() {
                // 请求接口
                <font class="string-tag">this</font>.queryParams = <font class="value-tag">Object.assign</font>(<font class="string-tag">this</font>.queryParams, <font class="string-tag">this</font>.formItem.form);
                <font class="string-tag">this</font>.getTableList();
            },
            // 重置
            resetClick() {
                <font class="string-tag">this</font>.queryParams = <font class="string-tag">this</font>.deepClone(<font class="string-tag">this</font>.tempQueryParams);
                <font class="string-tag">this</font>.formItem.form = {};
                if (<font class="string-tag">this</font>.$refs && <font class="string-tag">this</font>.$refs[<font class="string-tag">'FHTable'</font>]) {
                    <font class="string-tag">this</font>.$refs[<font class="string-tag">'FHTable'</font>].offset = <font class="value-tag">0</font>;
                    <font class="string-tag">this</font>.$refs[<font class="string-tag">'FHTable'</font>].currentPage = <font class="value-tag">1</font>;
                }
                <font class="string-tag">this</font>.searchClick();
            }</pre></codebuild>
        </code>
    </div>
</template>

<script>
import CodeBuild from './CodeBuild.vue';
export default {
    // 组件名称
    name: 'QueryTableMixinTest',
    // 局部注册的组件
    components: { CodeBuild },
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            scriptMixinObj: {
                script: 'false',
                dataArr: [
                    { key: 'formItem', value: '{ }' },
                    { key: 'queryParams', value: '{ }', note: '查询的数据源' },
                    { key: 'tempQueryParams', value: '{ }', note: '保存初始查询的数据源' },
                    { key: 'tableProps', value: '{ }' },
                    { key: 'list', value: '{ }' }
                ],
                exportObj: 'const queryTableMixin ='
            }
        };
    },
    // 侦听器
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {}
};
</script>

<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<style scoped lang='less'>

</style>
