<!-- 功能：功能描述; 作者：LZJ; 时间：2022年10月17日 16:05:02-->
<template>
    <div id="FHTableDemoCode" class="flex">
        <div>
            <code>
                <pre><font class="keyword-tag line-height36">&lt;template&gt;</font></pre>
                <pre v-if="$route.name !== 'commontabletest'">  <font class="keyword-tag">&lt;FilterQuery :model=<font class="string-tag">"formItem"</font> @formItemChange=<font class="string-tag">"formItemChange"</font> @searchClick=<font class="string-tag">"searchClick"</font> @resetClick=<font class="string-tag">"resetClick"</font> /&gt;</font></pre>
                <pre v-if="$route.name !== 'commontabletest'">  <font class="keyword-tag">&lt;div class=<font class="string-tag">"table-btn-group"</font> &gt;</font></pre>
                <pre v-if="$route.name !== 'commontabletest'">      <font class="keyword-tag">&lt;el-button type=<font class="string-tag">"primary"</font> icon=<font class="string-tag">"el-icon-plus"</font> size=<font class="string-tag">"small"</font> @click=<font class="string-tag">"addClick"</font>&gt;新增&lt;/el-button&gt;</font></pre>
                <pre v-if="$route.name !== 'commontabletest'">      <font class="keyword-tag">&lt;el-button type=<font class="string-tag">"danger"</font> size=<font class="string-tag">"small"</font> @click=<font class="string-tag">"delClick"</font>&gt;批量删除&lt;/el-button&gt;</font></pre>
                <pre v-if="$route.name !== 'commontabletest'">  <font class="keyword-tag">&lt;/div&gt;</font></pre>
                <pre v-if="$route.name !== 'commontabletest'">  <font class="keyword-tag">&lt;el-dialog width=<font class="string-tag">"540px"</font> title=<font class="string-tag">"新增"</font> :visible.sync=<font class="string-tag">"dialogVisible"</font> :close-on-click-modal=<font class="string-tag">"false"</font> @close=<font class="string-tag">"close()"</font> &gt;</font></pre>
                <pre v-if="$route.name !== 'commontabletest'">      <font class="keyword-tag">&lt;CommonForm ref=<font class="string-tag">"commonForm"</font> :model=<font class="string-tag">"formModel"</font> @changeFormItem=<font class="string-tag">"changeFormItem"</font> @submitForm=<font class="string-tag">"submitForm"</font> @cancel=<font class="string-tag">"cancel"</font> /&gt;</font></pre>
                <pre v-if="$route.name !== 'commontabletest'">  <font class="keyword-tag">&lt;/el-dialog&gt;</font></pre>
                <pre>   <font class="keyword-tag">&lt;FHTable
        ref=<font class="string-tag">"FHTable"</font>
        :has-checkbox=<font class="string-tag">"true"</font>
        :query-table-data=<font class="string-tag">"queryTableData"</font>
        :query-params=<font class="string-tag">"queryParams"</font>
        :table-props=<font class="string-tag">"tableProps"</font>
        list-map-name=<font class="string-tag">"smSaasPlatformList"</font>
        @handleTableList=<font class="string-tag">"handleTableList"</font>
        @handleTableClick=<font class="string-tag">"handleTableClick"</font>
        @handleSelectionChange=<font class="string-tag">"handleSelectionChange"</font>
    /&gt;</font></pre>
                <pre><font class="keyword-tag line-height36">&lt;/template&gt;</font></pre>
                <br>
                <CodeBuild :script-obj="scriptFHTableObj" @jumpImportClick="jumpImportClick">
                    <pre slot="watch">
            list: {
                handler(<font class="string-tag">val</font>) {
                    <font class="string-tag">this</font>.tableProps[<font class="string-tag">'data'</font>] = <font class="string-tag">this</font>.deepClone(<font class="string-tag">val</font>);
                }
            }</pre>
                    <pre slot="created">        <font class="string-tag">this</font>.getData();</pre>
                    <pre slot="methods">
            getData() {<font v-if="$route.name !== 'commontabletest'"><br>            <font class="string-tag">this</font>.formItem = <font class="string-tag">this</font>.deepClone(getFHFormQueryObj());</font>
                <font class="string-tag">this</font>.tableProps = <font class="string-tag">this</font>.deepClone(getFHTableProp());
                <font class="string-tag">this</font>.queryParams = {<font class="string-tag">'saasId'</font>: <font class="string-tag">'ff5a67337b6611e89feafa163eb3e537'</font>, <font class="string-tag">'userId'</font>: <font class="string-tag">'27775e0e494447bf94a5292252262870'</font>};
                <font class="string-tag">this</font>.tempQueryParams = <font class="string-tag">this</font>.deepClone(<font class="string-tag">this</font>.queryParams);
                <font class="string-tag">this</font>.getTableList();
                <font v-if="$route.name !== 'commontabletest'"><font class="string-tag">this</font>.formModel = <font class="string-tag">this</font>.deepClone(getFormDataObj());</font>
            },
            // 处理table表里面的点击，例如查看详情，或者删除等按钮的事件
            queryTableData(<font class="string-tag">queryParams</font>) {
                <font class="keyword-tag">return</font> api_testPage.queryPlatformList({ params: <font class="string-tag">queryParams</font> });
            },
            // 接口请求回来的数据
            handleTableList(<font class="string-tag">list</font>) {
                list.forEach(item => {
                    const operates = [{ type: <font class="string-tag">'terminalManage'</font>, text: <font class="string-tag">'终端管理'</font> }];
                    if (!item.id.includes(<font class="string-tag">'_'</font>)) {
                        const arr = [
                            { type: <font class="string-tag">'edit'</font>, text: <font class="string-tag">'编辑'</font> },
                            { type: <font class="string-tag">'relevance'</font>, text: <font class="string-tag">'关联机构'</font> },
                            { type: <font class="string-tag">'delete'</font>, text: <font class="string-tag">'删除'</font> }
                        ];
                        item[<font class="string-tag">'operates'</font>] = operates.concat(arr);
                    }
                });
                <font class="string-tag">this</font>.list = <font class="string-tag">this</font>.deepClone(list);
            },
            handleTableClick(<font class="string-tag">item</font>) {
                const row = item.row || {};
                if (item.type === <font class="string-tag">'delete'</font>) {
                    // 删除
                    const tempList = <font class="string-tag">this</font>.list.filter(l => l.id !== row.id);
                    <font class="string-tag">this</font>.list = <font class="string-tag">this</font>.deepClone(tempList);
                } else if (item.type === <font class="string-tag">'terminalManage'</font>) {
                    // 终端管理
                } else if (item.type === <font class="string-tag">'edit'</font>) {
                    // 编辑
                    <font v-if="$route.name !== 'commontabletest'"><font class="string-tag">this</font>.formModel[<font class="string-tag">'form'</font>] = row;
                    <font class="string-tag">this</font>.dialogVisible = <font class="value-tag">true</font>;</font>
                } else if (item.type === <font class="string-tag">'relevance'</font>) {
                    // 关联机构
                }
            },
            handleSelectionChange(val) {
                console.log(<font class="string-tag">'handleSelectionChange'</font>, val);
                <font class="string-tag">this</font>.idArr = val.<font class="keyword-tag">map</font>(({ id }) => (id));
            }<font v-if="$route.name !== 'commontabletest'">,</font><pre v-if="$route.name !== 'commontabletest'">
            // 表单（新增，编辑）
            changeFormItem(<font class="string-tag">formObj</font>) {
                <font class="string-tag">this</font>.formModel.form[<font class="string-tag">formObj.prop</font>] = formObj.val;
            },
            // 新增
            addClick() {
                <font class="string-tag">this</font>.resetForm();
                <font class="string-tag">this</font>.dialogVisible = <font class="value-tag">true</font>;
            },
            // 删除
            delClick() {
                <font class="string-tag">this</font>.list = <font class="string-tag">this</font>.list.<font class="keyword-tag">filter</font>(l => <font class="string-tag">this</font>.idArr.<font class="keyword-tag">every</font>(id => l.id !== id));
            },
            // 关闭弹框
            close() {
                <font class="string-tag">this</font>.dialogVisible = <font class="value-tag">false</font>;
            },
            // 重置数据
            resetForm() {
                <font class="string-tag">this</font>.formModel = <font class="string-tag">this</font>.deepClone(getFormDataObj());
                <font class="string-tag">this</font>.$nextTick(() => {
                    // 重置表单数据
                    if (<font class="string-tag">this</font>.$refs && this.$refs[<font class="string-tag">'commonForm'</font>]) {
                        <font class="string-tag">this</font>.$refs[<font class="string-tag">'commonForm'</font>].resetFormValidate();
                    }
                });
            },
            // 取消
            cancel() {
                <font class="string-tag">this</font>.resetForm();
                <font class="string-tag">this</font>.close();
            },
            // 提交
            submitForm() {
                <font class="string-tag">this</font>.formModel.form[<font class="string-tag">'id'</font>] = `${<font class="string-tag">this</font>.list.length + 1}`;
                <font class="string-tag">this</font>.list = [<font class="string-tag">this</font>.formModel.form].concat(<font class="string-tag">this</font>.list);
                const tablePropArr = this.tableProps[<font class="string-tag">'tableProp'</font>];
                const tempArr = tablePropArr.<font class="keyword-tag">filter</font>(t => t.type === <font class="string-tag">'htmlType'</font>);
                <font class="string-tag">this</font>.list.<font class="keyword-tag">forEach</font>(item => {
                    tempArr.<font class="keyword-tag">forEach</font>(t => {
                        const xssProp = <font class="string-tag">'xss'</font> + t.prop;
                        item[xssProp] = item[t.prop] ? brightenKeyword(t.color || <font class="c-1677ff">'#1677ff'</font>, item[t.prop]) : <font class="string-tag">'--'</font>;
                    });
                    Object.keys(item).<font class="keyword-tag">forEach</font>(k => { item[k] = item[k] || <font class="string-tag">'--'</font>; });
                });
                <font class="string-tag">this</font>.handleTableList(<font class="string-tag">this</font>.list);
                <font class="string-tag">this</font>.close();
            }</pre>
        </pre>
                </CodeBuild>
            </code>
        </div>
        <QueryTableMixinTest v-if="showMixin" class="mixin-box" />
    </div>
