人员出入场接口调试
This commit is contained in:
BianLzhaoMin
parent
e4aa8c9acd
commit
b4a58f3e08
|
|
@ -24,3 +24,17 @@ export const getBelongToBdAPI = () => {
|
|||
method: 'post',
|
||||
})
|
||||
}
|
||||
// 获取班组
|
||||
export const getGroupListAPI = () => {
|
||||
return request({
|
||||
url: '/smart-site/ttSysTeam/querySelected',
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
// 获取单位
|
||||
export const getCompanyListAPI = () => {
|
||||
return request({
|
||||
url: '/smart-site/unit/querySelected',
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,242 +1,413 @@
|
|||
<template>
|
||||
<!-- 新增修改弹框 -->
|
||||
<div>
|
||||
<el-row :gutter="50">
|
||||
<el-col :span="12">
|
||||
<!-- 新增修改弹框 -->
|
||||
<div>
|
||||
<el-form label-width="auto" :model="addOrEditForm" :rules="formRules" ref="addOrEditFormRef">
|
||||
<el-form-item label="姓名：" prop="userName">
|
||||
<el-input
|
||||
v-model="addOrEditForm.userName"
|
||||
clearable
|
||||
placeholder="请输入姓名"
|
||||
maxlength="30"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号：" prop="idCar">
|
||||
<el-input
|
||||
v-model="addOrEditForm.idCar"
|
||||
clearable
|
||||
placeholder="请输入身份证号"
|
||||
maxlength="18"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="入场工程：" prop="unitId">
|
||||
<el-select v-model="addOrEditForm.unitId" placeholder="请选择入场工程" style="width: 100%">
|
||||
<el-option v-for="item in unitList" :key="item.id" :label="item.unitName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式：" prop="userPhone">
|
||||
<el-input
|
||||
v-model="addOrEditForm.userPhone"
|
||||
placeholder="请输入联系方式"
|
||||
clearable
|
||||
maxlength="11"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="工种/岗位：" prop="workType">
|
||||
<el-input
|
||||
v-model="addOrEditForm.workType"
|
||||
placeholder="请输入工种/岗位"
|
||||
clearable
|
||||
maxlength="30"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="民族：" prop="nationality">
|
||||
<el-input
|
||||
v-model="addOrEditForm.nationality"
|
||||
placeholder="请输入民族"
|
||||
clearable
|
||||
maxlength="30"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否关键人员：" prop="keyPersonnel">
|
||||
<el-radio-group v-model="addOrEditForm.keyPersonnel">
|
||||
<el-radio-button label="1">是</el-radio-button>
|
||||
<el-radio-button label="0">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-col :span="12" class="dialog-header-btn">
|
||||
<el-upload
|
||||
:headers="headers"
|
||||
:action="uploadFileUrl"
|
||||
accept="image/*"
|
||||
:limit="1"
|
||||
:file-list="facePhotoList"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="handleSuccess"
|
||||
>
|
||||
<div slot="tip" class="el-upload__tip" style="color: #c0c4cc; font-size: 15px">上传人脸照片</div>
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="姓名：" prop="userName">
|
||||
<el-input
|
||||
v-model="addOrEditForm.userName"
|
||||
clearable
|
||||
placeholder="请输入姓名"
|
||||
maxlength="30"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式：" prop="userPhone">
|
||||
<el-input
|
||||
v-model="addOrEditForm.userPhone"
|
||||
placeholder="请输入联系方式"
|
||||
clearable
|
||||
maxlength="11"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号：" prop="idCar">
|
||||
<el-input
|
||||
v-model="addOrEditForm.idCar"
|
||||
clearable
|
||||
placeholder="请输入身份证号"
|
||||
maxlength="18"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位：" prop="unitId">
|
||||
<el-select placeholder="请选择单位" style="width: 100%" v-model="addOrEditForm.unitId">
|
||||
<el-option v-for="item in companyList" :key="item.id" :label="item.unitName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="班组：" prop="teamId">
|
||||
<el-select placeholder="请选择班组" style="width: 100%" v-model="addOrEditForm.teamId">
|
||||
<el-option v-for="item in groupList" :key="item.id" :label="item.teamName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
|
||||
<img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
<el-form-item label="工种：" prop="workType">
|
||||
<el-select placeholder="请选择工种" style="width: 100%" v-model="addOrEditForm.workType">
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="item.value"
|
||||
v-for="item in dict.type.work_type"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="人员状态：" prop="status">
|
||||
<el-select placeholder="请选择人员状态" style="width: 100%" v-model="addOrEditForm.status">
|
||||
<el-option label="在场" value="0" />
|
||||
<el-option label="休息" value="1" />
|
||||
<el-option label="离场" value="2" />
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="性别：" prop="sex">
|
||||
<el-select placeholder="请选择性别" style="width: 100%" v-model="addOrEditForm.sex">
|
||||
<el-option label="男" value="1" />
|
||||
<el-option label="女" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="年龄：" prop="age">
|
||||
<el-input clearable placeholder="请输入年龄" style="width: 100%" v-model="addOrEditForm.age" />
|
||||
</el-form-item>
|
||||
<el-form-item label="人脸照片：" prop="carImage">
|
||||
<!-- <el-upload
|
||||
:headers="headers"
|
||||
:action="uploadFileUrl"
|
||||
accept="image/*"
|
||||
:limit="1"
|
||||
:file-list="addOrEditForm.fileList"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-exceed="handleExceed"
|
||||
:on-success="handleSuccess"
|
||||
>
|
||||
<div slot="tip" class="el-upload__tip" style="color: #c0c4cc; font-size: 15px">上传人脸照片</div>
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload> -->
|
||||
<el-upload
|
||||
:limit="1"
|
||||
:action="uploadFileUrl"
|
||||
list-type="picture-card"
|
||||
:file-list="addOrEditForm.fileList"
|
||||
:headers="headers"
|
||||
:on-remove="handleRemove"
|
||||
:on-preview="handlePreview"
|
||||
:on-success="handleSuccess"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:show-file-list="true"
|
||||
:on-exceed="handleExceed"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
<div>
|
||||
1、上传图片文件格式支持PNG、JPG、JPEG； <br />
|
||||
2、图片大小不超过10MB； <br />
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="岗位：" prop="postUnit">
|
||||
<el-select placeholder="请选择岗位" style="width: 100%" v-model="addOrEditForm.postUnit">
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="item.value"
|
||||
v-for="item in dict.type.post_type"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="入场工程：" prop="proId">
|
||||
<el-select v-model="addOrEditForm.proId" placeholder="请选择入场工程" style="width: 100%">
|
||||
<el-option v-for="item in unitList" :key="item.id" :label="item.unitName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="民族：" prop="nationality">
|
||||
<el-input
|
||||
v-model="addOrEditForm.nationality"
|
||||
placeholder="请输入民族"
|
||||
clearable
|
||||
maxlength="30"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址：" prop="address">
|
||||
<el-input
|
||||
v-model="addOrEditForm.address"
|
||||
placeholder="请输入地址"
|
||||
clearable
|
||||
maxlength="30"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="是否关键人员：" prop="keyPersonnel">
|
||||
<el-radio-group v-model="addOrEditForm.keyPersonnel">
|
||||
<el-radio-button label="1">是</el-radio-button>
|
||||
<el-radio-button label="0">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
|
||||
<el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
|
||||
<img :src="previewUrl" style="display: block; max-width: 100%; margin: 0 auto" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getToken } from '@/utils/auth'
|
||||
import { getGroupListAPI, getCompanyListAPI } from '@/api/common.js'
|
||||
import {
|
||||
addTtSysUser,
|
||||
updateTtSysUserApi,
|
||||
queryUnitListAllApi,
|
||||
getTtSysUserByIdApi,
|
||||
addTtSysUser,
|
||||
updateTtSysUserApi,
|
||||
queryUnitListAllApi,
|
||||
getTtSysUserByIdApi,
|
||||
} from '@/api/personnel-manage/index.js'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
dicts: ['post_type', 'work_type'],
|
||||
props: {
|
||||
rowData: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dialogImageUrl: '',
|
||||
uploadFileUrl: process.env.VUE_APP_BASE_API + '/file/upload',
|
||||
headers: {
|
||||
Authorization: 'Bearer ' + getToken(),
|
||||
},
|
||||
row: {},
|
||||
// 新增或修改接口
|
||||
addOrEditForm: {
|
||||
userName: '', // 姓名
|
||||
idCar: '', // 身份证号
|
||||
unitId: '', // 入场工程
|
||||
userPhone: '', // 联系方式
|
||||
workType: '', // 工种/岗位
|
||||
nationality: '', // 民族
|
||||
keyPersonnel: '0', // 是否关键人员
|
||||
photos: '', // 人脸照片
|
||||
},
|
||||
facePhotoList: [], // 人脸照片列表
|
||||
// 工程-下拉
|
||||
unitList: [],
|
||||
// 表单校验规则
|
||||
formRules: {
|
||||
userName: [{ required: true, message: '请输入班组名称', trigger: 'blur' }],
|
||||
idCar: [
|
||||
{ required: true, message: '请输入身份证号', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
|
||||
message: '请输入正确的身份证号',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
unitId: [{ required: true, message: '请选择入场工程', trigger: 'change' }],
|
||||
userPhone: [
|
||||
{ required: true, message: '请输入联系方式', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
|
||||
message: '请输入正确的手机号',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
workType: [{ required: true, message: '请输入工种/岗位', trigger: 'blur' }],
|
||||
keyPersonnel: [{ required: true, message: '请选择是否关键人员', trigger: 'change' }],
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.row = this.rowData
|
||||
this.getProjectListAll()
|
||||
if (!this.row.isAdd) {
|
||||
this.getDetail()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取工程下拉
|
||||
async getProjectListAll() {
|
||||
try {
|
||||
const res = await queryUnitListAllApi()
|
||||
console.log('🚀 ~ getProjectListAll ~ res:', res)
|
||||
if (res.code === 200) {
|
||||
this.unitList = res.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('🚀 ~ getProjectListAll ~ error:', error)
|
||||
}
|
||||
},
|
||||
// 编辑-详情
|
||||
async getDetail() {
|
||||
try {
|
||||
const res = await getTtSysUserByIdApi({ id: this.row.id })
|
||||
console.log('🚀 ~ getDetail ~ res:', res)
|
||||
const location = window.location.origin
|
||||
if (res.code === 200) {
|
||||
this.addOrEditForm = res.data
|
||||
this.facePhotoList = [
|
||||
{
|
||||
name: res.data.photos,
|
||||
url: location + '/statics' + res.data.photos,
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dialogImageUrl: '',
|
||||
uploadFileUrl: process.env.VUE_APP_BASE_API + '/file/upload',
|
||||
headers: {
|
||||
Authorization: 'Bearer ' + getToken(),
|
||||
},
|
||||
]
|
||||
fileType: ['png', 'jpg', 'jpeg'],
|
||||
previewUrl: '',
|
||||
row: {},
|
||||
// 新增或修改接口
|
||||
addOrEditForm: {
|
||||
userName: '', // 姓名
|
||||
userPhone: '', // 联系方式
|
||||
idCar: '', // 身份证号
|
||||
teamId: '', // 班组
|
||||
unitId: '', // 单位
|
||||
workType: '', // 工种
|
||||
sex: '', // 性别
|
||||
nationality: '', // 民族
|
||||
age: '', // 年龄
|
||||
postUnit: '', //岗位
|
||||
proId: '', // 入场工程
|
||||
carImage: '', // 人脸照片
|
||||
fileList: [],
|
||||
address: '',
|
||||
status: '', // 人员状态/
|
||||
},
|
||||
facePhotoList: [], // 人脸照片列表
|
||||
// 工程-下拉
|
||||
unitList: [],
|
||||
// 表单校验规则
|
||||
formRules: {
|
||||
userName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
||||
idCar: [
|
||||
{ required: true, message: '请输入身份证号', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
|
||||
message: '请输入正确的身份证号',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
unitId: [{ required: true, message: '请选择单位', trigger: 'change' }],
|
||||
teamId: [{ required: true, message: '请选择班组', trigger: 'change' }],
|
||||
status: [{ required: true, message: '请选择人员状态', trigger: 'change' }],
|
||||
sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
|
||||
// nationality: [{ required: true, message: '请输入民族', trigger: 'blur' }],
|
||||
age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
|
||||
userPhone: [
|
||||
{ required: true, message: '请输入联系方式', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
|
||||
message: '请输入正确的手机号',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
workType: [{ required: true, message: '请选择工种', trigger: 'change' }],
|
||||
keyPersonnel: [{ required: true, message: '请选择是否关键人员', trigger: 'change' }],
|
||||
carImage: [{ required: true, message: '请上传人脸图片', trigger: 'change' }],
|
||||
},
|
||||
|
||||
// 班组
|
||||
groupList: [],
|
||||
// 单位
|
||||
companyList: [],
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('🚀 ~ getDetail ~ error:', error)
|
||||
}
|
||||
},
|
||||
handleEdit(row) {
|
||||
console.log('🚀 ~ handleEdit ~ :', row)
|
||||
created() {
|
||||
this.row = this.rowData
|
||||
this.getProjectListAll()
|
||||
if (!this.row.isAdd) {
|
||||
this.getDetail()
|
||||
}
|
||||
|
||||
this.getGroupAndCompanyListData()
|
||||
},
|
||||
handleExceed(file) {
|
||||
// 超过数量
|
||||
this.$message.error('只能上传一张图片')
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList)
|
||||
this.addOrEditForm.photos = ''
|
||||
this.facePhotoList = []
|
||||
},
|
||||
handlePictureCardPreview(file) {
|
||||
console.log('🚀 ~ handlePictureCardPreview ~ file:', file)
|
||||
// 预览
|
||||
this.dialogImageUrl = file.url
|
||||
this.dialogVisible = true
|
||||
},
|
||||
handleBeforeUpload(file) {},
|
||||
handleSuccess(res, file, fileList) {
|
||||
this.facePhotoList = fileList
|
||||
if (res.code === 200) {
|
||||
this.addOrEditForm.photos = res.data.name
|
||||
}
|
||||
},
|
||||
// 表单提交
|
||||
onSubmitForm() {
|
||||
this.$refs.addOrEditFormRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
console.log('🚀 ~ onSubmitForm ~ params:', this.addOrEditForm)
|
||||
if (this.row.isAdd) {
|
||||
addTtSysUser(this.addOrEditForm).then((res) => {
|
||||
this.$emit('closeDialog')
|
||||
})
|
||||
} else {
|
||||
this.addOrEditForm.status = 0
|
||||
updateTtSysUserApi(this.addOrEditForm).then((res) => {
|
||||
this.$emit('closeDialog')
|
||||
})
|
||||
methods: {
|
||||
// 获取工程下拉
|
||||
async getProjectListAll() {
|
||||
try {
|
||||
const res = await queryUnitListAllApi()
|
||||
console.log('🚀 ~ getProjectListAll ~ res:', res)
|
||||
if (res.code === 200) {
|
||||
this.unitList = res.data
|
||||
this.companyList = res.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('🚀 ~ getProjectListAll ~ error:', error)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('🚀 ~ onSubmitForm ~ error:', error)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 编辑-详情
|
||||
async getDetail() {
|
||||
try {
|
||||
const res = await getTtSysUserByIdApi({ id: this.row.id })
|
||||
console.log('🚀 ~ getDetail ~ res:', res)
|
||||
const location = window.location.origin
|
||||
if (res.code === 200) {
|
||||
this.addOrEditForm = res.data
|
||||
this.addOrEditForm.fileList = [
|
||||
{
|
||||
name: res.data.photos,
|
||||
url: location + '/statics' + res.data.carImage,
|
||||
},
|
||||
]
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('🚀 ~ getDetail ~ error:', error)
|
||||
}
|
||||
},
|
||||
handleEdit(row) {
|
||||
console.log('🚀 ~ handleEdit ~ :', row)
|
||||
},
|
||||
handleExceed(file) {
|
||||
// 超过数量
|
||||
this.$modal.msgError(`上传的人脸图片数量不能超过 1 个`)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
this.addOrEditForm.fileList = this.addOrEditForm.fileList.filter((item) => item.uid !== file.uid)
|
||||
this.addOrEditForm.carImage = ''
|
||||
},
|
||||
// handlePictureCardPreview(file) {
|
||||
// console.log('🚀 ~ handlePictureCardPreview ~ file:', file)
|
||||
// // 预览
|
||||
// this.dialogImageUrl = file.url
|
||||
// this.dialogVisible = true
|
||||
// },
|
||||
handleBeforeUpload(file) {
|
||||
const isSvg = this.fileType.some((e) => file.type.includes(e))
|
||||
if (!isSvg) {
|
||||
this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('、')}格式的文件!`)
|
||||
return false
|
||||
}
|
||||
const isLt = file.size / 1024 / 1024 < 10
|
||||
if (!isLt) {
|
||||
this.$modal.msgError(`背景图片大小不能超过 10 MB`)
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
this.$modal.loading('图片正在上传，请稍候...')
|
||||
},
|
||||
handleSuccess(res, file, fileList) {
|
||||
if (res.code === 200) {
|
||||
this.addOrEditForm.carImage = res.data.name
|
||||
} else {
|
||||
this.addOrEditForm.fileList = []
|
||||
this.addOrEditForm.carImage = ''
|
||||
}
|
||||
this.$modal.closeLoading()
|
||||
},
|
||||
// 预览
|
||||
handlePreview(file) {
|
||||
this.dialogInnerVisible = true
|
||||
this.previewUrl = file.url
|
||||
},
|
||||
// 表单提交
|
||||
onSubmitForm() {
|
||||
this.$refs.addOrEditFormRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
console.log(' this.addOrEditForm', this.addOrEditForm)
|
||||
|
||||
const {
|
||||
userName, // 姓名
|
||||
userPhone, // 联系方式
|
||||
idCar, // 身份证号
|
||||
teamId, // 班组
|
||||
unitId, // 单位
|
||||
workType, // 工种
|
||||
sex, // 性别
|
||||
nationality, // 民族
|
||||
age, // 年龄
|
||||
postUnit, //岗位
|
||||
proId, // 入场工程
|
||||
carImage, // 人脸照片
|
||||
address,
|
||||
status,
|
||||
id,
|
||||
} = this.addOrEditForm
|
||||
|
||||
const params = {
|
||||
userName, // 姓名
|
||||
userPhone, // 联系方式
|
||||
idCar, // 身份证号
|
||||
teamId, // 班组
|
||||
unitId, // 单位
|
||||
workType, // 工种
|
||||
sex, // 性别
|
||||
nationality, // 民族
|
||||
age, // 年龄
|
||||
postUnit, //岗位
|
||||
proId, // 入场工程
|
||||
carImage, // 人脸照片
|
||||
address,
|
||||
status,
|
||||
}
|
||||
|
||||
// const formData = new FormData()
|
||||
// for(const key in params) {
|
||||
// formData.append(key,params[key])
|
||||
// }
|
||||
try {
|
||||
console.log('🚀 ~ onSubmitForm ~ params:', this.addOrEditForm)
|
||||
if (this.row.isAdd) {
|
||||
addTtSysUser(params).then((res) => {
|
||||
console.log(res, '新增结果')
|
||||
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess('新增成功')
|
||||
}
|
||||
this.$emit('closeDialog')
|
||||
})
|
||||
} else {
|
||||
params.id = id
|
||||
params.status = status
|
||||
updateTtSysUserApi(params).then((res) => {
|
||||
console.log(res, '修改结果')
|
||||
this.$emit('closeDialog')
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess('修改成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('🚀 ~ onSubmitForm ~ error:', error)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 获取班组和单位
|
||||
async getGroupAndCompanyListData() {
|
||||
const { data: res } = await getGroupListAPI()
|
||||
this.groupList = res
|
||||
// const result = await getCompanyListAPI()
|
||||
// console.log('result', result)
|
||||
// this.companyList = result
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,38 +1,43 @@
|
|||
<template>
|
||||
<!-- 新增修改弹框 -->
|
||||
<div>
|
||||
<el-form label-width="auto" :model="addOrEditForm" :rules="formRules" ref="addOrEditFormRef">
|
||||
<el-form-item label="班组名称：" prop="teamName">
|
||||
<el-input v-model="addOrEditForm.teamName" clearable placeholder="请输入班组名称" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="班组类型：" prop="teamType">
|
||||
<el-select v-model="addOrEditForm.teamType" placeholder="请选择班组类型" style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in teamTypeList"
|
||||
:key="item.dictValue"
|
||||
:label="item.dictLabel"
|
||||
:value="item.dictValue"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="班组长：" prop="teamForeman">
|
||||
<el-select v-model="addOrEditForm.teamForeman" placeholder="请选择班组长" style="width: 100%">
|
||||
<el-option v-for="item in teamForemanList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注：" prop="remark">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="addOrEditForm.remark"
|
||||
maxlength="300"
|
||||
show-word-limit
|
||||
:autosize="{ minRows: 5 }"
|
||||
placeholder="请输入备注"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 新增修改弹框 -->
|
||||
<div>
|
||||
<el-form label-width="auto" :model="addOrEditForm" :rules="formRules" ref="addOrEditFormRef">
|
||||
<el-form-item label="班组名称：" prop="teamName">
|
||||
<el-input v-model="addOrEditForm.teamName" clearable placeholder="请输入班组名称" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="班组类型：" prop="teamType">
|
||||
<el-select v-model="addOrEditForm.teamType" placeholder="请选择班组类型" style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in teamTypeList"
|
||||
:key="item.dictValue"
|
||||
:label="item.dictLabel"
|
||||
:value="item.dictValue"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="班组长：" prop="teamForeman">
|
||||
<el-select v-model="addOrEditForm.teamForeman" placeholder="请选择班组长" style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in teamForemanList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注：" prop="remark">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="addOrEditForm.remark"
|
||||
maxlength="300"
|
||||
show-word-limit
|
||||
:autosize="{ minRows: 5 }"
|
||||
placeholder="请输入备注"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -40,66 +45,66 @@ import { listData } from '@/api/system/dict/data.js'
|
|||
import { getTtSysUserList } from '@/api/personnel-manage/index.js'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
onSubmitDialog: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
props: {
|
||||
onSubmitDialog: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 新增或修改接口
|
||||
addOrEditForm: {
|
||||
teamName: '', // 班组名称
|
||||
teamType: '', // 班组类型
|
||||
teamForeman: '', // 班组长
|
||||
remark: '', // 备注
|
||||
},
|
||||
// 班组类型-下拉
|
||||
teamTypeList: [],
|
||||
// 班组长-下拉
|
||||
teamForemanList: [],
|
||||
// 表单校验规则
|
||||
formRules: {
|
||||
teamName: [{ required: true, message: '请输入班组名称', trigger: 'blur' }],
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log('🚀 ~ created ~ this.addOrEdit:')
|
||||
this.getTeamType()
|
||||
this.getTeamForeman()
|
||||
},
|
||||
methods: {
|
||||
// 获取班组
|
||||
async getTeamType() {
|
||||
const res = await listData({ dictType: 'team_type' })
|
||||
console.log('🚀 ~ getTeamType ~ res:', res)
|
||||
this.teamTypeList = res.rows
|
||||
console.log('🚀 ~ getTeamType ~ this.teamTypeList:', this.teamTypeList)
|
||||
},
|
||||
// 获取班组长
|
||||
async getTeamForeman() {
|
||||
const res = await getTtSysUserList()
|
||||
console.log('🚀 ~ getTeamForeman ~ res:', res)
|
||||
this.teamForemanList = res.data
|
||||
console.log('🚀 ~ getTeamForeman ~ this.teamForemanList:', this.teamForemanList)
|
||||
},
|
||||
// 表单提交
|
||||
onSubmitForm() {
|
||||
this.$refs.addOrEditFormRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
// const res = await addAPI(this.addOrEditForm)
|
||||
|
||||
this.$emit('closeDialog')
|
||||
} catch (error) {
|
||||
console.error('🚀 ~ onSubmitForm ~ error:', error)
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
// 新增或修改接口
|
||||
addOrEditForm: {
|
||||
teamName: '', // 班组名称
|
||||
teamType: '', // 班组类型
|
||||
teamForeman: '', // 班组长
|
||||
remark: '', // 备注
|
||||
},
|
||||
// 班组类型-下拉
|
||||
teamTypeList: [],
|
||||
// 班组长-下拉
|
||||
teamForemanList: [],
|
||||
// 表单校验规则
|
||||
formRules: {
|
||||
teamName: [{ required: true, message: '请输入班组名称', trigger: 'blur' }],
|
||||
},
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
console.log('🚀 ~ created ~ this.addOrEdit:')
|
||||
this.getTeamType()
|
||||
this.getTeamForeman()
|
||||
},
|
||||
methods: {
|
||||
// 获取班组
|
||||
async getTeamType() {
|
||||
const res = await listData({ dictType: 'team_type' })
|
||||
console.log('🚀 ~ getTeamType ~ res:', res)
|
||||
this.teamTypeList = res.rows
|
||||
console.log('🚀 ~ getTeamType ~ this.teamTypeList:', this.teamTypeList)
|
||||
},
|
||||
// 获取班组长
|
||||
async getTeamForeman() {
|
||||
const res = await getTtSysUserList()
|
||||
console.log('🚀 ~ getTeamForeman ~ res:', res)
|
||||
this.teamForemanList = res.data
|
||||
console.log('🚀 ~ getTeamForeman ~ this.teamForemanList:', this.teamForemanList)
|
||||
},
|
||||
// 表单提交
|
||||
onSubmitForm() {
|
||||
this.$refs.addOrEditFormRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
// const res = await addAPI(this.addOrEditForm)
|
||||
|
||||
this.$emit('closeDialog')
|
||||
} catch (error) {
|
||||
console.error('🚀 ~ onSubmitForm ~ error:', error)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,25 +1,29 @@
|
|||
<template>
|
||||
<!-- 项目管理 -->
|
||||
<div class="app-container">
|
||||
<TableModel ref="tableModel" :formLabel="formLabel" :columnsList="columnsList" :request-api="getProjectListAPI">
|
||||
<template slot="btn">
|
||||
<el-button size="mini" type="" icon="el-icon-download" @click="handleExport()">导出</el-button>
|
||||
<el-button size="mini" plain type="primary" icon="el-icon-plus" @click="handleAddData()">新增</el-button>
|
||||
</template>
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEditData(data)">修改</el-button>
|
||||
<el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDeleteData(data.id)">移除</el-button>
|
||||
</template>
|
||||
</TableModel>
|
||||
<!-- 项目管理 -->
|
||||
<div class="app-container">
|
||||
<TableModel ref="tableModel" :formLabel="formLabel" :columnsList="columnsList" :request-api="getProjectListAPI">
|
||||
<template slot="btn">
|
||||
<el-button size="mini" type="" icon="el-icon-download" @click="handleExport()">导出</el-button>
|
||||
<el-button size="mini" plain type="primary" icon="el-icon-plus" @click="handleAddData()"
|
||||
>新增</el-button
|
||||
>
|
||||
</template>
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEditData(data)">修改</el-button>
|
||||
<el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDeleteData(data.id)"
|
||||
>移除</el-button
|
||||
>
|
||||
</template>
|
||||
</TableModel>
|
||||
|
||||
<el-dialog :title="dialogConfig.outerTitle" :visible.sync="dialogConfig.outerVisible" width="40%">
|
||||
<AddEditForm v-if="dialogConfig.outerVisible" ref="addEditForm" @closeDialog="closeDialog" />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogConfig.outerVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmitDialog">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<el-dialog :title="dialogConfig.outerTitle" :visible.sync="dialogConfig.outerVisible" width="40%">
|
||||
<AddEditForm v-if="dialogConfig.outerVisible" ref="addEditForm" @closeDialog="closeDialog" />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogConfig.outerVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmitDialog">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -29,79 +33,98 @@ import AddEditForm from './components/add-edit-form'
|
|||
import { formLabel, columnsList } from './config'
|
||||
import { getProjectListAPI } from '@/api/personnel-manage/index.js'
|
||||
export default {
|
||||
components: {
|
||||
TableModel,
|
||||
DialogModel,
|
||||
AddEditForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formLabel, // 表单配置
|
||||
columnsList, // 表格配置
|
||||
dialogConfig: {
|
||||
outerTitle: '新建项目',
|
||||
outerVisible: false,
|
||||
}, // 弹框配置
|
||||
getProjectListAPI, // 表格数据请求接口
|
||||
rowData: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleExport() {
|
||||
console.log('导出')
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '导出功能开发中，敬请期待！',
|
||||
})
|
||||
return
|
||||
try {
|
||||
let fileName = `人员出入场_${new Date().getTime()}.xLsx`
|
||||
let url = ''
|
||||
const params = { ...this.queryParams }
|
||||
console.log('🚀 ~ 导出 ~ params:', params)
|
||||
this.download(url, params, fileName)
|
||||
} catch (error) {
|
||||
console.log('导出数据失败', error)
|
||||
}
|
||||
components: {
|
||||
TableModel,
|
||||
DialogModel,
|
||||
AddEditForm,
|
||||
},
|
||||
handleAddData() {
|
||||
console.log('新增')
|
||||
this.rowData = { isAdd: true }
|
||||
this.dialogConfig.outerTitle = '新增班组'
|
||||
this.dialogConfig.outerVisible = true
|
||||
data() {
|
||||
return {
|
||||
formLabel, // 表单配置
|
||||
columnsList, // 表格配置
|
||||
dialogConfig: {
|
||||
outerTitle: '新建项目',
|
||||
outerVisible: false,
|
||||
}, // 弹框配置
|
||||
getProjectListAPI, // 表格数据请求接口
|
||||
rowData: {},
|
||||
}
|
||||
},
|
||||
handleEditData() {
|
||||
this.rowData = { isAdd: false, ...data }
|
||||
this.dialogConfig.outerTitle = '编辑班组'
|
||||
this.dialogConfig.outerVisible = true
|
||||
methods: {
|
||||
handleExport() {
|
||||
console.log('导出')
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: '导出功能开发中，敬请期待！',
|
||||
})
|
||||
return
|
||||
try {
|
||||
let fileName = `人员出入场_${new Date().getTime()}.xLsx`
|
||||
let url = ''
|
||||
const params = { ...this.queryParams }
|
||||
console.log('🚀 ~ 导出 ~ params:', params)
|
||||
this.download(url, params, fileName)
|
||||
} catch (error) {
|
||||
console.log('导出数据失败', error)
|
||||
}
|
||||
},
|
||||
handleAddData() {
|
||||
console.log('新增')
|
||||
this.rowData = { isAdd: true }
|
||||
this.dialogConfig.outerTitle = '新增班组'
|
||||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
handleEditData() {
|
||||
this.rowData = { isAdd: false, ...data }
|
||||
this.dialogConfig.outerTitle = '编辑班组'
|
||||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
handleDeleteData(id) {
|
||||
console.log('🚀 ~ handleDeleteData ~ id:', id)
|
||||
this.$confirm('是否删除该数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(async () => {
|
||||
// const params = { }
|
||||
// const res = await
|
||||
this.$refs.tableModel.getTableList()
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!',
|
||||
})
|
||||
})
|
||||
},
|
||||
/** 关闭外侧弹框 */
|
||||
closeDialog() {
|
||||
this.dialogConfig.outerVisible = false
|
||||
this.$refs.tableModel.getTableList()
|
||||
},
|
||||
// 表单提交-弹框
|
||||
onSubmitDialog() {
|
||||
this.$refs.addEditForm.onSubmitForm()
|
||||
},
|
||||
},
|
||||
handleDeleteData(id) {
|
||||
console.log('🚀 ~ handleDeleteData ~ id:', id)
|
||||
this.$confirm('是否删除该数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(async () => {
|
||||
// const params = { }
|
||||
// const res = await
|
||||
this.$refs.tableModel.getTableList()
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!',
|
||||
})
|
||||
})
|
||||
},
|
||||
/** 关闭外侧弹框 */
|
||||
closeDialog() {
|
||||
this.dialogConfig.outerVisible = false
|
||||
this.$refs.tableModel.getTableList()
|
||||
},
|
||||
// 表单提交-弹框
|
||||
onSubmitDialog() {
|
||||
this.$refs.addEditForm.onSubmitForm()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-dialog {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
margin: 0 !important;
|
||||
position: absolute !important;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
max-height: 100vh !important;
|
||||
min-height: 100vh;
|
||||
.el-dialog__body {
|
||||
flex: 1;
|
||||
overflow-y: scroll !important;
|
||||
}
|
||||
.dialog-content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,342 +1,367 @@
|
|||
<template>
|
||||
<!-- 基础页面 -->
|
||||
<div class="app-container">
|
||||
<el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
|
||||
<el-form-item prop="keyWord">
|
||||
<el-input
|
||||
class="w240"
|
||||
v-model="queryParams.keyWord"
|
||||
placeholder="请输入关键字"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
<!-- 基础页面 -->
|
||||
<div class="app-container">
|
||||
<el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
|
||||
<el-form-item prop="keyWord">
|
||||
<el-input
|
||||
class="w240"
|
||||
v-model="queryParams.keyWord"
|
||||
placeholder="请输入关键字"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item prop="status">
|
||||
<el-select class="w240" v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option v-for="item in statusOpts" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
|
||||
<!-- 表单按钮 -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['tt:sysUser:export']"
|
||||
type=""
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table :data="tableList" fit highlight-current-row style="width: 100%" border>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="55"
|
||||
label="序号"
|
||||
align="center"
|
||||
:index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
|
||||
/>
|
||||
<el-table-column
|
||||
v-for="(column, index) in tableColumns"
|
||||
show-overflow-tooltip
|
||||
:key="index"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
align="center"
|
||||
>
|
||||
<!-- 插槽 -->
|
||||
<template v-slot="{ row }" v-if="column.prop == 'status'">
|
||||
<el-tag v-if="row.status == 0" size="mini" type="success">在场</el-tag>
|
||||
<el-tag v-else-if="row.status == 1" size="mini" type="warning">休息</el-tag>
|
||||
<el-tag v-else-if="row.status == 2" size="mini" type="danger">离场</el-tag>
|
||||
</template>
|
||||
<template v-slot="{ row }" v-else-if="column.prop == 'keyPersonnel'">
|
||||
<span v-if="row.keyPersonnel == 1">是</span>
|
||||
<span v-else-if="row.keyPersonnel == 0">否</span>
|
||||
</template>
|
||||
<template v-slot="{ row }" v-else-if="column.prop == 'photos'">
|
||||
<el-image
|
||||
v-if="row.photos"
|
||||
style="width: 30px; height: 30px; border-radius: 5px"
|
||||
:src="row.photos"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.photos]"
|
||||
></el-image>
|
||||
<span v-else>未上传</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 操作 -->
|
||||
<el-table-column label="操作" align="center" width="280">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="primary" size="mini" icon="el-icon-right" @click="handleDetails(row)"
|
||||
>出入场记录</el-button
|
||||
>
|
||||
<el-dropdown size="mini">
|
||||
<el-button size="mini" type="" icon="el-icon-arrow-down">更多</el-button>
|
||||
<el-dropdown-menu slot="dropdown" style="width: 90px; text-align: center">
|
||||
<el-dropdown-item
|
||||
><span @click="handleEdit(row)" style="color: #409eff"
|
||||
><i class="el-icon-edit"></i>修改</span
|
||||
></el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item v-show="row.status == 0"
|
||||
><span @click="handleStatus(row, 1)" style="color: #e6a23c"
|
||||
><i class="el-icon-s-tools"></i>休息</span
|
||||
></el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item v-show="row.status == 1"
|
||||
><span @click="handleStatus(row, 0)" style="color: #e6a23c"
|
||||
><i class="el-icon-s-tools"></i>结束休息</span
|
||||
></el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item v-show="row.status == 2"
|
||||
><span @click="handleEdit(row)" style="color: #67c23a"
|
||||
><i class="el-icon-s-tools"></i>入场</span
|
||||
></el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item v-show="row.status != 2"
|
||||
><span @click="handleStatus(row, 2)" style="color: #f56c6c"
|
||||
><i class="el-icon-s-tools"></i>出场</span
|
||||
></el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item
|
||||
><span @click="handleDelete(row)" style="color: #f56c6c"
|
||||
><i class="el-icon-delete"></i>删除</span
|
||||
></el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="status">
|
||||
<el-select class="w240" v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option v-for="item in statusOpts" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 表单按钮 -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['tt:sysUser:export']"
|
||||
type=""
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table :data="tableList" fit highlight-current-row style="width: 100%" border>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="55"
|
||||
label="序号"
|
||||
align="center"
|
||||
:index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
|
||||
/>
|
||||
<el-table-column
|
||||
v-for="(column, index) in tableColumns"
|
||||
show-overflow-tooltip
|
||||
:key="index"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
align="center"
|
||||
>
|
||||
<!-- 插槽 -->
|
||||
<template v-slot="{ row }" v-if="column.prop == 'status'">
|
||||
<el-tag v-if="row.status == 0" size="mini" type="success">在场</el-tag>
|
||||
<el-tag v-else-if="row.status == 1" size="mini" type="warning">休息</el-tag>
|
||||
<el-tag v-else-if="row.status == 2" size="mini" type="danger">离场</el-tag>
|
||||
</template>
|
||||
<template v-slot="{ row }" v-else-if="column.prop == 'keyPersonnel'">
|
||||
<span v-if="row.keyPersonnel == 1">是</span>
|
||||
<span v-else-if="row.keyPersonnel == 0">否</span>
|
||||
</template>
|
||||
<template v-slot="{ row }" v-else-if="column.prop == 'photos'">
|
||||
<el-image
|
||||
v-if="row.photos"
|
||||
style="width: 30px; height: 30px; border-radius: 5px"
|
||||
:src="row.photos"
|
||||
fit="cover"
|
||||
:preview-src-list="[row.photos]"
|
||||
></el-image>
|
||||
<span v-else>未上传</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 操作 -->
|
||||
<el-table-column label="操作" align="center" width="280">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="primary" size="mini" icon="el-icon-right" @click="handleDetails(row)">出入场记录</el-button>
|
||||
<el-dropdown size="mini">
|
||||
<el-button size="mini" type="" icon="el-icon-arrow-down">更多</el-button>
|
||||
<el-dropdown-menu slot="dropdown" style="width: 90px; text-align: center">
|
||||
<el-dropdown-item
|
||||
><span @click="handleEdit(row)" style="color: #409eff"
|
||||
><i class="el-icon-edit"></i>修改</span
|
||||
></el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item v-show="row.status == 0"
|
||||
><span @click="handleStatus(row, 1)" style="color: #e6a23c"
|
||||
><i class="el-icon-s-tools"></i>休息</span
|
||||
></el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item v-show="row.status == 1"
|
||||
><span @click="handleStatus(row, 0)" style="color: #e6a23c"
|
||||
><i class="el-icon-s-tools"></i>结束休息</span
|
||||
></el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item v-show="row.status == 2"
|
||||
><span @click="handleEdit(row)" style="color: #67c23a"
|
||||
><i class="el-icon-s-tools"></i>入场</span
|
||||
></el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item v-show="row.status != 2"
|
||||
><span @click="handleStatus(row, 2)" style="color: #f56c6c"
|
||||
><i class="el-icon-s-tools"></i>出场</span
|
||||
></el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item
|
||||
><span @click="handleDelete(row)" style="color: #f56c6c"
|
||||
><i class="el-icon-delete"></i>删除</span
|
||||
></el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 弹框 -->
|
||||
<el-dialog title="人员信息" :visible.sync="dialogVisible" width="50%">
|
||||
<AddEditPersonnel
|
||||
v-if="dialogVisible"
|
||||
ref="dialogForm"
|
||||
@closeDialog="closeDialog"
|
||||
:rowData="rowData"
|
||||
></AddEditPersonnel>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogConfirm">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog title="出入场记录" :visible.sync="dialogDetails" width="50%">
|
||||
<OutInDetails v-if="dialogDetails" ref="dialogDetails" :rowData="rowData"></OutInDetails>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogDetails = false">关 闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<!-- 弹框 -->
|
||||
<el-dialog title="人员信息" :visible.sync="dialogVisible" width="70%">
|
||||
<AddEditPersonnel
|
||||
v-if="dialogVisible"
|
||||
ref="dialogForm"
|
||||
@closeDialog="closeDialog"
|
||||
:rowData="rowData"
|
||||
></AddEditPersonnel>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogConfirm">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog title="出入场记录" :visible.sync="dialogDetails" width="50%">
|
||||
<OutInDetails v-if="dialogDetails" ref="dialogDetails" :rowData="rowData"></OutInDetails>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogDetails = false">关 闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTtSysUserListApi, updateTtSysUserStatusApi, deleteTtSysUserApi } from '@/api/personnel-manage/index.js'
|
||||
import AddEditPersonnel from './components/AddEditPersonnel'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import OutInDetails from './components/OutInDetails'
|
||||
import AddEditPersonnel from './components/AddEditPersonnel'
|
||||
import { getTtSysUserListApi, updateTtSysUserStatusApi, deleteTtSysUserApi } from '@/api/personnel-manage/index.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddEditPersonnel,
|
||||
OutInDetails,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showSearch: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
keyWord: '', // 关键字
|
||||
work: '', // 工种
|
||||
status: '', // 工程状态
|
||||
},
|
||||
total: 0, // 总条数
|
||||
statusOpts: [
|
||||
{ label: '在场', value: 0 },
|
||||
{ label: '休息', value: 1 },
|
||||
{ label: '离场', value: 2 },
|
||||
], // 工程状态
|
||||
// 表头
|
||||
tableColumns: [
|
||||
{ label: '姓名', prop: 'userName' },
|
||||
{ label: '身份证号', prop: 'idCar' },
|
||||
{ label: '联系方式', prop: 'userPhone' },
|
||||
{ label: '民族', prop: 'nationality' },
|
||||
{ label: '工种/岗位', prop: 'workType' },
|
||||
{ label: '所在工程', prop: 'unitName' },
|
||||
{ label: '是否关键人员', prop: 'keyPersonnel' },
|
||||
{ label: '人员状态', prop: 'status' },
|
||||
{ label: '人脸照片', prop: 'photos' },
|
||||
],
|
||||
// 表格数据
|
||||
tableList: [],
|
||||
dialogVisible: false,
|
||||
dialogDetails: false,
|
||||
rowData: {},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// 查询
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
components: {
|
||||
AddEditPersonnel,
|
||||
OutInDetails,
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.queryParams.pageSize = 10
|
||||
this.$refs.queryForm.resetFields()
|
||||
this.getList()
|
||||
},
|
||||
// 获取列表
|
||||
async getList() {
|
||||
console.log('列表-查询', this.queryParams)
|
||||
const loading = this.$loading({ text: '加载中...' })
|
||||
const location = window.location.origin
|
||||
// 获取当前访问地址
|
||||
try {
|
||||
const params = { ...this.queryParams }
|
||||
const res = await getTtSysUserListApi(params)
|
||||
console.log('🚀 ~ 获取列表 ~ res:', res)
|
||||
this.tableList = res.rows
|
||||
this.total = res.total
|
||||
if (this.tableList.length > 0) {
|
||||
this.tableList.forEach((item) => {
|
||||
item.photos = location + '/statics' + item.photos
|
||||
})
|
||||
data() {
|
||||
return {
|
||||
showSearch: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
keyWord: '', // 关键字
|
||||
// work: '', // 工种
|
||||
// status: '', // 工程状态
|
||||
},
|
||||
total: 0, // 总条数
|
||||
statusOpts: [
|
||||
{ label: '在场', value: 0 },
|
||||
{ label: '休息', value: 1 },
|
||||
{ label: '离场', value: 2 },
|
||||
], // 工程状态
|
||||
// 表头
|
||||
tableColumns: [
|
||||
{ label: '姓名', prop: 'userName' },
|
||||
{ label: '身份证号', prop: 'idCar' },
|
||||
{ label: '联系方式', prop: 'userPhone' },
|
||||
{ label: '民族', prop: 'nationality' },
|
||||
{ label: '岗位', prop: 'postUnit' },
|
||||
{ label: '工种', prop: 'workTypeName' },
|
||||
{ label: '单位', prop: 'unitName' },
|
||||
// { label: '是否关键人员', prop: 'keyPersonnel' },
|
||||
// { label: '人员状态', prop: 'status' },
|
||||
{ label: '人脸照片', prop: 'photos' },
|
||||
],
|
||||
// 表格数据
|
||||
tableList: [],
|
||||
dialogVisible: false,
|
||||
dialogDetails: false,
|
||||
rowData: {},
|
||||
}
|
||||
loading.close()
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ 获取列表 ~ error:', error)
|
||||
this.tableList = []
|
||||
this.total = 0
|
||||
loading.close()
|
||||
}
|
||||
},
|
||||
handleAdd() {
|
||||
console.log('新增')
|
||||
this.rowData = { isAdd: true }
|
||||
this.dialogVisible = true
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
// 出入场记录
|
||||
handleDetails(row) {
|
||||
console.log('出入场记录', row)
|
||||
this.rowData = { ...row }
|
||||
this.dialogDetails = true
|
||||
methods: {
|
||||
// 查询
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.queryParams.pageSize = 10
|
||||
this.$refs.queryForm.resetFields()
|
||||
this.getList()
|
||||
},
|
||||
// 获取列表
|
||||
async getList() {
|
||||
console.log('列表-查询', this.queryParams)
|
||||
// const loading = this.$loading({ text: '加载中...' })
|
||||
const location = window.location.origin
|
||||
// 获取当前访问地址
|
||||
try {
|
||||
const params = { ...this.queryParams }
|
||||
const res = await getTtSysUserListApi(params)
|
||||
console.log('🚀 ~ 获取列表 ~ res:', res)
|
||||
this.tableList = res.rows
|
||||
this.total = res.total
|
||||
if (this.tableList.length > 0) {
|
||||
this.tableList.forEach((item) => {
|
||||
item.photos = `http://192.168.0.60:38080/file/statics${item.carImage}?fileToken=${getToken()}`
|
||||
})
|
||||
}
|
||||
console.log(this.tableList, ' this.tableList')
|
||||
// loading.close()
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ 获取列表 ~ error:', error)
|
||||
this.tableList = []
|
||||
this.total = 0
|
||||
// loading.close()
|
||||
}
|
||||
},
|
||||
handleAdd() {
|
||||
console.log('新增')
|
||||
this.rowData = { isAdd: true }
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 出入场记录
|
||||
handleDetails(row) {
|
||||
console.log('出入场记录', row)
|
||||
this.rowData = { ...row }
|
||||
this.dialogDetails = true
|
||||
},
|
||||
// 编辑
|
||||
handleEdit(row) {
|
||||
console.log('编辑', row)
|
||||
this.rowData = { isAdd: false, ...row }
|
||||
this.dialogVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dialogForm.handleEdit(row)
|
||||
})
|
||||
},
|
||||
// 变更状态
|
||||
handleStatus(row, type) {
|
||||
console.log('休息', row)
|
||||
let msg = ''
|
||||
if (type == 0) {
|
||||
msg =
|
||||
'<span style="font-weight: bold">是否确定设置结束休息?</span><br /><span>设置人员状态: 结束休息? 状态改为在场状态</span>'
|
||||
} else if (type == 1) {
|
||||
msg =
|
||||
'<span style="font-weight: bold">是否确定设置休息?</span><br /><span>设置人员状态: 开始休息? 状态改为休息状态</span>'
|
||||
} else if (type == 2) {
|
||||
msg =
|
||||
'<span style="font-weight: bold">是否确定出场?</span><br /><span>出场自动解绑工程, 请确认操作</span>'
|
||||
}
|
||||
this.$confirm('', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
message: msg,
|
||||
dangerouslyUseHTMLString: true,
|
||||
type: 'warning',
|
||||
}).then(async () => {
|
||||
const params = { id: row.id, status: type }
|
||||
try {
|
||||
const res = await updateTtSysUserStatusApi(params)
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
})
|
||||
this.getList()
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ handleStatus ~ error:', error)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
handleDelete(row) {
|
||||
console.log('删除', row)
|
||||
this.$confirm('是否确定删除?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(async () => {
|
||||
const params = { id: row.id }
|
||||
try {
|
||||
const res = await deleteTtSysUserApi(params)
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!',
|
||||
})
|
||||
this.getList()
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ handleDelete ~ error:', error)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 导出数据
|
||||
handleExport() {
|
||||
try {
|
||||
let fileName = `人员出入场_${new Date().getTime()}.xLsx`
|
||||
let url = 'smart-site/ttSysUser/ttSysUserExport'
|
||||
const params = this.queryParams.status ? { status: this.queryParams.status } : {}
|
||||
// console.log('🚀 ~ 导出 ~ params:', params)
|
||||
this.download(url, params, fileName)
|
||||
} catch (error) {
|
||||
console.log('导出数据失败', error)
|
||||
}
|
||||
},
|
||||
// 弹框确认
|
||||
dialogConfirm() {
|
||||
console.log('dialogConfirm')
|
||||
this.$refs.dialogForm.onSubmitForm()
|
||||
},
|
||||
// 关闭弹框
|
||||
closeDialog() {
|
||||
this.dialogVisible = false
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
// 编辑
|
||||
handleEdit(row) {
|
||||
console.log('编辑', row)
|
||||
this.rowData = { isAdd: false, ...row }
|
||||
this.dialogVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dialogForm.handleEdit(row)
|
||||
})
|
||||
},
|
||||
// 变更状态
|
||||
handleStatus(row, type) {
|
||||
console.log('休息', row)
|
||||
let msg = ''
|
||||
if (type == 0) {
|
||||
msg =
|
||||
'<span style="font-weight: bold">是否确定设置结束休息?</span><br /><span>设置人员状态: 结束休息? 状态改为在场状态</span>'
|
||||
} else if (type == 1) {
|
||||
msg =
|
||||
'<span style="font-weight: bold">是否确定设置休息?</span><br /><span>设置人员状态: 开始休息? 状态改为休息状态</span>'
|
||||
} else if (type == 2) {
|
||||
msg = '<span style="font-weight: bold">是否确定出场?</span><br /><span>出场自动解绑工程, 请确认操作</span>'
|
||||
}
|
||||
this.$confirm('', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
message: msg,
|
||||
dangerouslyUseHTMLString: true,
|
||||
type: 'warning',
|
||||
}).then(async () => {
|
||||
const params = { id: row.id, status: type }
|
||||
try {
|
||||
const res = await updateTtSysUserStatusApi(params)
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
})
|
||||
this.getList()
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ handleStatus ~ error:', error)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
handleDelete(row) {
|
||||
console.log('删除', row)
|
||||
this.$confirm('是否确定删除?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(async () => {
|
||||
const params = { id: row.id }
|
||||
try {
|
||||
const res = await deleteTtSysUserApi(params)
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!',
|
||||
})
|
||||
this.getList()
|
||||
} catch (error) {
|
||||
console.log('🚀 ~ handleDelete ~ error:', error)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 导出数据
|
||||
handleExport() {
|
||||
try {
|
||||
let fileName = `人员出入场_${new Date().getTime()}.xLsx`
|
||||
let url = 'smart-site/ttSysUser/ttSysUserExport'
|
||||
const params = this.queryParams.status ? { status: this.queryParams.status } : {}
|
||||
// console.log('🚀 ~ 导出 ~ params:', params)
|
||||
this.download(url, params, fileName)
|
||||
} catch (error) {
|
||||
console.log('导出数据失败', error)
|
||||
}
|
||||
},
|
||||
// 弹框确认
|
||||
dialogConfirm() {
|
||||
console.log('dialogConfirm')
|
||||
this.$refs.dialogForm.onSubmitForm()
|
||||
},
|
||||
// 关闭弹框
|
||||
closeDialog() {
|
||||
this.dialogVisible = false
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-dialog {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
margin: 0 !important;
|
||||
position: absolute !important;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
max-height: 100vh !important;
|
||||
min-height: 100vh;
|
||||
.el-dialog__body {
|
||||
flex: 1;
|
||||
overflow-y: scroll !important;
|
||||
}
|
||||
.dialog-content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue