tijiao

litian

2025-03-18 4a8d8a5f49321d9597251e7ba69bf39f78baa51b

 src/components/TreeMenu.vue

@@ -1,34 +1,92 @@
<template>
  <div class="tree-menu">
    <div class="topMenu">
      <span class="topMenu-title">模型库</span>
      <div class="btnGroup">
        <el-icon class="icon1"><FolderAdd /></el-icon>
        <el-icon class="icon2"><Edit /></el-icon>
        <el-icon class="icon3"><Delete /></el-icon>
  <div class="tree-menu-box">
    <div class="flex">
      <div class="tree-menu">
        <div class="topMenu">
          <span class="topMenu-title">{{ menuName }}</span>
          <div class="btnGroup" v-if="props.menuItem == 'model'">
            <el-icon class="icon1" @click="addBtn"><FolderAdd /></el-icon>
            <el-icon class="icon2" @click="editBtn"><Edit /></el-icon>
            <el-icon class="icon3" @click="delBtn"><Delete /></el-icon>
          </div>
        </div>
        <el-tree
          ref="treeRef"
          :data="filteredData"
          :props="defaultProps"
          :filter-node-method="filterNode"
          default-expand-all
          @node-click="handleNodeClick"
        >
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <el-icon v-if="data.icon"><component :is="data.icon" /></el-icon>
              <span>{{ node.label }}</span>
            </span>
          </template>
        </el-tree>
      </div>
      <div class="tree-menu" v-if="props.menuItem == 'systemManage'">
        <div class="topMenu">
          <span class="topMenu-title">{{ systemMenuName }}</span>
          <div class="btnGroup">
            <el-icon class="icon1" @click="addBtn"><FolderAdd /></el-icon>
            <el-icon class="icon2" @click="editBtn"><Edit /></el-icon>
            <el-icon class="icon3" @click="delBtn"><Delete /></el-icon>
          </div>
        </div>
        <el-tree
          ref="treeRef"
          :data="systemData"
          :props="defaultProps"
          :filter-node-method="filterNode1"
          default-expand-all
          @node-click="systemClick"
        >
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <el-icon v-if="data.icon"><component :is="data.icon" /></el-icon>
              <span>{{ node.label }}</span>
            </span>
          </template>
        </el-tree>
      </div>
    </div>
    <el-tree
      ref="treeRef"
      :data="filteredData"
      :props="defaultProps"
      :filter-node-method="filterNode"
      default-expand-all
      @node-click="handleNodeClick"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <el-icon v-if="data.icon"><component :is="data.icon" /></el-icon>
          <span>{{ node.label }}</span>
        </span>
      </template>
    </el-tree>
  </div>
  <el-dialog
    v-model="dialogFormVisible"
    :title="dialogTitle"
    width="500"
    @close="closeDialog(formRef)"
  >
    <el-form :model="form" ref="formRef" :rules="formRules" label-width="140px">
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" autocomplete="off" placeholder="请输入" style="width: 240px"/>
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          v-model="form.description"
          style="width: 240px"
          :rows="2"
          type="textarea"
          placeholder="请输入"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog(formRef)">取消</el-button>
        <el-button type="primary" @click="submitBtn(formRef)"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, defineProps } from "vue";
import { ref, reactive, defineProps, onMounted } from "vue";
import { useRouter } from "vue-router";
import type { FormInstance, FormRules} from "element-plus";
import { ElMessage, ElMessageBox } from 'element-plus'
import { Document, FolderOpened } from "@element-plus/icons-vue";

const router = useRouter();
@@ -36,13 +94,21 @@
const props = defineProps<{
  menuItem: string;
}>();

const menuName = ref("模型库");
const filteredData = ref();
const systemMenuName = ref("");
const systemData = ref();
const selectData = ref()
interface TreeNode {
  label: string;
  path?: string;
  icon?: string;
  children?: TreeNode[];
}
const defaultProps = {
  children: "children",
  label: "label",
};

const modelTreeData = ref<TreeNode[]>([
  {
@@ -50,51 +116,217 @@
    icon: "FolderOpened",
    children: [
      {
        label: "型号1",
        path: "/model/childrenModel01",
        label: "着陆器模型库",
        path: "/model/landerModel",
        icon: "Document",
      },
      {
        label: "型号2",
        label: "巡视器模型库",
        path: "/model/roverModel",
        icon: "Document",
      },
      {
        label: "飞跃器模型库",
        path: "/model/leapMachineModel",
        icon: "Document",
      },
    ],
  },
]);

