qimall/addons/JoinPay/backend/views/components/more-merchant.php

<template id="more-merchant">
    <div class="more-merchant">
        <el-dialog append-to-body title="添加商户" :visible.sync="visible" :close-on-click-modal="false"
                    custom-class="more-merchant-dialog" width="35%">
            <el-form :model="ruleForm" ref="ruleForm" size="small" label-width="180px">
                <el-form-item :prop="item.key" :label="item.title" :rules="{required: item.required != undefined && item.required, message: '请输入' + item.title}" v-for="item in fields" :key="item.key">
                    <el-input v-model="ruleForm[item.key]" :placeholder="item.placeholder != undefined ? item.placeholder : item.title"></el-input>
                </el-form-item>
                <p :class="{tips: true, shake: validateError}" v-if="bottomTips != ''">{{bottomTips}}</p>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="visible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="confirm" :loading="submitLoading">确 定</el-button>
            </span>
        </el-dialog>
        <el-button type="primary" size="mini" @click="click">添加商户</el-button>
        <el-table :data="value" size="mini" border style="margin-top: 15px;" :style="{marginTop: '15px', width: (fields.length * 250) + 320 + 'px'}">
            <el-table-column prop="merchant_id" label="商户ID" width="200"></el-table-column>
            <el-table-column :prop="item.key" :key="item.key" :label="item.title" v-for="item in fields"></el-table-column>
            <el-table-column prop="opt" label="操作" width="120" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleEdit(scope.$index, scope.row)" :disabled="scope.row.is_sys != undefined && scope.row.is_sys">编辑</el-button>
                    <el-button type="text" @click="handleDelete(scope.$index)" :disabled="scope.row.is_sys != undefined && scope.row.is_sys">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    Vue.component('more-merchant', {
        template: '#more-merchant',
        props: {
            value: {
                type: Array,
                default: []
            },
            fields: {
                type: Array,
                default: []
            },
            bottomTips: {
                type: String,
                default: ''
            },
            validate: null
        },
        data() {
            return {
                visible: false,
                submitLoading: false,
                validateError: false,
                editIndex: null,
                ruleForm: {}
            };
        },
        methods: {
            click() {
                this.initForm();
                this.visible = !this.visible;
            },
            initForm() {
                this.$set(this.ruleForm, 'merchant_id', '');
                if(this.fields.length > 0) {
                    this.fields.forEach(item => {
                        this.$set(this.ruleForm, item.key, '');
                    });
                }
            },
            confirm() {
                if (this.validate != undefined && !this.validate(this.ruleForm)) {
                    this.testShakeController();
                    return false;
                }
                this.$refs['ruleForm'].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    if (this.ruleForm.merchant_id == '') {
                        this.submitLoading = true;
                        request({
                            method: 'get',
                            params: { r: 'join-pay/default/get-merchant-id'}
                        }).then(res => {
                            this.submitLoading = false;
                            if(res.data.code == 0) {
                                if(res.data.data != undefined && res.data.data != '') {
                                    this.ruleForm.merchant_id = res.data.data;
                                    this.value.push(JSON.parse(JSON.stringify(this.ruleForm)));
                                    this.visible = false;
                                    this.initForm();
                                    this.$refs.ruleForm.resetFields();
                                    this.$emit('input', this.value);
                                }
                            }else { 
                                this.$message.error(res.data.msg);
                            }
                        })
                    }else {
                        this.$set(this.value, this.editIndex, JSON.parse(JSON.stringify(this.ruleForm)));
                        this.visible = false;
                        this.initForm();
                        this.$refs.ruleForm.resetFields();
                        this.$emit('input', this.value);
                    }
                });
            },
            handleEdit(index, row) {
                this.visible = !this.visible;
                this.editIndex = index;
                this.ruleForm = JSON.parse(JSON.stringify(row));
            },
            handleDelete(index) {
                this.value.splice(index, 1);
                this.$emit('input', this.value);
            },
            testShakeController() {
                this.validateError = true;
                setTimeout(() => this.validateError = false, 800);
            }
        }
    });
</script>
<style lang="scss" scoped>
    .el-table__body-wrapper {
        height: auto !important;
    }
    .more-merchant-dialog{
        .el-pagination {
            display: flex;
            justify-content: flex-end;
            margin-top: 8px;
        }
        .el-input {
            max-width: 350px;
        }
        .tips {
            padding: 0 65px;
            color: #F44336;
            display: block;
        }
        .shake {
            animation: shake 0.5s 1;
        }
    }
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
        20%, 40%, 60%, 80% { transform: translateX(5px); }
    }
</style>