<template>
    <ap-container>
        <ap-header margin="1111">
            <el-form ref="searchForm" :model="searchForm" :rules="searchFormRules"
                     :inline="true" class="layout-header-form" @submit.native.prevent="searchEvent">
                <el-form-item label="搜索:" class="layout-header-form-item" prop="likeStr">
                    <el-input v-model="searchForm.likeStr" placeholder="表名/表描述"></el-input>
                </el-form-item>
                <el-form-item label="模块:" class="layout-header-form-item" prop="moduleName">
                    <el-select v-model="searchForm.moduleName" style="width: 110px;">
                        <el-option key="" label="全部" value=""></el-option>
                        <el-option key="MM" label="MM" value="MM"></el-option>
                        <el-option key="SD" label="SD" value="SD"></el-option>
                        <el-option key="PP" label="PP" value="PP"></el-option>
                        <el-option key="FICO" label="FICO" value="FICO"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否配置:" class="layout-header-form-item" prop="configFlag">
                    <el-select v-model="searchForm.configFlag" style="width: 110px;">
                        <el-option key="" label="全部" value=""></el-option>
                        <el-option key="已配置" label="已配置" value="已配置"></el-option>
                        <el-option key="未配置" label="未配置" value="未配置"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="searchEvent">查询</el-button>
        </ap-header>
        <ap-main margin="0111">
            <ap-table ref="tAbapSqlRef" :options.sync="tableOpt"></ap-table>
        </ap-main>
    </ap-container>
</template>

<script>
export default {
    name: 'AbapCustomTable',
    data() {
        let columns = [
            {
                prop: 'moduleName',
                label: '模块',
                type: 'input',
                align:"center",
                width: '100',
                sortable: 'local',
            }, {
                prop: 'tableName',
                label: 'SAP-表名',
                type: 'input',
                minWidth: '100',
                sortable: 'local',
            }, {
                prop: 'tableText',
                label: 'SAP-表描述',
                type: 'input',
                minWidth: '150',
            }, {
                prop: 'fdDesc',
                label: '自定义-表描述',
                type: 'input',
                sortable: 'local',
                minWidth: '250',
            }, {
                prop: 'fdDesc',
                label: '是否配置',
                type: 'input',
                align:"center",
                width: '100',
                sortable: 'local',
                html: (val) => {
                    if (val == null || val == '') {
                        return '<div class="ap-tag-danger">未配置</div>'
                    }
                    return '<div class="ap-tag-success">已配置</div>';
                }
            },
        ];
        let tableOpt = {
            title: "SAP自建表列表",
            columns: columns,
            dataUrl: "/apd/abap/AbapTable/getSapCustomTableGridData",
            toolbarBtn: ["refresh"],
            initData: true, // 默认false
            pagination: {pageSizes: [1000], pageSize: 1000},
            params: () => {
                return {
                    likeStr: this.searchForm.likeStr,
                    moduleName: this.searchForm.moduleName,
                    configFlag: this.searchForm.configFlag,
                }
            }
        };
        return {
            tableOpt: tableOpt,
            searchForm: {
                likeStr: "",
                moduleName: "",
                configFlag: ""
            },
            searchFormRules: {
                likeStr: [{min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}]
            }
        }
    },
    methods: {
        // 查询
        searchEvent() {
            // 表单rules认证
            this.$refs.searchForm.validate((valid) => {
                if (!valid) {
                    this.$message.error('搜索条件格式不正确！');
                    return false;
                }
                this.$refs.tAbapSqlRef.refresh();
            });
        }
    }
}
</script>

<style scoped>
</style>
