index.vue 2.5 KB
<template>

  <PageWrapper dense contentFullHeight contentClass="flex">
    <div class="category-tree">
      <div class="category-tree-search">
        <a-input-search
          placeholder="请输入关键字搜索"
          enter-button
          size="large"
        />
      </div>
      <a-tree :tree-data="treeData" default-expand-all show-icon :default-selected-keys="['0-0']">
        <template #custom="{ title }">
          <div class="tree-node">
            <span>{{ title }}</span>
            <div class="but_operation">
              <span class="but_type" @click="handleAdd(key)">新增</span>
              <span class="but_type">编辑</span>
              <span class="but_type">删除</span>
            </div>
          </div>
        </template>
      </a-tree>
      <categoryModal @register="registerModal" @handleReload="handleReload"/>
    </div>
  </PageWrapper>

</template>
<script setup lang="ts">
import {PageWrapper} from "/@/components/Page";
import './index.less';
import {categoryModal} from './components/index';
import {useModal} from "/@/components/Modal";

const [registerModal, {openModal}] = useModal();
const treeData = [
  {
    title: '全部',
    key: '0-0',
    slots: {title: 'custom'}, // 添加 title: 'custom'
    children: [
      {
        title: '德风石化有限公司',
        key: '0-0-0',
        slots: {title: 'custom'}, // 添加 title: 'custom'
        children: [
          {
            title: '公共工程',
            key: '0-0-0-0',
            slots: {title: 'custom'}, // 添加 title: 'custom'
            children: [
              {
                title: '中心控制室',
                key: '0-0-0-0-0',
                slots: {title: 'custom'}
              },
              {title: '辅料管区', key: '0-0-0-0-1', slots: {title: 'custom'}},
              {title: 'PSA伐区', key: '0-0-0-0-2', slots: {title: 'custom'}},
              {title: '导热油房区', key: '0-0-0-0-3', slots: {title: 'custom'}},
              {title: '甲醇裂解区', key: '0-0-0-0-4', slots: {title: 'custom'}},
              {title: '机柜间', key: '0-0-0-0-5', slots: {title: 'custom'}}
            ]
          },
          {title: '污水处理站', key: '0-0-0-1', slots: {title: 'custom'}} // 添加 title: 'custom'
        ]
      }
    ]
  }
];

// 处理新建按钮点击事件
const handleAdd = (key: string) => {
  openModal(true, {
    isUpdate: false, // 表示是新建操作
    parentKey: key, // 传递当前节点的 key
  });
};


const handleReload = () => {

};
</script>