ioc-admin-ui/src/views/deviceManagement/messageDailog/addDevice.vue

<template>
  <div>
    <el-dialog
      v-dialog-drag
      class="dialog"
      title="添加设备"
      :visible.sync="dialogVisible"
      width="460px"
      left
    >
      <el-divider></el-divider>
      <div class="container">
        <div class="leftpane">
          <el-tree
            ref="tree"
            :data="data"
            :props="defaultProps"
            node-key="id"
            default-expand-all
            @node-click="handleNodeClick"
          >
          </el-tree>
        </div>
        <div class="rightpane">
          <el-input
            class="search"
            v-model="filter"
            placeholder="请输入"
            suffix-icon="el-icon-search"
          ></el-input>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="50"
            > </el-table-column>
            <el-table-column
              prop="deviceID"
              label="设备ID"
            > </el-table-column>
            <el-table-column
              prop="devicePosition"
              label="设备位置"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          @click="dialogVisible = false"
          style="background: #2ea8e6; color: #fff"
        >取消</el-button>
        <el-button
          type="primary"
          style="background: #2ea8e6"
        >确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      filter: "",
      data: [
        {
          label: "设备种类",
          children: [
            {
              label: "摄像头",
            },
            {
              label: "门禁设备",
            },
            {
              label: "水浸设备",
            },
            {
              label: "电表设备",
            },
            {
              label: "其他设备",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      tableData: [
        {
          deviceID: "111",
          devicePosition: "1F-101",
        },
        {
          deviceID: "112",
          devicePosition: "1F-101",
        },
        {
          deviceID: "113",
          devicePosition: "1F-101",
        },
      ],
    };
  },
  methods: {
    handleNodeClick() {},
    handleSelectionChange() {},
  },
};
</script>
<style lang="less" scoped>
.container {
  height: 400px;
  width: calc(100% - 40px);
  border: 0.5px solid rgb(247, 245, 243);
  display: flex;
  padding: 0 0;
  margin: 20px 20px;
  .leftpane {
    width: 120px;

    .el-tree {
      width: 120px;
      height: 100%;
      background-color: rgb(247, 245, 243);
    }
  }

  .rightpane {
    .search {
      width: 224.8px;
      margin-left: 60px;
      margin-top: 10px;

      /deep/.el-input__inner {
        height: 35px;
      }
    }

    .el-table {
      margin-top: 10px;
      width: 95% !important;
      margin-left: 5%;
      border: 1px solid #f0f2f2;
      font-size: 0.95rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #b2b2b2;
      background: rgba(255, 255, 255, 0.8);
      /deep/th {
        background: #f7fbff;
      }
      /deep/.el-checkbox {
        color: #b2b2b2;
        .el-checkbox__input.is-checked + .el-checkbox__label {
          color: #2ea8e6;
        }

        .el-checkbox__input.is-checked .el-checkbox__inner::after {
          width: 70%;
          height: 70%;
          background: #2ea8e6;
          border-radius: 0;
          transform: rotate(0deg) scaleY(1);
          position: static;
          // border: 1px solid #8DD9FF;
        }

        .el-checkbox__inner {
          border: 1px solid #8dd9ff;
          background: rgba(0, 170, 255, 0);
          display: flex;
          align-items: center;
          justify-content: center;
          position: static;
          &::after {
            transition: 0ms;
          }
        }

        .el-checkbox__label {
          padding-left: 0;
          font-size: 15px;
          position: absolute;
          top: 1px;
          left: 25px;
        }
      }
    }
  }
}

/deep/.el-dialog {
  height: 600px !important;
}

.el-select {
  width: 280px;
}

/deep/.el-dialog__header {
  padding-bottom: 0;
  color: #333333;
}

/deep/.el-dialog__headerbtn {
  font-size: 25px;
}

/deep/.el-dialog__body {
  padding: 0;
}

/deep/.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 95%;
  margin: 0;
  margin-left: 2.5%;
}

/deep/.el-dialog__footer {
  text-align: center;
}

.el-button {
  width: 100px;
  height: 30px;
  text-align: center;
  margin: 30px;
  padding: 5px;
}
</style>