style: lint格式化文件
This commit is contained in:
@ -1,234 +1,230 @@
|
||||
<template>
|
||||
<PageWrapper dense fixedHeight contentFullHeight>
|
||||
<BasicTableErp @register="registerTable">
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="handleExport"> {{ t('导出') }} </a-button>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex == 'level'">
|
||||
<a-tag :color="getLevel(record.level)">
|
||||
{{ levelData.filter((x) => x.id === record.level)[0]?.name }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.dataIndex == 'state'">
|
||||
<span :style="`color:${record.state === 1 ? '#67c23a' : '#F56C6C'}`">
|
||||
{{ record.state === 1 ? '已处理' : '待处理' }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex == 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '查看',
|
||||
onClick: handleView.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '处理',
|
||||
onClick: handleDispose.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
color: 'error',
|
||||
onClick: handleDelete.bind(null, record),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTableErp>
|
||||
<AlarmModal @register="registerModal" @success="reload" />
|
||||
<AlarmInfomation @register="registerCheckModal" />
|
||||
</PageWrapper>
|
||||
<PageWrapper dense fixedHeight contentFullHeight>
|
||||
<BasicTableErp @register="registerTable">
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="handleExport"> {{ t('导出') }} </a-button>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex == 'level'">
|
||||
<a-tag :color="getLevel(record.level)">
|
||||
{{ levelData.filter((x) => x.id === record.level)[0]?.name }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.dataIndex == 'state'">
|
||||
<span :style="`color:${record.state === 1 ? '#67c23a' : '#F56C6C'}`">
|
||||
{{ record.state === 1 ? '已处理' : '待处理' }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex == 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '查看',
|
||||
onClick: handleView.bind(null, record)
|
||||
},
|
||||
{
|
||||
label: '处理',
|
||||
onClick: handleDispose.bind(null, record)
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
color: 'error',
|
||||
onClick: handleDelete.bind(null, record)
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTableErp>
|
||||
<AlarmModal @register="registerModal" @success="reload" />
|
||||
<AlarmInfomation @register="registerCheckModal" />
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, onMounted, ref } from 'vue';
|
||||
import { useTable, TableAction, BasicColumn, FormSchema } from '/@/components/Table';
|
||||
import BasicTableErp from '/@/components/Table/src/BasicTableErp.vue';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { getDeviceAlarmPageList, deleteDeviceAlarm, exportInfo } from '/@/api/erp/device/alarm';
|
||||
import { getDicDetailList } from '/@/api/system/dic';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { downloadByData } from '/@/utils/file/download';
|
||||
import AlarmModal from './components/AlarmModal.vue';
|
||||
import AlarmInfomation from './components/AlarmInfomation.vue';
|
||||
import { createVNode, onMounted, ref } from 'vue';
|
||||
import { useTable, TableAction, BasicColumn, FormSchema } from '/@/components/Table';
|
||||
import BasicTableErp from '/@/components/Table/src/BasicTableErp.vue';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { getDeviceAlarmPageList, deleteDeviceAlarm, exportInfo } from '/@/api/erp/device/alarm';
|
||||
import { getDicDetailList } from '/@/api/system/dic';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { downloadByData } from '/@/utils/file/download';
|
||||
import AlarmModal from './components/AlarmModal.vue';
|
||||
import AlarmInfomation from './components/AlarmInfomation.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '设备编号',
|
||||
dataIndex: 'number',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'name',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '设备类型',
|
||||
dataIndex: 'typeName',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '设备位置',
|
||||
dataIndex: 'address',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '规格型号',
|
||||
dataIndex: 'model',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '故障等级',
|
||||
dataIndex: 'level',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '故障描述',
|
||||
dataIndex: 'remark',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '负责人',
|
||||
dataIndex: 'dealUserNames',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '告警时间',
|
||||
dataIndex: 'createDate',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '处理状态',
|
||||
dataIndex: 'state',
|
||||
width: 100,
|
||||
},
|
||||
];
|
||||
const { t } = useI18n();
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '设备编号',
|
||||
dataIndex: 'number',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'name',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '设备类型',
|
||||
dataIndex: 'typeName',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '设备位置',
|
||||
dataIndex: 'address',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '规格型号',
|
||||
dataIndex: 'model',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '故障等级',
|
||||
dataIndex: 'level',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '故障描述',
|
||||
dataIndex: 'remark',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '负责人',
|
||||
dataIndex: 'dealUserNames',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '告警时间',
|
||||
dataIndex: 'createDate',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '处理状态',
|
||||
dataIndex: 'state',
|
||||
width: 100
|
||||
}
|
||||
];
|
||||
|
||||
const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'typeId',
|
||||
label: '设备类型',
|
||||
component: 'XjrSelect',
|
||||
colProps: { span: 8 },
|
||||
componentProps: {
|
||||
datasourceType: 'dic',
|
||||
params: { itemId: '1671412696707850241' },
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
placeholder: '请选择设备类型',
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'state',
|
||||
label: '状态',
|
||||
component: 'Select',
|
||||
colProps: { span: 8 },
|
||||
componentProps: {
|
||||
placeholder: '请选择状态',
|
||||
options: [
|
||||
{ label: '已处理', value: 1 },
|
||||
{ label: '待处理', value: 0 },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'createDate',
|
||||
label: '告警时间',
|
||||
component: 'RangePicker',
|
||||
colProps: { span: 8 },
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD',
|
||||
},
|
||||
},
|
||||
];
|
||||
const levelData = ref<Recordable[]>([]);
|
||||
const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'typeId',
|
||||
label: '设备类型',
|
||||
component: 'XjrSelect',
|
||||
colProps: { span: 8 },
|
||||
componentProps: {
|
||||
datasourceType: 'dic',
|
||||
params: { itemId: '1671412696707850241' },
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
placeholder: '请选择设备类型',
|
||||
getPopupContainer: () => document.body
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'state',
|
||||
label: '状态',
|
||||
component: 'Select',
|
||||
colProps: { span: 8 },
|
||||
componentProps: {
|
||||
placeholder: '请选择状态',
|
||||
options: [
|
||||
{ label: '已处理', value: 1 },
|
||||
{ label: '待处理', value: 0 }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'createDate',
|
||||
label: '告警时间',
|
||||
component: 'RangePicker',
|
||||
colProps: { span: 8 },
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD'
|
||||
}
|
||||
}
|
||||
];
|
||||
const levelData = ref<Recordable[]>([]);
|
||||
|
||||
const { notification } = useMessage();
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
const [registerCheckModal, { openModal: openCheckModal }] = useModal();
|
||||
const [registerTable, { reload }] = useTable({
|
||||
title: '设备告警',
|
||||
api: getDeviceAlarmPageList,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
formConfig: {
|
||||
rowProps: {
|
||||
gutter: 16,
|
||||
},
|
||||
schemas: searchFormSchema,
|
||||
fieldMapToTime: [['createDate', ['startTime', 'endTime'], 'YYYY-MM-DD', true]],
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
striped: false,
|
||||
actionColumn: {
|
||||
width: 140,
|
||||
title: t('操作'),
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' },
|
||||
},
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
levelData.value = (await getDicDetailList({ itemId: '1679372182895345665' })) || [];
|
||||
});
|
||||
|
||||
const getLevel = (level) => {
|
||||
const data = levelData.value.filter((x) => x.id === level);
|
||||
if (!data.length) return '';
|
||||
switch (data[0].value) {
|
||||
case '0':
|
||||
return 'error';
|
||||
case '1':
|
||||
return 'warning';
|
||||
case '2':
|
||||
return 'processing';
|
||||
}
|
||||
};
|
||||
|
||||
const handleDispose = (record) => {
|
||||
openModal(true, {
|
||||
id: record.id,
|
||||
const { notification } = useMessage();
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
const [registerCheckModal, { openModal: openCheckModal }] = useModal();
|
||||
const [registerTable, { reload }] = useTable({
|
||||
title: '设备告警',
|
||||
api: getDeviceAlarmPageList,
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
formConfig: {
|
||||
rowProps: {
|
||||
gutter: 16
|
||||
},
|
||||
schemas: searchFormSchema,
|
||||
fieldMapToTime: [['createDate', ['startTime', 'endTime'], 'YYYY-MM-DD', true]]
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
striped: false,
|
||||
actionColumn: {
|
||||
width: 140,
|
||||
title: t('操作'),
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' }
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleView = (record) => {
|
||||
openCheckModal(true, {
|
||||
id: record.id,
|
||||
onMounted(async () => {
|
||||
levelData.value = (await getDicDetailList({ itemId: '1679372182895345665' })) || [];
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (record) => {
|
||||
Modal.confirm({
|
||||
title: t('提示信息'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: t('是否确认删除？'),
|
||||
okText: t('确认'),
|
||||
cancelText: t('取消'),
|
||||
async onOk() {
|
||||
await deleteDeviceAlarm(record.id);
|
||||
notification.success({
|
||||
message: t('提示'),
|
||||
description: t('删除成功'),
|
||||
const getLevel = (level) => {
|
||||
const data = levelData.value.filter((x) => x.id === level);
|
||||
if (!data.length) return '';
|
||||
switch (data[0].value) {
|
||||
case '0':
|
||||
return 'error';
|
||||
case '1':
|
||||
return 'warning';
|
||||
case '2':
|
||||
return 'processing';
|
||||
}
|
||||
};
|
||||
|
||||
const handleDispose = (record) => {
|
||||
openModal(true, {
|
||||
id: record.id
|
||||
});
|
||||
reload();
|
||||
},
|
||||
onCancel() {},
|
||||
});
|
||||
};
|
||||
const handleExport = async () => {
|
||||
const res = await exportInfo();
|
||||
downloadByData(
|
||||
res.data,
|
||||
'设备告警.xlsx',
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const handleView = (record) => {
|
||||
openCheckModal(true, {
|
||||
id: record.id
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (record) => {
|
||||
Modal.confirm({
|
||||
title: t('提示信息'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: t('是否确认删除？'),
|
||||
okText: t('确认'),
|
||||
cancelText: t('取消'),
|
||||
async onOk() {
|
||||
await deleteDeviceAlarm(record.id);
|
||||
notification.success({
|
||||
message: t('提示'),
|
||||
description: t('删除成功')
|
||||
});
|
||||
reload();
|
||||
},
|
||||
onCancel() {}
|
||||
});
|
||||
};
|
||||
const handleExport = async () => {
|
||||
const res = await exportInfo();
|
||||
downloadByData(res.data, '设备告警.xlsx', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user