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

<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="120px">
                <el-form-item label="标题" prop="title">
                    <el-col :span="12">
                        <el-input v-model="form.title" maxlength="24" 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 label="汇款方姓名" prop="name">
                    <el-col :span="12">
                        <el-input v-model="form.name" placeholder="请输入汇款方姓名"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="汇款方账号" prop="account_num">
                    <el-col :span="12">
                        <el-input v-model="form.account_num" placeholder="请输入汇款方支付宝账号"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="汇款金额" prop="amount">
                    <el-col :span="12">
                        <el-input v-model="form.amount" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入汇款金额"></el-input>
                    </el-col>
                </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="account_type">
                    <el-row>
                        <el-col :span="12">
                            <el-radio-group v-model="form.account_type">
                                <el-radio :label="1">打款</el-radio>
                                <el-radio :label="2">出款</el-radio>
                            </el-radio-group>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <div style="display: flex;flex-direction: column;">
                                <span>打款：从企业账户打款到记帐本，再从记帐本打款到个人账户</span>
                                <span>出款：仅从记帐本打款到个人账户</span>
                            </div>
                        </el-col>
                    </el-row>
                </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 validateAmount = (rule, value, callback) => {
        if (String(value).indexOf(".") != -1 && String(value).split('.').length > 2) {
            callback(new Error('请输入正确格式的金额')) // 防止输入多个小数点
        }
        if (String(value).indexOf(".") != -1 && String(value).split('.')[1].length > 2) {
            callback(new Error('请输入正确的小数位数')) // 小数点后两位
        }
        callback()
    }

    const app = new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    account_type: 1,
                    users: [{}],
                },
                addBtn: true,
                loading: false,
                btnLoading: false,
                book: [],
                rules: {
                    title: [
                        {
                            required: true,
                            message: '请输入标题'
                        },   
                    ],
                    batch_num: [
                        {
                            required: true,
                            message: '请输入批次号'
                        },
                    ],
                    account_id: [
                        {
                            required: true,
                            message: '请选择记账方'
                        },
                    ],
                    name: [
                        {
                            required: true,
                            message: '请输入汇款方信息'
                        },
                    ],
                    account_num: [
                        {
                            required: true,
                            message: '请选择汇款方'
                        },
                    ],
                    account_type: [
                        {
                            required: true,
                            message: '请选择汇款类型'
                        }
                    ],
                    amount: [
                        {
                            required: true,
                            message: '请输入正确的汇款金额'
                        },
                        {
                            validator: validateAmount,
                            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>