项目管理表单更新
This commit is contained in:
Yuanjianghong
parent
3c4dc139ac
commit
72e59de845
|
|
@ -8,8 +8,8 @@ const courseApi = {
|
|||
// updateStatus: 'sys/menu/updateStatus',
|
||||
list: '/courseManagement/course/listPage',
|
||||
coursewareList:'/courseManagement/course/courseware/details',
|
||||
questionList:'/courseManagement/course/questionList'
|
||||
|
||||
questionList:'/courseManagement/course/questionList',
|
||||
listByClass:'/courseManagement/course/list',
|
||||
}
|
||||
|
||||
export function courseAdd (params) {
|
||||
|
|
@ -19,13 +19,13 @@ export function courseAdd (params) {
|
|||
data: params
|
||||
})
|
||||
}
|
||||
// export function menuGet (params) {
|
||||
// return request({
|
||||
// url: menuApi.get,
|
||||
// method: 'post',
|
||||
// data: params
|
||||
// })
|
||||
// }
|
||||
export function listByClass (params) {
|
||||
return request({
|
||||
url: courseApi.listByClass,
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
// export function menuUpdate (params) {
|
||||
// return request({
|
||||
// url: menuApi.update,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</template>
|
||||
<a-space direction="vertical" style="width: 100%">
|
||||
<a-space direction="horizontal">
|
||||
<span>总课时：{{ totalHours }}, 总学时要求：{{ totalLearnHours }}, 总题目数量：{{ totalTopicNum }} </span>
|
||||
<span>总课时：{{ totalHours }}H , 总学时要求：{{ totalLearnHours }}H , 总题目数量：{{ totalTopicNum }} </span>
|
||||
课程名:
|
||||
<a-input v-model="queryParam.courseName" style="width: 100%" />
|
||||
<a-button type="primary" icon="search" @click="$refs.table.refresh(true)">查询</a-button>
|
||||
|
|
@ -46,8 +46,8 @@
|
|||
</template>
|
||||
</span>
|
||||
</s-table>
|
||||
<project-course-select ref="CourseSelect"></project-course-select>
|
||||
</a-space>
|
||||
<project-course-select ref="CourseSelect" @selectKeyDataSubmit="selectKeyDataChange"></project-course-select>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
|
|
@ -86,8 +86,8 @@ export default {
|
|||
{ title: '序号', key: 'id', dataIndex: 'id', width: 60, scopedSlots: { customRender: 'serial' } },
|
||||
{ title: '课程编号', dataIndex: 'courseNo', key: 'courseNo' },
|
||||
{ title: '课程名称', dataIndex: 'courseName', key: 'courseName' },
|
||||
{ title: '课时', dataIndex: 'courseHours', key: 'courseHours', customRender: (text) => text + '分' },
|
||||
{ title: '学时要求', dataIndex: 'learnHours', key: 'learnHours', customRender: (text) => text + '分' },
|
||||
{ title: '课时', dataIndex: 'courseHours', key: 'courseHours', customRender: (text) => text + 'H' },
|
||||
{ title: '学时要求', dataIndex: 'learnHours', key: 'learnHours', customRender: (text) => text + 'H' },
|
||||
{ title: '题量', dataIndex: 'topicNumber', key: 'topicNumber' },
|
||||
// { title: '项目名称', dataIndex: 'projectName', key: 'projectName' },
|
||||
{ title: '操作', width: 200, align: 'center', scopedSlots: { customRender: 'action' } },
|
||||
|
|
@ -96,11 +96,13 @@ export default {
|
|||
if (this.$route.query.projectId) {
|
||||
/** 编辑进来的有项目id */
|
||||
return getCourseList(this.$route.query.projectId).then((res) => {
|
||||
this.calc(res.data)
|
||||
return res.data
|
||||
})
|
||||
} else {
|
||||
/** 新建的没有项目id，传当前的所选的课程id */
|
||||
return getCourseListByCourseIds(Object.assign(parameter, this.queryParam)).then((res) => {
|
||||
this.calc(res.data)
|
||||
return res.data
|
||||
})
|
||||
}
|
||||
|
|
@ -113,6 +115,17 @@ export default {
|
|||
watch: {},
|
||||
//方法集合
|
||||
methods: {
|
||||
//计算总学时，总分数，总课时
|
||||
calc(data){
|
||||
this.totalHours = 0
|
||||
this.totalLearnHours = 0
|
||||
this.totalTopicNum = 0
|
||||
data.forEach((item)=>{
|
||||
this.totalHours = this.totalHours + parseInt(item.courseHours)
|
||||
this.totalLearnHours = this.totalLearnHours + parseInt(item.learnHours)
|
||||
this.totalTopicNum = this.totalTopicNum + parseInt(item.topicNumber)
|
||||
})
|
||||
},
|
||||
//下一步
|
||||
toNext() {
|
||||
this.form.lessonIds = []
|
||||
|
|
@ -138,33 +151,21 @@ export default {
|
|||
},
|
||||
//初始化ids
|
||||
initIds() {
|
||||
let str = this.projectForm.lessonIds.join(',')
|
||||
console.log('this.projectForm.lessonIds',this.projectForm.lessonIds)
|
||||
let str = '';
|
||||
if(this.projectForm.lessonIds) str = this.projectForm.lessonIds.join(',')
|
||||
// let str = this.projectForm.lessonIds.join(',') || []
|
||||
console.log('initIds', str)
|
||||
if (str) {
|
||||
this.queryParam.ids = str
|
||||
}
|
||||
},
|
||||
/**查询了列表数据 */
|
||||
getProjectCourseList() {
|
||||
// if (this.$route.query.projectId) {
|
||||
// /** 编辑景来的有项目id */
|
||||
// getCourseList(this.$route.query.projectId).then((res) => {
|
||||
// if (res.code == 200) {
|
||||
// // this.data1 = res.data
|
||||
// return res
|
||||
// }
|
||||
// })
|
||||
// } else {
|
||||
// /** 新建的没有项目id，传当前的所选的课程id */
|
||||
// getCourseListByCourseIds(this.queryParam.ids.join(',')).then((res)=>{
|
||||
// if (res.code == 200) {
|
||||
// // this.data1 = res.data
|
||||
// // console.log(this.data1)
|
||||
// return res
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
},
|
||||
//选择课程完毕，提交到list页面
|
||||
selectKeyDataChange(childValue){
|
||||
console.log('list page - selectKeyDataSubmit',childValue)
|
||||
this.queryParam.ids = childValue
|
||||
this.$refs.table.refresh(true)
|
||||
}
|
||||
},
|
||||
|
||||
//生命周期 - 创建完成（可以访问当前this实例）
|
||||
|
|
|
|||
|
|
@ -3,161 +3,188 @@
|
|||
id="modal"
|
||||
:title="modalTitle"
|
||||
:width="1500"
|
||||
:height="750"
|
||||
height="auto"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
:destroyOnClose="true"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-row type="flex" justify="center" align="top">
|
||||
<a-col :span="4">
|
||||
<a-menu v-model="current" mode="horizontal" @click="handleMenuClick">
|
||||
<a-menu-item key="sys">系统课程</a-menu-item>
|
||||
<a-menu-item key="self">自制课程</a-menu-item>
|
||||
</a-menu>
|
||||
<a-tree
|
||||
:replace-fields="replaceFields"
|
||||
:expanded-keys="expandedKeys"
|
||||
:auto-expand-parent="autoExpandParent"
|
||||
:tree-data="treeData"
|
||||
@expand="onExpand"
|
||||
@select="onSelect"
|
||||
>
|
||||
</a-tree>
|
||||
</a-col>
|
||||
<a-col :span="20">
|
||||
<div id="content">
|
||||
<a-transfer
|
||||
:data-source="courseList.courseData"
|
||||
:titles="['待选课程', '已选课程']"
|
||||
:target-keys="courseList.targetKeys"
|
||||
:selected-keys="courseList.selectedKeys"
|
||||
:render="(item) => item.title"
|
||||
:disabled="courseList.disabled"
|
||||
@change="handleChange"
|
||||
@selectChange="handleSelectChange"
|
||||
@scroll="handleScroll"
|
||||
:list-style="{
|
||||
width: '408px',
|
||||
height: '500px',
|
||||
}"
|
||||
<a-card :bordered="false" title="项目课程选择">
|
||||
<a-row type="flex" justify="center" align="top">
|
||||
<a-col :span="4" id="tree">
|
||||
<a-page-header title="单位列表" sub-title="" />
|
||||
<a-tree
|
||||
:treeData="treeData"
|
||||
@select="onSelect"
|
||||
:defaultExpandAll="true"
|
||||
:defaultExpandedKeys="defaultExpandedKeys"
|
||||
:replaceFields="replaceFields"
|
||||
>
|
||||
<template
|
||||
slot="children"
|
||||
slot-scope="{
|
||||
props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
|
||||
on: { itemSelectAll, itemSelect },
|
||||
}"
|
||||
<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 }"
|
||||
>
|
||||
<a-table
|
||||
:row-selection="getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })"
|
||||
:columns="direction === 'left' ? courseList.leftColumns : courseList.rightColumns"
|
||||
:data-source="filteredItems"
|
||||
size="default"
|
||||
:style="{ pointerEvents: listDisabled ? 'none' : null }"
|
||||
:custom-row="
|
||||
({ key, disabled: itemDisabled }) => ({
|
||||
on: {
|
||||
click: () => {
|
||||
if (itemDisabled || listDisabled) return
|
||||
itemSelect(key, !selectedKeys.includes(key))
|
||||
},
|
||||
},
|
||||
})
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</a-transfer>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<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 { getCourseList } from '@/api/course/course'
|
||||
import difference from 'lodash/difference'
|
||||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
||||
//例如：import 《组件名称》 from '《组件路径》'
|
||||
|
||||
// const coData = [];
|
||||
|
||||
const leftTableColumns = [{dataIndex: 'courseCode', title: '课程编号', },{dataIndex: 'courseName', title: '课程名称', },]
|
||||
const rightTableColumns = [ {dataIndex: 'courseCode',title: '课程编号',},{dataIndex: 'courseName',title: '课程名称',},]
|
||||
|
||||
import { listByClass } from '@/api/course/course'
|
||||
import { STable } from '@/components'
|
||||
const rootParentId = 0
|
||||
|
||||
export default {
|
||||
//import引入的组件需要注入到对象中才能使用
|
||||
|
||||
// import引入的组件需要注入到对象中才能使用
|
||||
components: {
|
||||
coursewareClassList,
|
||||
difference,
|
||||
getCourseList,
|
||||
STable,
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
//这里存放数据
|
||||
// 这里存放数据
|
||||
return {
|
||||
replaceFields: {
|
||||
children: 'children',
|
||||
title: 'name',
|
||||
key: 'id',
|
||||
},
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
current: ['sys'],
|
||||
visible: false, //是否显示弹框
|
||||
modalTitle: '',
|
||||
|
||||
// 查询参数
|
||||
queryParam: { name: '', classType: 0 },
|
||||
replaceFields: { children: 'children', title: 'name', key: 'id', value: 'id' },
|
||||
expandedKeys: [],
|
||||
searchValue: '',
|
||||
autoExpandParent: true,
|
||||
defaultExpandedKeys: [],
|
||||
selectedRowKeys: [],
|
||||
selectedRows: [],
|
||||
treeData: [],
|
||||
courseList: {
|
||||
queryParam: {},
|
||||
courseData: [],
|
||||
targetKeys: [],
|
||||
selectedKeys: [],
|
||||
disabled: false,
|
||||
leftColumns: leftTableColumns,
|
||||
rightColumns: rightTableColumns,
|
||||
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: {},
|
||||
//监控data中的数据变化
|
||||
// 计算属性 类似于data概念
|
||||
computed: {
|
||||
hasSelected() {
|
||||
return this.selectedRowKeys.length > 0
|
||||
},
|
||||
},
|
||||
// 监控data中的数据变化
|
||||
watch: {},
|
||||
//方法集合
|
||||
// 方法集合
|
||||
methods: {
|
||||
// 编辑打开页面初始化
|
||||
edit(record) {
|
||||
console.log(record)
|
||||
console.log('课程选择打开了', record)
|
||||
this.modalTitle = '选择课程'
|
||||
this.visible = true
|
||||
this.formLoading = false
|
||||
},
|
||||
handleCancel() {
|
||||
console.log('课程选择关闭')
|
||||
this.visible = false
|
||||
this.formLoading = false
|
||||
},
|
||||
handleSubmit() {
|
||||
console.log('课程选择提交了')
|
||||
console.log('课程选择提交了',this.selectedRowKeys)
|
||||
this.visible = false
|
||||
this.formLoading = false
|
||||
this.$parent.queryParam.ids = this.courseList.selectedKeys.join(",")
|
||||
this.$parent.$refs.table.refresh(true);
|
||||
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
|
||||
},
|
||||
//菜单改变
|
||||
handleMenuClick(e) {
|
||||
console.log('key============', e.key)
|
||||
this.getCourseTreeData(e.key)
|
||||
console.log(this.treeData)
|
||||
//查询课程列表
|
||||
queryCourseList() {
|
||||
console.log('this.treeDataOne-------', this.treeDataOne)
|
||||
listByClass({ classType: this.treeDataOne[0] || 0 }).then((res) => {
|
||||
this.courseData = res.data
|
||||
})
|
||||
},
|
||||
//获取课程分类数据，转换成树结构
|
||||
getCourseTreeData(key) {
|
||||
|
|
@ -165,6 +192,8 @@ export default {
|
|||
//list转🌲
|
||||
const list2tree1 = (list, parentId) => {
|
||||
return list.filter((item) => {
|
||||
// 默认选中第一个节点
|
||||
if (this.treeDataOne) this.treeDataOne.push(item.id)
|
||||
if (item.parentId === parentId) {
|
||||
item.children = list2tree1(list, item.id)
|
||||
return true
|
||||
|
|
@ -172,78 +201,31 @@ export default {
|
|||
return false
|
||||
})
|
||||
}
|
||||
|
||||
this.treeData = list2tree1(res.data, -1)
|
||||
})
|
||||
},
|
||||
onSelect(selectedKeys, e) {},
|
||||
|
||||
handleChange(nextTargetKeys, direction, moveKeys) {
|
||||
this.courseList.targetKeys = nextTargetKeys
|
||||
|
||||
console.log('targetKeys: ', nextTargetKeys)
|
||||
console.log('direction: ', direction)
|
||||
console.log('moveKeys: ', moveKeys)
|
||||
},
|
||||
handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
|
||||
this.courseList.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys]
|
||||
|
||||
console.log('sourceSelectedKeys: ', sourceSelectedKeys)
|
||||
console.log('targetSelectedKeys: ', targetSelectedKeys)
|
||||
},
|
||||
handleScroll(direction, e) {
|
||||
console.log('direction:', direction)
|
||||
console.log('target:', e.target)
|
||||
},
|
||||
getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
|
||||
return {
|
||||
getCheckboxProps: (item) => ({ props: { disabled: disabled || item.disabled } }),
|
||||
onSelectAll(selected, selectedRows) {
|
||||
const treeSelectedKeys = selectedRows.filter((item) => !item.disabled).map(({ key }) => key)
|
||||
const diffKeys = selected
|
||||
? difference(treeSelectedKeys, selectedKeys)
|
||||
: difference(selectedKeys, treeSelectedKeys)
|
||||
itemSelectAll(diffKeys, selected)
|
||||
},
|
||||
onSelect({ key }, selected) {
|
||||
itemSelect(key, selected)
|
||||
},
|
||||
selectedRowKeys: selectedKeys,
|
||||
}
|
||||
},
|
||||
//查询课程列表
|
||||
queryCourseList() {
|
||||
getCourseList(this.courseList.queryParam).then((res) => {
|
||||
if (res.code == 200) {
|
||||
res.data.map(function (currentValue, index, arr) {
|
||||
this.courseList.courseData.push({
|
||||
key: currentValue.id,
|
||||
courseCode: currentValue.courseCode,
|
||||
courseName: currentValue.courseName,
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
// 生命周期 - 创建完成（可以访问当前this实例）
|
||||
created() {
|
||||
this.handleMenuClick();
|
||||
// this.queryCourseList();
|
||||
}, //生命周期 - 创建完成（可以访问当前this实例）
|
||||
mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
|
||||
beforeCreate() {}, //生命周期 - 创建之前
|
||||
beforeMount() {}, //生命周期 - 挂载之前
|
||||
beforeUpdate() {}, //生命周期 - 更新之前
|
||||
updated() {}, //生命周期 - 更新之后
|
||||
beforeDestroy() {}, //生命周期 - 销毁之前
|
||||
destroyed() {}, //生命周期 - 销毁完成
|
||||
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
||||
this.getCourseTreeData()
|
||||
},
|
||||
// 生命周期 - 挂载完成（可以访问DOM元素）
|
||||
mounted() {},
|
||||
// 生命周期 - 创建之前
|
||||
beforeCreate() {},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {},
|
||||
// 生命周期 - 更新之前
|
||||
beforeUpdate() {},
|
||||
// 生命周期 - 更新之后
|
||||
updated() {},
|
||||
// 生命周期 - 销毁之前
|
||||
beforeDestroy() {},
|
||||
// 生命周期 - 销毁完成
|
||||
destroyed() {},
|
||||
// 如果页面有keep-alive缓存功能，这个函数会触发
|
||||
activated() {},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
#content {
|
||||
background-color: rgb(202, 221, 188);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -14,19 +14,17 @@
|
|||
<a-transfer
|
||||
class="tree-transfer"
|
||||
:data-source="dataSource"
|
||||
:titles="['全部单位列表', '已经选中单位']"
|
||||
:target-keys="targetKeys"
|
||||
:render="(item) => item.title"
|
||||
:operations="['选 中', '取 消']"
|
||||
:show-select-all="true"
|
||||
:filter-option="filterOption"
|
||||
:show-select-all="false"
|
||||
@change="onChange"
|
||||
>
|
||||
<template slot="children" slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect, itemSelectAll } }">
|
||||
<template slot="children" slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }">
|
||||
<a-tree
|
||||
v-if="direction === 'left'"
|
||||
blockNode
|
||||
checkable
|
||||
checkStrictly
|
||||
defaultExpandAll
|
||||
:checkedKeys="[...selectedKeys, ...targetKeys]"
|
||||
:treeData="treeData"
|
||||
|
|
@ -46,112 +44,143 @@
|
|||
</a-card>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
||||
// 例如：import 《组件名称》 from '《组件路径》'
|
||||
import { orgList } from '@/api/org/org'
|
||||
import { listToTree } from '@/utils/util'
|
||||
|
||||
//复制过来的方法
|
||||
function handleTreeData(data, targetKeys = []) {
|
||||
data.forEach((item) => {
|
||||
item['disabled'] = targetKeys.includes(item.key)
|
||||
if (item.children) {
|
||||
handleTreeData(item.children, targetKeys)
|
||||
}
|
||||
const treeData = [
|
||||
{ key: '0-0', title: '0-0' },
|
||||
{
|
||||
key: '0-1',
|
||||
title: '0-1',
|
||||
children: [
|
||||
{ key: '0-1-0', title: '0-1-0' },
|
||||
{ key: '0-1-1', title: '0-1-1' },
|
||||
],
|
||||
},
|
||||
{ key: '0-2', title: '0-3' },
|
||||
]
|
||||
|
||||
const transferDataSource = []
|
||||
|
||||
function flatten(list = []) {
|
||||
list.forEach((item) => {
|
||||
transferDataSource.push(item)
|
||||
flatten(item.children)
|
||||
})
|
||||
return data
|
||||
}
|
||||
flatten(JSON.parse(JSON.stringify(treeData)))
|
||||
|
||||
function isChecked(selectedKeys, eventKey) {
|
||||
return selectedKeys.indexOf(eventKey) !== -1;
|
||||
return selectedKeys.indexOf(eventKey) !== -1
|
||||
}
|
||||
|
||||
//打开就报错
|
||||
// function handleTreeData(data, targetKeys = []) {
|
||||
// data.forEach((item) => {
|
||||
// item['disabled'] = targetKeys.includes(item.key)
|
||||
// if (item.children) {
|
||||
// handleTreeData(item.children, targetKeys)
|
||||
// }
|
||||
// })
|
||||
// return data
|
||||
// }
|
||||
|
||||
export default {
|
||||
props: {
|
||||
projectForm: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
// import引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: { projectForm: { type: Object } },
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
form: this.projectForm,
|
||||
targetKeys: [],
|
||||
dataSource: [],
|
||||
treeData: [],
|
||||
checkedKeys:[],
|
||||
targetKeys: this.projectForm.unitIds || [],
|
||||
dataSource: transferDataSource,
|
||||
// treeData() {return handleTreeData(treeData, this.targetKeys)},
|
||||
treeData: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log('第2个表单创建了')
|
||||
this.getSourceList()
|
||||
},
|
||||
computed: {
|
||||
treeDataComputed() {
|
||||
return handleTreeData(treeData, this.targetKeys)
|
||||
},
|
||||
},
|
||||
// 计算属性 类似于data概念
|
||||
computed: {},
|
||||
// 监控data中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
onChange(targetKeys) {
|
||||
console.log('Target Keys:', targetKeys)
|
||||
this.targetKeys = targetKeys
|
||||
},
|
||||
onChecked(_, e, checkedKeys, itemSelect) {
|
||||
const { eventKey } = e.node
|
||||
itemSelect(eventKey, !isChecked(checkedKeys, eventKey))
|
||||
},
|
||||
//获取数据源
|
||||
getSourceList(orgType) {
|
||||
return orgList({ orgType: orgType || 1 }).then((res) => {
|
||||
orgList({ orgType: orgType || 1 }).then((res) => {
|
||||
if (res.data) {
|
||||
this.dataSource = []
|
||||
res.data.forEach((item) => {
|
||||
this.dataSource.push({
|
||||
key: item.id,
|
||||
id: item.id,
|
||||
key: item.id.toString(),
|
||||
title: item.name,
|
||||
children: [],
|
||||
pid: item.pid
|
||||
pid: item.pid,
|
||||
})
|
||||
})
|
||||
console.log('dataSource', this.dataSource)
|
||||
this.treeData = listToTree(this.dataSource, [], 0)
|
||||
console.log('treeData', this.treeData)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//下一步
|
||||
toNext() {
|
||||
this.form.unitIds = this.targetKeys
|
||||
console.log('toNext', this.form)
|
||||
this.$emit('nextStep', this.form)
|
||||
},
|
||||
|
||||
//上一步
|
||||
toPrep() {
|
||||
this.form.unitIds = this.targetKeys
|
||||
console.log('toPrep', this.form)
|
||||
this.$emit('prevStep', this.form)
|
||||
},
|
||||
onChange(targetKeys) {
|
||||
console.log('Target Keys:', targetKeys)
|
||||
this.targetKeys = targetKeys
|
||||
// this.form = targetKeys
|
||||
},
|
||||
onChecked(_, e, checkedKeys, itemSelect) {
|
||||
const { eventKey } = e.node
|
||||
itemSelect(eventKey, !isChecked(checkedKeys, eventKey))
|
||||
},
|
||||
//搜索使用
|
||||
filterOption(value, tree) {
|
||||
console.log('filterOption:', value, tree)
|
||||
// getParentKey(value, tree) {
|
||||
if (!value) return
|
||||
|
||||
for (let i = 0; i < tree.length; i++) {
|
||||
const node = tree[i]
|
||||
|
||||
if (node.children) {
|
||||
if (node.children.some((item) => item.title.indexOf(value) > -1)) {
|
||||
this.expandedKeys.push(node.key)
|
||||
}
|
||||
|
||||
this.filterOption(value, node.children)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
// 生命周期 - 创建完成（可以访问当前this实例）
|
||||
created() {
|
||||
console.log('第2个表单创建了')
|
||||
this.getSourceList()
|
||||
console.log('form',this.form)
|
||||
},
|
||||
|
||||
// 生命周期 - 挂载完成（可以访问DOM元素）
|
||||
mounted() {},
|
||||
// 生命周期 - 创建之前
|
||||
beforeCreate() {},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {},
|
||||
// 生命周期 - 更新之前
|
||||
beforeUpdate() {},
|
||||
// 生命周期 - 更新之后
|
||||
updated() {},
|
||||
// 生命周期 - 销毁之前
|
||||
beforeDestroy() {},
|
||||
// 生命周期 - 销毁完成
|
||||
destroyed() {
|
||||
console.log('第2个表单销毁了')
|
||||
},
|
||||
// 如果页面有keep-alive缓存功能，这个函数会触发
|
||||
activated() {},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.tree-transfer .ant-transfer-list:first-child {
|
||||
width: 50%;
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue