fix:面授课预览三级分类显示

This commit is contained in:
wuyx
2022-12-25 12:31:06 +08:00
parent a44efa9931
commit 0761125c69
2 changed files with 788 additions and 737 deletions

View File

@@ -1,20 +1,11 @@
<template> <template>
<a-drawer <a-drawer :visible="selfacetVisible" class="drawerStyle selfacetDrawer" width="80%" title="添加在线" placement="right"
:visible="selfacetVisible" @after-visible-change="afterVisibleChange">
class="drawerStyle selfacetDrawer"
width="80%"
title="添加在线"
placement="right"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain"> <div class="drawerMain">
<div class="header"> <div class="header">
<div class="headerTitle">选择面授</div> <div class="headerTitle">选择面授</div>
<img <img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
style="width: 29px; height: 29px; cursor: pointer" @click="closeDrawer" />
src="../../assets/images/basicinfo/close.png"
@click="closeDrawer"
/>
</div> </div>
<div class="contentMain"> <div class="contentMain">
<div class="main_items"> <div class="main_items">
@@ -22,11 +13,8 @@
<div class="mii_ipt"> <div class="mii_ipt">
<div class="ipt_name">课程信息</div> <div class="ipt_name">课程信息</div>
<div class="fi_input"> <div class="fi_input">
<a-input <a-input v-model:value="name" style="width: 424px; height: 40px; border-radius: 8px;"
v-model:value="name" placeholder="请输入课程名称" />
style="width: 424px; height: 40px; border-radius: 8px;"
placeholder="请输入课程名称"
/>
</div> </div>
</div> </div>
<!-- <!--
@@ -106,31 +94,17 @@
<div class="main_table"> <div class="main_table">
<a-table <a-table class="ant-table-striped" :row-class-name="
class="ant-table-striped"
:row-class-name="
(_record, index) => (index % 2 === 1 ? 'table-striped' : null) (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
" " :row-selection="rowSelection" :columns="columns1" :data-source="classTableData"
:row-selection="rowSelection" :loading="tableDataTotal === -1 ? true : false" :pagination="false" />
:columns="columns1"
:data-source="classTableData"
:loading="tableDataTotal === -1 ? true : false"
:pagination="false"
/>
<div class="tableBox" style="margin-top:85px;"> <div class="tableBox" style="margin-top:85px;">
<div class="pa" style="display:flex;justify-content:center;"> <div class="pa" style="display:flex;justify-content:center;">
<a-pagination <a-pagination v-if="tableDataTotal > 10" :showSizeChanger="false" showQuickJumper="true"
v-if="tableDataTotal > 10" hideOnSinglePage="true" :pageSize="pageSize" :current="currentPage" :total="tableDataTotal"
:showSizeChanger="false" class="pagination" @change="changePaginationStu" />
showQuickJumper="true" </div>
hideOnSinglePage="true" </div>
:pageSize="pageSize"
:current="currentPage"
:total="tableDataTotal"
class="pagination"
@change="changePaginationStu"
/>
</div></div>
</div> </div>
</div> </div>
<div class="main_btns"> <div class="main_btns">
@@ -234,126 +208,129 @@ export default {
], ],
options2222: [ options2222: [
{ {
title: "领导力", title: '领导力',
value: "100", value: '100',
selectable: false,
children: [ children: [
{ {
title: "领导业务", title: '领导业务',
value: "1001", value: '1001',
children: [
{
title: '业务能力领导',
value: '100101',
}
]
}, },
{ {
title: "领导团队", title: '领导团队',
value: "1002", value: '1002',
}, },
{ {
title: "领导自我", title: '领导自我',
value: "1003", value: '1003',
}, },
], ],
}, },
{ {
title: "专业力", title: '专业力',
value: "200", value: '200',
selectable: false,
children: [ children: [
{ {
title: "研发", title: '研发',
value: "2001", value: '2001',
}, },
{ {
title: "产品和解决方案", title: '产品和解决方案',
value: "2002", value: '2002',
}, },
{ {
title: "生产技术与制造", title: '生产技术与制造',
value: "2003", value: '2003',
}, },
{ {
title: "供应链", title: '供应链',
value: "2004", value: '2004',
}, },
{ {
title: "营销", title: '营销',
value: "2005", value: '2005',
}, },
{ {
title: "品质", title: '品质',
value: "2006", value: '2006',
}, },
{ {
title: "战略与企划", title: '战略与企划',
value: "2007", value: '2007',
}, },
{ {
title: "流程管理", title: '流程管理',
value: "2008", value: '2008',
}, },
{ {
title: "业绩管理", title: '业绩管理',
value: "2009", value: '2009',
}, },
{ {
title: "项目管理", title: '项目管理',
value: "20010", value: '20010',
}, },
{ {
title: "信息技术", title: '信息技术',
value: "20011", value: '20011',
}, },
{ {
title: "环境与安全", title: '环境与安全',
value: "20012", value: '20012',
}, },
{ {
title: "人力资源", title: '人力资源',
value: "20013", value: '20013',
}, },
{ {
title: "企业文化", title: '企业文化',
value: "20014", value: '20014',
}, },
{ {
title: "品牌", title: '品牌',
value: "20015", value: '20015',
}, },
{ {
title: "财务", title: '财务',
value: "20016", value: '20016',
}, },
{ {
title: "法务", title: '法务',
value: "20017", value: '20017',
}, },
{ {
title: "行政", title: '行政',
value: "20018", value: '20018',
}, },
{ {
title: "医工", title: '医工',
value: "20019", value: '20019',
}, }
], ],
}, },
{ {
title: "通用力", title: '通用力',
value: "300", value: '300',
selectable: false,
children: [ children: [
{ {
title: "职业操守与道德", title: '职业操守与道德',
value: "3001", value: '3001',
}, },
{ {
title: "职业素养与技能", title: '职业素养与技能',
value: "3002", value: '3002',
}, },
{ {
title: "规章制度", title: '规章制度',
value: "3003", value: '3003',
}, },
], ],
}, }
], ],
currentPage: 1, currentPage: 1,
tableDataTotal: null, tableDataTotal: null,
@@ -454,15 +431,17 @@ export default {
}; };
console.log("obj", obj); console.log("obj", obj);
var breaked = false; var breaked = false;
for (let i = 0; i < options.length; i++) { for (let i = 0; i < options.length; i++) {
for (let j = 0; j < options[i].children.length; j++) { for (let j = 0; j < options[i].children.length; j++) {
if ( if (
String(options[i].children[j].value) === String(options[i].children[j].value) ===
String(obj.categoryId) String(obj.categoryId)
) { ) {
console.log("obj.categoryId",obj.categoryId); obj.category = changeTreeSelectValue(String(obj.categoryId))
obj.category = options[i].children[j].title; // console.log("obj.categoryId", obj.categoryId);
console.log("obj. obj.category ", obj.category ); // obj.category = options[i].children[j].title;
// console.log("obj. obj.category ", obj.category);
breaked = true; breaked = true;
break; break;
} }
@@ -480,6 +459,36 @@ export default {
state.classTableData = array; state.classTableData = array;
}; };
// 格式化树型结构选择数据
const changeTreeSelectValue = (values) => {
let data = state.options2222;
console.log(values, data)
let str = ''
for (let i = 0; i < data.length; i++) {
if (data[i].value == values) {
str = data[i].title
} else {
for (let j = 0; j < data[i].children.length; j++) {
if (data[i].children[j].value == values) {
str = data[i].title + '/' + data[i].children[j].title
} else {
if (data[i].children[j].children) {
for (let k = 0; k < data[i].children[j].children.length; k++) {
if (data[i].children[j].children[k].value == values) {
str = data[i].title + '/' + data[i].children[j].title + '/' + data[i].children[j].children[k].title
} else {
str = '-'
}
}
}
}
}
}
}
console.log('str-str-str-str', str)
state.fen_lei1 = str;
return str;
}
@@ -729,28 +738,33 @@ export default {
} }
} }
} }
.main_table { .main_table {
position: relative; position: relative;
padding-bottom: 80px; padding-bottom: 80px;
.ant-checkbox-wrapper { .ant-checkbox-wrapper {
align-items: center; align-items: center;
margin-top: -2px; margin-top: -2px;
} }
.ant-table-selection-column { .ant-table-selection-column {
padding: 0px !important; padding: 0px !important;
padding-left: 5px !important; padding-left: 5px !important;
} }
.ant-table-thead>tr>th { .ant-table-thead>tr>th {
background-color: rgba(239, 244, 252, 1); background-color: rgba(239, 244, 252, 1);
} }
th.h { th.h {
background-color: #eff4fc !important; background-color: #eff4fc !important;
} }
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td {
> td {
background: #f6f9fd; background: #f6f9fd;
} }
.pa { .pa {
left: 0; left: 0;
width: 100%; width: 100%;
@@ -760,6 +774,7 @@ export default {
bottom: 20px; bottom: 20px;
} }
} }
.main_btns { .main_btns {
height: 72px; height: 72px;
width: 100%; width: 100%;

View File

@@ -228,126 +228,129 @@ export default defineComponent({
imgList: [], imgList: [],
options2222: [ options2222: [
{ {
title: "领导力", title: '领导力',
value: "100", value: '100',
selectable: false,
children: [ children: [
{ {
title: "领导业务", title: '领导业务',
value: "1001", value: '1001',
children: [
{
title: '业务能力领导',
value: '100101',
}
]
}, },
{ {
title: "领导团队", title: '领导团队',
value: "1002", value: '1002',
}, },
{ {
title: "领导自我", title: '领导自我',
value: "1003", value: '1003',
}, },
], ],
}, },
{ {
title: "专业力", title: '专业力',
value: "200", value: '200',
selectable: false,
children: [ children: [
{ {
title: "研发", title: '研发',
value: "2001", value: '2001',
}, },
{ {
title: "产品和解决方案", title: '产品和解决方案',
value: "2002", value: '2002',
}, },
{ {
title: "生产技术与制造", title: '生产技术与制造',
value: "2003", value: '2003',
}, },
{ {
title: "供应链", title: '供应链',
value: "2004", value: '2004',
}, },
{ {
title: "营销", title: '营销',
value: "2005", value: '2005',
}, },
{ {
title: "品质", title: '品质',
value: "2006", value: '2006',
}, },
{ {
title: "战略与企划", title: '战略与企划',
value: "2007", value: '2007',
}, },
{ {
title: "流程管理", title: '流程管理',
value: "2008", value: '2008',
}, },
{ {
title: "业绩管理", title: '业绩管理',
value: "2009", value: '2009',
}, },
{ {
title: "项目管理", title: '项目管理',
value: "20010", value: '20010',
}, },
{ {
title: "信息技术", title: '信息技术',
value: "20011", value: '20011',
}, },
{ {
title: "环境与安全", title: '环境与安全',
value: "20012", value: '20012',
}, },
{ {
title: "人力资源", title: '人力资源',
value: "20013", value: '20013',
}, },
{ {
title: "企业文化", title: '企业文化',
value: "20014", value: '20014',
}, },
{ {
title: "品牌", title: '品牌',
value: "20015", value: '20015',
}, },
{ {
title: "财务", title: '财务',
value: "20016", value: '20016',
}, },
{ {
title: "法务", title: '法务',
value: "20017", value: '20017',
}, },
{ {
title: "行政", title: '行政',
value: "20018", value: '20018',
}, },
{ {
title: "医工", title: '医工',
value: "20019", value: '20019',
}, }
], ],
}, },
{ {
title: "通用力", title: '通用力',
value: "300", value: '300',
selectable: false,
children: [ children: [
{ {
title: "职业操守与道德", title: '职业操守与道德',
value: "3001", value: '3001',
}, },
{ {
title: "职业素养与技能", title: '职业素养与技能',
value: "3002", value: '3002',
}, },
{ {
title: "规章制度", title: '规章制度',
value: "3003", value: '3003',
}, },
], ],
}, }
], ],
ceshi: "https://u-pre.boe.com/upload/测试下载ppt2-1671002026755.pptx", ceshi: "https://u-pre.boe.com/upload/测试下载ppt2-1671002026755.pptx",
ceshi2: "http://111.231.196.214:12016/测试下载ppt3-1671001683026.pptx", ceshi2: "http://111.231.196.214:12016/测试下载ppt3-1671001683026.pptx",
@@ -370,14 +373,47 @@ export default defineComponent({
if (txt) { if (txt) {
for (let i = 0; i < options2.value.length; i++) { for (let i = 0; i < options2.value.length; i++) {
for (let j = 0; j < options2.value[i].children.length; j++) { for (let j = 0; j < options2.value[i].children.length; j++) {
if (String(options2.value[i].children[j].value) === String(txt)) { str = changeTreeSelectValue(String(txt))
str = options2.value[i].children[j].title; // if (String(options2.value[i].children[j].value) === String(txt)) {
} // str = options2.value[i].children[j].title;
// }
} }
} }
} }
return str; return str;
}; };
// 格式化树型结构选择数据
const changeTreeSelectValue = (values) => {
let data = state.options2222;
console.log(values, data)
let str = ''
for (let i = 0; i < data.length; i++) {
if (data[i].value == values) {
str = data[i].title
} else {
for (let j = 0; j < data[i].children.length; j++) {
if (data[i].children[j].value == values) {
str = data[i].title + '/' + data[i].children[j].title
} else {
if (data[i].children[j].children) {
for (let k = 0; k < data[i].children[j].children.length; k++) {
if (data[i].children[j].children[k].value == values) {
str = data[i].title + '/' + data[i].children[j].title + '/' + data[i].children[j].children[k].title
} else {
str = '-'
}
}
}
}
}
}
}
console.log('str-str-str-str', str)
state.fen_lei1 = str;
return str;
}
const filterSenceTxt = (txt) => { const filterSenceTxt = (txt) => {
let str = "-"; let str = "-";
if (txt) { if (txt) {