|
@@ -0,0 +1,291 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="box" style="overflow-x: hidden;" :style="{'background-image': 'url(' + webContent.loginBgUrl + ')'}">
|
|
|
|
+ <navBar :showLoginBtn="false" class="navBar"></navBar>
|
|
|
|
+ <div class="content pa-5">
|
|
|
|
+ <div class="mb-10 mt-5" style="font-size: 22px; font-weight: bold; text-align: center;">学校(老师)注册</div>
|
|
|
|
+ <CtForm class="mt-5" ref="CtFormRef" :items="formItems">
|
|
|
|
+ <template #department>
|
|
|
|
+ <div class="pa-5 mb-3" style="width: 100%; border: 1px dashed #ccc; border-radius: 4px;">
|
|
|
|
+ <p class="color-999 font-size-14 mb-3">
|
|
|
|
+ <span class="color-error">*</span>
|
|
|
|
+ 负责院系
|
|
|
|
+ </p>
|
|
|
|
+ <div v-for="(k, index) in departmentList" :key="index" class="d-flex align-center mb-5">
|
|
|
|
+ <TextInput v-model="k.departmentTitle" :item="textItem" />
|
|
|
|
+ <v-icon v-if="index > 0" class="ml-3 cursor-pointer" @click="handleDeleteDepartment(index)" color="error">mdi-close-circle</v-icon>
|
|
|
|
+ </div>
|
|
|
|
+ <v-btn class="mt-3" color="primary" prepend-icon="mdi-plus" size="small" @click="handleAddDepartment">添加院系</v-btn>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <template #tips>
|
|
|
|
+ <p class="font-size-14 color-warning mb-3">图片上传提示:支持jpg、jpeg、png格式,图片大小不得超过20M</p>
|
|
|
|
+ </template>
|
|
|
|
+ <template #jobImg="{ item }">
|
|
|
|
+ <div class="d-flex flex-column">
|
|
|
|
+ <p class="color-999 font-size-14 mb-3">
|
|
|
|
+ <span class="color-error">*</span>
|
|
|
|
+ 在岗证明图片
|
|
|
|
+ </p>
|
|
|
|
+ <Img
|
|
|
|
+ class="upload-box"
|
|
|
|
+ tips="上传图片"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ :showSnackbar="false"
|
|
|
|
+ @imgClick="handlePreview"
|
|
|
|
+ :showCursor="true"
|
|
|
|
+ @success="url => item.value = url"
|
|
|
|
+ @delete="item.value = null"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <template #schoolLegalPersonIdCardImg1="{ item }">
|
|
|
|
+ <div class="d-flex flex-column">
|
|
|
|
+ <p class="color-999 font-size-14 mb-3">
|
|
|
|
+ <span class="color-error">*</span>
|
|
|
|
+ 身份证正面图片
|
|
|
|
+ </p>
|
|
|
|
+ <Img
|
|
|
|
+ class="upload-box"
|
|
|
|
+ tips="上传图片"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ :showSnackbar="false"
|
|
|
|
+ @imgClick="handlePreview"
|
|
|
|
+ :showCursor="true"
|
|
|
|
+ @success="url => item.value = url"
|
|
|
|
+ @delete="item.value = null"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <template #schoolLegalPersonIdCardImg2="{ item }">
|
|
|
|
+ <div class="d-flex flex-column">
|
|
|
|
+ <p class="color-999 font-size-14 mb-3">
|
|
|
|
+ <span class="color-error">*</span>
|
|
|
|
+ 身份证背面图片
|
|
|
|
+ </p>
|
|
|
|
+ <Img
|
|
|
|
+ class="upload-box"
|
|
|
|
+ tips="上传图片"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ :showSnackbar="false"
|
|
|
|
+ @imgClick="handlePreview"
|
|
|
|
+ :showCursor="true"
|
|
|
|
+ @success="url => item.value = url"
|
|
|
|
+ @delete="item.value = null"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </CtForm>
|
|
|
|
+ <div class="text-center my-10">
|
|
|
|
+ <v-btn color="primary" width="250" @click.stop="handleSubmit">提 交</v-btn>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <PreviewImage v-if="showPreview" :initialIndex="0" :urlList="[previewUrl]" @close="showPreview = !showPreview, previewUrl = ''" />
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script setup>
|
|
|
|
+defineOptions({ name: 'register-schoolForm'})
|
|
|
|
+import { ref, onMounted } from 'vue'
|
|
|
|
+import { webContentStore } from '@/store/webContent'
|
|
|
|
+import { getDict } from '@/hooks/web/useDictionaries'
|
|
|
|
+import Snackbar from '@/plugins/snackbar'
|
|
|
|
+import navBar from '@/layout/personal/navBar.vue'
|
|
|
|
+import { schoolRegister } from '@/api/school'
|
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
|
+
|
|
|
|
+const router = useRouter()
|
|
|
|
+const webContent = webContentStore()
|
|
|
|
+
|
|
|
|
+const previewUrl = ref('')
|
|
|
|
+const showPreview = ref(false)
|
|
|
|
+const departmentList = ref([{ departmentTitle: '外语系' }, { departmentTitle: '计算机系' }, { departmentTitle: '经济管理系' }])
|
|
|
|
+const textItem = {
|
|
|
|
+ type: 'text',
|
|
|
|
+ key: 'departmentTitle',
|
|
|
|
+ width: 450,
|
|
|
|
+ label: '院系名称 *',
|
|
|
|
+ hideDetails: true,
|
|
|
|
+ rules: [v => !!v || '请输入您负责的院系名称']
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const CtFormRef = ref()
|
|
|
|
+const formItems = ref({
|
|
|
|
+ options: [
|
|
|
|
+ {
|
|
|
|
+ type: 'text',
|
|
|
|
+ key: 'teacherNickname',
|
|
|
|
+ value: '林老师',
|
|
|
|
+ label: '昵称 *',
|
|
|
|
+ col: 6,
|
|
|
|
+ outlined: true,
|
|
|
|
+ rules: [v => !!v || '请输入您的昵称']
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'ifRadio',
|
|
|
|
+ key: 'sex',
|
|
|
|
+ value: '1',
|
|
|
|
+ label: '性别 *',
|
|
|
|
+ col: 6,
|
|
|
|
+ flexStyle: 'ml-5',
|
|
|
|
+ width: 50,
|
|
|
|
+ dictTypeName: 'menduner_sex',
|
|
|
|
+ rules: [v => !!v || '请选择您的性别'],
|
|
|
|
+ items: []
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'phoneNumber',
|
|
|
|
+ key: 'phone',
|
|
|
|
+ value: localStorage.getItem('schoolLoginAccount') ? JSON.parse(localStorage.getItem('schoolLoginAccount')).phone : '',
|
|
|
|
+ label: '联系电话 *',
|
|
|
|
+ col: 6,
|
|
|
|
+ outlined: true,
|
|
|
|
+ rules: [v => !!v || '请填写您的联系电话']
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'text',
|
|
|
|
+ key: 'schoolName',
|
|
|
|
+ value: '测试学校',
|
|
|
|
+ label: '所在学校 *',
|
|
|
|
+ col: 6,
|
|
|
|
+ flexStyle: 'ml-5',
|
|
|
|
+ outlined: true,
|
|
|
|
+ rules: [v => !!v || '请填写您所在的学校名称']
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 'text',
|
|
|
|
+ key: 'schoolAdderss',
|
|
|
|
+ value: '华观路',
|
|
|
|
+ label: '学校地址',
|
|
|
|
+ outlined: true
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ slotName: 'department',
|
|
|
|
+ key: 'departmentTitle',
|
|
|
|
+ noParam: true,
|
|
|
|
+ label: '负责院系 *',
|
|
|
|
+ rules: [v => !!v || '请填写您在学校负责的院系']
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ slotName: 'tips',
|
|
|
|
+ noParam: true
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ slotName: 'jobImg',
|
|
|
|
+ key: 'jobImg',
|
|
|
|
+ value: 'https://menduner.citupro.com:3443/dev/person/1/img/37b12aab617b79d2c0b3d2e851bf941ecbb2882a374364ce1ca1ab4e545997d2.png',
|
|
|
|
+ col: 4,
|
|
|
|
+ rules: [v => !!v || '请上传您的在岗证明图片']
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ slotName: 'schoolLegalPersonIdCardImg1',
|
|
|
|
+ key: 'schoolLegalPersonIdCardImg1',
|
|
|
|
+ value: 'https://menduner.citupro.com:3443/dev/person/1/img/efe58e15ce8479d42389e94f245335910d417b0d6af70887b84b03643659a3af.png',
|
|
|
|
+ col: 4,
|
|
|
|
+ rules: [v => !!v || '请上传您的身份证正面图片']
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ slotName: 'schoolLegalPersonIdCardImg2',
|
|
|
|
+ key: 'schoolLegalPersonIdCardImg2',
|
|
|
|
+ value: 'https://menduner.citupro.com:3443/dev/person/1/img/c1e6d4d93ef29bf62e07eec698b8a44a1cf690aa1f5c0d36065f0f2fb1144956.png',
|
|
|
|
+ col: 4,
|
|
|
|
+ rules: [v => !!v || '请上传您的身份证背面图片']
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+onMounted(async () => {
|
|
|
|
+ await webContent.getSystemWebContent()
|
|
|
|
+
|
|
|
|
+ // 获取性别字典数据
|
|
|
|
+ const sexItem = formItems.value.options.find(e => e.key === 'sex')
|
|
|
|
+ if (!sexItem || !Object.keys(sexItem).length) return
|
|
|
|
+ const { data } = await getDict(sexItem.dictTypeName)
|
|
|
|
+ sexItem.items = data || []
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+// 图片预览
|
|
|
|
+const handlePreview = (url) => {
|
|
|
|
+ previewUrl.value = url
|
|
|
|
+ showPreview.value = true
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 添加院系
|
|
|
|
+const handleAddDepartment = () => {
|
|
|
|
+ departmentList.value.push({ departmentTitle: '' })
|
|
|
|
+}
|
|
|
|
+// 删除院系
|
|
|
|
+const handleDeleteDepartment = (index) => {
|
|
|
|
+ departmentList.value.splice(index, 1)
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 提交注册
|
|
|
|
+const handleSubmit = async () => {
|
|
|
|
+ const { valid } = await CtFormRef.value.formRef.validate()
|
|
|
|
+ if (!valid) return
|
|
|
|
+ const isCheck = departmentList.value.every(item => item.departmentTitle)
|
|
|
|
+ if (!isCheck) return Snackbar.warning('请将院系信息填写完整')
|
|
|
|
+
|
|
|
|
+ let obj = {}
|
|
|
|
+ formItems.value.options.forEach(item => {
|
|
|
|
+ if (item.noParam) return
|
|
|
|
+ obj[item.key] = item.value
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ const params = {
|
|
|
|
+ school: {
|
|
|
|
+ schoolName: obj.schoolName,
|
|
|
|
+ schoolAdderss: obj.schoolAdderss,
|
|
|
|
+ userId: JSON.parse(localStorage.getItem('userInfo'))?.id,
|
|
|
|
+ teacherNickname: obj.teacherNickname,
|
|
|
|
+ teacherSex: obj.teacherSex,
|
|
|
|
+ phone: obj.phone
|
|
|
|
+ },
|
|
|
|
+ schoolQualificaions: {
|
|
|
|
+ jobImg: obj.jobImg,
|
|
|
|
+ schoolLegalPersonIdCardImg1: obj.schoolLegalPersonIdCardImg1,
|
|
|
|
+ schoolLegalPersonIdCardImg2: obj.schoolLegalPersonIdCardImg2,
|
|
|
|
+ },
|
|
|
|
+ schoolDepartments: departmentList.value
|
|
|
|
+ }
|
|
|
|
+ console.log(params, 'submit-query')
|
|
|
|
+
|
|
|
|
+ try {
|
|
|
|
+ const data = await schoolRegister(params)
|
|
|
|
+ console.log(data, 'submit-data提交成功,等待系统管理员审核')
|
|
|
|
+ Snackbar.success('提交成功,等待系统管理员审核!')
|
|
|
|
+ localStorage.setItem('registerSchoolInfo', JSON.stringify(data))
|
|
|
|
+ router.push('/register/school/inReview')
|
|
|
|
+ } catch {}
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
+.navBar {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0;
|
|
|
|
+}
|
|
|
|
+.box {
|
|
|
|
+ position: relative;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ background-size: cover;
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ background-position: center center;
|
|
|
|
+}
|
|
|
|
+.content {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 50%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ translate: -50% -50%;
|
|
|
|
+ width: 600px;
|
|
|
|
+ height: 80%;
|
|
|
|
+ overflow: auto;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ border-radius: 10px;
|
|
|
|
+}
|
|
|
|
+.upload-box {
|
|
|
|
+ width: 100px;
|
|
|
|
+}
|
|
|
|
+</style>
|