live-cms/src/layout/room/detailStatusInfo.vue

<template>
  <div id="detail">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="messgae">
          <el-form ref="form" :model="form" label-width="120px" :rules="rules">
            <el-form-item label="房间标题" prop="title">
              <el-input v-model="form.title" disabled></el-input>
            </el-form-item>
            <el-form-item label="房间号" prop="name">
              <el-input v-model="form.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="主播" prop="username">
              <el-input v-model="form.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type">
              <el-radio v-model="form.type" label="0" disabled>直播</el-radio>
              <el-radio v-model="form.type" label="1" disabled>会议</el-radio>
            </el-form-item>
            <el-form-item label="封面图片" prop="filedir">
              <upload :limit="1" :data="form.filedir" type="filedir" :url="'/files/filedir/upload'" @upload="uploadSuccess"></upload>
            </el-form-item>
            <el-form-item label="信息简介" prop="content">
              <el-input type="textarea" v-model="form.content" disabled></el-input>
            </el-form-item>
            <el-form-item label="直播状态" prop="status">
              <el-radio v-model="form.status" label="1">开启</el-radio>
              <el-radio v-model="form.status" label="2">结束</el-radio>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit()">提交</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import upload from '@/components/upload.vue';
export default {
  name: 'detail',
  props: {
    form: null,
  },
  components: {
    upload,
  },
  data: () => ({
    rules: {
      name: [{ required: true, message: '请输入房间号', trigger: 'blur' }],
      anchorid: [{ required: true, message: '请选择主播', trigger: 'change' }],
      filedir: [{ required: true, message: '请选择头像图片', trigger: 'blur' }],
      type: [{ required: true, message: '请选择类型', trigger: 'change' }],
      status: [{ required: true, message: '请选择直播状态', trigger: 'change' }],
    },
  }),
  created() {},
  computed: {},
  methods: {
    uploadSuccess({ type, data }) {
      this.$set(this.form, `${type}`, data.uri);
    },
    onSubmit() {
      this.$emit('onSubmit', { data: this.form });
    },
  },
};
</script>

<style lang="less" scoped>
.top {
  padding: 15px 0;
}
.top .topTitle {
  text-align: left;
}
.top .topBtn {
  text-align: right;
  padding: 0 5px;
}
</style>