style:增加项目学员样式

src/components/student/TableStudent.vue

@@ -1,37 +1,82 @@
 <template>
   <div>
-    <a-row type="flex" gutter="12" style="padding-left: 20px; margin-right: 0px">
+    <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>
       <a-col :span="2">
-        <a-button class="cus-btn white" style="width: 100px" @click="reset">重置
+        <a-button class="cus-btn white" style="width: 100px" @click="reset"
+          >重置
         </a-button>
       </a-col>
     </a-row>
 
-    <a-row type="flex" gutter="12" style="padding-left: 20px; margin-right: 0px">
+    <a-row
+      type="flex"
+      gutter="12"
+      style="padding-left: 20px; margin-right: 0px"
+    >
       <a-col :span="1.5">
-        <CommonStudent :type="type" :id="id" @finash="submitCall" :stage="stage">
+        <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>
+            <template #icon
+              ><img
+                style="margin-right: 10px"
+                src="../../assets/images/courseManage/add0.png"
+            /></template>
             添加学员
           </a-button>
         </CommonStudent>
       </a-col>
+      <!-- 新加导入学员 批量换组 导出学习信息  -->
+      <a-col :span="1.5">
+        <a-button class="cus-btn white">
+          <template #icon
+            ><img
+              style="margin-right: 10px"
+              src="../../assets/images/basicinfo/in2.png"
+          /></template>
+          导入学员
+        </a-button>
+      </a-col>
+      <a-col :span="1.5" v-if="type === 1">
+        <a-button class="cus-btn white"> 批量换组 </a-button>
+      </a-col>
+      <a-col :span="1.5" v-if="type === 1">
+        <a-button class="cus-btn white"> 导出学习信息 </a-button>
+      </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>
@@ -43,8 +88,14 @@
       </a-col>
     </a-row>
     <div style="margin-top: 20px">
-      <a-table :columns="tablecolumns" :data-source="tableData.list" :pagination="stuPagination"
-               :loading="tableData.loading" row-key="id" :row-selection="stuRowSelection">
+      <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 v-if="props.type == 1" @click="excellentStudent(record)"
@@ -66,9 +117,31 @@
             <a-col>
               <slot name="extension" v-bind:data="{ record }"></slot>
             </a-col>
+            <!-- 新加 -->
+            <a-col v-if="type === 1">
+              <div
+                style="
+                  color: #4ea6ff;
+                  font-size: 14px;
+                  text-align: center;
+                  margin-left: 10px;
+                  cursor: pointer;
+                "
+              >
+                换组
+              </div>
+            </a-col>
             <a-col>
-              <div @click="del(record.id)"
-                   style="color: #4ea6ff; font-size: 14px; text-align: center;margin-left: 20px;cursor: pointer;">
+              <div
+                @click="del(record.id)"
+                style="
+                  color: #4ea6ff;
+                  font-size: 14px;
+                  text-align: center;
+                  margin-left: 10px;
+                  cursor: pointer;
+                "
+              >
                 删除
               </div>
             </a-col>
@@ -78,12 +151,23 @@
     </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>
-    <a-modal v-model:visible="canclestu" :footer="null" :closable="close" wrapClassName="canclestu" centered="true"
-             @cancel="closeModal1">
+    <a-modal
+      v-model:visible="canclestu"
+      :footer="null"
+      :closable="close"
+      wrapClassName="canclestu"
+      centered="true"
+      @cancel="closeModal1"
+    >
       <div class="delete">
         <div class="del_header"></div>
         <div class="del_main">
@@ -109,7 +193,13 @@
   <!-- 取消学员弹窗 -->
   <!-- 优秀学员弹窗 -->
   <div>
-    <a-modal v-model:visible="canclestu1" :footer="null" :closable="close" wrapClassName="canclestu1" centered="true">
+    <a-modal
+      v-model:visible="canclestu1"
+      :footer="null"
+      :closable="close"
+      wrapClassName="canclestu1"
+      centered="true"
+    >
       <div class="delete">
         <div class="del_header"></div>
         <div class="del_main">
@@ -133,14 +223,18 @@
     </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 {delStudentList, getStuPage} from "@/api/index1";
