a
This commit is contained in:
guochunsi
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :visible.sync="newStuCheckInDialog" width="40%">
|
||||
<el-form :model="form" :rules="rules" ref="form" label-width="120px"
|
||||
<el-dialog v-model="newStuCheckInDialog" width="40%">
|
||||
<el-form :model="form" :rules="rules" ref="formRef" label-width="120px"
|
||||
class="demo-ruleForm">
|
||||
|
||||
<el-form-item label="姓名" prop="realName">
|
||||
@@ -46,14 +46,13 @@
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="宿舍号" prop="roomNo" v-if="isRoomTab && form.isRoom=='1'">
|
||||
<!-- <el-select v-model="form.roomNo" filterable placeholder="请选择房间号" :remote-method="remoteMethod" style=" width: 80% ">-->
|
||||
<el-select
|
||||
v-model="form.roomNo"
|
||||
filterable
|
||||
remote
|
||||
placeholder="请选择宿舍号"
|
||||
:remote-method="remoteMethod"
|
||||
@change="change"
|
||||
@change="handleRoomNoChange"
|
||||
:loading="loading"
|
||||
style=" width: 80% "
|
||||
>
|
||||
@@ -66,9 +65,8 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="床号" prop="bedNo" v-if="isRoomTab && form.isRoom=='1'">
|
||||
<el-select v-model="form.bedNo" filterable placeholder="请选择床号" style=" width: 80% ">
|
||||
<el-select v-model="form.bedNo" filterable placeholder="请选择床号" style=" width: 80% " :key="bedNoKey">
|
||||
<el-option
|
||||
v-for="item in bedNoData"
|
||||
:key="item.bedNo"
|
||||
@@ -83,7 +81,7 @@
|
||||
<el-input v-model="form.remarks" :rows="2" style=" width: 80%"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="checkIn('form')" v-loading="submitLoading">确定</el-button>
|
||||
<el-button type="primary" @click="checkIn" v-loading="submitLoading">确定</el-button>
|
||||
<el-button @click="newStuCheckInDialog = false">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@@ -91,188 +89,208 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getDataByRoomNo} from "/@/api/stuwork/dormroom";
|
||||
import {fearchRoomStuNum} from "/@/api/stuwork/dormroomstudent";
|
||||
import {getDictByType} from "/@/api/contract/contract";
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from 'vue'
|
||||
import { useMessage } from '/@/hooks/message'
|
||||
import { getDataByRoomNo } from "/@/api/stuwork/dormroom"
|
||||
import { fearchRoomStuNum } from "/@/api/stuwork/dormroomstudent"
|
||||
import { getDictByType } from "/@/api/contract/contract"
|
||||
import { putObj } from '@/api/recruit/newstucheckin'
|
||||
|
||||
import {putObj} from '@/api/recruit/newstucheckin'
|
||||
// Emits
|
||||
const emit = defineEmits<{
|
||||
(e: 'reload', page: any): void
|
||||
}>()
|
||||
|
||||
export default {
|
||||
name: "stu-check-in",
|
||||
data() {
|
||||
return {
|
||||
page:{},
|
||||
newStuCheckInDialog:false,
|
||||
bedNoData:[],
|
||||
roomNoList:[],
|
||||
checkInStatusData:[],
|
||||
loading:false,
|
||||
isRoomTab:false,
|
||||
yesOrNoData:[{label:'否', value:'0'},{label:'是', value:'1'}],
|
||||
genderData:[{label:'女', value:'2'},{label:'男', value:'1'}],
|
||||
submitLoading:false,
|
||||
form:{
|
||||
name:"",
|
||||
checkInStatus:"",
|
||||
gender:"",
|
||||
idNumber:"",
|
||||
isRoom:"",
|
||||
roomNo:"",
|
||||
bedNo:"",
|
||||
remarks:"",
|
||||
residenceDetail:"",
|
||||
parentName:"",
|
||||
parentTelOne:"",
|
||||
parentTelTwo:""
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入姓名', trigger: [ "blur","change"] }
|
||||
],
|
||||
gender: [
|
||||
{ required: true, message: '请输入性别', trigger: [ "blur","change"] }
|
||||
],
|
||||
idNumber: [
|
||||
{ required: true, message: '请输入身份证号', trigger: [ "blur","change"] }
|
||||
],
|
||||
checkInStatus: [
|
||||
{ required: true, message: '请输入报到状态', trigger: [ "blur","change"] }
|
||||
],
|
||||
isRoom: [
|
||||
{ required: true, message: '请选择是否住宿', trigger: [ "blur","change"] }
|
||||
],
|
||||
roomNo: [
|
||||
{ required: true, message: '请选择宿舍号', trigger: [ "blur","change"] }
|
||||
],
|
||||
bedNo: [
|
||||
{ required: true, message: '请选择床位号', trigger: [ "blur","change"] }
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
'form.checkInStatus':{
|
||||
handler(newVal){
|
||||
if(newVal==='1'){
|
||||
this.isRoomTab = true
|
||||
}else {
|
||||
this.isRoomTab = false
|
||||
}
|
||||
},
|
||||
},
|
||||
// 消息提示
|
||||
const message = useMessage()
|
||||
|
||||
'form.roomNo':{
|
||||
handler(newVal){
|
||||
console.log(newVal)
|
||||
if (newVal){
|
||||
this.fearchRoomStuNums(newVal)
|
||||
}
|
||||
}
|
||||
},
|
||||
// 表单引用
|
||||
const formRef = ref()
|
||||
|
||||
'form.isRoom':{
|
||||
handler(newVal){
|
||||
if (newVal === '0'){
|
||||
this.form.roomNo = ''
|
||||
this.form.bedNo = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
// 响应式数据
|
||||
const page = ref<any>({})
|
||||
const newStuCheckInDialog = ref(false)
|
||||
const bedNoData = ref<any[]>([])
|
||||
const roomNoList = ref<any[]>([])
|
||||
const checkInStatusData = ref<any[]>([])
|
||||
const loading = ref(false)
|
||||
const isRoomTab = ref(false)
|
||||
const bedNoKey = ref(0) // 用于强制更新床号选择器
|
||||
|
||||
},
|
||||
methods:{
|
||||
initForm(){
|
||||
this.form.name = ""
|
||||
this.form.checkInStatus = ""
|
||||
this.form.gender = ""
|
||||
this.form.idNumber = ""
|
||||
this.form.isRoom = ""
|
||||
this.form.roomNo = ""
|
||||
this.form.bedNo = ""
|
||||
this.form.remarks = ""
|
||||
this.form.residenceDetail="";
|
||||
this.form.parentName="";
|
||||
this.form.parentTelOne="";
|
||||
this.form.parentTelTwo="";
|
||||
},
|
||||
init(formData,page){
|
||||
this.initForm();
|
||||
this.page = page
|
||||
this.submitLoading = false
|
||||
this.newStuCheckInDialog = true
|
||||
const yesOrNoData = [
|
||||
{ label: '否', value: '0' },
|
||||
{ label: '是', value: '1' }
|
||||
]
|
||||
|
||||
Object.assign(this.form,formData)
|
||||
if(formData.roomNo){
|
||||
this.remoteMethod(formData.roomNo);
|
||||
this.fearchRoomStuNums(formData.bedNo);
|
||||
}
|
||||
getDictByType('check_in_status').then(data=>{
|
||||
this.checkInStatusData = data.data.data
|
||||
const genderData = [
|
||||
{ label: '女', value: '2' },
|
||||
{ label: '男', value: '1' }
|
||||
]
|
||||
|
||||
const submitLoading = ref(false)
|
||||
|
||||
const form = reactive({
|
||||
name: "",
|
||||
checkInStatus: "",
|
||||
gender: "",
|
||||
idNumber: "",
|
||||
isRoom: "",
|
||||
roomNo: "",
|
||||
bedNo: "",
|
||||
remarks: "",
|
||||
residenceDetail: "",
|
||||
parentName: "",
|
||||
parentTelOne: "",
|
||||
parentTelTwo: ""
|
||||
})
|
||||
|
||||
const rules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入姓名', trigger: ["blur", "change"] }
|
||||
],
|
||||
gender: [
|
||||
{ required: true, message: '请输入性别', trigger: ["blur", "change"] }
|
||||
],
|
||||
idNumber: [
|
||||
{ required: true, message: '请输入身份证号', trigger: ["blur", "change"] }
|
||||
],
|
||||
checkInStatus: [
|
||||
{ required: true, message: '请输入报到状态', trigger: ["blur", "change"] }
|
||||
],
|
||||
isRoom: [
|
||||
{ required: true, message: '请选择是否住宿', trigger: ["blur", "change"] }
|
||||
],
|
||||
roomNo: [
|
||||
{ required: true, message: '请选择宿舍号', trigger: ["blur", "change"] }
|
||||
],
|
||||
bedNo: [
|
||||
{ required: true, message: '请选择床位号', trigger: ["blur", "change"] }
|
||||
],
|
||||
}
|
||||
|
||||
// 监听报到状态变化
|
||||
watch(() => form.checkInStatus, (newVal) => {
|
||||
if (newVal === '1') {
|
||||
isRoomTab.value = true
|
||||
} else {
|
||||
isRoomTab.value = false
|
||||
}
|
||||
})
|
||||
|
||||
// 监听宿舍号变化
|
||||
watch(() => form.roomNo, (newVal) => {
|
||||
console.log(newVal)
|
||||
if (newVal) {
|
||||
fearchRoomStuNums(newVal)
|
||||
}
|
||||
})
|
||||
|
||||
// 监听是否住宿变化
|
||||
watch(() => form.isRoom, (newVal) => {
|
||||
if (newVal === '0') {
|
||||
form.roomNo = ''
|
||||
form.bedNo = ''
|
||||
}
|
||||
})
|
||||
|
||||
// 初始化表单
|
||||
const initForm = () => {
|
||||
form.name = ""
|
||||
form.checkInStatus = ""
|
||||
form.gender = ""
|
||||
form.idNumber = ""
|
||||
form.isRoom = ""
|
||||
form.roomNo = ""
|
||||
form.bedNo = ""
|
||||
form.remarks = ""
|
||||
form.residenceDetail = ""
|
||||
form.parentName = ""
|
||||
form.parentTelOne = ""
|
||||
form.parentTelTwo = ""
|
||||
}
|
||||
|
||||
// 初始化方法
|
||||
const init = (formData: any, pageData: any) => {
|
||||
initForm()
|
||||
page.value = pageData
|
||||
submitLoading.value = false
|
||||
newStuCheckInDialog.value = true
|
||||
|
||||
Object.assign(form, formData)
|
||||
if (formData.roomNo) {
|
||||
remoteMethod(formData.roomNo)
|
||||
fearchRoomStuNums(formData.bedNo)
|
||||
}
|
||||
getDictByType('check_in_status').then(data => {
|
||||
checkInStatusData.value = data.data
|
||||
})
|
||||
console.log("OKKK")
|
||||
}
|
||||
|
||||
// 报到提交
|
||||
const checkIn = () => {
|
||||
submitLoading.value = true
|
||||
formRef.value?.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
putObj(form).then(() => {
|
||||
message.success('报到成功')
|
||||
emit('reload', page.value)
|
||||
newStuCheckInDialog.value = false
|
||||
submitLoading.value = false
|
||||
}).catch(() => {
|
||||
submitLoading.value = false
|
||||
})
|
||||
console.log("OKKK")
|
||||
},
|
||||
checkIn(form) {
|
||||
let _that = this
|
||||
_that.submitLoading = true;
|
||||
_that.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
// console.log("form",this.form)
|
||||
// _that.formLoading = true
|
||||
putObj(this.form).then(data => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '报到成功',
|
||||
type: 'success'
|
||||
})
|
||||
_that.$emit("reload",this.page);
|
||||
_that.newStuCheckInDialog = false
|
||||
_that.submitLoading = false
|
||||
})
|
||||
// _that.formLoading = false
|
||||
}else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
//实时检索宿舍号
|
||||
remoteMethod(query) {
|
||||
if (query != '' && query.length>=3) {
|
||||
let data = {'roomNo':query}
|
||||
this.loading = true
|
||||
let _this = this
|
||||
getDataByRoomNo(data).then(data=>{
|
||||
_this.roomNoList = data.data.data;
|
||||
console.log("this.roomNoList")
|
||||
console.log(_this.roomNoList)
|
||||
_this.loading = false
|
||||
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
//查询此房间为几人间
|
||||
fearchRoomStuNums(roomNo){
|
||||
var data = {"roomNo":roomNo}
|
||||
fearchRoomStuNum(data).then(data =>{
|
||||
this.bedNoData = data.data.data;
|
||||
})
|
||||
},
|
||||
isRoomDisable(notBedNo){
|
||||
if(undefined != notBedNo && "" != notBedNo){
|
||||
return true
|
||||
}else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
change(){
|
||||
this.form.bedNo='';
|
||||
this.$forceUpdate()
|
||||
} else {
|
||||
submitLoading.value = false
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 实时检索宿舍号
|
||||
const remoteMethod = (query: string) => {
|
||||
if (query != '' && query.length >= 3) {
|
||||
const data = { 'roomNo': query }
|
||||
loading.value = true
|
||||
getDataByRoomNo(data).then(data => {
|
||||
roomNoList.value = data.data
|
||||
console.log("this.roomNoList")
|
||||
console.log(roomNoList.value)
|
||||
loading.value = false
|
||||
}).catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 查询此房间为几人间
|
||||
const fearchRoomStuNums = (roomNo: string) => {
|
||||
const data = { "roomNo": roomNo }
|
||||
fearchRoomStuNum(data).then(data => {
|
||||
bedNoData.value = data.data
|
||||
})
|
||||
}
|
||||
|
||||
// 判断床位是否禁用
|
||||
const isRoomDisable = (notBedNo: any) => {
|
||||
if (undefined != notBedNo && "" != notBedNo) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 宿舍号变化时清空床号
|
||||
const handleRoomNoChange = () => {
|
||||
form.bedNo = ''
|
||||
bedNoKey.value++ // 强制更新床号选择器
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
init
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user