list调整
This commit is contained in:
parent
7ba667f657
commit
3e5831c095
|
@ -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>
|
Loading…
Reference in New Issue