240 lines
7.9 KiB
Vue
240 lines
7.9 KiB
Vue
<template>
|
||
<a-modal id="modal" :title="modalTitle" :width="1500" height="auto" :visible="visible" @ok="handleSubmit" @cancel="handleCancel">
|
||
<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-item key="sys">系统课程</a-menu-item>
|
||
<a-menu-item key="self">自主课程</a-menu-item>
|
||
</a-menu>
|
||
<!-- :defaultExpandedKeys="defaultExpandedKeys" -->
|
||
<a-tree :treeData="treeData" @select="onSelect" :defaultExpandAll="true" :replaceFields="replaceFields">
|
||
<a-icon slot="switcherIcon" type="down" />
|
||
</a-tree>
|
||
</a-col>
|
||
<a-col :span="20" id="content">
|
||
<a-page-header title="课程选择" sub-title="" />
|
||
<a-col :span="18" id="table">
|
||
<a-form layout="inline">
|
||
<a-row>
|
||
<a-form-item label="课程名称">
|
||
<a-input v-model="queryParam.name" placeholder="请输入课程名称" />
|
||
</a-form-item>
|
||
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
|
||
</a-row>
|
||
</a-form>
|
||
<s-table ref="table" :columns="columns" :data="loadData" :rowKey="(record) => record.id"
|
||
:rowSelection="{ selectedRowKeys: selectedRowKeys, selectedRows: selectedRows, onChange: onSelectChange }">
|
||
<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>
|
||
</a-col>
|
||
</a-col>
|
||
</a-row>
|
||
</a-card>
|
||
</a-modal>
|
||
</template>
|
||
|
||
<script>
|
||
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
||
// 例如：import 《组件名称》 from '《组件路径》'
|
||
import { coursewareClassList } from '@/api/course/courseware'
|
||
import { listByClass } from '@/api/course/course'
|
||
import { STable } from '@/components'
|
||
const rootParentId = 0
|
||
|
||
export default {
|
||
// import引入的组件需要注入到对象中才能使用
|
||
components: {
|
||
STable,
|
||
},
|
||
props: {
|
||
selectRows: {
|
||
type: Array,
|
||
},
|
||
},
|
||
data() {
|
||
// 这里存放数据
|
||
return {
|
||
visible: false, //是否显示弹框
|
||
modalTitle: '',
|
||
|
||
menuKey: ['sys'], //默认系统课程
|
||
|
||
// 查询参数
|
||
queryParam: { name: '', classType: 0 ,type: 0},
|
||
replaceFields: { children: 'children', title: 'name', key: 'value', value: 'id' },
|
||
expandedKeys: [],
|
||
autoExpandParent: true,
|
||
// defaultExpandedKeys: [],
|
||
selectedRowKeys: [],
|
||
selectedRows: [],
|
||
treeData: [],
|
||
treeDataOne: [],
|
||
columns: [
|
||
{ title: '序号', key: 'id', dataIndex: 'id', width: 60, scopedSlots: { customRender: 'serial' } },
|
||
{ title: '课程编号', dataIndex: 'courseCode' },
|
||
{ title: '课程名称', dataIndex: 'courseName' },
|
||
],
|
||
//人员列表数据
|
||
loadData: (parameter) => {
|
||
return listByClass(Object.assign(parameter, this.queryParam)).then((res) => {
|
||
return res
|
||
})
|
||
},
|
||
}
|
||
},
|
||
// 计算属性 类似于data概念
|
||
computed: {
|
||
hasSelected() {
|
||
return this.selectedRowKeys.length > 0
|
||
},
|
||
},
|
||
// 监控data中的数据变化
|
||
watch: {
|
||
},
|
||
// 方法集合
|
||
methods: {
|
||
//菜单改变，
|
||
menuChack(){
|
||
console.log('menuKey',this.menuKey)
|
||
let type = 1;
|
||
console.log('菜单改变',this.menuKey[0])
|
||
if(this.menuKey[0] === 'self') type = 2;
|
||
this.queryParam.type = type
|
||
this.getCourseTreeData(type);
|
||
this.$refs.table.refresh(true);
|
||
},
|
||
// 编辑打开页面初始化
|
||
edit(record) {
|
||
console.log('课程选择打开了', record)
|
||
this.modalTitle = '选择课程'
|
||
this.visible = true
|
||
console.log('selectRows-------------', this.selectRows)
|
||
if (this.selectRows) {
|
||
this.selectedRows = this.selectRows;
|
||
this.selectedRowKeys = this.selectedRows.map((value) => value.id)
|
||
}
|
||
},
|
||
handleCancel() {
|
||
console.log('课程选择关闭')
|
||
this.visible = false
|
||
},
|
||
handleSubmit() {
|
||
console.log('课程选择提交了', this.selectedRowKeys)
|
||
this.visible = false
|
||
if (this.selectedRowKeys) this.$emit('selectKeyDataSubmit', this.selectedRowKeys.join(','))
|
||
else this.$emit('selectKeyDataSubmit', '')
|
||
},
|
||
|
||
/** 表格行选中后触发 */
|
||
onSelectChange(selectedRowKeys, selectedRows) {
|
||
console.log('selectedRowKeys changed: ', selectedRowKeys)
|
||
console.log('选择的表格数据 : ', selectedRows)
|
||
this.selectedRowKeys = this.uniqueKeys([...this.selectedRowKeys, ...selectedRowKeys])
|
||
this.selectedRows = this.unique([...this.selectedRows, ...selectedRows])
|
||
},
|
||
|
||
//对象去重
|
||
unique(arr) {
|
||
const res = new Map()
|
||
return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
|
||
},
|
||
|
||
//key去重
|
||
uniqueKeys(arr) {
|
||
const res = new Map()
|
||
return arr.filter((arr) => !res.has(arr) && res.set(arr, 1))
|
||
},
|
||
|
||
//列表点击删除列表项
|
||
changeList(item) {
|
||
console.log('列表点击删除列表项 : ', item)
|
||
this.selectedRows = this.selectedRows.filter(function (i) {
|
||
return i.id != item.item.id
|
||
})
|
||
this.selectedRowKeys = this.selectedRowKeys.filter(function (i) {
|
||
return i != item.item.id
|
||
})
|
||
},
|
||
|
||
//清空选择
|
||
removeAllSelece() {
|
||
this.selectedRowKeys = []
|
||
this.selectedRows = []
|
||
},
|
||
|
||
//选中后触发
|
||
onSelect(selectedKey, info) {
|
||
console.log('onSelect-------', selectedKey, info)
|
||
this.queryParam.classType = selectedKey.toString()
|
||
// this.orgId = selectedKey.toString()
|
||
this.$refs.table.refresh(true)
|
||
},
|
||
|
||
//树使用的方法
|
||
onExpand(expandedKeys) {
|
||
this.expandedKeys = expandedKeys
|
||
this.autoExpandParent = false
|
||
},
|
||
|
||
//查询课程列表
|
||
queryCourseList() {
|
||
console.log('this.treeDataOne-------', this.treeDataOne)
|
||
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) => {
|
||
//list转🌲
|
||
const list2tree1 = (list, parentId) => {
|
||
return list.filter((item) => {
|
||
// 默认选中第一个节点
|
||
if (this.treeDataOne) this.treeDataOne.push(item.value)
|
||
if (item.parentId === parentId) {
|
||
item.children = list2tree1(list, item.id)
|
||
return true
|
||
}
|
||
return false
|
||
})
|
||
}
|
||
this.treeData = list2tree1(res.data, 0)
|
||
})
|
||
},
|
||
},
|
||
// 生命周期 - 创建完成（可以访问当前this实例）
|
||
created() {
|
||
this.getCourseTreeData(0) //进来首先获取系统课程
|
||
},
|
||
// 生命周期 - 挂载完成（可以访问DOM元素）
|
||
mounted() { },
|
||
// 生命周期 - 创建之前
|
||
beforeCreate() { },
|
||
// 生命周期 - 挂载之前
|
||
beforeMount() { },
|
||
// 生命周期 - 更新之前
|
||
beforeUpdate() { },
|
||
// 生命周期 - 更新之后
|
||
updated() { },
|
||
// 生命周期 - 销毁之前
|
||
beforeDestroy() { },
|
||
// 生命周期 - 销毁完成
|
||
destroyed() { },
|
||
// 如果页面有keep-alive缓存功能，这个函数会触发
|
||
activated() { },
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
</style> |