Browse Source
2.修改ApiTreeSelect,菜单渲染父节点。getPopupContainer,默认渲染到 body 上,如果遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。 3.AddModelWin 折现属性面板新增选项 场景选择器master
DIAMOND
10 months ago
6 changed files with 163 additions and 17 deletions
@ -0,0 +1,90 @@ |
|||
<!-- |
|||
seneIdTreeSelect.vue |
|||
场景ID树选择组件 |
|||
电子地图专用 |
|||
功能概述:原生的折现属性面板 添加一个场景选择器功能,用于决定防区添加到哪个区域下 |
|||
--> |
|||
<template> |
|||
<ApiTreeSelect :api="sceneIdTree" v-model:value="currentModel.sceneId" placeholder="请选择所属区域" :disabled="disabled"> |
|||
</ApiTreeSelect> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import type { ModalProps } from '/@/components/Modal'; |
|||
import { ref, defineComponent, computed, unref, onMounted, nextTick, getCurrentInstance } from 'vue'; |
|||
import { BasicForm, useForm } from '/@/components/Form'; |
|||
import { Modal, Spin, Input, ConfigProvider } from 'ant-design-vue'; |
|||
import { useLocale } from '/@/locales/useLocale'; |
|||
import { ApiTreeSelect } from '/@/components/Form'; |
|||
import $mitt from '@/utils/earthMap/mitt'; |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
import { useUserStore } from '/@/store/modules/user'; |
|||
const userStore = useUserStore(); |
|||
const { createMessage } = useMessage() |
|||
|
|||
const { proxy }: any = getCurrentInstance(); |
|||
const props = defineProps({ |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
currentModel: { |
|||
type: Object, |
|||
default: {}, |
|||
} |
|||
}) |
|||
onMounted(()=>{ |
|||
console.log("currentModelaaaaaa",props.currentModel); |
|||
// console.log("currentModelaaaaaa",props); |
|||
// console.log("proxy",proxy); |
|||
|
|||
}) |
|||
|
|||
//远程树 |
|||
const sceneIdTree = () => defHttp.get<Recordable[]> |
|||
({ |
|||
url: "/military/msMapScene/queryTreeByCode", |
|||
params: { |
|||
sceneId: userStore.userInfo?.sceneId + "*" |
|||
} |
|||
}).then(res => { return [res]; }) |
|||
; |
|||
|
|||
|
|||
|
|||
</script> |
|||
|
|||
<style scoped lang="less"> |
|||
|
|||
:deep(.ant-select-selector){ |
|||
background-color: rgba(0,0,0,.5) !important |
|||
} |
|||
|
|||
:deep(.ant-select-selection-placeholder){ |
|||
color: #ddd !important; |
|||
} |
|||
|
|||
:deep(.ant-select-arrow){ |
|||
color: #474747 !important; |
|||
} |
|||
|
|||
:deep(.ant-select-dropdown){ |
|||
background-color: #8a8a8a !important; |
|||
color: #ddd !important; |
|||
} |
|||
|
|||
:deep(.ant-select-tree){ |
|||
background-color: #8a8a8a !important; |
|||
color: #ddd !important; |
|||
} |
|||
|
|||
:deep(.ant-select-tree .ant-select-tree-node-content-wrapper:hover){ |
|||
background: #6b6b6b; |
|||
} |
|||
|
|||
:deep(.ant-select-selection-item){ |
|||
color: #ddd !important; |
|||
} |
|||
|
|||
</style> |
Loading…
Reference in new issue