新增页面

src/api/school/index.js

@@ -457,3 +457,14 @@ export function deleteClassRoomInfo(data) {
     data
   });
 }
+
+/***
+ * 获取行政备注类型下拉列表
+ */
+export function queryRemarkTypeList() {
+  return request({
+    url: '/User/GetAccountRemarkTypeEnumList',
+    method: 'post',
+    data: ""
+  });
+}

src/components/school/manager/employee-info.vue

+<style>
+  .empInfo_Dialog .drawerTop {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: space-between;
+    background-color: #F0F5FB;
+    padding: 5px 10px;
+    align-items: center;
+  }
+
+  .empInfo_Dialog .classFirst {
+    color: #000000;
+    font-weight: bold;
+  }
+
+  .empInfo_Dialog .className {
+    margin-left: 10px;
+  }
+
+  .empInfo_Dialog .classStatus {
+    padding: 3px 8px;
+    background-color: #c8d7fc;
+    color: #2961FE;
+    font-size: 12px;
+    border-radius: 2px;
+    margin-left: 20px;
+  }
+
+  .empInfo_Dialog .normalName {
+    color: #999999;
+  }
+
+  .empInfo_Dialog .normalInner {
+    color: #111111;
+  }
+
+</style>
+<template>
+  <q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeShenheForm">
+    <q-card style="margin-top:61px;width:800px" class="no-border-radius empInfo_Dialog">
+      <div class="drawerTop">
+        <div style="display:flex;align-items:center;">
+          <q-avatar size="md" v-if="saveObj.UserIcon">
+            <img :src="saveObj.UserIcon" />
+          </q-avatar>
+          <q-avatar size="md" color="teal-10" text-color="white"
+            style="background:#d4dfff;color:#2961FE;font-weight:bold;" v-if="!saveObj.UserIcon">
+            {{saveObj.EmployeeName.substring(0,1)}}</q-avatar>
+          <div class="className">
+            <div class="classFirst">{{saveObj.EmployeeName}}</div>
+          </div>
+        </div>
+      </div>
+      <div style="margin:20px;font-size:12px;">
+        <div class="row wrap ">
+          <div class="col-6">
+            <span class="normalName">公司</span>
+            <span class="normalInner">{{saveObj.SchoolName}}</span>
+          </div>
+          <div class="col-6">
+            <span class="normalName">部门</span>
+            <span class="normalInner"> {{saveObj.DeptName}}</span>
+          </div>
+          <div class="col-6">
+            <span class="normalName">岗位</span>
+            <span class="normalInner">{{saveObj.PostName}}</span>
+          </div>
+          <div class="col-6">
+            <span class="normalName">电话</span>
+            <span class="normalInner">{{saveObj.EmployeeTel}}</span>
+          </div>
+        </div>
+      </div>
+      <q-tabs style="margin-bottom:20px;" v-model="tabCheck" narrow-indicator dense align="left" class="text-primary">
+        <q-tab :ripple="false" name="first" label="行政备注" />
+        <q-tab :ripple="false" name="second" label="详细资料" />
+        <q-tab :ripple="false" name="third" label="日志记录" />
+        <q-tab :ripple="false" name="fourth" label="附件" />
+        <q-tab :ripple="false" name="fifth" label="财务单据" />
+      </q-tabs>
+      <div v-if="tabCheck=='first'" style="margin:0 15px;">
+        <employeeRemark :saveObj="saveObj"></employeeRemark>
+      </div>
+      <div v-if="tabCheck=='second'">
+        <employeeDetails :saveObj="saveObj"></employeeDetails>
+      </div>
+      <div v-if="tabCheck=='third'">
+        <employeeLog :saveObj="saveObj"></employeeLog>
+      </div>
+      <div v-if="tabCheck=='fourth'">
+        <employeeFile :saveObj="saveObj"></employeeFile>
+      </div>
+      <div v-if="tabCheck=='fifth'">
+        <employeeFinace :saveObj="saveObj"></employeeFinace>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+  import employeeDetails from '../manager/employee_details';
+  import employeeRemark from '../manager/employee-remark';
+  import employeeLog from '../manager/employee_log';
+  import employeeFile from '../manager/employee_file';
+  import employeeFinace from '../manager/employee_finace';
+  export default {
+    props: {
+      saveObj: {
+        type: Object,
+        default: null
+      }
+    },
+    components: {
+      employeeDetails,
+      employeeRemark,
+      employeeLog,
+      employeeFile,
+      employeeFinace
+    },
+    data() {
+      return {
+        persistent: true,
+        tabCheck: 'first', //默认选第一个
+        loading: false,
+      }
+    },
+    created() {},
+    mounted() {
+      console.log("aaa", this.saveObj);
+    },
+    methods: {
+      closeShenheForm() {
+        this.persistent = false;
+        this.$emit('close');
+      }
+    },
+  }
+
+</script>

