mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-07 01:46:43 +08:00
1236 lines
33 KiB
Vue
1236 lines
33 KiB
Vue
<template>
|
||
<div class="growthpath">
|
||
<div class="filterItems">
|
||
<div class="select multi">
|
||
<a-input
|
||
v-model:value="statusPost"
|
||
:disabled="editId"
|
||
style="width: 181px; height: 40px; border-radius: 8px"
|
||
allowClear
|
||
placeholder="填写标准岗位"
|
||
/>
|
||
</div>
|
||
<div class="select multi">
|
||
<a-input
|
||
v-model:value="statusOffice"
|
||
:disabled="editId"
|
||
style="width: 181px; height: 40px; border-radius: 8px"
|
||
allowClear
|
||
placeholder="填写任职资格等级"
|
||
/>
|
||
</div>
|
||
<div class="select">
|
||
<a-select
|
||
v-model:value="statusValue"
|
||
style="width: 181px; height: 40px"
|
||
placeholder="请选择发布状态"
|
||
:options="statusValues"
|
||
allowClear
|
||
></a-select>
|
||
</div>
|
||
<!-- <div class="select">
|
||
<a-select
|
||
v-model:value="dataSourceValue"
|
||
style="width: 181px; height: 40px"
|
||
placeholder="请选择数据来源"
|
||
:options="[
|
||
{ value: '1', label: 'AMED' },
|
||
{ value: '2', label: '手动添加' },
|
||
]"
|
||
allowClear
|
||
></a-select>
|
||
</div> -->
|
||
<div class="grow_btn_left">
|
||
<div class="btn1" @click="searchList">
|
||
<div class="search"></div>
|
||
<div class="btnText">搜索</div>
|
||
</div>
|
||
<div class="btnns2" @click="resetList">
|
||
<div class="search"></div>
|
||
<div class="btnText">重置</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<template v-if="checkMenu('growthAdd')">
|
||
<div class="btns">
|
||
<div class="btn btn3" @click="handleOut">
|
||
<div class="search"></div>
|
||
<div class="btnText">创建必修</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<div class="grow_con">
|
||
<div class="grow_list">
|
||
<div class="grow_table">
|
||
<a-table
|
||
:columns="columns"
|
||
:data-source="dataList"
|
||
:pagination="false"
|
||
:loading="loadingList"
|
||
:scroll="{ x: 1000 }"
|
||
>
|
||
<template #listData="{ record }">
|
||
<a-button
|
||
type="link"
|
||
class="table_btn"
|
||
v-if="!record.isPublished && checkMenu('growthRelease')"
|
||
@click="releaseLearnPath(record)"
|
||
>发布</a-button
|
||
>
|
||
<a-button
|
||
v-if="checkMenu('growthEdit')"
|
||
type="link"
|
||
class="table_btn"
|
||
@click="editPath(record)"
|
||
>编辑</a-button
|
||
>
|
||
<a-button
|
||
type="link"
|
||
v-if="checkMenu('growthManage')"
|
||
class="table_btn"
|
||
@click="manage(record)"
|
||
>管理</a-button
|
||
>
|
||
<!-- <DropDown v-if="record?.permissions?.includes('17')" value="授权">
|
||
<TableModelStudent :id="record.id" title="转移归属权" :type="17"
|
||
>归属权</TableModelStudent
|
||
>
|
||
<TableModelStudent :id="record.id" title="添加查看权" :type="15"
|
||
>查看权</TableModelStudent
|
||
>
|
||
<TableModelStudent :id="record.id" title="添加管理权" :type="16"
|
||
>管理权</TableModelStudent
|
||
>
|
||
</DropDown> -->
|
||
<a-dropdown
|
||
:getPopupContainer="(triggerNode) => triggerNode.parentNode"
|
||
:trigger="['click']"
|
||
v-if="
|
||
(record.isPublished && checkMenu('growthRevoke')) ||
|
||
checkMenu('growthModifyDiscipline') ||
|
||
(record.dataSource === '2' && checkMenu('growthDelete'))
|
||
"
|
||
>
|
||
<a class="ant-dropdown-link" @click.prevent>
|
||
更多
|
||
<DownOutlined />
|
||
</a>
|
||
<template #overlay>
|
||
<a-menu>
|
||
<a-menu-item
|
||
key="1"
|
||
v-if="record.isPublished && checkMenu('growthRevoke')"
|
||
>
|
||
<a-button type="link" @click="withdraw(record)">
|
||
撤回
|
||
</a-button>
|
||
</a-menu-item>
|
||
<a-menu-item
|
||
key="3"
|
||
v-if="checkMenu('growthModifyDiscipline')"
|
||
>
|
||
<a-button type="link" @click="updateList(record)">
|
||
修改记录
|
||
</a-button>
|
||
</a-menu-item>
|
||
<template
|
||
v-if="
|
||
record.dataSource === '2' && checkMenu('growthDelete')
|
||
"
|
||
>
|
||
<a-menu-item key="4">
|
||
<a-button type="link" @click="delData(record)">
|
||
删除
|
||
</a-button>
|
||
</a-menu-item>
|
||
</template>
|
||
</a-menu>
|
||
</template>
|
||
</a-dropdown>
|
||
</template>
|
||
</a-table>
|
||
<div class="tableBox">
|
||
<div class="pa">
|
||
<a-pagination
|
||
v-if="total > 1"
|
||
:showSizeChanger="true"
|
||
show-quick-jumper
|
||
:hideOnSinglePage="false"
|
||
:pageSize="pageSize"
|
||
:current="pageNum"
|
||
:show-total="(total) => `共 ${total} 条`"
|
||
:total="total"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
class="pagination"
|
||
@change="changePagination"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a-modal
|
||
v-model:visible="bg_check"
|
||
:footer="null"
|
||
closable="false"
|
||
style="margin-top: 350px"
|
||
@cancel="of_exit"
|
||
>
|
||
<div
|
||
class="selectonlineface"
|
||
:style="{ display: bg_check ? 'block' : 'none' }"
|
||
>
|
||
<div class="bg_headers"></div>
|
||
<div class="bg_main">
|
||
<div class="bg_main_header">
|
||
<div class="bg_main_header_icon"></div>
|
||
<div>{{ editId ? "编辑专业力必修" : "新增专业力必修" }}</div>
|
||
<div class="bg_main_header_close" @click="of_exit"></div>
|
||
</div>
|
||
<div class="bg_body">
|
||
<div class="bg_body_bt">
|
||
<div class="bg_body_bttext">
|
||
<div class="bg_body_btimg">
|
||
<img
|
||
src="@/assets/images/coursewareManage/asterisk.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<span>标准岗位</span>
|
||
</div>
|
||
<div class="bg_body_input">
|
||
<a-input
|
||
v-model:value="statusPosts"
|
||
:disabled="editId"
|
||
style="width: 384px; height: 40px"
|
||
allowClear
|
||
placeholder="填写标准岗位"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="bg_body_bt" style="align-items: flex-start">
|
||
<div class="bg_body_bttext" style="margin-top: 11px">
|
||
<div class="bg_body_btimg">
|
||
<img
|
||
src="@/assets/images/coursewareManage/asterisk.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<span>任职资格等级</span>
|
||
</div>
|
||
<div class="bg_body_input">
|
||
<a-input
|
||
v-model:value="statusOffices"
|
||
:disabled="editId"
|
||
style="width: 384px; height: 40px"
|
||
allowClear
|
||
placeholder="填写任职资格等级"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="bg_body_bt" style="align-items: flex-start">
|
||
<div class="bg_body_bttext" style="margin-top: 11px">
|
||
<div class="bg_body_btimg">
|
||
<img
|
||
src="@/assets/images/coursewareManage/asterisk.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<span>Band职级</span>
|
||
</div>
|
||
<div class="bg_body_input">
|
||
<a-input
|
||
v-model:value="band"
|
||
:disabled="editId"
|
||
style="width: 384px; height: 40px"
|
||
placeholder="填写Band职级"
|
||
allowClear
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="bg_body_bt">
|
||
<div class="bg_body_bttext">
|
||
<span>完成选修数量</span>
|
||
</div>
|
||
<div class="bg_body_input">
|
||
<a-input-number
|
||
min="0"
|
||
v-model:value="courseNum"
|
||
style="width: 384px; height: 40px"
|
||
placeholder="填写该路径需完成的选修任务数量"
|
||
allowClear
|
||
>
|
||
</a-input-number>
|
||
</div>
|
||
</div>
|
||
<div class="bg_body_bt" style="align-items: flex-start">
|
||
<div class="bg_body_bttext" style="margin-top: 11px">
|
||
<div class="bg_body_btimg">
|
||
<img
|
||
src="@/assets/images/coursewareManage/asterisk.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<span>路径图背景</span>
|
||
</div>
|
||
<div class="bg_body_input">
|
||
<div style="display: flex">
|
||
<a-tooltip>
|
||
<template #title> 建议多于10个学习任务时使用</template>
|
||
<div
|
||
@click="template = 1"
|
||
class="learnBgItem"
|
||
:style="{
|
||
border:
|
||
template == 1
|
||
? '2px solid rgba(78, 166, 255, 1)'
|
||
: '1px solid #ccc',
|
||
}"
|
||
>
|
||
<img
|
||
class="im"
|
||
src="../../assets/images/growthpath/path1.png"
|
||
/>
|
||
</div>
|
||
</a-tooltip>
|
||
|
||
<a-tooltip>
|
||
<template #title>建议少于16个学习任务时使用</template>
|
||
<div
|
||
slot="reference"
|
||
@click="template = 2"
|
||
class="learnBgItem"
|
||
:style="{
|
||
border:
|
||
template == 2
|
||
? '2px solid rgba(78, 166, 255, 1)'
|
||
: '1px solid #ccc',
|
||
}"
|
||
>
|
||
<img
|
||
class="im"
|
||
src="../../assets/images/growthpath/path2.png"
|
||
/>
|
||
</div>
|
||
</a-tooltip>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="bg_body_bt" style="align-items: flex-start">
|
||
<div class="bg_body_bttext">
|
||
<div class="bg_body_btimg">
|
||
<img
|
||
src="@/assets/images/coursewareManage/asterisk.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<span>匹配学员</span>
|
||
</div>
|
||
<div class="bg_body_input">
|
||
<a-radio-group
|
||
v-model:value="matchRules"
|
||
@change="matchRulesChange"
|
||
>
|
||
<div style="display: flex">
|
||
<a-radio value="1" style="margin-bottom: 15px"
|
||
>自动匹配学员</a-radio
|
||
><br />
|
||
<a-radio value="2">不自动匹配学员</a-radio>
|
||
</div>
|
||
</a-radio-group>
|
||
</div>
|
||
</div> -->
|
||
<div class="bg_body_bt" style="align-items: flex-start">
|
||
<div class="bg_body_bttext">
|
||
<span>说明</span>
|
||
</div>
|
||
<div class="bg_body_input">
|
||
<a-textarea
|
||
placeholder="最多输入150个字，超出后不可输入"
|
||
style="
|
||
width: 384px;
|
||
height: 130px;
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
border: 1px solid #c7cbd2;
|
||
"
|
||
v-model:value="pathWays"
|
||
showCount
|
||
:maxlength="150"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="bg_footer">
|
||
<div class="button_btn btn7" @click="of_exit">
|
||
<div class="btnText">取消</div>
|
||
</div>
|
||
<a-button
|
||
class="button_btn btn6"
|
||
:loading="uploadDownLoad"
|
||
@click="confirm"
|
||
>
|
||
确定
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
<a-modal
|
||
v-model:visible="matchRulesVisible"
|
||
title="提示"
|
||
@ok="
|
||
() => {
|
||
keepLearner = true;
|
||
matchRulesVisible = false;
|
||
}
|
||
"
|
||
@cancel="
|
||
() => {
|
||
keepLearner = false;
|
||
matchRulesVisible = false;
|
||
}
|
||
"
|
||
>
|
||
<div style="padding: 30px 24px; font-size: 16px">
|
||
是否保留已绑定的学员？
|
||
</div>
|
||
</a-modal>
|
||
<UpdateRecord ref="UpdateRecordRef" />
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
reactive,
|
||
toRefs,
|
||
ref,
|
||
onMounted,
|
||
watch,
|
||
computed,
|
||
createVNode,
|
||
} from "vue";
|
||
import { useRouter } from "vue-router";
|
||
import { message } from "ant-design-vue";
|
||
import dialog from "@/utils/dialog";
|
||
import { DownOutlined } from "@ant-design/icons-vue";
|
||
import OrgClass from "@/components/growthpath/OrgClass";
|
||
import PostSelectNew from "@/components/growthpath/PostSelect";
|
||
import RankSelect from "@/components/growthpath/RankSelect";
|
||
import OfficeSelect from "@/components/growthpath/OfficeSelect";
|
||
import { checkGrowthPer } from "@/utils/utils";
|
||
import DropDown from "@/components/growthpath/GrowthDropDown";
|
||
import CommonStudent from "@/components/growthpath/GrowthCommonStudent";
|
||
import TableModelStudent from "@/components/growthpath/GrowthTableModel";
|
||
import UpdateRecord from "@/components/growthpath/UpdateRecord";
|
||
import { useStore } from "vuex";
|
||
import { checkMenu } from "@/utils/utils";
|
||
|
||
import {
|
||
listData,
|
||
published,
|
||
withdrawal,
|
||
updatePostInfomation,
|
||
saveGrowth,
|
||
delGrowth,
|
||
} from "@/api/growthpath";
|
||
export default {
|
||
name: "growthpath",
|
||
components: {
|
||
OrgClass,
|
||
DownOutlined,
|
||
PostSelectNew,
|
||
RankSelect,
|
||
DropDown,
|
||
CommonStudent,
|
||
TableModelStudent,
|
||
UpdateRecord,
|
||
OfficeSelect,
|
||
},
|
||
setup() {
|
||
onMounted(() => {
|
||
// 掉接口
|
||
listDatas();
|
||
});
|
||
// 动态引入图片
|
||
const getAssetsFile = (url) => {
|
||
return new URL(
|
||
`../../assets/image/growthpath/${url}.png`,
|
||
import.meta.url
|
||
).href;
|
||
};
|
||
// 路径图背景选项
|
||
const imgData = [
|
||
{
|
||
url: getAssetsFile("path1"),
|
||
code: 1,
|
||
},
|
||
{
|
||
url: "../../assets/image/growthpath/addrenwu.png",
|
||
code: 2,
|
||
},
|
||
];
|
||
const store = useStore();
|
||
const router = useRouter();
|
||
const state = reactive({
|
||
band: null,
|
||
statusOffices: null,
|
||
bg_check: false,
|
||
statusPostCreate: [],
|
||
statusRankCreate: [],
|
||
courseNum: "0",
|
||
isPublished: false,
|
||
matStudens: "",
|
||
elePublishedNum: 0, // 选修发布数量
|
||
pathWays: "",
|
||
statusPost: null,
|
||
matchRules: "1",
|
||
template: 1,
|
||
matchRulesVisible: false,
|
||
statusPostMaps: [],
|
||
statusPosts: null,
|
||
editId: null,
|
||
statusPostList: null,
|
||
statusRank: [],
|
||
statusOffice: null,
|
||
statusRanks: [],
|
||
rankList: [],
|
||
band: "",
|
||
statusValue: null,
|
||
dataSourceValue: null,
|
||
loadingList: false,
|
||
total: 10,
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
dataList: [],
|
||
keepLearner: false,
|
||
});
|
||
const handleOut = () => {
|
||
state.bg_check = true;
|
||
state.courseNum = 0;
|
||
};
|
||
const releaseLearnPath = (item) => {
|
||
dialog({
|
||
content: "是否发布该条数据？",
|
||
ok: () => {
|
||
published({
|
||
growId: item.id,
|
||
}).then((res) => {
|
||
if (res.data.code == 200) {
|
||
message.success("发布成功");
|
||
listDatas();
|
||
} else {
|
||
message.error(err.data.msg);
|
||
}
|
||
});
|
||
// .catch((err) => {
|
||
// message.error(err.data.msg);
|
||
// });
|
||
},
|
||
});
|
||
};
|
||
|
||
// 删除手动添加的专业力必修
|
||
const delData = (item) => {
|
||
dialog({
|
||
content: "是否删除该条数据？",
|
||
ok: () => {
|
||
delGrowth(item.id)
|
||
.then((res) => {
|
||
if (res.data.code == 200) {
|
||
message.success("删除成功");
|
||
listDatas();
|
||
} else {
|
||
message.error(err.data.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
message.error(err.data.msg);
|
||
});
|
||
},
|
||
});
|
||
};
|
||
const statusValues = ref([
|
||
{ value: true, label: "已发布" },
|
||
{ value: false, label: "未发布" },
|
||
]);
|
||
const columns = ref([
|
||
{
|
||
title: "标准岗位",
|
||
dataIndex: "stdPositionName",
|
||
key: "stdPositionName",
|
||
align: "center",
|
||
ellipsis: true,
|
||
customRender: ({ record }) => {
|
||
return record.stdPosition
|
||
? `${record.stdPositionName}（${record.stdPosition}）`
|
||
: `${record.stdPositionName}`;
|
||
},
|
||
},
|
||
{
|
||
title: "任职资格等级",
|
||
dataIndex: "qualsLevelDesr",
|
||
key: "qualsLevelDesr",
|
||
align: "center",
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
title: "学习人数",
|
||
dataIndex: "learnNum",
|
||
key: "learnNum",
|
||
align: "center",
|
||
ellipsis: true,
|
||
width: 150,
|
||
},
|
||
{
|
||
title: "完成人数",
|
||
dataIndex: "comLearnNum",
|
||
key: "comLearnNum",
|
||
align: "center",
|
||
ellipsis: true,
|
||
width: 150,
|
||
},
|
||
{
|
||
title: "完成比例",
|
||
dataIndex: "ratio",
|
||
key: "ratio",
|
||
align: "center",
|
||
width: 150,
|
||
ellipsis: true,
|
||
customRender: ({ record }) => {
|
||
return `${record.ratio * 100}%`;
|
||
},
|
||
},
|
||
{
|
||
title: "状态",
|
||
dataIndex: "isPublished",
|
||
key: "isPublished",
|
||
align: "center",
|
||
ellipsis: true,
|
||
customRender: ({ record }) => {
|
||
return record.isPublished ? "已发布" : "未发布";
|
||
},
|
||
},
|
||
{
|
||
title: "更新时间",
|
||
dataIndex: "updateTime",
|
||
key: "updateTime",
|
||
align: "center",
|
||
ellipsis: true,
|
||
},
|
||
|
||
// {
|
||
// title: "归属人",
|
||
// dataIndex: "createName",
|
||
// key: "createName",
|
||
// width: 60,
|
||
// align: "center",
|
||
// ellipsis: true,
|
||
// },
|
||
// {
|
||
// title: "数据来源",
|
||
// dataIndex: "dataSource",
|
||
// key: "dataSource",
|
||
// align: "center",
|
||
// ellipsis: true,
|
||
// customRender: ({ record }) => {
|
||
// return record.dataSource == 1 ? "AMED" : "手动添加";
|
||
// },
|
||
// },
|
||
{
|
||
title: "操作",
|
||
align: "right",
|
||
slots: { customRender: "listData" },
|
||
},
|
||
]);
|
||
//自动获取band值
|
||
const getBandCodes = (val) => {
|
||
state.band = val;
|
||
};
|
||
const listDatas = async () => {
|
||
state.loadingList = true;
|
||
let params = {
|
||
pageNum: state.pageNum,
|
||
pageSize: state.pageSize,
|
||
stdPositionDesr: state.statusPost,
|
||
isPublished: state.statusValue,
|
||
bandIdList: state.statusRank, //职级
|
||
qualsLevelDesr: state.statusOffice,
|
||
dataSource: state.dataSourceValue,
|
||
};
|
||
console.log(store);
|
||
// 判断当前用户是否是专业力必修角色管理员，如果不是查询列表时需传入员工工号
|
||
let find = store.state.userInfo.roleList.find(
|
||
(item) => item.roleCode === "admin-growth"
|
||
);
|
||
if (!find) {
|
||
params.username = store.state.userInfo.userNo;
|
||
}
|
||
await listData(params).then((res) => {
|
||
if (res.data.code == 200) {
|
||
// 临时权限
|
||
state.dataList = res.data.data.records;
|
||
state.total = res.data.data.total;
|
||
state.loadingList = false;
|
||
}
|
||
});
|
||
};
|
||
const searchList = () => {
|
||
state.pageNum = 1;
|
||
listDatas();
|
||
};
|
||
const resetList = () => {
|
||
state.statusValue = null;
|
||
state.statusPost = null;
|
||
state.statusRank = [];
|
||
state.statusOffice = null;
|
||
state.dataSourceValue = null;
|
||
state.pageNum = 1;
|
||
listDatas();
|
||
};
|
||
const changePagination = (page, pageSize) => {
|
||
state.pageNum = page;
|
||
state.pageSize = pageSize;
|
||
listDatas();
|
||
};
|
||
|
||
//编辑
|
||
const editPath = (record) => {
|
||
state.editId = record.id;
|
||
state.statusPosts = record.stdPositionDesr;
|
||
state.statusOffices = record.qualsLevelDesr;
|
||
state.courseNum = record.electivesCompletedNum;
|
||
state.elePublishedNum = record.elePublishedNum;
|
||
state.pathWays = record.description;
|
||
state.band = record.band;
|
||
state.template = record.template;
|
||
state.matchRules = record.matchRules || "1";
|
||
state.bg_check = true;
|
||
state.isPublished = record.isPublished;
|
||
};
|
||
|
||
// 切换匹配学员方式
|
||
const matchRulesChange = () => {
|
||
state.matchRulesVisible = true;
|
||
};
|
||
// 确定
|
||
const confirm = () => {
|
||
if (!state.statusPosts) {
|
||
return message.error("请输入标准岗位");
|
||
}
|
||
if (!state.band) {
|
||
return message.error("请输入Band职级");
|
||
}
|
||
if (!state.statusOffices) {
|
||
return message.error("请输入任职资格等级");
|
||
}
|
||
if (state.courseNum !== 0 && !state.courseNum) {
|
||
state.courseNum = 0;
|
||
}
|
||
if (state.editId && state.isPublished) {
|
||
if (state.courseNum > state.elePublishedNum) {
|
||
message.warning("完成选修数量不能大于已发布的选修数量");
|
||
state.courseNum = state.elePublishedNum;
|
||
return;
|
||
}
|
||
}
|
||
|
||
const params = {
|
||
stdPositionDesr: state.statusPosts,
|
||
qualsLevelDesr: state.statusOffices,
|
||
electivesCompletedNum: state.courseNum,
|
||
template: state.template,
|
||
description: state.pathWays,
|
||
matchRules: state.matchRules,
|
||
id: state.editId ? state.editId : null,
|
||
keepLearner: state.keepLearner,
|
||
template: state.template,
|
||
band: state.band,
|
||
};
|
||
if (state.editId) {
|
||
updatePostInfomation(params)
|
||
.then((res) => {
|
||
if (res.data.code == 200) {
|
||
message.success("保存成功");
|
||
of_exit();
|
||
listDatas();
|
||
}
|
||
})
|
||
} else {
|
||
saveGrowth(params)
|
||
.then((res) => {
|
||
if (res.data.code == 200) {
|
||
message.success("保存成功");
|
||
of_exit();
|
||
listDatas();
|
||
}
|
||
})
|
||
}
|
||
};
|
||
const of_exit = () => {
|
||
state.statusPosts = null;
|
||
state.statusOffices = null;
|
||
state.statusPostList = null;
|
||
state.statusRanks = [];
|
||
state.rankList = [];
|
||
state.bandLists = [];
|
||
state.organCreateName = null;
|
||
state.courseNum = "";
|
||
state.matchRules = "1";
|
||
state.pathWays = "";
|
||
state.bg_check = false;
|
||
state.editId = null;
|
||
state.band = "";
|
||
state.isPublished = false;
|
||
};
|
||
// 创建路径
|
||
// 管理
|
||
const manage = (record) => {
|
||
router.push({
|
||
path: "/pathmanage",
|
||
query: {
|
||
id: record.id,
|
||
pre: record.permissions,
|
||
},
|
||
});
|
||
};
|
||
//撤回
|
||
const withdraw = (record) => {
|
||
dialog({
|
||
content: "确定撤回？",
|
||
contentTwo: "撤回后学员进度保留，发布后可继续学习",
|
||
ok: () => {
|
||
withdrawal(record.id).then((res) => {
|
||
if (res.data.code == 200) {
|
||
message.success("撤回成功");
|
||
listDatas();
|
||
}
|
||
});
|
||
},
|
||
});
|
||
};
|
||
// 查看修改记录
|
||
const UpdateRecordRef = ref(null);
|
||
const updateList = (record) => {
|
||
UpdateRecordRef.value.open(record);
|
||
};
|
||
return {
|
||
...toRefs(state),
|
||
getBandCodes,
|
||
checkGrowthPer,
|
||
columns,
|
||
listDatas,
|
||
searchList,
|
||
resetList,
|
||
changePagination,
|
||
statusValues,
|
||
of_exit,
|
||
confirm,
|
||
editPath,
|
||
manage,
|
||
imgData,
|
||
updateList,
|
||
withdraw,
|
||
handleOut,
|
||
releaseLearnPath,
|
||
delData,
|
||
checkMenu,
|
||
UpdateRecordRef,
|
||
matchRulesChange,
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .ant-pagination-total-text {
|
||
color: #818a92;
|
||
}
|
||
|
||
::v-deep .ant-select-multiple .ant-select-selection-item {
|
||
line-height: 26px !important;
|
||
}
|
||
|
||
.growthpath {
|
||
width: 100%;
|
||
|
||
.filterItems {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin: 40px 16px 0 24px;
|
||
position: relative;
|
||
.growth_switch {
|
||
width: 40px;
|
||
height: 40px;
|
||
position: absolute;
|
||
right: 32px;
|
||
cursor: pointer;
|
||
top: 0px;
|
||
}
|
||
.grow_btn_left {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
.btn1 {
|
||
width: 100px;
|
||
height: 40px;
|
||
background: #409eff;
|
||
border-radius: 8px;
|
||
box-sizing: border-box;
|
||
color: #ffffff;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
line-height: 31px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.search {
|
||
width: 15px;
|
||
height: 17px;
|
||
margin-right: 5px;
|
||
background-image: url("../../assets/images/courseManage/search0.png");
|
||
}
|
||
}
|
||
.btnns2 {
|
||
width: 100px;
|
||
height: 40px;
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
border: 1px solid #388be1;
|
||
margin-left: 10px;
|
||
background-color: #ffffff;
|
||
box-sizing: border-box;
|
||
color: #578afc;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
line-height: 31px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.search {
|
||
width: 16px;
|
||
height: 18px;
|
||
margin-right: 5px;
|
||
background-image: url("../../assets/images/courseManage/reset1.png");
|
||
}
|
||
}
|
||
}
|
||
.select {
|
||
margin-right: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
.btns {
|
||
display: flex;
|
||
padding-left: 24px;
|
||
padding-bottom: 10px;
|
||
// flex-wrap: wrap;
|
||
.btn {
|
||
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;
|
||
}
|
||
}
|
||
|
||
.btn3 {
|
||
margin-right: 0px;
|
||
|
||
.search {
|
||
width: 17px;
|
||
height: 18px;
|
||
background-image: url("../../assets/images/courseManage/add0.png");
|
||
}
|
||
}
|
||
|
||
.btn3:active {
|
||
background: #0982ff;
|
||
}
|
||
}
|
||
.grow_list {
|
||
margin-left: 24px;
|
||
.grow_btn {
|
||
margin-bottom: 16px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.grow_btn_left {
|
||
display: flex;
|
||
.btn1 {
|
||
width: 70px;
|
||
height: 31px;
|
||
border-radius: 5px;
|
||
background-color: #578afc;
|
||
box-sizing: border-box;
|
||
color: #ffffff;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
line-height: 31px;
|
||
}
|
||
.btnns2 {
|
||
margin-left: 10px;
|
||
width: 70px;
|
||
height: 31px;
|
||
border-radius: 5px;
|
||
border: 1px solid #578afc;
|
||
background-color: #ffffff;
|
||
box-sizing: border-box;
|
||
color: #578afc;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
line-height: 31px;
|
||
}
|
||
}
|
||
}
|
||
.grow_table {
|
||
margin: 0 24px 16px 0;
|
||
.table_btn {
|
||
margin-right: 8px;
|
||
}
|
||
.tableBox {
|
||
padding-bottom: 20px;
|
||
margin: 20px 38px 30px;
|
||
::v-deep .ant-select {
|
||
min-height: 32px;
|
||
.ant-select-selector {
|
||
min-height: 32px;
|
||
}
|
||
.ant-select-selection-item {
|
||
line-height: 32px;
|
||
}
|
||
}
|
||
::v-deep .ant-pagination-options .ant-select-arrow {
|
||
display: block;
|
||
}
|
||
::v-deep .ant-select-dropdown {
|
||
display: inline-block;
|
||
}
|
||
::v-deep .ant-select-selection-item {
|
||
margin-left: 3px;
|
||
}
|
||
::v-deep .ant-pagination-options-size-changer.ant-select {
|
||
width: 92px;
|
||
}
|
||
.pa {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.selectonlineface {
|
||
z-index: 999;
|
||
width: 679px;
|
||
background: #ffffff;
|
||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
|
||
position: absolute;
|
||
left: 50%;
|
||
top: -100%;
|
||
transform: translate(-50%, -50%);
|
||
.bg_headers {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 40px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(103, 64, 255, 0.2) 0%,
|
||
rgba(166, 168, 255, 0) 100%
|
||
);
|
||
}
|
||
.bg_main {
|
||
width: 100%;
|
||
position: relative;
|
||
.bg_main_header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 20px;
|
||
padding-left: 26px;
|
||
font-size: 16px;
|
||
.bg_main_header_icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 10px;
|
||
background-image: url(@/assets/images/evaluation/uploads.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
.bg_main_header_close {
|
||
position: absolute;
|
||
right: 42px;
|
||
cursor: pointer;
|
||
width: 20px;
|
||
height: 20px;
|
||
background-image: url(@/assets/images/coursewareManage/close.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.bg_body {
|
||
width: 80%;
|
||
margin: 3px auto;
|
||
.bg_body_bt {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: end;
|
||
margin: 28px auto;
|
||
|
||
.bg_body_bttext {
|
||
width: 110px;
|
||
display: flex;
|
||
justify-content: end;
|
||
margin-right: 20px;
|
||
.bg_body_btimg {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-top: -3px;
|
||
margin-right: 6px;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
.bg_body_input {
|
||
flex: 1;
|
||
position: relative;
|
||
.learnBgItem {
|
||
border-radius: 8px;
|
||
width: 136px;
|
||
height: 106px;
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
margin-bottom: 20px;
|
||
margin-right: 6px;
|
||
.im {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.ant-upload-picture-card-wrapper {
|
||
width: 200px;
|
||
margin-right: 18px;
|
||
}
|
||
.i_upload_img {
|
||
width: 200px;
|
||
height: 112px;
|
||
}
|
||
::v-deep .ant-upload.ant-upload-select-picture-card {
|
||
width: 200px;
|
||
height: 112px;
|
||
}
|
||
.i_upload {
|
||
width: 200px;
|
||
height: 112px;
|
||
text-align: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
|
||
.addimg {
|
||
position: relative;
|
||
|
||
.heng {
|
||
position: absolute;
|
||
top: 59px;
|
||
left: 71px;
|
||
width: 60px;
|
||
border: 1px solid #d9d9d9;
|
||
}
|
||
|
||
.shu {
|
||
position: absolute;
|
||
top: 30px;
|
||
left: 100px;
|
||
height: 60px;
|
||
border: 1px solid #d9d9d9;
|
||
}
|
||
}
|
||
}
|
||
.upload_box {
|
||
border: 1px solid #d9d9d9;
|
||
padding: 2px 5px;
|
||
background-color: #d9d9d9;
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
}
|
||
.error-message {
|
||
color: red;
|
||
font-size: 11px;
|
||
margin-top: 2px;
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
.bg_footer {
|
||
width: 100%;
|
||
margin-left: 174px;
|
||
margin-top: 25px;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
|
||
.button_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;
|
||
}
|
||
}
|
||
|
||
.btn6 {
|
||
background-color: #4ea6ff;
|
||
color: #ffffff;
|
||
}
|
||
.btn7 {
|
||
width: 100px;
|
||
height: 40px;
|
||
border-radius: 4px;
|
||
border: 1px solid #387df7;
|
||
color: #387df7;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
::v-deep .ant-select {
|
||
border-radius: 5px;
|
||
width: 100%;
|
||
min-height: 40px;
|
||
.ant-select-selector {
|
||
border-radius: 8px;
|
||
width: 100%;
|
||
min-height: 40px;
|
||
}
|
||
.ant-select-selection-placeholder {
|
||
line-height: 40px;
|
||
}
|
||
.ant-select-selection-item {
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
</style>
|