436 lines
12 KiB
Vue
436 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<BasicLayout>
|
|||
|
|
<view class="page-container">
|
|||
|
|
<view class="notice-box">
|
|||
|
|
<text class="notice-text"
|
|||
|
|
>特别提示：家中家庭成员可多人关联，可接收孩子在校情况、学业情况等。</text
|
|||
|
|
>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
v-for="(student, index) in students"
|
|||
|
|
:key="index"
|
|||
|
|
class="form-section mb-15"
|
|||
|
|
>
|
|||
|
|
<view v-if="index > 0" class="remove-btn" @click="removeStudent(index)">
|
|||
|
|
<u-icon name="minus-circle" color="#ff4d4f" size="18"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="avatar-section">
|
|||
|
|
<view class="avatar-uploader-container-rect">
|
|||
|
|
<CustomUpload
|
|||
|
|
@select="(event:any) => afterRead(event, index)"
|
|||
|
|
@close="handleAvatarClose(index)"
|
|||
|
|
:sourceType="['camera', 'album']"
|
|||
|
|
:value="imagUrl(student.xstx)"
|
|||
|
|
>
|
|||
|
|
<view class="avatar-placeholder">
|
|||
|
|
<view class="wh-full flex-col-center">
|
|||
|
|
<svg
|
|||
|
|
t="1729656215869"
|
|||
|
|
class="icon"
|
|||
|
|
viewBox="0 0 1024 1024"
|
|||
|
|
version="1.1"
|
|||
|
|
xmlns="http://www.w3.org/2000/svg"
|
|||
|
|
p-id="5302"
|
|||
|
|
width="32"
|
|||
|
|
height="32"
|
|||
|
|
>
|
|||
|
|
<path
|
|||
|
|
d="M851.552 890.88 172.448 890.88c-74.592 0-135.296-60.672-135.296-135.296L37.152 370.752c0-74.624 60.672-135.328 135.296-135.328l132.16 0L302.912 195.904c0-34.624 28.192-62.816 62.816-62.816l302.016 0c29.408 0 53.312 23.904 53.312 53.312l0 49.024 130.464 0c74.592 0 135.296 60.672 135.296 135.328l0 384.832C986.816 830.208 926.144 890.88 851.552 890.88zM172.448 283.456c-48.128 0-87.296 39.168-87.296 87.328l0 384.832c0 48.128 39.168 87.296 87.296 87.296l679.104 0c48.128 0 87.296-39.168 87.296-87.296L938.848 370.752c0-48.16-39.168-87.328-87.296-87.328L716.8 283.424c-24.096 0-43.712-19.616-43.712-43.712L673.088 186.4c0-2.944-2.368-5.312-5.312-5.312l-302.016 0c-8.16 0-14.816 6.656-14.816 14.816L350.944 237.12c0 25.536-20.768 46.304-46.304 46.304L172.448 283.424zM512 755.84c-107.04 0-194.08-87.072-194.08-194.08S404.992 367.68 512 367.68s194.08 87.072 194.08 194.08S619.04 755.84 512 755.84zM512 415.68c-80.576 0-146.08 65.536-146.08 146.08S431.456 707.84 512 707.84s146.08-65.536 146.08-146.08S592.576 415.68 512 415.68zM816.8 438.016c-25.568 0-46.336-20.768-46.336-46.336s20.768-46.336 46.336-46.336 46.336 20.768 46.336 46.336S842.368 438.016 816.8 438.016zM816.8 390.016l-1.664 1.664c0 0.896 0.736 1.664 1.664 1.664L816.8 390.016z"
|
|||
|
|
fill="#cdcdcd"
|
|||
|
|
p-id="5303"
|
|||
|
|
></path>
|
|||
|
|
</svg>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</CustomUpload>
|
|||
|
|
</view>
|
|||
|
|
<text class="avatar-upload-note">上传学生人像用于校园进出</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="student-info-form">
|
|||
|
|
<u--form label-width="auto">
|
|||
|
|
<u-form-item
|
|||
|
|
label="姓名"
|
|||
|
|
:prop="`students[${index}].xsxm`"
|
|||
|
|
required
|
|||
|
|
borderBottom
|
|||
|
|
>
|
|||
|
|
<u--input
|
|||
|
|
v-model="student.xsxm"
|
|||
|
|
placeholder="请输入学生姓名"
|
|||
|
|
border="none"
|
|||
|
|
inputAlign="right"
|
|||
|
|
></u--input>
|
|||
|
|
</u-form-item>
|
|||
|
|
<!-- <u-form-item
|
|||
|
|
label="与学生关系"
|
|||
|
|
:prop="`students[${index}].jzxsgxId`"
|
|||
|
|
required
|
|||
|
|
borderBottom
|
|||
|
|
>
|
|||
|
|
<view @click="openDicPicker(student)" class="flex-row flex-1 justify-end">
|
|||
|
|
<view v-if="!student.jzxsgxId" style="color: rgb(192, 196, 204);">请选择与学生关系</view>
|
|||
|
|
<view v-else>{{ student.jzxsgxmc }}</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</u-form-item> -->
|
|||
|
|
<u-form-item
|
|||
|
|
label="身份证号"
|
|||
|
|
:prop="`students[${index}].xssfzh`"
|
|||
|
|
required
|
|||
|
|
borderBottom
|
|||
|
|
>
|
|||
|
|
<u--input
|
|||
|
|
v-model="student.xssfzh"
|
|||
|
|
placeholder="请输入学生身份证号"
|
|||
|
|
border="none"
|
|||
|
|
inputAlign="right"
|
|||
|
|
></u--input>
|
|||
|
|
</u-form-item>
|
|||
|
|
</u--form>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="add-child-btn mb-15" @click="addMoreChildren">
|
|||
|
|
<u-icon name="plus" color="#416AF2" size="20"></u-icon>
|
|||
|
|
<text class="add-child-btn-text">新增多孩</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<template #bottom>
|
|||
|
|
<view class="white-bg-color py-5">
|
|||
|
|
<view class="flex-row items-center pb-10 pt-5">
|
|||
|
|
<u-button text="提交" class="mx-15" type="primary" @click="submit" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
</BasicLayout>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { hideLoading, showLoading, showToast } from "@/utils/uniapp";
|
|||
|
|
import { ref } from "vue";
|
|||
|
|
import { attachmentUpload } from "@/api/system/upload";
|
|||
|
|
import CustomUpload from "/src/components/BasicUpload/CustomUpload.vue";
|
|||
|
|
|
|||
|
|
import { useForm } from "@/components/BasicForm/hooks/useForm";
|
|||
|
|
import { glxsApi } from "@/api/base/server";
|
|||
|
|
import { useUserStore } from "@/store/modules/user";
|
|||
|
|
import { useDataStore } from "@/store/modules/data";
|
|||
|
|
import {imagUrl} from "@/utils";
|
|||
|
|
|
|||
|
|
const { getGlobal, getAppCode } = useDataStore();
|
|||
|
|
const { getUser, setUser, setCurXs } = useUserStore();
|
|||
|
|
|
|||
|
|
const dicOptions = ref<any>([[[]]]);
|
|||
|
|
const dicPickerRef = ref();
|
|||
|
|
const dicVal = ref<number[]>([]);
|
|||
|
|
|
|||
|
|
const students = ref([
|
|||
|
|
{
|
|||
|
|
xsxm: "",
|
|||
|
|
xssfzh: "",
|
|||
|
|
xstx: "",
|
|||
|
|
jzxsgxId: "",
|
|||
|
|
jzxsgxmc: ""
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const curXs = ref(students.value[0]);
|
|||
|
|
|
|||
|
|
const openDicPicker = (xs: any) => {
|
|||
|
|
curXs.value = xs;
|
|||
|
|
dicVal.value = [0];
|
|||
|
|
for (let i = 0; i < dicOptions.value[0].length; i++) {
|
|||
|
|
if (xs.jzxsgxId == dicOptions.value[0][i].dictionaryValue) {
|
|||
|
|
dicVal.value = [i];
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
dicPickerRef.value.open();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const dicChanged = (dicArr: any) => {
|
|||
|
|
console.log(dicArr);
|
|||
|
|
const dic = dicOptions.value[0][dicArr[0]];
|
|||
|
|
curXs.value.jzxsgxId = dic.dictionaryValue;
|
|||
|
|
curXs.value.jzxsgxmc = dic.dictionaryCode;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function afterRead(event: any, index: number) {
|
|||
|
|
if (!event.tempFilePaths || event.tempFilePaths.length === 0) {
|
|||
|
|
showToast({ title: "图片选择失败", icon: "none" });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const tempFilePath = event.tempFilePaths[0];
|
|||
|
|
showLoading({ title: "上传中" });
|
|||
|
|
try {
|
|||
|
|
const res = await attachmentUpload(tempFilePath);
|
|||
|
|
const result = res.result;
|
|||
|
|
if (result && result.length > 0 && result[0].filePath) {
|
|||
|
|
students.value[index].xstx = result[0].filePath;
|
|||
|
|
console.log(`Student ${index} avatar uploaded:`, result[0].filePath);
|
|||
|
|
showToast({ title: "上传成功" });
|
|||
|
|
} else {
|
|||
|
|
showToast({ title: "上传失败，请重试", icon: "none" });
|
|||
|
|
console.error("Upload result format error:", result);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
showToast({ title: "上传出错", icon: "none" });
|
|||
|
|
console.error("Upload error:", error);
|
|||
|
|
} finally {
|
|||
|
|
hideLoading();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleAvatarClose(index: number) {
|
|||
|
|
students.value[index].xstx = "";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addMoreChildren() {
|
|||
|
|
students.value.push({
|
|||
|
|
xsxm: "",
|
|||
|
|
xssfzh: "",
|
|||
|
|
xstx: "",
|
|||
|
|
jzxsgxId: "",
|
|||
|
|
jzxsgxmc: ""
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function removeStudent(index: number) {
|
|||
|
|
if (students.value.length > 1) {
|
|||
|
|
students.value.splice(index, 1);
|
|||
|
|
} else {
|
|||
|
|
showToast({ title: "至少需要一个子女信息", icon: "none" });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function submit() {
|
|||
|
|
for (const student of students.value) {
|
|||
|
|
if (!student.xstx) {
|
|||
|
|
showToast({ title: "请上传子女照片", icon: "none" });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!student.xsxm) {
|
|||
|
|
showToast({ title: "请输入子女姓名", icon: "none" });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!student.xssfzh) {
|
|||
|
|
showToast({ title: "请输入子女身份证号", icon: "none" });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
showLoading({ title: "提交中" });
|
|||
|
|
try {
|
|||
|
|
for (let i = 0; i < students.value.length; i++) {
|
|||
|
|
students.value[i].jzxsgxId = getUser.jzxsgxId;
|
|||
|
|
}
|
|||
|
|
const res = await glxsApi({
|
|||
|
|
xsList: students.value,
|
|||
|
|
jzId: getUser.jzId,
|
|||
|
|
openId: getGlobal.openId,
|
|||
|
|
appCode: getAppCode,
|
|||
|
|
});
|
|||
|
|
hideLoading();
|
|||
|
|
setUser(res.result);
|
|||
|
|
for (let i = 0; i < res.result.xsList.length; i++) {
|
|||
|
|
if (res.result.xsList[i].sfzh == students.value[0].xssfzh) {
|
|||
|
|
setCurXs(res.result.xsList[i]);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url: "/pages/base/home/index",
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log(error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(async () => {
|
|||
|
|
console.log("glxs");
|
|||
|
|
// const resDic = await dicApi({ pid: 1622287061 });
|
|||
|
|
// dicOptions.value = [resDic.result];
|
|||
|
|
// formSchema[1].componentProps.options = resDic.result;
|
|||
|
|
// setSchema(formSchema);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.page-container {
|
|||
|
|
padding: 15px; /* Consistent padding */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.notice-box {
|
|||
|
|
background-color: #fff1f0; /* Slightly lighter red */
|
|||
|
|
padding: 12px 18px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.notice-text {
|
|||
|
|
color: #fa541c; /* Adjusted red color */
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-section {
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 20px 20px 0 20px;
|
|||
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
|
|||
|
|
/* Added margin-bottom directly here for spacing between sections */
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-section {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 25px; /* Increased margin */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Keep avatar uploader styles relevant to CustomUpload */
|
|||
|
|
/* Replace with rectangular styles */
|
|||
|
|
.avatar-uploader-container-rect {
|
|||
|
|
/* Assuming uni.rpx units based on class names like wi-180, he-240 */
|
|||
|
|
width: 180rpx;
|
|||
|
|
height: 240rpx;
|
|||
|
|
margin: 0 auto 10px auto; /* mx-auto mb-10 */
|
|||
|
|
border-radius: 6px; /* r-md approximation */
|
|||
|
|
border: 1px solid #cccccc;
|
|||
|
|
overflow: hidden;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
background-color: #fafafa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Remove old circular styles */
|
|||
|
|
/* .avatar-uploader-container { ... } */
|
|||
|
|
|
|||
|
|
.avatar-placeholder {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Keep inner placeholder for centering SVG */
|
|||
|
|
.avatar-placeholder-inner {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Remove old hint style */
|
|||
|
|
/* .avatar-upload-hint { ... } */
|
|||
|
|
|
|||
|
|
.avatar-upload-note {
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.student-info-form {
|
|||
|
|
margin-bottom: 20px; /* Restore original margin */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-title {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 16px; /* Slightly larger title */
|
|||
|
|
font-weight: 600; /* Bolder */
|
|||
|
|
margin-bottom: 15px; /* Space below title */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Restore remove button style if needed, or adapt */
|
|||
|
|
/* Updated remove button style */
|
|||
|
|
.remove-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 10px; /* Closer to top edge */
|
|||
|
|
right: 10px; /* Closer to right edge */
|
|||
|
|
cursor: pointer;
|
|||
|
|
z-index: 10;
|
|||
|
|
/* Optional: add padding for easier clicking */
|
|||
|
|
// padding: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-child-btn {
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 15px; /* Increased padding */
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 10px; /* Increased margin */
|
|||
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-child-btn-text {
|
|||
|
|
color: #416af2;
|
|||
|
|
margin-left: 8px;
|
|||
|
|
font-size: 15px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Adjust uview form item styles */
|
|||
|
|
::v-deep .u-form-item {
|
|||
|
|
margin-bottom: 0; /* Remove default margin if any */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .u-form-item__body {
|
|||
|
|
padding: 15px 0 !important; /* Adjusted padding */
|
|||
|
|
/* Align items vertically if label wraps */
|
|||
|
|
// align-items: flex-start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .u-form-item__body__left {
|
|||
|
|
/* Allow label to take necessary width, adjust as needed */
|
|||
|
|
// flex: 0 0 80px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .u-form-item__body__left__text {
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #333;
|
|||
|
|
line-height: 1.5; /* Improve line spacing if label wraps */
|
|||
|
|
/* Ensure required asterisk is red and BEFORE the text */
|
|||
|
|
display: flex; /* Use flex to control order */
|
|||
|
|
align-items: center; /* Vertically center asterisk and text */
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
color: #f56c6c;
|
|||
|
|
/* Order asterisk first */
|
|||
|
|
order: -1;
|
|||
|
|
margin-right: 4px;
|
|||
|
|
/* Adjust vertical alignment if needed */
|
|||
|
|
// line-height: 1;
|
|||
|
|
// display: inline-block;
|
|||
|
|
// vertical-align: middle;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .u-input {
|
|||
|
|
text-align: right; /* Align input text to the right */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .u-border-bottom {
|
|||
|
|
/* Ensure border spans full width if needed, or adjust */
|
|||
|
|
// left: 0 !important;
|
|||
|
|
// right: 0 !important;
|
|||
|
|
}
|
|||
|
|
</style>
|