src/components/school/manager/employee-remark.vue

+<template>
+  <div class="EmployeeRemark">
+
+    <q-input filled stack-label maxlength="20" :dense="false" v-model="saveMsg.EmployeeName" ref="EmployeeName"
+      class="col-6 q-pr-lg q-pb-lg" label="备注信息" :rules="[val => !!val || '请填写备注信息']" />
+
+       <q-select filled stack-label option-value="Id" option-label="Name" v-model="objOption.Education"
+            ref="Education" :options="RemarkTypeList" label="学历" :dense="false" class="col-6 q-pr-lg q-pb-lg" emit-value
+            map-options />
+  </div>
+</template>
+
+<script>
+  import {
+    queryRemarkTypeList
+  } from '../../../api/school/index'
+  export default {
+    props: {
+      saveObj: {
+        type: Object,
+        default: null
+      }
+    },
+    name: "EmployeeRemark",
+    data() {
+      return {
+        saveMsg: {
+          EmployeeName: "",
+        },
+        RemarkTypeList: [], //行政备注类型列表
+      }
+    },
+    created() {
+      this.getRemarkType();
+      console.log("aaa", this.saveObj);
+    },
+    mounted() {
+
+    },
+    methods: {
+      //获取行政备注类型列表
+      getRemarkType() {
+        queryRemarkTypeList().then(res => {
+          if (res.Code == 1) {
+            this.RemarkTypeList = res.Data;
+            console.log("this.RemarkTypeList", this.RemarkTypeList);
+          }
+        });
+      }
+    },
+  }
+
+</script>

src/components/school/manager/employee_details.vue