+import { computed, defineProps, onMounted, ref, watch } from "vue";
+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";
 
@@ -169,21 +263,26 @@ const tablecolumns = ref([
     align: "left",
     className: "h",
     ellipsis: true,
-    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>)
+    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: "工号",
@@ -209,17 +308,17 @@ const tablecolumns = ref([
     key: "source",
     width: 100,
     align: "center",
-    customRender: ({record: {source}}) =>
-        ({1: "快速添加", 2: "组织", 3: "受众", 4: '报名'}[source]),
+    customRender: ({ record: { source } }) =>
+      ({ 1: "快速添加", 2: "组织", 3: "受众", 4: "报名" }[source]),
   },
   ...props.columns,
   {
     title: "操作",
     dataIndex: "operation",
     key: "operation",
-    width: "20%",
+    width: 170,
     align: "center",
-    slots: {customRender: "action"},
+    slots: { customRender: "action" },
   },
 ]);
 const tableParam = ref({
@@ -252,11 +351,9 @@ watch(props, () => {
     stuSelectKeys.value = [];
     console.log("关闭了");
   }
-  console.log("props.visable", props.visable)
+  console.log("props.visable", props.visable);
   tableParam.value.pid = props.id;
   getStuList();
-
-
 });
 
 function onStuSelectChange(e) {
@@ -292,27 +389,26 @@ function reset() {
 }
 
 function bathDel() {
-  if (stuSelectKeys.value &&
-      stuSelectKeys.value.length === 0) {
+  if (stuSelectKeys.value && stuSelectKeys.value.length === 0) {
     message.destroy();
     return message.warning("请先选中学员");
   }
   stuSelectKeys.value &&
-  stuSelectKeys.value.length &&
-  delStudentList({
-    ids: stuSelectKeys.value,
-  }).then(() => {
-    getStuList();
-  });
+    stuSelectKeys.value.length &&
+    delStudentList({
+      ids: stuSelectKeys.value,
+    }).then(() => {
+      getStuList();
+    });
 }
 
 function del(id) {
   id &&
-  delStudentList({
-    ids: [id],
-  }).then(() => {
-    getStuList();
-  });
+    delStudentList({
+      ids: [id],
+    }).then(() => {
+      getStuList();
+    });
 }
 
 function submitCall(flag) {
@@ -324,15 +420,15 @@ function submitCall(flag) {
 const visiblene = ref(false);
 const showChangeModal = () => {
   if (!stuSelectKeys.value.length) {
-    message.error("请选择学员")
-    return
+    message.error("请选择学员");
+    return;
   }
   visiblene.value = true;
 };
 
 // 优秀学员
-const canclestu = ref(false)
-const canclestu1 = ref(false)
+const canclestu = ref(false);
+const canclestu1 = ref(false);
 
 // function excellentStudent(record) {
 // 	console.log(record)
@@ -354,8 +450,6 @@ function cancelyou() {
 function closeModal1() {
   canclestu.value = false;
   // 授予优秀学员操作
-
-
 }
 
 // 取消优秀学员-弹框关闭
@@ -367,14 +461,12 @@ function cancelcanyou() {
 function closeModal3() {
   canclestu1.value = false;
   // 取消优秀学员操作
-
-
 }
 
 // 查看学员
-const Seevisible = ref(false)
-const checkStuId = ref(null)
-const projectId = ref(null)
+const Seevisible = ref(false);
+const checkStuId = ref(null);
+const projectId = ref(null);
 
 // function seeStudent(record) {
 // 	console.log(record)
@@ -386,7 +478,6 @@ const projectId = ref(null)
 
 // 	console.log(checkStuId.value, projectId.value)
 // }
-
 </script>
 <style lang="scss">
 .stydentName {
@@ -457,7 +548,10 @@ const projectId = ref(null)
   position: absolute;
   width: calc(100%);
   height: 40px;
-  background: linear-gradient(rgba(78, 166, 255, 0.2) 0%, rgba(78, 166, 255, 0) 100%);
+  background: linear-gradient(
+    rgba(78, 166, 255, 0.2) 0%,
+    rgba(78, 166, 255, 0) 100%
+  );
 }
 
 /*.delete {