yjdp-web/src/views/globalMap/RightMenu/CommunicationSupport.vue

<template>
  <Dialog custom-show type="lg" title="通讯保障" hide-footer @close="handleClose">
    <div class="content">
      <div class="left-content">
        <el-input v-model="queryParams.keyword" class="custom-input" placeholder="组织架构搜索">
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
        <div class="tree-container">
          <div class="tree-box">
            <el-tree :data="treeData" accordion @node-click="handleNodeClick" />
          </div>
        </div>
      </div>
      <div class="middle-content">
        <div class="search-box">
          <el-select
            v-model="queryParams.value1"
            class="custom-select select-box"
            placeholder="全部"
            popper-class="custom-select-popper"
            :teleported="false"
          >
            <el-option v-for="level in options" :key="level.value" :label="level.name" :value="level.value"></el-option>
          </el-select>
          <el-input v-model="queryParams.keyword" class="custom-input" placeholder="组织架构搜索">
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
        </div>
        <div class="user-box">
          <div class="user-table">
            <div class="tr">
              <div class="td2">
                <div :class="getCheckedClass()" @click="handleChecked"></div>
              </div>
              <div class="td">姓名</div>
              <div class="td3">职务</div>
            </div>
            <div class="table-content">
              <div v-for="(item, index) in userList" :key="index" class="tr2">
                <div class="td2">
                  <div :class="item.checked ? 'common-checked-active' : 'common-checked'" @click="handleChecked2(item)"></div>
                </div>
                <div class="td">{{ item.name }}</div>
                <div class="td3">
                  {{ item.duty }}
                  <div class="phone-icon"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="select-box2">
        <div class="select-header">
          <div class="left-item">
            <div>已选择：</div>
            <div class="text">{{ selectList.length }}</div>
            <div>人</div>
          </div>
          <div class="clear-btn" @click="clearSelect">清空</div>
        </div>
        <div class="select-content">
          <div v-for="(item, index) in selectList" :key="index" class="box-item">
            <div class="line">
              <div class="text1">{{ item.name }}</div>
              <div class="text2">{{ item.duty }}</div>
            </div>
            <div class="line" style="margin-top: 20px">
              <div class="text2">{{ item.dept }}</div>
            </div>
            <div class="close-btn" @click="deleteItem(item)"></div>
          </div>
        </div>
      </div>
    </div>
  </Dialog>
</template>

<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue';

const emits = defineEmits(['close']);
let activeIndex = ref(0);
const options = ref([{ name: '全部', value: '全部' }]);
const queryParams = ref({
  value1: '',
  keyword: ''
});
const menu = ref([{ name: '视频会商' }, { name: '无人机' }, { name: '单兵设备' }]);
const treeData = ref([
  {
    label: '茂名市',
    children: [
      {
        label: '茂名市委',
        children: [
          {
            label: '茂名市纪委监委',
            isLeaf: true
          },
          {
            label: '茂名市委办公室',
            isLeaf: true
          },
          {
            label: '茂名市委组织部',
            isLeaf: true
          }
        ]
      },
      {
        label: '茂名市人大',
        children: [
          {
            label: '茂名市人大常委会秘书长、副秘书长',
            isLeaf: true
          },
          {
            label: '茂名市人大常委会办公室',
            isLeaf: true
          },
          {
            label: '茂名市人大常委会研究室',
            isLeaf: true
          }
        ]
      }
    ]
  }
]);
const userList = ref([]);
const selectList = computed(() => {
  const data = [];
  userList.value.forEach((item) => {
    if (item.checked) {
      data.push(item);
    }
  });
  return data;
});
const getCheckedClass = () => {
  let res = 'common-checked';
  const len = userList.value.length;
  const len2 = selectList.value.length;
  if (len2 > 0 && len2 === len) {
    res = 'common-checked-active';
  } else if (len2 > 0) {
    res = 'common-checked-half';
  }
  return res;
};
const handleNodeClick = (item) => {
  if (item.isLeaf) {
    const data = [
      {
        id: 1,
        name: '李莉莉',
        duty: '副主任',
        dept: '茂名市/茂名市政府/茂名应急管理局'
      },
      {
        id: 2,
        name: '何里',
        duty: '副主任',
        dept: '茂名市/茂名市政府/茂名应急管理局'
      },
      {
        id: 3,
        name: '张三',
        duty: '副主任',
        dept: '茂名市/茂名市政府/茂名应急管理局'
      },
      {
        id: 4,
        name: '张三',
        duty: '副主任',
        dept: '茂名市/茂名市政府/茂名应急管理局'
      },
      {
        id: 5,
        name: '张三',
        duty: '副主任',
        dept: '茂名市/茂名市政府/茂名应急管理局'
      },
      {
        id: 6,
        name: '张三',
        duty: '副主任',
        dept: '茂名市/茂名市政府/茂名应急管理局'
      }
    ];
    data.forEach((item) => {
      item.checked = false;
    });
    userList.value = data;
  }
};
// 全选、全取消
const handleChecked = () => {
  const checkedClass = getCheckedClass();
  let flag = true;
  if (checkedClass === 'common-checked-active') {
    flag = false;
  }
  userList.value.forEach((item) => {
    item.checked = flag;
  });
};
// 单个选中、取消选中
const handleChecked2 = (item) => {
  item.checked = !item.checked;
};
// 清空
const clearSelect = () => {
  userList.value.forEach((item) => {
    if (item.checked) {
      item.checked = false;
    }
  });
};
// 清空指定项
const deleteItem = (item) => {
  for (let i = 0; i < userList.value.length; i++) {
    if (item.id === userList.value[i].id) {
      userList.value[i].checked = false;
      break;
    }
  }
};

