qimall/addons/AvoidTax/backend/views/order/add.php.back

<div id="app" v-cloak>
    <el-card class="box-card" v-loading="loading" shadow="never" style="border:0;min-width: 1200px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>添加交易</span>
            </div>
        </div>

        <div class="table-body">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="标题" prop="title">
                    <el-col :span="12">
                        <el-input v-model="form.title" placeholder="请输入标题"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="批次号" prop="batch_num">
                    <el-col :span="12">
                        <el-input v-model="form.batch_num" placeholder="请输入批次号"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item class="users-title">
                    <span class="users-title-name">姓名</span>
                    <span class="users-title-name">支付宝账号</span>
                    <span class="users-title-name">汇款金额</span>
                    <span></span>
                </el-form-item>

                <el-form-item label="汇款方" class="transaction" v-for="(item, key) in form.users" prop="users">
                    <el-input v-model="item.name" placeholder="请输入姓名"></el-input>
                    <el-input v-model="item.account" placeholder="请输入支付宝账号"></el-input>
                    <el-input v-model="item.amount" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入汇款金额"></el-input>
                    <span class="transaction-del" @click="del(key)" v-if="form.users.length > 1">删除</span>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" size="small" @click="add" v-if="form.users.length < 10">新增汇款方</el-button>
                </el-form-item>

                <el-form-item label="记账方" prop="account_id">
                    <el-select v-model="form.account_id" placeholder="请选择">
                        <el-option
                            v-for="item in book"
                            :key="item.id"
                            :label="item.alipay_logon_id"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="汇款原因" prop="remarks">
                    <el-col :span="12">
                        <el-input type="textarea" v-model="form.remarks" placeholder="请输入汇款原因" rows="2"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item>
                    <el-button type="success" v-loading="btnLoading" :disabled="btnLoading" @click="submit('form')">确认汇款</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
</div>

<script>
    const validateUsers = (rule, value, callback) => {
        value.forEach((item) => {
            if (!item.name || item.name == '') {
                callback(new Error('汇款方信息有误'))
            }
            if (!item.account || item.account == '') {
                callback(new Error('汇款方信息有误'))
            }
            if (!item.amount || item.amount <= 0) {
                callback(new Error('汇款方信息有误'))
            }
            if (String(item.amount).indexOf(".") != -1 && String(item.amount).split('.').length > 2) {
                callback(new Error('请输入正确格式的金额')) // 防止输入多个小数点
            }
            if (String(item.amount).indexOf(".") != -1 && String(item.amount).split('.')[1].length > 2) {
                callback(new Error('请输入正确的小数位数')) // 小数点后两位
            }
        })
        callback()
    }

    const app = new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    users: [{}],
                },
                addBtn: true,
                loading: false,
                btnLoading: false,
                book: [],
                rules: {
                    title: [
                        {
                            required: true,
                            message: '请输入标题'
                        },   
                    ],
                    batch_num: [
                        {
                            required: true,
                            message: '请输入批次号'
                        },
                    ],
                    account_id: [
                        {
                            required: true,
                            message: '请选择记账方'
                        },
                    ],
                    users: [
                        {
                            required: true,
                            message: '汇款方信息有误'
                        },
                        {
                            validator: validateUsers,
                            message: '汇款方信息有误'
                        }
                    ],
                },
            }
        },
        mounted: function() {
            this.getBatchNum()
            this.getBookList()
        },
        methods: {
            // 添加条件
            add() {
                if (this.form.users.length >= 10) {
                    return
                }
                this.form.users.push({})
            },
            // 删除条件
            del(key) {
                let users = this.form.users.filter((item, index) => {
                    return index != key
                })
                this.form.users = users
            },
            // 保存
            submit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var self = this
                        self.btnLoading = true;
                        request({
                            params: {
                                r: 'avoid-tax/order/add',
                            },
                            method: 'post',
                            data: {
                                data: self.form
                            }
                        }).then(e => {
                            if (e.data.code == 0) {
                                self.$message.success(e.data.msg);
                                setTimeout(() => {
                                    navigateTo({
                                        r: 'avoid-tax/order/index',
                                    })
                                }, 1500)
                            } else {
                                self.$message.error(e.data.msg);
                                self.btnLoading = false;
                            }
                        }).catch(e => {
                            self.$message.error(e);
                            self.btnLoading = false;
                        })
                    } else {
                        console.log(valid)
                    }
                })
            },
            // getBatchNum
            getBatchNum () {
                var self = this
                request({
                    params: {
                        r: 'avoid-tax/order/batch-num',
                    },
                }).then(e => {
                    if (e.data.code == 0) {
                        Vue.set(self.form, 'batch_num', e.data.data)
                    }
                }).catch(e => {
                })
            },
            // 获取book
            getBookList () {
                var self = this
                request({
                    params: {
                        r: 'avoid-tax/order/book-list',
                    },
                }).then(e => {
                    if (e.data.code == 0) {
                        self.book = e.data.data
                    }
                }).catch(e => {
                })
            },
        },
    });
</script>
<style>
    
    .transaction .el-input {
        /* display: flex; */
        width: 30%;
    }

    .transaction-del {
        margin-left: 10px;
        cursor: pointer;
    }

    .users-title {
        margin-bottom: 5px;
    }

    .users-title .el-form-item__content {
        display: flex;
    }

    .users-title .el-form-item__content {
        line-height: normal;
    }
    .users-title-name {
        width: 30%;
        text-align: center;
    }

    .users-title-name + .users-title-name {
        margin-left: 5px;
    }
</style>