ohplay_system/src/views/content/article/detail.vue

<template>
  <div class='app-container'>
    <el-form :model="form" ref="form" :rules="rules" class="form" label-width="auto" :disabled="disabled">
      <el-form-item label="文章标题：" prop="title">
        <el-input v-model="form.title" placeholder="请输入文章标题" />
      </el-form-item>
      <el-form-item label="模板类型：" prop="templateType">
        <el-select v-model="form.templateType" placeholder="请选择模板类型">
          <el-option v-for="item in typeOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.templateType !== undefined" label="背景图片：" prop="backgroundImage">
        <Upload listType="picture-card" :url="form.backgroundImage" @upload="upload($event, 'backgroundImage')"
          :disabled="disabled" />
      </el-form-item>
      <el-form-item v-if="form.templateType == 1" label="音频组件背景：">
        <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: 60%">
        <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">
            <template slot-scope="scope">
              <el-form-item :prop="`contentShareLayoutList.${scope.$index}.layoutType`"
                :rules="{ required: true, trigger: 'change' }">
                <el-select v-model="scope.row.layoutType" placeholder="请选择布局类型">
                  <el-option v-for="item in layoutOptions" :key="item.value" :value="item.value" :label="item.label" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="内容" align="center">
            <template slot-scope="scope">
              <el-form-item v-if="scope.row.layoutType === 0" :prop="`contentShareLayoutList.${scope.$index}.contentPic`"
                :rules="{ required: true, trigger: 'change' }">
                <Upload listType="picture-card" :url="scope.row.contentPic"
                  @upload="upload($event, `contentPic`, scope.$index)" :disabled="disabled" />
              </el-form-item>
              <el-form-item v-else :prop="`contentShareLayoutList.${scope.$index}.contentName`"
                :rules="{ required: true, trigger: 'change' }">
                <el-input v-model="scope.row.contentName" placeholder="请选择内容" readonly
                  @focus="getDialog(scope.row.layoutType, scope.$index)" :title="scope.row.contentName" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="排序" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="`contentShareLayoutList.${scope.$index}.sort`"
                :rules="{ required: true, trigger: 'blur' }">
                <el-input-number v-model="scope.row.sort" :min="1" step-strictly />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100px">
            <template slot-scope="scope">
              <el-button type="delete" @click="getDelete(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="分享标题：" prop="shareTitle">
        <el-input v-model="form.shareTitle" placeholder="请输入分享标题" />
      </el-form-item>
      <el-form-item label="分享描述：" prop="shareDescription">
        <el-input v-model="form.shareDescription" type="textarea" :rows="5" placeholder="请输入分享描述" />
      </el-form-item>
      <el-form-item label="分享图片：" prop="shareIcon">
        <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>
      <el-form-item v-if="form.isButton == 1" label="按钮交互：" prop="buttonFixType">
        <el-select v-model="form.buttonFixType" placeholder="请选择按钮交互">
          <el-option v-for="item in buttonOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-row v-if="form.isButton == 1" style="width: 100%">
        <el-col :span="8">
          <el-form-item label="左按钮文案：" prop="leftButtonText">
            <el-input v-model="form.leftButtonText" placeholder="请输入按钮文案" />
          </el-form-item>
          <el-form-item label="左按钮图片：">
            <Upload listType="picture-card" :url="form.leftButtonImg" @upload="upload($event, 'leftButtonImg')"
              :disabled="disabled" />
          </el-form-item>
          <el-form-item label="跳转方式：" prop="leftButtonForwardType">
            <el-select v-model="form.leftButtonForwardType" placeholder="请选择跳转方式">
              <el-option v-for="item in changeOptions" :key="item.value" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="form.leftButtonForwardType === 1" label="内容添加：" prop="leftButtonContentName">
            <el-input v-model="form.leftButtonContentName" readonly placeholder="请选择内容" @focus="getDialog(2, -1)" />
          </el-form-item>
          <el-form-item v-if="form.leftButtonForwardType === 0" label="跳转链接：" prop="leftButtonForwardUrl">
            <el-input v-model="form.leftButtonForwardUrl" placeholder="请输入跳转链接" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="右按钮文案：" prop="rightButtonText">
            <el-input v-model="form.rightButtonText" placeholder="请输入按钮文案" />
          </el-form-item>
          <el-form-item label="右按钮图片：">
            <Upload listType="picture-card" :url="form.rightButtonImg" @upload="upload($event, 'rightButtonImg')"
              :disabled="disabled" />
          </el-form-item>
          <el-form-item label="跳转方式：" prop="rightButtonForwardType">
            <el-select v-model="form.rightButtonForwardType" placeholder="请选择跳转方式">
              <el-option v-for="item in changeOptions" :key="item.value" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="form.rightButtonForwardType === 1" label="内容添加：" prop="rightButtonContentName">
            <el-input v-model="form.rightButtonContentName" readonly placeholder="请选择内容" @focus="getDialog(2, -2)" />
          </el-form-item>
          <el-form-item v-if="form.rightButtonForwardType === 0" label="跳转链接：" prop="rightButtonForwardUrl">
            <el-input v-model="form.rightButtonForwardUrl" placeholder="请输入跳转链接" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="margin-left: 110px;">
      <el-button @click="close">取消</el-button>
      <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
    </div>

    <!-- 弹出 -->
    <el-dialog :visible.sync="dialogVisible" title="选择音频" width="1000px">
      <el-form inline size="mini">
        <el-form-item label="音频ID：">
          <el-input v-model="dialogForm.id" placeholder="请输入音频ID" clearable />
        </el-form-item>
        <el-form-item label="内容名称：">
          <el-input v-model="dialogForm.name" placeholder="请输入内容名称" clearable />
        </el-form-item>
        <el-form-item label="音频类型：">
          <el-select v-model="dialogForm.audioType" placeholder="请选择音频类型">
            <el-option v-for="item in audioOptions" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="资源平台：">
          <el-select v-model="dialogForm.platformId" placeholder="请选择资源平台" clearable>
            <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="付费类型：">
          <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>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData">
        <el-table-column label="音频ID" prop="audioId" align="center" show-overflow-tooltip />
        <el-table-column label="音频名称" prop="audioName" align="center" show-overflow-tooltip />
        <el-table-column label="音频封面" align="center" width="100px">
          <template slot-scope="scope">
            <el-image :src="scope.row.audioPic" />
          </template>
        </el-table-column>
        <el-table-column label="音频作者" prop="singerName" align="center" show-overflow-tooltip />
        <el-table-column label="专辑名称" prop="songName" align="center" show-overflow-tooltip />
        <el-table-column label="音频类型" prop="audioType" align="center" :formatter="audioTypeFormatter" />
        <el-table-column label="音频数量" prop="programCount" align="center" />
        <el-table-column label="付费类型" prop="isFree" align="center" :formatter="freeFormatter" />
        <el-table-column label="资源平台" prop="platformId" align="center" :formatter="platformFormatter" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="getChecked(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer">
        <pagination v-show="total > 0" :total="total" :page.sync="dialogForm.pageNum" :limit.sync="dialogForm.pageSize"
          @pagination="getList" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { platformMixin, isFreeMixin } from '@/mixin/index'
