更新稿件编辑页面布局

src/components/upload/EditAudio.vue

@@ -1,7 +1,7 @@
 <template>
   <el-row class="movie-list">
     <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-      <el-col :md="20" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-col :md="24" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div class="text item">
             <el-button style="float: left; padding: 3px 0" type="text" @click="onReturnAudio">返回音频列表</el-button>
@@ -10,56 +10,26 @@
       </el-col>
     </el-row>
     <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>更新音频文件</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoFile">更新</el-button>
-          </div>
-          <div class="text item">
-            <uploader
-              class="uploader-example"
-              :options="options"
-              :auto-start="true"
-              @file-added="onFileAdded"
-              @file-success="onFileSuccess"
-              @file-progress="onFileProgress"
-              @file-error="onFileError"
-            >
-              <uploader-unsupport />
-              <uploader-drop>
-                <p>拖动音频文件到此处或</p>
-                <uploader-btn :attrs="attrs">选择音频文件</uploader-btn>
-              </uploader-drop>
-              <uploader-list />
-            </uploader>
-          </div>
-        </el-card>
-      </el-col>
       <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span>更新音频封面</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoCover">更新</el-button>
+            <span>更新音频可见范围</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoScope">更新</el-button>
           </div>
           <div class="text item">
-            <el-upload
-              class="avatar-uploader"
-              action="//oss.reghao.cn/"
-              :headers="imgHeaders"
-              :data="imgData"
-              :show-file-list="false"
-              :before-upload="beforeAvatarUpload"
-              :on-success="handleAvatarSuccess"
-            >
-              <img v-if="imageUrl" :src="imageUrl" class="avatar">
-              <i v-else class="el-icon-plus avatar-uploader-icon" />
-            </el-upload>
+            <el-form ref="form" :model="form" label-width="80px">
+              <el-form-item label="可见范围">
+                <el-select v-model="form.scope" placeholder="选择可见范围">
+                  <el-option label="所有人可见" value="1" />
+                  <el-option label="验证码可见" value="2" />
+                  <el-option label="VIP 可见" value="3" />
+                  <el-option label="仅自己可见" value="4" />
+                </el-select>
+              </el-form-item>
+            </el-form>
           </div>
         </el-card>
       </el-col>
-    </el-row>
-    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
       <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
@@ -74,19 +44,6 @@
               <el-form-item label="描述">
                 <el-input v-model="form.description" type="textarea" style="width: 70%; padding-right: 2px" />
               </el-form-item>
-              <el-form-item label="分区">
-                <el-select v-model="category" placeholder="请选择分区">
-                  <el-option label="新闻" value="shanghai" />
-                  <el-option label="教育" value="beijing" />
-                </el-select>
-                <el-select v-model="childCategory" placeholder="请选择子分区">
-                  <el-option label="历史" value="shanghai" />
-                  <el-option label="计算机" value="beijing" />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="标签">
-                <el-input v-model="tagsStr" style="width: 70%; padding-right: 2px" placeholder="多个标签之间使用英文逗号分隔" />
-              </el-form-item>
             </el-form>
           </div>
         </el-card>
@@ -94,20 +51,51 @@
       <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span>更新音频可见范围</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoScope">更新</el-button>
+            <span>更新音频封面</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoCover">更新</el-button>
           </div>
           <div class="text item">
-            <el-form ref="form" :model="form" label-width="80px">
-              <el-form-item label="可见范围">
-                <el-select v-model="form.scope" placeholder="选择可见范围">
-                  <el-option label="所有人可见" value="1" />
-                  <el-option label="验证码可见" value="2" />
-                  <el-option label="VIP 可见" value="3" />
-                  <el-option label="仅自己可见" value="4" />
-                </el-select>
-              </el-form-item>
-            </el-form>
+            <el-tooltip class="item" effect="dark" content="点击上传图片" placement="top-end">
+              <el-upload
+                class="avatar-uploader"
+                action="//oss.reghao.cn/"
+                :headers="imgHeaders"
+                :data="imgData"
+                :show-file-list="false"
+                :before-upload="beforeAvatarUpload"
+                :on-success="handleAvatarSuccess"
+              >
+                <img :src="imageUrl" class="avatar">
+              </el-upload>
+            </el-tooltip>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>更新音频文件</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoFile">更新</el-button>
+          </div>
+          <div class="text item">
+            <uploader
+              class="uploader-example"
+              :options="options"
+              :auto-start="true"
+              @file-added="onFileAdded"
+              @file-success="onFileSuccess"
+              @file-progress="onFileProgress"
+              @file-error="onFileError"
+            >
+              <uploader-unsupport />
+              <uploader-drop>
+                <p>拖动音频文件到此处或</p>
+                <uploader-btn :attrs="attrs">选择音频文件</uploader-btn>
+              </uploader-drop>
+              <uploader-list />
+            </uploader>
           </div>
         </el-card>
       </el-col>
