feat 反应器页面
This commit is contained in:
parent
49cb6bb23d
commit
48971c9dc7
84
src/api/admin/reactor.ts
Normal file
84
src/api/admin/reactor.ts
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
import { ReactorPageInput, ReactorPageResponse, ReactorOutput, ReactorAddInput, ReactorUpdateInput, ReactorTypeEnumListOutput } from '/@/api/types/ReactorType'
|
||||||
|
import { RequestParams } from './http-client'
|
||||||
|
import { ContentType, HttpClient } from './http-client'
|
||||||
|
|
||||||
|
export class ReactorApi extends HttpClient {
|
||||||
|
/**
|
||||||
|
* 获取分页列表
|
||||||
|
*/
|
||||||
|
getPage = (data: ReactorPageInput, params: RequestParams = {}) =>
|
||||||
|
this.request<ReactorPageResponse>({
|
||||||
|
path: `/api/admin/equ-reactor/get-page`,
|
||||||
|
method: 'POST',
|
||||||
|
body: data,
|
||||||
|
type: ContentType.Json,
|
||||||
|
...params,
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取单条数据
|
||||||
|
*/
|
||||||
|
get = (params: { id: number }, requestParams: RequestParams = {}) =>
|
||||||
|
this.request<ReactorOutput>({
|
||||||
|
path: `/api/admin/equ-reactor/get`,
|
||||||
|
method: 'GET',
|
||||||
|
query: params,
|
||||||
|
...requestParams,
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增
|
||||||
|
*/
|
||||||
|
add = (data: ReactorAddInput, params: RequestParams = {}) =>
|
||||||
|
this.request<any>({
|
||||||
|
path: `/api/admin/equ-reactor/add`,
|
||||||
|
method: 'POST',
|
||||||
|
body: data,
|
||||||
|
type: ContentType.Json,
|
||||||
|
...params,
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新
|
||||||
|
*/
|
||||||
|
update = (data: ReactorUpdateInput, params: RequestParams = {}) =>
|
||||||
|
this.request<any>({
|
||||||
|
path: `/api/admin/equ-reactor/update`,
|
||||||
|
method: 'PUT',
|
||||||
|
body: data,
|
||||||
|
type: ContentType.Json,
|
||||||
|
...params,
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 软删除
|
||||||
|
*/
|
||||||
|
softDelete = (params: { id: number }, requestParams: RequestParams = {}) =>
|
||||||
|
this.request<any>({
|
||||||
|
path: `/api/admin/equ-reactor/soft-delete`,
|
||||||
|
method: 'DELETE',
|
||||||
|
query: params,
|
||||||
|
...requestParams,
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取反应器类型枚举列表
|
||||||
|
*/
|
||||||
|
getReactorTypeEnumList = (params: RequestParams = {}) =>
|
||||||
|
this.request<ReactorTypeEnumListOutput>({
|
||||||
|
path: `/api/admin/equ-reactor/get-reactor-type-enum-list`,
|
||||||
|
method: 'GET',
|
||||||
|
...params,
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取设备状态枚举列表
|
||||||
|
*/
|
||||||
|
getDeviceStatusEnumList = (params: RequestParams = {}) =>
|
||||||
|
this.request<ReactorTypeEnumListOutput>({
|
||||||
|
path: `/api/admin/equ-reactor/get-device-status-enum-list`,
|
||||||
|
method: 'GET',
|
||||||
|
...params,
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
114
src/api/types/ReactorType.ts
Normal file
114
src/api/types/ReactorType.ts
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
import { ServiceResponse } from './response';
|
||||||
|
import { ServiceRequstPage } from './pageInput'
|
||||||
|
import { PageResponse } from './pageResponse'
|
||||||
|
|
||||||
|
// 设备状态枚举
|
||||||
|
export enum DeviceStatusEnum {
|
||||||
|
Normal = 0, // 正常
|
||||||
|
Fault = 1, // 故障
|
||||||
|
Offline = 2, // 离线
|
||||||
|
Maintenance = 3 // 维护中
|
||||||
|
}
|
||||||
|
|
||||||
|
// 维护标志枚举
|
||||||
|
export enum MaintenanceFlagEnum {
|
||||||
|
None = 0, // 无
|
||||||
|
Regular = 1, // 定期维护
|
||||||
|
Emergency = 2 // 紧急维护
|
||||||
|
}
|
||||||
|
|
||||||
|
// 过滤条件
|
||||||
|
export interface ReactorFilter {
|
||||||
|
/** 设备编号 */
|
||||||
|
deviceNo?: string | null
|
||||||
|
/** 资产编号 */
|
||||||
|
assetNo?: string | null
|
||||||
|
/** 产品ID */
|
||||||
|
productID?: string | null
|
||||||
|
/** 型号 */
|
||||||
|
model?: string | null
|
||||||
|
/** 规格 */
|
||||||
|
specification?: string | null
|
||||||
|
/** 房间ID */
|
||||||
|
roomID?: number | null
|
||||||
|
/** 负责人ID */
|
||||||
|
principalId?: number | null
|
||||||
|
/** 设备状态 */
|
||||||
|
deviceStatus?: DeviceStatusEnum | null
|
||||||
|
/** 维护标志 */
|
||||||
|
maintenanceFlag?: MaintenanceFlagEnum | null
|
||||||
|
/** 状态 */
|
||||||
|
status?: boolean | null
|
||||||
|
/** 是否维护中 */
|
||||||
|
isMaintenance?: boolean | null
|
||||||
|
/** 开始时间 */
|
||||||
|
startTime?: string | null
|
||||||
|
/** 结束时间 */
|
||||||
|
endTime?: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 反应器DTO
|
||||||
|
export interface ReactorDto {
|
||||||
|
/** 设备反应器ID */
|
||||||
|
id?: number
|
||||||
|
/** 排序 */
|
||||||
|
sort?: number
|
||||||
|
/** 设备编号 */
|
||||||
|
deviceNo?: string | null
|
||||||
|
/** 资产编号 */
|
||||||
|
assetNo?: string | null
|
||||||
|
/** 产品ID */
|
||||||
|
productID?: string | null
|
||||||
|
/** 型号 */
|
||||||
|
model?: string | null
|
||||||
|
/** 规格 */
|
||||||
|
specification?: string | null
|
||||||
|
/** 容量（g） */
|
||||||
|
capacity?: number
|
||||||
|
/** 房间ID */
|
||||||
|
roomID?: number
|
||||||
|
/** 房间名称 */
|
||||||
|
roomName?: string | null
|
||||||
|
/** 负责人ID */
|
||||||
|
principalId?: number
|
||||||
|
/** 负责人姓名 */
|
||||||
|
principalName?: string | null
|
||||||
|
/** 设备状态 */
|
||||||
|
deviceStatus?: DeviceStatusEnum
|
||||||
|
/** 设备状态描述 */
|
||||||
|
deviceStatusDesc?: string | null
|
||||||
|
/** 维护标志 */
|
||||||
|
maintenanceFlag?: MaintenanceFlagEnum
|
||||||
|
/** 维护标志描述 */
|
||||||
|
maintenanceFlagDesc?: string | null
|
||||||
|
/** 错误码 */
|
||||||
|
errorCode?: string | null
|
||||||
|
/** 状态（启用禁用） */
|
||||||
|
status?: boolean
|
||||||
|
/** 是否维护中 */
|
||||||
|
isMaintenance?: boolean
|
||||||
|
/** 维护时间 */
|
||||||
|
maintenanceTime?: string | null
|
||||||
|
/** 创建时间 */
|
||||||
|
createdTime?: string | null
|
||||||
|
/** 修改时间 */
|
||||||
|
modifiedTime?: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 反应器类型枚举项
|
||||||
|
export interface ReactorTypeEnumItem {
|
||||||
|
/** 枚举值 */
|
||||||
|
value: number
|
||||||
|
/** 枚举名称 */
|
||||||
|
name: string
|
||||||
|
/** 显示名称/描述 */
|
||||||
|
label: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// API 类型定义
|
||||||
|
export type ReactorPageInput = ServiceRequstPage<ReactorFilter>;
|
||||||
|
export type ReactorPageResponse = ServiceResponse<PageResponse<ReactorDto>>;
|
||||||
|
export type ReactorOutput = ServiceResponse<ReactorDto[]>;
|
||||||
|
export type ReactorAddInput = ReactorDto;
|
||||||
|
export type ReactorUpdateInput = ReactorDto;
|
||||||
|
export type ReactorTypeEnumListOutput = ServiceResponse<ReactorTypeEnumItem[]>;
|
||||||
467
src/views/admin/reactor/components/reactor-form.vue
Normal file
467
src/views/admin/reactor/components/reactor-form.vue
Normal file
@ -0,0 +1,467 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
v-model="dialogVisible"
|
||||||
|
:title="form.id ? '编辑反应器' : '新增反应器'"
|
||||||
|
width="900px"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
:close-on-press-escape="false"
|
||||||
|
destroy-on-close
|
||||||
|
class="reactor-form-dialog"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="form"
|
||||||
|
:rules="rules"
|
||||||
|
label-width="100px"
|
||||||
|
class="reactor-form"
|
||||||
|
>
|
||||||
|
<el-tabs v-model="activeTab" class="reactor-tabs">
|
||||||
|
<el-tab-pane label="基本信息" name="basic">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="设备编号" prop="deviceNo">
|
||||||
|
<el-input v-model="form.deviceNo" placeholder="请输入设备编号" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="资产编号" prop="assetNo">
|
||||||
|
<el-input v-model="form.assetNo" placeholder="请输入资产编号" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="产品编号" prop="productID">
|
||||||
|
<el-input v-model="form.productID" placeholder="请输入产品编号" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="设备型号" prop="model">
|
||||||
|
<el-input v-model="form.model" placeholder="请输入设备型号" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="规格" prop="specification">
|
||||||
|
<el-input v-model="form.specification" placeholder="请输入规格" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="容量" prop="capacity">
|
||||||
|
<el-input-number v-model="form.capacity" :min="0" :step="1" style="width: 100%" placeholder="请输入容量" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="房间" prop="roomID">
|
||||||
|
<el-select v-model="form.roomID" placeholder="请选择房间" style="width: 100%">
|
||||||
|
<el-option
|
||||||
|
v-for="item in roomOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="负责人" prop="principalId">
|
||||||
|
<el-select v-model="form.principalId" placeholder="请选择负责人" style="width: 100%">
|
||||||
|
<el-option
|
||||||
|
v-for="item in principalOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="设备状态" prop="deviceStatus">
|
||||||
|
<el-select v-model="form.deviceStatus" placeholder="请选择设备状态" style="width: 100%">
|
||||||
|
<el-option
|
||||||
|
v-for="item in deviceStatusOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="维护标志" prop="maintenanceFlag">
|
||||||
|
<el-select v-model="form.maintenanceFlag" placeholder="请选择维护标志" style="width: 100%">
|
||||||
|
<el-option
|
||||||
|
v-for="item in maintenanceFlagOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="排序" prop="sort">
|
||||||
|
<el-input-number v-model="form.sort" :min="0" :step="1" style="width: 100%" placeholder="请输入排序" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="是否维护中" prop="isMaintenance">
|
||||||
|
<el-switch v-model="form.isMaintenance" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="设备配置" name="config">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="地秤ID" prop="equScaleId">
|
||||||
|
<el-input-number v-model="form.equScaleId" :min="0" :step="1" style="width: 100%" placeholder="请输入地秤ID" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="补料秤ID" prop="feedingScaleId">
|
||||||
|
<el-input-number v-model="form.feedingScaleId" :min="0" :step="1" style="width: 100%" placeholder="请输入补料秤ID" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="继电器ID" prop="relayID">
|
||||||
|
<el-input-number v-model="form.relayID" :min="0" :step="1" style="width: 100%" placeholder="请输入继电器ID" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="报警器ID" prop="equAlarmId">
|
||||||
|
<el-input-number v-model="form.equAlarmId" :min="0" :step="1" style="width: 100%" placeholder="请输入报警器ID" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="警告下限" prop="warningLowerLimit">
|
||||||
|
<el-input-number v-model="form.warningLowerLimit" :min="0" :step="1" style="width: 100%" placeholder="请输入警告下限" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="警告上限" prop="warningUpperLimit">
|
||||||
|
<el-input-number v-model="form.warningUpperLimit" :min="0" :step="1" style="width: 100%" placeholder="请输入警告上限" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="是否外置泵" prop="isExternalPump">
|
||||||
|
<el-switch v-model="form.isExternalPump" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="OPC IP" prop="opcip">
|
||||||
|
<el-input v-model="form.opcip" placeholder="请输入OPC IP" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="OPC 端口" prop="opcPort">
|
||||||
|
<el-input v-model="form.opcPort" placeholder="请输入OPC 端口" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" :loading="loading" @click="handleSubmit">确 定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import type { FormInstance, FormRules } from 'element-plus'
|
||||||
|
import { ReactorApi } from '/@/api/admin/reactor'
|
||||||
|
import { RoomApi } from '/@/api/admin/Room'
|
||||||
|
import { UserApi } from '/@/api/admin/User'
|
||||||
|
import type { ReactorDto } from '/@/api/types/ReactorType'
|
||||||
|
import { DeviceStatusEnum, MaintenanceFlagEnum } from '/@/api/types/ReactorType'
|
||||||
|
import type { ReactorTypeEnumItem } from '/@/api/types/ReactorType'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
title: string
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits(['ok'])
|
||||||
|
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const formRef = ref<FormInstance>()
|
||||||
|
const activeTab = ref('basic')
|
||||||
|
const activePumpTab = ref('pump1')
|
||||||
|
const deviceStatusOptions = ref<ReactorTypeEnumItem[]>([])
|
||||||
|
|
||||||
|
// 模拟数据，实际项目中应该从API获取
|
||||||
|
const roomOptions = ref([
|
||||||
|
{ id: 1, name: '实验室1' },
|
||||||
|
{ id: 2, name: '实验室2' }
|
||||||
|
])
|
||||||
|
|
||||||
|
const principalOptions = ref([
|
||||||
|
{ id: 1, name: '张三' },
|
||||||
|
{ id: 2, name: '李四' }
|
||||||
|
])
|
||||||
|
|
||||||
|
const defaultPumpConfig = {
|
||||||
|
speed: 0,
|
||||||
|
timeout: 0,
|
||||||
|
exception: '',
|
||||||
|
errorCode: '',
|
||||||
|
isFeeding: true,
|
||||||
|
speedOffset: 0,
|
||||||
|
configId: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
const form = reactive<ReactorDto>({
|
||||||
|
sort: 0,
|
||||||
|
deviceNo: '',
|
||||||
|
assetNo: '',
|
||||||
|
productID: '',
|
||||||
|
model: '',
|
||||||
|
specification: '',
|
||||||
|
capacity: 0,
|
||||||
|
roomID: undefined,
|
||||||
|
principalId: undefined,
|
||||||
|
deviceStatus: undefined ,
|
||||||
|
maintenanceFlag: undefined,
|
||||||
|
equScaleId: 0,
|
||||||
|
feedingScaleId: 0,
|
||||||
|
relayID: 0,
|
||||||
|
warningLowerLimit: 0,
|
||||||
|
warningUpperLimit: 0,
|
||||||
|
errorCode: '',
|
||||||
|
pump1: { ...defaultPumpConfig },
|
||||||
|
pump2: { ...defaultPumpConfig },
|
||||||
|
pump3: { ...defaultPumpConfig },
|
||||||
|
pump4: { ...defaultPumpConfig },
|
||||||
|
pump5: { ...defaultPumpConfig },
|
||||||
|
pump6: { ...defaultPumpConfig },
|
||||||
|
pump7: { ...defaultPumpConfig },
|
||||||
|
pump8: { ...defaultPumpConfig },
|
||||||
|
isExternalPump: true,
|
||||||
|
opcip: '',
|
||||||
|
opcPort: '',
|
||||||
|
equAlarmId: 0,
|
||||||
|
status: true,
|
||||||
|
isMaintenance: false,
|
||||||
|
maintenanceTime: '',
|
||||||
|
id: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules = reactive<FormRules>({
|
||||||
|
deviceNo: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
|
||||||
|
assetNo: [{ required: true, message: '请输入资产编号', trigger: 'blur' }],
|
||||||
|
productID: [{ required: true, message: '请输入产品编号', trigger: 'blur' }],
|
||||||
|
model: [{ required: true, message: '请输入设备型号', trigger: 'blur' }],
|
||||||
|
specification: [{ required: true, message: '请输入规格', trigger: 'blur' }],
|
||||||
|
capacity: [{ required: true, message: '请输入容量', trigger: 'blur' }],
|
||||||
|
roomID: [{ required: true, message: '请选择房间', trigger: 'change' }],
|
||||||
|
principalId: [{ required: true, message: '请选择负责人', trigger: 'change' }],
|
||||||
|
deviceStatus: [{ required: true, message: '请选择设备状态', trigger: 'change' }],
|
||||||
|
maintenanceFlag: [{ required: true, message: '请选择维护标志', trigger: 'change' }],
|
||||||
|
status: [{ required: true, message: '请选择状态', trigger: 'change' }],
|
||||||
|
isMaintenance: [{ required: true, message: '请选择是否维护中', trigger: 'change' }],
|
||||||
|
maintenanceTime: [{ required: true, message: '请选择维护时间', trigger: 'change' }],
|
||||||
|
sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
|
||||||
|
equScaleId: [{ required: true, message: '请输入地秤ID', trigger: 'blur' }],
|
||||||
|
feedingScaleId: [{ required: true, message: '请输入补料秤ID', trigger: 'blur' }],
|
||||||
|
relayID: [{ required: true, message: '请输入继电器ID', trigger: 'blur' }],
|
||||||
|
warningLowerLimit: [{ required: true, message: '请输入警告下限', trigger: 'blur' }],
|
||||||
|
warningUpperLimit: [{ required: true, message: '请输入警告上限', trigger: 'blur' }],
|
||||||
|
opcip: [{ required: true, message: '请输入OPC IP', trigger: 'blur' }],
|
||||||
|
opcPort: [{ required: true, message: '请输入OPC 端口', trigger: 'blur' }],
|
||||||
|
equAlarmId: [{ required: true, message: '请输入报警器ID', trigger: 'blur' }]
|
||||||
|
})
|
||||||
|
|
||||||
|
/** 获取设备状态枚举列表 */
|
||||||
|
const getDeviceStatusOptions = async () => {
|
||||||
|
try {
|
||||||
|
const res = await new ReactorApi().getDeviceStatusEnumList()
|
||||||
|
deviceStatusOptions.value = res.data ?? []
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取设备状态枚举列表失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取设备状态描述 */
|
||||||
|
const getDeviceStatusDesc = (status: DeviceStatusEnum) => {
|
||||||
|
const statusMap = {
|
||||||
|
[DeviceStatusEnum.Normal]: '正常',
|
||||||
|
[DeviceStatusEnum.Fault]: '故障',
|
||||||
|
[DeviceStatusEnum.Offline]: '离线',
|
||||||
|
[DeviceStatusEnum.Maintenance]: '维护中'
|
||||||
|
}
|
||||||
|
return statusMap[status] || '未知'
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取维护标志描述 */
|
||||||
|
const getMaintenanceFlagDesc = (flag: MaintenanceFlagEnum) => {
|
||||||
|
const flagMap = {
|
||||||
|
[MaintenanceFlagEnum.None]: '无',
|
||||||
|
[MaintenanceFlagEnum.Regular]: '定期维护',
|
||||||
|
[MaintenanceFlagEnum.Emergency]: '紧急维护'
|
||||||
|
}
|
||||||
|
return flagMap[flag] || '未知'
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取房间列表 */
|
||||||
|
const getRoomOptions = async () => {
|
||||||
|
try {
|
||||||
|
const res = await new RoomApi().getPage({
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 1000,
|
||||||
|
filter: {}
|
||||||
|
})
|
||||||
|
roomOptions.value = res.data?.list?.map((item: any) => ({
|
||||||
|
id: item.id,
|
||||||
|
name: item.roomName
|
||||||
|
})) || []
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取房间列表失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取负责人列表 */
|
||||||
|
const getPrincipalOptions = async () => {
|
||||||
|
try {
|
||||||
|
const res = await new UserApi().getPage({
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 1000,
|
||||||
|
filter: {}
|
||||||
|
})
|
||||||
|
principalOptions.value = res.data?.list?.map((item: any) => ({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name
|
||||||
|
})) || []
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取负责人列表失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 打开弹窗 */
|
||||||
|
const open = (row?: ReactorDto) => {
|
||||||
|
dialogVisible.value = true
|
||||||
|
if (row) {
|
||||||
|
Object.assign(form, row)
|
||||||
|
}
|
||||||
|
getDeviceStatusOptions()
|
||||||
|
getRoomOptions()
|
||||||
|
getPrincipalOptions()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 提交表单 */
|
||||||
|
const submitForm = async () => {
|
||||||
|
if (!formRef.value) return
|
||||||
|
await formRef.value.validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
try {
|
||||||
|
const api = new ReactorApi()
|
||||||
|
const res = form.id ? await api.update(form) : await api.add(form)
|
||||||
|
if (res.success) {
|
||||||
|
ElMessage.success(form.id ? '修改成功' : '新增成功')
|
||||||
|
dialogVisible.value = false
|
||||||
|
emit('ok')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('提交失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 取消 */
|
||||||
|
const cancel = () => {
|
||||||
|
dialogVisible.value = false
|
||||||
|
reset()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 重置表单 */
|
||||||
|
const reset = () => {
|
||||||
|
if (!formRef.value) return
|
||||||
|
formRef.value.resetFields()
|
||||||
|
Object.assign(form, {
|
||||||
|
sort: 0,
|
||||||
|
deviceNo: '',
|
||||||
|
assetNo: '',
|
||||||
|
productID: '',
|
||||||
|
model: '',
|
||||||
|
specification: '',
|
||||||
|
capacity: 0,
|
||||||
|
roomID: 0,
|
||||||
|
principalId: 0,
|
||||||
|
deviceStatus: DeviceStatusEnum.Normal,
|
||||||
|
maintenanceFlag: MaintenanceFlagEnum.None,
|
||||||
|
equScaleId: 0,
|
||||||
|
feedingScaleId: 0,
|
||||||
|
relayID: 0,
|
||||||
|
warningLowerLimit: 0,
|
||||||
|
warningUpperLimit: 0,
|
||||||
|
errorCode: '',
|
||||||
|
pump1: { ...defaultPumpConfig },
|
||||||
|
pump2: { ...defaultPumpConfig },
|
||||||
|
pump3: { ...defaultPumpConfig },
|
||||||
|
pump4: { ...defaultPumpConfig },
|
||||||
|
pump5: { ...defaultPumpConfig },
|
||||||
|
pump6: { ...defaultPumpConfig },
|
||||||
|
pump7: { ...defaultPumpConfig },
|
||||||
|
pump8: { ...defaultPumpConfig },
|
||||||
|
isExternalPump: true,
|
||||||
|
opcip: '',
|
||||||
|
opcPort: '',
|
||||||
|
equAlarmId: 0,
|
||||||
|
status: true,
|
||||||
|
isMaintenance: false,
|
||||||
|
maintenanceTime: '',
|
||||||
|
id: 0
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getDeviceStatusOptions()
|
||||||
|
getRoomOptions()
|
||||||
|
getPrincipalOptions()
|
||||||
|
})
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
open
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.reactor-form-dialog {
|
||||||
|
:deep(.el-dialog__body) {
|
||||||
|
padding: 20px 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.reactor-form {
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.reactor-tabs {
|
||||||
|
:deep(.el-tabs__content) {
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__nav) {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-input-number) {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.el-input__wrapper {
|
||||||
|
padding-left: 11px;
|
||||||
|
padding-right: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-select) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-switch) {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
311
src/views/admin/reactor/index.vue
Normal file
311
src/views/admin/reactor/index.vue
Normal file
@ -0,0 +1,311 @@
|
|||||||
|
<template>
|
||||||
|
<my-layout>
|
||||||
|
<el-card class="my-query-box mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
|
||||||
|
<el-form :inline="true" label-width="auto" :label-position="'left'" @submit.stop.prevent>
|
||||||
|
<el-form-item label="关键字" prop="keyWord">
|
||||||
|
<el-input v-model="state.filter.keyWord" placeholder="请输入设备编号/资产编号/产品ID/型号" clearable style="width: 300px" @keyup.enter="handleQuery" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="房间" prop="roomID">
|
||||||
|
<el-select v-model="state.filter.roomID" placeholder="请选择房间" clearable style="width: 200px">
|
||||||
|
<el-option v-for="item in state.roomOptions" :key="item.id" :label="item.name" :value="item.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="开始时间">
|
||||||
|
<el-date-picker v-model="state.filter.stDate" type="datetime" placeholder="选择开始时间"
|
||||||
|
format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width: 180px" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="结束时间">
|
||||||
|
<el-date-picker v-model="state.filter.edDate" type="datetime" placeholder="选择结束时间"
|
||||||
|
format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width: 180px" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="ele-Search" @click="handleQuery">查询</el-button>
|
||||||
|
<el-button v-auth="'api:admin:equ-reactor:add'" type="primary" icon="ele-Plus" @click="handleAdd">新增</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-card class="my-fill mt8" shadow="never">
|
||||||
|
<el-table v-loading="loading" :data="state.reactorList" row-key="id" style="width: 100%" border>
|
||||||
|
<el-table-column prop="deviceNo" label="设备编号" min-width="120" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="assetNo" label="资产编号" min-width="120" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="productID" label="产品ID" min-width="120" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="model" label="型号" min-width="120" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="specification" label="规格" min-width="120" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="capacity" label="容量(g)" min-width="100" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="roomName" label="房间名称" min-width="120" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="principalName" label="负责人" min-width="100" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="deviceStatus" label="设备状态" width="100">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="getDeviceStatusType(row.deviceStatus)">
|
||||||
|
{{ getDeviceStatusDesc(row.deviceStatus) }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="维护标志" width="100" align="center">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="getMaintenanceFlagType(row.maintenanceFlag)">
|
||||||
|
{{ row.maintenanceFlagDesc }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="是否维护中" width="100" align="center">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="row.isMaintenance ? 'warning' : 'info'">
|
||||||
|
{{ row.isMaintenance ? '是' : '否' }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="createdTime" label="创建时间" min-width="160" show-overflow-tooltip />
|
||||||
|
<el-table-column label="操作" width="180" fixed="right" header-align="center" align="center">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button v-auth="'api:admin:equ-reactor:update'" icon="ele-EditPen" size="small" text type="primary"
|
||||||
|
@click="handleEdit(row)">编辑</el-button>
|
||||||
|
<el-button v-auth="'api:admin:equ-reactor:soft-delete'" icon="ele-Delete" size="small" text type="danger"
|
||||||
|
@click="handleDelete(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="my-flex my-flex-end" style="margin-top: 10px">
|
||||||
|
<el-pagination v-model:current-page="state.pageInput.currentPage" v-model:page-size="state.pageInput.pageSize"
|
||||||
|
:total="state.total" :page-sizes="[10, 20, 50, 100]" size="small" background @size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<reactor-form ref="formRef" :title="state.formTitle" @ok="getList" />
|
||||||
|
</my-layout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, onMounted, onBeforeMount } from 'vue'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import { ReactorApi } from '/@/api/admin/reactor'
|
||||||
|
import { RoomApi } from '/@/api/admin/Room'
|
||||||
|
import eventBus from '/@/utils/mitt'
|
||||||
|
import type {
|
||||||
|
ReactorPageInput,
|
||||||
|
ReactorDto,
|
||||||
|
ReactorTypeEnumItem
|
||||||
|
} from '/@/api/types/ReactorType'
|
||||||
|
import { DeviceStatusEnum, MaintenanceFlagEnum } from '/@/api/types/ReactorType'
|
||||||
|
|
||||||
|
import ReactorForm from './components/reactor-form.vue'
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
const formRef = ref()
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
loading: false,
|
||||||
|
formTitle: '',
|
||||||
|
total: 0,
|
||||||
|
filter: {
|
||||||
|
keyWord: '',
|
||||||
|
stDate: '',
|
||||||
|
edDate: '',
|
||||||
|
deviceStatus: undefined as number | undefined,
|
||||||
|
maintenanceFlag: undefined as number | undefined,
|
||||||
|
principalId: undefined as number | undefined,
|
||||||
|
roomID: undefined as number | undefined,
|
||||||
|
status: undefined as number | undefined,
|
||||||
|
isMaintenance: undefined as boolean | undefined,
|
||||||
|
pageIndex: 1,
|
||||||
|
pageSize: 10
|
||||||
|
},
|
||||||
|
pageInput: {
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
} as ReactorPageInput,
|
||||||
|
reactorList: [] as Array<ReactorDto>,
|
||||||
|
roomOptions: [] as Array<{ id: number; name: string }>,
|
||||||
|
principalOptions: [] as Array<{ id: number; name: string }>,
|
||||||
|
deviceStatusOptions: [] as ReactorTypeEnumItem[]
|
||||||
|
})
|
||||||
|
|
||||||
|
/** 获取设备状态枚举列表 */
|
||||||
|
const getDeviceStatusOptions = async () => {
|
||||||
|
try {
|
||||||
|
const res = await new ReactorApi().getDeviceStatusEnumList()
|
||||||
|
state.deviceStatusOptions = res.data ?? []
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取设备状态枚举列表失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取设备状态描述 */
|
||||||
|
const getDeviceStatusDesc = (value: number) => {
|
||||||
|
const item = state.deviceStatusOptions.find(item => item.value === value)
|
||||||
|
return item?.label || '未知'
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取设备状态类型 */
|
||||||
|
const getDeviceStatusType = (value: number) => {
|
||||||
|
switch (value) {
|
||||||
|
case DeviceStatusEnum.Normal:
|
||||||
|
return 'success'
|
||||||
|
case DeviceStatusEnum.Fault:
|
||||||
|
return 'danger'
|
||||||
|
case DeviceStatusEnum.Maintenance:
|
||||||
|
return 'warning'
|
||||||
|
default:
|
||||||
|
return 'info'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取维护标志描述 */
|
||||||
|
const getMaintenanceFlagDesc = (flag: MaintenanceFlagEnum) => {
|
||||||
|
const flagMap = {
|
||||||
|
[MaintenanceFlagEnum.None]: '无',
|
||||||
|
[MaintenanceFlagEnum.Regular]: '定期维护',
|
||||||
|
[MaintenanceFlagEnum.Emergency]: '紧急维护'
|
||||||
|
}
|
||||||
|
return flagMap[flag] || '未知'
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取维护标志标签类型 */
|
||||||
|
const getMaintenanceFlagType = (flag: MaintenanceFlagEnum) => {
|
||||||
|
const typeMap = {
|
||||||
|
[MaintenanceFlagEnum.None]: 'info',
|
||||||
|
[MaintenanceFlagEnum.Regular]: 'warning',
|
||||||
|
[MaintenanceFlagEnum.Emergency]: 'danger'
|
||||||
|
}
|
||||||
|
return typeMap[flag] || 'info'
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 查询列表 */
|
||||||
|
const getList = async () => {
|
||||||
|
loading.value = true
|
||||||
|
state.filter.pageIndex = state.pageInput.currentPage ?? 1
|
||||||
|
state.filter.pageSize = state.pageInput.pageSize ?? 20
|
||||||
|
try {
|
||||||
|
const res = await new ReactorApi().getPage(state.filter)
|
||||||
|
state.reactorList = res.data?.list || []
|
||||||
|
state.total = res.data?.total || 0
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取列表失败:', error)
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
const handleQuery = () => {
|
||||||
|
state.pageInput.currentPage = 1
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
const handleAdd = () => {
|
||||||
|
state.formTitle = '新增反应器'
|
||||||
|
formRef.value?.open()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
const handleEdit = (row: ReactorDto) => {
|
||||||
|
state.formTitle = '编辑反应器'
|
||||||
|
formRef.value?.open(row)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
const handleDelete = (row: ReactorDto) => {
|
||||||
|
ElMessageBox.confirm('确认要删除该记录吗？', '警告', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(async () => {
|
||||||
|
try {
|
||||||
|
const res = await new ReactorApi().softDelete({ id: row.id! })
|
||||||
|
if (res.success) {
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('删除失败:', error)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 每页条数改变 */
|
||||||
|
const handleSizeChange = (val: number) => {
|
||||||
|
state.pageInput.pageSize = val
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 当前页改变 */
|
||||||
|
const handleCurrentChange = (val: number) => {
|
||||||
|
state.pageInput.currentPage = val
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取房间列表 */
|
||||||
|
const getRoomOptions = async () => {
|
||||||
|
try {
|
||||||
|
const res = await new RoomApi().getPage({
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 1000,
|
||||||
|
filter: {}
|
||||||
|
})
|
||||||
|
state.roomOptions = res.data?.list?.map((item: any) => ({
|
||||||
|
id: item.id,
|
||||||
|
name: item.roomName
|
||||||
|
})) || []
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取房间列表失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取负责人列表 */
|
||||||
|
const getPrincipalOptions = async () => {
|
||||||
|
try {
|
||||||
|
// TODO: 调用获取负责人列表API
|
||||||
|
state.principalOptions = [
|
||||||
|
{ id: 1, name: '张三' },
|
||||||
|
{ id: 2, name: '李四' }
|
||||||
|
]
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取负责人列表失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getList()
|
||||||
|
getRoomOptions()
|
||||||
|
getPrincipalOptions()
|
||||||
|
getDeviceStatusOptions()
|
||||||
|
eventBus.on('refreshReactor', getList)
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeMount(() => {
|
||||||
|
eventBus.off('refreshReactor')
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.my-query-box {
|
||||||
|
:deep(.el-form-item) {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-fill {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-flex-end {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt8 {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb8 {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
137
src/views/admin/uspsreactor/components/reactor-form.vue
Normal file
137
src/views/admin/uspsreactor/components/reactor-form.vue
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog v-model="visible" :title="title" width="500px" append-to-body destroy-on-close>
|
||||||
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
||||||
|
<el-form-item label="反应器名称" prop="reactorName">
|
||||||
|
<el-input v-model="form.reactorName" placeholder="请输入反应器名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="反应器类型" prop="reactorType">
|
||||||
|
<el-select v-model="form.reactorType" placeholder="请选择反应器类型" style="width: 100%">
|
||||||
|
<el-option v-for="item in reactorTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态" prop="status">
|
||||||
|
<el-radio-group v-model="form.status">
|
||||||
|
<el-radio :label="true">启用</el-radio>
|
||||||
|
<el-radio :label="false">禁用</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { ReactorApi } from '/@/api/admin/reactor'
|
||||||
|
import type { ReactorDto, ReactorTypeEnumItem } from '/@/api/types/ReactorType'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
title: string
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'ok'): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const visible = ref(false)
|
||||||
|
const formRef = ref()
|
||||||
|
const reactorTypeOptions = ref<ReactorTypeEnumItem[]>([])
|
||||||
|
|
||||||
|
const form = reactive<ReactorDto>({
|
||||||
|
reactorName: '',
|
||||||
|
reactorType: '',
|
||||||
|
status: true
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
reactorName: [
|
||||||
|
{ required: true, message: '请输入反应器名称', trigger: 'blur' },
|
||||||
|
{ min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
reactorType: [
|
||||||
|
{ required: true, message: '请选择反应器类型', trigger: 'change' }
|
||||||
|
],
|
||||||
|
status: [
|
||||||
|
{ required: true, message: '请选择状态', trigger: 'change' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取反应器类型枚举列表 */
|
||||||
|
const getReactorTypeOptions = async () => {
|
||||||
|
try {
|
||||||
|
const res = await new ReactorApi().getReactorTypeEnumList()
|
||||||
|
reactorTypeOptions.value = res.data ?? []
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取反应器类型枚举列表失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 打开弹窗 */
|
||||||
|
const open = (row?: ReactorDto) => {
|
||||||
|
visible.value = true
|
||||||
|
if (row) {
|
||||||
|
Object.assign(form, row)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 提交表单 */
|
||||||
|
const submitForm = async () => {
|
||||||
|
if (!formRef.value) return
|
||||||
|
await formRef.value.validate(async (valid: boolean) => {
|
||||||
|
if (valid) {
|
||||||
|
try {
|
||||||
|
const api = new ReactorApi()
|
||||||
|
const res = form.id
|
||||||
|
? await api.update(form)
|
||||||
|
: await api.add(form)
|
||||||
|
if (res.success) {
|
||||||
|
ElMessage.success(form.id ? '修改成功' : '新增成功')
|
||||||
|
visible.value = false
|
||||||
|
emit('ok')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(form.id ? '修改失败:' : '新增失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 取消按钮 */
|
||||||
|
const cancel = () => {
|
||||||
|
visible.value = false
|
||||||
|
reset()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 重置表单 */
|
||||||
|
const reset = () => {
|
||||||
|
if (formRef.value) {
|
||||||
|
formRef.value.resetFields()
|
||||||
|
}
|
||||||
|
Object.assign(form, {
|
||||||
|
id: undefined,
|
||||||
|
reactorName: '',
|
||||||
|
reactorType: '',
|
||||||
|
status: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getReactorTypeOptions()
|
||||||
|
})
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
open
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dialog-footer {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
224
src/views/admin/uspsreactor/index.vue
Normal file
224
src/views/admin/uspsreactor/index.vue
Normal file
@ -0,0 +1,224 @@
|
|||||||
|
<template>
|
||||||
|
<my-layout>
|
||||||
|
<el-card class="my-query-box mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
|
||||||
|
<el-form :inline="true" label-width="auto" :label-position="'left'" @submit.stop.prevent>
|
||||||
|
<el-form-item label="反应器名称" prop="reactorName">
|
||||||
|
<el-input v-model="state.filter.keyWord" placeholder="请输入反应器名称" clearable @keyup.enter="handleQuery" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="反应器类型" prop="reactorType">
|
||||||
|
<el-select v-model="state.filter.reactorType" placeholder="请选择反应器类型" clearable style="width: 200px">
|
||||||
|
<el-option v-for="item in state.reactorTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态" prop="status">
|
||||||
|
<el-select v-model="state.filter.status" placeholder="请选择状态" clearable style="width: 200px">
|
||||||
|
<el-option label="启用" :value="true" />
|
||||||
|
<el-option label="禁用" :value="false" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="开始时间">
|
||||||
|
<el-date-picker v-model="state.filter.startTime" type="datetime" placeholder="选择开始时间"
|
||||||
|
format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width: 180px" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="结束时间">
|
||||||
|
<el-date-picker v-model="state.filter.endTime" type="datetime" placeholder="选择结束时间"
|
||||||
|
format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width: 180px" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="ele-Search" @click="handleQuery">查询</el-button>
|
||||||
|
<el-button v-auth="'api:admin:reactor:add'" type="primary" icon="ele-Plus" @click="handleAdd">新增</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-card class="my-fill mt8" shadow="never">
|
||||||
|
<el-table v-loading="loading" :data="state.reactorList" row-key="id" style="width: 100%" border>
|
||||||
|
<el-table-column prop="reactorName" label="反应器名称" min-width="120" show-overflow-tooltip />
|
||||||
|
<el-table-column label="反应器类型" min-width="120" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ getReactorTypeName(row.reactorType) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="状态" width="100" align="center">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="row.status ? 'success' : 'danger'">
|
||||||
|
{{ row.status ? '启用' : '禁用' }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="createdUserName" label="创建者" min-width="100" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="createdTime" label="创建时间" min-width="160" show-overflow-tooltip />
|
||||||
|
<el-table-column label="操作" width="180" fixed="right" header-align="center" align="center">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button v-auth="'api:admin:reactor:update'" icon="ele-EditPen" size="small" text type="primary"
|
||||||
|
@click="handleEdit(row)">编辑</el-button>
|
||||||
|
<el-button v-auth="'api:admin:reactor:soft-delete'" icon="ele-Delete" size="small" text type="danger"
|
||||||
|
@click="handleDelete(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="my-flex my-flex-end" style="margin-top: 10px">
|
||||||
|
<el-pagination v-model:current-page="state.pageInput.currentPage" v-model:page-size="state.pageInput.pageSize"
|
||||||
|
:total="state.total" :page-sizes="[10, 20, 50, 100]" size="small" background @size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<reactor-form ref="formRef" :title="state.formTitle" @ok="getList" />
|
||||||
|
</my-layout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, onMounted, onBeforeMount } from 'vue'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import { ReactorApi } from '/@/api/admin/reactor'
|
||||||
|
import eventBus from '/@/utils/mitt'
|
||||||
|
import type {
|
||||||
|
ReactorPageInput,
|
||||||
|
ReactorDto,
|
||||||
|
ReactorTypeEnumItem
|
||||||
|
} from '/@/api/types/ReactorType'
|
||||||
|
|
||||||
|
import ReactorForm from './components/reactor-form.vue'
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
const formRef = ref()
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
loading: false,
|
||||||
|
formTitle: '',
|
||||||
|
total: 0,
|
||||||
|
filter: {
|
||||||
|
keyWord: "",
|
||||||
|
reactorType: "",
|
||||||
|
status: null,
|
||||||
|
startTime: "",
|
||||||
|
endTime: ""
|
||||||
|
},
|
||||||
|
pageInput: {
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
} as ReactorPageInput,
|
||||||
|
reactorList: [] as Array<ReactorDto>,
|
||||||
|
reactorTypeOptions: [] as ReactorTypeEnumItem[]
|
||||||
|
})
|
||||||
|
|
||||||
|
/** 查询列表 */
|
||||||
|
const getList = async () => {
|
||||||
|
loading.value = true
|
||||||
|
state.pageInput.filter = state.filter
|
||||||
|
try {
|
||||||
|
const res = await new ReactorApi().getPage(state.pageInput)
|
||||||
|
state.reactorList = res.data?.list || []
|
||||||
|
state.total = res.data?.total || 0
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取列表失败:', error)
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取反应器类型枚举列表 */
|
||||||
|
const getReactorTypeOptions = async () => {
|
||||||
|
try {
|
||||||
|
const res = await new ReactorApi().getReactorTypeEnumList()
|
||||||
|
state.reactorTypeOptions = res.data ?? []
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取反应器类型枚举列表失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getReactorTypeName = (reactorType: string) => {
|
||||||
|
const item = state.reactorTypeOptions.find(item => item.value === Number(reactorType))
|
||||||
|
return item?.label || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
const handleQuery = () => {
|
||||||
|
state.pageInput.currentPage = 1
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
const handleAdd = () => {
|
||||||
|
state.formTitle = '新增反应器'
|
||||||
|
formRef.value?.open()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
const handleEdit = (row: ReactorDto) => {
|
||||||
|
state.formTitle = '编辑反应器'
|
||||||
|
formRef.value?.open(row)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
const handleDelete = (row: ReactorDto) => {
|
||||||
|
ElMessageBox.confirm('确认要删除该记录吗？', '警告', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(async () => {
|
||||||
|
try {
|
||||||
|
const res = await new ReactorApi().softDelete({ id: row.id! })
|
||||||
|
if (res.success) {
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('删除失败:', error)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 每页条数改变 */
|
||||||
|
const handleSizeChange = (val: number) => {
|
||||||
|
state.pageInput.pageSize = val
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 当前页改变 */
|
||||||
|
const handleCurrentChange = (val: number) => {
|
||||||
|
state.pageInput.currentPage = val
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getReactorTypeOptions()
|
||||||
|
getList()
|
||||||
|
eventBus.on('refreshReactor', getList)
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeMount(() => {
|
||||||
|
eventBus.off('refreshReactor')
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.my-query-box {
|
||||||
|
:deep(.el-form-item) {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-fill {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-flex-end {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt8 {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb8 {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user