From 2087e151bbca5f2c41451042c929689f79628f40 Mon Sep 17 00:00:00 2001
From: wuyx <wuyx@dongwu-inc.com>
Date: Mon, 26 Dec 2022 16:16:10 +0800
Subject: [PATCH] =?UTF-8?q?style:=E9=83=A8=E5=88=86=E5=AD=A6=E5=91=98?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/student/TableStudent.vue | 803 +++++++++++++++++-------
 1 file changed, 564 insertions(+), 239 deletions(-)

diff --git a/src/components/student/TableStudent.vue b/src/components/student/TableStudent.vue
index 5985f976..b516df37 100644
--- a/src/components/student/TableStudent.vue
+++ b/src/components/student/TableStudent.vue
@@ -1,92 +1,73 @@
 <template>
-  <div>
-    <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-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>
-          搜索
-        </a-button>
-      </a-col>
-      <a-col :span="2">
-        <a-button class="cus-btn white" style="width: 100px" @click="reset"
-          >重置
-        </a-button>
-      </a-col>
-    </a-row>
+	<div>
+		<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-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>
+					搜索
+				</a-button>
+			</a-col>
+			<a-col :span="2">
+				<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-col :span="1.5">
-        <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>
-            添加学员
-          </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>
-          批量删除
-        </a-button>
-      </a-col>
-      <a-col :span="1.5" v-if="type === 2">
-        <a-button class="cus-btn white" @click="showChangeModal">
-          <template #icon></template>
-          批量调整关卡
-        </a-button>
-      </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"
-      >
-        <template #action="{ record }">
-          <div
-            @click="del(record.id)"
-            style="color: #4ea6ff; font-size: 14px; text-align: center;margin-left: 20px;cursor: pointer;"
-          >
-            删除
-          </div>
-          <!-- <a-row gutter="12">
+		<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">
+					<a-button class="cus-btn">
+						<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" @click="bathDel">
+					<template #icon><img style="margin-right: 10px" src="../../assets/images/projectadd/delete.png" /></template>
+					批量删除
+				</a-button>
+			</a-col>
+			<a-col :span="1.5" v-if="type === 2">
+				<a-button class="cus-btn white" @click="showChangeModal">
+					<template #icon></template>
+					批量调整关卡
+				</a-button>
+			</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">
+				<template #action="{ record }">
+					<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;">
+							优秀学员
+						</div>
+
+						<div @click="seeStudent(record)"
+							style="color: #4ea6ff; font-size: 14px; text-align: center;margin-left: 20px;cursor: pointer;">
+							查看
+						</div>
+
+						<div v-if="props.type == 2" @click="seeStudent(record)"
+							style="color: #4ea6ff; font-size: 14px; text-align: center;margin-left: 20px;cursor: pointer;">
+							调整
+						</div> -->
+
+						<div @click="del(record.id)"
+							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>
@@ -104,221 +85,565 @@
               </div>
             </a-col>
           </a-row> -->
