视频上传

src/main/java/com/izouma/wenlvju/converter/VideoObjectConverter.java

@@ -0,0 +1,24 @@
+package com.izouma.wenlvju.converter;
+
+import com.alibaba.fastjson.JSON;
+import com.izouma.wenlvju.domain.VideoObject;
+import org.apache.commons.lang3.StringUtils;
+
+import javax.persistence.AttributeConverter;
+
+public class VideoObjectConverter implements AttributeConverter<VideoObject, String> {
+    @Override
+    public String convertToDatabaseColumn(VideoObject fileObject) {
+        if (fileObject != null  )
+            return JSON.toJSONString(fileObject);
+        return null;
+    }
+
+    @Override
+    public VideoObject convertToEntityAttribute(String s) {
+        if (StringUtils.isNotEmpty(s)) {
+            return JSON.parseObject(s, VideoObject.class);
+        }
+        return null;
+    }
+}

src/main/java/com/izouma/wenlvju/domain/VideoObject.java

@@ -0,0 +1,10 @@
+package com.izouma.wenlvju.domain;
+
+import lombok.Data;
+
+@Data
+public class VideoObject {
+    String poster;
+
+    String src;
+}

src/main/java/com/izouma/wenlvju/domain/performance/Programme.java

@@ -1,6 +1,9 @@
 package com.izouma.wenlvju.domain.performance;
 
+import com.izouma.wenlvju.annotations.SearchableOne;
+import com.izouma.wenlvju.converter.VideoObjectConverter;
 import com.izouma.wenlvju.domain.BaseEntity;
+import com.izouma.wenlvju.domain.VideoObject;
 import com.izouma.wenlvju.enums.CompetitionGroup;
 import io.swagger.annotations.ApiModel;
 import io.swagger.annotations.ApiModelProperty;
@@ -10,10 +13,8 @@ import lombok.Data;
 import lombok.NoArgsConstructor;
 import org.hibernate.annotations.Where;
 
-import javax.persistence.Entity;
-import javax.persistence.EnumType;
-import javax.persistence.Enumerated;
-import javax.persistence.Transient;
+import javax.persistence.*;
+import java.util.Map;
 
 @Data
 @AllArgsConstructor
