设备管理 样式调整

mark

2022-10-25 f20a554bdb24e9dfde9dc6a69d78595944f61d15

 src/views/equipmentManagement/equipmentList/components/AddBox.vue

@@ -25,74 +25,77 @@
          </div>
        </div>
        <div class="body" v-if="listType == 'cluster'">
          <div class="row" v-for="(item, index) in clusterList" :key="index">
            <div class="content">
              <div class="rowItem index">{{ index + 1 }}</div>
              <div class="rowItem name">{{ item.clusterName }}</div>
              <div class="rowItem ip">{{ item.virtualIp }}</div>
              <div class="rowItem status">
                <div v-if="!item.canAdd" class="status green">已添加</div>
                <div v-else class="status">未添加</div>
          <template v-if="clusterList.length > 0">
            <div class="row" v-for="(item, index) in clusterList" :key="index">
              <div class="content">
                <div class="rowItem index">{{ index + 1 }}</div>
                <div class="rowItem name">{{ item.clusterName }}</div>
                <div class="rowItem ip">{{ item.virtualIp }}</div>
                <div class="rowItem status">
                  <div v-if="!item.canAdd" class="status green">已添加</div>
                  <div v-else class="status">未添加</div>
                </div>
                <div class="rowItem options">
                  <!-- 添加 -->
                  <span v-if="!item.canAdd">-</span>
                  <template v-else>
                    <span
                      class="iconfont option"
                      @click="showBox('cluster', item.clusterId)"
                      >&#xe63f;</span
                    >
                    <!-- 集群详情  -->
                    <span
                      class="iconfont option"
                      @click="showChildrenLIst(index, item.clusterId)"
                      >&#xe63e;</span
                    >
                  </template>
                </div>
              </div>
              <div class="rowItem options">
                <!-- 添加 -->
                <span v-if="!item.canAdd">-</span>
                <template v-else>
                  <span
                    class="iconfont option"
                    @click="showBox('cluster', item.clusterId)"
                    >&#xe63f;</span
                  >
                  <!-- 集群详情  -->
                  <span
                    class="iconfont option"
                    @click="showChildrenLIst(index, item.clusterId)"
                    >&#xe63e;</span
                  >
                </template>
              </div>
            </div>

            <div
              class="overList"
              :class="{ isShow: showClusterChild == index }"
            >
              <el-table
                :data="overList"
                :fit="true"
                header-row-class-name="overList-head"
              <div
                class="overList"
                :class="{ isShow: showClusterChild == index }"
              >
                <el-table-column
                  label="序号"
                  type="index"
                  width="146"
                  class-name="index "
                <el-table
                  :data="overList"
                  :fit="true"
                  header-row-class-name="overList-head"
                >
                </el-table-column>
                <el-table-column
                  prop="dev_id"
                  label="设备ID"
                  width="146"
                ></el-table-column>
                  <el-table-column
                    label="序号"
                    type="index"
                    width="146"
                    class-name="index "
                  >
                  </el-table-column>
                  <el-table-column
                    prop="dev_id"
                    label="设备ID"
                    width="146"
                  ></el-table-column>

                <el-table-column
                  prop="dev_ip"
                  label="设备IP"
                  width="146"
                ></el-table-column>
                  <el-table-column
                    prop="dev_ip"
                    label="设备IP"
                    width="146"
                  ></el-table-column>

                <el-table-column
                  prop="dev_name"
                  label="设备名称"
                  width="240"
                ></el-table-column>
              </el-table>
                  <el-table-column
                    prop="dev_name"
                    label="设备名称"
                    width="240"
                  ></el-table-column>
                </el-table>

              <div class="iconfont" @click="showClusterChild = null">
                &#xe63d;
                <div class="iconfont" @click="showClusterChild = null">
                  &#xe63d;
                </div>
              </div>
            </div>
          </div>
          </template>
          <div class="empty" v-else>暂无数据</div>
        </div>
      </div>

@@ -250,21 +253,30 @@
    },

    async submit() {
      let res = {};
      if (this.addObj.type == "cluster") {
        const res = await addCluster({
          clusterPwd: this.auth_password,
        res = await addCluster({
          authPwd: this.auth_password,
          clusterId: this.addObj.id,
        });
      } else {
        const res = await addDeviceToUser({
          clusterPwd: this.auth_password,
        res = await addDeviceToUser({
          authPwd: this.auth_password,
          deviceId: this.addObj.id,
          clusterId: this.addObj.cid,
        });
      }

      if (res && res.success) {
        this.$notify({
          type: "success",
          message: "添加成功",
        });
        this.close();
      }
    },
    showBox(type, id, cid) {
      console.log(cid);
      this.auth_password = "";
      this.showPasswordBox = true;
      this.addObj = {
        type,
@@ -337,6 +349,15 @@
  .clusterList {
    max-height: 507px;
    overflow-y: overlay;

    .empty {
      height: 60px;
      background-color: rgb(233, 235, 238);
      line-height: 60px;
      color: #909399;
      font-size: 14px;
      text-align: center;
    }
  }

  .tableList {
@@ -548,7 +569,7 @@
    .btns {
      margin-top: 40px;
      display: flex;
      justify-content: end;
      justify-content: flex-end;
      text-align: center;
      line-height: 32px;
      font-size: 14px;