changshuBWG/src/pages/scene/addScene.vue

<!--  -->
<template>
  <div class="addScene">
    <MainTop :crumb="[{ name: '场景管理 > 新增场景' }]" />
    <div class="table-interface" style="flex: 1">
      <div class="top-body">
        <div class="conten">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="场景名称" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入场景名称"
                style="width: 220px; margin-right: 10px"
              ></el-input>
            </el-form-item>
            <el-form-item label="场景链接" prop="urlScene">
              <el-input
                v-model="ruleForm.urlScene"
                placeholder="请输入场景链接"
                style="width: 220px; margin-right: 10px"
              ></el-input>
            </el-form-item>

            <el-form-item label="展示封面：" style="margin-left: 15px">
              <!-- style="border: 1px dotted #ccc; width:178px;   border-radius: 5px;" -->
              <Cropper
                :width="512"
                :height="512"
                :fixed-number="[1, 1]"
                :uploadUrl="'/scene/upload'"
                :img="ruleForm.thumb"
                @clearImg="ruleForm.thumb = ''"
                @subUploadSucceed="getShopImages"
              />
              <span class="wwtxt" style="color: #c0c4cc"
                >建议上传512*512的png格式图片</span
              >
            </el-form-item>
          </el-form>
        </div>
        <el-button type="primary" @click="add" style="margin-left: 50px">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import MainTop from '@/components/main-top'
import Cropper from '@/components/cropper'

export default {
  name: 'AddScene',
  components: {
    MainTop,
    Cropper
  },
  data () {
    // 这里存放数据
    return {
      ruleForm: {
        fileName: 'CSBWG',
        name: '',
        thumb: '',
        urlScene: ''
      },
      rules: {
        name: [{ required: true, message: '请输入场景名称', trigger: 'blur' }],
        urlScene: [{ required: true, message: '请输入场景链接', trigger: 'blur' }]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    getShopImages (img) {
      console.log(999999, img)
      this.ruleForm.thumb = img.filePath
    },
    async add () {
      await this.$refs.ruleForm.validate()
      if (!this.ruleForm.thumb) return this.$message.warning('封面不能为空')

      this.getList()
    },
    // 新增接口
    async getList () {
      let result = await this.$http({
        method: 'post',
        url: '/scene/save',
        data: this.ruleForm
      })
      console.log('新增成功', result)
      this.$message.success('新增成功')
      this.$router.go(-1)
    },
    // 重置
    // reset () {
    //   this.$refs.ruleForm.resetFields()
    //   this.ruleForm.thumb = ''
    // },
    // 点击取消
    cancel () {
      this.$router.go(-1)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.addScene {
  display: flex;
  flex-direction: column;
}
.table-interfac {
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100% - 3rem);
}
.top-body {
  padding: 24px;
  height: 100%;
  margin: 1rem 0;
}
.conten {
  padding-top: 10px;
  width: 100%;
  height: 380px;
  border: 1px solid #ccc;
  margin-bottom: 30px;
}
</style>