音乐专辑

src/views/music/album/detail.vue

@@ -5,56 +5,52 @@
         <el-input v-model="form.name" placeholder="请输入专辑名称" maxlength="10" show-word-limit />
       </el-form-item>
       <el-form-item label="专辑介绍" prop="description">
-        <el-input v-model="form.description" type="textarea" :autosize="{ minRows: 5, maxRows: 10}"
-          maxlength="100" show-word-limit placeholder="请输入专辑介绍" />
+        <el-input v-model="form.description" type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" maxlength="100"
+          show-word-limit placeholder="请输入专辑介绍" />
       </el-form-item>
       <el-form-item label="专辑类型：" prop="albumType">
         <el-select v-model="form.albumType" placeholder="请选择专辑类型">
-          <el-option v-for="item in albumTypeOptions" :key="item.value" :value="item.value"
-            :label="item.label" />
+          <el-option v-for="item in albumTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
       <el-form-item label="资源平台：" prop="platformId">
         <el-select v-model="form.platformId" placeholder="请选择资源平台">
-          <el-option v-for="item in platformOptions" :key="item.value" :value="item.value"
-            :label="item.label" />
+          <el-option v-for="item in platformOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
       <el-form-item label="付费类型：" prop="payType">
         <el-select v-model="form.payType" placeholder="请选择付费类型">
-          <el-option v-for="item in payTypeOptions" :key="item.value" :value="item.value"
-            :label="item.label" />
+          <el-option v-for="item in payTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
       <el-form-item v-if="form.payType !== 1" label="原价：" prop="price">
         <el-input-number v-model="form.price" placeholder="请输入原价" :min="1" :precision="2" :controls="false" />
       </el-form-item>
       <el-form-item v-if="form.payType !== 1" label="折扣价：" prop="discount">
-        <el-input-number v-model="form.discount" placeholder="请输入折扣价" :min="1" :precision="2"
-          :controls="false" />
+        <el-input-number v-model="form.discount" placeholder="请输入折扣价" :min="1" :precision="2" :controls="false" />
       </el-form-item>
       <el-form-item label="专辑封面：" prop="coverUrl">
         <Upload listType="picture-card" :url="form.coverUrl" @upload="upload($event, 'coverUrl')"
           :disabled="disabled" />
       </el-form-item>
-      <el-form-item label="歌曲列表：">
+      <el-form-item label="歌曲列表：" style="width: 1000px;">
         <el-button type="primary" icon="el-icon-plus" @click="getDialog">添加歌曲</el-button>
+        <!-- 列表 -->
+        <el-table class="table" :data="form.programList" height="329px" v-loading="form_loading">
+          <el-table-column label="ID" prop="id" align="center" />
+          <el-table-column label="歌曲名称" prop="name" align="center" show-overflow-tooltip />
+          <el-table-column label="歌手名称" prop="singerName" align="center" show-overflow-tooltip />
+          <el-table-column label="播放时长" prop="playTime" align="center" />
+          <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
+          <el-table-column label="操作" align="center">
+            <template slot-scope="scope">
+              <Audio :src="scope.row.progaramUrl" />
+              <el-button type="delete" :disabled="disabled" @click="getDelete(scope.$index)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
       </el-form-item>
     </el-form>
-    <!-- 列表 -->
-    <el-table class="table" :data="form.programList" height="329px" v-loading="form_loading">
-      <el-table-column label="ID" prop="id" align="center" />
-      <el-table-column label="歌曲名称" prop="name" align="center" show-overflow-tooltip />
-      <el-table-column label="歌手名称" prop="singerName" align="center" show-overflow-tooltip />
-      <el-table-column label="播放时长" prop="playTime" align="center" />
-      <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
-      <el-table-column label="操作" align="center">
-        <template slot-scope="scope">
-          <Audio :src="scope.row.progaramUrl" />
-          <el-button type="delete" :disabled="disabled" @click="getDelete(scope.$index)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
     <div class="form-btn">
       <el-button @click="cancel">取消</el-button>
       <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
@@ -71,8 +67,7 @@
         </el-form-item>
         <el-form-item label="资源平台：">
           <el-select v-model="dialogForm.platformId" placeholder="请选择资源平台">
-            <el-option v-for="item in platformOptions" :key="item.value" :value="item.value"
-              :label="item.label" />
+            <el-option v-for="item in platformOptions" :key="item.value" :value="item.value" :label="item.label" />
           </el-select>
         </el-form-item>
         <el-form-item>
@@ -94,8 +89,8 @@
           </template>
         </el-table-column>
       </el-table>
-      <pagination v-show="total>0" :total="total" :page.sync="dialogForm.pageNum"
-        :limit.sync="dialogForm.pageSize" @pagination="getList" />
+      <pagination v-show="total > 0" :total="total" :page.sync="dialogForm.pageNum" :limit.sync="dialogForm.pageSize"
+        @pagination="getList" />
     </el-dialog>
   </div>
 </template>