list调整

This commit is contained in:
Yjhon 2022-02-24 19:49:23 +08:00
parent 7ba667f657
commit 3e5831c095
1 changed files with 33 additions and 25 deletions

View File

@ -3,7 +3,7 @@
<a-card :bordered="false" title="项目课程选择">
<a-row type="flex" justify="center" align="top">
<a-col :span="4" id="tree">
<a-menu v-model="menuKey" mode="horizontal" @select="menuChack" >
<a-menu v-model="menuKey" mode="horizontal" @select="menuChack">
<a-menu-item key="sys">系统课程</a-menu-item>
<a-menu-item key="self">自主课程</a-menu-item>
</a-menu>
@ -24,20 +24,21 @@
</a-row>
</a-form>
<!-- onChange: onSelectChange, -->
<s-table ref="table" :columns="columns" :data="loadData" :rowKey="(record) => record.id"
:rowSelection="{ selectedRowKeys: selectedRowKeys, selectedRows: selectedRows,onChange: onSelectChange, onSelect: tableOnSelect ,onSelectAll: tableAllSelected }">
<s-table ref="table" :columns="columns" :data="loadData" :rowKey="(record) => record.id" :rowSelection="{ selectedRowKeys: selectedRowKeys, selectedRows: selectedRows,onChange: onSelectChange, onSelect: tableOnSelect ,onSelectAll: tableAllSelected }">
<span slot="serial" slot-scope="text, record, index">
{{ index + 1 }}
</span>
</s-table>
</a-col>
<a-col :span="6" id="select">
<p>点击列表项取消选择或<a @click="removeAllSelece">清空所有</a></p>
<a-list size="small" :data-source="selectedRows" :rowKey="(item) => item.id">
<a-list-item slot="renderItem" slot-scope="item" @click="changeList({ item })">
{{ item.courseName + '' + item.courseCode + '' }}
</a-list-item>
</a-list>
<div class="alist" >
<p>点击列表项取消选择或<a @click="removeAllSelece">清空所有</a></p>
<a-list size="small" :data-source="selectedRows" :rowKey="(item) => item.id">
<a-list-item slot="renderItem" slot-scope="item" @click="changeList({ item })">
{{ item.courseName + '' + item.courseCode + '' }}
</a-list-item>
</a-list>
</div>
</a-col>
</a-col>
</a-row>
@ -72,7 +73,7 @@ export default {
menuKey: ['sys'], //
//
queryParam: { name: '', classType: 1 ,type: 1},
queryParam: { name: '', classType: 1, type: 1 },
replaceFields: { children: 'children', title: 'name', key: 'value', value: 'id' },
expandedKeys: [],
autoExpandParent: true,
@ -90,7 +91,7 @@ export default {
loadData: (parameter) => {
return listByClass(Object.assign(parameter, this.queryParam)).then((res) => {
return res
})
})
},
}
},
@ -106,11 +107,11 @@ export default {
//
methods: {
//
menuChack(){
console.log('menuKey',this.menuKey)
menuChack() {
console.log('menuKey', this.menuKey)
let type = 2;
console.log('菜单改变',this.menuKey[0])
if(this.menuKey[0] === 'self') type = 1;
console.log('菜单改变', this.menuKey[0])
if (this.menuKey[0] === 'self') type = 1;
this.queryParam.type = type
this.getCourseTreeData(type);
this.$refs.table.refresh(true);
@ -146,21 +147,21 @@ export default {
},
/** table取消勾选 */
tableOnSelect(record, selected, selectedRows, nativeEvent){
if(!selected) { //
tableOnSelect(record, selected, selectedRows, nativeEvent) {
if (!selected) { //
let keys = this.selectedRowKeys.filter(item => item != record.id);
let rows = this.selectedRows.filter(item => item.id != record.id);
this.selectedRows = rows;
this.selectedRowKeys = keys;
}
}
},
/** table取消全选 */
tableAllSelected(selected, selectedRows, changeRows){
if(!selected){ //
let exKeys = changeRows.map(value => {return value.id})
let keys = this.selectedRowKeys.filter(item => {return !exKeys.includes(item)});
let rows = this.selectedRows.filter(item => {return !exKeys.includes(item.id)});
tableAllSelected(selected, selectedRows, changeRows) {
if (!selected) { //
let exKeys = changeRows.map(value => { return value.id })
let keys = this.selectedRowKeys.filter(item => { return !exKeys.includes(item) });
let rows = this.selectedRows.filter(item => { return !exKeys.includes(item.id) });
this.selectedRows = rows;
this.selectedRowKeys = keys;
@ -213,14 +214,14 @@ export default {
//
queryCourseList() {
console.log('this.treeDataOne-------', this.treeDataOne)
listByClass({ classType: this.treeDataOne[0] || 0 ,type: this.menuKey[0] === 'sys'?0:1}).then((res) => {
listByClass({ classType: this.treeDataOne[0] || 0, type: this.menuKey[0] === 'sys' ? 0 : 1 }).then((res) => {
this.courseData = res.data
})
},
//
getCourseTreeData(type) {
coursewareClassList({type:type}).then((res) => {
coursewareClassList({ type: type }).then((res) => {
//list🌲
const list2tree1 = (list, parentId) => {
return list.filter((item) => {
@ -260,4 +261,11 @@ export default {
}
</script>
<style scoped>
.alist {
border: 1px solid #e8e8e8;
border-radius: 4px;
overflow: auto;
padding: 8px 24px;
height: 500px;
}
</style>