修改

src/pages/teacher/components/ChooseImg.vue

+<template>
+  <div class="ChooseImg" style="width: 900px; max-width: 80vw;">
+    <div style="margin:10px;">选择图片</div>
+    <el-row v-loading="loading" style="border: 1px solid rgb(227, 227, 227);">
+      <el-col :span="24">
+        <div style="margin-top: 10px;margin-left: 20px;" class="appendInput">
+          <el-input size="small" style="width:250px" placeholder="请输入内容" @keyup.enter.native="GetPageList" v-model="msg.MediaName">
+            <el-button @click="GetPageList" slot="append" icon="el-icon-search"></el-button>
+          </el-input>
+        </div>
+        <div class="basefix app-attachment-list">
+          <!-- <div class="app-attachment-item app-attachment-upload">
+            <el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp"
+              :show-file-list="false" :http-request="UploadImage" multiple>
+              <div class="app-upload" flex="main:center cross:center" style="width: 100px; height: 100px;">
+                <i class="el-icon-upload"></i>
+              </div>
+            </el-upload>
+          </div> -->
+          <el-tooltip v-for="(item,index) in dataList" :key="index" class="item" effect="dark"
+            :content="item.MediaGroupName" placement="top-start">
+            <div @click="PageSelect(item)" :class="getChecked(item) ? 'selected' :''"
+              class="el-tooltip item app-attachment-item">
+              <img :src="getIconLink(item.ImageUrl)" class="app-attachment-img" style="width: 100px; height: 100px;">
+              <div class="app-attachment-name">{{item.MediaGroupName}}</div>
+            </div>
+          </el-tooltip>
+        </div>
+        <div style="padding:0 10px 10px 0">
+          <el-pagination style="text-align:right" background :current-page="currentPage"
+            @current-change="handleCurrentChange" :page-size="msg.pageSize" layout="prev, pager, next,jumper"
+            :total="PageCount">
+          </el-pagination>
+        </div>
+      </el-col>
+    </el-row>
+    <div style="margin:10px;text-align:right">
+      <el-button size="small" @click="closeDialog">取消</el-button>
+      <el-button size="small" type="primary" @click="SelectImgId">选定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    GetContributeMediumPage
+  } from '../../../api/system/wechat';
+
+  export default {
+    name: 'ChooseImg',
+    data() {
+      return {
+        czType: 0,
+        val: '',
+        Id: '',
+        currentPage: 1,
+        msg: {
+          pageIndex: 1,
+          pageSize: 12,
+          rowsPerPage: 12,
+          MediaGroupId: 0, //分组
+          Type: 1, //类型
+          MediaName: ''
+        },
+        loading: false,
+        groupList: [],
+        pageMsgDig: false,
+        selectId: -1,
+        emitmsg: [],
+        PageCount:0,
+        dataList:[]
+      }
+    },
+    created() {},
+    computed: {
+
+    },
+    mounted() {
+      this.GetPageList();
+    },
+    methods: {
+      closeDialog(){
+        this.$emit('closeDia');
+      },
+      getChecked(item) {
+        var isChecked = false;
+        if (this.emitmsg && this.emitmsg.length > 0) {
+          this.emitmsg.forEach(eItem => {
+            if (eItem.selectId == item.Id && !isChecked) {
+              isChecked = true;
+            }
+          });
+        }
+        return isChecked;
+      },
+      SelectImgId() {
+        if (this.emitmsg && this.emitmsg.length > 0) {
+        var result = {
+            selectId: this.emitmsg[0].selectId,
+            url: this.emitmsg[0].url
+        };
+        this.$emit('SelectId', result)
+        }
+        this.selectId = -1;
+        this.emitmsg = [];
+      },
+      UploadImage(file) {
+        this.UploadFileToTencent(this.FileType().GoodsImg, file.file, res => {
+          if (res.resultCode == 1) {
+            this.addpageMsg.Path = res.FileUrl;
+            this.addpageMsg.Name = res.FileName;
+            this.addPageList();
+          }
+        })
+      },
+      // 新增素材信息
+      addPageList() {
+        var upInfo = JSON.parse(localStorage.uploadInfo);
+        if(upInfo){
+          this.addpageMsg.PathType=upInfo.StoreType;
+        }
+        this.apipost("/api/product/SetGetMaterialInfo", this.addpageMsg, res => {
+          if (res.data.resultCode == 1) {
+            this.GetPageList();
+          }
+        })
+      },
+      //选择图片 clickType 1单击 2双击
+      PageSelect(item) {
+        this.emitmsg = [];
+        console.log(item,'item');
+        this.emitmsg.push({
+            selectId: item.Id,
+            url: item.Path
+        });
+        this.selectId = item.Id;
+      },
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.GetPageList();
+      },
+      GetPageList() {
+        GetContributeMediumPage(this.msg).then(res => {
+            this.loading = false
+            this.dataList = res.Data.PageData;
+            this.PageCount = res.Data.Count
+            this.dataList.forEach(x => {
+              x.check = false;
+            })
+          })
+          .catch(err => {
+            this.loading = false
+          })
+      },
+    },
+  }
+
+</script>
+
+<style>
+  .ChooseImg{
+    background: #fff;
+    width:1000px;
+  }
+  .ChooseImg .el-input.is-active .el-input__inner,
+  .ChooseImg .el-input__inner:focus {
+    border-color: #DCDFE6;
+  }
+
+  .ChooseImg .app-attachment-list .selected {
+    box-shadow: 0 0 0 1px #1ed0ff;
+    background: #daf5ff;
+    border-radius: 5px;
+  }
+
+  .ChooseImg .selectActive .el-icon-tickets {
+    color: #409EFF;
+  }
+
+  .ChooseImg .selectActive {
+    color: #409EFF;
+  }
+
+  .ChooseImg .app-attachment-name {
+    color: #666666;
+    margin-top: 5px;
+    font-size: 13px;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+  }
+
+  .ChooseImg .app-attachment-item .app-attachment-img {
+    display: block;
+  }
+
+  .ChooseImg .app-attachment-upload i {
+    font-size: 30px;
+    color: #909399;
+  }
+
+  .ChooseImg .app-attachment-item {
+    display: inline-block;
+    cursor: pointer;
+    position: relative;
+    float: left;
+    width: 120px;
+    height: 140px;
+    margin: 7.5px;
+    text-align: center;
+    padding: 10px 10px 0;
+  }
+
+  .ChooseImg .app-attachment-upload {
+    box-shadow: none;
+    border: 1px dashed #b2b6bd;
+    height: 100px;
+    width: 100px;
+    margin: 17.5px;
+    padding: 0;
+  }
+
+  .ChooseImg .app-attachment-list {
+    padding: 5px;
+    min-height: 475px;
+  }
+
+  .ChooseImg .appendInput .el-input__inner {
+    border-right: none;
+
+  }
+
+  .ChooseImg .appendInput .el-input-group__append {
+    background-color: #fff !important;
+    border-left: none;
+    padding: 0 15px;
+  }
+
+</style>

