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

<template>
    <div>
        <div>
            <div class="flex-title">防火墙策略申请流程</div>
            <el-form ref="form" :model="form" :rules="rule" :disabled="disabled">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="工号单:" prop="orderNumber">
                            <el-input v-model="form.orderNumber" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="标题:" prop="needName">
                            <el-input v-model="form.needName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="申请人:" prop="applicant">
                            <el-input v-model="form.applicant" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="申请时间:">
                            <el-date-picker type="date" :disabled="true" placeholder="选择日期" v-model="form.applicationTime"
                                :picker-options="pickerOptions" value-format="yyyy-MM-dd"
                                style="width: 100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="有效期:" prop="validPeriod">
                            <el-select v-model="form.validPeriod" placeholder="请选择">
                                <el-option label="长期" value="长期"></el-option>
                                <el-option label="限期" value="限期"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="开始时间:">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.startTime"
                                :picker-options="pickerOptions" value-format="yyyy-MM-dd"
                                style="width: 100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="结束时间:">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.endTime"
                                :picker-options="pickerOptions" value-format="yyyy-MM-dd"
                                style="width: 100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                    <el-row>
                        <el-form-item label="申请原因:" prop="applicationReason" label-width="110px">
                            <el-input type="textarea" maxlength="300" show-word-limit
                                v-model="form.applicationReason"></el-input>
                        </el-form-item>
                        <el-col :span="24">
                            <el-form-item label="正文:" prop="content" label-width="110px">
                                <el-input type="textarea" maxlength="300" show-word-limit v-model="form.content"></el-input>
                            </el-form-item>

                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="备注:" prop="note" label-width="110px">
                                <el-input type="textarea" maxlength="300" show-word-limit v-model="form.note"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="源IP地址:" prop="sourceIpAddress">
                                <el-input v-model="form.sourceIpAddress"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="目标IP地址:" prop="destinationIpAddress">
                                <el-input v-model="form.destinationIpAddress"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="源地址设备类型:" prop="sourceDeviceType">
                                <el-select v-model="form.sourceDeviceType" placeholder="请选择">
                                    <el-option label="路由器" value="路由器"></el-option>
                                    <el-option label="交换机" value="交换机"></el-option>
                                    <el-option label="防火墙" value="防火墙"></el-option>
                                    <el-option label="主机" value="主机"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="目的地址设备类型:" prop="destinationDeviceType" label-width="140px">
                                <el-select v-model="form.destinationDeviceType" placeholder="请选择">
                                    <el-option label="路由器" value="路由器"></el-option>
                                    <el-option label="交换机" value="交换机"></el-option>
                                    <el-option label="防火墙" value="防火墙"></el-option>
                                    <el-option label="主机" value="主机"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="协议:" prop="protocol">
                                <el-select v-model="form.protocol" placeholder="请选择">
                                    <el-option label="TCP" value="TCP"></el-option>
                                    <el-option label="UDP" value="UDP"></el-option>
                                    <el-option label="ICMP" value="ICMP"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="网络类型:" prop="networkType">
                                <el-select v-model="form.networkType" placeholder="请选择">
                                    <el-option label="内网" value="内网"></el-option>
                                    <el-option label="互联网" value="互联网"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>


                    <el-row>
                        <el-col :span="2">
                            <span>防火墙策略清单:</span>
                        </el-col>
                        <el-col :span="22">
                            <div class="flex-table-header">
                                <el-button type="primary" @click="newclick(1)">新建</el-button>
                                <el-button type="danger" @click="fireDel()">删除</el-button>
                                <span>记录总数({{ num }})</span>
                            </div>

                            <Table @clickDemand="clickDemand" :list="lable" ref="TableList" @changeNum="changeNum"
                                @num="selectNum">
                            </Table>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">
                            <span>端口信息:</span>

                        </el-col>
                        <el-col :span="22">
                            <div class="flex-table-header">
                                <el-button type="primary" @click="newclick(2)">新建</el-button>
                                <el-button type="danger" @click="portDel()">删除</el-button>
                                <span>记录总数({{ nums }})</span>
                            </div>

                            <Table @clickDemand="clickDemand2" @num="selectNums" :list="lables" ref="TableList"
                                @changeNum="changeNums">
                            </Table>
                        </el-col>
                    </el-row>
                </el-row>
                <el-row>
                    <el-form-item label="附件：" prop="mkFileShareAttachList" label-width="120px">
                        <my-upload ref="upload" @uploadBack="uploadBack" @delloadBack="delloadBack"
                            @clickDownload="download" :fileInfo="fileInfo"
                            :fileList="list.mkFileShareAttachList"></my-upload>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
        <el-dialog v-if="firewallStatus" :before-close="clickClose(1)" title="新建" :visible.sync="firewallStatus"
            width="100%" :modal="false" style="display: flex; flex-direction: column">
            <el-button type="primary" @click="newFireAdd(firewallTit)">保存</el-button>
            <el-form ref="form1" :model="fireList">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="源地址设备类型:" prop="sourceDeviceType">
                            <el-input v-model="fireList.sourceDeviceType"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="源地址:" prop="sourceAddress">
                            <el-input v-model="fireList.sourceAddress"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="源端口:" prop="sourcePort">
                            <el-input v-model="fireList.sourcePort"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="目标地址设备类型:" prop="destinationDeviceType">
                            <el-input v-model="fireList.destinationDeviceType"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="目的地址:" prop="destinationAddress">
                            <el-input v-model="fireList.destinationAddress"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="目的端口:" prop="destinationPort">
                            <el-input v-model="fireList.destinationPort"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="协议:" prop="protocol">
                            <el-input v-model="fireList.protocol"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="策略有效期:" prop="protocol">
                            <el-date-picker type="date" placeholder="选择日期" v-model="fireList.policyValidPeriod"
                                :picker-options="pickerOptions" value-format="yyyy-MM-dd"
                                style="width: 100%"></el-date-picker>

                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>

        </el-dialog>
        <el-dialog v-if="protStatus" :before-close="clickClose(2)" title="新增" :visible.sync="protStatus" width="100%"
            :modal="false" style="display: flex; flex-direction: column">
            <el-button type="primary" @click="newPortAdd(protTit)">保存</el-button>

            <el-form ref="form2" :model="portList">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="源端口号:" prop="sourcePortnumber">
                            <el-input v-model="portList.sourcePortNumber"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="目的端口号:" prop="destinationPortNumber">
                            <el-input v-model="portList.destinationPortNumber"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>

            </el-form>
        </el-dialog>
    </div>