+<template>
+  <div class="EmployeeDetails">
+    详情
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      saveObj: {
+        type: Object,
+        default: null
+      }
+    },
+    name: "EmployeeDetails",
+    data() {
+      return {
+
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+  }
+
+</script>

src/components/school/manager/employee_file.vue

+<template>
+  <div class="EmployeeFile">
+    附件
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      saveObj: {
+        type: Object,
+        default: null
+      }
+    },
+    name: "EmployeeFile",
+    data() {
+      return {
+
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+  }
+
+</script>

src/components/school/manager/employee_finace.vue

+<template>
+  <div class="EmployeeFinace">
+    财务单据
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      saveObj: {
+        type: Object,
+        default: null
+      }
+    },
+    name: "EmployeeFinace",
+    data() {
+      return {
+    
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+  }
+
+</script>

src/components/school/manager/employee_log.vue

+<template>
+  <div class="EmployeeLog">
+    日志
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      saveObj: {
+        type: Object,
+        default: null
+      }
+    },
+    name: "EmployeeLog",
+    data() {
+      return {
+    
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+  }
+
+</script>

src/pages/school/sysuser.vue

@@ -18,8 +18,8 @@
     <div class="page-search row items-center">
       <div class="col row wrap q-mr-lg q-col-gutter-md">
         <div class="col-3">
-          <q-input @input="resetSearch" clearable standout="bg-primary text-white"
-            v-model="msg.EmployeeName" label="员工姓名/账号" maxlength="20" />
+          <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.EmployeeName"
+            label="员工姓名/账号" maxlength="20" />
         </div>
         <div class="col-3">
           <q-select filled stack-label @input="getDepartList(msg.School_Id),resetSearch()" option-value="SId"
@@ -28,13 +28,11 @@
         </div>
         <div class="col-3">
           <selectTree :treeData='DeptList' :defaultArray="returnString" nodeKey="DeptId" :multiple="false"
-            labelKey="DeptName" childrenKey="ChildList" tipText="选择部门" @getChild="getChild"
-            ></selectTree>
+            labelKey="DeptName" childrenKey="ChildList" tipText="选择部门" @getChild="getChild"></selectTree>
         </div>
         <div class="col-3">
           <q-select filled stack-label @input="resetSearch" option-value="PostId" option-label="PostName"
-            v-model="msg.Post_Id" ref="Post_Id" :options="PostList" label="岗位" :dense="false"
-            emit-value map-options />
+            v-model="msg.Post_Id" ref="Post_Id" :options="PostList" label="岗位" :dense="false" emit-value map-options />
         </div>
         <div class="col-3">
           <q-select filled @input="resetSearch" stack-label option-value="Id" option-label="Name"
@@ -57,13 +55,14 @@
                   range-separator="至"  start-placeholder="离职开始日期"  end-placeholder="离职结束日期">
               </el-date-picker>
                </template>
-           </q-field>
+             </q-field>
         </div>
         <div class="col-3 Sysuser_Date">
           <q-field filled class="col-6">
               <template v-slot:control>
-              <el-date-picker v-model="dateListTwo" @change="resetSearch()" format="MM-dd" value-format="yyyy-MM-dd" type="daterange" style="border:none;" 
-                range-separator="至"  start-placeholder="生日开始时间"  end-placeholder="生日结束时间">
+              <el-date-picker v-model="dateListTwo" @change="resetSearch()" format="MM-dd"  value-format="yyyy-MM-dd"
+                 type="daterange"  style="border:none;"   range-separator="至"  start-placeholder="生日开始时间"
+                 end-placeholder="生日结束时间">
               </el-date-picker>  
             </template>
           </q-field>
@@ -102,7 +101,8 @@
         </template>
         <template v-slot:body-cell-EmployeeName="props">
           <q-td :props="props">
-            <div class="text-blue cursor-pointer">{{props.value}}</div>
+            <div class="text-blue cursor-pointer" style="color:#2961FE;margin-left:10px;cursor:pointer;"
+              @click="getEmpInfoInfo(props.row)" title="点击查看详情">{{props.value}}</div>
           </q-td>
         </template>
         <template v-slot:body-cell-StuSex="props">
@@ -164,6 +164,8 @@
       </manager-form>
       <employee-set v-if="isShowEmployeeSet" :seting-obj="setObj" @close="closeSetForm" @success="refreshSetPage">
       </employee-set>
+      <employee-info v-if="isShowEmpInfo" :save-obj="managerOption" @close="closeEmpInfoForm" @success="refreshPage">
+      </employee-info>
     </div>
   </div>
 </template>
@@ -188,6 +190,7 @@
   } from '../../api/system/dept.js'
   import managerForm from '../../components/school/manager/manager-form'
   import employeeSet from '../../components/school/manager/employee-set'
+  import employeeInfo from '../../components/school/manager/employee-info'
   import selectTree from '../../components/common/select-tree'
   export default {
     meta: {
@@ -196,7 +199,8 @@
     components: {
       managerForm,
       selectTree,
-      employeeSet
+      employeeSet,
+      employeeInfo
     },
     data() {
       return {
@@ -287,7 +291,6 @@
         ],
         data: [],
         loading: true,
-
         msg: {
           pageIndex: 1,
           pageSize: 12,
@@ -322,7 +325,8 @@
         setObj: {
           type: 0,
           selected: []
-        }
+        },
+        isShowEmpInfo: false, //是否显示员工信息
       }
     },
     mounted() {
@@ -596,7 +600,20 @@
         if (val) {
           return val.substr(0, 1);
         }
-      }
+      },
+      //显示员工信息弹窗
+      getEmpInfoInfo(obj) {
+        if (obj) {
+          this.managerOption = obj;
+        } else {
+          this.managerOption = null;
+        }
+        this.isShowEmpInfo = true;
+      },
+      //关闭员工信息弹窗
+      closeEmpInfoForm() {
+        this.isShowEmpInfo = false;
+      },
     },
   }