teacher.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. <template>
  2. <Dialog v-model="dialogVisible" :title="dialogTitle">
  3. <el-form
  4. ref="formRef"
  5. v-loading="formLoading"
  6. :model="formData"
  7. :rules="formRules"
  8. label-width="120px"
  9. class="custom-form"
  10. >
  11. <el-row>
  12. <el-col :span="12">
  13. <el-form-item label="姓名" prop="nickname" >
  14. <el-input v-model="formData.nickname" placeholder="自动链接" :disabled="!isSupervisor" />
  15. </el-form-item>
  16. </el-col>
  17. <el-col :span="12">
  18. <el-form-item label="职称" prop="title">
  19. <el-input v-model="formData.title" placeholder="" :disabled="!isSupervisor"/>
  20. </el-form-item>
  21. </el-col>
  22. </el-row>
  23. <el-row>
  24. <el-col :span="24" >
  25. <el-form-item label="外聘导师" style="font-weight: 550;">
  26. <p></p>
  27. </el-form-item>
  28. </el-col>
  29. <el-col :span="24" >
  30. <el-form-item label="工作单位" prop="externalSupervisorWorkPlace">
  31. <el-input v-model="formData.externalSupervisorWorkPlace" placeholder="请输入工作单位" :disabled="!isSupervisor"/>
  32. </el-form-item>
  33. </el-col>
  34. </el-row>
  35. <el-row >
  36. <el-col :span="24">
  37. <el-form-item label="合作的校内导师" prop="supervisor">
  38. <el-input v-model="formData.supervisor" placeholder="自动链接" :disabled="!isSupervisor"/>
  39. </el-form-item>
  40. </el-col>
  41. </el-row>
  42. <el-row >
  43. <el-col :span="24">
  44. <el-form-item label="研究方向" prop="major">
  45. <el-input v-model="formData.major" placeholder="请输入研究方向" :disabled="!isSupervisor" />
  46. </el-form-item>
  47. </el-col>
  48. </el-row>
  49. <el-row >
  50. <!-- 导师上传-->
  51. <el-col :span="24" v-if="userInfo.userType==='3'&&formType==='update'">
  52. <el-form-item label="个人简历上传" prop="introduction">
  53. <!-- <upload-file v-model="formData.introduction" /> -->
  54. <Editor v-model="formData.introduction" ref="editorRef" class="full-width-editor"/>
  55. </el-form-item>
  56. </el-col>
  57. <!-- 学院和学生下载-->
  58. <el-col :span="24" v-if="userInfo.userType==='4'||userInfo.userType==='1'&&formType==='detail'">
  59. <el-form-item label="导师简历下载(PDF)" prop="introduction">
  60. <el-button
  61. v-if="formData.introduction"
  62. type="text"
  63. icon="el-icon-download"
  64. @click="handleDownload"
  65. class="custom-download-button"
  66. >
  67. 下载导师简历
  68. </el-button>
  69. <span v-else>暂无文件</span>
  70. </el-form-item>
  71. </el-col>
  72. </el-row>
  73. <el-row >
  74. <el-col :span="24">
  75. <el-form-item label="对研究生毕业时学术成果的要求" prop="studentAchievementRequirement">
  76. <el-input type="textarea" v-model="formData.studentAchievementRequirement" placeholder="未填写时,默认为按学校及学院发表学术成果的要求执行" :disabled="!isSupervisor" />
  77. </el-form-item>
  78. </el-col>
  79. </el-row>
  80. </el-form>
  81. <template #footer>
  82. <el-button :disabled="formLoading" type="primary" @click="submitForm" v-if="userInfo.userType==='3'">确 定</el-button>
  83. <el-button @click="dialogVisible = false" v-if="userInfo.userType==='3'" >取 消</el-button>
  84. </template>
  85. </Dialog>
  86. </template>
  87. <script lang="ts" setup>
  88. import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  89. import { CommonStatusEnum } from '@/utils/constants'
  90. import * as UserApi from '@/api/system/user'
  91. import { FormRules } from 'element-plus'
  92. import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
  93. import {selectionBookVO,selectionBookApi} from '@/api/system/studentSelectSupervisorRecord/selectionBook'
  94. import download from '@/utils/download'
  95. defineOptions({ name: 'TeacherRequireForm' })
  96. const { t } = useI18n() // 国际化
  97. const message = useMessage() // 消息弹窗
  98. const dialogVisible = ref(false) // 弹窗的是否展示
  99. const dialogTitle = ref('') // 弹窗的标题
  100. const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
  101. const formType = ref('') // 表单的类型:create - 新增;update - 修改
  102. const formData = ref({
  103. id: undefined,
  104. sex: undefined,
  105. supervisorId:undefined,
  106. nickname: '',
  107. title: '',//职称
  108. status: CommonStatusEnum.ENABLE,
  109. userNumber: '',//工号
  110. major:'',//研究方向
  111. studentAchievementRequirement:"",
  112. introduction:"",//简介
  113. externalSupervisorWorkPlace:""
  114. })
  115. const formRules = reactive<FormRules>({
  116. })
  117. const formRef = ref() // 表单 Ref
  118. const deptList = ref<Tree[]>([]) // 树形结构
  119. //获取登录人员信息
  120. const userInfo = ref({} as ProfileVO)
  121. const getUserInfo = async () => {
  122. const users = await getUserProfile()
  123. userInfo.value = users
  124. }
  125. // const isStudent = computed(() => userInfo.value.userType === "1");
  126. const open = async (type:string,supervisorId: number) => {
  127. dialogVisible.value = true
  128. formType.value=type
  129. if (formType.value == 'detail'){
  130. dialogTitle.value = '查看详情'
  131. resetForm()
  132. if (supervisorId) {
  133. formLoading.value = true
  134. try {
  135. const user = await UserApi.getUser(supervisorId)
  136. formData.value = {
  137. ...user,
  138. supervisorId: supervisorId, // 确保 supervisorId 也被设置
  139. }
  140. console.log(formData.value)
  141. } finally {
  142. formLoading.value = false
  143. }
  144. }
  145. } else if (formType.value == 'update'){
  146. dialogTitle.value = '填写互选表信息'
  147. resetForm()
  148. // 获取导师信息
  149. formLoading.value = true
  150. try {
  151. const user = await UserApi.getUser(userInfo.value.id)
  152. formData.value =user
  153. } finally {
  154. formLoading.value = false
  155. }
  156. }
  157. }
  158. defineExpose({ open }) // 提供 open 方法,用于打开弹窗
  159. /** 提交表单 */
  160. const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
  161. const submitForm = async () => {
  162. // 提交请求
  163. formLoading.value = true
  164. try {
  165. const data = formData.value as unknown as selectionBookVO
  166. if (Array.isArray(data.introduction) && data.introduction.length > 0) {
  167. data.introduction = data.introduction[0]; // 只取数组的第一个元素
  168. }
  169. if (formType.value === 'update') {
  170. await selectionBookApi.updateSelectionBook(data)
  171. message.success(t('common.updateSuccess'))
  172. }
  173. dialogVisible.value = false
  174. // 发送操作成功的事件
  175. emit('success')
  176. } finally {
  177. formLoading.value = false
  178. }
  179. }
  180. const isSupervisor = computed(() => userInfo.value.userType === '3');
  181. //下载PDF
  182. const handleDownload = () => {
  183. console.log(formData.value.introduction)
  184. download.markdown(formData.value.introduction, '个人简历.pdf');
  185. };
  186. /** 重置表单 */
  187. const resetForm = () => {
  188. formData.value = {
  189. supervisorId:undefined,
  190. nickname: '',
  191. id: undefined,
  192. sex: undefined,
  193. title: '',//职称
  194. status: CommonStatusEnum.ENABLE,
  195. userNumber: '',//工号
  196. major:'',//研究方向
  197. studentAchievementRequirement:"",
  198. introduction:"",//简介
  199. externalSupervisorWorkPlace:""
  200. }
  201. formRef.value?.resetFields()
  202. }
  203. onMounted(() => {
  204. getUserInfo()
  205. })
  206. </script>
  207. <style scoped>
  208. .custom-form {
  209. background-color: #f0f4f8; /* 浅灰色背景 */
  210. padding: 20px;
  211. border-radius: 8px;
  212. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
  213. }
  214. .custom-form .custom-download-button {
  215. color: #4b7bec; /* 灰蓝色字体颜色 */
  216. border: 1px solid #4b7bec; /* 灰蓝色边框 */
  217. background-color: transparent; /* 透明背景 */
  218. padding: 10px 20px; /* 按钮内边距 */
  219. border-radius: 4px; /* 圆角边框 */
  220. font-size: 16px; /* 字体大小 */
  221. transition: all 0.3s ease; /* 平滑过渡效果 */
  222. outline: none; /* 去除点击时的轮廓 */
  223. }
  224. .custom-form .custom-download-button:hover,
  225. .custom-form .custom-download-button:focus {
  226. color: #fff; /* 悬浮时字体颜色 */
  227. background-color: #4b7bec; /* 悬浮时背景颜色 */
  228. border-color: #4b7bec; /* 悬浮时边框颜色 */
  229. }
  230. .custom-form .custom-download-button:active {
  231. background-color: skyblue; /* 点击时背景颜色 */
  232. border-color: #3a66b1; /* 点击时边框颜色 */
  233. }
  234. .full-width-editor {
  235. width: 100%;
  236. border: #e5e7ec;
  237. border-radius: 4px;
  238. }
  239. </style>