优化部分样式

zhangzengfei

2022-08-04 2e4133d2bbb0f4626cf336f3e456783b9fb7867e

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

@@ -5,10 +5,7 @@
    <div class="close iconfont" @click="close()">&#xe60f;</div>

    <div class="search">
      <el-input
        v-model="searchContent"
        placeholder="请输入集群IP/集群名称/设备IP/设备名称"
      ></el-input>
      <el-input v-model="searchContent" placeholder="请输入集群IP/集群名称/设备IP/设备名称"></el-input>
      <div class="button" @click="searchCluster">搜索集群</div>
      <div class="button" @click="searchDevice">搜索设备</div>
    </div>
@@ -16,11 +13,7 @@
    <div class="clusterList">
      <div class="tableList" v-if="listType == 'cluster'">
        <div class="header">
          <div
            class="label"
            v-for="(item, index) in clusterHeader"
            :key="index"
          >
          <div class="label" v-for="(item, index) in clusterHeader" :key="index">
            {{ item }}
          </div>
        </div>
@@ -39,54 +32,21 @@
                  <!-- 添加 -->
                  <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="showBox('cluster', item.clusterId)">&#xe63f;</span>
                    <!-- 集群详情  -->
                    <span
                      class="iconfont option"
                      @click="showChildrenLIst(index, item.clusterId)"
                      >&#xe63e;</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"
                >
                  <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>
              <div class="overList" :class="{ isShow: showClusterChild == index }">
                <el-table :data="overList" :fit="true" header-row-class-name="overList-head">
                  <el-table-column label="序号" type="index" width="146" class-name="index "> </el-table-column>
                  <el-table-column prop="dev_id" label="设备ID"></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-column prop="dev_name" label="设备名称" width="240"></el-table-column>
                </el-table>

                <div class="iconfont" @click="showClusterChild = null">
@@ -99,38 +59,12 @@
        </div>
      </div>

      <el-table
        :data="equipmentList"
        :fit="true"
        v-if="listType == 'equipment'"
      >
        <el-table-column
          label="序号"
          type="index"
          width="72"
          class-name="index"
        >
        </el-table-column>
        <el-table-column
          prop="devId"
          label="设备ID"
          width="107"
        ></el-table-column>
        <el-table-column
          prop="devName"
          label="设备名称"
          width="107"
        ></el-table-column>
        <el-table-column
          prop="devIp"
          label="设备IP"
          width="107"
        ></el-table-column>
        <el-table-column
          prop="clusterName"
          label="所属集群"
          width="107"
        ></el-table-column>
      <el-table :data="equipmentList" :fit="true" v-if="listType == 'equipment'">
        <el-table-column label="序号" type="index" width="72" class-name="index"> </el-table-column>
        <el-table-column prop="devId" label="设备ID"></el-table-column>
        <el-table-column prop="devName" label="设备名称" width="107"></el-table-column>
        <el-table-column prop="devIp" label="设备IP" width="107"></el-table-column>
        <el-table-column prop="clusterName" label="所属集群" width="107"></el-table-column>
        <el-table-column label="状态" width="107">
          <template slot-scope="scope">
            <div v-if="!scope.row.canAdd" class="status green">已添加</div>
@@ -143,10 +77,7 @@
            <div class="options" v-if="scope">
              <!-- 添加 -->
              <span v-if="!scope.row.canAdd">-</span>
              <span
                v-else
                class="iconfont option"
                @click="showBox('dev', scope.row.devId, scope.row.clusterId)"
              <span v-else class="iconfont option" @click="showBox('dev', scope.row.devId, scope.row.clusterId)"
                >&#xe63f;</span
              >
            </div>
@@ -159,8 +90,7 @@
      <div class="title">申请添加设备</div>
      <div class="des">
        <span class="iconfont">&#xe601;</span>
        如设备已加入集群，添加管理后集群下所有设备将在设备管理
        页面显示，并支持信息查看及管理。
        如设备已加入集群，添加管理后集群下所有设备将在设备管理 页面显示，并支持信息查看及管理。
      </div>
      <div class="ask">密钥信息请询问设备管理人员</div>
      <el-input v-model="auth_password"></el-input>
@@ -173,13 +103,7 @@
</template>

<script>
import {
  findDeviceListAll,
  findClustersBySearch,
  getDevicesByCluster,
  addCluster,
  addDeviceToUser,
} from "@/api/device";
import { findDeviceListAll, findClustersBySearch, getDevicesByCluster, addCluster, addDeviceToUser } from "@/api/device"

export default {
  data() {
@@ -193,41 +117,41 @@
      equipmentList: [],
      overList: [],
      auth_password: "", //授权秘钥
      addObj: {},
    };
      addObj: {}
    }
  },

  methods: {
    close() {
      this.$emit("close");
      this.$emit("close")
    },
    async showChildrenLIst(index, id) {
      if (this.showClusterChild === index) {
        this.showClusterChild = null;
        return;
        this.showClusterChild = null
        return
      } else if (!index) {
        this.showClusterChild = index;
        this.showClusterChild = index
      }
      this.showClusterChild = null;
      this.showClusterChild = null
      setTimeout(() => {
        this.showClusterChild = index;
      }, 400);
        this.showClusterChild = index
      }, 400)

      const res = await getDevicesByCluster({
        clusterId: id,
      });
        clusterId: id
      })
      if (res && res.success) {
        this.overList = res.data.list;
        this.overList = res.data.list
      }
    },
    async getCluster() {
      const res = await findClustersBySearch({
        InputText: this.searchContent,
        Page: 1,
        Size: 10000,
      });
        Size: 10000
      })
      if (res && res.success) {
        this.clusterList = res.data.list;
        this.clusterList = res.data.list
      }
    },

@@ -235,57 +159,57 @@
      const res = await findDeviceListAll({
        InputText: this.searchContent,
        Page: 1,
        Size: 10000,
      });
        Size: 10000
      })
      if (res && res.success) {
        this.equipmentList = res.data.list;
        this.equipmentList = res.data.list
      }
    },

    searchCluster() {
      this.getCluster();
      this.listType = "cluster";
      this.getCluster()
      this.listType = "cluster"
    },

    searchDevice() {
      this.getDevice();
      this.listType = "equipment";
      this.getDevice()
      this.listType = "equipment"
    },

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

      if (res && res.success) {
        this.$notify({
          type: "success",
          message: "添加成功",
        });
        this.close();
          message: "添加成功"
        })
        this.close()
      }
    },
    showBox(type, id, cid) {
      this.auth_password = "";
      this.showPasswordBox = true;
      this.auth_password = ""
      this.showPasswordBox = true
      this.addObj = {
        type,
        id,
        cid,
      };
    },
  },
};
        cid
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@@ -593,4 +517,4 @@
    }
  }
}
</style>
</style>