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

<template>
  <div class='app-container'>
    <el-form :model="form" ref="form" :rules="rules" label-width="auto" :disabled="disabled">
      <el-form-item label="视频宣传名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入视频宣传名称" />
      </el-form-item>
      <el-form-item label="设备型号：">
        <el-input v-model="form.clientType" placeholder="请输入设备型号" disabled />
      </el-form-item>
      <el-form-item label="视频宣传内容：" prop="content">
        <Editor v-model="form.content" :min-height="250" :readOnly="disabled" />
      </el-form-item>
    </el-form>
    <div style="margin-left: 120px;">
      <el-button @click="close">取消</el-button>
      <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
    </div>
  </div>
</template>

<script>
import { submit, detail } from '@/api/content/video'
export default {
  data() {
    return {
      form: {
        id: this.$route.query.id
      },
      // 只读
      disabled: Boolean(this.$route.query.boolean),
      // 校验
      rules: {
        name: [{
          required: true, message: '请输入视频宣传名称', trigger: 'blur'
        }],
        content: [{
          required: true, message: '请输入视频宣传内容', trigger: 'blur'
        }]
      }
    }
  },
  mounted() {
    if (this.form.id) {
      this.getDetail()
    }
  },
  methods: {
    // 详情
    getDetail() {
      detail(this.form.id).then(res => {
        if (res.code === 0) {
          this.form = res.data
        }
      })
    },

    // 确定
    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
        }
      })
    },

    // 取消
    close() {
      this.$tab.closeOpenPage("/content/video");
    }
  }
}
</script>

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