<template>
    <div className="page">
        <el-card style="height:80vh;overflow:scroll-y">
            <LayoutTable notPagination :data="tableData" ref="layoutTable" :config="tableConfig" notSearch></LayoutTable>
        </el-card>
        <drawer-show ref="drawerform" @ok="getData" />
    </div>
</template>

<script>
    /** 表单弹出框模式需引入 */
    import {handleTree} from "@/assets/utils/table";
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    import drawerShow from "./drawershow";
    import table from "@/assets/mixins/table";
    export default {
        name: "DeptList",
        components: {
            drawerShow,
            Treeselect
        },
        mixins: [table],
        created() {
            this.query={"page":1,"size":-1}
        },
        methods: {
            /** 重写新增方法 */
            toAdd(row) {
                this.$refs.drawerform.add(row,this.menuOptions);
            },
            /** 重写编辑方法 */
            toEdit(row) {
                this.$refs.drawerform.edit(row,this.menuOptions);
            },
            /** 重写查看方法 */
            toView(row) {
                this.$refs.drawerform.view(row, this.menuOptions);
            },
            afterRender(data) {
                data.data = handleTree(data.data, "id", "parentId");
                console.log("tree data:",data.data)
                this.menuOptions = data.data;
                this.$refs.layoutTable.showType = "treetable"
            },
        },
        data() {
            return {
                config: {
                    showType:'treetable',
                    isshowTabPane:true,
                    /** 树表是否默认展开 */
                    expand: false,
                    columns: [
                        {type: "selection", width: 60},
                        {label: "部门名称", prop: "deptName"},
                        {label: "成员数量", prop: "personNum"},
                        {label: "负责人", prop: "workName"},

                        // {label: "部门状态", prop: "deptStatus",formatter: this.formatter},

                        // {label: "顺序", prop: "orderNum",formatter: this.formatter},

                        // {label: "创建用户", prop: "createUserId", formatter: this.formatter},
                        {
                            label: "操作",
                            width: 240,
                            formatter: row => {
                                return (
                                    <table-buttons  noAdd noView row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
                            )
                            }
                        }
                    ]
                }
            };
        }
    };
</script>