581 lines
16 KiB
Vue
581 lines
16 KiB
Vue
<template>
|
|
<div>
|
|
<el-form ref="userEditForm" :model="form" :label-width="formLabelWidth" clearable>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="姓名：" prop="realName" :rules="ruleRequired">
|
|
<el-input
|
|
type="text"
|
|
v-model="form.realName"
|
|
autocomplete="off"
|
|
maxlength="20"
|
|
:show-word-limit="true"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="家长电话" prop="phone">
|
|
<el-input type="text" v-model="form.phone" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="入班时间：" prop="joinTime">
|
|
<el-date-picker v-model="form.joinTime" type="date" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="退出时间：" prop="exitTime">
|
|
<el-date-picker v-model="form.exitTime" type="date" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="当前状态：" prop="status">
|
|
<el-select
|
|
v-model="form.status"
|
|
filterable
|
|
placeholder="就读/退出"
|
|
style="width: 180px"
|
|
>
|
|
<el-option key="1" label="未录入" :value="0" />
|
|
<el-option key="2" label="就读" :value="1" />
|
|
<el-option key="3" label="退出" :value="10" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="申请减免" prop="amountRelief">
|
|
<el-switch v-model="form.reliefApplication" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row v-show="form.reliefApplication" class="pb-4.5">
|
|
<el-col :span="24">
|
|
<div style="display: flex; gap: 10px">
|
|
<label for="Level" class="el-form-item__label" style="width: 120px"
|
|
>减免详情:
|
|
</label>
|
|
<el-input-number
|
|
v-model="form.amountRelief"
|
|
:precision="2"
|
|
:step="0.1"
|
|
style="width: 180px"
|
|
placeholder="减免金额(元)"
|
|
:max="99999999"
|
|
/>
|
|
|
|
<el-select
|
|
v-model="form.reliefType"
|
|
filterable
|
|
placeholder="减免类型"
|
|
style="width: 180px"
|
|
>
|
|
<el-option
|
|
v-for="(item, i) in reliefTypeEnum"
|
|
:key="i"
|
|
autocomplete="off"
|
|
:label="item.text"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
|
|
<el-date-picker
|
|
placeholder="减免时间"
|
|
style="width: 180px"
|
|
v-model="form.reliefSubTime"
|
|
type="date"
|
|
/>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row class="pb-4.5">
|
|
<el-col :span="24">
|
|
<div style="display: flex; gap: 10px">
|
|
<label for="Level" class="el-form-item__label" style="width: 120px"
|
|
>选修方向：</label
|
|
>
|
|
<el-select
|
|
v-model="form.gLSubject"
|
|
filterable
|
|
clearable
|
|
placeholder="历史/地理"
|
|
style="width: 180px"
|
|
>
|
|
<el-option
|
|
v-for="(item, i) in subject1"
|
|
:key="i"
|
|
clearable
|
|
autocomplete="off"
|
|
:label="item.text"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
|
|
<el-select
|
|
v-model="form.gSubject1"
|
|
filterable
|
|
clearable
|
|
placeholder="小学科"
|
|
style="width: 180px"
|
|
>
|
|
<el-option
|
|
v-for="(item, i) in subject2"
|
|
:key="i"
|
|
autocomplete="off"
|
|
:label="item.text"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
|
|
<el-select
|
|
v-model="form.gSubject2"
|
|
filterable
|
|
placeholder="小学科"
|
|
style="width: 180px"
|
|
>
|
|
<el-option
|
|
v-for="(item, i) in subject2"
|
|
:key="i"
|
|
autocomplete="off"
|
|
:label="item.text"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-form-item label="备注：" prop="remark">
|
|
<el-input v-model="form.remark" maxlength="500" type="textarea" />
|
|
</el-form-item>
|
|
<el-row>
|
|
<el-col :span="12"> </el-col>
|
|
</el-row>
|
|
<el-row class="pt-4">
|
|
<el-col :span="24">
|
|
<el-form-item label="就读班级：" prop="positionIds" :rules="ruleRequired">
|
|
<el-button type="success" @click="CheckPosition()">选择就读班级</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<div
|
|
v-for="(position, index) in positionList"
|
|
:key="index"
|
|
style="padding-left: 120px; padding-bottom: 20px"
|
|
>
|
|
<div class="subjectTagEnableDiv" v-if="position.enable === false">
|
|
<el-tag type="info">{{ "禁用" }}</el-tag>
|
|
<el-tag type="info">{{ position.schoolName || "-" }}</el-tag>
|
|
<el-tag type="info">{{
|
|
position.graduationYear ? position.graduationYear + "届" : "-"
|
|
}}</el-tag>
|
|
<el-tag type="info">{{ position.grade || "-" }}</el-tag>
|
|
<el-tag type="info">{{ position.className || "-" }}</el-tag>
|
|
<el-tag type="info">{{ position.subjectName || "-" }}</el-tag>
|
|
<el-tag type="info">{{ position.name || "-" }}</el-tag>
|
|
<el-tag type="info">{{ position.endTime }}</el-tag>
|
|
</div>
|
|
<div class="subjectTagEnableDiv" v-else>
|
|
<el-tag>{{ position.schoolName || "-" }}</el-tag>
|
|
<el-tag type="warning">{{
|
|
position.graduationYear ? position.graduationYear + "届" : "-"
|
|
}}</el-tag>
|
|
<el-tag type="success">{{ position.grade || "-" }}</el-tag>
|
|
<el-tag type="primary" class="classTag">{{ position.className || "-" }}</el-tag>
|
|
<el-tag type="info" class="subjectTag">{{
|
|
position.subjectName || "-"
|
|
}}</el-tag>
|
|
<el-tag type="danger">{{ position.name || "-" }}</el-tag>
|
|
</div>
|
|
</div>
|
|
<el-form-item>
|
|
<el-button type="primary" :loading="loading" @click="handleSubmitForm()"
|
|
>立即提交</el-button
|
|
>
|
|
<el-button @click="handleResetForm()">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="dialog-container">
|
|
<el-dialog
|
|
v-if="dialog.visible"
|
|
ref="PositionCheckFromDialog"
|
|
:title="dialog.title"
|
|
v-model="dialog.visible"
|
|
:width="dialog.width"
|
|
:close-on-click-modal="dialog.close"
|
|
:close-on-press-escape="dialog.close"
|
|
append-to-body
|
|
>
|
|
<PositionForm
|
|
:userType="form.userType"
|
|
:positions="PositionFormIds"
|
|
@handleCheckCallback="handleCheckCallback"
|
|
/>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from "vue";
|
|
import { EditStudent, StudentInfo } from "@/api/student";
|
|
import { cloudSchoolCombo, getUserInfo, editUser, Position } from "@/api/userCenter";
|
|
import PositionForm from "../teacher/positionForm.vue";
|
|
import { getenum, getenumDic } from "@/api/enum";
|
|
import { ruleRequired, rulePhone } from "@/utils/rules";
|
|
import { ElMessage, FormInstance } from "element-plus";
|
|
import { ComboModel } from "@/components/hTable/hTable";
|
|
|
|
interface FormData {
|
|
id: number;
|
|
uId?: number;
|
|
account: string;
|
|
userType: number;
|
|
level: number;
|
|
passWord: string;
|
|
realName: string;
|
|
studentId: string;
|
|
templateId: number;
|
|
phone: string | number;
|
|
cloudSchoolId: number;
|
|
subjectLevels: any[];
|
|
subjectLevel: Record<string, any>;
|
|
positionIds: number[];
|
|
positionFormIds?: number[];
|
|
gLSubject?: number;
|
|
gSubject1?: number;
|
|
gSubject2?: number;
|
|
idCard?: string;
|
|
exitTime?: string;
|
|
joinTime?: string;
|
|
remark?: string;
|
|
status?: string;
|
|
amountRelief?: number;
|
|
reliefSubTime?: number;
|
|
reliefType?: number;
|
|
reliefApplication?: number;
|
|
}
|
|
|
|
interface DialogConfig {
|
|
close: boolean;
|
|
title: string;
|
|
visible: boolean;
|
|
width: string;
|
|
}
|
|
defineOptions({
|
|
name: "UserEditForm",
|
|
});
|
|
|
|
const userEditForm = ref<FormInstance>();
|
|
const props = defineProps<{
|
|
id: number;
|
|
}>();
|
|
|
|
const formLabelWidth = "120px";
|
|
const size = "small";
|
|
const loading = ref(false);
|
|
|
|
const reliefTypeEnum = ref<ComboModel[]>();
|
|
|
|
const subject1 = ref<ComboModel[]>([
|
|
{ value: 4, text: "物理" },
|
|
{ value: 8, text: "历史" },
|
|
]);
|
|
|
|
const subject2 = ref<ComboModel[]>([
|
|
{ value: 5, text: "化学" },
|
|
{ value: 6, text: "生物" },
|
|
{ value: 9, text: "地理" },
|
|
{ value: 7, text: "政治" },
|
|
]);
|
|
|
|
const userTypeList = ref<ComboModel[]>([]);
|
|
const userLevelList = ref<ComboModel[]>([]);
|
|
const subjectLEnum = ref<Record<string, string>>({});
|
|
const positionList = ref<Position[]>([]);
|
|
const CloudSchoolArr = ref<ComboModel[]>([]);
|
|
const Template = ref<any[]>([]);
|
|
const PositionFormIds = ref<number[]>([]);
|
|
|
|
const defaultSubjectLevel = reactive({
|
|
UserId: 0,
|
|
Level: 0,
|
|
Subject1: 0,
|
|
Subject2: 0,
|
|
Subject3: 0,
|
|
Subject4: 0,
|
|
Subject5: 0,
|
|
Subject6: 0,
|
|
Subject7: 0,
|
|
Subject8: 0,
|
|
Subject9: 0,
|
|
CreatePositionId: 1,
|
|
});
|
|
|
|
const form = ref<FormData>({
|
|
id: props.id,
|
|
account: "",
|
|
userType: 1,
|
|
level: 0,
|
|
passWord: "",
|
|
realName: "",
|
|
studentId: "",
|
|
templateId: 0,
|
|
phone: "",
|
|
cloudSchoolId: 0,
|
|
subjectLevels: [],
|
|
subjectLevel: { ...defaultSubjectLevel },
|
|
positionIds: [],
|
|
positionFormIds: [],
|
|
});
|
|
|
|
const dialog = reactive<DialogConfig>({
|
|
close: false,
|
|
title: "",
|
|
visible: false,
|
|
width: "1200px",
|
|
});
|
|
|
|
const customeRules = reactive({
|
|
mobile: [
|
|
{ required: false, message: "手机号必填", trigger: "blur" },
|
|
{
|
|
pattern: /^1[3456789]\d{9}$/,
|
|
message: "手机号码格式不正确",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
});
|
|
|
|
const getUserSubjectLevel = (obj: Record<string, any>) => {
|
|
if (!obj.id) {
|
|
form.value.subjectLevel = { ...defaultSubjectLevel };
|
|
obj = form.value.subjectLevel;
|
|
}
|
|
return Object.entries(obj).filter((s) => s[0].includes("Subject"));
|
|
};
|
|
|
|
const userLevel2subject = (str: string) => {
|
|
const name = str.match(/[0-9]+/)?.[0] || "";
|
|
return subjectLEnum.value[name];
|
|
};
|
|
const emit = defineEmits(["handlePagedCallback"]);
|
|
const handlePagedCallback = () => {
|
|
// Emit event to parent if needed
|
|
emit("handlePagedCallback");
|
|
};
|
|
|
|
const handleSubmitForm = () => {
|
|
userEditForm.value.validate(async (valid) => {
|
|
if (valid) {
|
|
loading.value = true;
|
|
let ac = form.value.account || new Date().getTime() + "";
|
|
const formData = {
|
|
id: form.value.uId || 0,
|
|
userType: form.value.userType || 1,
|
|
level: form.value.level || 0,
|
|
account: form.value.account || new Date().getTime() + "",
|
|
PassWord: form.value.id === 0 ? "无效密码" : "",
|
|
realName: form.value.realName || "",
|
|
studentId: form.value.studentId || "",
|
|
templateId: form.value.templateId || 0,
|
|
subjectLevels: form.value.subjectLevels || [],
|
|
subjectLevel: form.value.subjectLevel || { ...defaultSubjectLevel },
|
|
positionIds: form.value.positionIds || [],
|
|
gLSubject: form.value.gLSubject,
|
|
gSubject1: form.value.gSubject1,
|
|
gSubject2: form.value.gSubject2,
|
|
idCard: form.value.idCard,
|
|
cloudSchoolId: form.value.cloudSchoolId,
|
|
phone: form.value.phone,
|
|
};
|
|
|
|
let res = await editUser(formData);
|
|
|
|
if (res.code !== 200) {
|
|
loading.value = false;
|
|
ElMessage.error(res.message);
|
|
return;
|
|
}
|
|
res = await EditStudent({
|
|
...form.value,
|
|
userCenterId: res.data,
|
|
});
|
|
if (res.code !== 200) {
|
|
loading.value = false;
|
|
ElMessage.error(res.message);
|
|
return;
|
|
}
|
|
loading.value = false;
|
|
ElMessage.success("操作成功");
|
|
handlePagedCallback();
|
|
//edit info
|
|
}
|
|
});
|
|
// Form validation and submission logic
|
|
};
|
|
|
|
const handleResetForm = () => {
|
|
Object.assign(form, {
|
|
id: props.id,
|
|
account: "",
|
|
userType: 1,
|
|
level: 0,
|
|
passWord: "",
|
|
realName: "",
|
|
studentId: "",
|
|
subjectLevels: [],
|
|
subjectLevel: { ...defaultSubjectLevel },
|
|
positionIds: [],
|
|
idCard: "",
|
|
phone: "",
|
|
cloudSchoolId: "",
|
|
pointPenSN: "",
|
|
});
|
|
positionList.value = [];
|
|
};
|
|
|
|
const fetchInitData = async () => {
|
|
reliefTypeEnum.value = `
|
|
1.复读生
|
|
2.艺术生
|
|
3.春招生
|
|
4.领导承诺批准全免
|
|
5.资源班
|
|
6.国际班
|
|
7.合同制收费学校
|
|
8.渠道商家属
|
|
9.新开班但领导承诺第一学期不收费`
|
|
.split("\n")
|
|
.filter((s) => s.trim())
|
|
.map((s) => {
|
|
const [value, text] = s.trim().split(".");
|
|
return { value: text.trim(), text: text.trim() };
|
|
});
|
|
};
|
|
|
|
const fetchFormData = async () => {
|
|
handleResetForm();
|
|
if (props.id !== 0) {
|
|
let res = await getUserInfo(props.id);
|
|
if (res.data.SubjectLevel && res.data.SubjectLevel.CreatePositionId) {
|
|
delete res.data.SubjectLevel.CreatePositionId;
|
|
}
|
|
let sInfo = await StudentInfo(props.id);
|
|
Object.assign(form.value, {
|
|
id: res.data.id,
|
|
uId: res.data.id,
|
|
userType: res.data.userType,
|
|
level: res.data.level,
|
|
account: res.data.account,
|
|
passWord: res.data.passWord,
|
|
realName: res.data.realName,
|
|
studentId: res.data.studentId,
|
|
templateId: res.data.templateId,
|
|
subjectLevels: res.data.subjectLevels,
|
|
subjectLevel: res.data.subjectLevel,
|
|
positionIds: res.data.positions
|
|
.filter((s: any) => s.enable !== false)
|
|
.map((w: any) => w.id),
|
|
gLSubject: res.data.gLSubject,
|
|
gSubject1: res.data.gSubject1,
|
|
gSubject2: res.data.gSubject2,
|
|
idCard: res.data.idCard,
|
|
phone: res.data.phone,
|
|
cloudSchoolId: res.data.cloudSchoolId,
|
|
pointPenSN: res.data.pointPenSN,
|
|
...sInfo.data,
|
|
});
|
|
|
|
positionList.value = res.data.positions;
|
|
PositionFormIds.value = res.data.positions
|
|
.filter((s: any) => s.Enable !== false)
|
|
.map((s: any) => s.id);
|
|
}
|
|
};
|
|
|
|
const userTypeChange = () => {
|
|
if (form.value.userType === 2) {
|
|
form.value.studentId = "";
|
|
}
|
|
customeRules.mobile[0].required = form.value.userType !== 1;
|
|
};
|
|
|
|
const CheckPosition = () => {
|
|
dialog.title = "选择就读班级";
|
|
dialog.visible = true;
|
|
PositionFormIds.value = positionList.value
|
|
.filter((s) => s.enable !== false)
|
|
.map((s) => s.id);
|
|
};
|
|
|
|
const handleCheckCallback = (checkPosition: Position[]) => {
|
|
dialog.visible = false;
|
|
positionList.value = checkPosition;
|
|
form.value.positionIds = positionList.value.map((w) => w.id);
|
|
};
|
|
|
|
onMounted(async () => {
|
|
await fetchInitData();
|
|
fetchFormData();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.userform_ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.userform_ul li {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.subjectTagEnableDiv {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.subjectTagEnableDiv .el-tag {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.classTag {
|
|
background-color: #409eff;
|
|
color: white;
|
|
}
|
|
|
|
.subjectTag {
|
|
background-color: #909399;
|
|
color: white;
|
|
}
|
|
.classTag {
|
|
color: #a3bf08 !important;
|
|
background-color: #f4fbd1 !important;
|
|
border-color: #f4fbd1 !important;
|
|
}
|
|
.subjectTagEnableDiv {
|
|
padding: 1px;
|
|
}
|
|
.subjectTag {
|
|
color: #eb0de4 !important;
|
|
background-color: #fbd9ff !important;
|
|
border-color: #fbd9ff !important;
|
|
}
|
|
|
|
.userform_ul {
|
|
list-style: none;
|
|
}
|
|
</style>
|