设计资源关联部分

TEAMModelOS/ClientApp/src/api/syllabus.js

@@ -28,5 +28,12 @@ export default {
     SaveOrUpdateAsNodes: function (data) {
         return post('/api/Syllabus/SaveOrUpdateAsNodes', data)
     },
-
+    // 保存或者新增单个节点
+    SaveOrUpdateAsNodes: function (data) {
+        return post('/api/Syllabus/SaveOrUpdateAsNodes', data)
+    },
+    // 通用集合查询接口
+    FindCollection: function (data) {
+        return post('/api/Common/FindCollection', data)
+    },
 }

TEAMModelOS/ClientApp/src/view/syllabus/newSyllabus/operation/BaseKnowledge.vue

@@ -63,7 +63,8 @@
                     children: 'points',
                     label: 'name'
                 },
-                hasModify:false
+                hasModify: false,
+                isLoading:false
 
             }
         },
@@ -140,8 +141,28 @@
                 
             },
 
+            // 判断两个数组是否相等
             isEqual(arr1, arr2) {
                 return (JSON.stringify(arr1) === JSON.stringify(arr2))
+            },
+
+
+            // 获取知识点完整对象数据 ID换对象
+            getPointObject(arr) {
+                let params = {
+                    collectionName: 'SchoolPoint',
+                    queryDict: {
+                        id:arr
+                    }
+                }
+                this.$api.syllabus.FindCollection(params).then(res => {
+                    if (!res.error && res.result.data) {
+                        this.checkedPoints = res.result.data
+                        this.originPoints = res.result.data
+                    } else {
+                        this.$Message.warning("获取数据失败")
+                    }
+                })
             }
 
 
@@ -168,8 +189,7 @@
                 handler: function (n, o) {
                     this.currentNodeInfo = n
                     this.onChangeOrigin(0)
-                    this.checkedPoints = n.knowledges
-                    this.originPoints = n.knowledges
+                    this.getPointObject(n.knowledges) // 用ID换知识点对象数据
                     this.hasModify = false
                 },
                 deep:true
@@ -281,6 +301,10 @@
     .knowledge-container /deep/ .__view {
         min-height:unset !important;
     }
+    
+    .knowledge-container /deep/ .__bar-is-vertical {
+        background:transparent !important;
+    }
 
 
     .knowledge-container /deep/ .ivu-checkbox-checked .ivu-checkbox-inner,

TEAMModelOS/ClientApp/src/view/syllabus/newSyllabus/operation/BaseResource.less

@@ -0,0 +1,130 @@
+.resource-container {
+    width: 100%;
+    height: 100%;
+    background: #464646;
+    border-radius: 4px;
+    overflow: hidden;
+
+
+    .select-wrap {
+        width: 100%;
+        height: 60%;
+    }
+
+    .select-content {
+        display: flex;
+        height: 320px;
+        border-top: 1px solid #565656;
+        border-bottom: 1px solid #565656;
+    }
+
+    .show-wrap {
+        width: 100%;
+        height: auto;
+
+        .checked-point-item {
+            padding: 5px 20px;
+            color: #fff;
+            background: #6d6d6d;
+            margin: 10px;
+            border-radius: 50px;
+            display: inline-block;
+            cursor: pointer;
+        }
+    }
+
+    .point-box {
+        padding: 30px 10px;
+        height: 300px;
+        border-top: 1px solid #565656;
+        border-bottom: 1px solid #565656;
+    }
+
+
+    .wrap-title {
+        position: relative;
+        font-size: 16px;
+        font-weight: bold;
+        color: #fff;
+        width: 100%;
+        height: 50px;
+        line-height: 50px;
+        padding-left: 20px;
+        background: #525252;
+
+        .ivu-btn {
+            position: absolute;
+            right: 20px;
+            top: 10px;
+            width: 100px;
+            height: 30px;
+            background: #0f9272;
+            color: #fff;
+            border: none;
+        }
+    }
+
+
+    .resource-left {
+        width: 18%;
+        border-right: 1px solid #565656;
+
+        .resource-left-item {
+            width: 100%;
+            height: 20%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #fff;
+            font-size: 14px;
+            font-weight: bold;
+            border-bottom: 1px solid #565656;
+            cursor: pointer;
+        }
+
+        .item-active {
+            background: #0f9272;
+        }
+    }
+
+
+    .resource-right {
+        width: 82%;
+        height: 100%;
+        padding: 0 10px 0 20px;
+        overflow: hidden;
+
+        .resource-box {
+            padding: 10px;
+            color: #fff;
+            display: flex;
+            flex-wrap: wrap;
+
+            .resource-item {
+                margin: 10px;
+                width: 190px;
+                height: 100px;
+                overflow: hidden;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                border: 1px solid #fff;
+                cursor:pointer;
+
+                &-name {
+                    width:80%;
+
+                    p {
+                        display: inline-block;
+                        width: 100%;
+                        text-align:center;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                    }
+                }
+            }
+        }
+    }
+}

