yos_web/src/bgj/ServiceMaterialClass/modules/edit.vue

<template>
  <div class="inline-16">
    <el-button size="small" type="text" @click="onShow">{{$t('编 辑')}}</el-button>
    <el-drawer
      :title="$t(`编辑品牌`)"
      :visible.sync="drawer"
      :wrapperClosable="false"
      size="90%"
      direction="rtl"
      :show-close="false"
      append-to-body>
      <div class="drawer__panel">
        <el-form  :model="form" :rules="rules"  ref="form"  size="mini" label-position="right" :label-width="tool.onlyZh('80px')">
          <el-form-item  prop="brandname" :label="$t(`品牌名称`)">
            <el-input v-model="form.brandname"  :placeholder="$t(`输入品牌名称`)" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item  :label="$t(`品牌logo`)">
            <uploadFile ref="upload" v-if="!form.attinfos || form.attinfos.length === 0" style="margin-top:10px" :folderid="folderid" accept=".JPG,.PNG,.jpg,.png" btntype="image" :bindData="{ownertable:'sa_brand_bgj',ownerid:form.sa_brand_bgjid,usetype:'default'}" @onSuccess="uploadSuccess"></uploadFile>
            <previewImage v-else  :image="form.attinfos[0]" :deletebtn="true"
              @onSuccess="clearCover"></previewImage>
            <small style="display:block;margin-top:20px" class="info">{{$t(`注:建议上传图片大小`)}}1024x1024px，{{$t('大小不超过')}}2M，{{$t('格式为')}}JPG/PNG</small>
          </el-form-item>
        </el-form>
        <saleclass :data="data"></saleclass>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="drawer = false" class="normal-btn-width">{{$t('取 消')}}</el-button>
        <el-button size="small" type="primary" @click="onSubmit"   class="normal-btn-width">{{$t('确 定')}}</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import uploadFile from '../../../components/upload/hw_obs_upload.vue'
import previewImage from '@/components/previewImage/index.vue'
import saleclass from '../component/saleclass/index'
export default {
name: "edit",
  props:['data'],
  data(){
    return {
      drawer:false,
      folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
      rules:{
        brandname: [
          { required: true, message: this.$t('品牌名称不可为空'), trigger: 'blur' },
        ],
      },
      form:{
        brandname:'',
        attinfos:[]
      },
    }
  },
  components:{
    uploadFile,
    previewImage,
    saleclass
  },
  created() {
  },
  methods:{
    onShow(){
      this.drawer = true
      this.form = Object.assign({},this.form,this.data)
    },
    onSubmit () {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        const res = await this.$api.requested({
          "id": "20220922085004",
          "version": 1,
          "content": {
            "sa_brand_bgjid": this.form.sa_brand_bgjid,
            "brandname": this.form.brandname
          }
        })
        this.tool.showMessage(res, () => {
          this.ownerid = res.data
          this.drawer = false
          this.$emit('onSuccess')
        })
      })
    },
    uploadSuccess(res){
      this.form.attinfos = JSON.parse(res.attinfos).data
      this.$refs['upload'].dialogUploadVisible = false
    },
    clearCover () {
      this.form.attinfos = []
    }
  }
}
</script>

<style scoped>

</style>