merchant/src/pages/subPages/view.vue

<template>
<el-container direction="vertical">
    <!-- <div style="margin:10px 0;">
        <el-input placeholder="ip" style="width:182px;margin-right:10px" v-model="ip"></el-input>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button type="success" @click="addIp">新增</el-button>
    </div> -->
    <div style="margin-bottom:10px">
        <el-button type="primary" plain @click="add" size="small">添加ip</el-button>
    </div>
    <el-table :data="tableData" 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" prop="alias" label="状态">
            <el-tag type="info" disabled>禁用</el-tag>
            <el-tag type="success">已启用</el-tag>
        </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-row style="margin-top:10px;" type="flex" justify="end">
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="onPageChange" :current-page="pageNumber"></el-pagination>
    </el-row> -->

    <!-- 添加ip弹层 -->
    <el-dialog title="添加ip白名单" :visible.sync="dialogFormVisible">
        <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-item >
                <el-button type="primary" @click="onSubmit('ipFormData')">确定</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</el-container>
</template>

<script>
// getIpList获取Ip列表 delIpList-删除 addIp-添加
import {
    getIpList,
    delIpList,
    addIp
} from "@/api";
export default {
    name: 'pageView',
    data() {
        return {
            pageSize: 10,
            pageNumber: 1,
            // cabinetValue: "",
            // cabinetOptions: [],
            // boxOptions: [],
            // boxValue: "",
            tableData: [
                // {ip: 123},
                // {ip: 456},
                // {ip: 789},
                // {ip: 123},
            ],
            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
        };
    },
    created() {
        this.getIpList();
    },
    computed: {
        // disSearch() {
        //     return this.boxValue != "" && this.cabinetValue == "";
        // },
    },
    methods: {
        // onChangeCabinet(value) {
        //     if (value) {
        //         // this.getBoxList();
        //     }
        //     console.log(value);
        // },
        // 获取Ip列表
        async getIpList() {
            const res = await getIpList()
            console.log('获取ip列表', res);
            this.tableData = res.datas

        },
        // 删除
        del(idx) {
            console.log('idx', idx);
            // 提示
            this.$confirm("确认删除该ip?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(async () => {
                // 调用删除接口
                const res = await delIpList({ip_key: idx})
                console.log('删除ip', res);
                if (res.code == 200) {
                    // 提示
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    // 获取列表
                    this.getIpList()
                }
            })
            .catch(() => {
                return false;
            });
        },
        // 添加
        add() {
            this.ipFormData.name = ''
            this.$refs.ipFormData.resetFields()
            this.dialogFormVisible = true
        },
        // 确定添加
        onSubmit(formName) {
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    if (this.tableData.length > 0) {
                        this.tableData.forEach(item => {
                            this.repeatIp = item.ip == 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.getIpList()
                        this.dialogFormVisible = false
                        this.ipFormData.name = ''
                    }
                }
            });
        }
        // 新增
        // 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.tableData = res.data.rows;
        //         }
        //     });
        // }
    },
};
</script>

<style scoped>
</style>