<template>
|
<div class="s-radio-set">
|
<div class="add-btn">
|
<el-button size="mini" type="primary" @click="handleAdd()">添加</el-button>
|
</div>
|
<el-table
|
border
|
highlight-current-row
|
:data="tableData"
|
style="width: 100%; margin-top:40px; color:#000"
|
:header-cell-style="{background:'#f8f8f8',color:'#222222'}"
|
>
|
<el-table-column align="center" type="index" label="序号" width="100px"></el-table-column>
|
|
<el-table-column :align="'center'" label="广播名称">
|
<template slot-scope="{row}">
|
<el-input v-if="row.edit" :autofocus="row.edit" v-model="row.radiosName" size="small" />
|
<span v-else>{{ row.radiosName }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column :align="'center'" label="IP地址">
|
<template slot-scope="{row}">
|
<el-input v-if="row.edit" v-model="row.ipAddress" size="small" />
|
<span v-else>{{ row.ipAddress }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column :align="'center'" label="连接测试">
|
<template slot-scope="{row}">
|
<i v-show="row.isCon" class="el-icon-success" style="color:green; font-size:18px"></i>
|
|
<el-button type="text" @click="handleTest(row)">连接测试</el-button>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="操作" :align="'center'">
|
<template slot-scope="scope">
|
<template v-if="scope.row.edit">
|
<el-button size="mini" type="info" @click="handleCancel(scope.row)">取消</el-button>
|
<el-button size="mini" type="primary" @click="handleSave(scope.row)">保存</el-button>
|
</template>
|
<template v-else>
|
<el-button
|
type="text"
|
style="color: black;font-size:18px"
|
@click="handleEdit(scope.row)"
|
icon="el-icon-edit"
|
></el-button>
|
<el-button
|
type="text"
|
style="color: red;font-size:18px"
|
@click="handleDelete(scope.$index)"
|
icon="el-icon-delete"
|
></el-button>
|
</template>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
filters: {
|
isCon(r) {
|
return r.isCon ? r.isCon : false
|
}
|
},
|
data() {
|
return {
|
radioName: "",
|
ipAddress: "",
|
tableData: [
|
{
|
index: "1",
|
radiosName: "操场",
|
ipAddress: "192.168.1.101",
|
edit: false,
|
isCon: false
|
},
|
{
|
edit: false,
|
index: "2",
|
radiosName: "教室",
|
ipAddress: "192.168.12.61",
|
isCon: false
|
},
|
{
|
edit: false,
|
index: "3",
|
radiosName: "保安室",
|
ipAddress: "192.168.13.121",
|
isCon: false
|
}
|
]
|
};
|
},
|
mounted() {
|
this.testAll()
|
},
|
methods: {
|
testAll() {
|
this.tableData.forEach(l => {
|
this.$set(l, "isCon", false)
|
})
|
},
|
handleEdit(row) {
|
console.log(row);
|
row.edit = true;
|
},
|
handleCancel(row) {
|
row.edit = false;
|
console.log(row);
|
},
|
handleDelete(index) {
|
this.$confirm("确认删除该广播吗?", {
|
center: true,
|
cancelButtonClass: "comfirm-class-cancle",
|
confirmButtonClass: "comfirm-class-sure"
|
})
|
.then(() => {
|
this.tableData.splice(index, 1)
|
this.$notify({
|
type: "success",
|
message: "删除成功!"
|
});
|
})
|
.catch(() => { });
|
},
|
handleSave(row) {
|
console.log(row);
|
row.edit = false;
|
this.$notify({
|
message: "保存成功",
|
type: "success"
|
});
|
},
|
handleTest(row) {
|
this.$set(row, 'isCon', true)
|
},
|
handleAdd() {
|
this.tableData.push({
|
radiosName: "",
|
ipAddress: "",
|
edit: true,
|
isCon: false
|
})
|
}
|
}
|
};
|
</script>
|
<style lang="scss">
|
.s-radio-set {
|
width: 100%;
|
height: 100%;
|
.el-dialog {
|
border-radius: 8px;
|
border: 1px solid #ccc;
|
.el-dialog__header {
|
border-bottom: 1px solid #ccc;
|
}
|
}
|
|
.add-btn {
|
float: right;
|
margin-bottom: 7px;
|
}
|
}
|
.e-message {
|
width: 331px;
|
}
|
.e-confirm {
|
border-color: #ff0000 !important;
|
background-color: #ff0000 !important;
|
}
|
.e-confirm:hover {
|
border-color: #f83131d6 !important;
|
background-color: #f83131d6 !important;
|
}
|
.e-cancel {
|
border-color: #eaeaea !important;
|
background-color: #eaeaea !important;
|
}
|
.e-cancel:hover {
|
border-color: #e9e9e9 !important;
|
background-color: #e9e9e9 !important;
|
}
|
</style>
|