@@ -25,6 +26,7 @@ import javax.persistence.Transient;
 public class Programme extends BaseEntity {
     private Long performanceId;
 
+    @SearchableOne
     @ApiModelProperty(value = "节目名称")
     private String name;
 
@@ -41,6 +43,7 @@ public class Programme extends BaseEntity {
     @ApiModelProperty(value = "作品时长")
     private int durationOfWork;
 
+    @SearchableOne
     @ApiModelProperty(value = "指导老师")
     private String instructor;
 
@@ -59,7 +62,9 @@ public class Programme extends BaseEntity {
     @ApiModelProperty(value = "考级点")
     private String examPoint;
 
+    @Column(columnDefinition = "TEXT")
+    @Convert(converter = VideoObjectConverter.class)
     @ApiModelProperty(value = "节目视频")
-    private String video;
+    private VideoObject video;
 
 }

src/main/java/com/izouma/wenlvju/dto/ProgrammeDTO.java

@@ -4,6 +4,7 @@ import cn.hutool.core.bean.BeanUtil;
 import com.alibaba.excel.annotation.ExcelIgnore;
 import com.alibaba.excel.annotation.ExcelProperty;
 import com.izouma.wenlvju.annotations.EnumFormat;
+import com.izouma.wenlvju.domain.VideoObject;
 import com.izouma.wenlvju.domain.performance.Programme;
 import com.izouma.wenlvju.enums.CompetitionGroup;
 import com.izouma.wenlvju.utils.excel.EnumExcelConverter;
@@ -81,7 +82,7 @@ public class ProgrammeDTO {
     private String examPoint;
 
     @ExcelProperty(value = "节目视频")
-    private String video;
+    private VideoObject video;
 
     @ExcelProperty(value = "参赛人数")
     private long quantity;

src/main/vue/src/components/VideoUpload.vue

@@ -1,7 +1,7 @@
 <template>
     <div v-if="value && value.src" class="video-wrapper">
         <video :src="value.src" :poster="value.poster" controls></video>
-        <div class="icon-close" @click="remove">
+        <div class="icon-close" @click="remove" v-if="!readonly">
             <i class="el-icon-close"></i>
         </div>
     </div>
@@ -28,7 +28,7 @@
 <script>
 import resolveUrl from 'resolve-url';
 export default {
-    props: ['value'],
+    props: ['value', 'readonly'],
     data() {
         return {
             videoUploadUrl: '',

src/main/vue/src/views/performance/PerformanceListShow.vue

@@ -57,7 +57,7 @@
                         查看
                     </el-button>
                     <el-button
-                        @click="showRow(row)"
+                        @click="programmeRow(row)"
                         type="primary"
                         size="mini"
                         plain
@@ -134,14 +134,6 @@ export default {
                 this.$refs.table.clearSelection();
             }
         },
-        addRow() {
-            this.$router.push({
-                path: '/performanceEdit',
-                query: {
-                    ...this.$route.query
-                }
-            });
-        },
         showRow(row) {
             this.$router.push({
                 path: '/performanceShow',
@@ -150,17 +142,9 @@ export default {
                 }
             });
         },
-        editRow(row) {
-            this.$router.push({
-                path: '/performanceEdit',
-                query: {
-                    id: row.id
-                }
-            });
-        },
         programmeRow(row) {
             this.$router.push({
-                path: '/programmeList',
+                path: '/programmeOrgList',
                 query: {
                     pid: row.id
                 }

src/main/vue/src/views/performance/ProgrammeList.vue

@@ -183,7 +183,14 @@
             <el-table-column label="操作" align="center" fixed="right" min-width="280">
                 <template slot-scope="{ row }">
                     <el-button @click="showRow(row)" size="mini" plain>查看</el-button>
-                    <el-button type="warning" size="mini" plain>浏览视频</el-button>
+                    <el-button
+                        type="warning"
+                        @click="playVideo(row)"
+                        size="mini"
+                        plain
+                        v-if="row.video && row.video.src"
+                        >浏览视频</el-button
+                    >
                     <el-button @click="showCode(row)" type="primary" size="mini" plain>查看二维码</el-button>
                     <!-- <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button> -->
                 </template>
@@ -216,6 +223,29 @@
                 <qrcode-vue :value="dialogUrl" :size="200" level="H" />
             </div>
         </el-dialog>
+
+        <el-dialog
+            class="videoDialog"
+            destroy-on-close
+            center
+            append-to-body
+            :visible.sync="showViedo"
+            @close="closeEvent"
+            width="70%"
+        >
+            <video
+                :src="videoUrl.src"
+                controlsList="nodownload noremote footbar"
+                controls
+                style="height: 100%; max-width: 100%"
+                oncontextmenu="return false;"
+                onmouseleave="leaveVideo(this)"
+                ref="video"
+                v-if="showViedo"
+            >
+                您的浏览器不支持 video 标签。
+            </video>
+        </el-dialog>
     </div>
 </template>
 <script>
@@ -260,7 +290,9 @@ export default {
                 checkStrictly: true,
                 expandTrigger: 'hover'
             },
-            specialtyId: ''
+            specialtyId: '',
+            showViedo: false,
+            videoUrl: ''
         };
     },
     created() {
@@ -527,6 +559,14 @@ export default {
                 }
             }
             return result;
+        },
+        closeEvent() {
+            document.exitPictureInPicture();
+        },
+        playVideo(row) {
+            this.showViedo = true;
+            this.videoUrl = row.video;
+            console.log(row.video);
         }
     }
 };
@@ -539,4 +579,46 @@ export default {
 .el-form-item--small.el-form-item {
     margin-bottom: 10px;
 }
+.videoDialog {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .el-dialog {
+        max-width: 900px;
+        margin-top: 0px;
+
+        .close {
+            position: absolute;
+            right: 0px;
+            top: -42px;
+            width: 71px;
+            height: 32px;
+            background: #00000015;
+
+            font-size: 12px;
+            color: #fdffff;
+            line-height: 32px;
+            text-align: center;
+            cursor: pointer;
+
+            &:hover {
+                background: #00000055;
+            }
+        }
+    }
+    .el-dialog__header {
+        display: none;
+    }
+
+    .el-dialog__body {
+        padding: 0;
+
+        video {
+            display: block;
+            height: auto;
+            width: 100%;
+            outline: none;
+        }
+    }
+}
 </style>

src/main/vue/src/views/performance/ProgrammeOrgList.vue

@@ -112,13 +112,25 @@
                                     <span style="float: right; color: #8492a6; font-size: 13px">{{ item.desc }}</span>
                                 </el-option>
                             </el-select>
-                        </el-form-item></el-col
-                    >
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="8">
+                        <el-form-item label="节目名称">
+                            <el-input placeholder="节目名称" v-model="name" clearable></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="指导老师">
+                            <el-input placeholder="指导老师" v-model="instructor" clearable></el-input>
+                        </el-form-item>
+                    </el-col>
                 </el-row>
                 <el-form-item>
                     <el-button @click="getData" type="primary" icon="el-icon-search">搜索 </el-button>
-                    <el-button @click="clearSearch" type="primary">清空 </el-button>
-                    <!-- <el-button @click="addRow" type="primary" icon="el-icon-plus">添加 </el-button> -->
+                    <el-button @click="addRow" type="primary" icon="el-icon-plus">添加 </el-button>
+                    <el-button @click="clearSearch" type="primary" icon="el-icon-upload2">批量导入 </el-button>
                     <el-button
                         @click="download"
                         type="primary"
@@ -164,7 +176,7 @@
                 <template slot-scope="{ row }">
                     <el-button @click="showRow(row)" size="mini" plain>查看</el-button>
                     <el-button type="success" @click="editRow(row)" size="mini" plain>编辑</el-button>
-                    <el-button type="warning" size="mini" plain>浏览视频</el-button>
+                    <el-button type="warning" @click="playVideo(row)" size="mini" plain>浏览视频</el-button>
                     <el-button @click="showCode(row)" type="primary" size="mini" plain>查看二维码</el-button>
                     <!-- <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button> -->
                 </template>
@@ -197,6 +209,29 @@
                 <qrcode-vue :value="dialogUrl" :size="200" level="H" />
             </div>
         </el-dialog>
+
+        <el-dialog
+            class="videoDialog"
+            destroy-on-close
+            center
+            append-to-body
+            :visible.sync="showViedo"
+            @close="closeEvent"
+            width="70%"
+        >
+            <video
+                :src="videoUrl.src"
+                controlsList="nodownload noremote footbar"
+                controls
+                style="height: 100%; max-width: 100%"
+                oncontextmenu="return false;"
+                onmouseleave="leaveVideo(this)"
+                ref="video"
+                v-if="showViedo"
+            >
+                您的浏览器不支持 video 标签。
+            </video>
+        </el-dialog>
     </div>
 </template>
 <script>
@@ -239,7 +274,11 @@ export default {
                 checkStrictly: true,
                 expandTrigger: 'hover'
             },
-            specialtyId: ''
+            specialtyId: '',
+            showViedo: false,
+            videoUrl: '',
+            name: '',
+            instructor: ''
         };
     },
     created() {
@@ -327,7 +366,8 @@ export default {
     computed: {
         selection() {
             return this.$refs.table.selection.map(i => i.id);
-        }
+        },
+        ...mapState(['organization'])
     },
     methods: {
         competitionGroupFormatter(row, column, cellValue, index) {
@@ -340,7 +380,9 @@ export default {
         beforeGetData() {
             let data = {
                 sort: 'createdAt,desc',
-                query: {}
+                query: {
+                    organizationId: this.organization.id
+                }
             };
             if (this.competitionGroup) {
                 data.query.competitionGroup = this.competitionGroup;
@@ -357,6 +399,12 @@ export default {
             if (this.specialtyId) {
                 data.query.code = this.getCode(this.specialtyId);
             }
+            if (this.name) {
+                data.query.name = this.name;
+            }
+            if (this.instructor) {
+                data.query.instructor = this.instructor;
+            }
             return data;
         },
         toggleMultipleMode(multipleMode) {
@@ -394,7 +442,9 @@ export default {
 
             let data = {
                 sort: 'createdAt,desc',
-                query: {}
+                query: {
+                    organizationId: this.organization.id
+                }
             };
             if (this.competitionGroup) {
                 data.query.competitionGroup = this.competitionGroup;
@@ -405,13 +455,15 @@ export default {
             if (this.gradingOrganizationId) {
                 data.query.gradingOrganizationId = this.gradingOrganizationId;
             }
-            if (this.organizationId) {
-                data.query.organizationId = this.organizationId;
-            }
             if (this.specialtyId) {
                 data.query.code = this.getCode(this.specialtyId);
             }
-
+            if (this.name) {
+                data.query.name = this.name;
+            }
+            if (this.instructor) {
+                data.query.instructor = this.instructor;
+            }
             this.$axios
                 .get('/programme/excel', {
                     responseType: 'blob',
@@ -495,6 +547,14 @@ export default {
                 }
             }
             return result;
+        },
+        closeEvent() {
+            document.exitPictureInPicture();
+        },
+        playVideo(row) {
+            this.showViedo = true;
+            this.videoUrl = row.video;
+            console.log(row.video);
         }
     }
 };
@@ -507,4 +567,46 @@ export default {
 .el-form-item--small.el-form-item {
     margin-bottom: 10px;
 }
+.videoDialog {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .el-dialog {
+        max-width: 900px;
+        margin-top: 0px;
+
+        .close {
+            position: absolute;
+            right: 0px;
+            top: -42px;
+            width: 71px;
+            height: 32px;
+            background: #00000015;
+
+            font-size: 12px;
+            color: #fdffff;
+            line-height: 32px;
+            text-align: center;
+            cursor: pointer;
+
+            &:hover {
+                background: #00000055;
+            }
+        }
+    }
+    .el-dialog__header {
+        display: none;
+    }
+
+    .el-dialog__body {
+        padding: 0;
+
+        video {
+            display: block;
+            height: auto;
+            width: 100%;
+            outline: none;
+        }
+    }
+}
 </style>

src/main/vue/src/views/performance/ProgrammeShow.vue

@@ -93,7 +93,7 @@
                             <el-input v-model="formData.instructor" class="width" readonly></el-input>
                         </el-form-item>
                         <el-form-item prop="video" label="作品视频">
-                            <video-upload v-model="formData.video" class="width"></video-upload>
+                            <video-upload v-model="formData.video" class="width" :readonly="true"></video-upload>
                         </el-form-item>
                     </el-card>
                 </el-timeline-item>
@@ -195,7 +195,7 @@ export default {
                 .get('programme/get/' + this.$route.query.id)
                 .then(res => {
                     this.formData = res;
-
+                    console.log(res);
                     this.$http
                         .post(
                             '/participant/all',

src/main/vue/src/views/record/RecordList.vue

@@ -140,8 +140,6 @@ export default {
             search: '',
             url: '/record/all',
             downloading: false,
-            categoryOptions: [{ label: '承办单位', value: 'ORGANIZER' }],
-            statusOptions: [{ label: '正常', value: 'NORMAL' }],
             district: [],
             districtId: '',
             province: '江苏省',
@@ -165,20 +163,6 @@ export default {
         }
     },
     methods: {
-        categoryFormatter(row, column, cellValue, index) {
-            let selectedOption = this.categoryOptions.find(i => i.value === cellValue);
-            if (selectedOption) {
-                return selectedOption.label;
-            }
-            return '';
-        },
-        statusFormatter(row, column, cellValue, index) {
-            let selectedOption = this.statusOptions.find(i => i.value === cellValue);
-            if (selectedOption) {
-                return selectedOption.label;
-            }
-            return '';
-        },
         beforeGetData() {
             let data = { sort: 'examinationEndTime,desc', query: { del: false } };
             if (this.search) {