From 55cd2032b975ebfdb7f5b3145c8d278559d01ca5 Mon Sep 17 00:00:00 2001
From: xiaowen <372193233@qq.com>
Date: Fri, 26 Nov 2021 12:28:08 +0800
Subject: [PATCH] cxw-010203

---
 src/App.vue                             |   4 +-
 src/views/Employee/curd/columns.js      |  41 +++++
 src/views/Employee/index.vue            | 203 +++++++++---------------
 src/views/Employee/testData/treeData.js |  65 ++++++++
 4 files changed, 186 insertions(+), 127 deletions(-)
 create mode 100644 src/views/Employee/curd/columns.js
 create mode 100644 src/views/Employee/testData/treeData.js

diff --git a/src/App.vue b/src/App.vue
index a530f12..d2a7290 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-18 17:15:53
- * @LastEditTime: 2021-11-18 17:41:13
+ * @LastEditTime: 2021-11-26 12:10:54
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /ansu-business/src/App.vue
@@ -37,7 +37,7 @@ body {
 #app {
     width: 100%;
     height: 100%;
-    min-width: 1200px;
+    min-width: 1500px;
     min-height: 760px;
     overflow: auto;
 }
diff --git a/src/views/Employee/curd/columns.js b/src/views/Employee/curd/columns.js
new file mode 100644
index 0000000..c2ccf6e
--- /dev/null
+++ b/src/views/Employee/curd/columns.js
@@ -0,0 +1,41 @@
+/*
+ * @Author: your name
+ * @Date: 2021-11-26 12:16:37
+ * @LastEditTime: 2021-11-26 12:16:37
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /LittleBeeSaas/src/views/Employee/curd/columns.js
+ */
+export default [
+    { title: "名称", dataIndex: "name", width: 100, key: "1", align: "center" },
+    {
+        title: "手机号",
+        dataIndex: "mobilenumber",
+        width: 150,
+        key: "2",
+        align: "center",
+    },
+    {
+        title: "所属部门",
+        dataIndex: "Department",
+        width: 150,
+        key: "3",
+        align: "center",
+    },
+    {
+        title: "职位",
+        dataIndex: "position",
+        width: 150,
+        key: "4",
+        align: "center",
+    },
+    { title: "备注", dataIndex: "remarks", key: "5", align: "center" },
+    {
+        title: "操作",
+        dataIndex: "operation",
+        width: 280,
+        key: "action",
+        align: "center",
+        scopedSlots: { customRender: "action" },
+    },
+]
diff --git a/src/views/Employee/index.vue b/src/views/Employee/index.vue
index 05a503b..8f6cc34 100644
--- a/src/views/Employee/index.vue
+++ b/src/views/Employee/index.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-22 15:56:04
- * @LastEditTime: 2021-11-22 17:14:00
+ * @LastEditTime: 2021-11-26 12:27:21
  * @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
@@ -16,17 +16,41 @@
         <div class="right">
             <div class="top">
                 <div class="topleft">
-                    <a-button icon="plus" type="primary">新增员工</a-button>
-                    <a-button>导入</a-button>
-                    <a-button>导出</a-button>
+                    <a-button-group>
+                        <a-button icon="plus" type="primary">新增员工</a-button>
+                        <a-button>导入</a-button>
+                        <a-button>导出</a-button>
+                    </a-button-group>
                 </div>
                 <div class="topright">
-                    <a-select show-search placeholder="所属部门" option-filter-prop="children" style="width: 200px" :filter-option="filterOption"></a-select>
-                    <a-select show-search placeholder="职位" option-filter-prop="children" style="width: 200px" :filter-option="filterOption"></a-select>
-                    <a-input-search placeholder="请输入搜索信息" style="width: 200px"></a-input-search>
+                    <a-form-model :model="form" layout="inline">
+                        <a-form-model-item>
+                            <a-select v-model="form.a" show-search placeholder="所属部门" option-filter-prop="children" style="width: 160px" :filter-option="filterOption">
+                                <a-select-option value="jack">
+                                    Jack
+                                </a-select-option>
+                                <a-select-option value="lucy">
+                                    Lucy
+                                </a-select-option>
+                            </a-select>
+                        </a-form-model-item>
+                        <a-form-model-item>
+                            <a-select v-model="form.b" show-search placeholder="职位" option-filter-prop="children" style="width: 160px" :filter-option="filterOption">
+                                <a-select-option value="jack">
+                                    Jack
+                                </a-select-option>
+                                <a-select-option value="lucy">
+                                    Lucy
+                                </a-select-option>
+                            </a-select>
+                        </a-form-model-item>
+                        <a-form-model-item>
+                            <a-input-search v-model="form.c" placeholder="请输入搜索信息" style="width: 160px"></a-input-search>
+                        </a-form-model-item>
+                    </a-form-model>
                 </div>
             </div>
