live-cms/src/layout/room/detailInfo.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="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="主播" prop="anchorid">
              <el-select v-model="form.anchorid" placeholder="请选择主播" filterable>
                <el-option v-for="item in newlist" :key="item.id" :label="item.name" :value="item.id"> </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="类型" prop="type">
              <el-radio v-model="form.type" label="0">直播</el-radio>
              <el-radio v-model="form.type" label="1">会议</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>
              <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,
    newlist: 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' }],
      // type: [{ required: true, message: '请选择活动资源', trigger: 'change' }],
    },
  }),
  created() {},
  computed: {},
  methods: {
    uploadSuccess({ type, data }) {
      console.log(type, data);
      this.$set(this.form, `${type}`, data.uri);
    },
    onSubmit() {
      this.$emit('submitDate', { data: this.form, id: this.form.id });
    },
  },
};
</script>

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