src/pages/teacher/components/imgmaterial.vue

@@ -18,26 +18,26 @@
           @click="dataList[y].check = !dataList[y].check,$forceUpdate()">
           <q-card-section>
             <div style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
-              <span>{{x.UpdateTime}}</span>
-            </div>
-            <q-img :src="x.ImageUrl" class="imgstyle">
-              <div class="absolute-bottom text-subtitle1 text-center onetext"
-                style="padding: 0;padding: 0 5px;font-size: 12px;">
-              </div>
-
-              <q-icon v-if="x.Media_Id && x.Media_Id!=''" class="absolute all-pointer-events" size="20px"
-                name="iconfont icon-yiqueren" color="green" style="top: 8px; right: 8px">
+              <div>{{x.UpdateTime}}</div>
+              <div style="display:inline-block;margin-right:5px;position:relative;top:-3px;">
+                <q-icon v-if="x.Media_Id && x.Media_Id!=''" class="absolute all-pointer-events" size="20px"
+                name="iconfont icon-yiqueren" color="green" style="top: -7px;">
                 <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
                   已更新
                 </q-tooltip>
               </q-icon>
               <q-icon v-if="x.Media_Id==''" class="absolute all-pointer-events" size="20px"
-                name="iconfont icon-weiwancheng" color="red" style="top: 8px; right: 8px">
+                name="iconfont icon-weiwancheng" color="red" style="top: -7px;">
                 <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
                   未更新
                 </q-tooltip>
               </q-icon>
