ngds-backend-ele/src/views/ad/edit.vue

<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-form ref="form" :model="form" label-width="250px" class="form-page">
        <el-form-item :label="$t('ad.adTitle')">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item :label="$t('ad.adLocation')">
          <el-select v-model="form.lid" placeholder="Select Type"> <!-- 请选择广告类型 -->
            <el-option
              v-for="item in allLocation"
              :key="item.ID"
              :label="item.LOCATION_NAME"
              :value="item.ID"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('ad.type')"> <!-- 广告类型 -->
          <el-select v-model="form.type" placeholder="Select Type" style="width: 400px;"> <!-- 请选择广告类型 -->
            <el-option :key="1" label="External Link" value="1" /> <!-- 外链 -->
            <el-option :key="2" label="Article" value="2" /> <!-- 文章 -->
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.type==='1'" label="Url"> <!-- '链接地址' '文章ID' -->
          <el-input v-model="url" style="width: 400px;" />
          <span class="note" /> <!-- 注:外链请明确输入 http://或https://，文章则不需要输入 -->
        </el-form-item>
        <el-form-item :label="$t('ad.article')">
          <el-select v-model="article" placeholder="Select Article"> <!-- 请选择广告类型 -->
            <el-option
              v-for="item in allArticle"
              :key="item.ID"
              :label="item.TITLE"
              :value="item.ID"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('ad.image')" prop="image">
          <Upload
            v-model="form.image"
            :request-route="'v1/ad/upload'"
            :default-image-url="defaultImageUrl"
            width="400px"
            height="160px"
            @on-success="handleSuccess"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="submitButtonStat" @click="onSubmit">{{ $t('common.save') }}</el-button>
        </el-form-item>
        </el-form-item></el-form>
    </div>
  </div>
</template>

<script>
import { fetchDetail, fetchEdit, fetchAdd, fetchAddSelectList } from '@/api/ad'
import tool from '@/utils/tool'
import Upload from '@/components/Upload'
import ElementUI from 'element-ui'
export default {
  name: 'RoleAdd',
  components: { Upload },
  data() {
    return {
      allLocation: null,
      form: {
        content: '',
        image: '',
        lid: '',
        title: '',
        type: ''
      },
      url: '',
      article: '',
      allArticle: '',
      loading: false,
      submitButtonStat: false,
      defaultImageUrl: null
    }
  },
  watch: {
    'form.type': {
      deep: true,
      handler: function handler(modern) {
        if (modern === '1') {
          this.article = ''
        } else {
          this.url = ''
        }
      }
    }
  },
  mounted() {
    console.log('roue.name--->'+this.$route.name)
    if (this.$route.name === 'ad-edit') {
      fetchDetail(this.$route.params.ID).then(response => {
        this.form.title = response.data.oneData.TITLE
        this.allLocation = response.data.allLocation
        this.form.lid = response.data.oneData.LID
        this.form.type = response.data.oneData.TYPE
        this.allArticle = response.data.allArticle
        this.form.image = response.data.oneData.IMAGE
        this.form.content = response.data.oneData.CONTENT
        this.defaultImageUrl = response.data.oneData.IMAGE
        if (response.data.oneData.TYPE === '1') {
          this.url = response.data.oneData.CONTENT
        } else {
          this.article = response.data.oneData.CONTENT
        }
        this.loading = false
      }).catch((error) => {
          ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
      })
    } else {
      fetchAddSelectList().then(response => {
        this.allLocation = response.data.allLocation
        this.allArticle = response.data.allArticle

        this.loading = false
      }).catch((error) => {
          ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
          this.loading = false
      })
    }
  },
  methods: {
    onSubmit() {
      this.form.content = this.form.type === '1' ? this.url : this.article
      this.submitButtonStat = true
      if (this.$route.name === 'ad-edit') {
        fetchEdit(this.$route.params.ID, this.form).then(response => {
          this.submitButtonStat = false
          this.$message({
            message: response.data,
            type: "$t('common.successfully')"
          })
          this.$router.go(-1)
       }).catch((error) => {
           ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
       })
      } else {
        //console.log(this.form)
        fetchAdd(this.form).then(response => {
          this.submitButtonStat = false
          this.$message({
            message: response.data,
            type: 'success'
          })
          this.$router.go(-1)
        }).catch((error) => {
            ElementUI.Message({type: 'error', message: error.message, showClose: true, duration: 0})
        })
      }
    },
    handleSuccess(imageUrl) {
      this.imageAd = imageUrl
      this.form.image =imageUrl
      this.defaultImageUrl = tool.getArImage(imageUrl, '/files/')
    }
  }
}
</script>

  <style scoped>

  </style>