guns-separation/_web/src/views/homeManager/editBannerForm.vue

<template>
  <a-modal
    title="编辑banner"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="formLoading">
      <a-form :form="form">
        <a-form-item
          style="display: none;"
        >
          <a-input v-decorator="['bannerId']" />
        </a-form-item>
        <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input
            placeholder="请输入名称"
            v-decorator="['bannerName', {rules: [{required: true, message: '请输入名称！'}]}]"
          />
        </a-form-item>
        <a-form-item label="跳转方式" :labelCol="labelCol" :wrapperCol="wrapperCol" :required="true">
          <a-radio-group name="bannerType" v-decorator="['bannerType']" @change="changeType">
            <a-radio :value="0">无</a-radio>
            <a-radio :value="1">站内文章</a-radio>
            <a-radio :value="2">外部链接</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          :required="true"
          v-show="bannerType==1"
          label="选择文章"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-select
            style="width: 100%"
            placeholder="请选择文章"
            v-decorator="['bannerTypeUrl', {rules: [{validator: checkUrl}]}]"
          >
            <a-select-option
              v-for="(item,index) in actionClassData"
              :key="index"
              :value="item.articleContentId"
            >{{ item.articleContentTitle }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          :required="true"
          v-show="bannerType==2"
          label="跳转链接Url"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input
            placeholder="请输入跳转链接"
            v-decorator="['bannerTypeUrl', {rules: [{validator: checkUrl}]}]"
          />
        </a-form-item>
        <a-form-item
          label="图片"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
          :required="true"
        >
          <div>
            <upload-component
              ref="upLoadRef"
              :remarkTxt="remarkTxt"
              @uploadSuccess="uploadSuccess"
              v-decorator="[
                'bannerImage',
                {
                  trigger: 'change',
                  rules: [{ validator: checkimageUrl }]
                },
              ]"
            ></upload-component>
          </div>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="排序"
          :hasFeedback="true"
          :required="true"
        >
          <a-input
            placeholder="请输入排序号"
            v-decorator="['bannerSort', {rules: [{validator: checkSortIndex}]}]"
          />
        </a-form-item>
        <a-form-item label="是否上线" :labelCol="labelCol" :wrapperCol="wrapperCol" :required="true">
          <a-radio-group name="bannerIsLine" v-decorator="['bannerIsLine']">
            <a-radio :value="1">上线</a-radio>
            <a-radio :value="0">下线</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import homeApi from '@/api/homeApi'
import uploadComponent from '@/components/upLoad'
import { checkUrl } from '@/utils/util'

  export default {
    components: { uploadComponent },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        visible: false,
        confirmLoading: false,
        actionClassData: [],
        formLoading: false,
        form: this.$form.createForm(this),
        bannerType: 0,
        remarkTxt: '请上传1920×712规格图像'
      }
    },
    methods: {
      // 初始化方法
      edit (record) {
        this.visible = true
        this.formLoading = true
        this.getActionClass()
        setTimeout(() => {
          if (record.bannerType === 1) {
            record.bannerTypeUrl = JSON.parse(record.bannerTypeUrl).articleContentId
          }
          this.form.setFieldsValue(
            {
              bannerId: record.bannerId,
              bannerName: record.bannerName,
              bannerImage: record.bannerImage,
              bannerIsLine: record.bannerIsLine,
              bannerSort: record.bannerSort,
              bannerTypeUrl: record.bannerTypeUrl,
              bannerType: record.bannerType
            }
          )
          this.bannerType = record.bannerType
          this.$nextTick(() => {
            this.$refs.upLoadRef.initData([record.bannerImage])
          })
        }, 100)
      },
      /**
       * 获取选择器下拉框数据
       */
      getActionClass () {
        homeApi.findArticleAll().then((res) => {
          this.formLoading = false
          if (res.status === 200) {
            this.actionClassData = res.data
          } else {
            this.$message.error('获取文章列表数据失败')
          }
        })
      },
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            values.bannerSort = parseInt(values.bannerSort)
            if (!values.bannerTypeUrl) {
              values.bannerTypeUrl = ''
            }
            homeApi.updateBanner(values).then((res) => {
              if (res.status === 200) {
                this.$message.success('编辑成功')
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
              } else {
                this.$message.error('编辑失败：' + res.message)
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
      },
      changeType (val) {
        this.$nextTick(() => {
          this.bannerType = this.form.getFieldValue('bannerType')
          this.form.resetFields('bannerTypeUrl')
          if (this.bannerType === 2) {
            this.form.setFieldsValue({ 'bannerTypeUrl': 'http://' })
          } else {
            this.form.setFieldsValue({ 'bannerTypeUrl': '' })
          }
        })
      },
      uploadSuccess (avg) {
        if (avg.fileList[0]) {
          this.form.resetFields('bannerImage')
          this.form.setFieldsValue({ 'bannerImage': avg.fileList[0].uri })
        }
      },
      checkimageUrl (rule, value, callback) {
        if (value && value.length > 0) {
          callback()
          return
        }
        var text = '请上传图片'
        callback(text)
      },
      checkUrl (rule, value, callback) {
        var text = '请输入跳转链接！'
        if (this.bannerType === 1) {
          text = '请选择文章！'
          if (!value) {
            callback(text)
          } else {
            callback()
          }
        } else if (this.bannerType === 2) {
          if (!value) {
            callback(text)
          } else if (checkUrl(value)) {
            callback()
          } else {
            text = '请输入正确的url地址'
            callback(text)
          }
        } else {
          callback()
        }
      },
      checkSortIndex (rule, value, callback) {
        var text = '请输入排序号！'
        if (!value) {
          callback(text)
        } else if (/(^[1-9]\d*$)/.test(value)) {
          callback()
        } else {
          text = '请输入数字'
          callback(text)
        }
      }
    }
  }
</script>