-        </template>
-      </a-table>
-    </div>
-  </div>
-  <!-- 批量调整关卡弹窗 -->
-  <ChangeLevelModal v-model:visiblene="visiblene" :stage="stage" :ids="stuSelectKeys"  @finash="submitCall"/>
-  <!-- 批量调整关卡弹窗 -->
+				</template>
+			</a-table>
+		</div>
+	</div>
+	<!-- 批量调整关卡弹窗 -->
+	<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">
+			<div class="delete">
+				<div class="del_header"></div>
+				<div class="del_main">
+					<div class="header">
+						<div class="icon1"></div>
+						<span>提示</span>
+					</div>
+					<div class="body">
+						<span>您是否授予此学员优秀学员称号？</span>
+					</div>
+					<div class="del_btnbox">
+						<div class="del_btn btn1" @click="cancelyou">
+							<div class="btnText">取消</div>
+						</div>
+						<div class="del_btn btn2" @click="closeModal1">
+							<div class="btnText">确定</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</a-modal>
+	</div>
+	<!-- 取消学员弹窗 -->
+	<!-- 优秀学员弹窗 -->
+	<div>
+		<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">
+					<div class="header">
+						<div class="icon1"></div>
+						<span>提示</span>
+					</div>
+					<div class="body">
+						<span>您是否取消此学员优学员称号？</span>
+					</div>
+					<div class="del_btnbox">
+						<div class="del_btn btn1">
+							<div class="btnText" @click="cancelcanyou">取消</div>
+						</div>
+						<div class="del_btn btn2">
+							<div class="btnText" @click="closeModal3">确定</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</a-modal>
+	</div>
+	<!-- 查看学员 传入查看学员的id-->
+	<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 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,
-  columns: {
-    type: Array,
-    default: () => [],
-  },
-  stage: {
-    type: Array,
-    default: () => [],
-  }, 
-  visable: {
-    type: Boolean,
-    default:false,
-  },
+	type: Number,
+	id: String,
+	columns: {
+		type: Array,
+		default: () => [],
+	},
+	stage: {
+		type: Array,
+		default: () => [],
+	},
+	visable: {
+		type: Boolean,
+		default: false,
+	},
 });
 const tablecolumns = ref([
-  {
-    title: "姓名",
-    dataIndex: "studentName",
-    key: "studentName",
-    width: "8%",
-    align: "left",
-    className: "h",
-  },
-  {
-    title: "工号",
-    dataIndex: "studentUserNo",
-    key: "studentUserNo",
-    width: "20%",
-    align: "center",
-    className: "h",
-    ellipsis: true,
-  },
-  {
-    title: "部门",
-    dataIndex: "studentDepartName",
-    key: "studentDepartName",
-    width: "15%",
-    align: "center",
-    className: "h",
-    ellipsis: true,
-  },
-  {
-    title: "加入方式",
-    dataIndex: "source",
-    key: "source",
-    width: 100,
-    align: "center",
-    customRender: ({ record: { source } }) =>
-      ({ 1: "快速添加", 2: "组织", 3: "受众" }[source]),
-  },
-  ...props.columns,
-  {
-    title: "操作",
-    dataIndex: "operation",
-    key: "operation",
-    width: "20%",
-    align: "center",
-    slots: { customRender: "action" },
-  },
+	{
+		title: "姓名",
+		dataIndex: "studentName",
+		key: "studentName",
+		width: "8%",
+		align: "left",
+		className: "h",
+	},
+	{
+		title: "工号",
+		dataIndex: "studentUserNo",
+		key: "studentUserNo",
+		width: "20%",
+		align: "center",
+		className: "h",
+		ellipsis: true,
+	},
+	{
+		title: "部门",
+		dataIndex: "studentDepartName",
+		key: "studentDepartName",
+		width: "15%",
+		align: "center",
+		className: "h",
+		ellipsis: true,
+	},
+	{
+		title: "加入方式",
+		dataIndex: "source",
+		key: "source",
+		width: 100,
+		align: "center",
+		customRender: ({ record: { source } }) =>
+			({ 1: "快速添加", 2: "组织", 3: "受众" }[source]),
+	},
+	...props.columns,
+	{
+		title: "操作",
+		dataIndex: "operation",
+		key: "operation",
+		width: "20%",
+		align: "center",
+		slots: { customRender: "action" },
+	},
 ]);
 const tableParam = ref({
-  studentName: "",
-  pageNo: 1,
-  pageSize: 10,
-  type: props.type,
-  pid: props.id,
+	studentName: "",
+	pageNo: 1,
+	pageSize: 10,
+	type: props.type,
+	pid: props.id,
 });
 const stuSelectKeys = ref([]);
 const tableData = ref({
-  list: [],
-  total: 0,
-  loading: false,
+	list: [],
+	total: 0,
+	loading: false,
 });
 
 const stuRowSelection = computed(() => ({
-  columnWidth: 20,
-  selectedRowKeys: stuSelectKeys.value,
-  onChange: onStuSelectChange,
-  preserveSelectedRowKeys: true,
+	columnWidth: 20,
+	selectedRowKeys: stuSelectKeys.value,
+	onChange: onStuSelectChange,
+	preserveSelectedRowKeys: true,
 }));
 
 onMounted(() => {
-  getStuList();
+	getStuList();
 });
 
 watch(props, () => {
-  if(!props.visable){
-    stuSelectKeys.value =[];
-    console.log("关闭了");
-  }
-  console.log("props.visable",props.visable)
-  tableParam.value.pid = props.id;
-  getStuList();
- 
-    
+	if (!props.visable) {
+		stuSelectKeys.value = [];
+		console.log("关闭了");
+	}
+	console.log("props.visable", props.visable)
+	tableParam.value.pid = props.id;
+	getStuList();
+
+
 });
 
 function onStuSelectChange(e) {
-  stuSelectKeys.value = e;
+	stuSelectKeys.value = e;
 }
 
 const stuPagination = computed(() => ({
-  total: tableData.value.total,
-  showSizeChanger: false,
-  current: tableParam.value.pageNo,
-  pageSize: tableParam.value.pageSize,
-  onChange: changePagination,
+	total: tableData.value.total,
+	showSizeChanger: false,
+	current: tableParam.value.pageNo,
+	pageSize: tableParam.value.pageSize,
+	onChange: changePagination,
 }));
 
 function changePagination(page) {
-  tableParam.value.pageNo = page;
-  getStuList();
+	tableParam.value.pageNo = page;
+	getStuList();
 }
 
 function getStuList() {
-  tableData.value.loading = true;
-  getStuPage(tableParam.value).then((res) => {
-    console.log("学员管理-获取学员", res.data);
-    tableData.value.total = res.data.data.total;
-    tableData.value.list = res.data.data.records;
-    tableData.value.loading = false;
-  });
+	tableData.value.loading = true;
+	getStuPage(tableParam.value).then((res) => {
+		console.log("学员管理-获取学员", res.data);
+		tableData.value.total = res.data.data.total;
+		tableData.value.list = res.data.data.records;
+		tableData.value.loading = false;
+	});
 }
 
 function reset() {
-  tableParam.value.studentName="";
-  getStuList();
+	tableParam.value.studentName = "";
+	getStuList();
 }
 
 function bathDel() {
-  if( stuSelectKeys.value &&
-    stuSelectKeys.value.length === 0){
-      message.destroy();
-    return message.warning("请先选中学员");
-  }
-  stuSelectKeys.value &&
-    stuSelectKeys.value.length &&
-    delStudentList({
-      ids: stuSelectKeys.value,
-    }).then(() => {
-      getStuList();
-    });
+	if (stuSelectKeys.value &&
+		stuSelectKeys.value.length === 0) {
+		message.destroy();
+		return message.warning("请先选中学员");
+	}
+	stuSelectKeys.value &&
+		stuSelectKeys.value.length &&
+		delStudentList({
+			ids: stuSelectKeys.value,
+		}).then(() => {
+			getStuList();
+		});
 }
 
 function del(id) {
-  id &&
-    delStudentList({
-      ids: [id],
-    }).then(() => {
-      getStuList();
-    });
+	id &&
+		delStudentList({
+			ids: [id],
+		}).then(() => {
+			getStuList();
+		});
 }
 
 function submitCall(flag) {
-  tableData.value.loading = true;
-  flag && getStuList();
+	tableData.value.loading = true;
+	flag && getStuList();
 }
 
 // 调整关卡;
 const visiblene = ref(false);
 const showChangeModal = () => {
-  if(!stuSelectKeys.value.length){
-    message.error("请选择学员")
-    return
-  }
-  visiblene.value = true;
+	if (!stuSelectKeys.value.length) {
+		message.error("请选择学员")
+		return
+	}
+	visiblene.value = true;
 };
