164 lines
3.8 KiB
Vue
164 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
import { Page, useVbenModal } from '@vben/common-ui';
|
|
|
|
|
|
import {
|
|
Button as TButton,
|
|
Link as TLink,
|
|
Space as TSpace,
|
|
Switch as TSwitch,
|
|
Tag as TTag
|
|
} from 'tdesign-vue-next';
|
|
|
|
import { message } from '#/adapter/tdesign';
|
|
|
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
|
import { getDeviceListByPage } from '#/api/core/device';
|
|
import { toObject } from '#/enum';
|
|
|
|
import { useGridSchema, useSearchFormSchema } from './data';
|
|
import Form from './form.vue';
|
|
|
|
const [FormModel, formModelApi] = useVbenModal({
|
|
connectedComponent: Form,
|
|
destroyOnClose: true,
|
|
});
|
|
|
|
const [Grid, GridApi] = useVbenVxeGrid({
|
|
formOptions: {
|
|
schema: useSearchFormSchema(),
|
|
showCollapseButton: false,
|
|
submitButtonOptions: {
|
|
content: '查询',
|
|
},
|
|
submitOnChange: true,
|
|
submitOnEnter: true,
|
|
},
|
|
gridOptions: {
|
|
minHeight: 600,
|
|
columns: useGridSchema(),
|
|
proxyConfig: {
|
|
ajax: {
|
|
query: async ({ page }, formValues) => {
|
|
return await getDeviceListByPage({
|
|
current: page.currentPage,
|
|
pageSize: page.pageSize,
|
|
...formValues,
|
|
});
|
|
},
|
|
},
|
|
},
|
|
treeConfig: {
|
|
parentField: 'parentId',
|
|
rowField: 'id',
|
|
childrenField: 'children',
|
|
showIcon: true,
|
|
expandAll: true,
|
|
},
|
|
},
|
|
// 完全移除分隔条
|
|
separator: false,
|
|
// 你也可以使用下面的代码来移除分隔条
|
|
// separator: { show: false },
|
|
// 或者使用下面的代码来改变分隔条的颜色
|
|
// separator: { backgroundColor: 'rgba(100,100,0,0.5)' },
|
|
});
|
|
|
|
const addEvent = () => {
|
|
formModelApi
|
|
.setData({
|
|
pointId:
|
|
GridApi.formApi.getFieldComponentRef('pointId').getValue() ?? undefined,
|
|
})
|
|
.open();
|
|
};
|
|
const addChildEvent = (row) => {
|
|
formModelApi
|
|
.setData({
|
|
parentId: row.id,
|
|
pointId: row.pointId,
|
|
})
|
|
.open();
|
|
};
|
|
const editEvent = (row) => {
|
|
formModelApi
|
|
.setData({
|
|
...row,
|
|
card: row.cardId ? cardOptionsMap.value[row.cardId] : undefined,
|
|
})
|
|
.open();
|
|
};
|
|
const onRefresh = () => {
|
|
GridApi.reload();
|
|
};
|
|
|
|
const pointOptionsMap = computed(() => {
|
|
return toObject(
|
|
GridApi.formApi.getFieldComponentRef('pointId')?.getOptions() ?? [],
|
|
'value',
|
|
'label',
|
|
);
|
|
});
|
|
const productOptionsMap = computed(() => {
|
|
return toObject(
|
|
GridApi.formApi.getFieldComponentRef('productIds')?.getOptions() ?? [],
|
|
'value',
|
|
'label',
|
|
);
|
|
});
|
|
const cardOptionsMap = computed(() => {
|
|
return toObject(
|
|
GridApi.formApi.getFieldComponentRef('cardId')?.getOptions() ?? [],
|
|
'value',
|
|
'label',
|
|
);
|
|
});
|
|
onMounted(() => {
|
|
const route = useRoute();
|
|
GridApi.formApi.setFieldValue('pointId', route.query.pointId);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Page auto-content-height>
|
|
<Grid table-title="设备列表">
|
|
<template #toolbar-tools>
|
|
<TButton class="mr-2" theme="primary" @click="addEvent">
|
|
新增设备
|
|
</TButton>
|
|
</template>
|
|
<template #status="{ row }">
|
|
<TTag :theme="row.status ? 'success' : 'danger'">
|
|
{{ row.status ? '在线':'离线' }}
|
|
</TTag>
|
|
</template>
|
|
|
|
<template #pointId="{ row }">
|
|
{{ pointOptionsMap[row.pointId] }}
|
|
</template>
|
|
|
|
<template #productId="{ row }">
|
|
{{ productOptionsMap[row.productId] }}
|
|
</template>
|
|
|
|
<template #cardId="{ row }">
|
|
{{ cardOptionsMap[row.cardId] }}
|
|
</template>
|
|
|
|
<template #actions="{ row }">
|
|
<TSpace>
|
|
<TLink theme="primary" @click="editEvent(row)">编辑</TLink>
|
|
<TLink theme="primary" @click="addChildEvent(row)">
|
|
增加子设备
|
|
</TLink>
|
|
</TSpace>
|
|
</template>
|
|
</Grid>
|
|
|
|
<FormModel @success="onRefresh" />
|
|
</Page>
|
|
</template>
|