TEAMModelOS/ClientApp/src/view/syllabus/newSyllabus/operation/BaseResource.vue

@@ -1,38 +1,207 @@
+<style lang="less" scoped>
+    @import './BaseResource.less';
+</style>
 
 <template>
     <div class="resource-container">
+        <vuescroll>
+            <div class="select-wrap">
+                <p class="wrap-title">选择资源文件</p>
+                <div class="select-content">
+                    <div class="resource-left">
+                        <div :class='["resource-left-item",activeIndex === 0 ? "item-active" : ""]' @click="onChangeOrigin(0)">全部</div>
+                        <div :class='["resource-left-item",activeIndex === 1 ? "item-active" : ""]' @click="onChangeOrigin(1)">图片</div>
+                        <div :class='["resource-left-item",activeIndex === 2 ? "item-active" : ""]' @click="onChangeOrigin(2)">视频</div>
+                        <div :class='["resource-left-item",activeIndex === 3 ? "item-active" : ""]' @click="onChangeOrigin(3)">文档</div>
+                        <div :class='["resource-left-item",activeIndex === 3 ? "item-active" : ""]' @click="onChangeOrigin(3)">其他</div>
+                    </div>
+                    <div class="resource-right">
+                        <vuescroll>
+                           <div class="resource-box">
+                               <div class="resource-item"  v-for="(item,index) in resourceList" :key="index">
+                                   <div class="resource-item-img">
+                                       <img v-if="item.extension === 'ppt'" src="@/assets/icon/ppt50.png" width="40" />
+                                       <img v-else-if="item.extension === 'doc'" src="@/assets/icon/word50.png" width="40" />
+                                       <img v-else-if="item.extension === 'xlsx'" src="@/assets/icon/xls50.png" width="40" />
+                                       <img v-else-if="item.type === 'picture'" src="@/assets/icon/icon_img.png" width="40" />
+                                       <img v-else-if="item.type === 'video4'" src="@/assets/icon/icon_video.png" width="40" />
+                                       <img v-else src="@/assets/icon/prelearn50.png" width="40" />
+                                   </div>
+                                   <div class="resource-item-name">
+                                       <p>{{ item.fileName }}</p>
+                                   </div>
+                               </div>
+                           </div>
+                        </vuescroll>
+                    </div>
+                </div>
+            </div>
+            <div class="show-wrap">
+                <div class="wrap-title">
+                    已选资源
+                    <Button @click="onSaveNode" v-show="hasModify" :loading="isLoading">存储变更</Button>
+                </div>
+                <div v-if="resourceList.length === 0">
+                    <EmptyBox :top="10"></EmptyBox>
+                </div>
+                <div class="point-box" v-else>
+                    <span class="checked-point-item" v-for="(item,index) in resourceList" :key="index">{{item.fileName}}</span>
+                </div>
+            </div>
+        </vuescroll>
 
     </div>
 </template>
 
 <script>