-            <a-table :row-selection="rowSelection" :columns="columns" :data-source="data">
+            <a-table :row-selection="rowSelection" :columns="columns" :data-source="tableData" :pagination="false">
                 <template v-slot:action="{record}">
                     <span>
                         <a @click="Edit(record)">编辑</a>
@@ -43,140 +67,66 @@
                     </span>
                 </template>
             </a-table>
+
+            <div class="block">
+                <span>共10900条</span>
+                <a-pagination :total="page.total" :current="form.page" :page-size="page.pageSize"/>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
-//表格
-const columns = [
-    { title: "名称", dataIndex: "name", width: 100, key: "1", align: "center" },
-    {
-        title: "手机号",
-        dataIndex: "mobilenumber",
-        width: 150,
-        key: "2",
-        align: "center",
-    },
-    {
-        title: "所属部门",
-        dataIndex: "Department",
-        width: 150,
-        key: "3",
-        align: "center",
-    },
-    { title: "职位", dataIndex: "position", width: 150, key: "4", align: "center" },
-    { title: "备注", dataIndex: "remarks", key: "5", align: "center" },
-    {
-        title: "操作",
-        dataIndex: "operation",
-        width: 280,
-        key: "action",
-        align: "center",
-        scopedSlots: { customRender: "action" },
+import columns from "./curd/columns";
+import treeData from "./testData/treeData";
+//表格选择框
+const rowSelection = {
+    onChange: (selectedRowKeys, selectedRows) => {
+        console.log(
+            `selectedRowKeys: ${selectedRowKeys}`,
+            "selectedRows: ",
+            selectedRows
+        );
     },
-];
-//数据
-const data = [
-    {
-        key: '1',
-        name: '潘迪',
-        mobilenumber: '13899191020',
-        Department: '安全保卫部',
-        position: '项目经理',
-        remarks: '青海省',
-        operation: '',
+    onSelect: (record, selected, selectedRows) => {
+        console.log(record, selected, selectedRows);
     },
-];
-//左边数行控件
-const treeData = [
-    {
-        title: "广西印象物业服务有限公司",
-        key: "0-0",
-        children: [
-            {
-                title: "运营部",
-                key: "0-0-0",
-                children: [
-                    { title: "客服组", key: "0-0-0-0" },
-                    { title: "商务组", key: "0-0-0-1" },
-                ],
-            },
-            {
-                title: "财务部",
-                key: "0-0-1",
-                children: [{ title: "0-0-1-0", key: "0-0-1-0" }],
-            },
-            {
-                title: "房屋管理维修部",
-                key: "0-0-2",
-                children: [{ title: "0-0-1-0", key: "0-0-2-0" }],
-            },
-            {
-                title: "安保部",
-                key: "0-0-3",
-                children: [{ title: "0-0-1-0", key: "0-0-3-0" }],
-            },
-            {
-                title: "设备工程部门",
-                key: "0-0-4",
-                children: [{ title: "0-0-1-0", key: "0-0-4-0" }],
-            },
-            {
-                title: "环境卫生部",
-                key: "0-0-5",
-                children: [{ title: "0-0-1-0", key: "0-0-5-0" }],
-            },
-        ],
+    onSelectAll: (selected, selectedRows, changeRows) => {
+        console.log(selected, selectedRows, changeRows);
     },
-    {
-        title: "南宁富航资产管理有限公司",
-        key: "0-1",
-        children: [
-            {
-                title: "工程维修管理单位",
-                key: "0-1-0",
-                children: [{ title: "客服组", key: "0-1-0-0" }],
-            },
-            {
-                title: "南宁中建工程机械维修",
-                key: "0-1-1",
-                children: [{ title: "0-0-1-0", key: "0-1-0-1" }],
-            },
-        ],
-    },
-];
-//表格选择框
-const rowSelection = {
-  onChange: (selectedRowKeys, selectedRows) => {
-    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
-  },
-  onSelect: (record, selected, selectedRows) => {
-    console.log(record, selected, selectedRows);
-  },
-  onSelectAll: (selected, selectedRows, changeRows) => {
-    console.log(selected, selectedRows, changeRows);
-  },
 };
 const options = [];
 export default {
     name: "Employee", //员工管理
     data() {
         return {
+            form: {
+                a: "",
+                b: "",
+                c: "",
+                page:1
+            },
             rowSelection,
             value: undefined,
             treeData,
             expandedKeys: ["0-0-0", "0-0-1"],
             region: undefined,
             options,
-            data,
+            tableData: [
+                {
+                    key: "1",
+                    name: "潘迪",
+                    mobilenumber: "13899191020",
+                    Department: "安全保卫部",
+                    position: "项目经理",
+                    remarks: "青海省",
+                    operation: "",
+                },
+            ],
             columns,
-            tableData: [],
             page: {
-                pageNo: 1,
-                limit: 10,
-                sizes: [1, 5, 10],
-                total: 0,
+                pageSize: 10,
+                total: 1,
             },
         };
     },
@@ -205,18 +155,16 @@ export default {
 .box {
     display: flex;
     .left {
-        width: 20%;
+        width: 260px;
         height: 650px;
         border-right: 3px solid rgb(175, 174, 174);
     }
     .right {
-        width: 75%;
-        height: 650px;
-        margin: auto 10px;
+        width: 100%;
+        margin-left: 10px;
     }
 }
 .top {
-    padding: 10px;
     width: 100%;
     display: flex;
     justify-content: space-between;
@@ -229,4 +177,9 @@ export default {
         height: 50px;
     }
 }
+.block {
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+}
 </style>
diff --git a/src/views/Employee/testData/treeData.js b/src/views/Employee/testData/treeData.js
new file mode 100644
index 0000000..0f7be50
--- /dev/null
+++ b/src/views/Employee/testData/treeData.js
@@ -0,0 +1,65 @@
+/*
+ * @Author: your name
+ * @Date: 2021-11-26 12:17:53
+ * @LastEditTime: 2021-11-26 12:17:54
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /LittleBeeSaas/src/views/Employee/testData/treeData.js
+ */
+export default [
+    {
+        title: "广西印象物业服务有限公司",
+        key: "0-0",
+        children: [
+            {
+                title: "运营部",
+                key: "0-0-0",
+                children: [
+                    { title: "客服组", key: "0-0-0-0" },
+                    { title: "商务组", key: "0-0-0-1" },
+                ],
+            },
+            {
+                title: "财务部",
+                key: "0-0-1",
+                children: [{ title: "0-0-1-0", key: "0-0-1-0" }],
+            },
+            {
+                title: "房屋管理维修部",
+                key: "0-0-2",
+                children: [{ title: "0-0-1-0", key: "0-0-2-0" }],
+            },
+            {
+                title: "安保部",
+                key: "0-0-3",
+                children: [{ title: "0-0-1-0", key: "0-0-3-0" }],
+            },
+            {
+                title: "设备工程部门",
+                key: "0-0-4",
+                children: [{ title: "0-0-1-0", key: "0-0-4-0" }],
+            },
+            {
+                title: "环境卫生部",
+                key: "0-0-5",
+                children: [{ title: "0-0-1-0", key: "0-0-5-0" }],
+            },
+        ],
+    },
+    {
+        title: "南宁富航资产管理有限公司",
+        key: "0-1",
+        children: [
+            {
+                title: "工程维修管理单位",
+                key: "0-1-0",
+                children: [{ title: "客服组", key: "0-1-0-0" }],
+            },
+            {
+                title: "南宁中建工程机械维修",
+                key: "0-1-1",
+                children: [{ title: "0-0-1-0", key: "0-1-0-1" }],
+            },
+        ],
+    },
+];