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