From 8fd7b712b13d38d1640c0061e3cb311011f89d81 Mon Sep 17 00:00:00 2001
From: yoe <yoe0405@163.com>
Date: Tue, 12 May 2020 18:43:31 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E6=B7=BB=E5=8A=A0=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu-tree/index.vue            |  42 +++
 .../business/staff/staff-archives/index.vue   | 256 ++++++++++++++++--
 src/views/modules/sys/menu-add-or-update.vue  |   2 +-
 3 files changed, 278 insertions(+), 22 deletions(-)
 create mode 100644 src/components/menu-tree/index.vue

diff --git a/src/components/menu-tree/index.vue b/src/components/menu-tree/index.vue
new file mode 100644
index 0000000..085ccdd
--- /dev/null
+++ b/src/components/menu-tree/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <el-submenu
+    v-if="menu.children && menu.children.length >= 1"
+    :index="menu.id + ''">
+    <template slot="title">
+      <icon-svg :name="menu.icon==null?'':menu.icon" class="site-sidebar__menu-icon"></icon-svg>
+      <span>{{menu.name}}  ({{menu.number}})</span>
+    </template>
+    <menu-tree
+      v-for="item in menu.children"
+      :key="item.id"
+      :menu="item">
+    </menu-tree>
+  </el-submenu>
+  <el-menu-item v-else :index="menu.id.toString()" @click.native="handleGoRoute(menu)">
+    <icon-svg :name="menu.icon==null?'':menu.icon" class="site-sidebar__menu-icon"></icon-svg>
+    <span>{{menu.name}}  ({{menu.number}})</span>
+  </el-menu-item>
+</template>
+
+<script>
+import menuTree from './index'
+
+export default {
+  name: 'menu-tree',
+  props: {
+    menu: {
+      type: Object,
+      required: true
+    }
+  },
+  components: {
+    menuTree
+  },
+  methods: {
+    // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
+    handleGoRoute (menu) {
+      this.$router.push({name: 'staff', query: {id: menu.id}})
+    }
+  }
+}
+</script>
diff --git a/src/views/business/staff/staff-archives/index.vue b/src/views/business/staff/staff-archives/index.vue
index 46b720f..a3d0ffc 100644
--- a/src/views/business/staff/staff-archives/index.vue
+++ b/src/views/business/staff/staff-archives/index.vue
@@ -1,37 +1,251 @@
 <template>
-  <div class="staff-archives">
-    员工档案
-    <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
+  <div class="staff">
+    <el-card>
+      <el-row>
+        <el-col class="menu" :span="6">
+          <el-menu @open="openMenu" :default-active="current" :collapse-transition="true" :unique-opened="true">
+            <menu-tree v-for="(item) in menuList" :key="item.id" :menu="item"></menu-tree>
+          </el-menu>
+        </el-col>
+        <el-col :span="18">
+          <div class="block">
+            <el-form :inline="true">
+              <el-form-item label="员工姓名"><el-input v-model="searchParams.staffName"></el-input></el-form-item>
+              <el-form-item label="人员状态">
+                <el-select v-model="searchParams.staffState" placeholder="请选择">
+                  <el-option v-for="item in staffStateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" @click="getTable()">查询</el-button>
+                <el-button @click="clear()">重置</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+          <div class="table">
+            <el-table
+              v-loading="loading"
+              :data="tableData"
+              :header-cell-style="{'color': '#909399', 'background-color': '#f5f7fa'}"
+              style="width: 100%"
+              height="100%">
+              <el-table-column header-align="center" align="center" label="工号" prop="jobnumber"></el-table-column>
+              <el-table-column header-align="center" align="center" label="员工姓名" prop="name"></el-table-column>
+              <el-table-column header-align="center" align="center" label="职位" prop="position"></el-table-column>
+              <el-table-column header-align="center" align="center" label="状态" prop="deptName"></el-table-column>
+              <el-table-column header-align="center" align="center" label="操作">
+                <template slot-scope="scope">
+                  <el-button type="text" @click="handleView(scope.row)">查看</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <el-pagination
+              class="bl-form3"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page.sync="currentPage"
+              :page-sizes="[10, 20, 50]"
+              :page-size="pageSize"
+              layout="total, sizes, prev, pager, next"
+              :total="pageTotal">
+            </el-pagination>
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
   </div>
 </template>
 
 <script>
+import menuTree from '@/components/menu-tree'
+
 export default {
+  components: {
+    menuTree
+  },
   data () {
     return {
+      menuList: [], // 架构数据
+      tableData: [], // 表格数据
+      // 搜索数据
+      searchParams: {
+        staffName: '',
+        staffState: ''
+      },
+      // 在职状态
+      staffStateList: [
+        { value: '0', label: '在职' },
+        { value: '1', label: '离职' }
+      ],
+      loading: false,
+      currentPage: 1,
+      pageSize: 10,
+      pageTotal: 0,
+      deptId: '',
+      // 弹窗相关
+      showAddDialogForm: false,
+      activeName: 'first',
+      form: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: ''
+      }
     }
   },