</template>
  
<script>
import myUpload from "../../../components/workflowUpload";
import Table from "../../../components/el-form.vue";
export default {
    components: {
        myUpload,
        Table
    },
    data() {
        return {
            fireList: {},
            portList: {},
            fireSelectList: [],
            portSelectList: [],
            firewallStatus: false,
            firewallTit: '新增',
            protTit: '新增',
            page: 1,
            pages: 1,
            protStatus: false,
            num: '0',
            nums: '0',
            checkBoxNone: false,
            checkBoxStatus: false,
            fileInfo: {
                type: "bt1n",
                typename: "上传文件",
                limit: 5,
                url: "/market/waf/upload",
                fileList: [],
            },
            postEdit: false,
            newPostAge: false,
            pickerOptions: {
                disabledDate(time) {
                    console.log(time);
                    return time.getTime() < Date.now() - 8.64e7;
                },
            },
            oneList: [],
            lable: {
                name: "first",
                height: '200',
                titledata: [
                    {
                        label: "源地址设备类型",
                        prop: "sourceDeviceType",
                        width: 300,
                        color: "#0682CD",
                    },
                    {
                        label: "源地址",
                        prop: "sourceAddress",
                        width: 200,
                    },
                    {
                        label: "源端口",
                        prop: "sourcePort",
                        width: 200,
                    },
                    {
                        label: "目标地址设备类型",
                        prop: "destinationDeviceType",
                        width: 200,
                    },
                    {
                        label: "目的地址",
                        prop: "destinationAddress",
                        width: 200,
                    },
                    {
                        label: "目的端口",
                        prop: "destinationPort",
                        width: 250,
                    },
                    {
                        label: "协议",
                        prop: "protocol",
                        width: 200,
                    },
                    {
                        label: "策略有效期",
                        prop: "policyValidPeriod",
                        width: 200,
                    },
                ], //表格头
                data: [], //内容数据
                loading: true,
                pageData: {
                    total: 100, // 总条数
                    pageSizes: 10, // 每页数量
                    pageNum: 1, // 页码
                },
                isSelection: true, // 表格有多选时设置
                isOperation: false, // 表格有操作列时设置
                isIndex: false, // 列表序号
                operation: {
                    // 表格有操作列时设置
                    label: "操作", // 列名
                    width: "50", // 根据实际情况给宽度
                    data: [
                        {
                            label: "操作", // 操作名称
                            type: "", //按钮类型
                            handleRow: () => {

                            }, // 自定义事件
                        },
                    ],
                },
            },
            lables: {
                name: "first",
                height: "200",
                titledata: [
                    {
                        label: "序号",
                        prop: "index",
                        width: 600,
                    },
                    {
                        label: "源端口号",
                        prop: "sourcePortNumber",
                        width: 600,
                    },
                    {
                        label: "目的端口号",
                        prop: "destinationPortNumber",
                        width: 600,
                    },

                ], //表格头
                data: [], //内容数据
                loading: true,
                pageData: {
                    total: 1, // 总条数
                    pageSizes: 10, // 每页数量
                    pageNum: 1, // 页码
                },
                isSelection: true, // 表格有多选时设置
                isOperation: false, // 表格有操作列时设置
                isIndex: false, // 列表序号
                operation: {
                    // 表格有操作列时设置
                    label: "操作", // 列名
                    width: "50", // 根据实际情况给宽度
                    data: [
                        {
                            label: "操作", // 操作名称
                            type: "", //按钮类型
                            handleRow: () => {

                            }, // 自定义事件
                        },
                    ],
                },
            },
            childrenList: [],
            twoList: [],
            twoStatus: false,
            threeList: [],
            threeStatus: false,
            fourList: [],
            fourStatus: false,
            fiveList: [],
            fiveStatus: false,
            isSensitiveDataStatus: false,
            timeStatus: false,
            functionStatus: false,
            reportStatus: false,
            Length: "",
            form: {},
            rules: {},
            rule: {
                needName: [
                    { required: true, message: "请输入标题", trigger: "blur" },
                ],
                applicationReason: [
                    { required: true, message: "请输入申请原因", trigger: "change" },
                ]
            },
            copyRule: {},
            isList: [],
            remindMmsg: []
        };
    },
    props: {
        list: {
            type: Object,
            default: () => { },
        },
        disabled: {
            type: Boolean,
            default: () => { },
        },
    },
    mounted() {
        if (this.list.id) {
            this.form = this.list;
        }
        if (this.list.mkFileShareAttachList) {
            this.$refs.upload.attList = this.list.mkFileShareAttachList;
            this.list.mkFileShareAttachList.map((item) => {
                item.name = item.fileName;
            });
        }
        console.log(this.form.orderNumber);
        this.getFromQuery(this.form.orderNumber)
        this.getPortQuery(this.form.orderNumber)
    },
    created() {
        this.form = {
            applicant: JSON.parse(window.sessionStorage.userInfo).loginName,
            applicationTime: new Date(),
            taskName: this.list.taskName,
            orderNumber: this.list.orderNumber,
        }
        this.copyRule = this.rule;
    },

    methods: {
        clickClose() {

        },
        fireDel() {
            if (this.fireSelectList.length > 0) {
                this.$confirm("即将删除数据, 是否删除?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.$http({
                            url: "/market/fhqProcessStrategy/delBatch",
                            method: "post",
                            headers: {
                                "Content-Type": "application/json",
                            },
                            data: this.fireSelectList
                        }).then((res) => {
                            this.$message.success('删除成功')
                            this.page = 1;
                            this.getFromQuery(this.form.orderNumber)
                        });
                    })
                    .catch(() => { });
            }
        },
        portDel() {
            if (this.portSelectList.length > 0) {
                this.$confirm("即将删除数据, 是否删除?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.$http({
                            url: "/market/fhqProcessPort/delBatch",
                            method: "post",
                            headers: {
                                "Content-Type": "application/json",
                            },
                            data: this.portSelectList
                        }).then((res) => {
                            this.$message.success('删除成功')
                            this.pages = 1;
                            this.getPortQuery(this.form.orderNumber)
                        });
                    })
                    .catch(() => { });
            }

        },
        newFireAdd(e) {
            if (e == '新增') {
                this.fireList.strategyId = this.form.orderNumber
                this.$http({
                    url: "/market/fhqProcessStrategy/add",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: this.fireList
                }).then((res) => {
                    this.firewallStatus = false;
                    this.getFromQuery(this.form.orderNumber)
                    this.$message.success('添加成功')
                });
            } else {
                this.$http({
                    url: "/market/fhqProcessStrategy/update",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: this.fireList
                }).then((res) => {
                    this.firewallStatus = false;
                    this.getFromQuery(this.form.orderNumber)
                    this.$message.success('添加成功')
                });
            }

        },
        newPortAdd(e) {
            if (e == '新增') {
                this.portList.portId = this.form.orderNumber
                this.$http({
                    url: "/market/fhqProcessPort/add",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: this.portList
                }).then((res) => {
                    this.protStatus = false;
                    this.getPortQuery(this.form.orderNumber)
                    this.$message.success('添加成功')
                });
            } else {
                this.$http({
                    url: "/market/fhqProcessPort/update",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: this.portList
                }).then((res) => {
                    this.protStatus = false;
                    this.getPortQuery(this.form.orderNumber)
                    this.$message.success('添加成功')
                });
            }

        },
        getPortQuery(e) {
            this.$http({
                url: "/market/fhqProcessPort/queryPage",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    page: '{"pageNo":"' + this.pages + '","pageSize":"10"}',
                },
                data: { portId: e },
            }).then((res) => {
                this.lables.data = res.data.data
                this.lables.pageData.total = res.data.totalRecord ? res.data.totalRecord : 1;
                this.lables.data.map((item, index) => {
                    item.index = (index + 1) + (res.data.pageNo - 1) * res.data.pageSize
                })
                this.nums = res.data.totalRecord
            });
        },
        getFromQuery(e) {
            this.$http({
                url: "/market/fhqProcessStrategy/queryPage",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    page: '{"pageNo":"' + this.page + '","pageSize":"10"}',
                },
                data: { strategyId: e },
            }).then((res) => {
                this.lable.data = res.data.data
                this.lable.pageData.total = res.data.totalRecord ? res.data.totalRecord : 1;
                this.num = res.data.totalRecord
            });
        },
        newclick(e) {
            this.fireList = {};
            this.portList = {};
            e === 1 ? this.firewallStatus = true : this.protStatus = true;
            e === 1 ? this.firewallTit = '新增' : this.protTit = '新增';
        },
        //页码
        changeNum(e) {
            this.page = e;
            this.getFromQuery(this.form.orderNumber)
        },
        changeNums(e) {
            this.pages = e;
            this.getPortQuery(this.form.orderNumber)
        },
        selectNum(e) {
            this.fireSelectList = e;
        },
        selectNums(e) {
            this.portSelectList = e
        },
        //点击工单
        clickDemand(row, e) {
            if (this.form.taskName === '需求发起人') {
                console.log(e);
                this.firewallTit = '修改'
                this.fireList = e
                this.firewallStatus = true
            }
        },
        clickDemand2(row, e) {
            if (this.form.taskName === '需求发起人') {
                console.log(e);
                this.protTit = '修改'
                this.portList = e
                this.protStatus = true
            }
        },
        uploadBack(v) {
            if (this.form.mkFileShareAttachList) {
                this.form.mkFileShareAttachList = [];
                this.form.mkFileShareAttachList = v;
            } else {
                let mkFileShareAttachList = [];
                mkFileShareAttachList = v;
                this.$set(this.form, "mkFileShareAttachList", mkFileShareAttachList);
            }
        },
        delloadBack(v) {
            this.form.mkFileShareAttachList = v;
            this.$http({
                url: "/market/zfpzProcess/update",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: this.form,
            }).then((res) => {
                console.log(res);
                // if (res.data.result === 0) {
                //   this.$message.success("工作流更新成功");
                // }
            });
        },
        download() {
            console.log(123);
            if (this.form.mkFileShareAttachList.length > 1) {
                this.$http({
                    url: "/market/waf/downAllFile",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    responseType: "blob",
                    data: { mkFileShareAttachList: this.form.mkFileShareAttachList },
                }).then((response) => {
                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                        let blob = new Blob([response.data], {
                            type: "application/vnd.ms-excel",
                        });
                        window.navigator.msSaveOrOpenBlob(
                            blob,
                            new Date().getTime().toString() + ".zip"
                        );
                    } else {
                        /* 火狐谷歌的文件下载方式 */
                        var blob = new Blob([response.data]);
                        var downloadElement = document.createElement("a");
                        var href = window.URL.createObjectURL(blob);
                        downloadElement.href = href;
                        downloadElement.download = this.form.needName + ".zip";
                        document.body.appendChild(downloadElement);
                        downloadElement.click();
                        document.body.removeChild(downloadElement);
                        window.URL.revokeObjectURL(href);
                    }
                    if (this.infolist.authType === "3") {
                        this.dialogCli(10);
                    }
                });
            } else {
                console.log(this.form.mkFileShareAttachList);
                let list = {
                    id: this.form.mkFileShareAttachList[0].fileCode,
                    fileName: this.form.mkFileShareAttachList[0].name,
                };
                this.$http({
                    url: "/market/waf/downFile",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    responseType: "blob",
                    data: list,
                }).then((response) => {
                    console.log(response);
                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                        let blob = new Blob([response.data], {
                            type: "application/vnd.ms-excel",
                        });
                        //window.navigator.msSaveOrOpenBlob(blob, this.form.needName);
                        window.navigator.msSaveOrOpenBlob(
                            blob,
                            this.form.mkFileShareAttachList[0].name
                        );
                    } else {
                        /* 火狐谷歌的文件下载方式 */
                        var blob = new Blob([response.data]);
                        var downloadElement = document.createElement("a");
                        var href = window.URL.createObjectURL(blob);
                        downloadElement.href = href;
                        downloadElement.download = this.form.mkFileShareAttachList[0].name;
                        document.body.appendChild(downloadElement);
                        downloadElement.click();
                        document.body.removeChild(downloadElement);
                        window.URL.revokeObjectURL(href);
                    }
                });
            }
        },
    },

};
</script>
  
