h5-service-web/src/views/PartyshistoryRecoder/components/addImg.vue

<template>
  <div>
    <xy-dialog ref="dialog"
               :is-show.sync="isShow"
               type="form"
               :title="type === 'add' ? '新增图片' : '编辑图片'"
               :form="form"
               :rules="rules"
               @submit="submit">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>
            名称 ：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.name"
                      clearable
                      placeholder="请输入名称"
                      style="width: 300px;"
            ></el-input>
          </div>
        </div>
      </template>

      <template v-slot:image_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            封面图 ：
          </div>
          <div class="xy-table-item-content">
            <el-upload
              style="width: 300px;"
              class="upload-demo"
              :action="action"
              :limit="1"
              :on-success="(response, file, fileList) => successHandle(response, file, fileList, 'image_id')"
              :before-upload="uploadBefore"
              :file-list="image_id"
              :on-remove="(file, fileList) => removeHande(file, fileList, 'image_id')"
              list-type="picture-card">
              <i slot="default" class="el-icon-plus"></i>

              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </div>
        </div>
      </template>
      <template v-slot:video_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            视频 ：
          </div>
          <div class="xy-table-item-content">
            <el-upload
              style="width: 300px"
              ref="upload"
              multiple
              :on-success="(response, file, fileList) => successHandle(response, file, fileList, 'video_id')"
              :before-upload="uploadBefore"
              accept=".mp4,.avi,.wmv"
              :action="action"
              :file-list="video_id"
              :auto-upload="false"
              :on-remove="(file, fileList) => removeHande(file, fileList, 'video_id')"
            >
              <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
              >
              <el-button
                style="margin-left: 10px"
                size="small"
                type="success"
                @click="$refs['upload'].submit()"
              >开始上传</el-button
              >
              <div slot="tip" class="el-upload__tip">
                支持文件格式：.mp4 .avi .wmv
                <br />单个文件不能超过20M
              </div>
            </el-upload>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import {
  show,
  save
} from '@/api/index';
export default {
  props:{
  },
  data() {
    return {
      isShow: false,
      id: '',
      type: '',
      action: process.env.VUE_APP_UPLOAD_API,
      image_id: [],
      video_id: [],


      form: {
        activity_list_id: 7,
        name: "",
        image_id: "",
        map_point_id: "",
        video_id: "",
      },
      rules: {
        name: [{
          required: true,
          message: "请填写名称"
        }]
      }
    }
  },
  methods: {
    show(){
      this.isShow = true;
    },
    hidden(){
      this.isShow = false;
    },
    init(){
      for (let key in this.form) {
        if (this.form[key] instanceof Array) {
          this.form[key] = [];
        } else {
          this.form[key] = "";
        }
      }
      this.$refs["dialog"].clearValidate();
    },
    setId(id) {
      if(typeof id == "number") {
        this.id = id;
      }else {
        console.error("error typeof id: " + typeof id)
      }
    },
    getId() {
      return this.id;
    },
    setType(type = 'add') {
      let types = ['add','editor']
      if(types.includes(type)) {
        this.type = type;
      }else{
        console.warn("Unknown type: " + type)
      }
    },
    setForm(key = [], value = []) {
      if(key instanceof Array) {
        key.forEach((key,index) => {
          this.form[key] = value[index] ?? "";
        })
      }
      if(typeof key === "string"){
        this.form[key] = value
      }
      if(!key){
        this.init()
      }
    },

    //上传
    uploadBefore(file) {
      console.log(file);
      if (file.size / 1000 > 20 * 1024) {
        this.$message({
          type: "warning",
          message: "上传图片大小超过20MB！",
        });
        return false;
      }
    },
    successHandle(response, file, fileList, key) {
      this[key] = fileList;
    },
    removeHande(file, fileList, key) {
      this[key] = fileList;
    },

    async getDetail() {
      const res = await show({ id:this.id, table_name: 'map_point_images', with_relations: ['video','image'] })
      this.$integrateData(this.form, res)
      this.image_id = res.image ? [{
        url: res.image?.url,
        name: res.image?.original_name,
        response: res.image
      }] : []
      this.video_id = res.video ? [{
        url: res.video?.url,
        name: res.video?.original_name,
        response: res.video
      }] : []
    },

    submit() {
      if(this.type === 'add'){
        if(this.form.hasOwnProperty('id')){
          delete this.form.id
        }
      }
      if (this.type === 'editor') {
        Object.defineProperty(this.form, 'id', {
          value: this.id,
          enumerable: true,
          configurable: true,
          writable: true
        })
      }
      this.form.image_id = this.image_id[0]?.response?.id
      this.form.video_id = this.video_id[0]?.response?.id
      save(Object.assign(this.form,{table_name: 'map_point_images'})).then(res => {
        this.$message({
          type: 'success',
          message: this.type === 'add' ? '新增vr看展' : '编辑vr看展' + '成功'
        });
        this.isShow = false
        this.$emit('refresh')
      })
    }
  },
  watch: {
    isShow(val) {
      if (val) {
        if (this.type === 'editor') {
          this.getDetail()
        }
      } else {
        this.id = ''
        this.type = ''
        this.init();
        this.$refs['dialog'].clearValidate();
        delete this.form.id
      }
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-input__inner {
  text-align: left;
}

</style>