lingling
/
welfare-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/views/project/form/ProjectCourseSelect.vue
View File

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