mdm-client 1.0.0

package/src/components/other/addressBook.vue

@@ -0,0 +1,1121 @@
+<template>
+  <div class="addressbox">
+    <el-dialog :visible.sync="isaddressShow" append-to-body :show-close="false" class="addresslogClass" width="878px">
+      <div slot="title" class="dialog-title">
+        <div class="tabs">
+          <div
+            v-for="item in tabList"
+            :key="item"
+            :class="['tabItem', activeTab == item ? 'activeBorder' : '']"
+            @click="activeTab = item"
+          >
+            {{ item }}
+          </div>
+        </div>
+        <span class="close-icon" @click="isaddressShow = false"></span>
+      </div>
+      <div class="checkBox">
+        <div class="userLeft" ref="treeContainerRef">
+          <el-input class="search-input" v-model="filterText" placeholder="请输入名称进行搜索">
+            <i slot="suffix" class="el-input__icon el-icon-search"></i>
+          </el-input>
+
+          <!-- 组织架构树 -->
+          <div class="tree-content">
+            <vue-virtual-tree
+              v-show="activeTab === '组织架构'"
+              ref="orgTreeRef"
+              :data="treeData"
+              :props="{ children: 'children', label: 'label' }"
+              node-key="id"
+              show-checkbox
+              :height="dynamicTreeHeight"
+              :item-height="36"
+              @check="handleNodeCheck"
+              :filter-node-method="filterNode"
+            >
+              <template #default="{ node, data }">
+                <span class="custom-tree-node">
+                  <span class="custom-tree-node-label" :title="node.label" v-if="data.isDept">{{
+                    node.label
+                  }}</span>
+                  <span class="custom-tree-node-user" v-else>
+                    <span :class="['custom-tree-node-icon']"></span>
+                    <span class="custom-tree-node-label" :title="node.label">{{ node.label }}</span>
+                  </span>
+                </span>
+              </template>
+            </vue-virtual-tree>
+
+            <!-- 应用树 -->
+            <vue-virtual-tree
+              v-show="activeTab === '人员'"
+              ref="appTreeRef"
+              :data="appTreeData"
+              :props="{ children: 'children', label: 'label' }"
+              node-key="id"
+              show-checkbox
+              :height="dynamicTreeHeight"
+              :item-height="36"
+              @check="handleNodeCheck"
+              :filter-node-method="filterNode"
+            >
+              <template #default="{ node, data }">
+                <span class="custom-tree-node">
+                  <span class="custom-tree-node-label" :title="node.label" v-if="data.isDept">{{
+                    node.label
+                  }}</span>
+                  <span class="custom-tree-node-user" v-else>
+                    <span :class="['custom-tree-node-icon']"></span>
+                    <span class="custom-tree-node-label" :title="node.label">{{ node.label }}</span>
+                  </span>
+                </span>
+              </template>
+            </vue-virtual-tree>
+
+            <!-- 常用分组树 -->
+            <vue-virtual-tree
+              v-show="activeTab === '常用分组'"
+              ref="groupTreeRef"
+              :data="groupTreeData"
+              :props="{ children: 'children', label: 'label' }"
+              node-key="id"
+              show-checkbox
+              :height="dynamicTreeHeight"
+              :item-height="36"
+              @check="handleNodeCheck"
+              :filter-node-method="filterNode"
+            >
+              <template #default="{ node, data }">
+                <span class="custom-tree-node">
+                  <div class="custom-tree-node-editable" v-if="data.isDept">
+                    <span class="custom-tree-node-label" :title="node.label">{{ node.label }}</span>
+                    <div class="node-options">
+                      <div class="node-option" @click.stop="editUsualGroupItem(data)">编辑</div>
+                      <div class="node-option" @click.stop="deleteUsualGroupItem(data)">删除</div>
+                    </div>
+                  </div>
+                  <span class="custom-tree-node-user" v-else>
+                    <span :class="['custom-tree-node-icon']"></span>
+                    <span class="custom-tree-node-label" :title="node.label">{{ node.label }}</span>
+                  </span>
+                </span>
+              </template>
+            </vue-virtual-tree>
+            <!-- 设备树 -->
+            <vue-virtual-tree
+              v-show="activeTab === '设备'"
+              ref="equipmentTreeRef"
+              :data="equipmentTreeData"
+              :props="{ children: 'children', label: 'label' }"
+              node-key="id"
+              show-checkbox
+              :height="dynamicTreeHeight"
+              :item-height="36"
+              @check="handleNodeCheck"
+              :filter-node-method="filterNode"
+            >
+              <template #default="{ node, data }">
+                <span class="custom-tree-node">
+                  <span class="custom-tree-node-label" :title="node.label" v-if="data.isDept">{{
+                    node.label
+                  }}</span>
+                  <span class="custom-tree-node-user" v-else>
+                    <span :class="['custom-tree-node-icon', getNodeIconClass(data)]"></span>
+                    <span class="custom-tree-node-label" :title="node.label">{{ node.label }}</span>
+                  </span>
+                </span>
+              </template>
+            </vue-virtual-tree>
+            <!-- 监控树 -->
+            <vue-virtual-tree
+              v-show="activeTab === '监控'"
+              ref="monitorTreeRef"
+              :data="monitorTreeData"
+              :props="{ children: 'children', label: 'label' }"
+              node-key="id"
+              show-checkbox
+              :height="dynamicTreeHeight"
+              :item-height="36"
+              @check="handleNodeCheck"
+              :filter-node-method="filterNode"
+            >
+              <template #default="{ node, data }">
+                <span class="custom-tree-node">
+                  <span class="custom-tree-node-label" :title="node.label" v-if="data.isDept">{{
+                    node.label
+                  }}</span>
+                  <span class="custom-tree-node-user" v-else>
+                    <span :class="['custom-tree-node-icon', getNodeIconClass(data)]"></span>
+                    <span class="custom-tree-node-label" :title="node.label">{{ node.label }}</span>
+                  </span>
+                </span>
+              </template>
+            </vue-virtual-tree>
+          </div>
+        </div>
+        <div class="userRight">
+          <div class="checkUse">
+            <div class="titl">已选</div>
+            <div class="count">{{ tempInviteNum }}</div>
+            <div class="adds" @click="getinvitation">
+              <img src="../../assets/image/screenBlue/yq.png" alt="" />
+            </div>
+          </div>
+          <div class="checkutl">
+            <div v-for="item of tempInviteList" :key="item.id" class="userFlex">
+              <div class="label">
+                <span :class="['custom-item-icon', getInviteItemIconClass(item)]"></span> {{ item.label }}
+              </div>
+              <div class="close" @click="removeInviteItem(item)"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="footersFull">
+        <div class="addfz" @click="addGroup">
+          <img src="../../assets/image/screenBlue/add.png" alt="" /> 添加分组
+        </div>
+        <div class="isokmul">
+          <div @click="cancel">取消</div>
+          <div @click="confirm">确定</div>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 使用新的对话框组件 -->
+    <CustomGroupDialog
+      ref="customGroupDialogRef"
+      :baseUrl="baseUrl"
+      :token="token"
+      @refreshCommonGroupTree="refreshCommonGroupTree"
+    />
+    <EditGroupDialog
+      ref="editGroupDialogRef"
+      :baseUrl="baseUrl"
+      :token="token"
+      @refreshCommonGroupTree="refreshCommonGroupTree"
+    />
+    <InviteNonContactDialog
+      ref="inviteNonContactDialogRef"
+      :baseUrl="baseUrl"
+      :token="token"
+      @addOutterContactToChosenList="addOutterContactToChosenList"
+    />
+  </div>
+</template>
+
+<script>
+import { debounce } from "lodash-es";
+import { mittBus, ShowMessage, deleteCommonGroupAndUser, getAddressOrgTree, getAddressAppTree, getCommonOrgTree, queryEquipmentAddressBook, queryMonitorAddressBook } from "@/utils/index";
+import VueVirtualTree from "@fit2cloud-ui/vue-virtual-tree";
+import CustomGroupDialog from "./customGroupDialog.vue";
+import EditGroupDialog from "./editGroupDialog.vue";
+import InviteNonContactDialog from "./inviteNonContactDialog.vue";
+
+export default {
+  name: "AddressBook",
+  components: {
+    VueVirtualTree,
+    CustomGroupDialog,
+    EditGroupDialog,
+    InviteNonContactDialog
+  },
+  props: {
+    inviteList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    baseUrl: {
+      type: String,
+      default: "",
+    },
+    token: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      showMessage: null,
+      
+      // 树数据
+      treeData: [],
+      appTreeData: [],
+      groupTreeData: [],
+      equipmentTreeData: [],
+      monitorTreeData: [],
+      
+      // 标签页相关
+      activeTab: "组织架构",
+      tabList: ["组织架构", "人员", "设备", "监控", "常用分组"],
+      
+      // 搜索相关
+      filterText: "",
+      
+      // 已选列表相关
+      chosenList: [],
+      
+      // 对话框状态
+      isaddressShow: false,
+      isInner: false,
+      tempInviteList: [],
+      
+      // 标记是否正在同步，避免循环更新
+      isSyncing: false,
+      
+      // 树容器引用和动态高度
+      dynamicTreeHeight: 270,
+      
+      // 防抖函数
+      debouncedFilter: null,
+      
+      // 计时器
+      resizeTimer: null,
+    };
+  },
+  computed: {
+    tempInviteNum() {
+      return this.tempInviteList.length;
+    },
+  },
+  watch: {
+    // 监听搜索框输入变化 - 使用防抖
+    filterText(val) {
+      this.debouncedFilter(val);
+    },
+    
+    // 监听标签页变化
+    activeTab() {
+      // 当标签页变化时，重新应用筛选条件
+      this.$nextTick(() => {
+        if (this.filterText) {
+          this.debouncedFilter(this.filterText);
+        }
+
+        // 根据chosenList同步各个树的选中状态
+        this.syncTreeSelectionFromChosenList();
+      });
+    },
+    
+    // 监听chosenList变化，同步到tempInviteList
+    chosenList: {
+      handler(newVal) {
+        if (!this.isSyncing) {
+          this.isSyncing = true;
+          this.tempInviteList = [...newVal];
+          this.$nextTick(() => {
+            this.isSyncing = false;
+          });
+        }
+      },
+      deep: true
+    },
+    
+    // 监听对话框显示状态
+    isaddressShow: {
+      async handler(newVal) {
+        if (newVal) {
+          // 初始化选中状态
+          this.isSyncing = true;
+          this.chosenList = [...this.tempInviteList];
+          await this.$nextTick();
+          this.syncTreeSelectionFromChosenList();
+          // 更新树高度
+          await this.$nextTick();
+          this.updateTreeHeight();
+          this.isSyncing = false;
+        }
+      }
+    }
+  },
+  created() {
+    this.showMessage = new ShowMessage();
+    
+    // 创建防抖的过滤函数
+    this.debouncedFilter = debounce((val) => {
+      // 根据当前激活的标签页筛选相应的树
+      if (this.activeTab === "组织架构" && this.$refs.orgTreeRef) {
+        this.$refs.orgTreeRef.filter(val);
+      } else if (this.activeTab === "人员" && this.$refs.appTreeRef) {
+        this.$refs.appTreeRef.filter(val);
+      } else if (this.activeTab === "常用分组" && this.$refs.groupTreeRef) {
+        this.$refs.groupTreeRef.filter(val);
+      } else if (this.activeTab === "设备" && this.$refs.equipmentTreeRef) {
+        this.$refs.equipmentTreeRef.filter(val);
+      } else if (this.activeTab === "监控" && this.$refs.monitorTreeRef) {
+        this.$refs.monitorTreeRef.filter(val);
+      }
+    }, 300);
+    
+    // 监听mitt事件
+    mittBus.on("getaddressBookUser", (e) => {
+      this.filterText = "";
+      // 转换props.inviteList的数据格式以适配新的tree结构
+      this.tempInviteList = this.inviteList.map((item) => {
+        // 如果已经是新格式，直接使用
+        return item;
+      });
+      this.isaddressShow = true;
+      if (e) {
+        this.isInner = e.isInner;
+      } else {
+        this.isInner = false;
+      }
+    });
+  },
+  async mounted() {
+    await this.getAllTreeData();
+    
+    window.addEventListener("resize", this.handleWindowResize);
+    // 初始化树高度
+    this.$nextTick(() => {
+      this.updateTreeHeight();
+    });
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleWindowResize);
+    if (this.resizeTimer) {
+      clearTimeout(this.resizeTimer);
+    }
+  },
+  methods: {
+    // 获取组织架构树数据
+    async getOrgTreeData() {
+      const res = await getAddressOrgTree({}, { baseUrl: this.baseUrl, token: this.token });
+      if(res.data?.code == 200) {
+        this.treeData = res.data.data;
+      }
+    },
+    
+    // 获取应用树数据
+    async getAppTreeData() {
+      const res = await getAddressAppTree({}, { baseUrl: this.baseUrl, token: this.token });
+      if(res.data?.code == 200) {
+        this.appTreeData = res.data.data;
+      }
+    },
+    
+    // 获取常用分组树数据
+    async getGroupTreeData() {
+      const res = await getCommonOrgTree({}, { baseUrl: this.baseUrl, token: this.token });
+      if(res.data?.code == 200) {
+        this.groupTreeData = res.data.data;
+      }
+    },
+    
+    // 获取设备树数据
+    async getEquipmentTreeData() {
+      const res = await queryEquipmentAddressBook({}, { baseUrl: this.baseUrl, token: this.token });
+      if(res.data?.code == 200) {
+        this.equipmentTreeData = res.data.data;
+      }
+    },
+    
+    // 获取监控树数据
+    async getMonitorTreeData() {
+      const res = await queryMonitorAddressBook({}, { baseUrl: this.baseUrl, token: this.token });
+      if(res.data?.code == 200) {
+        this.monitorTreeData = res.data.data;
+      }
+    },
+    
+    // 获取所有树数据
+    async getAllTreeData() {
+      await this.getOrgTreeData();
+      await this.getAppTreeData();
+      await this.getGroupTreeData();
+      await this.getEquipmentTreeData();
+      await this.getMonitorTreeData();
+    },
+    
+    // 过滤树节点的方法 - 虚拟树使用filter-node-method
+    filterNode(query, node) {
+      if (!query) return true;
+      return node.label.includes(query);
+    },
+    
+    // 处理节点选择状态变化
+    handleNodeCheck(data, checkedInfo) {
+      const { checkedNodes } = checkedInfo;
+
+      // 提取所有选中的叶子节点
+      const leafNodes = this.extractLeafNodes(checkedNodes);
+
+      // 更新chosenList，但保留之前其他树中已选的节点
+      this.updateChosenListWithLeafNodes(leafNodes);
+    },
+    
+    // 提取叶子节点
+    extractLeafNodes(nodes) {
+      const leafNodes = [];
+
+      nodes.forEach((node) => {
+        // 修改判断条件，只有当isDept为false时，才是叶子节点
+        // isDept为true的节点(即使是空数组)都视为非叶子节点
+        if (!node.isDept) {
+          leafNodes.push({
+            ...node,
+            source: this.activeTab, // 记录节点来源于哪个树
+          });
+        }
+      });
+
+      return leafNodes;
+    },
+    
+    // 更新chosenList，保留其他树的选中状态
+    updateChosenListWithLeafNodes(newLeafNodes) {
+      // 从chosenList中过滤掉当前激活树的节点
+      const otherTreeNodes = this.chosenList.filter((item) => item.source !== this.activeTab);
+
+      // 将当前树的新叶子节点添加进来
+      const mergedList = [...otherTreeNodes];
+
+      // 添加新节点，避免重复
+      newLeafNodes.forEach((node) => {
+        if (!mergedList.some((item) => item.id === node.id)) {
+          mergedList.push(node);
+        }
+      });
+
+      this.chosenList = mergedList;
+    },
+    
+    // 同步chosenList到树的选中状态
+    syncTreeSelectionFromChosenList() {
+      // 先清空当前树的选中状态
+      if (this.activeTab === "组织架构" && this.$refs.orgTreeRef) {
+        this.$refs.orgTreeRef.setCheckedKeys([]);
+      } else if (this.activeTab === "人员" && this.$refs.appTreeRef) {
+        this.$refs.appTreeRef.setCheckedKeys([]);
+      } else if (this.activeTab === "常用分组" && this.$refs.groupTreeRef) {
+        this.$refs.groupTreeRef.setCheckedKeys([]);
+      } else if (this.activeTab === "设备" && this.$refs.equipmentTreeRef) {
+        this.$refs.equipmentTreeRef.setCheckedKeys([]);
+      } else if (this.activeTab === "监控" && this.$refs.monitorTreeRef) {
+        this.$refs.monitorTreeRef.setCheckedKeys([]);
+      }
+      
+      // 然后根据chosenList设置选中状态
+      const selectedIds = this.chosenList.map((user) => user.id);
+
+      if (this.activeTab === "组织架构" && this.$refs.orgTreeRef) {
+        selectedIds.forEach((id) => {
+          this.$refs.orgTreeRef.setChecked(id, true, false);
+        });
+      } else if (this.activeTab === "人员" && this.$refs.appTreeRef) {
+        selectedIds.forEach((id) => {
+          this.$refs.appTreeRef.setChecked(id, true, false);
+        });
+      } else if (this.activeTab === "常用分组" && this.$refs.groupTreeRef) {
+        selectedIds.forEach((id) => {
+          this.$refs.groupTreeRef.setChecked(id, true, false);
+        });
+      } else if (this.activeTab === "设备" && this.$refs.equipmentTreeRef) {
+        selectedIds.forEach((id) => {
+          this.$refs.equipmentTreeRef.setChecked(id, true, false);
+        });
+      } else if (this.activeTab === "监控" && this.$refs.monitorTreeRef) {
+        selectedIds.forEach((id) => {
+          this.$refs.monitorTreeRef.setChecked(id, true, false);
+        });
+      }
+    },
+    
+    // 根据节点类型获取图标类名
+    getNodeIconClass(data) {
+      if (data.isDept) return '';
+      
+      switch (this.activeTab) {
+        case '设备':
+          return data.equipmentStatus == 1 ? 'custom-tree-node-icon-device' : 'custom-tree-node-icon-device custom-tree-node-icon-offline';
+        case '监控':
+          return data.monitorStatus == 1 ? 'custom-tree-node-icon-monitor' : 'custom-tree-node-icon-monitor custom-tree-node-icon-offline';
+        default:
+          return 'custom-tree-node-icon';
+      }
+    },
+    
+    // 根据邀请列表项类型获取图标类名
+    getInviteItemIconClass(item) {
+      if (item.source !== '设备' && item.source !== '监控') return 'custom-item-icon-person';
+      return item.source === '设备' ? 'custom-item-icon-device' : 'custom-item-icon-monitor';
+    },
+    
+    getinvitation() {
+      this.$refs.inviteNonContactDialogRef.open();
+    },
+
+    addOutterContactToChosenList(outterContact) {
+      // 检查是否已存在
+      if (this.tempInviteList.find((item) => item.id === outterContact.id)) {
+        this.showMessage.message("error", "该人员已存在");
+        return;
+      }
+
+      // 添加到临时邀请列表
+      this.isSyncing = true;
+      this.tempInviteList.push(outterContact);
+      this.chosenList.push(outterContact);
+
+      this.$nextTick(() => {
+        this.isSyncing = false;
+      });
+    },
+
+    addGroup() {
+      if (this.tempInviteList.length <= 0) {
+        this.showMessage.message("error", "请先选择要添加的人员");
+        return;
+      }
+      if(this.tempInviteList.some((item) => item.source === '设备' || item.source === '监控')) {
+        this.showMessage.message("info", "设备和监控人员暂不支持添加分组, 将不会被添加到常用分组");
+      }
+      // 确保数据格式正确
+      const formattedList = this.tempInviteList.filter((item) => item.source !== '设备' && item.source !== '监控').map((item) => {
+        return {
+          id: item.id,
+          label: item.label,
+          phone: item.phone,
+          loginCode: item.loginCode || "",
+          ...item,
+        };
+      });
+      this.$refs.customGroupDialogRef.open(formattedList);
+    },
+
+    editUsualGroupItem(data) {
+      this.$refs.editGroupDialogRef.open(data);
+    },
+
+    deleteUsualGroupItem(data) {
+      deleteCommonGroupAndUser({
+        groupID: data.id,
+      }, {
+        baseUrl: this.baseUrl,
+        token: this.token,
+      })
+        .then((res) => {
+          if (res.data?.code == 200) {
+            this.showMessage.message("success", "删除分组成功");
+            this.getGroupTreeData();
+          } else {
+            this.showMessage.message("error", res.data?.msg || "删除失败");
+          }
+        })
+        .catch((err) => {
+          this.showMessage.message("error", err.message);
+        });
+    },
+
+    removeInviteItem(item) {
+      const index = this.tempInviteList.findIndex((user) => user.id === item.id);
+      if (index !== -1) {
+        this.isSyncing = true;
+        this.tempInviteList.splice(index, 1);
+
+        // 同步到chosenList
+        const chosenIndex = this.chosenList.findIndex((user) => user.id === item.id);
+        if (chosenIndex !== -1) {
+          this.chosenList.splice(chosenIndex, 1);
+        }
+
+        // 同步取消树中对应节点的选中状态
+        if (this.$refs.orgTreeRef) {
+          this.$refs.orgTreeRef.setChecked(item.id, false);
+        }
+        if (this.$refs.appTreeRef) {
+          this.$refs.appTreeRef.setChecked(item.id, false);
+        }
+        if (this.$refs.groupTreeRef) {
+          this.$refs.groupTreeRef.setChecked(item.id, false);
+        }
+        if (this.$refs.equipmentTreeRef) {
+          this.$refs.equipmentTreeRef.setChecked(item.id, false);
+        }
+        if (this.$refs.monitorTreeRef) {
+          this.$refs.monitorTreeRef.setChecked(item.id, false);
+        }
+        this.$nextTick(() => {
+          this.isSyncing = false;
+        });
+      }
+    },
+
+    cancel() {
+      this.tempInviteList = [];
+      this.isaddressShow = false;
+    },
+
+    confirm() {
+      // 转换数据格式以保持向后兼容
+      const convertedList = this.tempInviteList.filter((item) => item.source !== '设备' && item.source !== '监控').map((item) => {
+        return {
+          ...item,
+        };
+      });
+      const convertedDeviceList = this.tempInviteList.filter((item) => item.source === '设备' || item.source === '监控').map((item) => {
+        return {
+          ...item,
+        };
+      });
+
+      this.$emit("inviteListUpdate", convertedList);
+      if (this.isInner) {
+        this.$emit("appendInvitePeople", convertedList);
+        this.$emit("appendInviteDevice", convertedDeviceList);
+      }
+      this.isaddressShow = false;
+    },
+
+    refreshCommonGroupTree() {
+      this.getGroupTreeData();
+    },
+
+    // 计算树的动态高度
+    calculateTreeHeight() {
+      if (!this.$refs.treeContainerRef) return 270;
+
+      const treeContentEl = this.$refs.treeContainerRef.querySelector(".tree-content");
+      if (!treeContentEl) return 270;
+
+      const treeContentRect = treeContentEl.getBoundingClientRect();
+      const availableHeight = treeContentRect.height;
+
+      // 确保最小高度为200px，最大不超过可用高度
+      return Math.max(200, Math.min(availableHeight, 400));
+    },
+
+    // 更新树高度
+    updateTreeHeight() {
+      const newHeight = this.calculateTreeHeight();
+      if (newHeight !== this.dynamicTreeHeight) {
+        this.dynamicTreeHeight = newHeight;
+      }
+    },
+
+    // 防抖更新函数
+    debouncedUpdateTreeHeight() {
+      if (this.resizeTimer) {
+        clearTimeout(this.resizeTimer);
+      }
+      this.resizeTimer = setTimeout(() => {
+        this.updateTreeHeight();
+      }, 100);
+    },
+
+    // 监听窗口大小变化
+    handleWindowResize() {
+      this.debouncedUpdateTreeHeight();
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/mixin.scss";
+
+:deep(.el-dialog) {
+  width: 878px;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
+  background: var(--dialog-bg) !important;
+  border: 1px solid var(--dialog-border-color);
+  margin-top: 25vh;
+
+  .el-dialog__header {
+    padding: 0 20px;
+  }
+
+  .el-dialog__body {
+    padding: 0 20px 20px;
+  }
+}
+
+.addresslogClass {
+  font-family: var(--sub-font);
+
+  .dialog-title {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+    height: 43px;
+    border-bottom: 1px solid var(--dialog-border-color);
+
+    .tabs {
+      display: flex;
+      font-size: 16px;
+      color: var(--theme-font-color);
+
+      .tabItem {
+        width: 70px;
+        text-align: center;
+        margin-right: 0;
+        line-height: 22px;
+        cursor: pointer;
+      }
+
+      .activeBorder {
+        position: relative;
+
+        &::after {
+          content: "";
+          display: block;
+          position: absolute;
+          left: 5px;
+          bottom: -12px;
+          width: 60px;
+          height: 3px;
+          background: var(--btn-primary-bg);
+          border-radius: 8px 8px 0px 0px;
+        }
+      }
+    }
+
+    .close-icon {
+      width: 16px;
+      height: 16px;
+      background: var(--close-icon) no-repeat center center / 100% 100%;
+      cursor: pointer;
+    }
+  }
+
+  .checkBox {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 20px;
+
+    .userLeft {
+      padding: 14px;
+      width: 414px;
+      height: 350px;
+      border-radius: 6px;
+      border: 1px solid var(--dialog-border-color);
+      overflow-y: auto;
+
+      &::-webkit-scrollbar {
+        width: 2px;
+        height: 2px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: var(--btn-primary-bg);
+        border-radius: 4px;
+      }
+
+      :deep(.el-input) {
+        width: 100%;
+        height: 36px;
+        line-height: 36px;
+        margin-bottom: 10px;
+        @include elInput;
+      }
+
+      .tree-content {
+        width: 100%;
+        height: calc(100% - 46px);
+        overflow: auto;
+
+        .custom-tree-node {
+          font-weight: 400;
+          font-size: 16px;
+          color: var(--theme-font-color);
+          width: 100%;
+          padding-left: 10px;
+          text-align: left;
+
+          &-editable {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding-right: 35px;
+
+            .custom-tree-node-label {
+              max-width: 100px;
+            }
+
+            .node-options {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              flex-wrap: nowrap;
+
+              .node-option {
+                font-family: var(--sub-font);
+                font-weight: 500;
+                font-size: 14px;
+                color: var(--btn-primary-bg);
+                cursor: pointer;
+
+                &:not(:last-child) {
+                  margin-right: 10px;
+                }
+              }
+            }
+          }
+
+          &-label {
+            display: inline-block;
+            width: fit-content;
+            max-width: 200px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          &-user {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            .custom-tree-node-icon {
+              flex-shrink: 0;
+              display: inline-block;
+              width: 20px;
+              height: 20px;
+              margin-right: 10px;
+              background: url("../../assets/image/common/default_avatar.png") no-repeat
+                center / 100% 100%;
+              &-device {
+                background: url("../../assets/image/common/icon-device.svg") no-repeat center / 100%
+                100%;
+              }
+              &-monitor {
+                background: url("../../assets/image/common/icon-monitor.svg") no-repeat center / 100%
+                100%;
+              }
+              &-offline {
+                filter: grayscale(100%);
+              }
+            }
+          }
+        }
+      }
+
+      :deep(.el-tree) {
+        background: transparent !important;
+
+        .el-tree-node {
+          height: 36px !important;
+          &:focus > .el-tree-node__content {
+            background-color: transparent; //当选中树节点时的颜色改变，默认为白色
+          }
+
+          .el-tree-node__content {
+            position: relative;
+            height: 36px;
+
+            &:hover {
+              background-color: rgba(129, 144, 166, 0.2);
+            }
+
+            .el-tree-node__label {
+              font-weight: 400;
+              font-size: 16px;
+              color: var(--theme-font-color);
+            }
+
+            .el-checkbox {
+              position: absolute;
+              margin: 0;
+              font-size: 17px;
+              top: 6px;
+              right: 12px;
+
+              .el-checkbox__inner {
+                border: 1px solid var(--input-border-color);
+                background: transparent;
+              }
+
+              &.is-checked {
+                .el-checkbox__inner {
+                  background-color: var(--btn-primary-bg) !important;
+                }
+              }
+            }
+            .is-leaf {
+              &.el-tree-node__expand-icon {
+                display: none !important;
+              }
+            }
+            .el-tree-node__expand-icon {
+              display: inline-block;
+              width: 4px !important;
+              height: 4px !important;
+              background: url("../../assets/image/common/tree_expand_icon.png") no-repeat
+                center / 100% 100%;
+              margin-bottom: 0px;
+              &::before {
+                content: "";
+              }
+              svg {
+                display: none;
+              }
+            }
+            .expanded {
+              transform: rotate(0deg) !important;
+              background: url("../../assets/image/common/tree_slide_icon.png") no-repeat
+                center / 100% 100% !important;
+            }
+          }
+        }
+      }
+    }
+
+    .userRight {
+      padding: 14px;
+      width: 414px;
+      height: 350px;
+      border-radius: 6px;
+      border: 1px solid var(--dialog-border-color);
+      overflow-y: auto;
+
+      .checkUse {
+        display: flex;
+        align-items: center;
+
+        div {
+          margin-right: 15px;
+        }
+
+        .titl {
+          font-size: 16px;
+          color: var(--theme-font-color);
+        }
+
+        .count {
+          width: 30px;
+          height: 18px;
+          background: var(--btn-primary-bg);
+          border-radius: 9px;
+          font-size: 16px;
+          color: var(--theme-font-color);
+          text-align: center;
+          line-height: 18px;
+        }
+
+        .adds {
+          cursor: pointer;
+        }
+      }
+
+      .checkutl {
+        height: calc(100% - 22px);
+        overflow: auto;
+
+        &::-webkit-scrollbar {
+          width: 2px;
+          height: 2px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: var(--btn-primary-bg);
+          border-radius: 4px;
+        }
+
+        .userFlex {
+          margin-top: 5px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 5px;
+
+          .label {
+            font-size: 16px;
+            color: var(--theme-font-color);
+
+            .custom-item-icon {
+              width: 20px;
+              height: 20px;
+              vertical-align: middle;
+              margin-right: 5px;
+              display: inline-block;
+              &-person {
+                background: url("../../assets/image/common/default_avatar.png") no-repeat center / 100%
+                100%;
+              }
+              &-device {
+                background: url("../../assets/image/common/icon-device.svg") no-repeat center / 100%
+                100%;
+              }
+              &-monitor {
+                background: url("../../assets/image/common/icon-monitor.svg") no-repeat center / 100%
+                100%;
+              }
+            }
+          }
+
+          .close {
+            cursor: pointer;
+            width: 16px;
+            height: 16px;
+            background: var(--close-icon) no-repeat center / 100% 100%;
+          }
+        }
+      }
+    }
+  }
+
+  .footersFull {
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: var(--sub-font);
+    font-size: 16px;
+    color: var(--theme-font-color);
+
+    .addfz {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 120px;
+      height: 36px;
+      background: var(--btn-primary-bg);
+      border-radius: 8px;
+      cursor: pointer;
+
+      img {
+        margin-right: 5px;
+      }
+    }
+
+    .isokmul {
+      display: flex;
+
+      div {
+        width: 100px;
+        height: 36px;
+        line-height: 36px;
+        text-align: center;
+        border-radius: 8px;
+        cursor: pointer;
+        @include button;
+
+        &:nth-child(1) {
+          border: 1px solid var(--btn-primary-bg);
+          color: var(--btn-primary-bg);
+          background: transparent;
+          margin-right: 15px;
+        }
+
+        &:nth-child(2) {
+          @include btnPrimary;
+        }
+      }
+    }
+  }
+}
+</style>