xuziqiang
5 months ago
9 changed files with 618 additions and 275 deletions
@ -0,0 +1,123 @@ |
|||
<template> |
|||
<ns-drawer |
|||
v-model:visible="visible" |
|||
:width="800" |
|||
class="custom-class" |
|||
title=" " |
|||
destroyOnClose |
|||
:ok="btnClick" |
|||
:cancel="() => (visible = false)" |
|||
placement="right"> |
|||
<div class="drawerContainer"> |
|||
<ns-tree-api v-bind="config" @select="treeSelect" /> |
|||
<a-transfer |
|||
v-model:target-keys="targetKeys" |
|||
:data-source="dataSource" |
|||
style="height: 100%; width: 66%" |
|||
:listStyle="listStyle" |
|||
show-search |
|||
:render="(item) => item.title" |
|||
:filter-option="filterOption" /> |
|||
</div> |
|||
</ns-drawer> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { computed, onMounted, ref } from 'vue'; |
|||
import { NsMessage } from '/nerv-lib/component'; |
|||
import { editCalTreeConfig } from './config'; |
|||
import { group } from '/@/api/deviceManage'; |
|||
import { http } from '/nerv-lib/util/http'; |
|||
const emit = defineEmits(['sure']); |
|||
const props = defineProps({ params: Object }); |
|||
const result = JSON.parse(sessionStorage.getItem('ORGID')!); |
|||
const config = computed(() => { |
|||
return editCalTreeConfig(result); |
|||
}); |
|||
const visible = ref(false); |
|||
const dataSource = ref([]); |
|||
const listStyle = { |
|||
height: '100%', |
|||
width: '100%', |
|||
}; |
|||
const targetKeys = ref([]); |
|||
const currentId = ref(''); |
|||
|
|||
const clearData = () => { |
|||
dataSource.value = []; |
|||
targetKeys.value = []; |
|||
}; |
|||
const toggle = () => { |
|||
visible.value = !visible.value; |
|||
clearData(); |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
getData(currentId.value); |
|||
}); |
|||
|
|||
const filterOption = (inputValue: string, option: any) => { |
|||
return option?.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1; |
|||
}; |
|||
|
|||
const btnClick = () => { |
|||
// visible.value = false; |
|||
|
|||
http |
|||
.post(group.saveComputeList, { |
|||
...props.params, |
|||
groupListId: props.params?.id, |
|||
saveOrgId: currentId.value, |
|||
saveDeviceInfoIds: targetKeys.value, |
|||
}) |
|||
.then(() => { |
|||
emit('sure'); |
|||
NsMessage.success('操作成功'); |
|||
toggle(); |
|||
}); |
|||
}; |
|||
function treeSelect( |
|||
selectedKeys: never[], |
|||
e: { |
|||
selected: boolean; |
|||
selectedNodes: { props: { dataRef: any } }[]; |
|||
node: any; |
|||
event: any; |
|||
}, |
|||
) { |
|||
console.log(selectedKeys, e); |
|||
const { |
|||
dataRef: { title }, |
|||
} = e.node; |
|||
currentId.value = selectedKeys[0]; |
|||
getData(currentId.value); |
|||
} |
|||
const getData = (id) => { |
|||
http |
|||
.post(group.queryEditCompute, { |
|||
orgId: result, |
|||
queryOrgId: id, |
|||
...props.params, |
|||
// energyType: props.params.energyType, |
|||
}) |
|||
.then((res) => { |
|||
dataSource.value = res.data.deviceInfos?.map((item) => { |
|||
item['title'] = item.deviceName; |
|||
item['key'] = item.id.toString(); |
|||
return item; |
|||
}); |
|||
targetKeys.value = res.data.linkGroups?.map((item) => { |
|||
return item.id.toString(); |
|||
}); |
|||
}); |
|||
}; |
|||
defineExpose({ |
|||
toggle, |
|||
}); |
|||
</script> |
|||
<style scoped lang="less"> |
|||
.drawerContainer { |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue