feat: 分组切换
This commit is contained in:
xuziqiang
@@ -30,6 +30,22 @@ const tableKeyMap = [
|
||||
dataIndex: 'position',
|
||||
},
|
||||
];
|
||||
const tableCalKeyMap = [
|
||||
{
|
||||
title: '来源企业',
|
||||
dataIndex: 'id',
|
||||
},
|
||||
{
|
||||
title: '节点编号',
|
||||
dataIndex: 'deviceName',
|
||||
textNumber: 8,
|
||||
textEllipsis: true,
|
||||
},
|
||||
{
|
||||
title: '节点路径',
|
||||
dataIndex: 'position',
|
||||
},
|
||||
];
|
||||
const doWnload = (url) => {
|
||||
const a = document.createElement('a');
|
||||
document.body.appendChild(a);
|
||||
@@ -41,54 +57,55 @@ const doWnload = (url) => {
|
||||
};
|
||||
|
||||
const mockData = ref(data.listData);
|
||||
export const treeConfig = {
|
||||
defaultExpandAll: true,
|
||||
header: {
|
||||
icon: 'orgLink',
|
||||
title: '能耗分组',
|
||||
},
|
||||
|
||||
api: () => {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(data);
|
||||
}, 100);
|
||||
});
|
||||
},
|
||||
formConfig: {
|
||||
schemas: [
|
||||
{
|
||||
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: '请输入',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
export const tableConfig = (el, elGroup, elFormula) => {
|
||||
return {
|
||||
title: '设备台账',
|
||||
title: '点位信息',
|
||||
// api: '/carbon_emission/device/getDeviceList',
|
||||
value: mockData.value,
|
||||
treeConfig: {
|
||||
defaultExpandAll: true,
|
||||
header: {
|
||||
icon: 'orgLink',
|
||||
title: '分组管理',
|
||||
},
|
||||
api: () => {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(data);
|
||||
}, 100);
|
||||
});
|
||||
},
|
||||
formConfig: {
|
||||
schemas: [
|
||||
{
|
||||
field: 'type',
|
||||
label: '',
|
||||
component: 'NsRadioGroup',
|
||||
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: '请输入',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
headerActions: [
|
||||
{
|
||||
@@ -249,11 +266,108 @@ export const tableConfig = (el, elGroup, elFormula) => {
|
||||
};
|
||||
};
|
||||
|
||||
export const treeConfig = {
|
||||
defaultExpandAll: true,
|
||||
defaultSelectedKeys: ['A008'],
|
||||
resultField: 'insertData',
|
||||
api: () => {
|
||||
return Promise.resolve(data);
|
||||
},
|
||||
export const tableConfigCal = (el, elGroup, elFormula) => {
|
||||
return {
|
||||
title: '点位信息',
|
||||
// api: '/carbon_emission/device/getDeviceList',
|
||||
value: mockData.value,
|
||||
|
||||
headerActions: [
|
||||
{
|
||||
label: '编辑',
|
||||
name: 'groupEdit',
|
||||
type: 'primary',
|
||||
handle: (a, b) => {
|
||||
el.value.toggle();
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '批量删除',
|
||||
name: 'groupTemDownload',
|
||||
type: 'primary',
|
||||
dynamicDisabled: (data: any) => {
|
||||
return data.list.length === 0;
|
||||
},
|
||||
handle: () => {
|
||||
mockData.value.splice(0, 2);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '批量导出',
|
||||
name: 'groupExports',
|
||||
type: 'primary',
|
||||
dynamicDisabled: (data: any) => {
|
||||
return data.list.length === 0;
|
||||
},
|
||||
extra: {
|
||||
xlsxMap: tableKeyMap,
|
||||
xlsxName: '分组信息YYYY-MM-DD',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '批量导入',
|
||||
name: 'groupImport',
|
||||
type: 'primary',
|
||||
extra: {
|
||||
// api: props.postImportApi, // 导入接口名
|
||||
title: '设备信息', // 弹窗title
|
||||
templateName: 'whiteListUser', // 所使用的文件名称
|
||||
indexName: '设备id', // 匹配类型字段
|
||||
message: [
|
||||
{ label: '1、若必填项未填写，则不能进行导入操作' },
|
||||
{ label: `2、当重复时，则更新数据。` },
|
||||
{ label: '3、数据将从模版的第五行进行导入。' },
|
||||
{ label: '4、文件导入勿超过5MB。' },
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
label: '模板下载',
|
||||
name: 'groupTemDownload',
|
||||
type: 'primary',
|
||||
handle: () => {
|
||||
// http.get('/asset/file/whiteListUser.xlsx');
|
||||
doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
|
||||
},
|
||||
},
|
||||
],
|
||||
columns: tableCalKeyMap,
|
||||
columnActions: {
|
||||
title: '操作',
|
||||
actions: [
|
||||
{
|
||||
label: '删除',
|
||||
name: 'FeedBackDetail',
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
confirm: true,
|
||||
handle: () => {
|
||||
mockData.value.splice(0, 1);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
formConfig: {
|
||||
schemas: [
|
||||
{
|
||||
field: 'name',
|
||||
label: '设备名称',
|
||||
component: 'NsInput',
|
||||
componentProps: {
|
||||
placeholder: '请选择公司',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'provider',
|
||||
component: 'NsInput',
|
||||
componentProps: {
|
||||
placeholder: '请输入节点编号',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// pagination: { pageSizeOptions: false },
|
||||
rowKey: 'id',
|
||||
};
|
||||
};
|
||||
|
||||
@@ -2,11 +2,17 @@
|
||||
<editDrawer ref="editDrawerRef" />
|
||||
<editGroup ref="editGroupRef" />
|
||||
<editFormula ref="editFormulaRef" />
|
||||
<ns-view-list-table v-bind="config" />
|
||||
<div class="groupContainer">
|
||||
<div class="tree">
|
||||
<ns-tree-api v-bind="treeConfig" @select="handleSelect" />
|
||||
</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 } from './config';
|
||||
import { tableConfig, treeConfig, tableConfigCal } from './config';
|
||||
import { useParams } from '/nerv-lib/use';
|
||||
import editDrawer from './edit.vue';
|
||||
import editGroup from './editGroup.vue';
|
||||
@@ -16,6 +22,37 @@
|
||||
const editDrawerRef = ref();
|
||||
const editGroupRef = ref();
|
||||
const editFormulaRef = ref();
|
||||
const defaultType = ref(true);
|
||||
const config = tableConfig(editDrawerRef, editGroupRef, editFormulaRef);
|
||||
const configCal = tableConfigCal(editDrawerRef, editGroupRef, editFormulaRef);
|
||||
const handleSelect = () => {
|
||||
defaultType.value = !defaultType.value;
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.groupContainer {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background-color: @ns-content-bg;
|
||||
display: flex;
|
||||
// gap: @ns-gap;
|
||||
.tree,
|
||||
.table {
|
||||
background-color: @white;
|
||||
border-radius: @ns-border-radius;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tree {
|
||||
margin-right: @ns-gap;
|
||||
:deep(.ant-spin-nested-loading) {
|
||||
width: 300px;
|
||||
background-color: @white;
|
||||
}
|
||||
}
|
||||
.table {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user