|
@@ -1,20 +1,21 @@
|
|
|
-<script setup lang="ts">
|
|
|
+<script setup lang="tsx">
|
|
|
import XEUtils from "xe-utils";
|
|
|
import CyTreeInput from "@/components/cy/tree-input/src/CyTreeInput.vue";
|
|
|
+import { ElTree } from "element-plus";
|
|
|
|
|
|
-const props = defineProps<{ templateData: any[] }>();
|
|
|
+const props = defineProps<{ templateData?: any[]; deptTree?: any[] }>();
|
|
|
|
|
|
const defaultProps = {
|
|
|
children: "children",
|
|
|
label: "name",
|
|
|
};
|
|
|
|
|
|
-const treeRef = ref();
|
|
|
-
|
|
|
const emits = defineEmits<{
|
|
|
(e: "cyDialogConfirm" | "cyDialogCancel", value?: any): void;
|
|
|
}>();
|
|
|
|
|
|
+const tabsValue = ref("hospAll");
|
|
|
+
|
|
|
const defaultExpandedKeys = computed(() => {
|
|
|
return XEUtils.map(props.templateData, item => {
|
|
|
return item._id;
|
|
@@ -27,23 +28,52 @@ function contextmenu(event: Event, data) {
|
|
|
if (data.type === "group-category") return;
|
|
|
emits("cyDialogConfirm", data);
|
|
|
}
|
|
|
+
|
|
|
+const TreeShow = defineComponent({
|
|
|
+ props: {
|
|
|
+ data: Object,
|
|
|
+ defaultExpandAll: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ setup(props) {
|
|
|
+ const treeRef = ref(null);
|
|
|
+
|
|
|
+ return () => (
|
|
|
+ <CyTreeInput treeRef={treeRef}>
|
|
|
+ {{
|
|
|
+ default: ({ handelFilter }) => {
|
|
|
+ return (
|
|
|
+ <ElTree
|
|
|
+ ref={treeRef}
|
|
|
+ nodeKey="_id"
|
|
|
+ data={props.data}
|
|
|
+ props={defaultProps}
|
|
|
+ defaultExpandedKeys={defaultExpandedKeys.value}
|
|
|
+ filterNodeMethod={handelFilter}
|
|
|
+ onNodeContextmenu={contextmenu}
|
|
|
+ defaultExpandAll={props.defaultExpandAll}
|
|
|
+ />
|
|
|
+ );
|
|
|
+ },
|
|
|
+ }}
|
|
|
+ </CyTreeInput>
|
|
|
+ );
|
|
|
+ },
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div style="max-height: calc(100vh - 200px); overflow: auto">
|
|
|
+ <div style="height: calc(100vh - 200px)" class="layout_container">
|
|
|
<el-alert type="warning" title="鼠标右键选中" />
|
|
|
- <cy-tree-input :tree-ref="treeRef" :remote-method="XEUtils.noop">
|
|
|
- <template #default="{ handelFilter, treeData }">
|
|
|
- <el-tree
|
|
|
- ref="treeRef"
|
|
|
- node-key="_id"
|
|
|
- :data="props.templateData"
|
|
|
- :props="defaultProps"
|
|
|
- :default-expanded-keys="defaultExpandedKeys"
|
|
|
- :filter-node-method="handelFilter"
|
|
|
- @nodeContextmenu="contextmenu"
|
|
|
- />
|
|
|
- </template>
|
|
|
- </cy-tree-input>
|
|
|
+ <el-tabs v-model="tabsValue" class="el-tabs__fill layout_main">
|
|
|
+ <el-tab-pane label="全院" name="hospAll">
|
|
|
+ <TreeShow :data="props.templateData" />
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="科室" name="dept">
|
|
|
+ <TreeShow :data="props.deptTree" defaultExpandAll />
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
</div>
|
|
|
</template>
|