文章管理 bug修复

src/views/content/article/detail.vue

@@ -17,10 +17,10 @@
         <Upload listType="picture-card" :url="form.audioBackgroundImage" @upload="upload($event, 'audioBackgroundImage')"
           :disabled="disabled" />
       </el-form-item>
-      <el-form-item v-if="form.templateType == 1" label="页面排版：" style="width: 80%">
+      <el-form-item v-if="form.templateType == 1" label="页面排版：" style="min-width: 50%">
         <el-button type="primary" icon="el-icon-plus" size="mini" @click="getAdd">添加</el-button>
         <el-table :data="form.contentShareLayoutList">
-          <el-table-column label="布局类型" align="center" width="200px">
+          <el-table-column label="布局类型" align="center">
             <template slot-scope="scope">
               <el-select v-model="scope.row.layoutType" placeholder="请选择布局类型">
                 <el-option v-for="item in layoutOptions" :key="item.value" :value="item.value" :label="item.label" />
@@ -32,12 +32,7 @@
               <Upload v-if="scope.row.layoutType === 0" listType="picture-card" :url="scope.row.contentPic"
                 @upload="upload($event, `contentPic`, scope.$index)" :disabled="disabled" />
               <el-input v-else v-model="scope.row.contentName" placeholder="请选择内容" readonly
-                @focus="getDialog(scope.row.layoutType, scope.$index)" />
-            </template>
-          </el-table-column>
-          <el-table-column label="链接" align="center">
-            <template slot-scope="scope">
-              <el-input v-if="scope.row.layoutType === 2" v-model="scope.row.forwardUrl" placeholder="请输入链接" />
+                @focus="getDialog(scope.row.layoutType, scope.$index)" :title="scope.row.contentName" />
             </template>
           </el-table-column>
           <el-table-column label="排序" align="center">
@@ -52,6 +47,16 @@
           </el-table-column>
         </el-table>
       </el-form-item>
+      <el-form-item label="分享标题：">
+        <el-input v-model="form.shareTitle" placeholder="请输入分享标题" />
+      </el-form-item>
+      <el-form-item label="分享描述：">
+        <el-input v-model="form.shareDescription" type="textarea" :rows="5" placeholder="请输入分享描述" />
+      </el-form-item>
+      <el-form-item label="分享图片：">
+        <Upload listType="picture-card" :url="form.shareIcon" @upload="upload($event, 'shareIcon')"
+          :disabled="disabled" />
+      </el-form-item>
       <el-form-item label="是否开启按钮：">
         <el-switch v-model="form.isButton" :active-value="1" :inactive-value="0" />
       </el-form-item>
@@ -61,7 +66,7 @@
         </el-select>
       </el-form-item>
       <el-row v-if="form.isButton == 1" style="width: 100%">
-        <el-col :span="12">
+        <el-col :span="8">
           <el-form-item label="左按钮文案：">
             <el-input v-model="form.leftButtonText" placeholder="请输入按钮文案" />
           </el-form-item>
@@ -75,13 +80,13 @@
             </el-select>
           </el-form-item>
           <el-form-item v-if="form.leftButtonForwardType === 1" label="内容添加：">
-            <el-input v-model="form.leftButtonContentName" readonly placeholder="请选择内容" />
+            <el-input v-model="form.leftButtonContentName" readonly placeholder="请选择内容" @focus="getDialog(2, -1)" />
           </el-form-item>
           <el-form-item v-if="form.leftButtonForwardType === 0" label="跳转链接：">
             <el-input v-model="form.leftButtonForwardUrl" placeholder="请输入跳转链接" />
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="8">
           <el-form-item label="右按钮文案：">
             <el-input v-model="form.rightButtonText" placeholder="请输入按钮文案" />
           </el-form-item>
@@ -95,23 +100,13 @@
             </el-select>
           </el-form-item>
           <el-form-item v-if="form.rightButtonForwardType === 1" label="内容添加：">
