merchant/src/pages/subPages/view.vue

<template>
<el-container direction="vertical">
    <!-- <div style="margin-bottom:10px">
        <el-button type="primary" plain @click="add" size="small">添加ip</el-button>
    </div>
    <el-table :data="ipList" border style="width: 100%">
        <el-table-column align="center" type="index" width="50" label="序号" />
        <el-table-column align="center" prop="ip" label="IP"></el-table-column>
        <el-table-column align="center" label="操作">
            <template slot-scope="scope">
                <el-button type="danger" plain @click="del(scope.$index)" size="small">删除</el-button>
                <el-tag type="danger" @click="del(scope.$index)">删除</el-tag>
            </template>
        </el-table-column>
    </el-table> -->
    <el-form label-width="120px">
        <el-form-item label="商户号：">
            {{merchantsCode}}
        </el-form-item>
        <el-form-item label="商户名称：">
            {{merchantsName}}
        </el-form-item>
        <el-form-item label="余额预警：">
            {{alarm_amount}}
        </el-form-item>
        <el-form-item label="密钥设置：">
            <el-input v-model="securityKey" autocomplete="off" style="width: 300px;margin-right:10px"></el-input>
            <el-button type="primary" size="small" @click="updateKey">确定</el-button>
        </el-form-item>
        <el-form-item label="ip白名单：" >
            <div v-for="(item, idx) in ipList" :key="item">
                <el-input style="width: 300px;margin-bottom: 10px;margin-right: 10px;" :value="item"></el-input>
                <i v-if="idx == 0" class="el-icon-circle-plus-outline" style="color:#409EFF;" @click="add"></i>
                <i v-else class="el-icon-remove-outline" style="color:#F56C6C;" @click="del(item)"></i>
            </div>
        </el-form-item>
    </el-form>
    <!-- 添加ip弹层 -->
    <el-dialog title="添加ip白名单" :visible="dialogFormVisible" @close="btnCancle">
        <el-form :model="ipFormData" :rules="rules" ref="ipFormData" label-width="80px">
            <el-form-item label="ip" prop="name">
                <el-input v-model="ipFormData.name" autocomplete="off" style="width: 300px"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="btnCancle">取 消</el-button>
            <el-button type="primary" @click="onSubmit('ipFormData')">确 定</el-button>
        </span>
    </el-dialog>
</el-container>
</template>

<script>
// getIpList获取Ip列表 delIpList-删除 addIp-添加 getUserInfo-用户信息
import {
    // getIpList,
    delIpList,
    addIp,
    getUserInfo,
    updateKey
} from "@/api";
export default {
    name: 'pageView',
    data() {
        return {
            pageSize: 10,
            pageNumber: 1,
            ipList: [],
            total: 0,
            // ip
            ip: null,
            // ip弹层
            dialogFormVisible: false,
            // 新增ip数据
            ipFormData: {
                name: ''
            },
            // 表单校验
            rules: {
                name: [
                    { required: true, message: '请输入ip', trigger: 'blur' },
                    { pattern: /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/, message:'请输入合法ip', trigger: 'blur' }
                ]
            },
            repeatIp: false,
            // 商户号
            merchantsCode: '',
            // 商户名称
            merchantsName: '',
            // 余额预警
            alarm_amount: '',
            // 密钥
            securityKey: ''
        };
    },
    created() {
        // this.getIpList();
        this.getUserInfo()
    },
    computed: {
    },
    methods: {
        // 获取Ip列表
        // async getIpList() {
        //     const res = await getIpList()
        //     console.log('获取ip列表', res);
        //     this.ipList = res.datas

        // },
        // 删除
        del(ip) {
            console.log('ip', ip);
            // 提示
            this.$confirm("确认删除该ip?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(async () => {
                // 调用删除接口
                const res = await delIpList({ip: ip})
                console.log('删除ip', res);
                if (res && res.code == 200) {
                    // 提示
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    // 获取列表
                    this.getUserInfo()
                }
            })
            .catch(() => {
                return false;
            });
        },
        // 添加
        add() {
            this.ipFormData.name = ''
            this.dialogFormVisible = true
        },
        // 关闭弹层
        btnCancle() {
            this.dialogFormVisible = false
            this.$refs.ipFormData.resetFields()
        },
        // 确定添加
        onSubmit(formName) {
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    console.log(valid);
                    if (this.ipList.length > 0) {
                        this.ipList.forEach(item => {
                            this.repeatIp = item.ip == this.ipFormData.name
                        })
                        this.repeatIp = this.ipList.find((item => item == this.ipFormData.name))
                    }
                    if (this.repeatIp) {
                        this.$message.error('该ip已存在')
                        return
                    }
                    // console.log('校验通过');
                    const res = await addIp(this.ipFormData.name)
                    console.log('添加ip', res);
                    if (res && res.code == 200) {
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        this.getUserInfo()
                        this.dialogFormVisible = false
                        this.ipFormData.name = ''
                    }
                }
            });
        },
        // 获取商户号
        async getUserInfo() {
            const res = await getUserInfo()
            console.log('个人中心', res);
            this.merchantsCode = res.datas.mchid
            this.merchantsName = res.datas.name
            this.ipList = res.datas.ips
            this.alarm_amount = res.datas.alarm_amount
        },
        // 设置密钥
        async updateKey() {
            const res = await updateKey(this.securityKey)
            console.log('密钥', res);
            if (res && res.code == 200) {
                this.$message.success('设置密钥成功')
            }
        }
        // 新增
        // addIp() {}
        // 分页
        // onPageChange(page) {
        //     if (page == this.pageNumber) {
        //         return;
        //     } else {
        //         this.pageNumber = page;
        //         setTimeout(() => {
        //             // this.getIpList();
        //         }, 0);
        //     }
        // },
        // 搜索
        // onSearch() {
        //     this.pageNumber = 1;
        //     setTimeout(() => {
        //         this.getIpList();
        //     }, 0);
        // },
        // getBoxList() {
        //     boxList({
        //         cabinet_number: this.cabinetValue
        //     }).then((res) => {
        //         if (res && res.msg == "ok") {
        //             this.boxOptions = res.data.rows;
        //         }
        //     });
        // },
        // getBoxActionList() {
        //     let box = this.boxValue ? this.boxValue : 0;
        //     boxActionList({
        //         cabinet_number: this.cabinetValue,
        //         box_number: box,
        //         pageSize: this.pageSize,
        //         pageNumber: this.pageNumber,
        //     }).then((res) => {
        //         console.log(res);
        //         if (res && res.msg == "ok") {
        //             this.total = res.data.total;
        //             this.ipList = res.data.rows;
        //         }
        //     });
        // }
    },
};
</script>

<style scoped>
.dialog-footer {
  display: block;
  text-align: center;
}
.dialog-footer .el-button {
    margin: 0 30px;

}
.el-icon-circle-plus-outline,
.el-icon-remove-outline {
    font-size: 25px;
    vertical-align: middle;
}
</style>