ohplay_system/src/views/operation/scene/detail.vue

<template>
  <div class="app-container">
    <!-- 表单 -->
    <el-form label-width="100px" :disabled="disabled">
      <el-form-item label="场景标题：">
        <el-input v-model="form.name" placeholder="请输入场景标题" />
      </el-form-item>
      <el-form-item label="场景副标题：">
        <el-input v-model="form.subName" placeholder="请输入场景副标题" />
      </el-form-item>
      <el-form-item label="场景封面：">
        <Upload listType="picture-card" :url="form.pic" @upload="upload($event, 'pic')" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="专区背景图：">
        <Upload listType="picture-card" :url="form.backgroundPic" @upload="upload($event, 'backgroundPic')"
          :disabled="disabled" />
      </el-form-item>
    </el-form>
    <div class="form-btn" style="margin-bottom: 40px">
      <el-button @click="cancel">取消</el-button>
      <el-button v-if="!disabled" type="primary" @click="getSubmit">提交</el-button>
    </div>
    <el-form label-width="100px" :disabled="disabled">
      <el-form-item label="专区列表：" style="width: 1200px">
        <el-table :data="tableData" v-loading="loading" :default-sort="{prop: 'sort'}">
          <el-table-column label="排序" prop="sort" align="center" />
          <el-table-column label="标签名称" prop="name" align="center" />
          <el-table-column label="标签封面" align="center" width="100px">
            <template slot-scope="scope">
              <el-image v-if="scope.row.pic" :src="scope.row.pic" />
            </template>
          </el-table-column>
          <el-table-column label="歌单数量" prop="songCount" align="center" />
          <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="getDialog(scope.row.id, '查看')">查看</el-button>
              <el-button v-if="scope.row.status === 0" type="text" @click="getChange(scope.row, 1, '禁用')">禁用</el-button>
              <span v-else style="margin-left: 10px">
                <el-button type="text" @click="getDialog(scope.row.id, '编辑')">编辑</el-button>
                <el-button type="text" @click="getChange(scope.row, 0, '启用')">启用</el-button>
                <el-button type="delete" @click="getChange(scope.row, 2, '删除')">删除</el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
          @pagination="getList" />
      </el-form-item>
    </el-form>
    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogVisible" :title="title" width="600px" :before-close="getClose">
      <el-form :model="dialogForm" ref="dialogForm" label-width="100px" :disabled="title === '查看' ? true : false">
        <el-form-item label="标签名称：" prop="name">
          <el-input v-model="dialogForm.name" placeholder="请输入标签名称" />
        </el-form-item>
        <el-form-item label="标签封面：" prop="pic">
          <Upload listType="picture-card" :url="dialogForm.pic" @upload="upload($event, 'pic')"
            :disabled="title === '查看' ? true : false" />
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-input-number v-model="dialogForm.sort" step-strictly />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="getClose">取消</el-button>
        <el-button v-if="title === '查看' ? false : true" type="primary" @click="getDetailSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { detail, edit, detailList, change, menuDetail, editMenu } from '@/api/operation/scene'
import { disabledMixin } from '@/mixin/index'
export default {
  mixins: [disabledMixin],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 表单
      form: {},
      // 列表
      tableData: [],
      // 专区表单
      listForm: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      // 弹窗
      dialogVisible: false,
      title: '编辑',
      // 弹窗表单
      dialogForm: {},
      // 只读
      disabled: false
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.form.id = this.listForm.groupId = this.$route.query.id
      this.disabled = Boolean(this.$route.query.boolean)
      this.getDetail()
      this.getList()
    }
  },
  methods: {
    // 详情
    getDetail() {
      detail(this.form.id).then(res => {
        if (res.code === 0) {
          this.form = res.data
        }
      })
    },

    // 上传图片
    upload(e, key) {
      this.dialogVisible ? this.dialogForm[key] = e.file : this.form[key] = e.file
    },

    // 提交
    getSubmit() {
      edit(this.form).then(res => {
        if (res.code === 0) {
          this.$message.success('编辑成功！')
          this.cancel()
        }
      })
    },

    // 取消
    cancel() {
      this.$tab.closeOpenPage('/operation/scene')
    },

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

    // 上下架
    getChange(row, status, title) {
      this.$confirm(`是否${title}${row.name}?`, '提示', {
        type: 'warning'
      }).then(() => {
        change(row.id, 2, status).then(res => {
          if (res.code === 0) {
            this.$message.success(`${title}成功！`)
            this.getList()
          }
        })
      }).catch(() => { })
    },

    // 弹窗
    getDialog(id, title) {
      this.dialogVisible = true
      this.title = title
      menuDetail(id).then(res => {
        if(res.code === 0){
          this.dialogForm = res.data
        }
      })
    },

    // 关闭
    getClose(){
      this.dialogVisible = false
      this.$refs.dialogForm.resetFields()
    },

    // 确定
    getDetailSubmit() {
      editMenu(this.dialogForm).then(res => {
        if (res.code === 0) {
          this.$message.success('编辑成功！')
          this.dialogVisible = false
          this.getList()
        }
      })
    },

    // 字典翻译
    statusFormatter(row) {
      return this.selectDictLabel(this.disabledOptions, row.status)
    }
  }
}
</script>

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