You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
3.2 KiB
128 lines
3.2 KiB
<template>
|
|
<ns-drawer
|
|
v-model:visible="visible"
|
|
:width="800"
|
|
class="custom-class"
|
|
title=" "
|
|
destroyOnClose
|
|
:ok="btnClick"
|
|
:cancel="() => (visible = false)"
|
|
placement="right">
|
|
<div class="drawerContainer">
|
|
<div style="padding: 10px; border: 1px solid #d9d9d9; border-radius: 4px">
|
|
<ns-tree-api v-bind="config" @select="treeSelect" />
|
|
</div>
|
|
<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 = [];
|
|
currentId.value = '';
|
|
};
|
|
const toggle = () => {
|
|
visible.value = !visible.value;
|
|
clearData();
|
|
visible.value && getData(currentId.value);
|
|
};
|
|
|
|
onMounted(() => {});
|
|
|
|
const filterOption = (inputValue: string, option: any) => {
|
|
return option?.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1;
|
|
};
|
|
|
|
const btnClick = () => {
|
|
if (!currentId.value) {
|
|
NsMessage.warn('请先选择公司');
|
|
return;
|
|
}
|
|
|
|
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.linkDeviceInfos?.map((item) => {
|
|
return item.id.toString();
|
|
});
|
|
});
|
|
};
|
|
defineExpose({
|
|
toggle,
|
|
});
|
|
</script>
|
|
<style scoped lang="less">
|
|
.drawerContainer {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
</style>
|
|
|