mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-24 18:22:55 +08:00
663 lines
16 KiB
Vue
663 lines
16 KiB
Vue
<template>
|
|
<div class="growthpathmap">
|
|
<!-- 以下为顶部搜索框 -->
|
|
<div class="filter">
|
|
<div class="select">
|
|
<a-input
|
|
v-model:value="stdPositionDesr"
|
|
style="height: 40px; border-radius: 8px"
|
|
allowClear
|
|
placeholder="填写标准岗位"
|
|
/>
|
|
</div>
|
|
<div class="select">
|
|
<a-input
|
|
v-model:value="qualsLevelDesr"
|
|
style="height: 40px; border-radius: 8px"
|
|
allowClear
|
|
placeholder="填写任职资格等级"
|
|
/>
|
|
</div>
|
|
<div class="select">
|
|
<a-select
|
|
v-model:value="isPublished"
|
|
style="height: 40px; width: 100%"
|
|
placeholder="请选择发布状态"
|
|
:options="statusValues"
|
|
allowClear
|
|
></a-select>
|
|
</div>
|
|
<div class="select">
|
|
<a-range-picker
|
|
v-model:value="publishTime"
|
|
type="date"
|
|
valueFormat="YYYY-MM-DD"
|
|
:placeholder="['发布开始时间', '结束时间']"
|
|
style="width: 100%"
|
|
/>
|
|
</div>
|
|
<div style="display: flex; margin-bottom: 20px">
|
|
<div class="btnzx btnzx1" @click="searchData">
|
|
<div class="search"></div>
|
|
<div class="btnzText">搜索</div>
|
|
</div>
|
|
<div class="btnz btnzx2" @click="reset">
|
|
<div class="search"></div>
|
|
<div class="btnzText">重置</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 以下为导出按钮 -->
|
|
<div class="btnzs">
|
|
<div class="btnz btnz3" @click="exportAllbtnz">
|
|
<div>
|
|
<img src="../../assets/images/coursewareManage/export1.png" alt="" />
|
|
</div>
|
|
<div class="btnzText">导出列表信息</div>
|
|
</div>
|
|
<div class="btnz btnz3" @click="exportbtnz" style="margin-left: 20px">
|
|
<div>
|
|
<img src="../../assets/images/coursewareManage/export1.png" alt="" />
|
|
</div>
|
|
<div class="btnzText">导出详细信息</div>
|
|
</div>
|
|
</div>
|
|
<!-- 以下为table表格 -->
|
|
<div class="tableBox">
|
|
<a-table
|
|
rowKey="id"
|
|
:columns="columns"
|
|
:data-source="tableData"
|
|
:loading="tableLoading"
|
|
:scroll="{ x: 700 }"
|
|
:pagination="false"
|
|
:row-selection="{
|
|
selectedRowKeys: selectedRowKeys,
|
|
onChange: onSelectChange,
|
|
}"
|
|
>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'publishTime'">
|
|
<a-tooltip placement="topRight">
|
|
<template #title>
|
|
<span>{{
|
|
record.publishTime &&
|
|
dayjs(record.publishTime).format("YYYY-MM-DD HH:mm:ss")
|
|
}}</span>
|
|
</template>
|
|
<span>{{
|
|
record.publishTime &&
|
|
dayjs(record.publishTime).format("YYYY-MM-DD HH:mm:ss")
|
|
}}</span>
|
|
</a-tooltip>
|
|
</template>
|
|
<template v-if="column.key === 'status'">
|
|
<span>{{
|
|
record.status == "0"
|
|
? "草稿"
|
|
: record.status == "1"
|
|
? "已发布"
|
|
: record.status == "-1"
|
|
? "停用"
|
|
: ""
|
|
}}</span>
|
|
</template>
|
|
</template>
|
|
</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="pageNum"
|
|
:total="tableDataTotal"
|
|
class="pagination"
|
|
@change="changePagination"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="jsx">
|
|
import { message } from "ant-design-vue";
|
|
import * as api from "../../api/indexOvervoew";
|
|
// import * as api from "../../api/indexWay";
|
|
import { ref, toRefs, reactive, onMounted } from "vue";
|
|
import downLoad from "../../utils/downLoad";
|
|
import Cookies from "vue-cookies";
|
|
import axios from "axios";
|
|
import { listData } from "@/api/growthpath";
|
|
import dayjs from "dayjs";
|
|
import { useStore } from "vuex";
|
|
export default {
|
|
name: "growthpathmap",
|
|
setup() {
|
|
const store = useStore();
|
|
const state = reactive({
|
|
tableLoading: false, // table加载图标
|
|
tableDataTotal: 0, // 数据总条数
|
|
pageSize: 10, // 每页条数
|
|
pageNum: 1, //当前页码
|
|
orgId: null, // 状态值
|
|
createName: "", // 创建者名称
|
|
startTime: "", // 开始时间
|
|
endTime: "", // 结束时间
|
|
publishTime: "", // 创建时间
|
|
option: [], // 组织列表
|
|
boeRouterInfoName: "", // 路径名称
|
|
selectedRowKeys: [], // 选中的列
|
|
routerId: [],
|
|
allowClear: true,
|
|
resetOrgId: [],
|
|
routerIdList: [],
|
|
stdPositionDesr: "",
|
|
qualsLevelDesr: "",
|
|
isPublished: null,
|
|
});
|
|
const statusValues = ref([
|
|
{ value: true, label: "已发布" },
|
|
{ value: false, label: "未发布" },
|
|
]);
|
|
// 表格数据
|
|
let tableData = ref([]);
|
|
// table选中
|
|
const onSelectChange = (selectedRowKeys, record) => {
|
|
state.selectedRowKeys = selectedRowKeys;
|
|
state.routerId = record?.map((item) => {
|
|
return item.boeRouterInfoId;
|
|
});
|
|
};
|
|
const searchData = () => {
|
|
state.pageNum = 1;
|
|
state.pageSize = 10;
|
|
getTableData();
|
|
};
|
|
// cloumns 表头
|
|
const columns = ref([
|
|
{
|
|
title: "标准岗位",
|
|
dataIndex: "stdPositionDesr",
|
|
ellipsis: true,
|
|
key: "stdPositionDesr",
|
|
align: "center",
|
|
width: 240,
|
|
},
|
|
{
|
|
title: "任职资格等级",
|
|
dataIndex: "qualsLevelDesr",
|
|
ellipsis: true,
|
|
key: "qualsLevelDesr",
|
|
align: "center",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: "Band职级",
|
|
dataIndex: "band",
|
|
ellipsis: true,
|
|
key: "band",
|
|
align: "center",
|
|
width: 110,
|
|
},
|
|
{
|
|
title: "总人数",
|
|
dataIndex: "learnNum",
|
|
ellipsis: true,
|
|
key: "learnNum",
|
|
align: "center",
|
|
width: 90,
|
|
},
|
|
{
|
|
title: "学习人数",
|
|
dataIndex: "learningNum",
|
|
ellipsis: true,
|
|
key: "learningNum",
|
|
align: "center",
|
|
width: 90,
|
|
},
|
|
{
|
|
title: "参与率",
|
|
dataIndex: "learningRatio",
|
|
ellipsis: true,
|
|
key: "learningRatio",
|
|
align: "center",
|
|
width: 90,
|
|
customRender: ({ record: { learningRatio } }) =>
|
|
learningRatio ? `${learningRatio * 100}%` : "0%",
|
|
},
|
|
{
|
|
title: "完成人数",
|
|
dataIndex: "comLearnNum",
|
|
ellipsis: true,
|
|
key: "comLearnNum",
|
|
align: "center",
|
|
width: 90,
|
|
},
|
|
{
|
|
title: "完成率",
|
|
ellipsis: true,
|
|
align: "center",
|
|
width: 90,
|
|
customRender: ({ record: { comLearnNum, learnNum } }) =>
|
|
learnNum && `${((comLearnNum / learnNum) * 100).toFixed()}%`,
|
|
},
|
|
{
|
|
title: "发布时间",
|
|
dataIndex: "publishTime",
|
|
ellipsis: true,
|
|
key: "publishTime",
|
|
align: "center",
|
|
width: 140,
|
|
},
|
|
{
|
|
title: "发布状态",
|
|
dataIndex: "isPublished",
|
|
ellipsis: true,
|
|
key: "isPublished",
|
|
align: "center",
|
|
width: 120,
|
|
customRender: ({ record: { isPublished } }) =>
|
|
isPublished ? "已发布" : "未发布",
|
|
},
|
|
{
|
|
title: "创建时间",
|
|
dataIndex: "createTime",
|
|
ellipsis: true,
|
|
key: "createTime",
|
|
align: "center",
|
|
width: 140,
|
|
},
|
|
{
|
|
title: "操作",
|
|
dataIndex: "operation",
|
|
key: "operation",
|
|
width: 200,
|
|
align: "center",
|
|
fixed: "right",
|
|
customRender: ({ record }) => {
|
|
return (
|
|
<div>
|
|
<a
|
|
key="export"
|
|
onClick={() => {
|
|
oneCurrentExport(record);
|
|
}}
|
|
>
|
|
导出学习记录
|
|
</a>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
]);
|
|
|
|
// 导出当前数据
|
|
const oneCurrentExport = (record) => {
|
|
axios({
|
|
method: "get",
|
|
url: "/report/boeu/grow/exportGrowth",
|
|
params: { ids: `${record.id}` },
|
|
responseType: "blob",
|
|
headers: {
|
|
token: Cookies.get("token"),
|
|
},
|
|
}).then((res) => {
|
|
downLoad(res.data, "专业力当前学习数据.xlsx");
|
|
});
|
|
};
|
|
//table 分页事件
|
|
const changePagination = (page) => {
|
|
state.pageNum = page;
|
|
getTableData();
|
|
};
|
|
// 获取数据
|
|
const getTableData = async () => {
|
|
state.tableLoading = true;
|
|
const res = await listData({
|
|
pageNum: state.pageNum,
|
|
pageSize: state.pageSize,
|
|
stdPositionDesr: state.stdPositionDesr,
|
|
qualsLevelDesr: state.qualsLevelDesr,
|
|
isPublished: state.isPublished,
|
|
startTime:
|
|
typeof state.publishTime[0] === "undefined"
|
|
? null
|
|
: state.publishTime[0] + " 00:00:01",
|
|
endTime:
|
|
typeof state.publishTime[1] == "undefined"
|
|
? null
|
|
: state.publishTime[1] + " 23:59:59",
|
|
});
|
|
if (res) {
|
|
state.tableDataTotal = res.data.data.total;
|
|
const list = res.data.data.records?.map((item) => {
|
|
return {
|
|
key: item.id,
|
|
...item,
|
|
};
|
|
});
|
|
tableData.value = list;
|
|
state.tableLoading = false;
|
|
}
|
|
};
|
|
// 重置按钮
|
|
const reset = async () => {
|
|
state.tableLoading = true;
|
|
state.stdPositionDesr = "";
|
|
state.publishTime = [];
|
|
state.qualsLevelDesr = "";
|
|
state.isPublished = null;
|
|
state.selectedRowKeys = [];
|
|
getTableData();
|
|
};
|
|
//导出详细信息
|
|
const exportbtnz = async () => {
|
|
if (!state.selectedRowKeys?.length) {
|
|
message.warning("请选择要导出的数据");
|
|
return;
|
|
}
|
|
const params = {
|
|
pageNum: state.pageNum,
|
|
pageSize: state.pageSize,
|
|
stdPositionDesr: state.stdPositionDesr,
|
|
qualsLevelDesr: state.qualsLevelDesr,
|
|
isPublished: state.isPublished,
|
|
ids: state.selectedRowKeys.toString(),
|
|
startTime:
|
|
typeof state.publishTime[0] === "undefined"
|
|
? null
|
|
: state.publishTime[0] + " 00:00:01",
|
|
endTime:
|
|
typeof state.publishTime[1] == "undefined"
|
|
? null
|
|
: state.publishTime[1] + " 23:59:59",
|
|
};
|
|
axios({
|
|
method: "get",
|
|
url: "/report/boeu/grow/exportGrowth",
|
|
params,
|
|
responseType: "blob",
|
|
headers: {
|
|
token: Cookies.get("token"),
|
|
},
|
|
}).then((res) => {
|
|
downLoad(res.data, "专业力详细信息.xlsx");
|
|
}),
|
|
(err) => {
|
|
message.error(err);
|
|
};
|
|
};
|
|
// 导出列表信息
|
|
const exportAllbtnz = async () => {
|
|
const params = {
|
|
pageNum: state.pageNum,
|
|
pageSize: state.pageSize,
|
|
stdPositionDesr: state.stdPositionDesr,
|
|
qualsLevelDesr: state.qualsLevelDesr,
|
|
isPublished: state.isPublished,
|
|
ids: state.selectedRowKeys.toString(),
|
|
startTime:
|
|
typeof state.publishTime[0] === "undefined"
|
|
? null
|
|
: state.publishTime[0] + " 00:00:01",
|
|
endTime:
|
|
typeof state.publishTime[1] == "undefined"
|
|
? null
|
|
: state.publishTime[1] + " 23:59:59",
|
|
};
|
|
axios({
|
|
method: "post",
|
|
url: "/report/boeu/grow/exportGrowthAll",
|
|
data: params,
|
|
responseType: "blob",
|
|
headers: {
|
|
token: Cookies.get("token"),
|
|
},
|
|
}).then((res) => {
|
|
downLoad(res.data, "专业力必修信息.xlsx");
|
|
}),
|
|
(err) => {
|
|
message.error(err);
|
|
};
|
|
};
|
|
onMounted(() => {
|
|
state.tableLoading = true;
|
|
getTableData();
|
|
});
|
|
return {
|
|
exportAllbtnz,
|
|
onSelectChange,
|
|
exportbtnz,
|
|
reset,
|
|
getTableData,
|
|
...toRefs(state),
|
|
tableData,
|
|
statusValues,
|
|
columns,
|
|
changePagination,
|
|
dayjs,
|
|
searchData,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.growthpathmap {
|
|
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);
|
|
}
|
|
|
|
.btnz {
|
|
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%;
|
|
}
|
|
|
|
.btnzText {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: rgba(64, 158, 255, 1);
|
|
line-height: 36px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.btnzx {
|
|
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%;
|
|
}
|
|
|
|
.btnzText {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 36px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.btnzx1 {
|
|
.search {
|
|
width: 15px;
|
|
height: 17px;
|
|
background-image: url("../../assets/images/courseManage/search0.png");
|
|
}
|
|
}
|
|
|
|
.btnzx2 {
|
|
margin-right: 0px !important;
|
|
background: #4ea6ff;
|
|
.search {
|
|
width: 16px;
|
|
height: 18px;
|
|
|
|
background-image: url("../../assets/images/courseManage/reset0.png");
|
|
}
|
|
.btnzText {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.btnzx1:hover {
|
|
background: rgba(64, 158, 255, 0.76);
|
|
|
|
.search {
|
|
background-image: url("../../assets/images/courseManage/search0.png");
|
|
}
|
|
|
|
.btnzText {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.btnzx2:hover {
|
|
background: rgba(64, 158, 255, 0.76);
|
|
|
|
.search {
|
|
background-image: url("../../assets/images/courseManage/reset0.png");
|
|
}
|
|
|
|
.btnzText {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.btnzx1:active,
|
|
.btnzx2:active {
|
|
background: #0982ff;
|
|
}
|
|
}
|
|
.tabbtnz {
|
|
width: 100%;
|
|
height: 40px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.tab {
|
|
margin-left: 38px;
|
|
display: flex;
|
|
background: #ecf5ff;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
border-radius: 8px;
|
|
.tabItem {
|
|
box-sizing: border-box;
|
|
padding: 0 18px;
|
|
cursor: pointer;
|
|
}
|
|
.tabActive {
|
|
box-sizing: border-box;
|
|
padding: 0 18px;
|
|
background: #387df7;
|
|
color: white;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
.btnzs {
|
|
display: flex;
|
|
margin-left: 38px;
|
|
// flex-wrap: wrap;
|
|
.btnz {
|
|
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%;
|
|
}
|
|
|
|
.btnzText {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #4ea6ff;
|
|
line-height: 36px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.btnz3 {
|
|
margin-right: 0px;
|
|
background: #4ea6ff;
|
|
.search {
|
|
width: 17px;
|
|
height: 18px;
|
|
background-image: url("../../assets/images/courseManage/add0.png");
|
|
}
|
|
.btnzText {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.btnz3:hover {
|
|
// background: rgba(64, 158, 255, 0.76);
|
|
background: rgba(64, 158, 255, 0.76);
|
|
}
|
|
|
|
.btnz3:active {
|
|
background: #0982ff;
|
|
}
|
|
}
|
|
.tableBox {
|
|
margin: 20px 38px 30px;
|
|
|
|
.ant-table-thead > tr > th {
|
|
background-color: #eff4fc;
|
|
}
|
|
}
|
|
.tableBox {
|
|
padding-bottom: 20px;
|
|
|
|
.pa {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|