<template> <div id="app"> <el-divider content-position="left">基本信息</el-divider> <div class="el-main"> <el-form label-width="150px"> <!-- <el-form-item label="META: "> <el-input class="cascader-item" v-model="data.meta" @change="save()"></el-input> <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('meta', 'META')">选择</el-button> <el-button class="button-item" size="small" type="text" :disabled="data.meta == null" @click="handleClickViewCourseware(data.meta)">查看</el-button> </el-form-item> --> <el-form-item label="内容类型: "> <el-select v-model="data.contentType" placeholder="请选择类型" @change="save()"> <el-option label="阅读" value="reading"></el-option> <el-option label="视频" value="video"></el-option> <el-option label="音频" value="audio"></el-option> <el-option label="配音" value="dubbing"></el-option> <el-option label="单词书" value="wordbook"></el-option> <el-option label="教材" value="textbook"></el-option> </el-select> </el-form-item> </el-form> </div> <el-divider content-position="left">内容数据</el-divider> <div class="el-main"> <el-form ref="form" :model="data" label-width="150px"> <el-form-item label="图片: "> <el-input class="cascader-item" v-model="data.images" @change="save()"></el-input> <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('images', '图片')">选择</el-button> <el-button class="button-item" size="small" type="text" :disabled="data.images == null" @click="handleClickViewCourseware(data.images)">查看</el-button> </el-form-item> <el-form-item label="音频: "> <el-input class="cascader-item" v-model="data.audio" @change="save()"></el-input> <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('audio', '音频')">选择</el-button> <el-button class="button-item" size="small" type="text" :disabled="data.audio == null" @click="handleClickViewCourseware(data.audio)">查看</el-button> </el-form-item> <el-form-item label="视频: "> <el-input class="cascader-item" v-model="data.video" @change="save()"></el-input> <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('video', '视频')">选择</el-button> <el-button class="button-item" size="small" type="text" :disabled="data.video == null" @click="handleClickViewCourseware(data.video)">查看</el-button> </el-form-item> <el-form-item label="视频讲解课: "> <el-input class="cascader-item" v-model="data.tutoringVideo" @change="save()"></el-input> <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('tutoringVideo', '视频讲解课')">选择</el-button> <el-button class="button-item" size="small" type="text" :disabled="data.tutoringVideo == null" @click="handleClickViewCourseware(data.tutoringVideo)">查看</el-button> </el-form-item> <el-form-item label="文字内容: "> <el-input class="cascader-item" v-model="data.texts" @change="save()"></el-input> <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('texts', '文字内容')">选择</el-button> <el-button class="button-item" size="small" type="text" :disabled="data.texts == null" @click="handleClickViewCourseware(data.texts)">查看</el-button> </el-form-item> <el-form-item label="配音秀: "> <el-input class="cascader-item" v-model="data.dubbing" @change="save()"></el-input> <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('dubbing', '配音秀')">选择</el-button> <el-button class="button-item" size="small" type="text" :disabled="data.dubbing == null" @click="handleClickViewCourseware(data.dubbing)">查看</el-button> </el-form-item> <el-form-item label="点读配置: "> <el-input class="cascader-item" v-model="data.pointReads" @change="save()"></el-input> <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('pointReads', '点读配置')">选择</el-button> <el-button class="button-item" size="small" type="text" :disabled="data.pointReads == null" @click="handleClickViewCourseware(data.pointReads)">查看</el-button> </el-form-item> <el-form-item label="单词: "> <el-input class="cascader-item" v-model="data.words" @change="save()"></el-input> <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('words', '单词')">选择</el-button> <el-button class="button-item" size="small" type="text" :disabled="data.words == null" @click="handleClickViewCourseware(data.words)">查看</el-button> </el-form-item> <el-form-item label="单词游戏: "> <el-input class="cascader-item" v-model="data.wordGame" @change="save()"></el-input> <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('wordGame', '单词游戏')">选择</el-button> <el-button class="button-item" size="small" type="text" :disabled="data.wordGame == null" @click="handleClickViewCourseware(data.wordGame)">查看</el-button> </el-form-item> <el-form-item label="练习题: "> <el-input class="cascader-item" v-model="data.exerciseBook" @change="save()"></el-input> <el-button class="button-item" size="small" type="text" @click="handleClickSelectSyllabus('exerciseBook', '练习题')">选择</el-button> <el-button class="button-item" size="small" type="text" :disabled="data.exerciseBook == null" @click="handleClickViewCourseware(data.exerciseBook)">查看</el-button> </el-form-item> </el-form> </div> <el-dialog :title="selectDialogTitle" :visible.sync="dialogSelectShow" width="500px"> <div class="el-main" style="height: 300px;"> <el-tabs v-model="currentTreeDataType" type="card" @tab-click="handleSwitchTreeDataType"> <el-tab-pane label="阅读" name="reading_book"></el-tab-pane> <el-tab-pane label="动画" name="animation"></el-tab-pane> <el-tab-pane label="配音" name="dubbing"></el-tab-pane> <el-tab-pane label="单词书" name="word"></el-tab-pane> </el-tabs> <el-tree :data="treeListData" :props="treeProps" @node-click="handleClickTreeNode" :lazy="true" :load="handleLazyLoadTreeData"></el-tree> </div> <div slot="footer" class="dialog-footer"> <span class="current-selected-text">当前选择:{{ currentSelectTreeNode ? currentSelectTreeNode.name : "" }} - {{ currentSelectTreeNode ? currentSelectTreeNode.id : "" }}</span> <el-button @click="handleClickCancelSelect">取 消</el-button> <el-button type="primary" @click="handleClickConfirmSelect">确 定</el-button> </div> </el-dialog> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' import { getSyllabusListById, getFirstCoursewareBySyllId, getPidPathName } from '@/api/syllabus' let id = 0; export default { name: 'App', components: { HelloWorld }, data() { return { // 选择内容对话框显示隐藏控制 dialogSelectShow: false, // 树形列表数据 treeListData: [], // 树形列表数据 treeListDataSaved: [], // 树形列表配置 treeProps: { children: 'children', label: 'name', isLeaf: function (data, node) { return data.has_courseware == "1"; } }, // 当前选择的树形节点 currentSelectTreeNode: null, // 打开选择框选择的key值 selectKey: null, // 表单数据 data: { contentType: null, images: null, audio: null, video: null, tutoringVideo: null, texts: null, dubbing: null, pointReads: null, words: null, wordGame: null, exerciseBook: null, attr: { } }, // 路径 pidPath: [], // 当前树形数据类型 currentTreeDataType: "reading_book", // 选择对话框标题 selectDialogTitle: "选择" }; }, async created() { this.initData() }, methods: { // 保存数据 save() { this.$setData(this.data) }, // 获取数据 async initData() { const data = await this.$getData() if (data) { this.data = data; } }, async handleClickSelectSyllabus(key, name) { this.selectKey = key; this.selectDialogTitle = `选择${name}`; this.dialogSelectShow = true; const resData = await getSyllabusListById() this.treeListDataSaved = resData.rows; this.treeListData = resData.rows.map(item => item.tag == this.currentTreeDataType ? item : null).filter(item => item != null); // this.$getData().then(data => { // this.treeListData = data.rows; // console.log(this.treeListData) // }) }, handleClickViewCourseware(syllabus_id) { var domain = location.origin; if (parent !== window) { try { domain = parent.location.origin; }catch (e) { domain = document.referrer; } } if(domain.endsWith('/')) { domain = domain.substring(0, domain.length - 1); } window.open(`${domain}/cps/make?courseId=${syllabus_id}`, '_blank'); }, // 点击树形列表节点 handleClickTreeNode(node) { if (node.has_courseware == "1") { this.currentSelectTreeNode = node; } }, // 懒加载树形列表数据 handleLazyLoadTreeData(node, resolve) { if(!node.data.id) { return; } getSyllabusListById(node.data.id).then(data => { resolve(data.rows) // this.treeListDataSaved = data.rows; // resolve(data.rows.map(item => item.tag == this.currentTreeDataType ? item : null).filter(item => item != null)) }) }, // 取消选择 handleClickCancelSelect() { this.dialogSelectShow = false; this.treeListData = []; this.currentSelectTreeNode = null; this.selectKey = null; }, // 确定选择节点 async handleClickConfirmSelect() { this.data[this.selectKey] = this.currentSelectTreeNode.id; if(this.selectKey == 'meta') { const _metaData = await getFirstCoursewareBySyllId(this.data.meta); const metaData = JSON.parse(_metaData.data); for(let key in this.data) { if (key == 'meta') { continue; } this.data[key] = null; } for(let key in metaData.dataSource) { if (key == 'meta') { continue; } this.data[key] = metaData.dataSource[key]; } } this.$setData(this.data) this.dialogSelectShow = false; this.treeListData = []; this.currentSelectTreeNode = null; this.selectKey = null; }, // 切换树形数据类型 handleSwitchTreeDataType(tab) { this.currentTreeDataType = tab.name; this.treeListData = this.treeListDataSaved.map(item => item.tag == this.currentTreeDataType ? item : null).filter(item => item != null); } } } </script> <style> #app {} .cascader-item { width: 150px; } .button-item { margin-left: 10px; } .current-selected-text { float: left; font-size: small; } .el-dialog__body { padding: 0; } </style>