人员管理

This commit is contained in:
cool 2024-03-22 11:03:35 +08:00
parent 82c600a114
commit 19c6d245b9
7 changed files with 756 additions and 2 deletions

View File

@ -70,7 +70,7 @@ export function exportProject(data) {
url: '/system/sys/export/exportProData',
method: 'get',
responseType: 'blob',
data
params: data
})
}

View File

@ -0,0 +1,84 @@
import request from '@/utils/request'
// 查询人员列表
export function getStaffList(data) {
return request({
url: '/background/back/personnel/getHumanLists',
method: 'get',
params: data
})
}
// 新增人员
export function addStaffItem(data) {
return request({
url: '/background/back/personnel/addPersonnel',
method: 'post',
data
})
}
// 编辑人员
export function updateStaffItem(data) {
return request({
url: '/background/back/personnel/editPersonnel',
method: 'post',
data
})
}
// 删除人员
export function deleteStaffItem(data) {
return request({
url: '/background/back/personnel/delPersonnel',
method: 'post',
data
})
}
// 查看人员详情
export function getTeamStaffDetail(data) {
return request({
url: '/background/back/personnel/getPersonnelById',
method: 'get',
params: data
})
}
// 导出人员
export function exportStaff(data) {
return request({
url: '/background/back/export/exportTeamUserData',
method: 'get',
responseType: 'blob',
params: data
})
}
// 人员照片预览
export function getStaffPhoto(data) {
return request({
url: '/background/back/personnel/viewPersonnelFile',
method: 'get',
params: data
})
}
// 人员入场记录
export function getStaffAccessRecord(data) {
return request({
url: '/background/back/personnel/getPersonnelAccessLists',
method: 'get',
params: data
})
}
// 导出人员入场记录
export function exportStaffAccessRecord(data) {
return request({
url: '/background/back/export/exportUserAccessData',
method: 'get',
responseType: 'blob',
params: data
})
}

View File

@ -51,7 +51,7 @@ export function exportTeam(data) {
url: '/background/back/export/exportTeamData',
method: 'get',
responseType: 'blob',
data
params: data
})
}

View File

@ -0,0 +1,55 @@
<template>
<el-select v-model="currentOption" placeholder="请选择" style="width: 100%" @change="handleChange">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
<script>
import { getDictSelectList } from '@/api/public'
export default {
name: 'AccessTypeSelect',
props: ['bindValue', 'disabled'],
data() {
return {
options: []
}
},
computed: {
currentOption: {
get() {
return this.bindValue
},
set(val) {
this.$emit('update:bindValue', val)
}
}
},
mounted() {
this.getList()
},
methods: {
getList() {
getDictSelectList(1000).then(res => {
this.options = res.data.map(item => {
const { id, name } = item
return {
value: id,
label: name
}
})
})
},
handleChange(value) {
}
}
}
</script>
<style scoped lang="less"></style>

View File

@ -0,0 +1,55 @@
<template>
<el-select v-model="currentOption" placeholder="请选择" style="width: 100%" @change="handleChange">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
<script>
import { getDictSelectList } from '@/api/public'
export default {
name: 'ProfessionSelect',
props: ['bindValue', 'disabled'],
data() {
return {
options: []
}
},
computed: {
currentOption: {
get() {
return this.bindValue
},
set(val) {
this.$emit('update:bindValue', val)
}
}
},
mounted() {
this.getList()
},
methods: {
getList() {
getDictSelectList(1000).then(res => {
this.options = res.data.map(item => {
const { id, name } = item
return {
value: id,
label: name
}
})
})
},
handleChange(value) {
}
}
}
</script>
<style scoped lang="less"></style>

View File

@ -0,0 +1,55 @@
<template>
<el-select v-model="currentOption" placeholder="请选择" style="width: 100%" @change="handleChange">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
<script>
import { getQualityTeamList } from '@/api/basic/quality'
export default {
name: 'TeamSelect',
props: ['bindValue', 'disabled'],
data() {
return {
options: []
}
},
computed: {
currentOption: {
get() {
return this.bindValue
},
set(val) {
this.$emit('update:bindValue', val)
}
}
},
mounted() {
this.getList()
},
methods: {
getList() {
getQualityTeamList(600).then(res => {
this.options = res.data.map(item => {
const { id, name } = item
return {
value: id,
label: name
}
})
})
},
handleChange(value) {
}
}
}
</script>
<style scoped lang="less"></style>

View File

@ -0,0 +1,505 @@
<template>
<div class="app-container">
<div class="filter-container">
<ProjectSelect :bind-value.sync="listQuery.bidCode" class="filter-item" style="width: 200px" />
<el-input
v-model="listQuery.userName"
placeholder="人员姓名"
style="width: 200px"
class="filter-item ml-20"
:maxlength="30"
@keyup.enter.native="handleFilter"
/>
<el-button
style="margin-left: 40px"
class="filter-item"
type="primary"
@click="handleFilter"
>
查询
</el-button>
<el-button class="filter-item" style="margin-left: 10px" type="primary" @click="handleCreate">
新增
</el-button>
<el-button class="filter-item" style="margin-left: 10px" type="primary" @click="handleExport">
导出
</el-button>
</div>
<el-table
:key="tableKey"
v-loading="listLoading"
:data="list"
border
fit
highlight-current-row
style="width: 100%"
:max-height="tableHeight"
>
<el-table-column label="序号" align="center" width="80" type="index">
<template scope="scope">
<span>{{ (listQuery.pageNum - 1) * 10 + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="姓名" align="center" prop="userName" />
<el-table-column label="性别" align="center" prop="sex" />
<el-table-column label="工种" align="center" prop="userType" />
<el-table-column label="性别" align="center" prop="sex" />
<el-table-column label="年龄" align="center" prop="age" />
<el-table-column label="状态" align="center" prop="status" />
<el-table-column label="班组名称" align="center" prop="teamName" />
<el-table-column label="班组长" align="center" prop="teamLeader" />
<el-table-column label="所属工程" align="center" prop="proName" />
<!-- <el-table-column label="身份证号" align="center" prop="idNumber" />-->
<!-- <el-table-column label="电话" align="center" prop="phone" />-->
<el-table-column label="人员照片" align="center" prop="photo">
<template slot-scope="{ row }">
<el-button type="text" size="mini" @click="handleViewImage(row)">查看</el-button>
<el-image
v-show="false"
ref="imageView"
style="width: 0; height: 0;"
:src="null"
:preview-src-list="currentImageViewList"
/>
</template>
</el-table-column>
<el-table-column label="进出场记录" align="center" prop="accessRecord">
<template slot-scope="{ row }">
<el-button type="text" size="mini" @click="handleViewRecord(row)">查看</el-button>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
<template slot-scope="{ row }">
<el-button type="text" size="mini" @click="handleUpdate(row)">编辑</el-button>
<el-button type="text" size="mini" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="listQuery.pageNum"
:limit.sync="listQuery.pageSize"
@pagination="getList"
/>
<!-- 编辑模态框-->
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="630px" @closed="handleClosedModal">
<el-form
ref="dataForm"
:rules="rules"
:model="temp"
label-position="right"
label-width="120px"
>
<el-form-item label="所属班组:" prop="teamId">
<TeamSelect :bind-value.sync="temp.teamId" />
</el-form-item>
<el-form-item label="姓名:" prop="userName">
<el-input v-model="temp.userName" placeholder="姓名" :maxlength="50" />
</el-form-item>
<!-- <el-form-item label="性别:" prop="sex">-->
<!-- <el-input v-model="temp.sex" placeholder="性别" :maxlength="50" />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="年龄:" prop="age">-->
<!-- <el-input v-model="temp.age" placeholder="年龄" :maxlength="50" />-->
<!-- </el-form-item>-->
<el-form-item label="身份证号:" prop="idNumber">
<el-input v-model="temp.idNumber" placeholder="身份证号" :maxlength="50" />
</el-form-item>
<el-form-item label="手机号:" prop="phone">
<el-input v-model="temp.phone" placeholder="手机号" :maxlength="50" />
</el-form-item>
<el-form-item label="工种:" prop="userType">
<ProfessionSelect :bind-value.sync="temp.userType" />
</el-form-item>
<el-form-item label="照片:" prop="imageList">
<el-upload
ref="pictureUpload"
action="#"
list-type="picture-card"
:auto-upload="false"
:limit="imageUploadLimit"
:file-list="imageList"
:on-change="handleImageChange"
>
<i slot="default" class="el-icon-plus" />
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url"
>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-delete"
@click="handleRemoveImageItem(file)"
>
<i class="el-icon-delete" />
</span>
</span>
</div>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false"> 关闭 </el-button>
<el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
提交
</el-button>
</div>
</el-dialog>
<!-- 查看记录模态框-->
<el-dialog title="进出场记录" :visible.sync="dialogFormVisible2" width="80%" append-to-body custom-class="custom-modal">
<div class="app-container">
<div class="filter-container">
<el-date-picker
v-model="listQuery2.time"
style="width: 500px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
<el-button
style="margin-left: 40px"
class="filter-item"
type="primary"
@click="handleFilter2"
>
查询
</el-button>
<el-button
style="margin-left: 10px"
class="filter-item"
type="primary"
@click="handleExport2"
>
导出
</el-button>
</div>
<el-table
:key="tableKey2"
v-loading="listLoading"
:data="list2"
border
fit
highlight-current-row
style="width: 100%"
:max-height="tableHeight"
>
<el-table-column label="序号" align="center" width="80" type="index">
<template scope="scope">
<span>{{ (listQuery2.pageNum - 1) * 10 + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="姓名" align="center" prop="userName" />
<el-table-column label="出入类型" align="center" prop="accessType" />
<el-table-column label="出入时间" align="center" prop="accessTime" />
<el-table-column label="身份证号" align="center" prop="idNumber" />
<el-table-column label="手机" align="center" prop="userPhone" />
</el-table>
<pagination
v-show="total2 > 0"
:total="total2"
:page.sync="listQuery2.pageNum"
:limit.sync="listQuery2.pageSize"
@pagination="getList2"
/>
</div>
</el-dialog>
</div>
</template>
<script>
import Pagination from '@/components/Pagination'
import _ from 'lodash/fp'
import { getQualityTeamList } from '@/api/basic/quality'
import { downloadFile } from '@/utils/download'
import ProjectSelect from '@/views/basic/sideband/components/ProjectSelect.vue'
import TeamSelect from '@/views/man-car/staff/components/TeamSelect.vue'
import {
addStaffItem,
deleteStaffItem,
exportStaff,
getStaffList,
getTeamStaffDetail,
updateStaffItem,
getStaffPhoto, getStaffAccessRecord, exportStaffAccessRecord
} from '@/api/car-man/staff'
import ProfessionSelect from '@/views/man-car/staff/components/ProfessionSelect.vue'
const defaultTmp = {
teamId: '',
userName: '',
idNumber: '',
phone: '',
userType: '',
userId: ''
}
export default {
components: { ProfessionSelect, TeamSelect, ProjectSelect, Pagination },
data() {
return {
tableKey: 0,
tableKey2: 1,
list: [],
list2: [],
teamList: [],
total: 0,
total2: 0,
imageList: [],
delFiles: [],
currentImageViewList: [],
imageUploadLimit: 5,
listLoading: false,
listQuery: {
pageNum: 1,
pageSize: 10,
userName: '',
bidCode: ''
},
listQuery2: {
pageNum: 1,
pageSize: 10,
id: '',
time: []
},
tableHeight: 650,
showReviewer: false,
temp: _.cloneDeep(defaultTmp),
dialogFormVisible: false,
dialogFormVisible2: false,
dialogStatus: '',
downloadLoading: false,
textMap: {
update: '编辑',
create: '新增'
},
dialogPvVisible: false,
rules: {
teamId: [{ required: true, message: '不能为空', trigger: 'change' }],
teamName: [{ required: true, message: '不能为空', trigger: 'blur' }],
teamLeader: [{ required: true, message: '不能为空', trigger: 'blur' }],
teamLeaderPhone: [{ required: true, message: '不能为空', trigger: 'blur' }],
score: [{ required: true, message: '不能为空', trigger: 'change' }],
content: [{ required: true, message: '不能为空', trigger: 'blur' }]
}
}
},
created() {
this.getList()
this.getTeamList()
},
methods: {
//
getTeamList() {
getQualityTeamList().then(res => {
this.teamList = res.data
})
},
//
handleViewImage(row) {
getStaffPhoto({ id: row.userId }).then(res => {
this.currentImageViewList = res.data.map(item => {
const { base64Url } = item
return base64Url
})
this.$refs.imageView.showViewer = true
})
},
//
handleViewRecord(row) {
this.dialogFormVisible2 = true
this.listQuery2.id = row.userId
this.getList2()
},
//
handleExport() {
exportStaff().then(res => {
downloadFile({ fileName: '人员详情.xlsx', fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
})
},
//
handleExport2() {
exportStaffAccessRecord(this.listQuery2).then(res => {
downloadFile({ fileName: '人员入场记录.xlsx', fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
})
},
getList() {
this.listLoading = true
getStaffList(this.listQuery).then((response) => {
this.list = response.rows.map(item => {
return item
})
this.total = response.total
this.listLoading = false
})
},
getList2() {
this.listLoading = true
this.listQuery2.time = this.listQuery2.time.join(' - ')
console.log(this.listQuery2)
getStaffAccessRecord(this.listQuery2).then((response) => {
this.list2 = response.rows.map(item => {
return item
})
this.total2 = response.total
this.listLoading = false
})
},
//
handleFilter() {
this.listQuery.pageNum = 1
this.getList()
},
handleFilter2() {
this.listQuery2.pageNum = 1
this.getList2()
},
//
handleCreate() {
this.dialogStatus = 'create'
this.dialogFormVisible = true
},
getFileData() {
const file = []
this.imageList.forEach(item => {
if (item?.hasOwnProperty('raw')) {
file.push(item.raw)
}
})
return { file }
},
createData() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
const reqData = new FormData()
reqData.append('params', JSON.stringify(this.temp))
const { file } = this.getFileData()
file.forEach(item => {
reqData.append('file', item)
})
addStaffItem(reqData).then((response) => {
this.$message({
showClose: true,
message: response.msg,
type: 'success',
duration: 2000
})
this.getList()
this.dialogFormVisible = false
}).finally(() => {
// this.dialogFormVisible = false
})
}
})
},
//
handleUpdate(row) {
getTeamStaffDetail({ id: row.userId }).then((res) => {
this.temp = Object.assign({}, res.data)
const { fileData } = res.data
const imageList = []
this.delFiles = []
if (fileData?.length) {
fileData.forEach(item => {
const { base64Url, fileId } = item
imageList.push({
name: fileId,
url: base64Url
})
})
}
this.imageList = imageList
})
this.dialogStatus = 'update'
this.dialogFormVisible = true
},
updateData() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
const reqData = new FormData()
const reqD = _.cloneDeep(this.temp)
reqD['delFiles'] = this.delFiles.join(',')
delete reqD['fileData']
reqData.append('params', JSON.stringify(reqD))
const { file } = this.getFileData()
file.forEach(item => {
reqData.append('file', item)
})
updateStaffItem(reqData).then((response) => {
this.$message({
showClose: true,
message: response.msg,
type: 'success',
duration: 2000
})
this.getList()
}).finally(() => {
this.dialogFormVisible = false
})
}
})
},
//
handleDelete(row, index) {
this.$confirm(`确定要删除该数据吗?`, {
type: 'warning',
title: '操作提示',
beforeClose: async(action, instance, done) => {
if (action === 'confirm') {
deleteStaffItem({ id: row.userId }).then((response) => {
done()
this.$message({
showClose: true,
message: response.msg,
type: 'success',
duration: 2000
})
this.getList()
})
} else {
done()
}
}
})
},
handleClosedModal() {
this.$refs['dataForm'].resetFields()
this.temp = _.cloneDeep(defaultTmp)
this.imageList = []
this.delFiles = []
},
handleValidateField(name, type) {
this.$refs[name].validateField(type)
},
handleImageChange(file, fileList) {
this.imageList = fileList
this.handleValidateField('dataForm', 'imageList')
},
handleRemoveImageItem(file) {
if (!file?.hasOwnProperty('raw')) {
this.delFiles.push(file.name)
}
const uploadFiles = this.$refs.pictureUpload.uploadFiles
for (const i in uploadFiles) {
if (file.url === uploadFiles[i].url) {
uploadFiles.splice(i, 1)
}
}
this.imageList = uploadFiles
this.handleValidateField('dataForm', 'imageList')
}
}
}
</script>