-  mounted () {
-    this.handleDrawLine()
+  watch: {
+    $route: function (val) {
+      if (val.name === 'staff') {
+        this.clearData()
+        this.handleGetTableList(val.query.id)
+      }
+    }
+  },
+  computed: {
+    current () {
+      return this.$route.query.hasOwnProperty('id') ? this.$route.query.id ? this.$route.query.id.toString() : '' : ''
+    }
+  },
+  created () {
+    this.handleGetMenuList()
+    this.handleGetTableList(this.current)
   },
   methods: {
-    handleDrawLine () {
-      let myChart = this.$echarts.init(document.getElementById('myChart'))
-      // 绘制图表
-      myChart.setOption({
-        title: { text: '在Vue中使用echarts' },
-        tooltip: {},
-        xAxis: {
-          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
-        },
-        yAxis: {},
-        series: [{
-          name: '销量',
-          type: 'bar',
-          data: [5, 20, 36, 10, 10, 20]
-        }]
-      })
+    // 获取侧边架构列表
+    handleGetMenuList () {
+      let data = [{
+        'children': [
+          {
+            'children': [],
+            'id': 70990627,
+            'name': '结算部',
+            'parentId': 55969991,
+            'number': '1'
+          }
+        ],
+        'id': 55969991,
+        'name': '结算中心',
+        'parentId': 1,
+        'number': 2
+      }, {
+        'children': [
+          {
+            'children': [
+              {
+                'children': [],
+                'id': 92131240,
+                'name': '金融运营团队',
+                'parentId': 87839336
+              },
+              {
+                'children': [
+                  {
+                    'children': [],
+                    'id': 9213124111,
+                    'name': '2B业务组',
+                    'parentId': 92131239
+                  },
+                  {
+                    'children': [],
+                    'id': 9213124222,
+                    'name': '2C业务组',
+                    'parentId': 92131239
+                  }
+                ],
+                'id': 92131239,
+                'name': '电商运营团队',
+                'parentId': 87839336
+              }
+            ],
+            'id': 87839336,
+            'name': '运营中心',
+            'parentId': 87839327
+          }
+        ],
+        'id': 87839327,
+        'name': '业务前台',
+        'parentId': 1
+      }]
+      this.menuList = data
+    },
+    // 获取数据列表
+    handleGetTableList (id) {
+      this.tableData = [{
+        'deptName': '结算中心',
+        'id': 665,
+        'jobnumber': '4',
+        'name': '刘更顺',
+        'position': 'CPO'
+      },
+      {
+        'deptName': '结算部',
+        'id': 670,
+        'jobnumber': '239',
+        'name': '王文龙',
+        'position': '数据运营'
+      }]
+      this.loading = false
+    },
+    openMenu (index, indexPath) {
+      if (index === '51685041') {
+        this.handleGetTableList(index)
+      } else {
+        this.clearData()
+        this.loading = false
+      }
+    },
+    clear () {
+      this.input = ''
+      this.deptId = ''
+      this.$router.push({name: 'staff', query: {id: ''}})
+    },
+    clearData () {
+      this.tableData = []
+      this.currentPage = 1
+      this.pageTotal = 10
+      this.loading = true
+    },
+    handleCurrentChange (val) {
+      this.handleGetTableList()
+    },
+    handleSizeChange (val) {
+      this.pageSize = val
+      this.handleGetTableList()
+    },
+    // 弹窗相关
+    handleClick (tab, event) {
+      console.log(tab, event)
+    },
+    handleView () {
+      this.showAddDialogForm = true
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.staff .block, .staff .table {
+  margin-left: 20px;
+}
+.el-form-item .el-form-item {
+  margin-bottom: 22px;
+}
+.add-wrap {
+  margin-bottom: 22px;
+}
+.turn-work-list {
+  background-color: pink;
+  padding-bottom: 10px;
+  margin-bottom: 20px;
+}
+.bl-form3{
+  &.el-pagination{
+    margin-top: 16px;
+    text-align: right;
+  }
+}
+</style>
diff --git a/src/views/modules/sys/menu-add-or-update.vue b/src/views/modules/sys/menu-add-or-update.vue
index 7dea5bb..f5d5481 100644
--- a/src/views/modules/sys/menu-add-or-update.vue
+++ b/src/views/modules/sys/menu-add-or-update.vue
@@ -72,7 +72,7 @@
 
 <script>
   import { treeDataTranslate } from '@/utils'
-  import Icon from '@/icons'
+  import Icon from '@/element/icons'
   import { apiSysMenuSelect, apiSysMenuInfo, apiSysMenuConfirm } from '@/api/api_sys'
 
   export default {