移动端V1.0
This commit is contained in:
423
pages/applyrelieve/disciplinaryApplication/add-punishment.vue
Normal file
423
pages/applyrelieve/disciplinaryApplication/add-punishment.vue
Normal file
@@ -0,0 +1,423 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user