+
+// 优秀学员
+const canclestu = ref(false)
+const canclestu1 = ref(false)
+
+// function excellentStudent(record) {
+// 	console.log(record)
+// 	if (record.topFlag) {
+// 		// 当该名学员是优秀学员时候
+// 		canclestu1.value = true;
+// 	} else {
+// 		// 当该名学员不是优秀学员时候
+// 		canclestu.value = true;
+// 	}
+// }
+
+// 优秀学员-弹框关闭
+function cancelyou() {
+	canclestu.value = false;
+}
+// 优秀学员-设置优秀学员
+function closeModal1() {
+	canclestu.value = false;
+	// 授予优秀学员操作
+
+
+}
+
+// 取消优秀学员-弹框关闭  
+function cancelcanyou() {
+	canclestu1.value = false;
+}
+// 取消优秀学员-取消优秀学员
+function closeModal3() {
+	canclestu1.value = false;
+	// 取消优秀学员操作
+
+
+}
+
+// 查看学员
+const Seevisible = ref(false)
+const checkStuId = ref(null)
+const projectId = ref(null)
+
+// function seeStudent(record) {
+// 	console.log(record)
+// 	checkStuId.value = record.id;
+// 	projectId.value = props.id;
+// 	Seevisible.value = true;
+
+// 	console.log(props.type)
+
+// 	console.log(checkStuId.value, projectId.value)
+// }
+
 </script>
 <style>
 .studentopea1 {
-  font-size: 14px;
-  font-weight: 400;
-  color: #387df7;
-  line-height: 22px;
-  padding-right: 8px;
-  border-right: 1px solid #e9e9e9;
-  cursor: pointer;
+	font-size: 14px;
+	font-weight: 400;
+	color: #387df7;
+	line-height: 22px;
+	padding-right: 8px;
+	border-right: 1px solid #e9e9e9;
+	cursor: pointer;
 }
