<template>
  <div className="page">
    <el-card style="height:80vh;overflow:scroll-y;padding: 10px;">
      <LayoutTable
        notPagination
        :data="tableData"
        notAdd
        notDel
        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>
<style lang="less" scoped>
/deep/.el-card__body {
  padding: 0 !important;
}
</style>
