员工管理页面的制作

src/lang/en.js

@@ -109,7 +109,8 @@ export default {
     RescueRecord: 'Rescue Record',
     special_permission_manage: 'Special Permission Manage',
     schedule_print: 'Print Schudule',
-    dialysis_batch_print: 'Batch Print Order'
+    dialysis_batch_print: 'Batch Print Order',
+    systemsetting:'Systemsetting'
   },
   navbar: {
     logOut: 'Log Out',

src/lang/zh.js

@@ -157,8 +157,9 @@ export default {
     salesReturnDetail: '退货单详情',
     stockOutDetail: '出库单详情',
     cancelStockDetail: '退库单详情',
-    stockDetail: '出入库明细查询'
-
+    stockDetail: '出入库明细查询',
+    systemsetting:'系统设置',
+    staffmanagement:'员工管理'
   },
   navbar: {
     logOut: '退出登录',

src/router/index.js

@@ -10,6 +10,7 @@ import role from './modules/role'
 import article from './modules/article'
 import member from './modules/member'
 import org from './modules/org'
+import system from './modules/system';
 
 /** note: submenu only apppear when children.length>=1
  *   detail see  https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
@@ -73,7 +74,8 @@ var _asy_router_map = [
   member,
   article,
   org,
-  role
+  role,
+  system
 ]
 
 var is_asy_router = process.env.NODE_ENV === 'production' // true; 设置为 true 强制进行路由验证

src/router/modules/system.js

@@ -0,0 +1,21 @@
+import Layout from '@/views/layout/Layout'
+
+export default{
+    alwaysShow: true,
+    path: '/Systemsetting',
+    component: Layout,
+    redirect: 'noredirect',
+    name: 'Systemsetting',
+    meta: {
+        title: 'systemsetting',
+        icon: 'peoples'
+      },
+      children: [
+        {
+          path: '/Systemsetting/staffmanagement',
+          component: () => import('@/scrm_pages/Systemsetting/staffmanagement'),
+          name: 'memberslist',
+          meta: { title: 'staffmanagement', noCache: true }
+        },
+      ]  
+}

src/scrm_pages/article/articleList.vue

@@ -34,6 +34,10 @@
             <el-button size="small" icon="el-icon-delete" @click="batchDelete">删除</el-button>
           </div>
           <el-table ref="multipleTable" :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" :data="tableData" border fit highlight-current-row  style="width: 100%;margin-top: 10px;">
+              <el-table-column
+                type="selection"
+                width="55">
+              </el-table-column> 
              <el-table-column label="文章图片" align="center">
                <template slot-scope="scope">
 

src/scrm_pages/article/createArticle.vue

@@ -9,7 +9,7 @@
       <el-tab-pane label="文章">
         <el-form label-width="80px" class="clearfix" :model="form" ref="form"  :element-loading-text="loadingText">
           <el-row>
-            <el-col :span="24">
+            <el-col :span="23">
                 <el-form-item label="文章标题:">
                     <el-input v-model="form.act_name"  placeholder="文章标题"></el-input>
                 </el-form-item>
@@ -28,7 +28,7 @@
               <el-form-item prop="org_log">
                 <el-col :span="3">
                   <div>
-                    <el-upload  
+                    <el-upload
                       v-loading="uploading"
                       :element-loading-text="loadingText"
                       class="avatar-uploader"
@@ -45,7 +45,7 @@
                 </el-col>
                 <el-col :span="3">
                   <div v-if="show">
-                    <el-upload  
+                    <el-upload
                       v-loading="guploading"
                       :element-loading-text="loadingText"
                       class="avatar-uploader"
@@ -62,7 +62,7 @@
                 </el-col>
                 <el-col :span="3">
                   <div v-if="show">
-                    <el-upload  
+                    <el-upload
                       v-loading="uploading"
                       :element-loading-text="loadingText"
                       class="avatar-uploader"
@@ -266,7 +266,7 @@
         if (!isLt2M) {
           this.$message.error('上传头像图片大小不能超过 2MB!');
         }
-        
+
             var date = new Date()
             var ext = getFileExtension(file.name)
             var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
@@ -286,7 +286,7 @@
                     this.uploading = false;
                 })
             })
-        
+
           //return isJPG && isLt2M;
       },
       //第二个图片
@@ -310,7 +310,7 @@
         if (!isLt2M) {
           this.$message.error('上传头像图片大小不能超过 2MB!');
         }
-        
+
             var date = new Date()
             var ext = getFileExtension(file.name)
             var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
@@ -330,10 +330,10 @@
                     this.uploading = false;
                 })
             })
-        
+
           //return isJPG && isLt2M;
       },
-      
+
       //第三张图片
       //第二个图片
       handleAvatarlastSuccess(res, file) {
@@ -356,7 +356,7 @@
         if (!isLt2M) {
           this.$message.error('上传头像图片大小不能超过 2MB!');
         }
-        
+
             var date = new Date()
             var ext = getFileExtension(file.name)
             var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
@@ -376,7 +376,7 @@
                     this.uploading = false;
                 })
             })
-        
+
           //return isJPG && isLt2M;
       },
 

src/scrm_pages/systemsetting/staffmanagement.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="main-contain">
+    <div class="position">
+      <bread-crumb :crumbs='crumbs'></bread-crumb>
+       <el-button  style="float:right;" type="primary" size="small" icon="el-icon-circle-plus-outline" @click="centerDialogVisible = true" >添加员工</el-button>
+    </div>
+    <div class="app-container">
+         <div>
+             <el-row :gutter="24">
+                <el-col :span="8">
+                  <el-input style="width: 300px"  placeholder="请输入您需要搜索的内容"></el-input>
+                  <el-button type="primary"  icon="el-icon-search" @click="changeKey">搜索</el-button>
+                </el-col>
+             </el-row>
+         </div>
+         <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
+            <el-checkbox style="width: 30px" v-model="checked" @change="changeAllSelected">全选</el-checkbox>
+            <el-button size="small" icon="el-icon-delete" @click="batchDelete">删除</el-button>
+          </div>
+              <el-table ref="multipleTable" :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" :data="tableData" border fit highlight-current-row  style="width: 100%;margin-top: 10px;">
+              <el-table-column
+                type="selection"
+                width="55">
+              </el-table-column>
+              <el-table-column label="员工" align="center">
+               <template slot-scope="scope">
+
+               </template>
+             </el-table-column>
+            <el-table-column label="职称" align="center">
+              <template slot-scope="scope">
+
+              </template>
+            </el-table-column>
+            <el-table-column label="介绍" align="center">
+              <template slot-scope="scope">
+
+              </template>
+            </el-table-column>
+            <el-table-column label="手机号" align="center">
+              <template slot-scope="scope">
+
+              </template>
+            </el-table-column>
+            <el-table-column label="创建时间" align="center">
+              <template slot-scope="scope">
+
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center">
+              <template slot-scope="scope">
+                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
+                  <el-button
+                    size="mini"
+                    type="primary"
+                    icon="el-icon-edit-outline"
+                    >
+                  </el-button>
+                  </el-tooltip>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :page-sizes="[10,20,50,100]"
+            :page-size="10"
+            background
+            style="margin-top:20px;float: right"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total">
+          </el-pagination>
+
+          <el-dialog
+              title="添加会员"
+              :visible.sync="centerDialogVisible"
+              width="50%"
+              center>
+              <el-form label-width="80px" class="clearfix" :model="form" ref="form">
+                 <el-row>
+                   <el-col :span="12">
+                      <el-form-item label="姓名:">
+                           <el-input placeholder="请输入姓名">
+
+                           </el-input>
+                      </el-form-item>
+                   </el-col>
+                   <el-col :span="12">
+                     <el-form-item label="手机号:">
+                       <el-input placeholder="请输入手机号">
+
+                       </el-input>
+                     </el-form-item>
+                   </el-col>
+                 </el-row>
+                <el-row>
+                   <el-col :span="12">
+                       <el-form-item label="性别:">
+                         <el-radio v-model="radio" label="1">男</el-radio>
+                         <el-radio v-model="radio" label="2">女</el-radio>
+                       </el-form-item>
+                   </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="生日:">
+                          <el-time-select
+                            v-model="value"
+                            :picker-options="{
+                              start: '08:30',
+                              step: '00:15',
+                              end: '18:30'}"
+                            placeholder="选择时间">
+                        </el-time-select>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="8">
+                        <el-form-item label="员工职称:">
+                          <template>
+                            <el-select v-model="value1" multiple placeholder="请选择">
+                              <el-option
+                                v-for="item in options"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value">
+                              </el-option>
+                            </el-select>
+                          </template>
+                        </el-form-item>
+                    </el-col>
+                  <el-col :span="6">
+                      <template>
+                        <el-select v-model="value2" multiple placeholder="请选择">
+                          <el-option
+                            v-for="item in options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                          </el-option>
+                        </el-select>
+                      </template>
+                  </el-col>
+                  <el-col :span="4">
+                      <el-form-item label="医生头像:">
+                        <el-upload
+                          class="avatar-uploader"
+                          action="https://jsonplaceholder.typicode.com/posts/"
+                          :show-file-list="false"
+                          :on-success="handleAvatarSuccess"
+                          :before-upload="beforeAvatarUpload">
+                          <img v-if="imageUrl" :src="imageUrl" class="avatar">
+                          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                        </el-upload>
+                      </el-form-item>
+                    </el-col>
+                </el-row>
+                 <el-row>
+                     <el-col :span="24">
+                         <el-form-item label="医生简介:">
+                           <keep-alive>
+                             <neditor ref="neditor"
+                                      id="editor">
+                             </neditor>
+                           </keep-alive>
+                         </el-form-item>
+                     </el-col>
+                 </el-row>
+              </el-form>
+              <span slot="footer" class="dialog-footer">
+              <el-button @click="centerDialogVisible = false">取 消</el-button>
+              <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+               </span>
+          </el-dialog>
+
+    </div>
+  </div>
+</template>
+
+<script>
+  import BreadCrumb from '../components/bread-crumb'
+  import Neditor from '@/components/Neditor'
+  export default {
+    name: 'articleComment',
+    components:{
+      BreadCrumb,
+      Neditor,
+    },
+    data(){
+      return{
+        crumbs: [
+          { path: false, name: '系统设置' },
+          { path: '/Systemsetting/staffmanagement', name: '员工管理' }
+        ],
+         centerDialogVisible: false,
+          radio: '1',
+          value: '',
+          options: [{
+          value: '选项1',
+          label: '黄金糕'
+        }, {
+          value: '选项2',
+          label: '双皮奶'
+        }, {
+          value: '选项3',
+          label: '蚵仔煎'
+        }, {
+          value: '选项4',
+          label: '龙须面'
+        }, {
+          value: '选项5',
+          label: '北京烤鸭'
+        }],
+        value1: [],
+        value2: [],
+        imageUrl: ''
+      }
+    },
+    methods: {
+      handleAvatarSuccess(res, file) {
+        this.imageUrl = URL.createObjectURL(file.raw);
+      },
+      beforeAvatarUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        if (!isJPG) {
+          this.$message.error('上传头像图片只能是 JPG 格式!');
+        }
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 2MB!');
+        }
+        return isJPG && isLt2M;
+      }
+    }
+  }
+</script>
+
+<style scoped>
+    .avatar-uploader{
+      border: 1px solid #d9d9d9;
+      border-radius: 1px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+    .avatar-uploader{
+      border-color: #d9d9d9;
+    }
+    .avatar-uploader-icon {
+      font-size: 20px;
+      color: #8c939d;
+      width: 65px;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+    }
+    .avatar {
+      width: 50px;
+      height: 50px;
+      display: block;
+    }
+</style>