SaaS-lib/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/linkPeople/index.vue

<template>
  <a-modal
    v-model:visible="show"
    width="1100px"
    style="top: 50%; transform: translateY(-50%); overflow-y: hidden"
    title="添加联系人"
    @ok="handleOk"
    @cancel="handleCancel">
    <div class="box">
      <div class="box-left">
        <div style="width: 100%; display: flex; position: relative">
          <div class="border-card"></div>
          <span style="margin-left: 24px; color: #333333">联系人名单</span>
        </div>
        <img
          style="width: 100%; height: 2px"
          src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" />
        <a-input-search
          v-model:value="searchValue"
          style="margin-bottom: 8px"
          placeholder="请输入关键字" />
        <img
          style="width: 100%; height: 2px"
          src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" />
        <div style="width: 100%; height: 370px; overflow-y: auto">
          <a-tree
            :expanded-keys="expandedKeys"
            :auto-expand-parent="autoExpandParent"
            :tree-data="gData"
            @select="onSelect"
            @expand="onExpand"
        /></div>
        <!-- <ns-tree-api v-bind="config" @select="treeSelect" /> -->
      </div>
      <div class="box-right">
        <div style="width: 100%; display: flex; position: relative">
          <div class="border-card"></div>
          <span style="margin-left: 24px; color: #333333">人员列表 </span>
          <a-input-search
            v-model:value="name"
            style="margin-bottom: 8px; width: 280px; position: absolute; right: 20px"
            placeholder="请输入"
            allowClear="true"
            @search="onSearch" />
        </div>
        <img
          style="width: 100%; height: 2px"
          src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" />
        <div style="width: 100%; height: 450px; overflow-y: auto; padding: 12px 0">
          <a-table
            :row-selection="{
              selectedRowKeys: selectedRowKey,
              preserveSelectedRowKeys: true,
              onChange: onSelectChange,
            }"
            :columns="columns"
            :data-source="dataSource"
            :rowKey="(record: any) => record.id"
            :pagination="pagination"
            :bordered="true"
            :size="'middle'" />
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts">
  import { ref, watch, computed } from 'vue';
  import { defineComponent } from 'vue';
  import type { TreeProps } from 'ant-design-vue';
  import { device } from '/@/api/deviceManage';
  import { http } from '/nerv-lib/util';
  // import { editTreeConfig } from './config';

  const x = 3;
  const y = 2;
  const z = 1;
  const genData: TreeProps['treeData'] = [];

  const generateData = (_level: number, _preKey?: string, _tns?: TreeProps['treeData']) => {
    const preKey = _preKey || '0';
    const tns = _tns || genData;

    const children = [];
    for (let i = 0; i < x; i++) {
      const key = `${preKey}-${i}`;
      tns.push({ title: key, key });
      if (i < y) {
        children.push(key);
      }
    }
    if (_level < 0) {
      return tns;
    }
    const level = _level - 1;
    children.forEach((key, index) => {
      tns[index].children = [];
      return generateData(level, key, tns[index].children);
    });
  };
  generateData(z);

  const dataList: TreeProps['treeData'] = [];
  const generateList = (data: TreeProps['treeData']) => {
    for (let i = 0; i < data.length; i++) {
      const node = data[i];
      const key = node.key;
      dataList.push({ key, title: key });
      if (node.children) {
        generateList(node.children);
      }
    }
  };
  generateList(genData);

  const getParentKey = (
    key: string | number,
    tree: TreeProps['treeData'],
  ): string | number | undefined => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
      const node = tree[i];
      if (node.children) {
        if (node.children.some((item) => item.key === key)) {
          parentKey = node.key;
        } else if (getParentKey(key, node.children)) {
          parentKey = getParentKey(key, node.children);
        }
      }
    }
    return parentKey;
  };
  export default defineComponent({
    setup(props, { emit }) {
      // const config = computed(() => {
      //   return editTreeConfig(result);
      // });
      //组织数
      const orgId = ref('');
      const result = JSON.parse(sessionStorage.getItem('ORGID')!);
      orgId.value = result;
      const dataSource = ref([]);
      const selectedRowKey = ref([]);
      const selectedRow = ref([]);
      const name = ref(null);
      const onSearch = () => {
        http
          .post(device.queryDevicePage, {
            pageNum: pagination.value.current,
            pageSize: pagination.value.pageSize,
            deviceName: name.value,
            orgId: orgId.value,
          })
          .then((res) => {
            dataSource.value = res.data.records;
            pagination.value.total = res.data.total;
          });
      };
      const onSelect = (selectedKeys: any, info: any) => {
        console.log('selected', selectedKeys, info.node.dataRef);
        pagination.value.current = 1;
        onSearch();
      };

      const handleChangePage = (current: number, pageSize: number) => {
        pagination.value.current = current;
        pagination.value.pageSize = pageSize;
        http
          .post(device.queryDevicePage, {
            pageNum: pagination.value.current,
            pageSize: pagination.value.pageSize,
            orgId: orgId.value,
          })
          .then((res) => {
            dataSource.value = res.data.records;
            pagination.value.total = res.data.total;
          });
        console.log(selectedRowKey.value, selectedRow.value);
      };
      const onSelectChange = (selectedRowKeys: any, selectedRows: any) => {
        console.log(selectedRowKeys, selectedRows);
        console.log(selectedRows, '数据');

        selectedRowKey.value = selectedRowKeys;
        selectedRow.value = selectedRows;
      };
      const pagination = ref({
        total: 0,
        size: 'small',
        current: 1,
        pageSize: 10,
        showQuickJumper: true,
        showLessItems: true,
        // showSizeChanger: true,
        showTotal: (total: number, range: any) =>
          total && range ? `显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录` : '',
        onChange: handleChangePage,
      });
      const columns = [
        {
          title: '序号',
          dataIndex: 'address',
          customRender: (text: any) => {
            return text.index + 1;
          },
        },
        {
          title: '姓名',
          dataIndex: 'deviceName',
        },
        {
          title: '性别',
          dataIndex: 'sex',
        },
        {
          title: '组织关系',
          dataIndex: 'address',
        },
        {
          title: '部门  ',
          dataIndex: 'address',
        },
      ];
      const handleOk = () => {
        // 处理确定按钮的逻辑
        emit('handleOk', { id: selectedRowKey.value, data: selectedRow.value });
        show.value = false;
        pagination.value.current = 1;
      };
      const getData = (data: any) => {
        selectedRow.value = data.data;
        selectedRowKey.value = data.id;
        show.value = true;
        http
          .post(device.queryDevicePage, {
            pageNum: pagination.value.current,
            pageSize: pagination.value.pageSize,
            orgId: orgId.value,
          })
          .then((res) => {
            dataSource.value = res.data.records;
            pagination.value.total = res.data.total;
          });
      };
      const show = ref(false);
      const handleCancel = () => {
        // 处理取消按钮的逻辑
        pagination.value.current = 1;
        emit('handleCancel', null);
        show.value = false;
      };
      // 树方法
      const expandedKeys = ref<(string | number)[]>([]);
      const searchValue = ref<string>('');
      const deviceName = ref<string>('');
      const autoExpandParent = ref<boolean>(true);
      const gData = ref<TreeProps['treeData']>(genData);

      const onExpand = (keys: string[]) => {
        expandedKeys.value = keys;
        autoExpandParent.value = false;
        console.log(keys, '数据');
      };
      watch(searchValue, (value) => {
        console.log(gData.value, '数据');

        const expanded = dataList
          .map((item: TreeProps['treeData'][number]) => {
            if (item.title.indexOf(value) > -1) {
              return getParentKey(item.key, gData.value);
            }
            return null;
          })
          .filter((item, i, self) => item && self.indexOf(item) === i);
        expandedKeys.value = expanded;
        searchValue.value = value;
        autoExpandParent.value = true;
        console.log(expandedKeys.value, '数据');
      });
      return {
        columns,
        name,
        orgId,
        // config,
        onSearch,
        dataSource,
        onSelect,
        gData,
        onExpand,
        selectedRow,
        selectedRowKey,
        autoExpandParent,
        expandedKeys,
        onSelectChange,
        pagination,
        handleOk,
        show,
        getData,
        searchValue,
        deviceName,
        handleCancel,
      };
    },
  });
</script>
<style scoped lang="less">
  .border-card {
    border-width: 0px;
    position: absolute;
    left: 0px;
    top: 5px;
    width: 5px;
    height: 15px;
    background: inherit;
    background-color: rgba(251, 156, 67, 1);
    border: none;
    border-radius: 5px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .box {
    width: 100%;
    height: 500px;
    display: flex;
    .box-left {
      width: 300px;
      height: 100%;
      overflow-y: auto;
      padding: 0, 12px;
      gap: 5px;
    }
    .box-right {
      width: calc(100% - 200px);
      height: 100%;
      padding: 0 12px;
      overflow-y: auto;
    }
  }
</style>