mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-22 17:26:46 +08:00
559 lines
13 KiB
Vue
559 lines
13 KiB
Vue
<template>
|
|
<!-- 员工学习数据页面 -->
|
|
<div class="employeelearning">
|
|
<!-- 以下为顶部搜索框 -->
|
|
<div class="filter">
|
|
<div class="select">
|
|
<a-select
|
|
style="width: 100%"
|
|
placeholder="请选择组织"
|
|
v-model:value="orgId"
|
|
:options="option"
|
|
allowClear
|
|
></a-select>
|
|
</div>
|
|
<div class="select">
|
|
<a-input
|
|
style="width: 100%; height: 40px; border-radius: 8px"
|
|
placeholder="请输入姓名"
|
|
v-model:value="name"
|
|
allowClear
|
|
showSearch
|
|
>
|
|
</a-input>
|
|
</div>
|
|
<div class="select">
|
|
<a-input
|
|
style="width: 100%; height: 40px; border-radius: 8px"
|
|
placeholder="请输入工号"
|
|
v-model:value="userNo"
|
|
allowClear
|
|
showSearch
|
|
>
|
|
</a-input>
|
|
</div>
|
|
<div class="select">
|
|
<a-input
|
|
style="width: 100%; height: 40px; border-radius: 8px"
|
|
placeholder="请输入Band"
|
|
v-model:value="band"
|
|
allowClear
|
|
showSearch
|
|
>
|
|
</a-input>
|
|
</div>
|
|
<div style="display: flex; margin-bottom: 20px">
|
|
<div class="btnn btn1" @click="getTableData">
|
|
<div class="search"></div>
|
|
<div class="btnText">搜索</div>
|
|
</div>
|
|
<div class="btn btn2" @click="reset">
|
|
<div class="search"></div>
|
|
<div class="btnText">重置</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 以下为导出按钮 -->
|
|
<div class="btns">
|
|
<div class="btn btn3" @click="exportAllBtn" style="margin-right: 20px">
|
|
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
|
<div class="btnText">导出全部</div>
|
|
</div>
|
|
<div class="btn btn3" @click="exportBtn">
|
|
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
|
<div class="btnText">导出</div>
|
|
</div>
|
|
</div>
|
|
<!-- 以下为table表格 -->
|
|
<div class="tableBox">
|
|
<a-table
|
|
:columns="columns"
|
|
:data-source="tableData"
|
|
:loading="tableLoading"
|
|
:scroll="{ x: 700 }"
|
|
:pagination="false"
|
|
: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"
|
|
v-model:current="pageNo"
|
|
:total="tableDataTotal"
|
|
class="pagination"
|
|
@change="changePagination"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { ref, toRefs, reactive, onMounted } from "vue";
|
|
import * as api from "../../api/indexOvervoew";
|
|
import { message } from "ant-design-vue";
|
|
import Cookies from "vue-cookies";
|
|
import axios from "axios";
|
|
import downLoad from "../../utils/downLoad";
|
|
export default {
|
|
name: "EmployeelearninG",
|
|
setup() {
|
|
const state = reactive({
|
|
tableLoading: false, // table加载图标
|
|
tableDataTotal: 0, // 数据总条数
|
|
pageSize: 10, // 每页条数
|
|
pageNo: 1, //当前页码
|
|
orgId: null, // 状态值
|
|
name: "", // 名称
|
|
band: "", // band
|
|
userNo: "", //工号
|
|
option: [], //组织列表
|
|
selectedRowKeys: [], // 选中的列
|
|
});
|
|
// table选中
|
|
const onSelectChange = (selectedRowKeys) => {
|
|
state.selectedRowKeys = selectedRowKeys;
|
|
};
|
|
//请求组织接口
|
|
const getOrgList = async () => {
|
|
const res = await api.userGetUserOrg({});
|
|
if (res) {
|
|
const list = res.data?.result?.map((item) => {
|
|
return {
|
|
label: item.orgName,
|
|
value: item.orgId,
|
|
};
|
|
});
|
|
state.option = list;
|
|
getOrgId();
|
|
}
|
|
};
|
|
//导出
|
|
const exportBtn = async () => {
|
|
if (!state.selectedRowKeys?.length) {
|
|
return message.warning("请至少选择一条数据进行导出");
|
|
} else {
|
|
axios({
|
|
method: "get",
|
|
url: "/report/boeu/studyData/export",
|
|
params: { ids: `${state.selectedRowKeys}` },
|
|
responseType: "blob",
|
|
headers: {
|
|
token: Cookies.get("token"),
|
|
},
|
|
}).then((res) => {
|
|
downLoad(res.data, "学习员工数据.xlsx");
|
|
});
|
|
}
|
|
};
|
|
// 表格数据
|
|
let tableData = ref([]);
|
|
// cloumns 表头
|
|
const columns = ref([
|
|
{
|
|
title: "工号",
|
|
dataIndex: "userNo",
|
|
key: "userNo",
|
|
width: 120,
|
|
ellipsis: true,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "姓名",
|
|
dataIndex: "name",
|
|
ellipsis: true,
|
|
key: "name",
|
|
width: 120,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "组织信息",
|
|
dataIndex: "departmentName",
|
|
ellipsis: true,
|
|
key: "departmentName",
|
|
width: 120,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "岗位",
|
|
dataIndex: "jobName",
|
|
ellipsis: true,
|
|
key: "jobName",
|
|
width: 120,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "Band",
|
|
dataIndex: "bandCode",
|
|
ellipsis: true,
|
|
key: "bandCode",
|
|
width: 120,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "授课次数",
|
|
dataIndex: "teachingTotal",
|
|
ellipsis: true,
|
|
key: "teachingTotal",
|
|
width: 120,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "授课时长(分钟)",
|
|
dataIndex: "teachingTime",
|
|
ellipsis: true,
|
|
key: "teachingTime",
|
|
width: 120,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "案例数",
|
|
dataIndex: "caseTotal",
|
|
ellipsis: true,
|
|
key: "caseTotal",
|
|
width: 120,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "学习项目",
|
|
dataIndex: "studyProject",
|
|
ellipsis: true,
|
|
key: "studyProject",
|
|
width: 120,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "学习路径",
|
|
dataIndex: "studyRouter",
|
|
ellipsis: true,
|
|
key: "studyRouter",
|
|
width: 120,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "学习课程",
|
|
dataIndex: "studyClass",
|
|
ellipsis: true,
|
|
key: "studyClass",
|
|
width: 120,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "累计学习时长(分钟)",
|
|
dataIndex: "studyTimeSum",
|
|
ellipsis: true,
|
|
key: "studyTimeSum",
|
|
width: 120,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "操作",
|
|
dataIndex: "operation",
|
|
key: "operation",
|
|
width: 150,
|
|
align: "center",
|
|
fixed: "right",
|
|
customRender: (record) => {
|
|
return (
|
|
<a
|
|
key="export"
|
|
onClick={() => {
|
|
oneExport(record);
|
|
}}
|
|
>
|
|
导出详细信息
|
|
</a>
|
|
);
|
|
},
|
|
},
|
|
]);
|
|
// 行内单条下载
|
|
const oneExport = (record) => {
|
|
axios({
|
|
method: "get",
|
|
url: "/report/boeu/studyData/export",
|
|
params: { ids: `${record.record.id}` },
|
|
responseType: "blob",
|
|
headers: {
|
|
token: Cookies.get("token"),
|
|
},
|
|
}).then((res) => {
|
|
downLoad(res.data, "学习员工数据.xlsx");
|
|
});
|
|
};
|
|
//table 分页事件
|
|
const changePagination = (page) => {
|
|
state.pageNo = page;
|
|
getTableData();
|
|
};
|
|
// 获取数据
|
|
const getTableData = async () => {
|
|
state.tableLoading = true;
|
|
const res = await api.boeuStudyDataPageList({
|
|
page: state.pageNo,
|
|
size: state.pageSize,
|
|
userNo: state.userNo,
|
|
name: state.name,
|
|
departmentId: state.orgId,
|
|
bandCode: state.band,
|
|
});
|
|
if (res) {
|
|
state.tableDataTotal = res.data.total;
|
|
const list = res.data.rows?.map((item) => {
|
|
return {
|
|
key: item.id,
|
|
...item,
|
|
};
|
|
});
|
|
tableData.value = list;
|
|
state.tableLoading = false;
|
|
}
|
|
};
|
|
// 重置按钮
|
|
const reset = async () => {
|
|
state.tableLoading = true;
|
|
state.name = "";
|
|
state.band = "";
|
|
state.userNo = "";
|
|
getOrgId();
|
|
};
|
|
// 获取登录人员组织
|
|
const getOrgId = async () => {
|
|
const res = await api.userInfo({});
|
|
if (res) {
|
|
state.orgId = res.data.result.departId;
|
|
getTableData();
|
|
}
|
|
};
|
|
// 导出全部按钮
|
|
const exportAllBtn = async () => {
|
|
axios({
|
|
method: "post",
|
|
url: "/report/boeu/studyData/exportAll",
|
|
data: {
|
|
userNo: state.userNo,
|
|
name: state.name,
|
|
departmentId: state.orgId,
|
|
bandCode: state.band,
|
|
},
|
|
responseType: "blob",
|
|
headers: {
|
|
token: Cookies.get("token"),
|
|
},
|
|
}).then((res) => {
|
|
downLoad(res.data, "学习员工数据.xlsx");
|
|
});
|
|
};
|
|
onMounted(() => {
|
|
getOrgList();
|
|
state.tableLoading = true;
|
|
});
|
|
return {
|
|
exportAllBtn,
|
|
onSelectChange,
|
|
exportBtn,
|
|
reset,
|
|
getTableData,
|
|
...toRefs(state),
|
|
tableData,
|
|
columns,
|
|
changePagination,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.employeelearning {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.filter {
|
|
margin-left: 38px;
|
|
margin-right: 20px;
|
|
margin-top: 30px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.select {
|
|
margin-right: 20px;
|
|
margin-bottom: 20px;
|
|
width: calc((100% - 76px - 240px) / 4);
|
|
}
|
|
|
|
.btn {
|
|
padding: 0px 26px 0px 26px;
|
|
height: 38px;
|
|
background: rgba(64, 158, 255, 0);
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(64, 158, 255, 1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 14px;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
|
|
.search {
|
|
background-size: 100%;
|
|
}
|
|
|
|
.btnText {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: rgba(64, 158, 255, 1);
|
|
line-height: 36px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.btnn {
|
|
padding: 0px 26px 0px 26px;
|
|
height: 38px;
|
|
background: #4ea6ff;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(64, 158, 255, 1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 14px;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
|
|
.search {
|
|
background-size: 100%;
|
|
}
|
|
|
|
.btnText {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 36px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.btn1 {
|
|
.search {
|
|
width: 15px;
|
|
height: 17px;
|
|
background-image: url("../../assets/images/courseManage/search0.png");
|
|
}
|
|
}
|
|
|
|
.btn2 {
|
|
.search {
|
|
width: 16px;
|
|
height: 18px;
|
|
background-image: url("../../assets/images/courseManage/reset1.png");
|
|
}
|
|
}
|
|
|
|
.btn1:hover {
|
|
background: rgba(64, 158, 255, 0.76);
|
|
|
|
.search {
|
|
background-image: url("../../assets/images/courseManage/search0.png");
|
|
}
|
|
|
|
.btnText {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.btn1:active {
|
|
background: #0982ff;
|
|
}
|
|
|
|
.btn2:hover {
|
|
background: rgba(64, 158, 255, 0.1);
|
|
}
|
|
|
|
.btn2:active {
|
|
background: rgba(64, 158, 255, 0.2);
|
|
}
|
|
}
|
|
.tableBox {
|
|
margin: 20px 38px 30px;
|
|
|
|
.ant-table-thead > tr > th {
|
|
background-color: #eff4fc;
|
|
}
|
|
}
|
|
.btns {
|
|
display: flex;
|
|
margin-left: 38px;
|
|
// flex-wrap: wrap;
|
|
.btn {
|
|
padding: 0px 26px 0px 26px;
|
|
height: 38px;
|
|
background: white;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(64, 158, 255, 1);
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
justify-content: center;
|
|
margin-right: 14px;
|
|
flex-shrink: 0;
|
|
|
|
.search {
|
|
background-size: 100%;
|
|
}
|
|
|
|
.btnText {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #4ea6ff;
|
|
line-height: 36px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.btn3 {
|
|
margin-right: 0px;
|
|
|
|
.search {
|
|
width: 17px;
|
|
height: 18px;
|
|
background-image: url("../../assets/images/courseManage/add0.png");
|
|
}
|
|
}
|
|
|
|
.btn3:hover {
|
|
// background: rgba(64, 158, 255, 0.76);
|
|
background: rgba(64, 158, 255, 0.2);
|
|
}
|
|
|
|
// .btn3:active {
|
|
// background: #0982ff;
|
|
// }
|
|
}
|
|
|
|
.tableBox {
|
|
padding-bottom: 20px;
|
|
|
|
.pa {
|
|
// position: absolute;
|
|
// bottom: 20px;
|
|
// left: 0;
|
|
width: 100%;
|
|
// height: 20px;
|
|
// background-color: red;
|
|
display: flex;
|
|
justify-content: center;
|
|
// margin-bottom: 10px;
|
|
// position: absolute;
|
|
// bottom: -40px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|