From 1e1e5f612f252d66b0d0386cf52873bb1f3f7d7b Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期五, 01 九月 2023 16:10:37 +0800
Subject: [PATCH] 系统维护+系统监控器+调试工具的app 增加
---
src/pages/settings/components/RadioSet.vue | 189 +++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 189 insertions(+), 0 deletions(-)
diff --git a/src/pages/settings/components/RadioSet.vue b/src/pages/settings/components/RadioSet.vue
new file mode 100644
index 0000000..1b7fa56
--- /dev/null
+++ b/src/pages/settings/components/RadioSet.vue
@@ -0,0 +1,189 @@
+<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>
--
Gitblit v1.8.0