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>
|