mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-11 03:46:45 +08:00
修改
This commit is contained in:
zhangsir
@@ -1,564 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- 添加在线课程 -->
|
|
||||||
<a-drawer class="addcourse1" :visible="visible" width="80%" :title="title" @close="closeDrawer" :maskClosable="false">
|
|
||||||
<!-- 搜索框及按钮 -->
|
|
||||||
<div class="filter">
|
|
||||||
<div class="filterItems">
|
|
||||||
<div class="select">
|
|
||||||
<a-input v-model:value="searchDataInfo.keyWord" style="width: 170px; height: 34px; border-radius: 8px"
|
|
||||||
placeholder="请输入课程标题" />
|
|
||||||
</div>
|
|
||||||
<div class="select">
|
|
||||||
<a-input v-model:value="searchDataInfo.authorName" style="width: 170px; height: 34px; border-radius: 8px"
|
|
||||||
placeholder="请输入授课讲师名称" />
|
|
||||||
</div>
|
|
||||||
<div style="display: flex; margin-bottom: 20px">
|
|
||||||
<div class="btn btn1" @click="handleSearch(1)" style="width: 90px">
|
|
||||||
<div class="btnText">搜索</div>
|
|
||||||
</div>
|
|
||||||
<div class="btn btn1" @click="handleRest" style="width: 90px">
|
|
||||||
<div class="btnText">重置</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="btns" style="display: flex;flex-direction: column;">
|
|
||||||
<div v-if="selectNum" class="btnText">已选择 <span style="color:#4ea6ff ;"> {{ selectNum }}
|
|
||||||
</span>
|
|
||||||
门课程</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 表格 -->
|
|
||||||
<div style="display: flex; overflow-x: auto; overflow-y: auto;justify-content: space-between;">
|
|
||||||
<div class="tableBox" style="min-height: 800px;overflow: hidden;">
|
|
||||||
<a-table style="border: 1px solid #f2f6fe;" :columns="state.columns" :data-source="state.dataSource"
|
|
||||||
:loading="!loading" :row-selection="rowSelection" :pagination="pagination" />
|
|
||||||
</div>
|
|
||||||
<div class="right1" style="min-width: 200px">
|
|
||||||
<div class="onerow">
|
|
||||||
<div class="onleft">
|
|
||||||
<div class="already">已选</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div :style="{ 'max-height': state.screenHeight - 240 + 'px' }" style="overflow-y: auto">
|
|
||||||
<div class="selecteds">
|
|
||||||
<div v-for="(item, i) in state.selectedRow" :key="i">
|
|
||||||
<div v-if="i < 11">
|
|
||||||
<div class="chose">
|
|
||||||
{{ item.title.length > 6 ? item.title.slice(0, 6) + '...' : item.title }}
|
|
||||||
<div class="ch" @click="remove(item.id)"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<div v-if="state.member">
|
|
||||||
<div class="chose">
|
|
||||||
{{ item.title.length > 6 ? item.title.slice(0, 6) + '...' : item.title }}
|
|
||||||
<div class="ch" @click="remove(item.id)"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="!state.member && state.selectedRow?.length > 10" class="ifsw">
|
|
||||||
<div @click="state.member = !state.member" class="“sw”">查看更多></div>
|
|
||||||
</div>
|
|
||||||
<div v-if="state.member && state.selectedRow?.length > 10" class="ifsw">
|
|
||||||
<div @click="state.member = !state.member" class="sw">收起<</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 底部按钮和下一步的弹窗 -->
|
|
||||||
<div class="btnn">
|
|
||||||
<button class="btn2 btn3" @click="closeDrawer">取消</button>
|
|
||||||
<CommonRecommend :type="state.type" :id="state.selectedRowKeys" @finash="submitCall" :stage="state.stage">
|
|
||||||
<a-button class="btn2">
|
|
||||||
下一步
|
|
||||||
</a-button>
|
|
||||||
</CommonRecommend>
|
|
||||||
</div>
|
|
||||||
</a-drawer>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { reactive, ref, computed, nextTick } from 'vue';
|
|
||||||
import { Form, message } from "ant-design-vue";
|
|
||||||
import { isTopList, downloadErrorRecords } from '@/api/case'
|
|
||||||
import CommonRecommend from "@/components/CaseManage/CommonRecommend";
|
|
||||||
import useDownload from '@/hooks/useDownload'
|
|
||||||
defineProps({
|
|
||||||
visible: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '添加在线课程'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const emit = defineEmits(['update:visible'])
|
|
||||||
const loading = ref(false)
|
|
||||||
const state = reactive({
|
|
||||||
allSelectedRow: [],
|
|
||||||
caseTitleList: [],
|
|
||||||
totalNum: 0,//上传的总条数
|
|
||||||
successNum: 0,//成功的条数
|
|
||||||
failNum: 0,//失败的条数
|
|
||||||
status: '',//上传的状态
|
|
||||||
progressColor: '',//进度条颜色
|
|
||||||
type: 1,//添加学员
|
|
||||||
stage: '',//
|
|
||||||
importId: '',//导入id
|
|
||||||
selectedRowKeys: [],//案例标题的id
|
|
||||||
selectedRow: [],//选择的每一行数据
|
|
||||||
dataSource: [],//表格的数据
|
|
||||||
uploadpercent: -1,//导入进度
|
|
||||||
fileName: '',//下载的名字
|
|
||||||
uploadAction: process.env.VUE_APP_SYS_API + '/xboe/m/boe/cases/recommend/import',//下载地址
|
|
||||||
fileList: [],//上传列表
|
|
||||||
member: false,//收起和展开
|
|
||||||
screenHeight: document.body.clientHeight,//高度
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
title: "课程标题",
|
|
||||||
dataIndex: "title",
|
|
||||||
key: "title",
|
|
||||||
align: "left",
|
|
||||||
className: "h",
|
|
||||||
width: '75%',
|
|
||||||
ellipsis: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "资源归属",
|
|
||||||
dataIndex: "authorName",
|
|
||||||
key: "authorName",
|
|
||||||
width: '20%',
|
|
||||||
align: "center",
|
|
||||||
className: "h",
|
|
||||||
ellipsis: true,
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
//删除选中
|
|
||||||
const remove = (id) => {
|
|
||||||
state.selectedRowKeys = state.selectedRowKeys.filter(item => item !== id)
|
|
||||||
state.selectedRow = state.selectedRow.filter(item => item.id !== id)
|
|
||||||
// 过滤导入删除的条数
|
|
||||||
state.caseTitleList = state.caseTitleList.filter(item => state.selectedRow.some(sel => sel.id == item.id))
|
|
||||||
}
|
|
||||||
// 下一步返回的刷新列表
|
|
||||||
function submitCall(flag) {
|
|
||||||
searchDataInfo.pageIndex = 1
|
|
||||||
flag && getTopList()
|
|
||||||
closeDrawer()
|
|
||||||
}
|
|
||||||
// 计算选择的条数
|
|
||||||
const selectNum = computed(() => state.selectedRowKeys.length - state.caseTitleList.length)
|
|
||||||
|
|
||||||
// 查询数据
|
|
||||||
const searchDataInfo = reactive({
|
|
||||||
pageIndex: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
keyWord: "",
|
|
||||||
authorName: '',
|
|
||||||
});
|
|
||||||
const total = ref(0)
|
|
||||||
|
|
||||||
// 分页
|
|
||||||
const pagination = computed(() => ({
|
|
||||||
total: total.value,
|
|
||||||
showSizeChanger: false,
|
|
||||||
current: searchDataInfo.pageIndex,
|
|
||||||
pageSize: searchDataInfo.pageSize,
|
|
||||||
onChange: changePagination,
|
|
||||||
}));
|
|
||||||
const changePagination = (e) => {
|
|
||||||
console.log(e);
|
|
||||||
loading.value = false
|
|
||||||
searchDataInfo.pageIndex = e
|
|
||||||
nextTick(getTopList);
|
|
||||||
};
|
|
||||||
// 计算全选
|
|
||||||
const rowSelection = computed(() => {
|
|
||||||
return {
|
|
||||||
selectedRowKeys: state.selectedRowKeys,
|
|
||||||
onChange: onSelectChange,
|
|
||||||
preserveSelectedRowKeys: true,
|
|
||||||
getCheckboxProps: record => ({
|
|
||||||
disabled: state.caseTitleList.some((item) => record.id == item.id)
|
|
||||||
}),
|
|
||||||
}
|
|
||||||
});
|
|
||||||
//计算出来已选中状态
|
|
||||||
const onSelectChange = (selectedRowKeys, selectedRow) => {
|
|
||||||
state.selectedRowKeys = selectedRowKeys
|
|
||||||
// 过滤取消的
|
|
||||||
// state.caseTitleList = state.caseTitleList.filter((item) => selectedRowKeys.includes(item.id))
|
|
||||||
// state.selectedRow = selectedRow.filter(Boolean)
|
|
||||||
const mergedArray = state.caseTitleList.concat(selectedRow.filter(Boolean));
|
|
||||||
state.selectedRow = Object.values(
|
|
||||||
mergedArray.reduce((acc, obj) => {
|
|
||||||
acc[obj.id] = obj;
|
|
||||||
return acc;
|
|
||||||
}, {})
|
|
||||||
);
|
|
||||||
console.log(state.selectedRow, state.caseTitleList);
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
// 请求列表数据是formdata类型的
|
|
||||||
const getTopList = () => {
|
|
||||||
isTopList(searchDataInfo).then((res) => {
|
|
||||||
loading.value = true;
|
|
||||||
console.log(res);
|
|
||||||
res?.data?.result?.list?.forEach(element => {
|
|
||||||
element.key = element.id
|
|
||||||
});
|
|
||||||
state.dataSource = res?.data?.result?.list || []
|
|
||||||
total.value = res?.data?.result?.count
|
|
||||||
}).catch((err) => {
|
|
||||||
message.error(err);
|
|
||||||
loading.value = false;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
getTopList()
|
|
||||||
|
|
||||||
// 搜索
|
|
||||||
const handleSearch = (num) => {
|
|
||||||
if (num == 1) searchDataInfo.pageIndex = 1
|
|
||||||
console.log(searchDataInfo);
|
|
||||||
getTopList()
|
|
||||||
}
|
|
||||||
|
|
||||||
//错误案例下载
|
|
||||||
const downloadErrorInfo = () => {
|
|
||||||
if (!state.importId) {
|
|
||||||
message.warn('暂无失败数据')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let url = `${process.env.VUE_APP_SYS_API}/xboe/m/boe/cases/recommend/download?importId=` + state.importId
|
|
||||||
console.log(url);
|
|
||||||
window.open(url, '_self');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const { resetFields } = Form.useForm(searchDataInfo, {});
|
|
||||||
//重置
|
|
||||||
const handleRest = () => {
|
|
||||||
resetFields()
|
|
||||||
getTopList()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 取消抽屉
|
|
||||||
const closeDrawer = async () => {
|
|
||||||
state.selectedRowKeys = []
|
|
||||||
state.selectedRow = []
|
|
||||||
state.caseTitleList = []
|
|
||||||
resetFields()
|
|
||||||
emit('update:visible', false)
|
|
||||||
await nextTick()
|
|
||||||
getTopList()
|
|
||||||
}
|
|
||||||
// 根据数组id去重
|
|
||||||
const deduplicateArrayById = (arr) => {
|
|
||||||
// 使用 Set 数据结构保存不重复的 id
|
|
||||||
const idSet = new Set();
|
|
||||||
// 使用 map 方法遍历数组，检查并去重对象
|
|
||||||
const deduplicatedArray = arr.filter(obj => {
|
|
||||||
const id = obj.id;
|
|
||||||
if (!idSet.has(id)) {
|
|
||||||
idSet.add(id);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
return deduplicatedArray;
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
//上传
|
|
||||||
|
|
||||||
.addcourse1 {
|
|
||||||
:global(.ant-drawer-header-title) {
|
|
||||||
flex-direction: row-reverse !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.ant-drawer-close) {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btnn {
|
|
||||||
height: 72px;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
background-color: #fff;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
|
|
||||||
|
|
||||||
.btn1 {
|
|
||||||
width: 90px;
|
|
||||||
height: 34px;
|
|
||||||
border: 1px solid #4ea6ff;
|
|
||||||
border-radius: 5px;
|
|
||||||
color: #4ea6ff;
|
|
||||||
background-color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn2 {
|
|
||||||
cursor: pointer;
|
|
||||||
width: 100px;
|
|
||||||
height: 40px;
|
|
||||||
background: #4ea6ff;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 0;
|
|
||||||
margin-left: 15px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.btn3{
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #02a7f0;
|
|
||||||
color: #02a7f0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 头部
|
|
||||||
.filter {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.filterItems {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.select {
|
|
||||||
margin-right: 20px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
padding: 0 26px 0 26px;
|
|
||||||
height: 34px;
|
|
||||||
background: #4ea6ff;
|
|
||||||
border-radius: 5px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-right: 14px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.btnText {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #ffffff;
|
|
||||||
line-height: 36px;
|
|
||||||
// margin-left: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btnn {
|
|
||||||
padding: 0 26px 0 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;
|
|
||||||
|
|
||||||
.btnText {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #fff;
|
|
||||||
line-height: 36px;
|
|
||||||
// margin-left: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.btn1:active {
|
|
||||||
background: #0982ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn2:active {
|
|
||||||
background: rgba(64, 158, 255, 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btns {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
padding: 0 26px;
|
|
||||||
height: 34px;
|
|
||||||
background: #4ea6ff;
|
|
||||||
border-radius: 5px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-right: 14px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
.btnText {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #ffffff;
|
|
||||||
line-height: 36px;
|
|
||||||
// margin-left: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn3 {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn3:active {
|
|
||||||
background: #0982ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//底部
|
|
||||||
.right1 {
|
|
||||||
border-left: 1px solid #f2f6fe;
|
|
||||||
margin-left: 20px;
|
|
||||||
|
|
||||||
.onerow {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-right: 40px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.onleft {
|
|
||||||
display: flex;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.already {
|
|
||||||
color: rgba(51, 51, 51, 1);
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-left: 32px;
|
|
||||||
white-space: nowrap;
|
|
||||||
// margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.count {
|
|
||||||
color: #4ea6ff;
|
|
||||||
font-size: 16px;
|
|
||||||
margin: 0 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.peo {
|
|
||||||
color: rgba(51, 51, 51, 1);
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.clbox {
|
|
||||||
margin-right: 50px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 104px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: #4ea6ff;
|
|
||||||
|
|
||||||
.colose {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
background-image: url(../../assets/images/basicinfo/ch.png);
|
|
||||||
background-size: 100%;
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.allclear {
|
|
||||||
color: rgba(255, 255, 255, 1);
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.selecteds {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-left: 32px;
|
|
||||||
|
|
||||||
.person {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-top: 1px solid #f2f6fe;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chose {
|
|
||||||
min-width: 64px;
|
|
||||||
height: 24px;
|
|
||||||
margin-top: 25px;
|
|
||||||
margin-right: 25px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 2px;
|
|
||||||
border: 1px solid rgba(56, 139, 225, 1);
|
|
||||||
color: rgba(56, 139, 225, 1);
|
|
||||||
font-size: 12px;
|
|
||||||
position: relative;
|
|
||||||
padding: 0 10px;
|
|
||||||
|
|
||||||
.ch {
|
|
||||||
position: absolute;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
background-image: url(../../assets/images/basicinfo/ch.png);
|
|
||||||
right: -8px;
|
|
||||||
top: -8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ifsw {
|
|
||||||
display: flex;
|
|
||||||
align-items: end;
|
|
||||||
justify-content: center;
|
|
||||||
color: #4ea6ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sw {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: justify;
|
|
||||||
color: #4ea6ff;
|
|
||||||
margin-top: 23px;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dept {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 30px;
|
|
||||||
border-top: 1px solid #f2f6fe;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user