luobisheng
2022-11-24 41a2ddabb399c51821ccd606736d4e4c403c4238
src/views/operate/video/updateInterface/index.vue
@@ -1,46 +1,40 @@
<template>
  <div class="updateUser">
    <main>
      <div class="mainContent">
        <el-form :model="videoData" :rules="rules" :disabled="isDisabled" ref="user" style="width: 100%;">
          <el-form-item prop="baseId" label="所属事件编号">
            <el-input v-model="videoData.baseId"></el-input>
          </el-form-item>
          <el-form-item prop="eventSource" label="事件来源">
            <el-input v-model="videoData.eventSource"></el-input>
          </el-form-item>
          <el-form-item prop="category" label="问题类别">
            <el-input v-model="videoData.category"></el-input>
          </el-form-item>
          <el-form-item prop="type" label="类型">
            <el-select v-model="videoData.type">
              <el-option v-for="item in getResourceType()" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item prop="regionName" label="社区名称">
            <el-input v-model="videoData.regionName"></el-input>
          </el-form-item>
          <el-form-item prop="id" label="视频Id">
            <el-input v-model="videoData.id"></el-input>
          </el-form-item>
          <el-form-item prop="url" label="视频" min-width="8">
            <el-upload
                class="avatar-uploader"
                action=""
                ref="image"
                :show-file-list="false"
                :auto-upload="true"
                :http-request="videoUpload">
              <video controls v-if="videoData.url" :src="videoData.url" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <div v-if="!isDisabled" class="optionBtn">
            <el-button type="primary" class="btn submit" @click.native.prevent="onSubmit">提交</el-button>
          </div>
        </el-form>
      </div>
    </main>
    <el-form label-position="right" label-width="150px" :model="videoData" :rules="rules" :disabled="isDisabled" ref="user">
      <el-form-item prop="belongToId" label="所属事件编号">
        <el-input v-model="videoData.belongToId"></el-input>
      </el-form-item>
      <el-form-item prop="eventSource" label="事件来源">
        <el-input v-model="videoData.eventSource"></el-input>
      </el-form-item>
      <el-form-item prop="category" label="问题类别">
        <el-input v-model="videoData.category"></el-input>
      </el-form-item>
      <el-form-item prop="type" label="类型">
        <el-select v-model="videoData.type">
          <el-option v-for="item in getResourceType()" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="regionName" label="社区名称">
        <el-input v-model="videoData.regionName"></el-input>
      </el-form-item>
      <el-form-item prop="id" label="视频Id">
        <el-input v-model="videoData.id"></el-input>
      </el-form-item>
      <el-form-item prop="url" label="视频" min-width="8">
        <el-upload
            class="avatar-uploader"
            action=""
            ref="image"
            :show-file-list="false"
            :auto-upload="true"
            :http-request="videoUpload">
          <video controls v-if="videoData.url" :src="videoData.url" width="300px" height="200px" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
        <el-button v-if="!isDisabled" class="submit-button" type="primary" @click.native.prevent="onSubmit">提交</el-button>
    </el-form>
  </div>
</template>
<script>
@@ -48,7 +42,6 @@
import videoManagement from "@/api/operate/videoManagement";
import { FILE_ORIGINAL_URL } from "@/utils";
import imageManagement from "@/api/operate/imageManagement";
export default {
  data() {
@@ -61,7 +54,7 @@
    };
    return {
      videoData: {
        baseId: '',
        belongToId: '',
        eventSource: '',
        regionName: '',
        category: '',
@@ -70,7 +63,7 @@
        type: ''
      },
      rules: {
        baseId: [{ required: true, trigger: 'blur', message: '请输入所属事件编号' }],
        belongToId: [{ required: true, trigger: 'blur', message: '请输入所属事件编号' }],
        eventSource: [{ required: true, trigger: 'blur', message: '请输入事件来源' }],
        regionName: [{ required: true, trigger: 'blur', message: '请输入社区名称' }],
        id: [{ required: true, trigger: 'blur', message: '请输入图片Id' }],
@@ -91,15 +84,21 @@
    onSubmit() {
      this.$refs.user.validate(valid => {
        if (valid) {
          const params = Object.assign({}, this.videoData);
          delete params.regionName;
          delete params.category;
          delete params.eventSource;
          delete params.id;
          params.belongToId = +params.belongToId;
          if (this.isUpdate && !this.dialogData) {
            videoManagement.addVideoResource(this.videoData)
            videoManagement.addVideoResource(params)
                .then(() => {
                  this.$message.success('操作成功');
                  this.$emit('closeDialog');
                })
                .catch(err => this.$message.error(`${err}`))
          } else {
            videoManagement.updateVideoResource(this.videoData)
            videoManagement.updateVideoResource(params)
                .then(() => {
                  this.$message.success('操作成功');
                  this.$emit('closeDialog');
@@ -145,50 +144,12 @@
.updateUser {
  border-radius: 1px;
  background-color: #09152f;
  display: flex;
  justify-content: center;
  align-items: center;
  main {
    // border: 1px solid #fff;
    text-align: left;
    padding: 0 55px;
    background-color: #09152f;
    padding-bottom: 50px;
    .mainContent {
      display: flex;
      justify-content: center;
      padding-top: 50px;
      .el-form-item__content {
        width: 400px;
        .el-select {
          width: 100%;
        }
      }
      .optionHandleSp {
        display: flex;
        .areaNumber,
        .moreNumber {
          flex: 1;
        }
        .telNumber {
          flex: 2;
        }
      }
      .optionBtn {
        display: flex;
        margin-top: 20px;
        justify-content: center;
        .btn {
          padding: 12px 50px;
        }
      }
    }
  .submit-button {
    margin-left: 200px;
  }
}