spfm-market-front/src/pages/main/firewall/index.vue

<template>
    <div class="flex-box">
        <!-- v-show="lable.name === 'first'" -->
        <div class="flex-header" :span="24">
            <Tabs :tabList="tabList" @status="clickTabTops" />
            <el-button type="primary" @click="clickNewTag" v-show="lableTable.name === 'first'">+新建</el-button>
        </div>
        <div class="flex-count">
            <Table @clickDemand="clickDemand" :list="lableTable" ref="TableList" @changeNum="changeNum">
            </Table>
        </div>
        <el-dialog v-if="dialogStatus" :before-close="clickClose" :title="dialogTitle + '需求'" :visible.sync="dialogStatus"
            width="100%" :modal="false" style="display: flex; flex-direction: column">
            <!-- 后期维护 -->
            <div style="position: fixed; z-index: 99">
                <el-button type="primary" v-if="startStatus" @click="clickHandles">处理</el-button>
                <el-button type="primary" v-if="closeStatus" @click="clickClose">关闭</el-button>
                <el-button type="primary" v-if="saveStatus" @click="clickSave">保存</el-button>
            </div>
            <FormTable :list="fromList" :disabled="disabled" class="flex-form" ref="formTable" />
            <div>
                <div class="table-title">流程追踪</div>
                <div v-if="abc == true">
                    <Tables :list="lables"></Tables>
                </div>
            </div>
        </el-dialog>
        <div v-if="destroy">
            <el-dialog title="处理操作" width="100%" :visible.sync="handleStatus" :before-close="handleCloses" :modal="false"
                v-if="handleStatus" :destroy-on-close="true">
                <Workflow ref="workflow" :list="fromList" v-if="isWorkflowStatus == true" @updateForm="beforeClose"
                    :requestForm="requestForm" :adminResourceId="adminResourceId" />
                <WorkflowEntrance :list="fromList" v-else :lastManList="lastManList" @beforeClose="beforeClose"
                    :requestForm="requestForm" />
            </el-dialog>
        </div>

    </div>
</template>
<script>
import Workflow from "../../../components/workflowBase";
import WorkflowEntrance from "../../../components/workflowEntrance";
import Tabs from "../../../components/el-tabs.vue";
import Table from "../../../components/el-form.vue";
import Tables from "../../../components/el-forms.vue";
import FormTable from "./formTable.vue";
import { updateBase } from "../../../http/api.js";
import {
    getTodoBase,
    getDoneBase,
    getInitiateBase,
} from "../../../http/api.js";
import { log } from "console";

