From f83e66ee2ccd5e1fd0b9b3a737647fe4f1295888 Mon Sep 17 00:00:00 2001
From: bibi <541660090@qq.com>
Date: Thu, 30 Dec 2021 10:30:24 +0800
Subject: [PATCH] 1

---
 src/styles/antd.less         |   2 +-
 src/styles/index.less        |  36 +++++
 src/views/Employee/index.vue | 285 ++++++++++++++++++++++++++++++++---
 3 files changed, 305 insertions(+), 18 deletions(-)

diff --git a/src/styles/antd.less b/src/styles/antd.less
index b6cc3b9..7442381 100644
--- a/src/styles/antd.less
+++ b/src/styles/antd.less
@@ -1,6 +1,6 @@
 .ant-layout {
     width: 100% !important;
-    height: 100% !important;
+    // height: 100% !important;
 }
 .ant-layout-sider-children {
     background-color: #2a334f;
diff --git a/src/styles/index.less b/src/styles/index.less
index f543c71..41e39d7 100644
--- a/src/styles/index.less
+++ b/src/styles/index.less
@@ -1 +1,37 @@
 @import "./antd.less";
+// 公共样式
+#app{
+    background: #E5E5E5;
+}
+.content{
+    padding: 13px;
+}
+.main{
+    padding: 13px;
+    background: #fff;
+}
+.cardTitle{
+    border-left: 8px solid #205FBD;
+    padding-left:10px;
+    margin-left: 10px;
+    margin-bottom: 10px;
+}
+#commonTable{
+    margin: 24px;
+}
+.search-box {
+    margin: 30px;
+}
+.footer {
+    height: 84px;
+    width: 100%;
+    background: #fff;
+    position: fixed;
+    bottom: 0;
+    z-index: 999;
+    line-height: 84px;
+    box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.35);
+    border-radius: 4px 4px 0px 0px;
+    border: 1px solid #e8e8e8;
+    left: 200px;
+  }
\ No newline at end of file
diff --git a/src/views/Employee/index.vue b/src/views/Employee/index.vue
index 18f653e..344a0e2 100644
--- a/src/views/Employee/index.vue
+++ b/src/views/Employee/index.vue
@@ -1,26 +1,277 @@
-<!--
- * @Author: your name
- * @Date: 2021-11-22 15:56:04
- * @LastEditTime: 2021-11-22 17:14:00
- * @LastEditors: Please set LastEditors
- * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- * @FilePath: /ansu-business/src/views/Employee/index.vue
--->
 <template>
-    <div>
-        <div class="left">
+  <div class="main">
+    <a-row>
+      <a-col :span="4" class="left-tree">
+        <a-input-search
+          style="margin-bottom: 8px"
+          placeholder="请输入搜索信息"
+          @change="onChange"
+        />
+        <a-tree
+          v-model="checkedKeys"
+          checkable
+          :expanded-keys="expandedKeys"
+          :auto-expand-parent="autoExpandParent"
+          :selected-keys="selectedKeys"
+          :tree-data="treeData"
+          @expand="onExpand"
+          @select="onSelect"
+        />
+      </a-col>
+      <a-col :span="20">
+        <div class="search-box">
+          <a-space size="large">
+            <a-input placeholder="请输入申请人/公司名" />
+            <a-select style="width: 200px" placeholder="选择状态" />
+            <a-button type="primary">查 询</a-button>
+            <a-button>重 置</a-button>
+          </a-space>
         </div>
-        <div class="right">
+        <!-- 表格 -->
+        <div id="commonTable">
+          <div style="margin-bottom: 16px">
+            <a-space size="large">
+              <a-button type="primary" :loading="loading"> 新增员工 </a-button>
+              <a-button :disabled="!hasSelected" :loading="loading">
+                批量操作
+              </a-button>
+            </a-space>
+            <span style="margin-left: 8px">
+              <template v-if="hasSelected">
+                {{ `已选择 ${selectedRowKeys.length} 条` }}
+              </template>
+            </span>
+          </div>
+          <a-table
+            :scroll="{ x: 1300 }"
+            :columns="columns"
+            :data-source="tableData"
+            :pagination="pagination"
+            @change="handleTableChange"
+            :row-selection="{
+              selectedRowKeys: selectedRowKeys,
+              onChange: onSelectChange,
+            }"
+            :row-key="
+              (record, index) => {
+                return index;
+              }
+            "
+          >
+            <!-- 操作 -->
+            <span slot="action" slot-scope="scope">
+              <a @click="detail(scope)">详情</a>
+              <span style="margin: 5px">|</span>
+              <a-switch size="small"></a-switch>
+              <span style="margin: 5px">|</span>
+              <a @click="detail(scope)">重置密码</a>
+            </span>
+            <span slot="formatter" slot-scope="scope">{{
+              scope === 1 ? "可" : ""
+            }}</span>
+          </a-table>
         </div>
