aklast/backendEle/src/views/ad/edit.vue

<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-form ref="form" :model="form" label-width="100px" style="">
        <el-form-item label="标题">
          <el-input v-model="form.title" style="width: 400px;">></el-input>
        </el-form-item>
        <el-form-item label="广告位">
          <el-select v-model="form.lid" placeholder="请选择广告位" style="width: 400px;">
            <el-option v-for="item in allLocation" :label="item.LOCATION_NAME" :value="item.ID"
                       :key="item.ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="广告类型">
          <el-select v-model="form.type" placeholder="请选择广告类型" style="width: 400px;">
            <el-option label="外链" value="1" :key="1"></el-option>
            <el-option label="文章" value="2" :key="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="form.type==='1' ? '链接地址' : '文章ID'">
          <el-input v-model="form.content" style="width: 400px;">></el-input>
          <span class="note">注:外链请明确输入 http://或https://，文章则不需要输入</span>
        </el-form-item>
        <el-form-item label="广告图片">
          <leo-uploader :requestRoute="'ad/upload'" :defaultImageUrl="defaultImageUrl" width="400px" height="160px"
                        @on-success="handleSuccess"></leo-uploader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="submitButtonStat" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import network from '../../utils/network'
import LeoUploader from '../../components/Uploader'
import tool from '@/utils/tool'

export default {
  name: 'ad_edit',
  components: {LeoUploader},
  mounted () {
    if (this.$route.name === 'ad_edit') {
      network.getData('ad/edit/' + this.$route.params.id).then(response => {
        this.form.title = response.oneData.TITLE
        this.form.lid = response.oneData.LID
        this.form.type = response.oneData.TYPE
        this.form.content = response.oneData.CONTENT

        this.imageAd = response.oneData.IMAGE;
        this.form.image = tool.getLocaleLink(response.oneData.IMAGE, '/files/');
        this.defaultImageUrl = tool.getLocaleLink(response.oneData.IMAGE, '/files/');

        this.allLocation = response.allLocation
        this.loading = false
        this.isEdit = true
      })
    } else {
      network.getData('ad/add').then(response => {
        this.allLocation = response.allLocation
        this.loading = false
      })
    }
  },
  data () {
    return {
      form: {
        title: '',
        lid: null,
        type: '',
        content: '',
        image: '',
      },
      defaultImageUrl: null,
      allLocation: null,
      loading: false,
      submitButtonStat: false,
      isEdit: false,
      imageAd: '',
    }
  },
  methods: {
    onSubmit () {
      this.submitButtonStat = true
      let path = 'ad/add'
      if (this.$route.name === 'ad_edit') {
        path = 'ad/edit/' + this.$route.params.id
      }
      this.form.image = this.imageAd
      network.postData(path, this.form).then(response => {
        this.submitButtonStat = false
        this.$message({
          message: response,
          type: 'success'
        })
        this.$router.go(-1)
      }).catch(response => {
        this.submitButtonStat = false
      })
    },
    handleSuccess (imageUrl) {
      this.imageAd = imageUrl
      this.form.image = tool.getLocaleLink(imageUrl, '/files/')
      this.defaultImageUrl = tool.getLocaleLink(imageUrl, '/files/')
    },
  }
}
</script>
<style>
  .note {
    color:red;
  }
</style>