王子文 专项培养 月度反馈

ui/src/views/training/spec/monthlyfeedback/index.vue

@@ -28,7 +28,7 @@
           style="width:200px"
         />
       </el-form-item>
-      <el-form-item label="月" prop="feedbackMonth">
+      <!-- <el-form-item label="月" prop="feedbackMonth">
         <el-select 
           v-model="queryParams.feedbackMonth" 
           placeholder="请选择月" 
@@ -50,53 +50,66 @@
           <el-option label="11月" value="11"></el-option>
           <el-option label="12月" value="12"></el-option>
         </el-select>
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item>
         <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
-    <!-- 培养计划总表 -->
-    <el-table
-      v-loading="loading"
-      :data="dataList"
-      @selection-change="handleSelectionChange"
-      ref="feedbackListSeasonalTable"
-      border
-      :cell-style="tableCellStyle"
-    >
-      <el-table-column label="培养内容" align="center" prop="plantName" width="600px"/>
-      <el-table-column label="开始日期" align="center" prop="startDate"/>
-      <el-table-column label="结束日期" align="center" prop="endDate"/>
-      <el-table-column label="实际完成日期" align="center" prop="dateOfCompletion"/>
-      <el-table-column label="学习状态" align="center" prop="studyState" :formatter="studyStateFormat"/>
-      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-chat-dot-round"
-            v-hasPermi="['spec:plan:edit']"
-            @click="handleFeedback(scope.row)"
-          >详情</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 导师反馈 -->
-    <div>
-      <h3>导师反馈</h3>
-      <editor :min-height="300" v-model="mentorFeedback"/>
-    </div>
-    <!-- 保存按钮 -->
-    <div style="text-align:center;margin: 20px auto;">
-      <el-button 
-        size="medium" 
-        type="success" 
-        @click="handleSave"
+    <!-- 标签页 -->
+    <el-tabs type="border-card" @tab-click="handleTabClick" v-model="activeMonth">
+      <el-tab-pane
+        :key="item.key"
+        v-for="(item) in monthTabs"
+        :label="item.value"
+        :name="item.key"
       >
-        保存
-      </el-button>
-    </div>
+        <!-- 培养计划总表 -->
+        <el-table
+          v-loading="loading"
+          :data="dataList"
+          @selection-change="handleSelectionChange"
+          ref="feedbackListSeasonalTable"
+          border
+          :cell-style="tableCellStyle"
+        >
+          <template slot="empty">
+            <el-empty :image-size="100" description='当月无学习计划'></el-empty>
+          </template>
+          <el-table-column label="培养内容" align="center" prop="plantName" width="600px"/>
+          <el-table-column label="开始日期" align="center" prop="startDate"/>
+          <el-table-column label="结束日期" align="center" prop="endDate"/>
+          <el-table-column label="实际完成日期" align="center" prop="dateOfCompletion"/>
+          <el-table-column label="学习状态" align="center" prop="studyState" :formatter="studyStateFormat"/>
+          <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-chat-dot-round"
+                v-hasPermi="['spec:plan:edit']"
+                @click="handleFeedback(scope.row)"
+              >详情</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 导师反馈 -->
+        <div>
+          <h3>导师反馈</h3>
+          <editor :min-height="300" v-model="mentorFeedback"/>
+        </div>
+        <!-- 保存按钮 -->
+        <div style="text-align:center;margin: 20px auto;">
+          <el-button 
+            size="medium" 
+            type="success" 
+            @click="handleSave"
+          >
+            保存
+          </el-button>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
     <!-- 详情对话框 -->
     <el-dialog v-dialogDrag :title="feedbackDialog.title" :visible.sync="feedbackDialog.open" width="800px" append-to-body>
       <div style="width:700px; margin:0px auto;">
@@ -161,6 +174,23 @@ export default {
   components: { Treeselect, Editor },
   data() {
     return {
+      // 首选标签页
+      activeMonth: null,
+      // 月份标签页
+      monthTabs: [
+        { key: "1", value: "1月" },
+        { key: "2", value: "2月" },
+        { key: "3", value: "3月" },
+        { key: "4", value: "4月" },
+        { key: "5", value: "5月" },
+        { key: "6", value: "6月" },
+        { key: "7", value: "7月" },
+        { key: "8", value: "8月" },
+        { key: "9", value: "9月" },
+        { key: "10", value: "10月" },
+        { key: "11", value: "11月" },
+        { key: "12", value: "12月" }
+      ],
       // 导师标签
       mentorTabs: [],
       // 详情对话框表格数据
@@ -397,6 +427,25 @@ export default {
     this.initPageData();
   },
   methods: {
+    /** 标签页切换事件 */
+    handleTabClick(tab) {
+      this.queryParams.feedbackMonth = tab.name;
+      this.getList();
+      // 清空导师反馈内容
+      this.mentorFeedback = null;
+      // 根据标签页导师id获取反馈id
+      getFeedbackByParams({
+        successorId: this.queryParams.successorId,
+        feedbackYear: this.queryParams.feedbackYear,
+        feedbackMonth: this.queryParams.feedbackMonth,
+      }).then(response => {
+        let data = response.data;
+        // 设置反馈id为当前tab导师反馈id
+        this.feedbackId = data.id;
+        // 刷新导师反馈内容
+        this.mentorFeedback = data.mentorFeedback;
+      });
+    },
     /** 初始化页面数据 */
     initPageData() {
       // 获取当前日期
@@ -405,6 +454,7 @@ export default {
       this.queryParams.feedbackYear = date.getFullYear().toString();
       this.queryParams.feedbackYearTemp = date.getFullYear().toString();
       this.queryParams.feedbackMonth = ( date.getMonth() + 1 ).toString();
+      this.activeMonth = ( date.getMonth() + 1 ).toString();
       // 获取当前导师的学员列表
       listSuccessorsByMentorId(this.queryObject).then(response => {
         let data = response.data;