<template>
<a
-modal
title="新增Partner"
:width="900"
:visible="visible"
:confirm
Loading="confirm
Loading"
@ok="handleSubmit"
@cancel="handleCancel"
>
<a
-spin :spinning="confirm
Loading">
<a
-form :form="form" :rules="rules">
<a
-form
-item
label="编码"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has
-feedback
>
<a
-input placeholder="请输入编码" v
-decorator="['code', {rules: [{required: true, message: '请输入编码！'}]}]" />
</a
-form
-item>
<a
-form
-item
label="名称"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has
-feedback
>
<a
-input placeholder="请输入名称" v
-decorator="['name', {rules: [{required: true, message: '请输入名称！'}]}]" />
</a
-form
-item>
<a
-form
-item
label="logo"
prop="logo"
:rules="{required:true,validator:this.
uploadLogoChange,trigger: 'change'}"
:required="true"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has
-feedback
>
<a
-upload
:customRequest="customRequest"
:before
Upload="before
Upload"
:multiple="false"
:show
UploadList="false"
:fileList="logo"
acccept="image/*"
maxCount="1">
<a
-button> <a
-icon type="
upload" />
上传logo </a
-button>
</a
-upload>
</a
-form
-item>
<a
-form
-item
label="网址"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has
-feedback
>
<a
-input placeholder="请输入网址" v
-decorator="['url', {rules: [{required: true, message: '请输入网址！'}]}]" />
</a
-form
-item>
<a
-form
-item
label="描述"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has
-feedback
>
<a
-input placeholder="请输入描述" v
-decorator="['description', {rules: [{required: true, message: '请输入描述！'}]}]" />
</a
-form
-item>
<a
-form
-item
label="product"
:rules="{required:true,validator:this.
uploadProductChange,trigger: ['change']}"
:required="true"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has
-feedback
>
<a
-upload
:customRequest="customRequest"
:before
Upload="before
Upload"
:multiple="false"
:show
UploadList="false"
:fileList="product"
acccept="image/*"
maxCount="1">
<a
-button icon="up
-circle">
上传product</a
-button>
</a
-upload>
</a
-form
-item>
<a
-form
-item label="分类" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a
-radio
-group v
-decorator="['clasIndustries',{rules: [{ required: true, message: '请选择分类' }], initialValue: '1'}]">
<a
-radio
-button v
-for="(item,index) in typeDictTypeDropDown" :key="index" :value="item.code">
{{ item.value }}</a
-radio
-button>
</a
-radio
-group>
</a
-form
-item>
<a
-form
-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="排序"
>
<a
-input
-number placeholder="请输入排序" style="width: 100%" v
-decorator="['sort', { initialValue: 100 }]" :min="1" :max="1000" />
</a
-form
-item>
<a
-form
-item
label="备注"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has
-feedback
>
<a
-textarea :rows="4" placeholder="请输入备注" v
-decorator="['remark']"></a
-textarea>
</a
-form
-item>
</a
-form>
</a
-spin>
</a
-modal>
</template>
<script>
import { sysPartnerAdd } from '@/api/modular/system/partnerManage'
import { sysDictTypeDropDown } from '@/api/modular/system/dictManage'
export default {
data () {
return {
labelCol: {
xs: { span: 24 },
sm: { span: 5 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 15 }
},
rules: {},
logo: [],
product: [],
typeDictTypeDropDown: [],
visible: false,
confirm
Loading: false,
form: this.$form.createForm(this)
}
},
methods: {
// 初始化方法
add (record) {
this.sysDictTypeDropDown()
this.visible = true
},
sysDictTypeDropDown() {
sysDictTypeDropDown({
code: 'language'
}).then((res) => {
this.typeDictTypeDropDown = res.data
})
},
before
Upload(file, fileList) {
this.confirm
Loading = true
},
customRequest({ file, onSuccess, onError }) {
const formData = new FormData()
formData.append('file', file)
sysPartnerAdd(formData).then((res) => {
if (res.success) {
this.$message.success('
上传成功')
onSuccess(res)
} else {
this.$message.error('
上传失败：' + res.message)
onError(new Error(res.message))
}
}).catch((error) => {
this.$message.error('
上传失败：' + error.message)
onError(error)
}).finally(() => {
this.confirm
Loading = false
})
},
handleSubmit () {
const { form: { validateFields } } = this
this.confirm
Loading = true
validateFields((errors, values) => {
if (!errors) {
sysPartnerAdd(values).then((res) => {
if (res.success) {
this.$message.success('新增成功')
this.visible = false
this.confirm
Loading = false
this.$emit('ok', values)
this.form.resetFields()
} else {
this.$message.error('新增失败：' + res.message)
}
}).finally((res) => {
this.confirm
Loading = false
})
} else {
this.confirm
Loading = false
}
})
},
handleCancel () {
this.form.resetFields()
this.visible = false
},
uploadLogoChange(rule, value, callback) {
console.log(rule, value, callback)
callback(this.logo.length ? undefined : '请
上传文件')
},
uploadProductChange(rule, value, callback) {
if (this.product.length === 0) {
callback(new Error('
上传产品！'))
} else {
callback()
}
}
}
}
</script>
代码中a
-upload 必填校验
在使用Vue的AntDesign组件时，发现a-card的loading属性为true会导致a-upload上传文件时无法获取服务器返回数据。去掉loading属性后，上传功能恢复正常。
扫一扫
3669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
