fix: 设备联调
This commit is contained in:
@@ -2,6 +2,8 @@ import { dateUtil } from '/nerv-lib/util/date-util';
|
||||
import data from './mock.json';
|
||||
import { http } from '/nerv-lib/util';
|
||||
import { ref } from 'vue';
|
||||
import { group } from '/@/api/deviceManage';
|
||||
import { dict } from '/@/api';
|
||||
const tableKeyMap = [
|
||||
{
|
||||
title: '来源企业',
|
||||
@@ -57,49 +59,105 @@ const doWnload = (url) => {
|
||||
};
|
||||
|
||||
const mockData = ref(data.listData);
|
||||
export const treeConfig = {
|
||||
defaultExpandAll: true,
|
||||
header: {
|
||||
icon: 'orgLink',
|
||||
title: '能耗分组',
|
||||
export const formSchema = [
|
||||
{
|
||||
field: 'isCreate',
|
||||
component: 'NsInput',
|
||||
show: false,
|
||||
},
|
||||
|
||||
api: () => {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(data);
|
||||
}, 100);
|
||||
});
|
||||
{
|
||||
field: 'orgId',
|
||||
component: 'NsInput',
|
||||
show: false,
|
||||
},
|
||||
formConfig: {
|
||||
schemas: [
|
||||
{
|
||||
field: 'isCreatSon',
|
||||
component: 'NsInput',
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
label: '节点名称',
|
||||
field: 'pointName',
|
||||
component: 'NsInput',
|
||||
componentProps: {
|
||||
placeholder: '请输入节点名称(必填)',
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
field: 'type',
|
||||
label: '',
|
||||
component: 'NsSelect',
|
||||
autoSubmit: true,
|
||||
defaultValue: 1,
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '碳排', value: 1 },
|
||||
{ label: '用电量', value: 2 },
|
||||
{ label: '用水量', value: 3 },
|
||||
{ label: '燃气量', value: 4 },
|
||||
{ label: '供热量', value: 5 },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
label: '',
|
||||
component: 'NsInput',
|
||||
autoSubmit: true,
|
||||
componentProps: {
|
||||
placeholder: '请输入',
|
||||
},
|
||||
required: true,
|
||||
message: '请输入节点名称',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '节点类型',
|
||||
field: 'pointType',
|
||||
component: 'NsSelectApi',
|
||||
componentProps: {
|
||||
placeholder: '请选择节点类型(必填)',
|
||||
api: dict,
|
||||
params: { dicKey: 'COUNT_POINT' },
|
||||
immediate: true,
|
||||
resultField: 'data.COUNT_POINT',
|
||||
labelField: 'cnValue',
|
||||
valueField: 'cnValue',
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入节点类型',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
export const treeConfig = (orgId) => {
|
||||
return {
|
||||
defaultExpandAll: true,
|
||||
header: {
|
||||
icon: 'orgLink',
|
||||
title: '能耗分组',
|
||||
},
|
||||
params: { orgId },
|
||||
api: group.queryDeviceGroupTree,
|
||||
// api: () => {
|
||||
// return new Promise((resolve) => {
|
||||
// setTimeout(() => {
|
||||
// resolve({ data: [{ title: '全部', key: 'all', children: data.data }] });
|
||||
// }, 100);
|
||||
// });
|
||||
// },
|
||||
transform: (data) => {
|
||||
return [{ title: '全部', key: 'all', selectable: false, children: data }];
|
||||
},
|
||||
formConfig: {
|
||||
schemas: [
|
||||
{
|
||||
field: 'energyType',
|
||||
label: '',
|
||||
component: 'NsSelectApi',
|
||||
autoSubmit: true,
|
||||
componentProps: {
|
||||
api: dict,
|
||||
params: { dicKey: 'ENERGY_TYPE' },
|
||||
immediate: true,
|
||||
resultField: 'data.ENERGY_TYPE',
|
||||
labelField: 'cnValue',
|
||||
valueField: 'cnValue',
|
||||
placeholder: '请选择能耗种类',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'pointName',
|
||||
label: '',
|
||||
component: 'NsInput',
|
||||
autoSubmit: true,
|
||||
componentProps: {
|
||||
placeholder: '请输入节点名称',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
};
|
||||
export const tableConfig = (el, elGroup, elFormula) => {
|
||||
return {
|
||||
|
@@ -2,29 +2,113 @@
|
||||
<editDrawer ref="editDrawerRef" />
|
||||
<editGroup ref="editGroupRef" />
|
||||
<editFormula ref="editFormulaRef" />
|
||||
|
||||
<!-- <ns-modal ref="modalRef" title="新增" v-model:visible="visible">
|
||||
<ns-form ref="formRef" :schemas="formSchema" :model="formData" formLayout="formVertical" />
|
||||
</ns-modal> -->
|
||||
|
||||
<NsModalFrom ref="modalFormRef" v-bind="nsModalFormConfig" />
|
||||
<div class="groupContainer">
|
||||
<div class="tree">
|
||||
<ns-tree-api v-bind="treeConfig" @select="handleSelect" />
|
||||
<ns-tree-api v-bind="tConfig" @select="handleSelect">
|
||||
<template #title="data">
|
||||
<div class="treeRow">
|
||||
<span>{{ data.title }}</span>
|
||||
<a-dropdown>
|
||||
<ns-icon name="actionMore" size="14" class="actionMore" />
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item
|
||||
v-for="(item, index) in actionList"
|
||||
:key="index"
|
||||
@click="item.func(data)">
|
||||
<span>{{ item.title }}</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</ns-tree-api>
|
||||
</div>
|
||||
<ns-view-list-table v-show="defaultType" class="table" v-bind="config" />
|
||||
<ns-view-list-table v-show="!defaultType" class="table" v-bind="configCal" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, onMounted, ref } from 'vue';
|
||||
import { tableConfig, treeConfig, tableConfigCal } from './config';
|
||||
import { createVNode, nextTick, onMounted, ref } from 'vue';
|
||||
import { tableConfig, treeConfig, tableConfigCal, formSchema } from './config';
|
||||
import { useParams } from '/nerv-lib/use';
|
||||
import editDrawer from './edit.vue';
|
||||
import editGroup from './editGroup.vue';
|
||||
import editFormula from './editFormula.vue';
|
||||
import { NsMessage, NsModal } from '/nerv-lib/component';
|
||||
import NsModalFrom from '/@/components/ns-modal-form.vue';
|
||||
import { group } from '/@/api/deviceManage';
|
||||
|
||||
type opType = 'up' | 'down';
|
||||
const { getParams } = useParams();
|
||||
const modalFormRef = ref();
|
||||
const editDrawerRef = ref();
|
||||
const editGroupRef = ref();
|
||||
const editFormulaRef = ref();
|
||||
const defaultType = ref(true);
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
const config = tableConfig(editDrawerRef, editGroupRef, editFormulaRef);
|
||||
const configCal = tableConfigCal(editDrawerRef, editGroupRef, editFormulaRef);
|
||||
const tConfig = treeConfig(result);
|
||||
const nsModalFormConfig = ref({
|
||||
api: group.creatOrUpdate,
|
||||
data: {},
|
||||
title: '新增',
|
||||
schemas: formSchema,
|
||||
extraModalConfig: {
|
||||
bodyStyle: { paddingBottom: 0 },
|
||||
},
|
||||
});
|
||||
nextTick(() => {
|
||||
console.log(modalFormRef.value, 'modal');
|
||||
});
|
||||
|
||||
const addNodeSon = (data) => {
|
||||
console.log(data);
|
||||
nsModalFormConfig.value.title = '新增';
|
||||
nsModalFormConfig.value.data = {
|
||||
pointName: '新增',
|
||||
isCreate: true,
|
||||
isCreatSon: false,
|
||||
orgId: result,
|
||||
};
|
||||
modalFormRef.value?.toggle();
|
||||
};
|
||||
const editNode = (data) => {
|
||||
console.log(data);
|
||||
nsModalFormConfig.value.title = '编辑';
|
||||
nsModalFormConfig.value.data = { pointName: 123 };
|
||||
modalFormRef.value?.toggle();
|
||||
|
||||
data.value = { pointName: 'qwe' };
|
||||
};
|
||||
const moveNode = (data, type: opType) => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
const deleteNode = (a) => {
|
||||
NsModal.confirm({
|
||||
content: '确定删除吗?',
|
||||
onOk: () => {
|
||||
console.log(a);
|
||||
},
|
||||
});
|
||||
};
|
||||
const filterAction = (data) => {};
|
||||
const actionList = [
|
||||
{ title: '新增子节点', key: 'addNodeSon', func: (data) => addNodeSon(data) },
|
||||
{ title: '编辑', key: 'editNode', func: (data) => editNode(data) },
|
||||
{ title: '上移', key: 'moveUp', func: (data) => moveNode(data, 'up') },
|
||||
{ title: '下移', key: 'moveDown', func: (data) => moveNode(data, 'down') },
|
||||
{ title: '删除', key: 'deleteNode', func: (data) => deleteNode(data) },
|
||||
];
|
||||
const handleSelect = () => {
|
||||
defaultType.value = !defaultType.value;
|
||||
};
|
||||
@@ -55,4 +139,21 @@
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.actionMore {
|
||||
display: none;
|
||||
}
|
||||
:deep(.ant-tree-node-content-wrapper) {
|
||||
&:hover {
|
||||
.actionMore {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.treeRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user