<template>
    <div class="page">
      <el-row :gutter="20">
        <el-col :span="6" :xs="12" class="mytree">
          <el-card>

            <el-scrollbar style="height: 100%">
              <el-tree
                  size="mini"
                  ref="siteTree"
                  :data="areaData"
                  id="el-tree"
                  node-key="id"
                  indent="4"
                  :props="treeProps"
                  :load="loadNode"
                  highlight-current
                  default-expand-all
                  :expand-on-click-node="false"
                  :render-content="renderContent"
                  @node-click="handleNodeClick"
              >
              </el-tree>
            </el-scrollbar>
          </el-card>
        </el-col>

        <el-col :span="18" :xs="12">
          <el-card>
            <el-row>
              <LayoutTable notAdd
                           notDel :data="tableData" :config="tableConfig">
              </LayoutTable>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

        <drawer-show ref="drawerform" @ok="getData" />
    </div>
</template>

<script>
    /** 表单弹出框模式需引入 */
    import drawerShow from "./drawershow";
    import table from "@/assets/mixins/table";
    import tree from "@/assets/mixins/tree";
    export default {
        name: "StaffList",
        components: {
          drawerShow
},
        mixins: [table,tree],
      created() {
        this.$get("/dept/treeselect", {}).then(({ data }) => {
          this.areaData = data.result;
        });
      },
        methods: {
            /** 重写新增方法 */
            toAdd(row) {
                this.$refs.drawerform.add(row);
            },
            /** 重写编辑方法 */
            toEdit(row) {
                this.$refs.drawerform.edit(row);
            },
            /** 重写查看方法 */
            toView(row) {
                this.$refs.drawerform.view(row);
            },

          handleNodeClick(node) {
            this.currentNode = node;
            this.query = { deptId: node.id };
            this.getData();
          },

        },
        data() {
            return {
                config: {
                    search: [
                        {
                            name: "name",
                            type: "text",
                            label: "员工姓名",
                            fuzzy: true
                        },
                        {
                            name: "politicalstatus",
                            type: "select",
                            label: "政治面貌 ",
                            fuzzy: true
                        },
                        {
                            name: "staffType",
                            type: "select",
                            label: "员工类型",
                            fuzzy: true
                        },
                        {
                            name: "status",
                            type: "select",
                            label: "员工状态",
                            fuzzy: true
                        },
                    ],
                    columns: [
                        {type: "selection", width: 60},
                        {type: "index",label: "序号",width: 50},

                        {label: "员工姓名", prop: "name"},

                        {label: "性别", prop: "gender",formatter: this.formatter},

                        {label: "政治面貌 ", prop: "politicalstatus",formatter: this.formatter},

                        {label: "员工类型", prop: "staffType",formatter: this.formatter},

                        {label: "员工状态", prop: "status",formatter: this.formatter},

                        {label: "入职时间", prop: "entryDate", formatter: this.formatterDate},

                        {label: "转正时间", prop: "regularDate", formatter: this.formatterDate},

                        {label: "离职时间", prop: "leaveDate", formatter: this.formatterDate},

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


<style>
.el-card__body {
  padding: 10px;
}
.el-calendar-table .el-calendar-day {
  height: 70px;
}
.is-selected {
  color: #fa3b19;
}
</style>

<style lang="scss" scoped>
.cardTitle {
  font-size: 16px;
  color: rgb(20, 134, 248);
  list-style-type: none;
  border-bottom: 3px solid rgb(20, 134, 248);
  padding-bottom: 2px;
}
.mytree ::v-deep {
  .el-tree--highlight-current
  ::v-deep
  .el-tree-node.is-checked
  > .el-tree-node__content {
    background-color: rgb(255, 255, 255);
    color: rgb(64, 158, 255);
  }
  .el-tree--highlight-current
  ::v-deep
  .el-tree-node.is-current
  > .el-tree-node__content {
    background-color: rgb(255, 255, 255);
    color: rgb(64, 158, 255);
  }
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }
  .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 24px;
  }
}
</style>
