423 lines
9.4 KiB
Vue
423 lines
9.4 KiB
Vue
<template>
|
||
<view class="add">
|
||
<view class="form-item">
|
||
<label>学号</label>
|
||
<input type="number" placeholder="请输入" @blur="stduIDOnBlur" v-model="valiFormData.stuNo" />
|
||
</view>
|
||
<view class="form-item">
|
||
<label>姓名</label>
|
||
<input type="text" v-model="valiFormData.studentName" placeholder="请输入" />
|
||
</view>
|
||
<view class="form-item">
|
||
<label>性别</label>
|
||
<radio-group data-group-name="punishment">
|
||
<label>
|
||
<radio value="男" :checked="valiFormData.gender === '男'" active-background-color="#2a8f08"
|
||
style="transform:scale(0.7)" />男
|
||
</label>
|
||
<label>
|
||
<radio value="女" :checked="valiFormData.gender === '女'" active-background-color="#2a8f08"
|
||
style="transform:scale(0.7)" />女
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
<view class="form-item" v-for="(item,index) in inputArray" :key="index">
|
||
<label>{{item.text}}</label>
|
||
<input type="text" v-model="valiFormData[item.val]" placeholder="请输入" />
|
||
</view>
|
||
<view class="form-item">
|
||
<label>处分等级</label>
|
||
<picker range-key="class_name" v-model="valiFormData.penaltyType" :range="options" @change="onPickerChange">
|
||
<view class="uni-input">
|
||
<text class="val">{{ options[valiFormData.penaltyType] || '请选择处分等级' }}</text>
|
||
<uni-icons type="down" size="16" color="#202020"></uni-icons>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="form-item">
|
||
<label>处分建议</label>
|
||
<input type="text" v-model="valiFormData.penaltyRecommendation" placeholder="请输入" />
|
||
</view>
|
||
<view class="form-item">
|
||
<label>违纪条例</label>
|
||
<input type="text" v-model="valiFormData.violationRegulations" placeholder="请输入" />
|
||
</view>
|
||
<view class="form-item">
|
||
<label>违纪材料</label>
|
||
<view class="tip">
|
||
请上传违纪询问记录，违纪申辩记录，学生检讨书等扫描件。
|
||
</view>
|
||
<uni-file-picker :auto-upload="false" @select="uploadImg" @delete="deleteImg"></uni-file-picker>
|
||
</view>
|
||
<view class="btns">
|
||
<button @click="onSave" :disabled="isSubmitting">保存</button>
|
||
<button @click="onSubmit" :disabled="isSubmitting">提交</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getStuInfoByStuNo,
|
||
submitPunishment,
|
||
savePunishment,
|
||
deleteImg
|
||
} from "@/api/applyrelieve/applyrelieve.js";
|
||
import uploadFile from "@/plugins/upload.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
isSubmitting: false, //表单提交标志位
|
||
inputArray: [{
|
||
text: "班级",
|
||
val: "className",
|
||
},
|
||
{
|
||
text: "学院",
|
||
val: "departmentName",
|
||
},
|
||
{
|
||
text: "年级",
|
||
val: "gradeName",
|
||
},
|
||
{
|
||
text: "民族",
|
||
val: "mz",
|
||
},
|
||
{
|
||
text: "出生日期",
|
||
val: "birthday",
|
||
},
|
||
{
|
||
text: "籍贯",
|
||
val: "jg",
|
||
},
|
||
],
|
||
// 校验表单数据
|
||
valiFormData: {
|
||
stuNo: '',
|
||
studentName: '',
|
||
gender: '',
|
||
className: '',
|
||
departmentName: '',
|
||
gradeName: '',
|
||
mz: '',
|
||
birthday: '',
|
||
penaltyType: '',
|
||
jg: '',
|
||
penaltyRecommendation: '',
|
||
violationRegulations: ''
|
||
},
|
||
|
||
options: ['警告', '严重警告', '记过', '留校察看', '开除学籍'], // 处分等级
|
||
selectedOptionIndex: -1, // 当前选中的处分等级索引
|
||
stuname: "", //
|
||
stduID: "",
|
||
system: "",
|
||
grade: "",
|
||
studclass: "",
|
||
gender: "",
|
||
nation: "",
|
||
birth: "",
|
||
suggest: "",
|
||
imageIds: [],
|
||
affixId: ""
|
||
}
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
stduIDOnBlur() {
|
||
getStuInfoByStuNo(this.valiFormData.stuNo).then(res => {
|
||
console.log(res.data);
|
||
if (this.valiFormData.stuNo !== '') {
|
||
if (res.data) {
|
||
this.valiFormData.studentName = res.data.studentName;
|
||
this.valiFormData.gender = res.data.gender;
|
||
this.valiFormData.className = res.data.className;
|
||
this.valiFormData.departmentName = res.data.departmentName;
|
||
this.valiFormData.gradeName = res.data.gradeName;
|
||
console.log(this.valiFormData)
|
||
} else {
|
||
uni.showToast({
|
||
title: "学号不存在",
|
||
icon: "error"
|
||
})
|
||
}
|
||
}
|
||
|
||
})
|
||
},
|
||
onPickerChange(event) {
|
||
this.valiFormData.penaltyType = event.detail.value;
|
||
},
|
||
base64ToBlob(base64String) {
|
||
const byteCharacters = atob(base64String.split(',')[1]);
|
||
const byteNumbers = new Array(byteCharacters.length);
|
||
|
||
for (let i = 0; i < byteCharacters.length; i++) {
|
||
byteNumbers[i] = byteCharacters.charCodeAt(i);
|
||
}
|
||
|
||
const byteArray = new Uint8Array(byteNumbers);
|
||
return new Blob([byteArray], {
|
||
type: 'application/octet-stream'
|
||
});
|
||
},
|
||
// 上传图片
|
||
uploadImg(e) {
|
||
if (this.affixId == "") {
|
||
this.affixId = e.tempFiles[0].uuid;
|
||
}
|
||
let formDataObj = { // 使用一个普通的对象来存储表单数据
|
||
affixId: this.affixId
|
||
};
|
||
console.log(this.affixId);
|
||
uploadFile('/affix/upload', e.tempFilePaths[0], formDataObj).then((res) => {
|
||
let result = JSON.parse(res);
|
||
const imageId = result.id;
|
||
this.imageIds.push(imageId)
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: "上传成功",
|
||
icon: "none"
|
||
})
|
||
}
|
||
})
|
||
},
|
||
deleteImg(e) {
|
||
let imgId = this.imageIds[e.index];
|
||
this.imageIds.splice(e.index, 1);
|
||
deleteImg({
|
||
id: imgId
|
||
}).then(res => {
|
||
console.log(res);
|
||
})
|
||
},
|
||
onSave(ref) {
|
||
this.valiFormData.evidenceUpload = this.affixId;
|
||
const requiredFields = [
|
||
'stuNo',
|
||
'studentName',
|
||
'gender',
|
||
'className',
|
||
'departmentName',
|
||
'gradeName',
|
||
'mz',
|
||
'birthday',
|
||
'penaltyType',
|
||
'jg',
|
||
'penaltyRecommendation',
|
||
'violationRegulations',
|
||
'evidenceUpload'
|
||
];
|
||
const emptyField = requiredFields.find(field => this.valiFormData[field] === "");
|
||
if (emptyField) {
|
||
uni.showToast({
|
||
title: `请填写完整内容`,
|
||
icon: "none"
|
||
})
|
||
return;
|
||
}
|
||
this.isSubmitting = true; // 设置为正在提交
|
||
uni.showLoading({
|
||
title: "正在保存",
|
||
success: () => {
|
||
savePunishment(this.valiFormData).then(res => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: "保存成功"
|
||
})
|
||
this.isSubmitting = false;
|
||
uni.navigateBack();
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
onSubmit() {
|
||
this.valiFormData.evidenceUpload = this.affixId;
|
||
const requiredFields = [
|
||
'stuNo',
|
||
'studentName',
|
||
'gender',
|
||
'className',
|
||
'departmentName',
|
||
'gradeName',
|
||
'mz',
|
||
'birthday',
|
||
'penaltyType',
|
||
'jg',
|
||
'penaltyRecommendation',
|
||
'violationRegulations',
|
||
'evidenceUpload'
|
||
];
|
||
const emptyField = requiredFields.find(field => this.valiFormData[field] === "");
|
||
if (emptyField) {
|
||
uni.showToast({
|
||
title: `请填写完整内容`,
|
||
icon: "none"
|
||
})
|
||
return;
|
||
}
|
||
this.isSubmitting = true; // 设置为正在提交
|
||
uni.showLoading({
|
||
title: "正在提交",
|
||
success: () => {
|
||
submitPunishment(this.valiFormData).then(res => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: "提交成功"
|
||
})
|
||
this.isSubmitting = false;
|
||
uni.navigateBack();
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.add {
|
||
background-color: #F5F5F7;
|
||
padding: 10px;
|
||
padding-bottom: 80px;
|
||
|
||
.form-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 22rpx 40rpx;
|
||
background-color: white;
|
||
margin-bottom: 20rpx;
|
||
border-radius: 16rpx;
|
||
|
||
.tip {
|
||
color: red;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
label {
|
||
margin-bottom: 20rpx;
|
||
display: inline-block;
|
||
}
|
||
|
||
input {
|
||
border: 1px solid #E1E1E1;
|
||
border-radius: 10rpx;
|
||
height: 70rpx;
|
||
padding-left: 30rpx;
|
||
|
||
.input-placeholder {
|
||
color: #b6b6b6;
|
||
}
|
||
}
|
||
|
||
picker {
|
||
border: 1px solid #E1E1E1;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
padding: 0 30rpx;
|
||
|
||
.uni-input {
|
||
display: flex;
|
||
color: #797979;
|
||
|
||
.val {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.upload-img {
|
||
border: 1px solid #E1E1E1;
|
||
padding: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
|
||
.tip {
|
||
margin-top: 15rpx;
|
||
color: #7a7a7a;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.img-list {
|
||
border: 1px solid #D8D8D8;
|
||
border-radius: 20rpx;
|
||
|
||
.imgs {
|
||
padding: 22rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.img {
|
||
position: relative;
|
||
width: 160rpx;
|
||
height: 170rpx;
|
||
margin-bottom: 15rpx;
|
||
margin-right: 15rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.remove {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
color: white;
|
||
background-color: rgba(0, 0, 0, 0.4);
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 50%;
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.btn {
|
||
border-top: 1px solid #D8D8D8;
|
||
height: 100rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btns {
|
||
padding: 10px;
|
||
display: flex;
|
||
background: white;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 999;
|
||
|
||
button {
|
||
flex: 1;
|
||
background-color: #1890FF;
|
||
color: white;
|
||
|
||
&:first-child {
|
||
margin-right: 10px;
|
||
background-color: white;
|
||
border: 1px solid #1890FF;
|
||
color: #1890FF;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style> |