You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
501 lines
12 KiB
501 lines
12 KiB
<template>
|
|
<div class="bg-caiji">
|
|
<div class="title">
|
|
员工登记
|
|
</div>
|
|
<div class="main">
|
|
|
|
<div class="div_tab">
|
|
<div :class="['div_option','option_left',{'option_select':selectTab==='1'}]"
|
|
@click="handleChangeTab('1')"> 员工登记</div>
|
|
<div :class="['div_option','option_right',{'option_select':selectTab==='2'}]"
|
|
@click="handleChangeTab('2')">受众群体登记</div>
|
|
</div>
|
|
|
|
<div v-if="selectTab==='1'"
|
|
class="content">
|
|
|
|
<mt-cell title="*企业名称">
|
|
|
|
<span style="margin-right:20px">{{placeOrgName}}</span>
|
|
</mt-cell>
|
|
<div class="line"></div>
|
|
|
|
<mt-field class="my-field"
|
|
:disableClear="true"
|
|
:label="'*姓名'"
|
|
placeholder="请输入"
|
|
v-model="formData.name"></mt-field>
|
|
<div class="line"></div>
|
|
<mt-field class="my-field"
|
|
:disableClear="true"
|
|
:label="'*手机号'"
|
|
placeholder="请输入"
|
|
type="tel"
|
|
v-model="formData.mobile"></mt-field>
|
|
<div class="line"></div>
|
|
<mt-field class="my-field"
|
|
type="url"
|
|
:disableClear="true"
|
|
:label="'*证件号'"
|
|
placeholder="请输入"
|
|
v-model="formData.idCard"></mt-field>
|
|
<div class="line"></div>
|
|
|
|
<div @click="handelSel('ymjzCount')">
|
|
<mt-cell :title="'*疫苗接种次数'"
|
|
is-link>
|
|
<span class="picker_content"
|
|
v-if="formData.ymjzCount">{{formData.ymjzCountName}}</span>
|
|
<span v-else>请选择</span>
|
|
</mt-cell>
|
|
</div>
|
|
<div class="line"></div>
|
|
<div @click="handelSelData()">
|
|
<mt-cell :title="'*最近一次核酸检测时间'"
|
|
is-link>
|
|
<span class="picker_content"
|
|
v-if="formData.latestNatTime">{{formData.latestNatTime}}</span>
|
|
<span v-else>请选择</span>
|
|
</mt-cell>
|
|
</div>
|
|
<div class="line"></div>
|
|
|
|
</div>
|
|
<div v-if="selectTab==='2'"
|
|
class="content">
|
|
|
|
<mt-cell title="*企业名称">
|
|
|
|
<span style="margin-right:20px">{{placeOrgName}}</span>
|
|
</mt-cell>
|
|
<div class="line"></div>
|
|
<div @click="handelSelData()">
|
|
<mt-cell :title="'*核酸检测时间'"
|
|
is-link>
|
|
<span class="picker_content"
|
|
v-if="formData2.natTime">{{formData2.natTime}}</span>
|
|
<span v-else>请选择</span>
|
|
</mt-cell>
|
|
</div>
|
|
<div class="line"></div>
|
|
<mt-field class="my-field"
|
|
:disableClear="true"
|
|
:label="'*受众人数'"
|
|
placeholder="请输入"
|
|
type="number"
|
|
v-model="formData2.szTotal"></mt-field>
|
|
<div class="line"></div>
|
|
<mt-field class="my-field"
|
|
:disableClear="true"
|
|
:label="'*核酸检测人数'"
|
|
placeholder="请输入"
|
|
type="number"
|
|
v-model="formData2.hsjcTotal"></mt-field>
|
|
<div class="line"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="div-btn">
|
|
<mt-button @click="handleSubmit"
|
|
type="primary"
|
|
class="btn"
|
|
:disabled="btnDisabled"
|
|
size="small">提交</mt-button>
|
|
</div>
|
|
|
|
<mt-popup v-model="popupVisible"
|
|
popup-transition="popup-fade"
|
|
closeOnClickModal="true"
|
|
position="bottom">
|
|
<mt-picker :slots="popupSlots"
|
|
class="div_picker"
|
|
value-key="label"
|
|
@change="onPickerChange"
|
|
showToolbar>
|
|
<div class="picker-toolbar-title">
|
|
<div class="usi-btn-cancel"
|
|
@click="popupVisible = !popupVisible">取消</div>
|
|
<div class="">请选择</div>
|
|
<div class="usi-btn-sure"
|
|
@click="popupOk()">确定</div>
|
|
</div>
|
|
</mt-picker>
|
|
</mt-popup>
|
|
<mt-datetime-picker v-model="pickerVisible"
|
|
ref="pickerData"
|
|
type="date"
|
|
class="picker_data"
|
|
:startDate="startDate"
|
|
year-format="{value} 年"
|
|
month-format="{value} 月"
|
|
date-format="{value} 日"
|
|
@confirm="handleConfirm">
|
|
</mt-datetime-picker>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
|
|
import { requestPost } from "@/js/dai/request";
|
|
import { Toast } from "mint-ui";
|
|
import { MessageBox } from 'mint-ui';
|
|
import { Loading } from 'element-ui' // 引入Loading服务
|
|
import { messages } from '@/i18n'
|
|
|
|
let loading // 加载动画
|
|
export default {
|
|
data () {
|
|
return {
|
|
selectTab: '1',
|
|
pickerVisible: new Date(),
|
|
startDate: new Date(2021, 0, 1),
|
|
|
|
//二维码带来数据
|
|
enterpriseId: '',//场所Id
|
|
customerId: '',//客户Id
|
|
placeOrgName: '',//场所名称
|
|
|
|
formData: {
|
|
enterpriseId: '',//场所ID
|
|
customerId: '',//客户id
|
|
name: '',
|
|
idCard: '',
|
|
mobile: '',
|
|
ymjzCount: null,
|
|
ymjzCountName: '',
|
|
latestNatTime: '',
|
|
},
|
|
formData2: {
|
|
enterpriseId: '',//场所ID
|
|
customerId: '',//客户id
|
|
natTime: '',//受众人数
|
|
szTotal: '',//核酸检测人数
|
|
hsjcTotal: '',//客户ID
|
|
|
|
},
|
|
|
|
btnDisabled: false,
|
|
popupVisible: false,
|
|
|
|
|
|
shequName: '',//社区名称
|
|
|
|
selType: 'community',//弹出框所显示的数据类型：community、building、unit、room
|
|
pickerData: [],
|
|
|
|
selObj: {},
|
|
|
|
showMessagsBox: false,//是否显示人员未填写提示弹出框
|
|
|
|
detNumList: [],//参加核酸次数list
|
|
|
|
popupSlots: [//问题类型弹框数据
|
|
{
|
|
values: []
|
|
}
|
|
],
|
|
|
|
}
|
|
},
|
|
components: {},
|
|
computed: {
|
|
|
|
},
|
|
|
|
created () {
|
|
console.log(this.$route)
|
|
|
|
this.customerId = this.$route.query.customerId
|
|
this.enterpriseId = this.$route.query.enterpriseId
|
|
this.placeOrgName = this.$route.query.placeOrgName
|
|
document.title = this.placeOrgName + '员工登记'
|
|
},
|
|
mounted () {
|
|
|
|
let envShow = process.env.VUE_APP_NODE_ENV
|
|
console.log('环境', envShow)
|
|
|
|
this.formData.customerId = this.customerId
|
|
this.formData.enterpriseId = this.enterpriseId
|
|
|
|
this.formData2.customerId = this.customerId
|
|
this.formData2.enterpriseId = this.enterpriseId
|
|
|
|
this.detNumList = []
|
|
for (let i = 0; i < 4; i++) {
|
|
let obj = {
|
|
value: i + '',
|
|
label: i + '次',
|
|
}
|
|
this.detNumList.push(obj)
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
handleChangeTab (val) {
|
|
this.selectTab = val
|
|
},
|
|
handelSelData () {
|
|
this.$refs.pickerData.open(); // 触发
|
|
// this.$refs.pickerData.close() ; // 关闭
|
|
},
|
|
|
|
handleConfirm (val) {
|
|
let time = new Date(val);
|
|
|
|
let year = time.getFullYear()
|
|
let month = time.getMonth() + 1
|
|
let day = time.getDate()
|
|
if (this.selectTab === '1') {
|
|
this.formData.latestNatTime = year + '-' + month + '-' + day
|
|
} else if (this.selectTab === '2') {
|
|
this.formData2.natTime = year + '-' + month + '-' + day
|
|
}
|
|
|
|
},
|
|
|
|
handelSel (selType) {
|
|
this.selType = selType
|
|
|
|
if (selType === 'ymjzCount') {
|
|
this.pickerData = this.detNumList
|
|
}
|
|
|
|
let obj = {
|
|
values: this.pickerData
|
|
}
|
|
|
|
this.popupSlots = []
|
|
this.popupSlots.push(obj)
|
|
this.popupVisible = !this.popupVisible
|
|
},
|
|
|
|
async handleSubmit () {
|
|
let message = this.validataFormData()
|
|
|
|
if (message) {
|
|
if (this.showMessagsBox) {
|
|
MessageBox.confirm(message).then(action => {
|
|
this.submit()
|
|
});
|
|
} else {
|
|
Toast({
|
|
message: message,
|
|
duration: 3000
|
|
});
|
|
}
|
|
} else {
|
|
return false
|
|
this.submit()
|
|
}
|
|
|
|
|
|
},
|
|
async submit () {
|
|
let url = "/gov/org/icEmployeeRegister/add"
|
|
let params = {}
|
|
if (this.selectTab === '1') {
|
|
url = '/gov/org/icEmployeeRegister/add'
|
|
params = this.formData
|
|
} else if (this.selectTab === '2') {
|
|
url = '/gov/org/icGroupPeopleRegister/add'
|
|
params = this.formData2
|
|
}
|
|
console.log(params)
|
|
// return false
|
|
this.btnDisabled = true
|
|
this.startLoading()
|
|
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
this.endLoading()
|
|
this.btnDisabled = false
|
|
if (code === 0) {
|
|
|
|
this.$router.replace({
|
|
name: 'staffRegisterSuccess',
|
|
query: {
|
|
selectTab: this.selectTab,
|
|
placeOrgName: this.placeOrgName,
|
|
formData: this.selectTab === '1' ? this.formData : this.formData2
|
|
}
|
|
})
|
|
// Toast({
|
|
// message: '提交成功',
|
|
// duration: 3000
|
|
// });
|
|
|
|
} else {
|
|
Toast({
|
|
message: msg,
|
|
duration: 3000
|
|
});
|
|
|
|
}
|
|
},
|
|
|
|
//必填验证
|
|
validataFormData () {
|
|
|
|
let aletMessage = ''
|
|
this.showMessagsBox = false
|
|
if (this.selectTab === '1') {//员工
|
|
if (!this.formData.name) {
|
|
aletMessage = '请填写姓名'
|
|
|
|
return aletMessage
|
|
}
|
|
if (!this.formData.mobile) {
|
|
aletMessage = '请填写手机号'
|
|
return aletMessage
|
|
}
|
|
|
|
if (!this.formData.idCard) {//
|
|
aletMessage = '请填写证件号'
|
|
return aletMessage
|
|
|
|
} else {
|
|
|
|
let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
|
|
if (escape(this.formData.idCard).indexOf("%u") > 0 || escape(this.formData.idCard).indexOf("%u") == 0) {
|
|
aletMessage = '请输入正确的身份证号或者护照号'
|
|
return aletMessage
|
|
}
|
|
|
|
if (this.formData.idCard.length > 18) {
|
|
aletMessage = '请输入正确的身份证号或者护照号'
|
|
return aletMessage
|
|
}
|
|
}
|
|
|
|
|
|
|
|
if (!this.formData.ymjzCount) {//
|
|
aletMessage = '请选择疫苗接种次数'
|
|
return aletMessage
|
|
|
|
}
|
|
if (!this.formData.latestNatTime) {//
|
|
aletMessage = '请选择最近一次核酸检测时间'
|
|
return aletMessage
|
|
|
|
}
|
|
|
|
|
|
} else if (this.selectTab === '2') {//企业
|
|
if (!this.formData2.natTime) {
|
|
aletMessage = '请选择核酸检测时间'
|
|
|
|
return aletMessage
|
|
}
|
|
if (!this.formData2.szTotal) {
|
|
aletMessage = '请填写受众人数'
|
|
return aletMessage
|
|
}
|
|
|
|
if (!this.formData2.hsjcTotal) {//
|
|
aletMessage = '核酸检测人数'
|
|
return aletMessage
|
|
|
|
}
|
|
}
|
|
|
|
|
|
},
|
|
|
|
popupOk () {
|
|
|
|
if (this.selType === 'ymjzCount') {
|
|
this.formData.ymjzCount = this.selObj.value
|
|
this.formData.ymjzCountName = this.selObj.label
|
|
}
|
|
this.popupVisible = false
|
|
|
|
},
|
|
|
|
onPickerChange (picker, values) {
|
|
|
|
this.selObj = values[0]
|
|
|
|
},
|
|
|
|
// 开启加载动画
|
|
startLoading () {
|
|
loading = Loading.service({
|
|
lock: true, // 是否锁定
|
|
text: '正在加载……', // 加载中需要显示的文字
|
|
background: 'rgba(0,0,0,.7)' // 背景颜色
|
|
})
|
|
},
|
|
// 结束加载动画
|
|
endLoading () {
|
|
// clearTimeout(timer);
|
|
if (loading) {
|
|
loading.close()
|
|
}
|
|
}
|
|
|
|
|
|
},
|
|
beforeDestroy () {
|
|
// document.title = messages[val].brand.lg
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped >
|
|
@import "@/assets/scss/pages/staffRegister.scss";
|
|
/deep/ .mint-cell-wrapper {
|
|
padding: 0 5px 0 0;
|
|
}
|
|
.my-field /deep/ .mint-field-core {
|
|
text-align: right;
|
|
margin-right: 20px;
|
|
}
|
|
.my-field /deep/ .mint-cell-title {
|
|
width: 110px;
|
|
}
|
|
|
|
/deep/ .mint-popup-bottom {
|
|
height: 300px;
|
|
width: 100vw;
|
|
}
|
|
|
|
// /deep/ .picker {
|
|
// height: 300px;
|
|
// }
|
|
/deep/ .picker-items {
|
|
height: 250px;
|
|
width: 100vw;
|
|
}
|
|
/deep/ .picker-slot-center {
|
|
width: 100vw;
|
|
}
|
|
// /deep/ .picker-center-highlight {
|
|
// top: 35%;
|
|
// }
|
|
.div_picker {
|
|
/deep/ .picker-center-highlight {
|
|
top: 35%;
|
|
}
|
|
}
|
|
.picker-toolbar-title {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
background-color: #eee;
|
|
height: 44px;
|
|
line-height: 44px;
|
|
font-size: 16px;
|
|
.usi-btn-cancel,
|
|
.usi-btn-sure {
|
|
color: #26a2ff;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
</style>
|
|
|