<el-form ref="form" :rules="rules" :model="form">
<el-table
class="treat-table"
:data="form.dataTable.slice((pageIndex-1)*pageSize,pageIndex*pageSize)"
height="100%"
@cell-dblclick="dbClickHandle"
@selection-change="handleSelectionChange"
>
<el-table-column align="center" type="selection" width="50" />
<el-table-column label="序號" width="60px" align="center">
<template slot-scope="scope">
{{ setIndex(scope.$index,pageIndex,pageSize) }}
</template>
</el-table-column>
<el-table-column label="設備名稱" width="100px" show-overflow-tooltip prop="AssetName" />
<el-table-column label="策略名稱" prop="RuleName">
<template slot-scope="{row,$index}">
<el-form-item v-if="showEdit[$index]['RuleName']" class="el-form-item-class" :prop=" 'dataTable.' + $index + '.RuleName' " :rules="rules.RuleName" :data="form.dataTable.RuleName">
<el-input
:ref="'RuleName'+$index"
v-model="row.RuleName"
@keyup.enter.native="$event.target.blur"
@change="handleEdit(row, $index)"
@blur="inputBlur(row,$index,'RuleName')"
/>
</el-form-item>
<span v-if="!showEdit[$index]['RuleName']">{{ row.RuleName }}</span>
</template>
</el-table-column>
<el-table-column label="協議" prop="Prot" width="100">
<template slot-scope="{row,$index}">
<el-form-item v-if="showEdit[$index]['Prot']" class="el-form-item-class" :prop=" 'dataTable.' + $index + '.Prot' " :data="form.dataTable.Prot">
<el-select
:ref="'Prot'+$index"
v-model="row.Prot"
filterable
@visible-change="visibleChange($event,row,$index,'Prot')"
@change="selectChange(row, $index)"
>
<el-option
v-for="item in protList"
:key="item.id"
:label="item.Prot"
:value="item.Prot"
/>
</el-select>
</el-form-item>
<span v-if="!showEdit[$index]['Prot']">{{ row.Prot }}</span>
</template>
</el-table-column>
<el-table-column label="業務規則" prop="BusinessIndex" width="150">
<template slot-scope="{row,$index}">
<el-form-item v-if="showEdit[$index]['BusinessIndex']" class="el-form-item-class" :prop=" 'dataTable.' + $index + '.BusinessIndex' " :data="form.dataTable.BusinessIndex">
<el-select
:ref="'BusinessIndex'+$index"
v-model="row.BusinessIndex"
filterable
@visible-change="visibleChange($event,row,$index,'BusinessIndex')"
@change="selectChange(row, $index)"
>
<el-option
v-for="item in businessList"
:key="item.BusinessIndex"
:label="item.BusinessName"
:value="item.BusinessIndex"
/>
</el-select>
</el-form-item>
<span v-if="!showEdit[$index]['BusinessIndex']">{{ toBusiness(row.BusinessIndex) }}</span>
</template>
</el-table-column>
<el-table-column label="源地址" prop="Srcip" width="220">
<template slot-scope="{row,$index}">
<el-form-item v-if="showEdit[$index]['Srcip']" :prop=" 'dataTable.' + $index + '.Srcip' " :rules="rules.Srcip">
<el-input
:ref="'Srcip'+$index"
v-model="row.Srcip"
oninput="value=value.replace(/[ a-zA-Z`~!@#$%^&()_+=<>?{}|,;'\\[\]·~！@#￥%……&（）——+={}|《》？：“”【】、；‘’，。、\u4e00-\u9fa5]/g, '')"
@keyup.enter.native="$event.target.blur"
@change="handleEdit(row, $index)"
@blur="inputBlur(row,$index,'Srcip')"
/>
</el-form-item>
<span v-if="!showEdit[$index]['Srcip']">{{ row.Srcip }}</span>
</template>
</el-table-column>
<el-table-column label="源端口" prop="Srcport" width="120">
<template slot-scope="{row,$index}">
<el-form-item v-if="showEdit[$index]['Srcport']" :prop=" 'dataTable.' + $index + '.Srcport' " :rules="rules.Srcport">
<el-input
:ref="'Srcport'+$index"
v-model="row.Srcport"
oninput="value=value.replace(/[ a-zA-Z`~!@#$%^&()_+=<>?{}|,;'\\[\]·~！@#￥%……&（）——+={}|《》？：“”【】、；‘’，。、\u4e00-\u9fa5]/g, '')"
@keyup.enter.native="$event.target.blur"
@change="handleEdit(row, $index)"
@blur="inputBlur(row,$index,'Srcport')"
/>
</el-form-item>
<span v-if="!showEdit[$index]['Srcport']">{{ row.Srcport }}</span>
</template>
</el-table-column>
<el-table-column label="目的地址" prop="Dstip" width="220">
<template slot-scope="{row,$index}">
<el-form-item v-if="showEdit[$index]['Dstip']" :prop=" 'dataTable.' + $index + '.Dstip' " :rules="rules.Dstip">
<el-input
:ref="'Dstip'+$index"
v-model="row.Dstip"
oninput="value=value.replace(/[ a-zA-Z`~!@#$%^&()_+=<>?{}|,;'\\[\]·~！@#￥%……&（）——+={}|《》？：“”【】、；‘’，。、\u4e00-\u9fa5]/g, '')"
@keyup.enter.native="$event.target.blur"
@change="handleEdit(row, $index)"
@blur="inputBlur(row,$index,'Dstip')"
/>
</el-form-item>
<span v-if="!showEdit[$index]['Dstip']">{{ row.Dstip }}</span>
</template>
</el-table-column>
<el-table-column label="目的端口" prop="Dstport" width="120">
<template slot-scope="{row,$index}">
<el-form-item v-if="showEdit[$index]['Dstport']" :prop=" 'dataTable.' + $index + '.Dstport' " :rules="rules.Dstport">
<el-input
:ref="'Dstport'+$index"
v-model="row.Dstport"
oninput="value=value.replace(/[ a-zA-Z`~!@#$%^&()_+=<>?{}|,;'\\[\]·~！@#￥%……&（）——+={}|《》？：“”【】、；‘’，。、\u4e00-\u9fa5]/g, '')"
@keyup.enter.native="$event.target.blur"
@change="handleEdit(row, $index)"
@blur="inputBlur(row,$index,'Dstport')"
/>
</el-form-item>
<span v-if="!showEdit[$index]['Dstport']">{{ row.Dstport }}</span>
</template>
</el-table-column>
<el-table-column label="啓用" align="center" width="50">
<template slot-scope="scope">
<el-switch
:value="scope.row.using"
active-color="#227EE1"
inactive-color="#BCBCBC"
@change="changeC(scope.row)"
/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="250">
<template slot-scope="scope">
<el-tooltip content="下發" placement="top" effect="light">
<img
style="cursor: pointer;height:13px;width:13px"
:src="require('@/assets/button-Icon/down1.png')"
@click="IssueHandleCheck([scope.row])"
>
</el-tooltip>
<el-tooltip content="關聯事件" placement="top" effect="light">
<img
style="margin-top:5px;cursor: pointer;margin-left:10px"
:src="require('@/assets/button-Icon/associate.png')"
@click="openEventDialog(scope.row)"
>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</el-form>
js：
export default {
name: 'GatekeeperTreat',
components: {
ComponentEventsDialog,
ComponentLoginValidate
},
directives: {
focus: {
// 指令的定義
inserted: function(el) {
el.focus()
}
}
},
data() {
// 判斷Ip
var checkIp = (rule, value, callback) => {
checkValidateIpAndPort(value, 'IP', callback)
callback()
}
// 判斷端口
var checkPort = (rule, value, callback) => {
checkValidateIpAndPort(value, 'PORT', callback)
callback()
}
return {
form: {
dataTable: [
]
},
// dataTable: [],
pageIndex: 1,
pageSize: 15,
totleCount: 0,
multipleSelection: [],
loading: false,
businessList: [
{ BusinessIndex: 0,
BusinessName: '無' }
],
// 顯示編輯框
showEdit: [],
// 協議數據
protList: [
{
id: 0,
Prot: 'TCP'
},
{
id: 1,
Prot: 'UDP'
},
{
id: 2,
Prot: 'ICMP'
}
],
loginIshow: false, // 是否顯示二次驗證彈框
// 校驗
rules: {
// 名稱
RuleName: [
{ required: true, message: '名稱不能爲空', trigger: 'blur' },
{ min: 1, max: 63, message: '長度在 1 到 63 個字符', trigger: 'blur' }
],
// 源地址
Srcip: [
{ required: true, message: '源地址不能爲空', trigger: 'blur' },
{ validator: checkIp, trigger: 'blur' }
],
// 源端口
Srcport: [
{ required: true, message: '源端口不能爲空', trigger: 'blur' },
{ validator: checkPort, trigger: 'blur' }
],
// 目的地址
Dstip: [
{ required: true, message: '目的地址不能爲空', trigger: 'blur' },
{ validator: checkIp, trigger: 'blur' }
],
// 目的端口
Dstport: [
{ required: true, message: '目的端口不能爲空', trigger: 'blur' },
{ validator: checkPort, trigger: 'blur' }
]
}
}
},
watch: {
// 監控tableData數據，發生改變的時候跟新單元格顯示狀態
'form.dataTable': function() {
this.setShowEdit()
}
},
methods: {
showUs(datas) {
this.analysis(datas)
},
setIndex(index, page, size) {
return index + 1 + (page - 1) * size
},
visibleChange(flag, row, index, column) {
if (!flag) {
this.inputBlur(row, index, column)
}
},
// 初始化單元格顯示狀態
setShowEditInit() {
for (const item of this.showEdit) {
for (const innerItem in item) {
item[innerItem] = false
}
}
},
// 設置單元顯示轉換數據
setShowEdit() {
const tempShowEdit = []
for (const item of this.form.dataTable) {
const tempShow = {}
for (const innerItem in item) {
tempShow[innerItem] = false
}
tempShowEdit.push(tempShow)
}
this.showEdit = tempShowEdit
},
// 切換單元格爲編輯
dbClickHandle(row, column, cell, event) {
const nowObj = column.property
const index = this.form.dataTable.indexOf(row)
this.showEdit[index][nowObj] = true
if (nowObj === 'BusinessIndex') {
this.getBusinessHandle(row.Code)
}
this.$nextTick(() => {
this.$refs[nowObj + index].focus()
})
},
// 點擊修改
handleEdit(row, index) {
this.form.dataTable[index] = row
},
// 失焦
inputBlur(row, index, column) {
const idx = this.form.dataTable.indexOf(row)
if (idx === index) {
var datas = this.showEdit[index]
var prop = 'dataTable.' + index + '.' + column
this.$refs['form'].validateField(prop, (error) => {
if (!error) {
if (datas) {
for (const innerItem in datas) {
if (innerItem === column && datas[innerItem]) {
datas[innerItem] = false
}
}
}
}
})
}
},
// 下拉框修改
selectChange(row, index) {
const tempTableData = this.form.dataTable
tempTableData[index] = row
this.form.dataTable = tempTableData
},
// 下發（校驗有錯誤不讓下發）
IssueHandleCheck(datas) {
this.$refs['form'].validate((valid) => {
if (!valid) return
if (datas && datas.length > 0) {
this.$refs.LoginValidateRef.showUs()
if (this.loginIshow) {
this.$refs.LoginValidateRef.executePar(() => {
this.loading = true
this.bulkAddGatekeeper(datas)
})
} else {
this.loading = true
this.bulkAddGatekeeper(datas)
}
} else {
this.$message.info('請選擇下發策略')
this.loading = false
}
})
},
bulkAddGatekeeper(datas) {
bulkAddGatekeeper(datas, this.$store.state.user.accountName).then(res => {
if (res) {
if (res.code === 0) {
this.$message.success('策略下發成功')
this.$emit('initData', true)
} else {
this.$message.error(res.msg)
}
}
this.loading = false
}).catch(err => {
this.loading = false
console.error(err)
})
},
toBusiness(str) {
var result = '無'
for (var business of this.businessList) {
if (business.BusinessIndex === str) {
result = business.BusinessName
break
}
}
return result
},
// 單選框選中獲取數據
handleSelectionChange(val) {
this.multipleSelection = val
},
// 頁面改變
pageSizeChange(pageSize) {
this.pageSize = pageSize
},
// 當前頁
pageCurrentChange(pageIndex) {
this.pageIndex = pageIndex
},
// 獲取業務規則
async getBusinessHandle(id) {
const data = {
id: id
}
this.businessList = [
{ BusinessIndex: 0,
BusinessName: '無' }
]
await LoadBusiness(data).then(res => {
if (res) {
if (res.code === 0) {
this.businessList = []
this.businessList = res.data.data.Data
this.businessList.unshift({
BusinessIndex: 0,
BusinessName: '無'
})
} else {
this.$message.error(res.msg)
}
}
})
},
openEventDialog(data) {
this.$refs.eventsDialogRef.showUs(data)
},
// 是否啓用
changeC(data) {
data.using = !data.using
}
}
}