---初始化后台管理web页面项目
This commit is contained in:
135
src/views/erp/device/components/AlarmModal.vue
Normal file
135
src/views/erp/device/components/AlarmModal.vue
Normal file
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" title="处理告警" @ok="handleSubmit">
|
||||
<BasicForm @register="registerForm">
|
||||
<template #user="{ model }">
|
||||
<SelectUser
|
||||
v-model:value="model.dealUserIds"
|
||||
suffix="ant-design:setting-outlined"
|
||||
placeholder="请选择处理人"
|
||||
/>
|
||||
</template>
|
||||
<template #upload="{ model }">
|
||||
<Upload v-model:value="model.filePath" listType="picture" />
|
||||
</template>
|
||||
</BasicForm>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||
import { FormSchema } from '/@/components/Table';
|
||||
import { updateDeviceAlarm, getDeviceAlarmInfo } from '/@/api/erp/device/alarm';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import SelectUser from '/@/components/Form/src/components/SelectUser.vue';
|
||||
import Upload from '/@/components/Form/src/components/Upload.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const FormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'dealUserIds',
|
||||
label: '处理人',
|
||||
component: 'Input',
|
||||
slot: 'user',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
{
|
||||
field: 'level',
|
||||
label: '故障等级',
|
||||
component: 'DicSelect',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
placeholder: '请选择故障等级',
|
||||
itemId: '1679372182895345665',
|
||||
isShowAdd: false,
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'remark',
|
||||
label: '故障描述',
|
||||
component: 'Input',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
placeholder: '请输入故障描述',
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'dealWay',
|
||||
label: '处理方法',
|
||||
component: 'InputTextArea',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
placeholder: '请输入处理方法',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'filePath',
|
||||
label: '附件',
|
||||
component: 'Upload',
|
||||
slot: 'upload',
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
{
|
||||
field: 'state',
|
||||
label: '选择状态',
|
||||
component: 'RadioGroup',
|
||||
required: true,
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '已处理', value: 1 },
|
||||
{ label: '待处理', value: 0 },
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const { notification } = useMessage();
|
||||
const rowId = ref('');
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
|
||||
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
|
||||
labelWidth: 100,
|
||||
schemas: FormSchema,
|
||||
showActionButtonGroup: false,
|
||||
actionColOptions: {
|
||||
span: 23,
|
||||
},
|
||||
});
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
resetFields();
|
||||
setModalProps({ confirmLoading: false, destroyOnClose: true });
|
||||
|
||||
rowId.value = data.id;
|
||||
const record = await getDeviceAlarmInfo(data.id);
|
||||
setFieldsValue({
|
||||
...record,
|
||||
});
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const values = await validate();
|
||||
setModalProps({ confirmLoading: true });
|
||||
|
||||
values.id = rowId.value;
|
||||
await updateDeviceAlarm(values);
|
||||
notification.success({
|
||||
message: '处理告警',
|
||||
description: t('成功'),
|
||||
});
|
||||
|
||||
closeModal();
|
||||
emit('success');
|
||||
} catch (error) {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user