SaaS-lib/hx-ai-intelligent/src/view/equipmentManage/group/index.vue

<template>
  <editDrawer ref="editDrawerRef" />
  <editGroup ref="editGroupRef" />
  <editFormula ref="editFormulaRef" />

  <!-- <ns-modal ref="modalRef" title="新增" v-model:visible="visible">
    <ns-form ref="formRef" :schemas="formSchema" :model="formData" formLayout="formVertical" />
  </ns-modal> -->

  <NsModalFrom ref="modalFormRef" v-bind="nsModalFormConfig" />
  <div class="groupContainer">
    <div class="tree">
      <ns-tree-api v-bind="tConfig" @select="handleSelect">
        <template #title="data">
          <div class="treeRow">
            <span>{{ data.title }}</span>
            <a-dropdown>
              <ns-icon name="actionMore" size="14" class="actionMore" />
              <template #overlay>
                <a-menu>
                  <a-menu-item
                    v-for="(item, index) in actionList"
                    :key="index"
                    @click="item.func(data)">
                    <span>{{ item.title }}</span>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </template>
      </ns-tree-api>
    </div>
    <ns-view-list-table v-show="defaultType" class="table" v-bind="config" />
    <ns-view-list-table v-show="!defaultType" class="table" v-bind="configCal" />
  </div>
</template>
<script lang="ts" setup>
  import { createVNode, nextTick, onMounted, ref } from 'vue';
  import { tableConfig, treeConfig, tableConfigCal, formSchema } from './config';
  import { useParams } from '/nerv-lib/use';
  import editDrawer from './edit.vue';
  import editGroup from './editGroup.vue';
  import editFormula from './editFormula.vue';
  import { NsMessage, NsModal } from '/nerv-lib/component';
  import NsModalFrom from '/@/components/ns-modal-form.vue';
  import { group } from '/@/api/deviceManage';

  type opType = 'up' | 'down';
  const { getParams } = useParams();
  const modalFormRef = ref();
  const editDrawerRef = ref();
  const editGroupRef = ref();
  const editFormulaRef = ref();
  const defaultType = ref(true);
  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
  const config = tableConfig(editDrawerRef, editGroupRef, editFormulaRef);
  const configCal = tableConfigCal(editDrawerRef, editGroupRef, editFormulaRef);
  const tConfig = treeConfig(result);
  const nsModalFormConfig = ref({
    api: group.creatOrUpdate,
    data: {},
    title: '新增',
    schemas: formSchema,
    extraModalConfig: {
      bodyStyle: { paddingBottom: 0 },
    },
  });
  nextTick(() => {
    console.log(modalFormRef.value, 'modal');
  });

  const addNodeSon = (data) => {
    console.log(data);
    nsModalFormConfig.value.title = '新增';
    nsModalFormConfig.value.data = {
      pointName: '新增',
      isCreate: true,
      isCreatSon: false,
      orgId: result,
    };
    modalFormRef.value?.toggle();
  };
  const editNode = (data) => {
    console.log(data);
    nsModalFormConfig.value.title = '编辑';
    nsModalFormConfig.value.data = { pointName: 123 };
    modalFormRef.value?.toggle();

    data.value = { pointName: 'qwe' };
  };
  const moveNode = (data, type: opType) => {
    console.log(data);
  };

  const deleteNode = (a) => {
    NsModal.confirm({
      content: '确定删除吗?',
      onOk: () => {
        console.log(a);
      },
    });
  };
  const filterAction = (data) => {};
  const actionList = [
    { title: '新增子节点', key: 'addNodeSon', func: (data) => addNodeSon(data) },
    { title: '编辑', key: 'editNode', func: (data) => editNode(data) },
    { title: '上移', key: 'moveUp', func: (data) => moveNode(data, 'up') },
    { title: '下移', key: 'moveDown', func: (data) => moveNode(data, 'down') },
    { title: '删除', key: 'deleteNode', func: (data) => deleteNode(data) },
  ];
  const handleSelect = () => {
    defaultType.value = !defaultType.value;
  };
</script>
<style lang="less" scoped>
  .groupContainer {
    height: 100%;
    overflow-y: auto;
    background-color: @ns-content-bg;
    display: flex;
    // gap: @ns-gap;
    .tree,
    .table {
      background-color: @white;
      border-radius: @ns-border-radius;
      overflow-y: auto;
    }

    .tree {
      margin-right: @ns-gap;
      :deep(.ant-spin-nested-loading) {
        width: 300px;
        background-color: @white;
      }
    }
    .table {
      flex: 1;
      min-width: 0;
    }
  }

  .actionMore {
    display: none;
  }
  :deep(.ant-tree-node-content-wrapper) {
    &:hover {
      .actionMore {
        display: block;
      }
    }
  }

  .treeRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>