系统维护+系统监控器+调试工具的app 增加

haoxuan

2023-09-01 1e1e5f612f252d66b0d0386cf52873bb1f3f7d7b

 src/pages/settings/components/RadioSet.vue

New file
@@ -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>