630 lines
17 KiB
Vue
630 lines
17 KiB
Vue
<template>
|
||
<view class="content">
|
||
<headersVue :titles="titles">
|
||
<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
|
||
</headersVue>
|
||
<view class="container">
|
||
<view class="box_">
|
||
<view class="d_s" style="margin-bottom: 10px;" v-if="userId">
|
||
<view class="touxiang_">
|
||
<image src="/static/imgs/yh.png" mode=""></image>
|
||
</view>
|
||
<view class="">
|
||
<view class="name_">{{ staff.nickname }}</view>
|
||
<view class="d_s">
|
||
<view class="tel_">
|
||
<image src="/static/imgs/tel.png" mode=""></image>
|
||
</view>
|
||
<view class="telnum">手机号：{{ staff.mobile }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="d_b" v-if="!userId">
|
||
<view class="">姓名</view>
|
||
<input type="text" placeholder="请输入姓名" v-model="staff.nickname" style="text-align: right;"/>
|
||
</view>
|
||
<view class="d_b" v-if="!userId">
|
||
<view class="">手机号</view>
|
||
<input type="text" placeholder="请输入手机号" v-model="staff.mobile" style="text-align: right;"/>
|
||
</view>
|
||
<view class="d_b">
|
||
<view class="">学历</view>
|
||
<view class="" @click="showEducation = true">
|
||
{{ staff.educational != null ? this.staff.educational : '请选择学历' }} >
|
||
</view>
|
||
</view>
|
||
<view class="d_b">
|
||
<view class="">身份证号</view>
|
||
<input type="text" placeholder="请输入身份证号" v-model="staff.idCard" style="text-align: right;"/>
|
||
</view>
|
||
<view class="d_b">
|
||
<view class="">入职时间</view>
|
||
<view class="" @click="showJoinedDate = true">
|
||
{{ staff.joinDate != null ? this.staff.joinDate : '请选择入职时间' }} >
|
||
</view>
|
||
</view>
|
||
<view class="d_b">
|
||
<view class="">转正时间</view>
|
||
<view class="" @click="showFormalDate = true">
|
||
{{ staff.probationPeriod != null ? this.staff.probationPeriod : '请选择转正时间' }} >
|
||
</view>
|
||
</view>
|
||
<view class="d_b">
|
||
<view class="">购买保险时间</view>
|
||
<view class="" @click="showSafeDate = true">
|
||
{{ staff.socialSecurityBuyDate != null ? this.staff.socialSecurityBuyDate : '请选择购买保险时间' }} >
|
||
</view>
|
||
</view>
|
||
<view class="d_b">
|
||
<view class="">驾照类型</view>
|
||
<view class="" @click="showDriveType = true">
|
||
{{ driverLicenseTypeArrStr != null ? this.driverLicenseTypeArrStr : '请选择驾照类型' }} >
|
||
</view>
|
||
</view>
|
||
<view class="d_b" v-if="!userId">
|
||
<view class="">岗位</view>
|
||
<view class="" @click="showRole = true">
|
||
{{ roleName != null ? this.roleName : '请选择岗位' }} >
|
||
</view>
|
||
</view>
|
||
<view class="d_b" @click="goFile">
|
||
<view class="">附件</view>
|
||
<view class="lan_">查看附件
|
||
<image src="/static/imgs/add.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<!-- <u-upload-->
|
||
<!-- ref="uploadRef"-->
|
||
<!-- :fileList="fileList1"-->
|
||
<!-- @afterRead="afterRead"-->
|
||
<!-- @delete="deletePic"-->
|
||
<!-- name="1"-->
|
||
<!-- multiple-->
|
||
<!-- :maxCount="10"-->
|
||
<!-- v-show="fileList1.length > 0"-->
|
||
<!-- >-->
|
||
<!-- </u-upload>-->
|
||
<!-- <view class="hui_box" v-if="fileList1.length == 0">-->
|
||
<!-- <image src="/static/imgs/wod.png" mode=""></image>-->
|
||
<!-- <view class="">-->
|
||
<!-- <view class="big_">附件格式 jpg/png</view>-->
|
||
<!-- <view class="sm_">100KB</view>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
|
||
|
||
<view class="anniu" @click="submit">
|
||
{{ buttonTile }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<u-picker :show="showEducation" ref="uPicker" :columns="[educations]"
|
||
@confirm="chooseEducation" @cancel="showEducation = false"
|
||
keyName="label"></u-picker>
|
||
|
||
<u-picker :show="showRole" ref="uPicker" :columns="[roles]"
|
||
@confirm="chooseRole" @cancel="showRole = false"
|
||
keyName="name"></u-picker>
|
||
|
||
<qianziyu-select
|
||
:show="showDriveType"
|
||
type="checkbox"
|
||
name="id"
|
||
:dataLists="driverLicenseType"
|
||
:showSearch=false
|
||
@cancel="showDriveType = false"
|
||
:checkboxData="driverLicenseTypeArr"
|
||
@submit="onsubmit"
|
||
@update:checkboxData="driverLicenseTypeArr = $event"
|
||
>
|
||
</qianziyu-select>
|
||
|
||
<u-datetime-picker
|
||
:show="showJoinedDate"
|
||
v-model="selectJoinDate"
|
||
@cancel="showJoinedDate = false"
|
||
@confirm="chooseJoinDate"
|
||
mode="date"
|
||
return-type='string'
|
||
></u-datetime-picker>
|
||
<u-datetime-picker
|
||
:show="showFormalDate"
|
||
v-model="selectProbationPeriod"
|
||
@cancel="showFormalDate = false"
|
||
@confirm="chooseFormalDate"
|
||
mode="date"
|
||
return-type='string'
|
||
></u-datetime-picker>
|
||
<u-datetime-picker
|
||
:show="showSafeDate"
|
||
v-model="selectSocialSecurityBuyDate"
|
||
@cancel="showSafeDate = false"
|
||
@confirm="chooseSafeDate"
|
||
mode="date"
|
||
return-type='string'
|
||
></u-datetime-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import headersVue from '../../components/header/headers.vue';
|
||
import request from "@/utils/request";
|
||
import {formatDate, getDictDataByType} from "@/utils/utils";
|
||
import upload from "@/utils/upload";
|
||
import {baseImageUrl} from "@/config";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
titles: "新增员工",
|
||
staff: {
|
||
joinDate: null,
|
||
probationPeriod: null,
|
||
socialSecurityBuyDate: null,
|
||
},
|
||
fileList1: [],
|
||
selectJoinDate: new Date().toString(),
|
||
selectProbationPeriod: new Date().toString(),
|
||
selectSocialSecurityBuyDate: new Date().toString(),
|
||
buttonTile: '保存',
|
||
show: false,
|
||
showRole: false,
|
||
status: 'loading',
|
||
userId: undefined,
|
||
showEducation: false,
|
||
showJoinedDate: false,
|
||
showFormalDate: false,
|
||
showSafeDate: false,
|
||
showDriveType: false,
|
||
educations: [],
|
||
roles: [],
|
||
driverLicenseType: [],
|
||
driverLicenseTypeArr: [],
|
||
driverLicenseTypeArrStr: null,
|
||
roleName: null,
|
||
}
|
||
},
|
||
components: {
|
||
headersVue
|
||
},
|
||
onLoad(data) {
|
||
if (data.id) {
|
||
this.titles = '编辑员工'
|
||
this.userId = data.id
|
||
this.getInfoByUserId()
|
||
this.buttonTile = '修改'
|
||
}
|
||
this.getEducation()
|
||
this.getDriveType()
|
||
this.getRoles()
|
||
},
|
||
methods: {
|
||
cancelShow() {
|
||
this.show = !this.cancelShow
|
||
},
|
||
async getRoles() {
|
||
let res = await request({
|
||
url: '/system/role/pageByQuery',
|
||
method: 'get',
|
||
params: {
|
||
servicePackageId: 'jiance'
|
||
}
|
||
})
|
||
this.roles = res.data
|
||
},
|
||
onsubmit(selectedData) {
|
||
selectedData.map(item => item.id);
|
||
this.driverLicenseTypeArr = selectedData;
|
||
this.driverLicenseTypeArrStr = selectedData.map(item => item.id).join(',');
|
||
this.showDriveType = false; // 提交后关闭弹窗
|
||
},
|
||
getDriveType() {
|
||
return request({
|
||
url: '/common/down/getDriverLicenseType',
|
||
method: 'get'
|
||
}).then(res => {
|
||
//提取出数组中的id属性
|
||
this.driverLicenseType = res.data
|
||
})
|
||
},
|
||
submit() {
|
||
//判断是否是修改
|
||
if (this.userId) {
|
||
this.update()
|
||
} else {
|
||
this.add()
|
||
}
|
||
},
|
||
update() {
|
||
// 验证表单信息
|
||
const flag = this.validData()
|
||
if (!flag) {
|
||
return
|
||
}
|
||
|
||
this.staff.userId = this.userId
|
||
const data = {
|
||
...this.staff,
|
||
fileList: this.fileList1
|
||
.map(item => {
|
||
item.url = item.url.replace(/^https?:\/\/[^/]+\/minio\//, '');
|
||
return item;
|
||
}), // 去除域名和 minio/
|
||
driverLicenseType: this.driverLicenseTypeArrStr,
|
||
driverLicenseTypeArr: this.driverLicenseTypeArr.map(item => item.id)
|
||
}
|
||
|
||
request({
|
||
url: '/inspectionStaff/update',
|
||
method: 'put',
|
||
data: data
|
||
}).then(res => {
|
||
uni.showToast({
|
||
title: "编辑成功"
|
||
})
|
||
this.getInfoByUserId()
|
||
})
|
||
},
|
||
async add() {
|
||
// 验证表单信息
|
||
const flag = this.validData()
|
||
if (!flag) {
|
||
return
|
||
}
|
||
let data = {
|
||
nickname: this.staff.nickname,
|
||
mobile: this.staff.mobile,
|
||
username: this.staff.nickname,
|
||
status: 0,
|
||
userType: '01',
|
||
roleId: this.staff.roleId,
|
||
name: this.nickname,
|
||
joinDate: this.staff.joinDate,
|
||
idCard: this.staff.idCard,
|
||
educational: this.staff.educational,
|
||
probationPeriod: this.staff.probationPeriod,
|
||
socialSecurityBuyDate: this.staff.socialSecurityBuyDate,
|
||
driverLicenseTypeArr: this.driverLicenseTypeArr.map(item => item.id),
|
||
password: '123456'
|
||
}
|
||
let res = await request({
|
||
url: '/inspectionStaff/save',
|
||
method: 'post',
|
||
data: data
|
||
})
|
||
if (res.code == 200) {
|
||
let roleIds = []
|
||
roleIds.push(this.staff.roleId)
|
||
let resp = await request({
|
||
url: '/system/permission/assign-user-role',
|
||
method: 'post',
|
||
data: {
|
||
userId: res.data,
|
||
roleIds: roleIds
|
||
}
|
||
})
|
||
uni.showToast({
|
||
title: "添加成功"
|
||
})
|
||
this.show = false
|
||
this.getindex()
|
||
}
|
||
},
|
||
validData() {
|
||
if (!this.staff.nickname || !this.staff.mobile) {
|
||
uni.showToast({
|
||
title: '姓名和电话不能有空',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
if (!this.staff.roleId && !this.userId) {
|
||
uni.showToast({
|
||
title: '请选择岗位',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
return true
|
||
},
|
||
chooseJoinDate(e) {
|
||
this.$nextTick(() => {
|
||
this.staff.joinDate = formatDate(e.value)
|
||
this.selectJoinDate = this.staff.joinDate
|
||
})
|
||
this.showJoinedDate = false
|
||
console.log(this.staff)
|
||
},
|
||
chooseFormalDate(e) {
|
||
this.$nextTick(() => {
|
||
this.staff.probationPeriod = formatDate(e.value);
|
||
this.selectProbationPeriod = this.staff.probationPeriod
|
||
})
|
||
this.showFormalDate = false;
|
||
console.log(this.staff)
|
||
},
|
||
chooseSafeDate(e) {
|
||
this.$nextTick(() => {
|
||
this.staff.socialSecurityBuyDate = formatDate(e.value)
|
||
this.selectSocialSecurityBuyDate = this.staff.socialSecurityBuyDate
|
||
})
|
||
this.showSafeDate = false
|
||
console.log(this.staff)
|
||
},
|
||
async getInfoByUserId() {
|
||
const res = await request({
|
||
url: '/inspectionStaff/get',
|
||
params: {
|
||
id: this.userId
|
||
},
|
||
method: 'get'
|
||
})
|
||
this.staff = res.data
|
||
this.topName = this.staff?.nickname
|
||
if (res.data.driverLicenseType) {
|
||
this.driverLicenseTypeArrStr = res.data.driverLicenseType
|
||
res.data.driverLicenseTypeArr.forEach(item => {
|
||
let temp = {
|
||
id: item,
|
||
name: item
|
||
}
|
||
this.driverLicenseTypeArr.push(temp)
|
||
})
|
||
}
|
||
if (this?.staff?.fileList) {
|
||
this.fileList1 = []
|
||
this.staff.fileList.forEach((item) => {
|
||
const temp = {
|
||
name: item.name,
|
||
url: item.url.startsWith("http") ? item.url : baseImageUrl + '/' + item.url
|
||
}
|
||
this.fileList1.push(temp)
|
||
})
|
||
console.log('tupian', this.fileList1)
|
||
}
|
||
},
|
||
getEducation() {
|
||
if (!this.educations || this.educations.length === 0) {
|
||
this.getEducations()
|
||
}
|
||
const index = this.educations.findIndex(item => item.value === this.staff.education)
|
||
if (index !== -1) {
|
||
return this.educations[index].label
|
||
}
|
||
return ''
|
||
},
|
||
async getEducations() {
|
||
this.educations = await getDictDataByType("company_staff_edu")
|
||
},
|
||
chooseEducation(e) {
|
||
this.$set(this.staff, 'education', e.value[0].label)
|
||
this.staff.educational = e.value[0].label
|
||
this.showEducation = false
|
||
},
|
||
chooseRole(e) {
|
||
console.log(e)
|
||
this.staff.roleId = e.value[0].id
|
||
this.roleName = e.value[0].name
|
||
this.showRole = false
|
||
},
|
||
|
||
goFile() {
|
||
if (!this.userId) {
|
||
uni.showToast({
|
||
title: '请先新建员工',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (!this.staff.folderId) {
|
||
console.log('当前员工没有文件加')
|
||
//给当前员工创建一个文件夹
|
||
request({
|
||
url: '/inspectionStaff/addFolder',
|
||
method: 'post',
|
||
data: this.userId
|
||
}).then(res => {
|
||
this.staff.folderId = res.data
|
||
uni.navigateTo({
|
||
url: '/pages/manage/deviceManage?type=staff&folderId=' + this.staff.folderId
|
||
})
|
||
})
|
||
}else {
|
||
uni.navigateTo({
|
||
url: '/pages/manage/deviceManage?type=staff&folderId=' + this.staff.folderId
|
||
})
|
||
}
|
||
|
||
},
|
||
// 上传相关方法
|
||
handleUpload() {
|
||
// 通过 ref 获取 u-upload 组件实例，并调用其上传方法
|
||
this.$refs.uploadRef.chooseFile();
|
||
},
|
||
// 删除图片
|
||
deletePic(event) {
|
||
this[`fileList${event.name}`].splice(event.index, 1);
|
||
},
|
||
// 新增图片
|
||
async afterRead(event) {
|
||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||
let lists = [].concat(event.file);
|
||
let fileListLen = this[`fileList${event.name}`].length;
|
||
lists.map((item) => {
|
||
this[`fileList${event.name}`].push({
|
||
...item,
|
||
status: "uploading",
|
||
message: "上传中",
|
||
});
|
||
});
|
||
for (let i = 0; i < lists.length; i++) {
|
||
const result = await this.uploadFilePromise(lists[i].url);
|
||
let item = this[`fileList${event.name}`][fileListLen];
|
||
this[`fileList${event.name}`].splice(
|
||
fileListLen,
|
||
1,
|
||
Object.assign(item, {
|
||
status: "success",
|
||
message: "",
|
||
url: result,
|
||
})
|
||
);
|
||
fileListLen++;
|
||
}
|
||
},
|
||
uploadFilePromise(url) {
|
||
return new Promise((resolve, reject) => {
|
||
// let a = uni.uploadFile({
|
||
// url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
|
||
// filePath: url,
|
||
// name: "file",
|
||
// formData: {
|
||
// user: "test",
|
||
// },
|
||
// success: (res) => {
|
||
// setTimeout(() => {
|
||
// resolve(res.data.data);
|
||
// }, 1000);
|
||
// },
|
||
// });
|
||
upload({
|
||
url: '/common/upload',
|
||
filePath: url,
|
||
}).then((res) => {
|
||
resolve(res.data.url);
|
||
console.log(this.fileList1)
|
||
this.forceRefreshFiles(); // 强制刷新文件列表
|
||
})
|
||
});
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content {
|
||
background: #f4f5f6;
|
||
height: 100vh;
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
background: #f4f5f6;
|
||
box-sizing: border-box;
|
||
padding: 30rpx;
|
||
padding-top: 200rpx;
|
||
padding-bottom: 28px;
|
||
}
|
||
|
||
.box_ {
|
||
background: #FFFFFF;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 30rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.d_s {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
.d_b {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 0rpx;
|
||
border-top: 2rpx solid #F5F6F9;
|
||
font-size: 28rpx;
|
||
color: #8D90A6;
|
||
|
||
}
|
||
|
||
.touxiang_ {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
margin-right: 20rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.tel_ {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 20rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.name_ {
|
||
font-size: 32rpx;
|
||
color: #101A3E;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.telnum {
|
||
font-size: 24rpx;
|
||
color: #366FFF;
|
||
}
|
||
|
||
.lan_ {
|
||
font-size: 28rpx;
|
||
color: #327DFB;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-left: 15rpx;
|
||
}
|
||
}
|
||
|
||
.hui_box {
|
||
width: 100%;
|
||
background: #F5F6F9;
|
||
border-radius: 16rpx;
|
||
box-sizing: border-box;
|
||
padding: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
}
|
||
|
||
.big_ {
|
||
font-size: 28rpx;
|
||
color: #101A3E;
|
||
}
|
||
|
||
.sm_ {
|
||
font-size: 22rpx;
|
||
color: #8D90A6;
|
||
}
|
||
|
||
.anniu {
|
||
width: 622rpx;
|
||
height: 78rpx;
|
||
background: #427FFE;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
margin-top: 200rpx;
|
||
}
|
||
</style>
|