教师增加头像、专业、主讲课程、从教时间

build_ui/src/views/train/teacher/index.vue

@@ -72,6 +72,20 @@
 
     <el-table v-loading="loading" :data="teacherList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="头像" align="center" width="80">
+        <template slot-scope="scope">
+          <el-image
+            :src="avatarUrl(scope.row.avatar)"
+            :preview-src-list="[avatarUrl(scope.row.avatar)]"
+            fit="cover"
+            class="teacher-avatar"
+          >
+            <div slot="error" class="image-slot">
+              <i class="el-icon-picture-outline" />
+            </div>
+          </el-image>
+        </template>
+      </el-table-column>
       <el-table-column label="教师姓名" align="center" prop="tName" min-width="120" />
       <el-table-column label="性别" align="center" prop="tGender" width="80">
         <template slot-scope="scope">
@@ -85,8 +99,9 @@
       </el-table-column>
       <el-table-column label="所属单位" align="center" prop="orgName" :show-overflow-tooltip="true" />
       <el-table-column label="职务/职称" align="center" prop="jobTitle" :show-overflow-tooltip="true" />
-      <el-table-column label="联系电话" align="center" prop="tPhone" width="130" />
-      <el-table-column label="邮箱" align="center" prop="tEmail" :show-overflow-tooltip="true" />
+      <el-table-column label="专业方向" align="center" prop="major" :show-overflow-tooltip="true" />
+<!--      <el-table-column label="联系电话" align="center" prop="tPhone" width="130" />
+      <el-table-column label="邮箱" align="center" prop="tEmail" :show-overflow-tooltip="true" />-->
       <el-table-column label="状态" align="center" prop="status" width="90">
         <template slot-scope="scope">
           <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
@@ -106,7 +121,7 @@
           <el-tag v-else type="info" size="mini">未关联</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+<!--      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />-->
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="210">
         <template slot-scope="scope">
           <el-button
@@ -154,8 +169,11 @@
     />
 
     <!-- 添加或修改教师信息对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="550px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="90px">
+        <el-form-item label="教师头像" prop="avatar">
+          <studentAvatar :user="user" @success="handleAvatarSuccess" />
+        </el-form-item>
         <el-form-item label="教师姓名" prop="tName">
           <el-input v-model="form.tName" placeholder="请输入教师姓名" maxlength="50" show-word-limit />
         </el-form-item>
@@ -181,6 +199,21 @@
         <el-form-item label="职务/职称" prop="jobTitle">
           <el-input v-model="form.jobTitle" placeholder="请输入职务/职称" maxlength="50" />
         </el-form-item>
+        <el-form-item label="专业方向" prop="major">
+          <el-input v-model="form.major" placeholder="请输入专业方向" maxlength="100" />
+        </el-form-item>
+        <el-form-item label="主讲课程" prop="courses">
+          <el-input v-model="form.courses" placeholder="请输入主讲课程，多门课程可用逗号分隔" maxlength="200" />
+        </el-form-item>
+        <el-form-item label="从教时间" prop="startTeaching">
+          <el-date-picker
+            v-model="form.startTeaching"
+            clearable
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="请选择从教时间"
+          />
+        </el-form-item>
         <el-form-item label="联系电话" prop="tPhone">
           <el-input v-model="form.tPhone" placeholder="请输入11位手机号码" maxlength="20" />
         </el-form-item>
@@ -271,9 +304,11 @@ import {deptTreeSelect} from "@/api/system/user";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import {listDept} from "@/api/system/dept";
+// 复用学员头像上传组件（通用：props.user 传入 {avatar}，上传成功后抛出 success 事件）
+import studentAvatar from '@/views/train/student/studentAvatar'
 export default {
   name: 'Teacher',
-  components: { Treeselect },
+  components: { Treeselect, studentAvatar },
   data() {
     return {
       // 遮罩层
@@ -313,6 +348,8 @@ export default {
       // 部门树选项
       deptOptions: undefined,
       deptArr: {},
+      // 头像上传组件用的教师对象（avatar 为入库的相对地址）
+      user: { avatar: '' },
       form: {},
       // 表单校验
       rules: {
@@ -325,6 +362,12 @@ export default {
         ],
         tEmail: [
           { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
+        ],
+        major: [
+          { max: 100, message: '专业方向长度不能超过100个字符', trigger: 'blur' }
+        ],
+        courses: [
+          { max: 200, message: '主讲课程长度不能超过200个字符', trigger: 'blur' }
         ]
       }
     }
@@ -396,18 +439,46 @@ export default {
     reset() {
       this.form = {
         tId: null,
+        avatar: null,
         tName: null,
         tGender: '男',
         tBirth: null,
         orgName: null,
         jobTitle: null,
+        major: null,
+        courses: null,
+        startTeaching: null,
         tPhone: null,
         tEmail: null,
         status: 1,
         remark: null
       }
+      // 重置头像组件预览
+      this.user = { avatar: '' }
       this.resetForm('form')
     },
+    /** 头像上传成功回调：相对地址写入表单，随教师信息一并提交 */
+    handleAvatarSuccess(imgUrl) {
+      if (!imgUrl) {
+        return
+      }
+      this.$set(this.form, 'avatar', imgUrl)
+      // 同步更新头像组件的预览
+      this.user = Object.assign({}, this.user, { avatar: imgUrl })
+      if (this.$refs.form) {
+        this.$refs.form.clearValidate('avatar')
+      }
+    },
+    /** 头像地址解析：补全 baseApi，空值使用默认头像 */
+    avatarUrl(avatar) {
+      if (!avatar) {
+        return require('@/assets/images/profile.jpg')
+      }
+      if (avatar.indexOf('http') === 0 || avatar.indexOf('data:') === 0) {
+        return avatar
+      }
+      return process.env.VUE_APP_BASE_API + avatar
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1
@@ -435,6 +506,8 @@ export default {
       const tId = row.tId || this.ids[0]
       getTeacher(tId).then(response => {
         this.form = response.data
+        // 回填头像预览
+        this.user = { avatar: (this.form && this.form.avatar) || '' }
         this.open = true
         this.title = '修改教师信息'
       })
@@ -543,3 +616,23 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="scss">
+.teacher-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  vertical-align: middle;
+  background: #f5f7fa;
+}
+
+.teacher-avatar .image-slot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: #c0c4cc;
+  font-size: 18px;
+}
+</style>