@@ -116,7 +104,7 @@
 </template>
 
 <script>
-import { videoCategory, submitVideo, videoInfo, updateVideoInfo, updateVideoScope, updateVideoCover, updateVideoFile } from '@/api/video'
+import { getAudio, } from '@/api/audio'
 
 export default {
   name: 'EditAudio',
@@ -171,23 +159,22 @@ export default {
   created() {
     document.title = '编辑音频'
 
-    const videoId = this.$route.params.videoId
-    videoInfo(videoId).then(res => {
+    const audioId = this.$route.params.audioId
+    getAudio(audioId).then(res => {
       if (res.code === 0) {
-        const videoInfo = res.data
-        this.imageUrl = videoInfo.coverUrl
-        this.form.title = videoInfo.title
-        this.form.description = videoInfo.description
-        this.form.scope = videoInfo.scope
+        const audioInfo = res.data
+        this.imageUrl = audioInfo.coverUrl
+        this.form.title = audioInfo.title
+        this.form.description = audioInfo.description
+        this.form.scope = audioInfo.scope
       } else {
-
       }
     })
   },
   methods: {
     /***********************************************************************/
     onFileAdded(file) {
-      if (file.file.size > 1024*1024*1024*1) {
+      if (file.file.size > 1024*1024*1024) {
         file.cancel()
         this.$notify(
           {

src/components/upload/EditImage.vue

@@ -13,31 +13,15 @@
       <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span>添加图片</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="onAddImages">更新</el-button>
+            <span>修改相册可见范围</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateAlbumScope">更新</el-button>
           </div>
           <div class="text item">
-            <file-pond
-              ref="pond"
-              name="file"
-              label-idle="选择图片或拖动图片到此处"
-              label-file-processing="图片正在上传，请稍后"
-              label-file-processing-aborted="图片上传被取消"
-              label-tap-to-retry="尝试重试"
-              label-file-processing-complete="图片上传成功！"
-              label-max-file-size="上传的图片大小不能超过 100MB"
-              label-max-file-size-exceeded="上传的图片大小不能超过 100MB"
-              allow-file-size-validation="true"
-              max-file-size="100MB"
-              accepted-file-types="image/png, image/jpeg, image/jpg, image/gif"
-              :allow-multiple="true"
-              :max-files="100"
-              :server="server"
-              :instant-upload="true"
-              @init="handleFilePondInit"
-              @processfile="handleFilePondSuccess"
-              @removefile="handleFilePondRemove"
-            />
+            <el-form ref="form" :model="form" label-width="80px">
+              <el-form-item label="相册名">
+                <el-input v-model="form.albumName" style="width: 70%; padding-right: 2px" placeholder="相册名不能超过 50 个字符" />
+              </el-form-item>
+            </el-form>
           </div>
         </el-card>
       </el-col>
@@ -59,15 +43,31 @@
       <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span>修改相册可见范围</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateAlbumScope">更新</el-button>
+            <span>添加图片</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="onAddImages">更新</el-button>
           </div>
           <div class="text item">
-            <el-form ref="form" :model="form" label-width="80px">
-              <el-form-item label="相册名">
-                <el-input v-model="form.albumName" style="width: 70%; padding-right: 2px" placeholder="相册名不能超过 50 个字符" />
-              </el-form-item>
-            </el-form>
+            <file-pond
+              ref="pond"
+              name="file"
+              label-idle="选择图片或拖动图片到此处"
+              label-file-processing="图片正在上传，请稍后"
+              label-file-processing-aborted="图片上传被取消"
+              label-tap-to-retry="尝试重试"
+              label-file-processing-complete="图片上传成功！"
+              label-max-file-size="上传的图片大小不能超过 100MB"
+              label-max-file-size-exceeded="上传的图片大小不能超过 100MB"
+              allow-file-size-validation="true"
+              max-file-size="100MB"
+              accepted-file-types="image/png, image/jpeg, image/jpg, image/gif"
+              :allow-multiple="true"
+              :max-files="100"
+              :server="server"
+              :instant-upload="true"
+              @init="handleFilePondInit"
+              @processfile="handleFilePondSuccess"
+              @removefile="handleFilePondRemove"
+            />
           </div>
         </el-card>
       </el-col>

src/components/upload/EditVideo.vue

@@ -1,7 +1,7 @@
 <template>
   <el-row class="movie-list">
     <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-      <el-col :md="20" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-col :md="24" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div class="text item">
             <el-button style="float: left; padding: 3px 0" type="text" @click="onReturnVideo">返回视频列表</el-button>
@@ -10,56 +10,26 @@
       </el-col>
     </el-row>
     <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>更新视频文件</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoFile">更新</el-button>
-          </div>
-          <div class="text item">
-            <uploader
-              class="uploader-example"
-              :options="options"
-              :auto-start="true"
-              @file-added="onFileAdded"
-              @file-success="onFileSuccess"
-              @file-progress="onFileProgress"
-              @file-error="onFileError"
-            >
-              <uploader-unsupport />
-              <uploader-drop>
-                <p>拖动视频文件到此处或</p>
-                <uploader-btn :attrs="attrs">选择视频文件</uploader-btn>
-              </uploader-drop>
-              <uploader-list />
-            </uploader>
-          </div>
-        </el-card>
-      </el-col>
       <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span>更新视频封面</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoCover">更新</el-button>
+            <span>更新视频可见范围</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoScope">更新</el-button>
           </div>
           <div class="text item">
-            <el-upload
-              class="avatar-uploader"
-              action="//oss.reghao.cn/"
-              :headers="imgHeaders"
-              :data="imgData"
-              :show-file-list="false"
-              :before-upload="beforeAvatarUpload"
-              :on-success="handleAvatarSuccess"
-            >
-              <img v-if="imageUrl" :src="imageUrl" class="avatar">
-              <i v-else class="el-icon-plus avatar-uploader-icon" />
-            </el-upload>
+            <el-form ref="form" :model="form" label-width="80px">
+              <el-form-item label="可见范围">
+                <el-select v-model="form.scope" placeholder="选择可见范围">
+                  <el-option label="所有人可见" value="1" />
+                  <el-option label="验证码可见" value="2" />
+                  <el-option label="VIP 可见" value="3" />
+                  <el-option label="仅自己可见" value="4" />
+                </el-select>
+              </el-form-item>
+            </el-form>
           </div>
         </el-card>
       </el-col>
-    </el-row>
-    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
       <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
@@ -94,20 +64,51 @@
       <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span>更新视频可见范围</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoScope">更新</el-button>
+            <span>更新视频封面</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoCover">更新</el-button>
           </div>
           <div class="text item">
-            <el-form ref="form" :model="form" label-width="80px">
-              <el-form-item label="可见范围">
-                <el-select v-model="form.scope" placeholder="选择可见范围">
-                  <el-option label="所有人可见" value="1" />
-                  <el-option label="验证码可见" value="2" />
-                  <el-option label="VIP 可见" value="3" />
-                  <el-option label="仅自己可见" value="4" />
-                </el-select>
-              </el-form-item>
-            </el-form>
+            <el-tooltip class="item" effect="dark" content="点击上传图片" placement="top-end">
+              <el-upload
+                class="avatar-uploader"
+                action="//oss.reghao.cn/"
+                :headers="imgHeaders"
+                :data="imgData"
+                :show-file-list="false"
+                :before-upload="beforeAvatarUpload"
+                :on-success="handleAvatarSuccess"
+              >
+                <img :src="imageUrl" class="avatar">
+              </el-upload>
+            </el-tooltip>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>更新视频文件</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoFile">更新</el-button>
+          </div>
+          <div class="text item">
+            <uploader
+              class="uploader-example"
+              :options="options"
+              :auto-start="true"
+              @file-added="onFileAdded"
+              @file-success="onFileSuccess"
+              @file-progress="onFileProgress"
+              @file-error="onFileError"
+            >
+              <uploader-unsupport />
+              <uploader-drop>
+                <p>拖动视频文件到此处或</p>
+                <uploader-btn :attrs="attrs">选择视频文件</uploader-btn>
+              </uploader-drop>
+              <uploader-list />
+            </uploader>
           </div>
         </el-card>
       </el-col>