-    </div>
+      </a-col>
+    </a-row>
+  </div>
 </template>
-
 <script>
+const treeData = [
+  {
+    title: "0-0",
+    key: "0-0",
+    children: [
+      {
+        title: "0-0-0",
+        key: "0-0-0",
+        children: [
+          { title: "0-0-0-0", key: "0-0-0-0" },
+          { title: "0-0-0-1", key: "0-0-0-1" },
+          { title: "0-0-0-2", key: "0-0-0-2" },
+        ],
+      },
+      {
+        title: "0-0-1",
+        key: "0-0-1",
+        children: [
+          { title: "0-0-1-0", key: "0-0-1-0" },
+          { title: "0-0-1-1", key: "0-0-1-1" },
+          { title: "0-0-1-2", key: "0-0-1-2" },
+        ],
+      },
+      {
+        title: "0-0-2",
+        key: "0-0-2",
+      },
+    ],
+  },
+  {
+    title: "0-1",
+    key: "0-1",
+    children: [
+      { title: "0-1-0-0", key: "0-1-0-0" },
+      { title: "0-1-0-1", key: "0-1-0-1" },
+      { title: "0-1-0-2", key: "0-1-0-2" },
+    ],
+  },
+  {
+    title: "0-2",
+    key: "0-2",
+  },
+];
+
 export default {
-    name: "Employee",//员工管理
+  data() {
+    return {
+      expandedKeys: ["0-0-0", "0-0-1"],
+      autoExpandParent: true,
+      checkedKeys: ["0-0-0"],
+      selectedKeys: [],
+      treeData,
+      // 搜索项
+      searchForm: {
+        name: "",
+        code: "",
+      },
+      //   列
+      columns: [
+        {
+          title: "Name",
+          dataIndex: "name",
+          width: "200",
+        },
+        {
+          title: "Gender",
+          dataIndex: "gender",
+          width: "200",
+        },
+        {
+          title: "Gender1",
+          dataIndex: "gender1",
+          width: "200",
+        },
+        {
+          title: "Gender2",
+          dataIndex: "gender2",
+          width: "200",
+        },
+        {
+          title: "Gender3",
+          dataIndex: "gender3",
+          width: "200",
+        },
+        {
+          title: "Gender4",
+          dataIndex: "gender4",
+          width: "200",
+        },
+        {
+          title: "Gender5",
+          dataIndex: "gender5",
+          width: "200",
+        },
+        {
+          title: "Gender6",
+          dataIndex: "gender6",
+          width: "200",
+        },
+        {
+          title: "status",
+          dataIndex: "status",
+          scopedSlots: { customRender: "formatter" },
+          width: "200",
+        },
+        {
+          title: "操作",
+          dataIndex: "action",
+          key: "action",
+          width: "180",
+          fixed: "right",
+          scopedSlots: { customRender: "action" },
+        },
+      ],
+      //   数据
+      tableData: [
+        {
+          name: "11",
+          id: 1,
+          status: 1,
+        },
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+      ],
+      //   分页
+      pagination: {
+        current: 1,
+        total: 0,
+        pageSize: 10,
+        showTotal: (total) => `共 ${total} 条`,
+        showSizeChanger: true,
+        showQuickJumper: true,
+      },
+      loading: false,
+      selectedRowKeys: [],
+    };
+  },
+  computed: {
+    hasSelected() {
+      return this.selectedRowKeys.length > 0;
+    },
+  },
+  watch: {
+    checkedKeys(val) {
+      console.log("onCheck", val);
+    },
+  },
+  methods: {
+    onExpand(expandedKeys) {
+      console.log("onExpand", expandedKeys);
+      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
+      // or, you can remove all expanded children keys.
+      this.expandedKeys = expandedKeys;
+      this.autoExpandParent = false;
+    },
+    onCheck(checkedKeys) {
+      console.log("onCheck", checkedKeys);
+      this.checkedKeys = checkedKeys;
+    },
+    onSelect(selectedKeys, info) {
+      console.log("onSelect", info);
+      this.selectedKeys = selectedKeys;
+    },
+    detail(data) {
+      console.log(data);
+      this.$router.push({ name: "settle_detail" });
+    },
+    onSelectChange(selectedRowKeys) {
+      console.log("selectedRowKeys changed: ", selectedRowKeys);
+      this.selectedRowKeys = selectedRowKeys;
+    },
+    handleTableChange(pagination) {
+      console.log(pagination);
+      const pager = { ...this.pagination };
+      pager.current = pagination.current;
+      pager.pageSize = pagination.pageSize;
+      this.pagination = pager;
+    },
+  },
 };
 </script>
-
 <style lang="less" scoped>
-
-</style>
+.left-tree {
+  padding: 10px;
+  border-right: 1px solid #0000000f;
+  height: 100vh;
+}
+#commonTable {
+  padding: 10px;
+}
+</style>
\ No newline at end of file