mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-23 01:36:47 +08:00
feat:添加证书
This commit is contained in:
lixg
312
src/components/student/TableCertificateStudent.vue
Normal file
312
src/components/student/TableCertificateStudent.vue
Normal file
@@ -0,0 +1,312 @@
|
||||
<template>
|
||||
<div class="TableCertificateStudent">
|
||||
<div class="certificatetitle">
|
||||
<span style="margin-left: 32px">培训证书</span>
|
||||
</div>
|
||||
<div class="search">
|
||||
<div class="selectBox">
|
||||
<div>姓名：</div>
|
||||
<a-input
|
||||
class="cus-input"
|
||||
v-model:value="studentName"
|
||||
placeholder="请输入姓名"
|
||||
/>
|
||||
</div>
|
||||
<div class="selectBox">
|
||||
<div>部门：</div>
|
||||
<div class="select in" style="width: 270px">
|
||||
<OrgClass
|
||||
v-model:value="tstudentDepartId"
|
||||
v-model:name="studentDepartName"
|
||||
></OrgClass>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selectBox">
|
||||
<div>选择时间：</div>
|
||||
<div class="select in">
|
||||
<a-range-picker
|
||||
style="width: 320px; height: 40px; border-radius: 8px"
|
||||
:disabled-date="disabledDate"
|
||||
:disabled-time="disabledRangeTime"
|
||||
format="YYYY/MM/DD HH:mm"
|
||||
v-model:value="chooseTime"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-button
|
||||
class="cus-btn"
|
||||
style="background: #4ea6ff; color: #fff; width: 100px"
|
||||
@click="getStuList"
|
||||
>
|
||||
<template #icon>
|
||||
<img
|
||||
style="margin-right: 10px"
|
||||
src="../../assets/images/courseManage/search0.png"
|
||||
/></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button class="cus-btn white" style="width: 100px" @click="reset">
|
||||
<template #icon>
|
||||
<img
|
||||
style="margin-right: 10px"
|
||||
src="../../assets/images/leveladd/reset.png"
|
||||
/></template>
|
||||
重置
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="batch">批量取消证书</div>
|
||||
<div class="tableBox" style="margin-top: 20px">
|
||||
<a-table
|
||||
:columns="tablecolumns"
|
||||
:data-source="stuList"
|
||||
:loading="tableDataTotal === -1 ? true : false"
|
||||
:scroll="{ x: 1000 }"
|
||||
row-key="id"
|
||||
:row-selection="{
|
||||
selectedRowKeys: selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
>
|
||||
</a-table>
|
||||
<div class="tableBox">
|
||||
<div class="pa">
|
||||
<a-pagination
|
||||
v-if="tableDataTotal > 10"
|
||||
:showSizeChanger="false"
|
||||
showQuickJumper="true"
|
||||
hideOnSinglePage="true"
|
||||
:pageSize="pageSize"
|
||||
:current="currentPage"
|
||||
:total="tableDataTotal"
|
||||
class="pagination"
|
||||
@change="changePaginationStu"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
import * as api from "@/api/index1";
|
||||
import OrgClass from "@/components/project/OrgClass";
|
||||
export default {
|
||||
name: "TableCertificateStudent",
|
||||
components: {
|
||||
OrgClass,
|
||||
},
|
||||
props: {
|
||||
projectId: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
//证书id
|
||||
ACertificateCheckId: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const state = reactive({
|
||||
studentName: null,
|
||||
tstudentDepartId: null,
|
||||
studentDepartName: null,
|
||||
tablecolumns: [
|
||||
{
|
||||
title: "工号",
|
||||
dataIndex: "studentUserNo",
|
||||
key: "studentUserNo",
|
||||
width: 40,
|
||||
align: "center",
|
||||
className: "h head",
|
||||
},
|
||||
{
|
||||
title: "姓名",
|
||||
dataIndex: "studentName",
|
||||
key: "studentName",
|
||||
width: 40,
|
||||
align: "center",
|
||||
className: "h head",
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: "studentDepartName",
|
||||
key: "studentDepartName",
|
||||
width: 60,
|
||||
align: "center",
|
||||
className: "h",
|
||||
},
|
||||
{
|
||||
title: "岗位",
|
||||
dataIndex: "studentJobName",
|
||||
key: "studentJobName",
|
||||
width: 60,
|
||||
align: "center",
|
||||
className: "h",
|
||||
},
|
||||
{
|
||||
title: "取得证书时间",
|
||||
dataIndex: "time",
|
||||
key: "time",
|
||||
width: 60,
|
||||
align: "center",
|
||||
className: "h",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "opacation",
|
||||
key: "opacation",
|
||||
width: 60,
|
||||
align: "center",
|
||||
className: "h",
|
||||
customRender: (record) => {
|
||||
// console.log(text.record.checked1);
|
||||
return (
|
||||
<div>
|
||||
{record.record.status === -1 ? (
|
||||
<div class="opa">
|
||||
<span>证书已取消</span>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
class="opa"
|
||||
onClick={() => {
|
||||
updateStuCert(record);
|
||||
}}
|
||||
>
|
||||
<span>取消证书</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
stuList: [
|
||||
{
|
||||
studentUserNo: "1234",
|
||||
studentName: "li",
|
||||
studentDepartName: "开发部",
|
||||
studentJobName: "岗位一",
|
||||
time: "2023-02-04",
|
||||
},
|
||||
],
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
tableDataTotal: 1,
|
||||
selectedRowKeys: [],
|
||||
});
|
||||
//获取证书学员
|
||||
const stuCertList = () => {
|
||||
let obj = {
|
||||
id: props.ACertificateCheckId,
|
||||
pid: props.projectId,
|
||||
};
|
||||
api
|
||||
.stuCertList(obj)
|
||||
.then((res) => {
|
||||
console.log("获取证书学员", res);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("获取证书学员失败", err);
|
||||
});
|
||||
};
|
||||
stuCertList();
|
||||
|
||||
//取消授权
|
||||
const updateStuCert = (text) => {
|
||||
console.log("text", text);
|
||||
};
|
||||
const onSelectChange = (selectedRowKeys, e) => {
|
||||
console.log("selectedRowKeys changed: ", selectedRowKeys, e);
|
||||
state.selectedRowKeys = selectedRowKeys;
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
stuCertList,
|
||||
onSelectChange,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.TableCertificateStudent {
|
||||
table tr th.ant-table-selection-column,
|
||||
table tr td.ant-table-selection-column {
|
||||
padding-left: 3px;
|
||||
}
|
||||
.certificatetitle {
|
||||
width: 100%;
|
||||
height: 74px;
|
||||
padding-top: 40px;
|
||||
border-bottom: 1px solid rgba(232, 232, 232, 1);
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: 25px;
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-top: 31px;
|
||||
margin-left: 8px;
|
||||
.selectBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 24px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.cus-btn {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
border: 1px solid #4ea6ff;
|
||||
border-radius: 8px;
|
||||
background: #4ea6ff;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.batch {
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 32px;
|
||||
cursor: pointer;
|
||||
background: #388be1;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 20px;
|
||||
}
|
||||
.white {
|
||||
background: #fff;
|
||||
color: #4ea6ff;
|
||||
}
|
||||
|
||||
.cus-input {
|
||||
width: 264px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.opa {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #387df7;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user