// 弹窗关闭后
const handleClose = () => {
  emits('close');
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  margin-top: 12px;
  .left-content {
    width: 910px;
    padding-right: 30px;
    border-right: 1px solid #2187ff;
  }
  .middle-content {
    width: 910px;
    padding: 0 30px;
    border-right: 1px solid #2187ff;
    .search-box {
      display: flex;
      .select-box {
        flex-shrink: 0;
        width: 176px !important;
        height: 56px;
        line-height: 56px;
        margin: 0 10px;
        color: #83a3be;
        font-size: 32px;
      }
    }
    .user-box {
      margin-left: 10px;
      width: 100%;
      height: 100%;
      .user-table {
        padding: 15px 0;
        display: flex;
        flex-direction: column;
        font-size: 38px;
        color: #fbffff;
        .tr {
          background-color: #102e76;
        }
        .tr,
        .tr2 {
          display: flex;
          padding: 6px 0;
          .td {
            flex: 1;
            display: flex;
            align-items: center;
          }
          .td2 {
            width: 65px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .td3 {
            flex: 2;
            display: flex;
            align-items: center;
          }
        }
        .table-content {
          height: 858px;
          overflow-y: auto;
        }
        .tr2 {
          margin-top: 10px;
          background-color: #122868;
        }
        .phone-icon {
          width: 62px;
          height: 63px;
          background: url('@/assets/images/emergencyCommandMap/communication/phone.png');
          cursor: pointer;
        }
      }
    }
  }

  .custom-select-popper {
    .el-scrollbar {
      .el-select-dropdown__item {
        color: #b1cae0;
        font-size: 32px;
        height: 56px;
        line-height: 56px;
      }
    }
  }
  .input {
    background: transparent;
    color: #83a3be;
    font-size: 32px;
    outline: none;
    appearance: none;
    height: 100%;
    border: none;
    &::placeholder {
      color: #83a3be;
    }
  }
  .tree-container {
    margin-top: 15px;
    display: flex;
    .tree-box {
      width: 100%;
      height: 920px;
      overflow-y: auto;
      padding: 15px 8px;
      :deep(.el-tree) {
        height: 100%;
        background-color: transparent;
        color: #fbffff;
        font-size: 38px;
        .el-tree-node__content {
          height: auto;
          padding-top: 10px;
          padding-bottom: 10px;
          white-space: normal;
          word-break: break-all;
        }
        .el-tree-node__expand-icon {
          color: #297cfc;
          font-size: 23px;
        }
        .el-tree-node:focus > .el-tree-node__content,
        .el-tree-node__content:hover {
          background-color: transparent !important;
        }
      }
    }
  }
  .select-box2 {
    margin-left: 30px;
    width: 910px;
    height: 100%;
    .select-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fbffff;
      font-size: 32px;
      border-bottom: 1px solid #247dff;
      padding: 20px;
      .left-item {
        display: flex;
        align-items: center;
        .text {
          margin: 0 10px;
          color: #00e8ff;
          font-family: 'BEBAS-1';
        }
      }
      .clear-btn {
        color: #00e8ff;
        cursor: pointer;
      }
    }
    .select-content {
      height: 858px;
      overflow-y: auto;
      .box-item {
        border-bottom: 1px solid #247dff;
        padding: 20px;
        position: relative;
        .line {
          color: #fff;
          font-size: 38px;
          display: flex;
          .text1 {
            margin-right: 35px;
          }
          .text2 {
            color: #a7ccdf;
          }
        }
        .close-btn {
          position: absolute;
          right: 10px;
          top: 50px;
          cursor: pointer;
          width: 29px;
          height: 29px;
          background: url('@/assets/images/emergencyCommandMap/communication/close.png') no-repeat;
        }
      }
    }
  }
}
</style>