<template> 
 | 
    <GlobalWindow 
 | 
        :title="title" 
 | 
        width="500px" 
 | 
        :visible.sync="visible" 
 | 
        :confirm-working="isWorking" 
 | 
        @confirm="confirm" 
 | 
    > 
 | 
        <div class="dakuan"> 
 | 
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm"> 
 | 
                <el-form-item label="打款说明" prop="describe"> 
 | 
                    <el-input v-model="form.describe" placeholder="请输入"></el-input> 
 | 
                </el-form-item> 
 | 
                <el-form-item label="打款凭证" prop="multifileList"> 
 | 
                    <div style="width: 100%; display: flex; align-items: center;"> 
 | 
                        <el-upload 
 | 
                            :action="uploadImgUrl" 
 | 
                            list-type="picture-card" 
 | 
                            accept=".png,.jpg" 
 | 
                            :file-list="form.multifileList" 
 | 
                            :data="uploadData" 
 | 
                            :on-success="handleAvatarSuccess" 
 | 
                            :on-error="uploadError" 
 | 
                            :before-remove="removeRow"> 
 | 
                            <i class="el-icon-plus"></i> 
 | 
                        </el-upload> 
 | 
<!--                        <upload width="100px" height="100px" :list="[]" accept=".png,.jpg,.jpeg" folder="settle" @success="claimsUploadFile" />--> 
 | 
                    </div> 
 | 
                </el-form-item> 
 | 
            </el-form> 
 | 
        </div> 
 | 
    </GlobalWindow> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
    import BaseOpera from '@/components/base/BaseOpera' 
 | 
    import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
    import { payCash } from '@/api/business/settleRisk' 
 | 
    export default { 
 | 
        name: 'makePayment', 
 | 
        extends: BaseOpera, 
 | 
        components: { GlobalWindow }, 
 | 
        data () { 
 | 
            return { 
 | 
                uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/upload', 
 | 
                uploadData: { 
 | 
                    folder: 'settle' 
 | 
                }, 
 | 
                // 表单数据 
 | 
                form: { 
 | 
                    id: null, 
 | 
                    describe: '', 
 | 
                    multifileList: [] 
 | 
                }, 
 | 
                // 验证规则 
 | 
                rules: { 
 | 
                    describe: [ 
 | 
                        { required: true, message: '不能为空', trigger: 'blur' } 
 | 
                    ] 
 | 
                } 
 | 
            } 
 | 
        }, 
 | 
        methods: { 
 | 
            open(title, id) { 
 | 
                this.title = title 
 | 
                this.form.id = id 
 | 
                this.form.describe = '' 
 | 
                this.form.multifileList = [] 
 | 
                this.visible = true 
 | 
            }, 
 | 
            // 上传图片 
 | 
            handleAvatarSuccess(res) { 
 | 
                this.form.multifileList.push({...res.data, fileurl: res.data.imgaddr, name:res.data.originname}) 
 | 
            }, 
 | 
            uploadError() { 
 | 
                this.$tip.apiFailed('上传失败') 
 | 
            }, 
 | 
            removeRow(e) { 
 | 
                this.form.multifileList.forEach((item, index) => { 
 | 
                    if (item.imgaddr === e.imgaddr) { 
 | 
                        this.form.multifileList.splice(index, 1) 
 | 
                    } 
 | 
                }) 
 | 
            }, 
 | 
            confirm() { 
 | 
                this.$refs.form.validate((valid) => { 
 | 
                    if (valid) { 
 | 
                        this.isWorking = true 
 | 
                        payCash(this.form) 
 | 
                            .then(() => { 
 | 
                                this.visible = false 
 | 
                                this.$tip.apiSuccess('操作成功') 
 | 
                                this.$emit('success') 
 | 
                            }) 
 | 
                            .catch(e => { 
 | 
                                this.$tip.apiFailed(e) 
 | 
                            }) 
 | 
                            .finally(() => { 
 | 
                                this.isWorking = false 
 | 
                            }) 
 | 
                    } 
 | 
                }); 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scoped> 
 | 
    .dakuan { 
 | 
        width: 100%; 
 | 
  
 | 
    } 
 | 
</style> 
 |