企业管理-员工管理

src/api/company/staff/index.js

@@ -59,3 +59,11 @@ export function getLabels(){
     method: 'get',
   })
 }
+
+// 获取当前登录用户部门下的员工信息
+export function getStaffList(){
+  return request({
+    url: '/company/staff/list',
+    method: 'get'
+  })
+}

src/api/company/staffChange/index.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+// 创建企业管理-员工交接信息
+export function createStaffChange(data) {
+  return request({
+    url: '/company/staffChange/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 获取企业管理-员工交接信息及交接双方信息
+export function getChangeStaff(id) {
+  return request({
+    url: '/company/staffChange/changeItem?id=' + id,
+    method: 'get',
+  })
+}

src/views/company/staff/form/StaffChangeForm.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="app-container">
+    <!-- 对话框 -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%" v-dialogDrag append-to-body>
+      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="120px">
+        <el-form-item label="交出方" prop="name">
+          <el-input disabled v-model="oldStaff.name"/>
+        </el-form-item>
+        <el-form-item label="接收方" prop="newUserId">
+          <el-select
+            v-model="formData.newUserId"
+            placeholder="请选择接收方"
+          >
+            <el-option
+              v-for="(item, index) in newStaff"
+              :key="index"
+              :label="item.name"
+              :value="item.userId"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="附件" prop="fileUrls">
+          <file-upload v-model="formData.fileUrls"></file-upload>
+        </el-form-item>
+        <el-form-item label="交接时间" prop="changeTime">
+          <el-date-picker clearable v-model="formData.changeTime" type="datetime" value-format="timestamp"
+                          placeholder="选择交接时间"
+          />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formData.remark"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as StaffApi from '@/api/company/staff'
+import FileUpload from '@/components/FileUpload'
+import * as StaffChangeApi from '@/api/company/staffChange'
+
+export default {
+  name: 'StaffChangeForm',
+  components: {
+    FileUpload
+  },
+  data() {
+    return {
+      // 弹出层标题
+      dialogTitle: '一键交接员工',
+      // 是否显示弹出层
+      dialogVisible: false,
+      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+      formLoading: false,
+      // 表单参数
+      formData: {
+        fileUrls: undefined,
+        remark: undefined,
+        oldUserId: undefined,
+        newUserId: undefined,
+        changeTime: undefined
+      },
+      // 表单校验
+      formRules: {
+        newUserId: [{ required: true, message: '接收方不能为空', trigger: 'blur' }],
+        changeDate: [{ required: true, message: '接收方不能为空', trigger: 'blur' }]
+      },
+      oldStaff: {
+        name: '',
+        userId: ''
+      },
+      newStaff: {
+        name: '',
+        userId: ''
+      },
+      staffChangList: []
+    }
+  },
+  methods: {
+    /** 获取所有的员工 */
+    async listStaff() {
+      const res = await StaffApi.getStaffList()
+      this.newStaff = res.data.filter(item => item.userId !== this.oldStaff.userId)
+    },
+    /** 打开弹窗 */
+    async open(id) {
+      this.dialogVisible = true
+      this.reset()
+      const res = await StaffApi.getStaff(id)
+      this.oldStaff = res.data
+      this.formData.oldUserId = this.oldStaff.userId
+      await this.listStaff()
+    },
+    /** 提交按钮 */
+    async submitForm() {
+      // 校验主表
+      await this.$refs['formRef'].validate()
+      this.formLoading = true
+      try {
+        await StaffChangeApi.createStaffChange(this.formData)
+        this.$modal.msgSuccess('交接成功')
+        this.dialogVisible = false
+        this.$emit('success')
+      } finally {
+        this.formLoading = false
+      }
+    },
+    /** 表单重置 */
+    reset() {
+      this.formData = {
+        fileUrls: undefined,
+        remark: undefined,
+        oldUserId: undefined,
+        newUserId: undefined
+      }
+      this.resetForm('formRef')
+    }
+  }
+}
+</script>

src/views/company/staff/form/StaffChangeFormData.vue

@@ -0,0 +1,224 @@
+<template>
+  <div id="app-container">
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" v-dialogDrag append-to-body>
+      <el-empty v-if="!formData" description="暂无数据"/>
+      <div v-else>
+        <el-descriptions class="margin-top" title="交出方员工信息" :column="3" border>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-user"></i>
+              员工姓名
+            </template>
+            {{ formData.oldStaff.name }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-star-off"></i>
+              员工工号
+            </template>
+            {{ formData.oldStaff.workNo }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-mobile-phone"></i>
+              员工手机号
+            </template>
+            {{ formData.oldStaff.tel }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i :class="formData.oldStaff.sex == '0' ? 'el-icon-female' : 'el-icon-male'"></i>
+              性别
+            </template>
+            <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="formData.oldStaff.sex"/>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-office-building"></i>
+              家庭住址
+            </template>
+            {{ formData.oldStaff.address }}
+          </el-descriptions-item>
+        </el-descriptions>
+
+        <el-descriptions class="margin-top" title="接收方员工信息" :column="3" border>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-user"></i>
+              员工姓名
+            </template>
+            {{ formData.newStaff.name }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-star-off"></i>
+              员工工号
+            </template>
+            {{ formData.newStaff.workNo }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-mobile-phone"></i>
+              员工手机号
+            </template>
+            {{ formData.newStaff.tel }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i :class="formData.newStaff.sex == '0' ? 'el-icon-female' : 'el-icon-male'"></i>
+              性别
+            </template>
+            <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="formData.newStaff.sex"/>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-office-building"></i>
+              家庭住址
+            </template>
+            {{ formData.newStaff.address }}
+          </el-descriptions-item>
+        </el-descriptions>
+
+        <el-descriptions class="margin-top" title="交接信息" :column="1" border>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-timer"></i>
+              交接时间
+            </template>
+            {{ formData.changeTime }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-chat-dot-square"></i>
+              交接备注
+            </template>
+            {{ formData.remark }}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label">
+              <i class="el-icon-star-off"></i>
+              交接附件
+            </template>
+            <el-card v-for="(file, index) in formData.fileUrls" :key="index" style="margin-bottom: 10px">
+              <div slot="header" class="clearfix">
+                <i :class="getFileIcon(file.fileUrl)"></i>
+                <span>{{ file.fileName }}</span>
+              </div>
+              <div>
+                <a :href="file.fileUrl" download :title="file.fileName" target="_blank">
+                  <el-button type="primary" size="small">
+                    下载
+                  </el-button>
+                </a>
+              </div>
+            </el-card>
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as StaffChangeApi from '@/api/company/staffChange'
+
+export default {
+  name: 'StaffChangeFormData',
+  data() {
+    return {
+      // 弹出层标题
+      dialogTitle: '员工交接记录',
+      // 是否显示弹出层
+      dialogVisible: false,
+      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+      formLoading: false,
+      formData: {
+        oldStaff: {
+          workNo: '',
+          name: '',
+          tel: '',
+          sex: '',
+          address: ''
+        },
+        newStaff: {
+          workNo: '',
+          name: '',
+          tel: '',
+          sex: '',
+          address: ''
+        },
+        changeTime: '',
+        fileUrls: [{
+          fileName: '',
+          fileUrl: ''
+        }],
+        remark: ''
+      }
+    }
+  },
+  methods: {
+    /** 打开弹窗 */
+    async open(id) {
+      this.dialogVisible = true
+      this.reset()
+      const res = await StaffChangeApi.getChangeStaff(id)
+      this.formData = res.data
+      if (!!this.formData) {
+        this.formData.fileUrls = this.formData.fileUrls.split(',').map(item => {
+          return {
+            fileName: item.split('/').pop(),
+            fileUrl: item
+          }
+        })
+      }
+    },
+    /** 表单重置 */
+    reset() {
+      this.formData = {
+        oldStaff: {
+          workNo: '',
+          name: '',
+          tel: '',
+          sex: '',
+          address: ''
+        },
+        newStaff: {
+          workNo: '',
+          name: '',
+          tel: '',
+          sex: '',
+          address: ''
+        },
+        changeTime: '',
+        fileUrls: [{
+          fileName: '',
+          fileUrl: ''
+        }],
+        remark: ''
+      }
+      this.resetForm('formRef')
+    },
+    getFileIcon(url) {
+      // 这个函数用于根据文件类型返回对应的图标类名
+      const fileName = url.split('/').pop()
+      const extension = fileName.split('.').pop().toLowerCase()
+      switch (extension) {
+        case 'doc':
+        case 'docx':
+          return 'el-icon-document'
+        case 'xls':
+        case 'xlsx':
+          return 'el-icon-s-data'
+        case 'pdf':
+          return 'el-icon-document-checked'
+        default:
+          return 'el-icon-folder'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/company/staff/form/StaffForm.vue

@@ -86,20 +86,24 @@
           </el-col>
         </el-row>
         <el-form-item label="技能标签" prop="labelsArray">
-          <el-select v-model="formData.labelsArray" multiple placeholder="请选择技能标签">
+          <el-select
+            style="width: 310px"
+            filterable
+            allow-create
+            v-model="formData.labelsArray" multiple placeholder="请选择技能标签">
             <el-option
-              v-for="item in labelOptions"
+              v-for="(item, index) in labelOptions"
-              :key="item.id"
+              :key="index"
               :label="item.labelName"
-              :value="item.id">
+              :value="item.labelName">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="个人简介">
           <Editor v-model="formData.content" :min-height="192"/>
         </el-form-item>
-        <el-form-item label="附件" prop="">
+        <el-form-item label="附件" prop="fileUrls">
-          <file-upload></file-upload>
+          <file-upload v-model="formData.fileUrls"></file-upload>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -114,7 +118,6 @@
 import * as StaffApi from '@/api/company/staff'
 import Editor from '@/components/Editor'
 import FileUpload from '@/components/FileUpload'
-import { getLabels } from '../../../api/company/staff'
 
 export default {
   name: 'StaffForm',
@@ -148,7 +151,7 @@ export default {
         education: undefined,
         content: undefined,
         uniqueCode: undefined,
-        fileIds: undefined,
+        fileUrls: undefined,
         loginAccount: undefined,
         password: undefined,
         labelsArray: undefined,
@@ -179,13 +182,15 @@ export default {
     async listLabels(){
       try {
         const res = await StaffApi.getLabels();
-        console.log(res.data)
+        this.labelOptions = res.data.map(item => ({
-        this.labelOptions = res.data
+          labelName: item.labelName,
+        }))
       }finally {}
     },
     /** 打开弹窗 */
     async open(id) {
       this.dialogVisible = true
+      this.dialogTitle = id ? "修改员工信息" : "新增员工信息"
       await this.listLabels();
       this.reset()
       // 修改时，设置数据
@@ -194,6 +199,8 @@ export default {
         try {
           const res = await StaffApi.getStaff(id)
           this.formData = res.data
+          this.formData.workDate = new Date(this.formData.workDate)
+          this.formData.joinedDate = new Date(this.formData.joinedDate)
           this.title = '修改企业管理-员工信息'
         } finally {
           this.formLoading = false
@@ -203,7 +210,6 @@ export default {
     },
     /** 提交按钮 */
     async submitForm() {
-      console.log(this.formData)
       // 校验主表
       await this.$refs['formRef'].validate()
       this.formLoading = true

src/views/company/staff/index.vue

@@ -38,15 +38,15 @@
                   @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="工作日期" prop="workDate">
+      <el-form-item label="工作日期" prop="workDateArray">
-        <el-date-picker v-model="queryParams.workDate" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
+        <el-date-picker v-model="queryParams.workDateArray" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
                         type="daterange"
                         range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                         :default-time="['00:00:00', '23:59:59']"
         />
       </el-form-item>
-      <el-form-item label="入职日期" prop="joinedDate">
+      <el-form-item label="入职日期" prop="joinedDateArray">
-        <el-date-picker v-model="queryParams.joinedDate" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
+        <el-date-picker v-model="queryParams.joinedDateArray" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
                         type="daterange"
                         range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                         :default-time="['00:00:00', '23:59:59']"
@@ -79,22 +79,30 @@
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
       <el-table-column label="序号" align="center">
         <template scope="scope">
-          <span>{{scope.$index + 1}}</span>
+          <span>{{ scope.$index + 1 }}</span>
         </template>
       </el-table-column>
       <el-table-column label="工号" align="center" prop="workNo" width="180"/>
       <el-table-column label="姓名" align="center" prop="name" width="180"/>
       <el-table-column label="手机号" align="center" prop="tel" width="180"/>
-      <el-table-column label="性别" align="center" prop="sex" width="180"/>
+      <el-table-column label="性别" align="center" prop="sex" width="180">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex"/>
+        </template>
+      </el-table-column>
       <el-table-column label="家庭住址" align="center" prop="address" width="180"/>
       <el-table-column label="工龄" align="center" prop="workYear" width="180"/>
       <el-table-column label="司龄" align="center" prop="joinedYear" width="180"/>
-      <el-table-column label="学历" align="center" prop="education" width="180"/>
+      <el-table-column label="学历" align="center" prop="education" width="180">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMPANY_STAFF_EDU" :value="scope.row.education"/>
+        </template>
+      </el-table-column>
       <el-table-column label="个人简介" align="center" prop="content" width="180"/>
       <el-table-column label="唯一推广码" align="center" prop="uniqueCode" width="180"/>
       <el-table-column label="工作日期" align="center" prop="workDate" width="180"/>
       <el-table-column label="入职日期" align="center" prop="joinedDate" width="180"/>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"  width="180">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="180">
         <template v-slot="scope">
           <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"
                      v-hasPermi="['company:staff:update']"
@@ -104,6 +112,21 @@
                      v-hasPermi="['company:staff:delete']"
           >删除
           </el-button>
+          <el-dropdown @command="(command) => handleCommand(command, scope.$index, scope.row)"
+                       v-hasPermi="['company:staff:change']"
+          >
+            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="handleStaffChange" size="mini" type="text" icon="el-icon-setting"
+                                v-hasPermi="['company:staff:change']"
+              >一键交接
+              </el-dropdown-item>
+              <el-dropdown-item command="handleStaffChangeData" size="mini" type="text" icon="el-icon-search"
+                                v-hasPermi="['company:staff:query']"
+              >查看交接记录
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
         </template>
       </el-table-column>
     </el-table>
@@ -113,17 +136,23 @@
     />
     <!-- 对话框(添加 / 修改) -->
     <StaffForm ref="formRef" @success="getList"/>
+    <StaffChangeForm ref="staffChangeRef" @success="getList"/>
+    <StaffChangeFormData ref="staffChangeDataRef" @success="getList" />
   </div>
 </template>
 
 <script>
 import * as StaffApi from '@/api/company/staff'
-import StaffForm from './StaffForm.vue'
+import StaffForm from './form/StaffForm.vue'
+import StaffChangeForm from './form/StaffChangeForm'
+import StaffChangeFormData from './form/StaffChangeFormData'
 
 export default {
   name: 'Staff',
   components: {
-    StaffForm
+    StaffForm,
+    StaffChangeForm,
+    StaffChangeFormData
   },
   data() {
     return {
@@ -155,15 +184,14 @@ export default {
         tel: null,
         sex: null,
         address: null,
-        workDate: [],
+        workDateArray: [],
         workYear: null,
-        joinedDate: [],
+        joinedDateArray: [],
         joinedYear: null,
         education: null,
         content: null,
         uniqueCode: null,
-        fileIds: null,
+        fileIds: null
-        createTime: []
       }
     }
   },
@@ -171,12 +199,34 @@ export default {
     this.getList()
   },
   methods: {
+    // 更多操作
+    handleCommand(command, index, row) {
+      switch (command) {
+        case 'handleStaffChange':
+          //资质管理
+          this.handleStaffChange(row)
+          break
+        case 'handleStaffChangeData':
+          this.handleStaffChangeData(row)
+          break
+        default:
+          break
+      }
+    },
+    /** 一键交接 */
+    handleStaffChange(row) {
+      this.$refs['staffChangeRef'].open(row.id)
+    },
+    /** 查看交接记录 */
+    handleStaffChangeData(row) {
+      this.$refs['staffChangeDataRef'].open(row.id)
+    },
     /** 查询列表 */
     async getList() {
       try {
         this.loading = true
         const res = await StaffApi.getStaffPage(this.queryParams)
-        this.list = res.data.list
+        this.list = res.data.records
         this.total = res.data.total
       } finally {
         this.loading = false
@@ -198,8 +248,9 @@ export default {
     },
     /** 删除按钮操作 */
     async handleDelete(row) {
+      const workNo = row.workNo
       const id = row.id
-      await this.$modal.confirm('是否确认删除企业管理-员工信息编号为"' + id + '"的数据项?')
+      await this.$modal.confirm('是否确认删除员工工号为"' + workNo + '"的数据项?')
       try {
         await StaffApi.deleteStaff(id)
         await this.getList()