<style lang="scss" scoped>
.flex-table-header {
    margin-bottom: 10px;

    span {
        margin-left: 20px;
    }
}

::v-deep .el-row {
    margin-top: 16px;
}

a {
    text-decoration: none;
}

::v-deep .el-upload-list {
    width: 23rem;
}

.flex-title {
    text-align: center;
    font-size: 24px;
    line-height: 60px;

    font-weight: bold;
}

.flex-header {
    margin-top: 20px;
    display: flex;
    //   justify-content: space-between;

    ::v-deep .el-form-item {
        width: 20%;
        margin-right: 60px;
    }
}

.flex-upload {
    ::v-deep .el-form-item {
        width: 100%;
    }
}

.flex-input-tare {
    ::v-deep .el-form-item {
        width: 100%;
        margin-right: 5%;
    }

    ::v-deep .el-form-item__label {
        width: 9rem !important;
    }
}

.flex-textarea {
    width: 70.5%;
}

.el-upload__tip {
    color: red;
}

// ::v-deep .el-input--suffix .el-input__inner {
//   width: 119% !important;
// }
::v-deep .el-input__inner {
    color: black !important;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
    color: black !important;
}

::v-deep .el-form-item {
    display: flex;
}

::v-deep .el-form-item__label {
    // width:100%;
    height: 50px;
    line-height: 40px !important;
    width: 130px;
    font-size: 0.5rem;
}

::v-deep .el-form-item__content {
    width: 100%;
    margin-left: 0% !important;
}

.el-select,
::v-deep.el-input_inner {
    width: 100%;
}

::v-deep.el-form-item.foldLabel .el-form-item__label {
    white-space: pre-line;
    /*换行显示*/
    height: 10px;
    /*设置lable高度，input高度一样*/
    line-height: 30px !important;
}

::v-deep .el-pagination {
    display: block !important;
    background-color: #fff !important;
}
</style>