export default {
    components: {
        Tabs,
        Table,
        Tables,
        FormTable,
        Workflow,
        WorkflowEntrance
    },
    created() {
        let status = JSON.stringify(this.$route.query) == "{}";
        if (status) {
            this.lableTable = this.firstTable
            this.getQueryList()
            this.usernumber()
        } else {
            let { id, type } = this.$route.query;
            let list = {
                taskId: id,
                tableName: this.request_form.processDefinitionKey
            };
            this.usernumber()
            this.lableTable = this.firstTable
            this.getQueryList(list, 0);//代办
        }
    },
    data() {
        return {
            abc: false,
            lableTable: {},
            handleClose: false,
            isWorkflowStatus: true, //默认展示模式组件，为true时展示多人处理组件
            buttonStatus: true,
            copyStatus: false,
            dialogTitle: "",
            disabled: true,
            destroy: false,
            //分页数据
            totalPage: "1", //默认第一页
            currentPage: "1", //当前页数
            pageSize: "10", //每页显示十条
            currentPageList: ["1", "2"],
            startStatus: true,
            closeStatus: true, //关闭按钮状态
            forwardStatus: false, //转需求管理平台状态
            exportBtnStatus: false, //导出按钮状态
            saveStatus: true, //保存按钮状态
            fromList: {}, //表单数据
            rejectStatus: true,
            taskId: "", //工单taskID
            request_form: {
                userId: "",
                userName: "",
                path: this.$router.currentRoute.name,
                userCode: JSON.parse(window.sessionStorage.userInfo).loginNo,
                // path:this.$roter.options.routers,
                // nextDealMan:'',
                title: "title",
                businessKey: "288",
                processDefinitionKey: "fhq_process",
            },
            requestForm: {
                // fresourceId: "9d7c2f92-b251-11ed-886f-d6cd97160e00", // 本地环境
                // fresourceId: "86e7c09e-b256-11ed-be6b-00505687dcd3", //测试环境
                fresourceId:'3c3df7fb-d918-11ed-8255-e00084564cce',//生产环境
                processDefinitionKey: "fhq_process",
            },
            treeList: [], //候选人列表
            treeCopyList: [], //抄送人列表
            editStatus: false,
            querryList: [], //已选人员名单
            commonlyList: [
                //常用意见列表页
            ],
            textarea: "未填写意见",
            num: 0,
            dialogStatus: false, //新建dialog显示
            handleStatus: false, //处理按钮状态
            tabList: [
                {
                    index: "first",
                    label: "我的待办",
                    number: 0,
                    name: "prosss_key",
                },
                {
                    index: "two",
                    label: "我的已办",
                    number: 0,
                },
                {
                    index: "three",
                    label: "我发起的",
                    number: 0,
                },

            ],
            firstTable: {
                name: "first",
                height: 500,
                titledata: [
                    {
                        label: "标题",
                        prop: "need_name",
                        width: 300,
                        color: "#0682CD",
                    },
                    {
                        label: "申请人",
                        prop: "predealman",
                        width: 300,
                    },
                    {
                        label: "申请时间",
                        prop: "proposer_time",
                        width: 400,
                    },
                    {
                        label: "当前环节",
                        prop: "taskName",
                        width: 400,
                    },
                ], //表格头
                data: [], //内容数据
                loading: true,
                pageData: {
                    total: 100, // 总条数
                    pageSize: 10, // 每页数量
                    pageNum: 1, // 页码
                },
                isSelection: false, // 表格有多选时设置
                isOperation: false, // 表格有操作列时设置
                isIndex: false, // 列表序号
                operation: {
                    // 表格有操作列时设置
                    label: "操作", // 列名
                    width: "50", // 根据实际情况给宽度
                    data: [
                        {
                            label: "操作", // 操作名称
                            type: "", //按钮类型
                            handleRow: (e, r, o) => {

                            }, // 自定义事件
                        },
                    ],
                },
            },
            twoTable: {
                name: "two",
                disabled: true,
                titledata: [
                    {
                        label: "标题",
                        prop: "need_name",
                        width: 300,
                        color: "#0682CD",
                    },
                    {
                        label: "申请人",
                        prop: "applicant",
                        width: 300,
                    },
                    {
                        label: "申请时间",
                        prop: "proposer_time",
                        width: 400,
                    },
                    {
                        label: "当前环节",
                        prop: "taskName",
                        width: 400,
                    },
                ], //表格头
                data: [], //内容数据
                loading: true,
                pageData: {
                    total: 100, // 总条数
                    pageSize: 10, // 每页数量
                    pageNum: 1, // 页码
                },
                isSelection: false, // 表格有多选时设置
                isOperation: false, // 表格有操作列时设置
                isIndex: false, // 列表序号
                operation: {
                    // 表格有操作列时设置
                    label: "操作", // 列名
                    width: "50", // 根据实际情况给宽度
                    data: [
                        {
                            label: "操作", // 操作名称
                            type: "", //按钮类型
                            handleRow: function () { }, // 自定义事件
                        },
                    ],
                },
            },
            threeTable: {
                name: "three",
                titledata: [
                    {
                        label: "标题",
                        prop: "need_name",
                        width: 300,
                        color: "#0682CD",
                    },
                    {
                        label: "申请人",
                        prop: "applicant",
                        width: 300,
                    },
                    {
                        label: "申请时间",
                        prop: "proposer_time",
                        width: 400,
                    },
                    {
                        label: "当前环节",
                        prop: "taskName",
                        width: 400,
                    },
                    {
                        label: "当前处理人",
                        prop: "currentMan",
                        width: 200,
                    },
                ], //表格头
                data: [], //内容数据
                loading: true,
                pageData: {
                    total: 100, // 总条数
                    pageSize: 10, // 每页数量
                    pageNum: 1, // 页码
                },
                isSelection: false, // 表格有多选时设置
                isOperation: false, // 表格有操作列时设置
                isIndex: false, // 列表序号
                operation: {
                    // 表格有操作列时设置
                    label: "支撑状态", // 列名
                    width: "100", // 根据实际情况给宽度
                    data: [
                        {
                            label: "查看", // 操作名称
                            type: "", //按钮类型
                            handleRow: (e, r, o) => {

                            }, // 自定义事件
                        },
                    ],
                },
            },
            lable: {},
            lables: {
                height: "400",
                titledata: [
                    {
                        id: 1,
                        label: "环节名称",
                        prop: "taskName",
                        width: 300,
                    },
                    {
                        id: 2,
                        label: "处理人",
                        prop: "assignee",
                        width: 300,
                    },
                    {
                        id: 3,
                        label: "到达时间",
                        prop: "startTime",
                        width: 300,
                    },
                    {
                        id: 4,
                        label: "处理时间",
                        prop: "endTime",
                        width: 300,
                    },
                    {
                        id: 5,
                        label: "回复意见",
                        prop: "content",
                        width: 300,
                    },
                ], //表格头
                data: [], //内容数据
                loading: true,
                pageData: {
                    total: 0, // 总条数
                    pageSize: 10, // 每页数量
                    pageNum: 1, // 页码
                },
                isSelection: false, // 表格有多选时设置
                isOperation: false, // 表格有操作列时设置
                isIndex: true, // 列表序号
                operation: {
                    // 表格有操作列时设置
                    label: "操作", // 列名
                    width: "50", // 根据实际情况给宽度
                    data: [
                        {
                            label: "操作", // 操作名称
                            type: "", //按钮类型
                            handleRow: function () { }, // 自定义事件
                        },
                    ],
                },
            },
            clickTagName: "first",
        };
    },
    methods: {
        clickTabTops(e) {
            this.$refs.TableList.page = 1;
            this.totalPage = "1";
            this.clickTagName = e;
            console.log(e);
            const options = {
                first: {
                    setTable: function () {
                        this.lableTable = this.firstTable;
                        this.getQueryList();
                    }.bind(this)
                },
                two: {
                    setTable: function () {
                        this.lableTable = this.twoTable;
                        this.getQueryDone();
                    }.bind(this)
                },
                three: {
                    setTable: function () {
                        this.lableTable = this.threeTable;
                        this.getMeLaunch();
                    }.bind(this)
                }
            };
            options[e]?.setTable?.();

        },
        //处理按钮,开始工作流接口
        clickHandles() {
            this.getNextPath(this.fromList.resourceId || "");
        },
        getNextPath(e) {
            let list = {
                fresourceId: this.requestForm.fresourceId, // 本地环境
                processId: this.requestForm.processDefinitionKey,
            };
            if (e) {
                list.resourceId = e;
            }
            this.$http({
                url: "/market/waf/queryPath",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: list,
            }).then((res) => {
                if (res.data.body.nextShapes[0].multi) {
                    if (res.data.body.nextShapes[0].multi.multi === "true") {
                        this.getLastName();
                    } else {
                        this.adminResourceId = "";
                    }
                } else {
                    this.adminResourceId = "";

                    // this.destroy = true;
                    // this.handleStatus = true;
                }
                console.log(this.fromList);
                if (this.fromList.processId || this.fromList.taskId) {
                    this.destroy = true;
                    this.handleStatus = true;
                } else {
                    this.$message.error("请先点击保存按钮");
                }
            });
        },
        getQueryList(e, status) {
            let list = {
                tableName: this.request_form.processDefinitionKey,
            };
            getTodoBase(this.totalPage, "", list).then((res) => {
                if (status === 0) {
                    this.clickDemand("标题", res.data.data[0]);
                }
                this.lableTable.data = res.data.data;
                this.tabList[0].number = res.data.totalRecord;
                this.lableTable.pageData.total = res.data.totalRecord;
                this.loading = false;
            });
        },
        getQueryDone() {
            let list = {
                tableName: this.request_form.processDefinitionKey,
            };
            getDoneBase(this.totalPage, "", list).then((res) => {
                this.lableTable.data = res.data.data;
                this.lableTable.pageData.total = res.data.totalRecord;
                // this.tableData.map((item) => {
                //   item.status = "2";
                // });
                this.tabList[1].number = res.data.totalRecord;
                this.total = res.data.totalRecord;
                this.loading = false;
            });
        },
        getMeLaunch() {
            let list = {
                tableName: this.request_form.processDefinitionKey,
            };
            getInitiateBase(this.totalPage, "", list).then((res) => {
                this.lableTable.data = res.data.data;
                this.lableTable.pageData.total = res.data.totalRecord;
                this.tabList[2].number = res.data.totalRecord;
                this.lableTable.data.map((item) => {
                    item.startTime = this.formatTimestamp(item.startTime)
                })

                // this.tableData.map((item) => {
                //   if (item.taskName === "起草") {
                //     item.status = "1";
                //   } else {
                //     item.status = "2";
                //   }
                // });
                this.total = res.data.totalRecord;
                this.loading = false;
            });
        },
        formatTimestamp(timestamp) {
            var date = new Date(timestamp);
            var year = date.getFullYear();
            var month = ('0' + (date.getMonth() + 1)).slice(-2);
            var day = ('0' + date.getDate()).slice(-2);
            var hours = ('0' + date.getHours()).slice(-2);
            var minutes = ('0' + date.getMinutes()).slice(-2);
            var seconds = ('0' + date.getSeconds()).slice(-2);
            return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
        },
        //新建按钮
        async clickNewTag() {
            this.dialogTitle = "新建";
            this.lables.data = [];
            this.fromList = {}
            this.disabled = false;
            this.saveStatus = true
            await this.getDepartmentName();
            await this.getOrderNumber()

        },
        getOrderNumber() {
            this.$http({
                url: "/market/fhqProcess/getOrderNumber",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {}
            }).then((res) => {
                this.dialogStatus = true;
                console.log(this.$refs.formTable);
                this.fromList.orderNumber = res.data.body
                this.fromList.taskName = '需求发起人'
            });
        },
        //获取用户部门名称
        getDepartmentName() {
            this.$http({
                url: "/market/waf/queryDept",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {},
            }).then((res) => {
                let list = {
                    applyDept: res.data,
                    applyDepartment: JSON.parse(window.sessionStorage.userInfo).groupName,
                    proposer: JSON.parse(window.sessionStorage.userInfo).loginName,
                };
                // this.fromList = list;
                if (this.$refs.formTable) {
                    // this.$refs.formTable.form = list;
                }


            });
        },
        clickDemand(e, res) {
            if (e === "工单状态" || e === "标题") {
                if (this.clickTagName === "first") {
                    this.dialogTitle = "查看";
                    if (res.taskName === "需求发起人") {
                        this.disabled = false;
                        this.saveStatus = true;
                    } else {
                        this.disabled = true;
                        this.saveStatus = false;
                    }
                    // this.clickForm(res);
                    // this.getFromQuery(res);
                    // setTimeout(() => {
                    //     this.getBtnStatus(res);
                    // }, 500);
                }
                if (this.clickTagName === "two") {
                    this.disabled = true;
                    this.startStatus = false;
                    this.saveStatus = false;
                }
                if (this.clickTagName === "three") {
                    if (res.taskName === "需求发起人") {
                        this.startStatus = true;
                        this.disabled = false;
                        this.saveStatus = true;
                    } else {
                        this.startStatus = false;
                        this.disabled = true;
                        this.saveStatus = false;
                    }
                }
                this.fromList = res;
                this.clickForm(res);
                this.getFromQuery(res);
            }
        },
        //查询form表单数据
        getFromQuery(e) {
            this.$http({
                url: "/market/fhqProcess/query",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: { id: e.id },
            }).then((res) => {
                console.log(e);
                let list = this.convertObjKeys(e)
                this.fromList = { ...res.data, ...list }
                console.log(this.fromList);
                this.dialogStatus = true;
            });
        },
        async clickForm(e) {
            let list = {
                processInstanceId: e.process_id,
                // taskId:e.taskId
            };
            let _this = this;
            let obj = {
                url: this.$url.formList.getCommentsByProcessId, //流程追踪接口
                data: list,
                headers: {
                    "Content-Type": "application/json",
                },
            };

            let res = await this.common.httpPost(obj, success);
            function success(data) {
                let list = [];
                list = data.data.data;
                if (data.data.lastmandata.length != 0) {
                    data.data.lastmandata.map((item, index) => {
                        item.id = index + 22;
                    });
                }
                list.map((item, index) => {
                    item.startTime = _this.$util.datetimeFormat(item.startTime);
                    item.endTime = _this.$util.datetimeFormat(item.endTime);
                    item.id = index + 1;
                    item.children = [];
                    if (data.data.lastmandata.length != 0) {
                        let indexs = data.data.lastmandata.findIndex((items) => {
                            if (items.taskId == item.taskId) {
                                item.children.push(items);
                            }
                        });
                    }
                });

                _this.lables.data = list;
                _this.abc = true;
            }
        },
        //获取页码
        changeNum(e) {
            this.totalPage = e;
            const methodMapping = {
                first: (timeList) => {
                    if (timeList) {
                        this.getQueryList(timeList);
                    } else {
                        this.getQueryList();
                    }
                },
                two: () => {
                    this.getMeDone();
                },
                three: (searchLists) => {
                    if (searchLists) {
                        this.getMeLaunch(searchLists);
                    } else {
                        this.getMeLaunch();
                    }
                },

            }
            const methodToExecute = methodMapping[this.clickTagName];

            if (methodToExecute) {
                methodToExecute(this.timeList || this.searchLists);
            }
            // this.totalPage = e;
        },
        clickSave() {
            this.$refs.formTable.$refs.form.validate((valid) => {
                if (valid) {
                    if (this.fromList.id) {
                        this.setUpdateCopy(this.$refs.formTable.form)
                    } else {
                        this.getUserIds();
                    }
                } else {
                    this.$message.error("请完善表单信息");
                    return false;
                }
            });

            // if (this.fromList.id) {
            //     this.setUpdateCopy(this.$refs.formTable.form)
            // } else {
            //     this.getUserIds();
            //     this.setForm();
            // }
        },
        getUserIds() {
            this.$http({
                url: "/market/api/user/info/queryNodePers?params=" + JSON.parse(window.sessionStorage.userInfo).loginNo,
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
            }).then((res) => {
                this.request_form.userName = res.data[0].children[0].loginNameStr;
                this.request_form.userId = res.data[0].children[0].loginNoStr;
                this.setForm();
                console.log(this.request_form)
            });
        },
        setForm(e) {
            this.request_form.title = '[工作台]-防火墙策略-' + this.$refs.formTable.form.needName;
            this.$http({
                url: "/market/fhqProcess/add",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: this.$refs.formTable.form,
            }).then((res) => {
                this.request_form.businessKey = res.data.body;
                this.clickHandle(res.data.body);
            });
        },
        async clickHandle(e) {
            let _this = this;
            let obj = {
                url: this.$url.formList.startWork, //开始工作流接口
                data: _this.request_form,
                status: "form",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
            };

            let res = await this.common.httpPost(obj, success);
            function success(data) {
                console.log(data);
                // _this.fromList.processId = data.data;
                // _this.taskId = data.data;
                let list = {
                    id: e,
                    // taskId:_this.formId,
                    tableName: _this.request_form.processDefinitionKey,
                    processId: data.data,
                    // resourceId: _this.nextPath.currentShape[0].resourceId,
                };
                _this.setUpdate(list);
            }
        },
        convertObjKeys(obj) {
            // 检查传入参数是否为对象
            if (typeof obj !== "object" || obj === null) {
                return obj;
            }

            // 对象遍历，使用 Object.keys() 获取所有属性名称
            return Object.keys(obj).reduce((result, key) => {
                // 下划线转驼峰命名
                const newKey = key.replace(/_(\w)/g, (match, p1) => p1.toUpperCase());
                // 将原有属性赋值到新属性中
                result[newKey] = obj[key];
                return result;
            }, {});
        },
        async setUpdate(e) {
            await updateBase(e).then((res) => {
                let list = this.convertObjKeys(res.data.body[0])
                console.log(list);
                // console.log(res.data.body);
                this.fromList = list
                // console.log(this.formList);
                // this.fromList.taskId = res.data.body[0].taskId;
                // this.fromList.taskId = '1111111111';
                // this.fromList.taskName = res.data.body[0].taskName;
                // this.fromList = concat;
            });
        },
        setUpdateCopy(e) {
            this.$http({
                url: "/market/fhqProcess/update",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: e
            }).then((res) => {
                console.log(res);
                this.$message.success(res.data.desc)
            });

        },
        usernumber() {
            getInitiateBase(this.totalPage, "", { tableName: this.request_form.processDefinitionKey, }).then((res) => {
                this.tabList[2].number = res.data.totalRecord
            });
            getDoneBase(this.totalPage, "", { tableName: this.request_form.processDefinitionKey, }).then((res) => {
                this.tabList[1].number = res.data.totalRecord;
            });
            getTodoBase(this.totalPage, "", { tableName: this.request_form.processDefinitionKey, }).then((res) => {
                this.tabList[0].number = res.data.totalRecord
            });
        },
        clickClose() {
            // this.$refs.formTable.form = {}
            this.fromList = {}
            this.dialogStatus = false;
            this.treeList = [];
            this.textarea = "";
            this.handleStatus = false;
            this.handleStatus = false;
            this.destroy = false;
            this.saveStatus = false;
            this.startStatus = true;
            this.usernumber()
        },
        handleCloses() {
            this.beforeClose()

        },
        beforeClose(e) {
            this.usernumber()
            this.dialogStatus = false;
            this.handleStatus = false;
            // this.handleCloses();
            this.getQueryList();

        },
    },
};
</script>
<style lang="scss" scoped>
.copyClass {
    display: flex;
}

