<template>
    <div>
        <avue-crud :option="tableOption"
                   :data="tableData"
                   :table-loading="tableLoading"
                   :page="page"
                   ref="crud"
                   width="290"
                   @row-save="handleSave"
                   @row-update="handleUpdate"
                   @row-del="handleDel"
                   @selection-change="handleSelectionChange"
                   @refresh-change="handlerefreshChange"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange">
            <template slot="menuLeft">
                <tableTopBtns @RefreshData="handleList" api="importClass" :selectedData="tableRow" :tableOption="tableOption" :tableData="tableData" :parentRefs="$refs.crud" :excelName="'表配置Excel'" :pngName="'表配置PNG'" :dateFormat="['dateCreated']"/>
            </template>
        </avue-crud>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import tableTopBtns from '../common/tableTopBtns';
export default {
    name: "tableConfiguration",
    components: {
        tableTopBtns
    },
    data () {
        return {
            tableOption: {}, //表格设置属性
            tableData: [], //表格的数据
            tableRow: [],
            tableSearch: {},
            tablePage: 1,
            tableLoading: false,
            tabelObj: {},
            page: {
                total: 0, //总页数
                currentPage: 1, //当前页数
                pageSize: 10 //每页显示多少条
            },
            grade: {
                box: false,
                check: []
            }
        };
    },
    created () {
        this.tableOption={
            border: true,
            index: true,
            indexLabel: '序号',
            selection: true,
            labelWidth:'110',
            dicData:{
                factory:[]
            },
            column: [{
                label: "表名",
                prop: "className",
                rules: [{
                    required: true,
                    message: "请输入表名",
                    trigger: "blur"
                }]
            },{
                label: "模块名",
                prop: "classNameChn",
                rules: [{
                    required: true,
                    message: "请输入模块名",
                    trigger: "blur"
                }]
            }]
        };
        this.handleList();
    },
    watch: { },
    mounted () { },
    computed: {
        ...mapGetters(["userInfo"])
    },
    props: [],
    methods: {
        handleList () {//获取数据
            this.tableLoading = true;
            this.getData('importClass',{pageNo:this.page.currentPage,pageSize:this.page.pageSize}).then(res => {
                this.tableData = res.data.data.data;
                this.page.total = res.data.data.total;
                this.tableLoading = false;
            }).catch(err => {
                this.tableLoading = false;
                this.$message.error(err.message ? err.message : '数据请求失败，请刷新重试！');
            });
        },
        handleSelectionChange (val) {//当前选中的数据
            this.tableRow = val;
        },
        toggleSelection (row) {//选中第几行
            this.$refs.crud.toggleSelection(row);
        },
        /**
         * @title 数据添加
         * @param row 为当前的数据
         * @param done 为表单关闭函数
         *
         **/
        handleSave (row, done) {
            if(row.id){
                this.$delete(row,'id')
            }
            row.orgId=this.userInfo.orgId;
            this.saveData('importClass',row).then(()=>{
                this.handleList();
                this.$message({
                    showClose: true,
                    message: "添加成功",
                    type: "success"
                });
                done();
            });
        },
        handlerefreshChange () {//刷新数据
            this.handleList(this.tableSearch);
            this.$notify({
                message: `刷新数据成功`,
                type: 'success',
            });
        },
        /**
         * @title 数据删除
         * @param row 为当前的数据
         * @param index 为当前更新数据的行数
         *
         **/
        handleDel (row) {
            this.$confirm(`是否确认删除表名为${row.className}的配置数据`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.delData('importClass',row.id).then(()=>{
                        this.handleList();
                        this.$message({
                            showClose: true,
                            message: "删除成功",
                            type: "success"
                        });
                    });
                })
                .catch(err => { 
                    console.log(err)
                    this.$message.error(err)
                });
        },
        /**
         * @title 数据更新
         * @param row 为当前的数据
         * @param index 为当前更新数据的行数
         * @param done 为表单关闭函数
         *
         **/
        handleUpdate (row, index, done) {
            this.saveData('importClass',row).then(()=>{
                this.handleList();
                this.$message({
                    showClose: true,
                    message: "修改成功",
                    type: "success"
                });
                done();
            });
        },
        // rowDblclick(row, event){//单行双击事件
        //     this.$router.push({path : '/system/message/fieldConfiguration', query : {row : row}});
        // },
        handleSizeChange(val) {//pageSize 改变
            this.page.pageSize=val;
            this.handleList();
        },
        handleCurrentChange(val) {//currentPage 改变
            this.page.currentPage=val
            this.handleList();
        }
    }
}
</script>

<style scoped>

</style>