+
 .cus-btn {
-  width: 100%;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 16px;
-  border: 1px solid #4ea6ff;
-  border-radius: 8px;
-  background: #4ea6ff;
-  cursor: pointer;
-  color: #fff;
+	width: 100%;
+	height: 40px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-right: 16px;
+	border: 1px solid #4ea6ff;
+	border-radius: 8px;
+	background: #4ea6ff;
+	cursor: pointer;
+	color: #fff;
 }
 
 .white {
-  background: #fff;
-  color: #4ea6ff;
+	background: #fff;
+	color: #4ea6ff;
 }
 
 .cus-input {
-  height: 40px;
-  border-radius: 8px;
+	height: 40px;
+	border-radius: 8px;
+}
+
+.del_header {
+	position: absolute;
+	width: calc(100%);
+	height: 40px;
+	background: linear-gradient(rgba(78, 166, 255, 0.2) 0%, rgba(78, 166, 255, 0) 100%);
+}
+
+.delete {
+	z-index: 9999;
+	width: 424px;
+	background: #ffffff;
+	box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+	border-radius: 4px;
+	position: absolute;
+	left: 50%;
+	top: 10%;
+	transform: translate(-50%, -50%);
+}
+
+.body {
+	width: 100%;
+	margin: 34px auto 56px auto;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.del_main {
+	width: 100%;
+	position: relative;
+}
+
+.del_main>.header {
+	display: flex;
+	align-items: center;
+	padding-top: 20px;
+	padding-left: 26px;
+	font-size: 16px;
+}
+
+.del-icon {
+	width: 16px;
+	height: 16px;
+	margin-right: 10px;
+	background-image: url(@/assets/images/coursewareManage/notice.png);
+	background-size: 100% 100%;
+}
+
+.icon {
+	width: 16px;
+	height: 16px;
+	margin-right: 10px;
+	background-image: url(@/assets/images/coursewareManage/QR.png);
+	background-size: 100% 100%;
+}
+
+.close_exit {
+	position: absolute;
+	right: 42px;
+	cursor: pointer;
+	width: 20px;
+	height: 20px;
+	background-image: url(@/assets/images/coursewareManage/close.png);
+	background-size: 100% 100%;
+}
+
+.del_btnbox {
+	display: flex;
+	margin: 30px auto;
+	justify-content: center;
+}
+
+.del_btn {
+	width: 100px;
+	height: 40px;
+	background: rgba(64, 158, 255, 0);
+	border-radius: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-right: 14px;
+	flex-shrink: 0;
+	cursor: pointer;
+}
+
+.btnText {
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 40px;
+}
+
+.btn1 {
+	border: 1px solid rgba(64, 158, 255, 1);
+	color: #4ea6ff;
+}
+
+.btn2 {
+	background-color: #4ea6ff;
+	color: #ffffff;
+}
+
+.ant-modal-close {
+	margin-right: 18px;
+	margin-top: 5px;
+}
+
+.ant-modal-content {
+	width: 424px !important;
+	height: 258px !important;
+}
+
+.ant-modal-body {
+	width: 424px !important;
+	height: 258px !important;
+	padding: 0 !important;
+	position: relative;
+	top: 105px !important;
+}
+
+.ant-modal-body>.delete {
+	z-index: 999;
+	width: 424px;
+	height: 258px;
+	background: #ffffff;
+	box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+	border-radius: 4px;
+
+
+}
+
+.ant-modal-body>.del_header {
+	position: absolute;
+	width: calc(100%);
+	height: 68px;
+	background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
+			rgba(78, 166, 255, 0) 100%);
+}
+
+.ant-modal-body>.del_main {
+	width: 100%;
+	position: relative;
+}
+
+.ant-modal-body>.del_main>.header {
+	display: flex;
+	align-items: center;
+	padding-top: 20px;
+	padding-left: 26px;
+	font-size: 16px;
+
+
+}
+
+.ant-modal-body>.del_main>.header>.icon1 {
+	width: 16px;
+	height: 16px;
+	margin-right: 10px;
+	background-image: url(@/assets/images/coursewareManage/QR.png);
+	background-size: 100% 100%;
+}
+
+.ant-modal-body>.del_main>.header>.close_exit {
+	position: absolute;
+	right: 42px;
+	cursor: pointer;
+	width: 20px;
+	height: 20px;
+	background-image: url(@/assets/images/coursewareManage/close.png);
+	background-size: 100% 100%;
+}
+
+.ant-modal-body>.del_main>.body {
+	width: 100%;
+	margin: 34px auto 56px auto;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	position: relative;
+
+
+}
+
+.ant-modal-body>.del_main>.body>.back {
+	position: absolute;
+	top: 30px;
+	font-size: 12px;
+	font-weight: 400;
+	color: #666666;
+}
+
+.ant-modal-body>.del_main>.del_btnbox {
+	display: flex;
+	margin: 30px auto;
+	justify-content: center;
+}
+
+.ant-modal-body>.del_main>.del_btnbox>.del_btn {
+	width: 100px;
+	height: 40px;
+	background: rgba(64, 158, 255, 0);
+	border-radius: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	cursor: pointer;
+}
+
+.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 {
+	border: 1px solid rgba(64, 158, 255, 1);
+	color: #4ea6ff;
+	margin-right: 14px;
+}
+
+.ant-modal-body>.del_main>.del_btnbox>.btn2 {
+	background-color: #4ea6ff;
+	color: #ffffff;
+}
+
+.canclestu>.ant-modal {
+	width: 424px !important;
+	height: 258px !important;
 }
 </style>
\ No newline at end of file