TransFlow/src/views/general/VPN.vue

<template>
    <div class="content-box">
        <div class="container">
            <el-form ref="form" :model="sizeForm" label-width="140px">
                <p>系统服务VPN</p>
                <el-form-item label="状态：">
                    <el-col :span="0.9" style="diaplay: flex">
                        <div class="status" style="width: 10px; height: 10px; border-radius: 50%; background: green"></div>
                    </el-col>
                    <el-col :span="2" style="diaplay: flex">
                        <span style="margin-left: 10px">YES</span>
                    </el-col>
                </el-form-item>
                <el-form-item label="操作：">
                    <el-col :span="1">
                        <el-button type="primary" style="margin-left: 10px" size="small">开始</el-button>
                    </el-col>
                    <el-col :span="1">
                        <el-button type="danger" style="margin-left: 10px" size="small">停止</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="info" style="margin-left: 10px" size="small">显示日志</el-button>
                    </el-col>
                </el-form-item>
                <p>保护装置</p>
                <el-form-item label="配置文件：">
                    <el-col :span="1">
                        <el-button type="primary" size="small">上传</el-button>
                    </el-col>
                    <el-col :span="4">
                        <el-upload
                            class="upload-demo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="3"
                            :on-exceed="handleExceed"
                            :file-list="fileList"
                        >
                            <el-button size="small" type="primary">选择文件</el-button>
                        </el-upload>
                    </el-col>
                </el-form-item>
                <el-form-item label="配置上载：">
                  <el-col :span="0.9" style="diaplay: flex">
                        <div class="status" style="width: 10px; height: 10px; border-radius: 50%; background: red"></div>
                    </el-col>
                    <el-col :span="2" style="diaplay: flex">
                        <span style="margin-left: 10px">NO</span>
                    </el-col>
                </el-form-item>
                <p>开放VPN</p>
                <el-form-item label="配置文件：">
                    <el-col :span="1">
                        <el-button type="primary" size="small">上传</el-button>
                    </el-col>
                    <el-col :span="4">
                        <el-upload
                            class="upload-demo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="3"
                            :on-exceed="handleExceed"
                            :file-list="fileList"
                        >
                            <el-button size="small" type="primary">选择文件</el-button>
                        </el-upload>
                    </el-col>
                </el-form-item>
                <el-form-item label="配置上载：">
                  <el-col :span="0.9" style="diaplay: flex">
                        <div class="status" style="width: 10px; height: 10px; border-radius: 50%; background: red"></div>
                    </el-col>
                    <el-col :span="2" style="diaplay: flex">
                        <span style="margin-left: 10px">NO</span>
                    </el-col>
                </el-form-item>
                <p>资格证书</p>
                <el-form-item label="操作：">
                    <el-col :span="12">
                        <el-button type="primary" @click="handleagain()" size="small">设置凭据</el-button>
                    </el-col>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
  
  <script>
export default {
    data() {
        return {
            sizeForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            fileList: []
        };
    },
    methods: {
        handleagain() {
            this.$confirm('此操作将重新启动系统, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    // this.$message({
                    //   type: 'success',
                    //   message: '删除成功!'
                    // });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
        },
        handleReset() {
            this.$confirm('此操作将重置默认值, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    // this.$message({
                    //   type: 'success',
                    //   message: '删除成功!'
                    // });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消重置'
                    });
                });
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
            );
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        }
    }
};
</script>
  
<style lang="scss" scoped>
  /deep/ .el-form-item__content {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
/deep/ .el-form-item__label {
    text-align: left;
    font-size: 16px;
}
.container {
    width: 100%;
    height: 100%;
    p {
        width: 95%;
        font-size: 25px;
        text-align: left;
        border-bottom: 1px solid black;
        margin-bottom: 20px;
    }
}
</style>