</template>

<script>
import CodeBuild from './CodeBuild.vue';
import QueryTableMixinTest from './QueryTableMixinTest.vue';
export default {
    // 组件名称
    name: 'FHTableDemoCode',
    // 局部注册的组件
    components: { CodeBuild, QueryTableMixinTest },

    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            showMixin: false,
            scriptFHTableObj: {}
        };
    },
    // 侦听器
    watch: {
        $route: {
            deep: true,
            immediate: true,
            async handler(newVal, oldVal) {
                if (newVal.name !== 'commontabletest') {
                    this.scriptFHTableObj['importArr'] = [
                        { component: '{ FHTable, FilterQuery, CommonForm }', componentUrl: '@/components' },
                        { component: '{ getFHTableProp, getFHFormQueryObj, getFormDataObj }', componentUrl: '@/views/testPage/dataSource/testPageData', note: '数据源文件，根据自己的页面去写' },
                        { component: 'api_testPage', componentUrl: '@/api/api_testPage', note: '接口请求' },
                        { component: '{ brightenKeyword }', componentUrl: '@/tool/func', note: '改变颜色的方法' },
                        { component: '{ queryTableMixin }', componentUrl: '@/mixins', note: '封装了table列表的公共属性以及通用方法', jump: true }
                    ];
                    this.scriptFHTableObj['components'] = 'FHTable, FilterQuery, CommonForm';
                    this.scriptFHTableObj['dataArr'] = [
                        { key: 'dialogVisible', value: false },
                        { key: 'idArr', value: [] },
                        { key: 'formModel', value: {}}
                    ];
                } else {
                    this.scriptFHTableObj = {
                        created: true,
                        watch: true,
                        importArr: [
                            { component: '{ FHTable }', componentUrl: '@/components' },
                            { component: '{ getFHTableProp }', componentUrl: '@/views/testPage/dataSource/testPageData', note: '数据源文件，根据自己的页面去写' },
                            { component: 'api_testPage', componentUrl: '@/api/api_testPage', note: '接口请求' },
                            { component: '{ queryTableMixin }', componentUrl: '@/mixins', note: '封装了table列表的公共属性以及通用方法', jump: true }
                        ],
                        dataArr: [{ key: 'idArr', value: [] }],
                        components: 'FHTable',
                        mixins: 'queryTableMixin'
                    };
                }
            }
        }

    },
    created() {
    },
    mounted() {
    },
    methods: {
        jumpImportClick() {
            this.showMixin = !this.showMixin;
        }
    }
};
</script>

<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<style scoped lang='less'>
#FHTableDemoCode {
	.mixin-box {
		background-color: #ecf8ff;
		padding: 10px;
		border: 2px solid #50bfff;
	}
}
</style>
