-- 查看

src/api/indexProjStu.js

@@ -29,6 +29,7 @@ export const studentProcess = (obj) => http.get('/admin/project/studentProcess',
 
 //是否优秀学员
 export const topStudent = (obj) => http.post('/admin/project/topStudent', obj)
+export const updateStudent = (obj) => http.post('/admin/student/updateStudent', obj)
 
 //项目概览
 export const overview = (obj) => http.get('/admin/project/overview', { params: obj })

src/components/drawers/SeeStu.vue

@@ -303,8 +303,8 @@ export default {
     };
     const check = () => {
       let obj = {
-        projectId: 37,
+        projectId: props.projectId,
-        studentId: 3,
+        studentId: props.checkStuId,
       };
       studentProcess(obj).then((res) => {
         console.log("查看了学员", res.data.data);

src/components/student/TableStudent.vue

@@ -3,13 +3,13 @@
     <a-row type="flex" gutter="12" style="padding-left: 20px; margin-right: 0px">
       <a-col>
         <a-form-item title="姓名：">
-					<a-input class="cus-input" v-model:value="tableParam.studentName" placeholder="请输入姓名" />
+          <a-input class="cus-input" v-model:value="tableParam.studentName" placeholder="请输入姓名"/>
         </a-form-item>
       </a-col>
       <a-col>
         <a-button class="cus-btn" style="width: 100px" @click="getStuList">
           <template #icon>
-						<img style="margin-right: 10px" src="../../assets/images/courseManage/search0.png" /></template>
+            <img style="margin-right: 10px" src="../../assets/images/courseManage/search0.png"/></template>
           搜索
         </a-button>
       </a-col>
@@ -24,14 +24,14 @@
         <CommonStudent :type="type" :id="id" @finash="submitCall" :stage="stage">
           <a-button class="cus-btn">
             <template #icon><img style="margin-right: 10px"
-								src="../../assets/images/courseManage/add0.png" /></template>
+                                 src="../../assets/images/courseManage/add0.png"/></template>
             添加学员
           </a-button>
         </CommonStudent>
       </a-col>
       <a-col :span="1.5">
         <a-button class="cus-btn white" @click="bathDel">
-					<template #icon><img style="margin-right: 10px" src="../../assets/images/projectadd/delete.png" /></template>
+          <template #icon><img style="margin-right: 10px" src="../../assets/images/projectadd/delete.png"/></template>
           批量删除
         </a-button>
       </a-col>
@@ -46,7 +46,7 @@
       <a-table :columns="tablecolumns" :data-source="tableData.list" :pagination="stuPagination"
                :loading="tableData.loading" row-key="id" :row-selection="stuRowSelection">
         <template #action="{ record }">
-					<div style="display:flex;justify-content: center;align-items: center;">
+          <!--					<div style="display:flex;justify-content: center;align-items: center;">-->
           <!-- <div v-if="props.type == 1" @click="excellentStudent(record)"
             style="color: #4ea6ff; font-size: 14px; text-align: center;margin-left: 20px;cursor: pointer;">
             优秀学员
@@ -61,36 +61,24 @@
             style="color: #4ea6ff; font-size: 14px; text-align: center;margin-left: 20px;cursor: pointer;">
             调整
           </div> -->
-
+          <!--					</div>-->
-						<div @click="del(record.id)"
+          <a-row gutter="12">
-							style="color: #4ea6ff; font-size: 14px; text-align: center;margin-left: 20px;cursor: pointer;">
-							删除
-						</div>
-					</div>
-					<!-- <a-row gutter="12">
             <a-col>
               <slot name="extension" v-bind:data="{ record }"></slot>
             </a-col>
             <a-col>
-              <a-select style="width: 80px" value="更多">
+              <div @click="del(record.id)"
-                <a-select-option value="删除" label="删除">
+                   style="color: #4ea6ff; font-size: 14px; text-align: center;margin-left: 20px;cursor: pointer;">
-                  <div @click="del(record.id)">删除</div>
-                </a-select-option>
-              </a-select>
-              <div
-                @click="del(record.id)"
-                style="color: #4ea6ff; font-size: 14px; text-align: center"
-              >
                 删除
               </div>
             </a-col>
-          </a-row> -->
+          </a-row>
         </template>
       </a-table>
     </div>
   </div>
   <!-- 批量调整关卡弹窗 -->
-	<ChangeLevelModal v-model:visiblene="visiblene" :stage="stage" :ids="stuSelectKeys" @finash="submitCall" />
+  <ChangeLevelModal v-model:visiblene="visiblene" :stage="stage" :ids="stuSelectKeys" @finash="submitCall"/>
   <!-- 批量调整关卡弹窗 -->
   <!-- 取消学员弹窗 -->
   <div>
@@ -145,16 +133,17 @@
     </a-modal>
   </div>
   <!-- 查看学员 传入查看学员的id-->
-	<see-stu v-model:Seevisible="Seevisible" v-model:checkStuId="checkStuId" v-model:projectId="projectId" />
+  <see-stu v-model:Seevisible="Seevisible" v-model:checkStuId="checkStuId" v-model:projectId="projectId"/>
 </template>
 <script setup>
-import { computed, defineProps, onMounted, ref, watch } from "vue";
+import {computed, defineProps, onMounted, ref, watch} from "vue";
-import { delStudentList, getStuPage } from "@/api/index1";
+import {delStudentList, getStuPage} from "@/api/index1";
 import CommonStudent from "@/components/student/CommonStudent";
 import ChangeLevelModal from "./ChangeLevelModal.vue";
-import { message } from "ant-design-vue";
+import {message} from "ant-design-vue";
 // import { topStudent } from "../../api/indexProjStu";
 import SeeStu from "../../components/drawers/SeeStu";
+
 const props = defineProps({
   type: Number,
   id: String,
@@ -179,6 +168,21 @@ const tablecolumns = ref([
     width: "8%",
     align: "left",
     className: "h",
+    customRender: ({record: {studentName,topFlag}}) => (topFlag?<div
+        style={{
+          display: "flex",
+          alignItems: "center",
+        }}
+    >
+      <span className="stydentName">{studentName}</span>
+      <div className="studentExcellent">
+        <img
+            className="studentExcellentImg"
+            src={require("../../assets/images/taskpage/excellent.png")}
+        />
+        <span className="studentExcellentT">优秀</span>
+      </div>
+    </div>:<div>{studentName}</div>)
   },
   {
     title: "工号",
@@ -204,8 +208,8 @@ const tablecolumns = ref([
     key: "source",
     width: 100,
     align: "center",
-		customRender: ({ record: { source } }) =>
+    customRender: ({record: {source}}) =>
-			({ 1: "快速添加", 2: "组织", 3: "受众" }[source]),
+        ({1: "快速添加", 2: "组织", 3: "受众"}[source]),
   },
   ...props.columns,
   {
@@ -214,7 +218,7 @@ const tablecolumns = ref([
     key: "operation",
     width: "20%",
     align: "center",
-		slots: { customRender: "action" },
+    slots: {customRender: "action"},
   },
 ]);
 const tableParam = ref({
@@ -344,6 +348,7 @@ const canclestu1 = ref(false)
 function cancelyou() {
   canclestu.value = false;
 }
+
 // 优秀学员-设置优秀学员
 function closeModal1() {
   canclestu.value = false;
@@ -356,6 +361,7 @@ function closeModal1() {
 function cancelcanyou() {
   canclestu1.value = false;
 }
+
 // 取消优秀学员-取消优秀学员
 function closeModal3() {
   canclestu1.value = false;
@@ -381,7 +387,37 @@ const projectId = ref(null)
 // }
 
 </script>
-<style>
+<style lang="scss">
+.stydentName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.studentExcellent {
+  width: 64px;
+  height: 24px;
+  border-radius: 2px;
+  border: 1px solid #ffb64e;
+  background-color: rgba(255, 182, 78, 0.1);
+  margin-left: 24px;
+  display: flex;
+  align-items: center;
+
+  .studentExcellentImg {
+    width: 16px;
+    height: 16px;
+    margin-left: 7px;
+  }
+
+  .studentExcellentT {
+    font-size: 12px;
+    font-weight: 400;
+    color: #ffb64e;
+    line-height: 17px;
+    margin-left: 3px;
+  }
+}
+
 .studentopea1 {
   font-size: 14px;
   font-weight: 400;
@@ -448,7 +484,7 @@ const projectId = ref(null)
   position: relative;
 }
 
-.del_main>.header {
+.del_main > .header {
   display: flex;
   align-items: center;
   padding-top: 20px;
@@ -535,7 +571,7 @@ const projectId = ref(null)
   top: 105px !important;
 }
 
-.ant-modal-body>.delete {
+.ant-modal-body > .delete {
   z-index: 999;
   width: 424px;
   height: 258px;
@@ -546,7 +582,7 @@ const projectId = ref(null)
 
 }
 
-.ant-modal-body>.del_header {
+.ant-modal-body > .del_header {
   position: absolute;
   width: calc(100%);
   height: 68px;
@@ -554,12 +590,12 @@ const projectId = ref(null)
       rgba(78, 166, 255, 0) 100%);
 }
 
-.ant-modal-body>.del_main {
+.ant-modal-body > .del_main {
   width: 100%;
   position: relative;
 }
 
-.ant-modal-body>.del_main>.header {
+.ant-modal-body > .del_main > .header {
   display: flex;
   align-items: center;
   padding-top: 20px;
@@ -569,7 +605,7 @@ const projectId = ref(null)
 
 }
 
-.ant-modal-body>.del_main>.header>.icon1 {
+.ant-modal-body > .del_main > .header > .icon1 {
   width: 16px;
   height: 16px;
   margin-right: 10px;
@@ -577,7 +613,7 @@ const projectId = ref(null)
   background-size: 100% 100%;
 }
 
-.ant-modal-body>.del_main>.header>.close_exit {
+.ant-modal-body > .del_main > .header > .close_exit {
   position: absolute;
   right: 42px;
   cursor: pointer;
@@ -587,7 +623,7 @@ const projectId = ref(null)
   background-size: 100% 100%;
 }
 
-.ant-modal-body>.del_main>.body {
+.ant-modal-body > .del_main > .body {
   width: 100%;
   margin: 34px auto 56px auto;
   display: flex;
@@ -599,7 +635,7 @@ const projectId = ref(null)
 
 }
 
-.ant-modal-body>.del_main>.body>.back {
+.ant-modal-body > .del_main > .body > .back {
   position: absolute;
   top: 30px;
   font-size: 12px;
@@ -607,13 +643,13 @@ const projectId = ref(null)
   color: #666666;
 }
 
-.ant-modal-body>.del_main>.del_btnbox {
+.ant-modal-body > .del_main > .del_btnbox {
   display: flex;
   margin: 30px auto;
   justify-content: center;
 }
 
-.ant-modal-body>.del_main>.del_btnbox>.del_btn {
+.ant-modal-body > .del_main > .del_btnbox > .del_btn {
   width: 100px;
   height: 40px;
   background: rgba(64, 158, 255, 0);
@@ -625,24 +661,24 @@ const projectId = ref(null)
   cursor: pointer;
 }
 
-.ant-modal-body>.del_main>.del_btnbox>.del_btn>.btnText {
+.ant-modal-body > .del_main > .del_btnbox > .del_btn > .btnText {
   font-size: 14px;
   font-weight: 400;
   line-height: 40px;
 }
 
-.ant-modal-body>.del_main>.del_btnbox>.btn1 {
+.ant-modal-body > .del_main > .del_btnbox > .btn1 {
   border: 1px solid rgba(64, 158, 255, 1);
   color: #4ea6ff;
   margin-right: 14px;
 }
 
-.ant-modal-body>.del_main>.del_btnbox>.btn2 {
+.ant-modal-body > .del_main > .del_btnbox > .btn2 {
   background-color: #4ea6ff;
   color: #ffffff;
 }
 
-.canclestu>.ant-modal {
+.canclestu > .ant-modal {
   width: 424px !important;
   height: 258px !important;
 }

src/views/projectcenter/TaskPage.vue

@@ -700,7 +700,24 @@
                   :columns="stuColumns"
                   :stage="stage"
                   :visable ="tabFlag"
-                ></TableStudent>
+                >
+                  <template #extension="{data:{record}}">
+                    <div style="display:flex">
+                      <div
+                          @click="showStudent(record)"
+                          style="color: #4ea6ff; font-size: 14px; text-align: center;margin-left: 20px;cursor: pointer;"
+                      >
+                        查看
+                      </div>
+                      <div
+                          @click="settingTopFlag(record)"
+                          style="color: #4ea6ff; font-size: 14px; text-align: center;margin-left: 20px;cursor: pointer;"
+                      >
+                        {{record.topFlag?'取消优秀':'优秀学员'}}
+                      </div>
+                    </div>
+                  </template>
+                </TableStudent>
               </a-tab-pane>
             </a-tabs>
           </div>
@@ -1275,7 +1292,7 @@
         :closable="close"
         wrapClassName="canclestu"
         centered="true"
-        @cancel="closeModal1"
+        @cancel="cancelyou"
       >
         <div class="delete">
           <div class="del_header"></div>
@@ -1288,11 +1305,11 @@
               <span>您是否授予此学员优秀学员称号？</span>
             </div>
             <div class="del_btnbox">
-              <div class="del_btn btn1">
+              <div class="del_btn btn1" @click="cancelyou">
-                <div class="btnText" @click="cancelyou">取消</div>
+                <div class="btnText">取消</div>
               </div>
-              <div class="del_btn btn2">
+              <div class="del_btn btn2"  @click="closeModal1">
-                <div class="btnText" @click="closeModal1">确定</div>
+                <div class="btnText">确定</div>
               </div>
             </div>
           </div>
@@ -1320,11 +1337,11 @@
               <span>您是否取消此学员优学员称号？</span>
             </div>
             <div class="del_btnbox">
-              <div class="del_btn btn1">
+              <div class="del_btn btn1" @click="cancelcanyou">
-                <div class="btnText" @click="cancelcanyou">取消</div>
+                <div class="btnText">取消</div>
               </div>
-              <div class="del_btn btn2">
+              <div class="del_btn btn2" @click="closeModal3">
-                <div class="btnText" @click="closeModal3">确定</div>
+                <div class="btnText">确定</div>
               </div>
             </div>
           </div>
@@ -1678,7 +1695,7 @@ import {
   getGroupList,
   deleteGroup,
   editGroup,
-  topStudent,
+  topStudent, updateStudent,
 } from "../../api/indexProjStu";
 import { message, Modal } from "ant-design-vue";
 import * as apitl from "../../api/index";
@@ -1725,6 +1742,7 @@ export default {
     const store = useStore();
     const route = useRoute();
     const state = reactive({
+      editRecord:{},
       tabFlag:true,
       stage: [],
       stuColumns: [
@@ -2559,24 +2577,10 @@ export default {
     };
     //点击确定授予优秀学员后
     const closeModal1 = () => {
-      let obj = {
+      state.editRecord.topFlag = 1
-        projectId: state.projectId,
+      updateStudent(state.editRecord)
-        studentIds: state.changeGoods,
-        topFlag: 1,
-      };
-      topStudent(obj)
-        .then((res) => {
-          console.log(`优秀学员授予成功${res.data}`);
-          message.success("优秀学员称号授予成功");
-
-          getStu();
-        })
-        .catch((err) => {
-          console.log(`优秀学员授予成功${err}`);
-          message.warning("优秀学员称号授予失败");
-        });
-      state.changeGoods = [];
       state.canclestu = false;
+      message.success("优秀学员称号授予成功");
     };
 
     //点击取消授予优秀学员后
@@ -2589,24 +2593,10 @@ export default {
     };
     //点击确定取消优秀学员称号
     const closeModal3 = () => {
-      let obj = {
+      state.editRecord.topFlag = 0
-        projectId: state.projectId,
+      updateStudent(state.editRecord)
-        studentIds: state.changeGoods,
-        topFlag: 0,
-      };
-      topStudent(obj)
-        .then((res) => {
-          console.log(`取消优秀学员称号成功${res}`);
-          message.success("优秀学员称号取消成功");
-
-          getStu();
-        })
-        .catch((err) => {
-          console.log(`取消优秀学员称号失败${err}`);
-          message.warning("优秀学员称号取消失败");
-        });
-      state.changeGoods = [];
       state.canclestu1 = false;
+      message.success("优秀学员称号取消成功");
     };
     //点击取消取消授予优秀学员后
     const cancelcanyou = () => {
@@ -4024,9 +4014,19 @@ export default {
       };
       state.codeInfo = obj;
     };
+    function settingTopFlag(record){
+      record.topFlag?(state.canclestu1 = true):(state.canclestu=true)
+      state.editRecord = record
+    }
+    function showStudent(record){
+      state.Seevisible = true
+      state.checkStuId = record.studentId
+    }
     return {
       ...toRefs(state),
       ...toRefs(levelList),
+      showStudent,
+      settingTopFlag,
       totask,
       tostudent,
       showModal,