-            </q-img>
+              </div>
+              <div>
+                <i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;" @click.stop="goedit(x)"></i>
+              </div>
+            </div>
+            <q-img :src="x.ImageUrl" class="imgstyle"></q-img>
             <div class="onetext" style="margin-top: 5px;">上传者：{{x.UpdateBy}}</div>
             <div class="onetext" style="margin-top: 5px;">分组：{{x.MediaGroupName}}</div>
           </q-card-section>
@@ -91,10 +91,7 @@
       },
       goedit(row) {
         this.editobj = {}
-        this.editobj.Id = row.Id;
-        this.editobj.MediaGroupId = row.MediaGroupId;
-        this.editobj.Type = row.Type;
-        this.editobj.ImageModel = JSON.parse(JSON.stringify(row.ImageModel));
+        this.editobj = row;
         this.Isadd = true
       },
 

src/pages/teacher/components/videomaterial.vue

+<template>
+    <div class="videomaterial" style="padding: 0;margin: 0;">
+
+        <div class="page-content">
+            <div>
+                <q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="cloud_upload" label="上传视频"
+                    @click="goadd()"></q-btn>
+                <q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="delete" label="批量删除"
+                    @click="pldelete()"></q-btn>
+                <q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="edit" label="修改分组"
+                    @click="plmove()"></q-btn>
+            </div>
+            <div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;" v-if="dataList.length>0">
+                <q-card class="imgcard" v-for="(x,y) in dataList" :key='y'
+                    :style="{border:x.check==true?'2px solid #91d5ff':'2px solid #FFF'}"
+                    @click="dataList[y].check = !dataList[y].check,$forceUpdate()">
+                    <q-card-section>
+                        <div style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
+                            <div>{{x.UpdateTime}}</div>
+                            <div>
+                            <div style="display:inline-block;margin-right:5px;position:relative;top:-3px;">
+                                <q-icon
+                                    v-if="x.Media_Id && x.Media_Id!=''" 
+                                    size="20px" name="iconfont icon-yiqueren" color="green" >
+                                    <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
+                                        已更新
+                                    </q-tooltip>
+                                </q-icon>
+                                <q-icon
+                                    v-if="x.Media_Id==''"
+                                    size="20px" name="iconfont icon-weiwancheng" color="red" >
+                                    <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
+                                        未更新
+                                    </q-tooltip>
+                                </q-icon>
+                            </div>
+                            <i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;"
+                                @click.stop="goedit(x)"></i>
+                            </div>
+                        </div>
+                        <video width="260" height="180" controls="controls" v-if="x.Path">
+                            <source :src="x.Path" type="video/mp4" />
+                        </video>
+                        <div class="onetext" style="margin-top: 5px;">视频名称：{{x.MediaName}}</div>
+                        <div class="onetext" style="margin-top: 5px;">分组：{{x.MediaGroupName}}</div>
+                    </q-card-section>
+                </q-card>
+
+            </div>
+            <div style="width: 100%;height: 50px;line-height: 50px;text-align: center;" v-if="dataList.length==0">暂无数据</div>
+
+        </div>
+        <div v-if="Isadd==true">
+            <alladdsc :allclassifyList="allclassifyList" type='3' @editsuccess="getchildren" :editobj='editobj'   @getcancel='Isadd=false'></alladdsc>
+        </div>
+       
+
+    </div>
+</template>
+
+<script>
+    import alladdsc from '../components/alladdsc'
+   
+    export default {
+        name: "videomaterial",
+        components: {
+            alladdsc,
+        },
+        props: {
+            dataList: {
+                type: Array,
+                default: [],
+            },
+            allclassifyList:{
+                type: Array,
+                default: [],
+            }
+        },
+        data() {
+            return {
+                loading: false,
+                Isadd: false,
+                editobj:null
+            }
+        },
+        created() {
+            
+        },
+        methods: {
+            goadd() {
+                this.Isadd = true;
+                this.editobj=null
+            },
+            goedit(row){
+                console.log(row,'row');
+                this.editobj= row
+                this.Isadd = true
+            },
+            
+            getchildren(){
+                this.$emit('editsuccess')
+                this.Isadd = false
+            },
+            pldelete(){
+                this.$emit('getdelete')
+            },
+            plmove(){
+                this.$emit('getmove')
+            }
+        }
+    }
+
+</script>
+
+<style>
+    .videomaterial .Sysuser_Date .el-input--prefix .el-input__inner {
+        background-color: red;
+        border: 0;
+    }
+
+    .videomaterial .state-item {
+        padding: 2px 5px;
+        border-radius: 3px;
+        text-align: center;
+        font-size: 10px;
+    }
+
+    .videomaterial .frIdlist {
+        padding: 3px 10px;
+        border-radius: 3px;
+        background: #EEEEEF;
+        align-items: center;
+        justify-content: center;
+        margin-right: 5px;
+        margin-bottom: 5px;
+        cursor: pointer;
+    }
+
+    .class-popover .q-pr-lg {
+        padding-right: 0;
+        margin-top: 20px;
+    }
+
+    .videomaterial .el-date-editor.el-input {
+        width: 100%;
+    }
+
+    .videomaterial .el-date-editor.el-input input {
+        background-color: transparent !important;
+    }
+
+    .videomaterial .el-range-editor .el-range-input {
+        background: none;
+    }
+
+    .Sysuser_Date .el-input__inner {
+        background: transparent !important;
+        border: 0 !important;
+    }
+
+    .videomaterial .el-drawer.rtl {
+        overflow: inherit;
+    }
+
+    .videomaterial .imgcard {
+        width: 300px;
+        margin: 0 15px 15px 0
+    }
+
+    .videomaterial .imgstyle {
+        width: 100%;
+        height: 45px;
+        border-radius: 0;
+    }
+
+    .videomaterial .onetext {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        width: 260px;
+    }
+</style>
\ No newline at end of file