+    import EmptyBox from '@/common/EmptyData'
     export default {
-        props: [],
+        props: ['volume', 'currentNode'],
+        components: { EmptyBox },
         data() {
             return {
-               
+                currentVolume: null,
+                currentNodeInfo: null,
+                currentParams: null,
+                activeIndex: 0,
+                resourceList: [],
+                originList:[],
+                treeData: [],
+                defaultProps: {
+                    children: 'points',
+                    label: 'name'
+                },
+                hasModify: false,
+                isLoading: false
+
             }
         },
 
         created() {
+            //拿到当前册别信息 作为获取知识点数据参数
+            this.currentVolume = this.volume
+            this.currentParams = {
+                subjectCode: this.currentVolume.subjectCode,
+                schoolCode: this.currentVolume.schoolCode,
+                period: this.currentVolume.periodCode
+            }
 
+            this.getResourceData('private')
         },
         methods: {
-           
+            //切换知识点数据来源
+            onChangeOrigin(index) {
+                this.activeIndex = index;
+                switch (index) {
+                    case 0:
+                        this.getSchoolBlocks()
+                        break
+                    case 1:
+                        this.getSchoolPoints()
+                        break
+                    default:
+                        break
+                }
+            },
+
+            getResourceData(type) {
+                let params = {
+                    range : type
+                }
+                this.$api.teachContent.findResourceByDict(params).then(res => {
+                    if (!res.error && res.result.data) {
+                        this.resourceList = res.result.data
+                        this.originList = res.result.data
+                    } else {
+                        this.$Message.warning("获取数据失败")
+                    }
+                })
+
+
+            },
+
+
+            onSaveNode() {
+                this.isLoading = true
+                this.currentNodeInfo.resources = this.checkedPoints.map(item => item.id)
+                this.$api.syllabus.SaveOrUpdateAsNodes([this.currentNodeInfo]).then(res => {
+                    if (!res.error && res.result.data) {
+                        this.$emit("addPointsFinish", res.result.data)
+                        this.isLoading = false
+                    } else {
+                        this.$Message.warning("获取数据失败")
+                    }
+                })
+
+            },
+
+            // 判断两个数组是否相等
+            isEqual(arr1, arr2) {
+                return (JSON.stringify(arr1) === JSON.stringify(arr2))
+            },
+
+
+            // 获取知识点完整对象数据 ID换对象
+            getPointObject(arr) {
+                let params = {
+                    collectionName: 'SchoolPoint',
+                    queryDict: {
+                        id: arr
+                    }
+                }
+                this.$api.syllabus.FindCollection(params).then(res => {
+                    if (!res.error && res.result.data) {
+                        this.checkedPoints = res.result.data
+                        this.originPoints = res.result.data
+                    } else {
+                        this.$Message.warning("获取数据失败")
+                    }
+                })
+            }
+
+
+
         },
         mounted() {
         },
         watch: {
-            
+            // 监听册别数据变化
+            volume: {
+                handler: function (n, o) {
+                    this.currentVolume = n
+                    this.currentParams = {
+                        subjectCode: n.subjectCode,
+                        schoolCode: n.schoolCode,
+                        period: n.periodCode
+                    }
+                },
+                deep: true
+            },
+            // 监听册别数据变化
+            currentNode: {
+                handler: function (n, o) {
+                    this.currentNodeInfo = n
+                    this.onChangeOrigin(0)
+                    this.getPointObject(n.resources) // 用ID换知识点对象数据
+                    this.hasModify = false
+                },
+                deep: true
+            },
+
         },
 
     }
 </script>
 
-<style scoped>
-    .resource-container {
-        width:100%;
-        height:100%;
-        background:#464646;
+<style>
+ 
+    .resource-container .__view {
+        min-height: unset !important;
     }
+
+    .resource-container .__bar-is-vertical {
+        background: transparent !important;
+    }
+
+ 
 </style>