.flex-header-text-tree {
    width: 50%;
    text-align: center;
}

.active {
    background-color: #f3faff;
}

.flex-common {
    padding: 10px 5%;
    font-size: 18px;
}

.flex-buttons {
    background-color: #cde4f6;
    border-color: #cde4f6;
    color: #606266;
}

.flex-button {
    margin-top: 10px;
    margin-bottom: 10px;

    ::v-deep .el-button--primary {
        width: 222px;
    }
}

.flex-left-header-text {
    height: 40px;
    line-height: 40px;
    color: black;
    padding-left: 10px;
    background-color: #cde4f6;
    font-size: 18px;
    font-weight: bold;
}

.flex-right-text {
    margin-right: 20px;
    width: 50%;
}

.flex-handle {
    width: 100%;
    padding: 30px;
    display: flex;

    .flex-right {
        width: 50%;
        border: 1px solid #e1e1e1;
        margin-left: 20px;
    }

    .flex-left {
        width: 50%;
        display: flex;
        flex-direction: column;

        .flex-left-header {
            display: flex;
            justify-content: space-around;
        }
    }
}

.table-title {
    height: 50px;
    line-height: 50px;
    background-color: #f3faff;
    font-size: 18px;
    font-weight: bold;
}

::v-deep .el-dialog {
    margin-top: 0 !important;
}

// ::v-deep .el-table__fixed-body-wrapper {
//   top: 50px !important;
// }
.flex-box {
    display: flex;
    // overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
    width: calc(100% - 40px);
    border-radius: 20px;
    background-color: #fff;
    margin: 0 auto;
    margin-top: 20px;
    position: relative;
    flex-direction: column;

    // height: 100%;
    .flex-header {
        display: flex;
        width: 100%;
        position: relative;
        height: 60px;
        margin: 1%;
        border-bottom: 1px solid #e1e1e1;
        justify-content: space-between;

        .el-button {
            width: 150px;
            float: right;
            height: 40px !important;
            margin-right: 30px;
        }
    }
}

//设置子组件样式
::v-deep .el-tabs__item {
    padding: 0;
    margin-right: 20px;
    width: 166px;
    text-align: center;
    background-color: #d8eaf6;
    color: black;
}

::v-deep .is-active {
    color: #fff;
    background-color: #0583cd;
}

::v-deep .el-tabs__active-bar {
    display: none;
}

::v-deep .el-tabs__nav-wrap::after {
    display: none !important;
}

.flex-form {
    margin-top: 50px;
}

.flex-footer-botton {
    display: flex;
    justify-content: space-evenly;
}
</style>