const defaultProps = {
  children: "children",
  label: "label",
};
const visualSimulationTreeData = ref<TreeNode[]>([
  {
    label: "测试仿真",
    path: "/testSimulation",
    icon: "Document",
  },
  {
    label: "实时仿真",
    path: "realTimeSimulation",
    icon: "Document",
  },
  {
    label: "自主功能",
    path: "/autonomousFunction",
    icon: "Document",
  },
]);

const filteredData = ref(modelTreeData.value);
const systemManageTreeData = ref<TreeNode[]>([
  {
    label: "机构用户",
    path: "/userManage",
    icon: "Document",
  },
  {
    label: "角色权限管理",
    path: "/roleManage",
    icon: "Document",
  },
]);

const systemTreeData = ref<TreeNode[]>([
  {
    label: "501",
    path: "",
    icon: "Document",
    children: [
      {
        label: "一室",
        path: "",
        icon: "",
      },
      {
        label: "二室",
        path: "",
        icon: "",
      },
      {
        label: "三室",
        path: "",
        icon: "",
      },
    ],
  },
]);
const systemTreeData1 = ref<TreeNode[]>([
  {
    label: "系统管理员",
    path: "",
    icon: "",
  },
  {
    label: "模型管理员",
    path: "",
    icon: "",
  },
  {
    label: "测试人员",
    path: "",
    icon: "",
  },
  {
    label: "报告查看人员",
    path: "",
    icon: "",
  },
]);

const dialogFormVisible = ref(false);
const dialogTitle = ref()
const formRef = ref<FormInstance>();
const form = reactive({
  name: "",
  description: "",
});

interface formInfo {
  name: string;
}
const formRules = reactive<FormRules<formInfo>>({
  name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
});

onMounted(() => {
  console.log(props.menuItem, "123");
  if (props.menuItem == "model") {
    filteredData.value = modelTreeData.value;
    menuName.value = "模型库";
  } else if (props.menuItem == "simulation") {
    menuName.value = "可视化仿真";
    filteredData.value = visualSimulationTreeData.value;
  } else if (props.menuItem == "systemManage") {
    menuName.value = "系统管理";
    filteredData.value = systemManageTreeData.value;
  } else {
    filteredData.value = [];
  }
  systemMenuName.value = systemManageTreeData.value[0].label;
});

const filterNode = (value: string, data: TreeNode) => {
  if (!value) return true;
  return data.label.toLowerCase().includes(value.toLowerCase());
};

const filterNode1 = (value: string, data: TreeNode) => {
  if (!value) return true;
  return data.label.toLowerCase().includes(value.toLowerCase());
};

const handleNodeClick = (data: TreeNode) => {
  console.log(data, 12);
  selectData.value = data
  if (data.path) {
    systemMenuName.value = data.label;
    if (data.path == "/userManage") {
      systemData.value = systemTreeData.value;
    } else if (data.path == "/roleManage") {
      systemData.value = systemTreeData1.value;
    }
    router.push(data.path);
  }
};

watch(
  () => props.menuItem,
  (value) => {
    if (value == "/" || value == "/model") {
      filteredData.value = modelTreeData.value;
    } else {
      filteredData.value = []
//添加目录
const addBtn = () => {
  dialogTitle.value = '添加'
  dialogFormVisible.value = true;
};
const submitBtn = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
    }
  }
);
  });
};
const closeDialog = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  dialogFormVisible.value = false;
};

const editBtn =() =>{
  dialogTitle.value = '编辑'
  form.name = selectData.value.label
  dialogFormVisible.value = true;

}

const delBtn =()=>{
  ElMessageBox.confirm(
    '确定要删除选中的数据?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      console.log()
     
    })
    .catch(() => {
      
    })
}

const systemClick = (data: TreeNode) => {};
</script>

<style lang="less" scoped>
.tree-menu {
.tree-menu-box {
  height: 100%;
  background-color: #fff;

  .flex {
    height: 100%;
  }
}
.tree-menu {
  width: 260px;
  height: 100%;
  border-right: 1px solid #e9eef3;
  :deep(.el-tree) {
    padding: 10px;
  }