import { detail, submit } from '@/api/content/article'
import { list } from '@/api/operation/channel'
export default {
  mixins: [platformMixin, isFreeMixin],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 表单
      form: {
        id: this.$route.query.id,
        contentShareLayoutList: []
      },
      // 模板类型
      typeOptions: [{
        value: 0,
        label: '图片模板'
      }, {
        value: 1,
        label: '图片音频模板'
      }],
      // 布局类型
      layoutOptions: [{
        value: 0,
        label: '图片'
      }, {
        value: 1,
        label: '单音频'
      }, {
        value: 2,
        label: '音频合集'
      }],
      // 按钮交互
      buttonOptions: [{
        value: 0,
        label: '底部固定'
      }, {
        value: 1,
        label: '文章固定'
      }],
      // 跳转方式
      changeOptions: [{
        value: 0,
        label: 'H5内链'
      }, {
        value: 1,
        label: 'App跳转音频合集'
      }, {
        value: 2,
        label: '分享'
      }],
      // 音频类型
      audioOptions: [],
      // 弹窗
      dialogVisible: false,
      // 弹窗表单
      dialogForm: {
        pageNum: 1,
        pageSize: 10
      },
      // 总数据
      total: 0,
      // 弹窗列表
      tableData: [],
      // 页面排版索引
      index: -1,
      // 只读
      disabled: Boolean(this.$route.query.boolean),
      // 校验
      rules: {
        title: [{
          required: true, message: '请输入文章标题', trigger: 'blur'
        }],
        templateType: [{
          required: true, message: '请选择模版类型', trigger: 'change'
        }],
        backgroundImage: [{
          required: true, message: '请上传背景图片', trigger: 'change'
        }],
        shareTitle: [{
          required: true, message: '请输入分享标题', trigger: 'blur'
        }],
        shareDescription: [{
          required: true, message: '请输入分享描述', trigger: 'blur'
        }],
        shareIcon: [{
          required: true, message: '请上传分享图片', trigger: 'change'
        }],
        buttonFixType: [{
          required: true, message: '请选择按钮交互', trigger: 'change'
        }],
        leftButtonText: [{
          required: true, message: '请输入按钮文案', trigger: 'blur'
        }],
        leftButtonForwardType: [{
          required: true, message: '请选择跳转方式', trigger: 'change'
        }],
        leftButtonContentName: [{
          required: true, message: '请选择内容', trigger: 'change'
        }],
        leftButtonForwardUrl: [{
          required: true, message: '请输入跳转链接', trigger: 'blur'
        }],
        rightButtonText: [{
          required: true, message: '请输入按钮文案', trigger: 'blur'
        }],
        rightButtonForwardType: [{
          required: true, message: '请选择跳转方式', trigger: 'change'
        }],
        rightButtonContentName: [{
          required: true, message: '请选择内容', trigger: 'change'
        }],
        rightButtonForwardUrl: [{
          required: true, message: '请输入跳转链接', trigger: 'blur'
        }]
      }
    }
  },
  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()
    }
  },
  methods: {
    // 详情
    getDetail() {
      detail(this.form.id).then(res => {
        if (res.code === 0) {
          this.form = res.data
        }
      })
    },

    // 添加
    getAdd() {
      this.form.contentShareLayoutList.push({})
    },

    // 上传图片
    upload(e, key, index) {
      if (index !== undefined) {
        this.form.contentShareLayoutList[index][key] = e.file
      } else {
        this.form[key] = e.file
      }
    },

    // 弹窗
    getDialog(e, index) {
      this.audioOptions = e == 1 ? [{
        value: 2,
        label: '广播电台'
      }, {
        value: 6,
        label: '节目'
      }, {
        value: 11,
        label: '歌曲'
      }] : [{
        value: 8,
        label: '播客专辑'
      }, {
        value: 10,
        label: '歌单'
      }, {
        value: 15,
        label: '音乐专辑'
      }]
      this.$set(this.dialogForm, 'audioType', this.audioOptions[0].value)
      this.dialogVisible = true
      this.index = index
    },

    // 列表
    getList() {
      this.loading = true
      list(this.dialogForm).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
          this.loading = false
        }
      })
    },

    // 搜索
    getSearch() {
      this.dialogForm.pageNum = 1
      this.getList()
    },

    // 重置
    getRefresh() {
      this.dialogForm = {
        pageNum: 1,
        pageSize: 10,
        audioType: this.audioOptions[0].value,
        platformId: this.platformOptions[0].value
      }
      this.getList()
    },

    // 选择
    getChecked(row) {
      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 ? 'leftButton' : 'rightButton'
        this.$set(this.form, `${e}ContentId`, row.audioId)
        this.$set(this.form, `${e}ContentName`, row.audioName)
        this.$set(this.form, `${e}ContentType`, row.audioType)
        this.$set(this.form, `${e}PlatformId`, row.platformId)
      }
      this.$message.success('选择成功！')
      this.dialogVisible = false
    },

    // 删除排版
    getDelete(index) {
      this.form.contentShareLayoutList.splice(index, 1)
    },

    // 关闭
    close() {
      this.$tab.closeOpenPage('/content/articleList')
    },

    // 提交
    getSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          submit(this.form).then(res => {
            if (res.code === 0) {
              this.$message.success('提交成功！')
              this.close()
            }
          })
        } else {
          return false
        }
      })
    },

    // 字典翻译
    audioTypeFormatter(row) {
      return this.selectDictLabel(this.audioOptions, row.audioType)
    },

    freeFormatter(row) {
      return this.selectDictLabel(this.freeOptions, row.isFree)
    },

    platformFormatter(row) {
      return this.selectDictLabel(this.platformOptions, row.platformId)
    }
  }
}
</script>

<style lang="scss" scoped>
.form {
  .el-form-item {
    width: 500px;
  }

  .el-table__row {
    .el-form-item {
      width: 100%;
    }
  }
}
</style>