UI上完成内容模块学段概念

TEAMModelOS/ClientApp/src/assets/iconfont/demo_index.html

@@ -56,7 +56,7 @@
           
             <li class="dib">
               <span class="icon iconfont">&#xe603;</span>
-                <div class="name">method-draw-image (3)</div>
+                <div class="name">手机未认证</div>
                 <div class="code-name">&amp;#xe603;</div>
               </li>
           
@@ -774,9 +774,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1621848601882') format('woff2'),
-       url('iconfont.woff?t=1621848601882') format('woff'),
-       url('iconfont.ttf?t=1621848601882') format('truetype');
+  src: url('iconfont.woff2?t=1621999720250') format('woff2'),
+       url('iconfont.woff?t=1621999720250') format('woff'),
+       url('iconfont.ttf?t=1621999720250') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -805,7 +805,7 @@
           <li class="dib">
             <span class="icon iconfont icon-phone-unverify"></span>
             <div class="name">
-              method-draw-image (3)
+              手机未认证
             </div>
             <div class="code-name">.icon-phone-unverify
             </div>
@@ -1886,7 +1886,7 @@
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-phone-unverify"></use>
                 </svg>
-                <div class="name">method-draw-image (3)</div>
+                <div class="name">手机未认证</div>
                 <div class="code-name">#icon-phone-unverify</div>
             </li>
           