src/pages/teacher/contribution/materialList.vue

@@ -18,11 +18,14 @@
           @click="msg.Type = x.Id,resetSearch()" />
       </q-tabs>
       <div v-if="tabCheck=='1'">
-         <imgmaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"
-          @getdelete="getdelete" @getmove="getmove"></imgmaterial>
+       <imgmaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"
+        @getdelete="getdelete" @getmove="getmove"></imgmaterial>
       </div>
       <div v-if="tabCheck=='2'">
-          <audiomaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"  @getdelete="getdelete" @getmove="getmove" ref="allm"></audiomaterial>
+        <audiomaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"  @getdelete="getdelete" @getmove="getmove"></audiomaterial>
+      </div>
+      <div v-if="tabCheck=='3'">
+        <videomaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"  @getdelete="getdelete" @getmove="getmove"></videomaterial>
       </div>
     </div>
 
@@ -59,13 +62,15 @@
 
   import imgmaterial from '../components/imgmaterial'
   import audiomaterial from '../components/audiomaterial'
+  import videomaterial from '../components/videomaterial'
 
   import BenzAMRRecorder from 'benz-amr-recorder'
 
   export default {
     components: {
       imgmaterial,
-      audiomaterial
+      audiomaterial,
+      videomaterial
     },
     meta: {
       title: "素材库"