-            <el-input v-model="form.rightButtonContentName" readonly placeholder="请选择内容" />
+            <el-input v-model="form.rightButtonContentName" readonly placeholder="请选择内容" @focus="getDialog(2, -2)" />
           </el-form-item>
           <el-form-item v-if="form.rightButtonForwardType === 0" label="跳转链接：">
             <el-input v-model="form.rightButtonForwardUrl" placeholder="请输入跳转链接" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-form-item label="分享标题：">
-        <el-input v-model="form.shareTitle" placeholder="请输入分享标题" />
-      </el-form-item>
-      <el-form-item label="分享描述：">
-        <el-input v-model="form.shareDescription" type="textarea" :rows="5" placeholder="请输入分享描述" />
-      </el-form-item>
-      <el-form-item label="分享图片：">
-        <Upload listType="picture-card" :url="form.shareIcon" @upload="upload($event, 'shareIcon')"
-          :disabled="disabled" />
-      </el-form-item>
     </el-form>
     <div style="margin-left: 110px;">
       <el-button @click="close">取消</el-button>
@@ -138,7 +133,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="付费类型：">
-          <el-select v-model="dialogForm.payType" placeholder="请选择付费类型" clearable>
+          <el-select v-model="dialogForm.isFree" placeholder="请选择付费类型" clearable>
             <el-option v-for="item in freeOptions" :key="item.value" :value="item.value" :label="item.label" />
           </el-select>
         </el-form-item>
@@ -242,11 +237,22 @@ export default {
       // 弹窗列表
       tableData: [],
       // 页面排版索引
-      index: 0,
+      index: -1,
       // 只读
       disabled: Boolean(this.$route.query.boolean)
     }
   },
+  watch: {
+    async 'dialogForm.audioType'(val) {
+      if (val) {
+        await this.getPlatform({
+          audioType: val
+        })
+        this.dialogForm.platformId = this.platformOptions[0].value
+        this.getList()
+      }
+    }
+  },
   mounted() {
     if (this.form.id) {
       this.getDetail()
@@ -297,12 +303,8 @@ export default {
         value: 15,
         label: '音乐专辑'
       }]
-      this.dialogForm.audioType = this.audioOptions[0].value
-      this.getPlatform({
-        audioType: this.dialogForm.audioType
-      })
+      this.$set(this.dialogForm, 'audioType', this.audioOptions[0].value)
       this.dialogVisible = true
-      this.getList()
       this.index = index
     },
 
@@ -329,19 +331,28 @@ export default {
       this.dialogForm = {
         pageNum: 1,
         pageSize: 10,
-        audioType: this.audioOptions[0].value
+        audioType: this.audioOptions[0].value,
+        platformId: this.platformOptions[0].value
       }
       this.getList()
     },
 
     // 选择
     getChecked(row) {
-      let e = this.form.contentShareLayoutList[this.index]
-      this.$set(e, 'contentId', row.audioId)
-      this.$set(e, 'contentName', row.audioName)
-      this.$set(e, 'contentPic', row.audioPic)
-      this.$set(e, 'contentType', row.audioType)
-      this.$set(e, 'platformId', row.platformId)
+      if (this.index >= 0) {
+        let e = this.form.contentShareLayoutList[this.index]
+        this.$set(e, 'contentId', row.audioId)
+        this.$set(e, 'contentName', row.audioName)
+        this.$set(e, 'contentPic', row.audioPic)
+        this.$set(e, 'contentType', row.audioType)
+        this.$set(e, 'platformId', row.platformId)
+      } else {
+        let e = this.index == -1 ? 'left' : 'right'
+        this.$set(this.form, `${e}ButtonContentId`, row.audioId)
+        this.$set(this.form, `${e}ButtonContentName`, row.audioName)
+        this.$set(this.form, `${e}ButtonContentType`, row.audioType)
+        this.$set(this.form, `${e}ButtonPlatformId`, row.platformId)
+      }
       this.$message.success('选择成功！')
       this.dialogVisible = false
     },
@@ -387,4 +398,5 @@ export default {
   .el-form-item {
     width: 500px;
   }
-}</style>
+}
+</style>