TEAMModelOS/ClientApp/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2000444 */
-  src: url('iconfont.woff2?t=1621848601882') format('woff2'),
-       url('iconfont.woff?t=1621848601882') format('woff'),
-       url('iconfont.ttf?t=1621848601882') format('truetype');
+  src: url('iconfont.woff2?t=1621999720250') format('woff2'),
+       url('iconfont.woff?t=1621999720250') format('woff'),
+       url('iconfont.ttf?t=1621999720250') format('truetype');
 }
 
 .iconfont {

TEAMModelOS/ClientApp/src/assets/iconfont/iconfont.json

@@ -7,7 +7,7 @@
   "glyphs": [
     {
       "icon_id": "21777109",
-      "name": "method-draw-image (3)",
+      "name": "手机未认证",
       "font_class": "phone-unverify",
       "unicode": "e603",
       "unicode_decimal": 58883

TEAMModelOS/ClientApp/src/common/UploadModal.vue

@@ -1,6 +1,8 @@
 <template>
     <Modal v-model="uploadStatus" :ok-text="textLoading ? $t('updModal.uploading') : isComplete ? $t('updModal.complete'):$t('updModal.comfirmUpd')" :cancel-text="$t('updModal.cancelUpd')" :title="$t('teachContent.btnUpload')" class="upload-modal dark-iview-modal" width="800" :mask-closable="false" :closable="false" @on-ok="modalOk" @on-cancel="modalCancel" :loading="modalLoading">
         <div class="upload-file-box">
+            <!-- <p>上传到：{{pdInfo.filterPeriodName}}</p> -->
+            <ResBelong v-show="routerScope == 'school'" showLabel class="upd-to-pd" :pdId="pdId"></ResBelong>
             <Upload type="drag" action="" :show-upload-list="false" multiple :before-upload="customUpload" class="upload-wrap" :disabled="textLoading">
                 <Icon class="upload-icon" custom="iconfont icon-upload" v-show="!uploadedList.length" />
                 <p class="upload-text" :style="{marginTop: uploadedList.length ? '25px':'0px'}">
@@ -64,8 +66,12 @@
 
 </template>
 <script>
-import BlobTool from '@/utils/blobTool.js';
+import BlobTool from '@/utils/blobTool.js'
+import ResBelong from '@/view/teachcontent/ResBelong.vue'
 export default {
+    components: {
+        ResBelong
+    },
     data() {
         return {
             uploadedList: [],
@@ -121,6 +127,11 @@ export default {
                 return []
             },
             type: Array
+        },
+        //资源所属学段
+        pdId: {
+            default: '',
+            type: String
         }
     },
     methods: {
@@ -446,6 +457,9 @@ export default {
 
 </script>
 <style scoped>
+.upd-to-pd{
+    margin-bottom: 10px;
+}
 .upload-text {
     margin: 10px 0px;
     font-size: 24px;

TEAMModelOS/ClientApp/src/view/teachcontent/ResBelong.vue

@@ -0,0 +1,118 @@
+<template>
+    <div class="pd-select-wrap">
+        <Dropdown class="sort-dropdown" trigger="click" placement="bottom-start" @on-click="function(e){ filterPeriod = e }" @on-visible-change="dropdownStates" v-if="$store.state.user.schoolProfile.school_base">
+            <span style="cursor: pointer;">
+                <span v-show="showLabel">上传至：</span>
+                <b class="title">{{ filterPeriodName }}</b>
+                <Icon type="ios-arrow-down" style="margin-left:8px;"></Icon>
+            </span>
+            <DropdownMenu slot="list" v-for="(item,index) in periods" :value="item.id" :key="index">
+                <DropdownItem :name="item.id">{{ item.name }}</DropdownItem>
+            </DropdownMenu>
+            <DropdownMenu slot="list">
+                <DropdownItem name="public">公共资源</DropdownItem>
+            </DropdownMenu>
+        </Dropdown>
+    </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+    name: 'BasePdSelect',
+    props: {
+        pdId:{
+            type:String,
+            default:''
+        },
+        showLabel:{
+            type:Boolean,
+            default:false
+        }
+    },
+    data() {
+        return {
+            filterPeriod: '',
+        }
+    },
+    created() {
+        this.$store.dispatch('user/getSchoolProfile').then(
+            (res) => {
+                if (res) {
+                    if (this.periods && !this.pdId) {
+                        this.filterPeriod = this.periods[0].id
+                    }else{
+                        this.filterPeriod = this.pdId
+                    }
+                }
+            },
+            (err) => {
+                this.$Message.error('API error!')
+            }
+        )
+    },
+    methods: {
+        dropdownStates(flag) {
+            // if (!flag) this.filterByPeriod()
+        }
+    },
+    computed: {
+        ...mapGetters({
+            periods: 'user/getPeriods', // 學制s
+        }),
+        filterPeriodName(){
+            let data = this.periods
+            let pId = this.filterPeriod
+            let name = ''
+            if (pId !== '') {
+                let temp = data.find(item => {
+                    return pId == item.id
+                })
+                if (temp) {
+                    name = temp.name
+                }else{
+                    name = '公共资源'
+                }
+            }
+            return name
+        },
+    },
+    watch: {
+        filterPeriod() {
+            this.$emit('pd-change', this.filterPeriod)
+        },
+        pdId:{
+            handler(){
+                this.filterPeriod = this.pdId
+            }, 
+            immediate:true
+        }
+    }
+}
+</script>
+<style lang="less">
+.pd-select-wrap {
+    display: inline-block;
+    color: #a5a5a5;
+}
+.sort-dropdown {
+    .title {
+        color: white;
+        font-size: 14px;
+    }
+    .ivu-select-dropdown {
+        background-color: #2d2d2d;
+        border-radius: 2px;
+        border: 1px #464646 solid;
+        .ivu-dropdown-menu {
+            li {
+                color: #ccc;
+                font-size: 12px !important;
+                &:hover {
+                    color: #2d2d2d;
+                }
+            }
+        }
+    }
+}
+</style>

TEAMModelOS/ClientApp/src/view/teachcontent/index.less

@@ -45,10 +45,7 @@
 }
 .key-word-search {
     width: 240px;
-    float:left;
     margin-right: 20px;
-    margin-top: 12px;
-    margin-left:10px;
 }
 .teach-content-top {
     .tab-box {
@@ -510,3 +507,17 @@
     margin-left: 10px;
     cursor: pointer;
 }
+
+.pd-filter-wrap{
+    color: #a5a5a5;
+    float: left;
+    margin-left: 10px;
+    margin-top: 15px;
+}
+.filter-wrap{
+    position: absolute;
+    left: 50%;
+    display: flex;
+    margin-left: -240px;
+    margin-top: 12px;
+}

TEAMModelOS/ClientApp/src/view/teachcontent/index.vue

@@ -5,7 +5,7 @@
             <!--文件分类列表-->
             <div class="content-type-list">
                 <vuescroll>
-                    <div @click="selectFileType(index)" :class="item.type === activeType ? 'content-type-item content-type-item-active':'content-type-item'" v-for="(item,index) in contentTypeList" :key="index" >
+                    <div @click="selectFileType(index)" :class="item.type === activeType ? 'content-type-item content-type-item-active':'content-type-item'" v-for="(item,index) in contentTypeList" :key="index">
                         <Icon v-if="item.icon.indexOf('iconfont') != -1" :custom="item.icon" color="white" size="20" />
                         <Icon v-else :type="item.icon" color="white" size="20" />
                         <span class="content-type-label">{{item.label}}</span>
@@ -81,12 +81,15 @@
             <div class="content-file-list-box">
                 <!--筛选、操作域-->
                 <div class="content-file-filter">
-                    <Input v-model="keyWord" search size="small" :placeholder="$t('teachContent.searchText')" class="key-word-search" @on-change="searchKeyWord" @on-search="searchKeyWord" />
-                    <CheckboxGroup v-model="extFilter" style="display:inline-block;margin-left:38px;margin-top:13px;" @on-change="filterFileByExtension">
-                        <Checkbox :label="item" v-for="(item ,index) in extensions" :key="index">
-                            <span>{{item}}</span>
-                        </Checkbox>
-                    </CheckboxGroup>
+                    <ResBelong class="pd-filter-wrap" v-show="routerScope == 'school'" @pd-change="(data)=>{filterPeriod = data}"></ResBelong>
+                    <div class="filter-wrap">
+                        <Input v-model="keyWord" search size="small" :placeholder="$t('teachContent.searchText')" class="key-word-search" @on-change="searchKeyWord" @on-search="searchKeyWord" />
+                        <CheckboxGroup v-model="extFilter"  @on-change="filterFileByExtension">
+                            <Checkbox :label="item" v-for="(item ,index) in extensions" :key="index">
+                                <span>{{item}}</span>
+                            </Checkbox>
+                        </CheckboxGroup>
+                    </div>
                     <span v-if="$access.can('admin.*|content-school-upd') || routerScope == 'private'" class="action-btn-wrap" @click="delFileBatch">
                         <Icon type="md-trash" class="toggle-btn-icon" />
                         {{$t('teachContent.delBatch')}}
@@ -169,7 +172,8 @@
             </div>
         </div>
         <!--上传文件-->
-        <UploadModal ref="uploadModal" :sasString="sasString" :urlString="urlString" :path="folder" :containerName="containerName" :quality="1" @successData="getFileUrl"></UploadModal>
+        <UploadModal ref="uploadModal" :sasString="sasString" :urlString="urlString" :path="folder" :containerName="containerName" :quality="1" @successData="getFileUrl" :pdId="filterPeriod">
+        </UploadModal>
         <!--文件预览-->
         <div v-if="previewStatus" class="image-viewer">
             <div style="width:fit-content;position:relative;margin:auto;">
@@ -189,17 +193,20 @@
     </div>
 </template>
 <script>
+import { mapGetters } from 'vuex'
 import BlobTool from '@/utils/blobTool.js';
 import FileSaver from "file-saver";
 import JSZip from "jszip";
 import elementResizeDetectorMaker from "element-resize-detector"
 import VueWaterfall from 'vue-waterfall-easy'
+import ResBelong from './ResBelong.vue'
 export default {
     components: {
-        VueWaterfall
+        VueWaterfall, ResBelong
     },
     data() {
         return {
+            filterPeriod: '',
             formatErr: false,
             sizeLoading: false,
             editIndex: -1,
@@ -481,7 +488,7 @@ export default {
                     title: this.$t('teachContent.tableC4'),
                     slot: 'size',
                     key: 'size',
-                    width: 100,
+                    width: 120,
                     align: 'center',
                     sortable: true
                 },
@@ -1044,14 +1051,6 @@ export default {
 .dialog-p {
     word-wrap: break-word;
 }
-
-.key-word-search {
-    width: 240px;
-    float: right;
-    margin-right: 20px;
-    margin-top: 12px;
-}
-
 .upload-modal .ivu-upload-drag {
     background: #404040;
     border-color: #606060;