360 lines
9.9 KiB
Vue
360 lines
9.9 KiB
Vue
<template>
|
|
<div>
|
|
<Dialog :title="dialogTitle" v-model="dialogVisible" width="66%">
|
|
<el-form
|
|
ref="formRef"
|
|
:model="formData"
|
|
size="default"
|
|
label-width="100px"
|
|
label-position="right"
|
|
label-suffix=""
|
|
class="-ml-30px"
|
|
v-loading="formLoading"
|
|
>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="设备名称" prop="deviceName" class="item-style">
|
|
<el-input
|
|
v-model="formData.deviceName"
|
|
placeholder="请输入设备名称"
|
|
clearable
|
|
class="item-width"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="7">
|
|
<el-form-item label="设备状态" prop="deviceStatus" class="item-style">
|
|
<el-radio-group v-model="formData.deviceStatus" class="item-width radio-group">
|
|
<el-radio value="1" style="margin-left: 12px; margin-right: 10px">有效</el-radio>
|
|
<el-radio value="0" style="margin-right: 10px">无效</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="设备类型" prop="deviceType" class="item-style">
|
|
<el-select
|
|
v-model="formData.deviceType"
|
|
placeholder="请选择设备类型"
|
|
clearable
|
|
class="item-width"
|
|
>
|
|
<el-option label="DR" value="DR" />
|
|
<el-option label="CT" value="CT" />
|
|
<el-option label="MR" value="MR" />
|
|
<el-option label="超声" value="超声" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="设备型号" prop="deviceModel" class="item-style">
|
|
<el-input
|
|
v-model="formData.deviceModel"
|
|
placeholder="请输入设备型号"
|
|
clearable
|
|
class="item-width"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="生产商" prop="madeCompany" class="item-style">
|
|
<el-input
|
|
v-model="formData.madeCompany"
|
|
placeholder="请输入生产商"
|
|
clearable
|
|
class="item-width"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="生产商电话" prop="madeCompanyTel" class="item-style">
|
|
<el-input
|
|
v-model="formData.madeCompanyTel"
|
|
placeholder="请输入生产商电话"
|
|
clearable
|
|
class="item-width"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="销售商" prop="saleCompany" class="item-style">
|
|
<el-input
|
|
v-model="formData.saleCompany"
|
|
placeholder="请输入销售商"
|
|
clearable
|
|
class="item-width"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="销售商电话" prop="saleCompanyTel" class="item-style">
|
|
<el-input
|
|
v-model="formData.saleCompanyTel"
|
|
placeholder="请输入销售商电话"
|
|
clearable
|
|
class="item-width"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="科室" prop="departmentCode" class="item-style">
|
|
<el-select
|
|
v-model="deviceDepartmentInfo"
|
|
value-key="departmentCode"
|
|
placeholder="请选择科室"
|
|
clearable
|
|
class="item-width"
|
|
@change="deviceDept_change"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in departmentList"
|
|
:key="index"
|
|
:label="item.departmentName"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="机构" prop="orgId" class="item-style">
|
|
<el-select
|
|
v-model="formData.orgId"
|
|
placeholder="请选择机构"
|
|
clearable
|
|
class="item-width"
|
|
>
|
|
<el-option
|
|
v-for="item in orgList"
|
|
:key="item.orgID"
|
|
:label="item.orgName"
|
|
:value="item.orgID"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="设备AET" prop="scheduledAET" class="item-style">
|
|
<el-input
|
|
v-model="formData.scheduledAET"
|
|
placeholder="请输入设备AET"
|
|
type="textarea"
|
|
:autosize="{ minRows: 3, maxRows: 9 }"
|
|
class="item-width"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="备注" prop="remark" class="item-style">
|
|
<el-input
|
|
v-model="formData.remark"
|
|
placeholder="请输入备注"
|
|
type="textarea"
|
|
:autosize="{ minRows: 5, maxRows: 9 }"
|
|
class="item-width"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
|
|
<template #footer>
|
|
<div style="text-align: center">
|
|
<el-button type="primary" :disabled="formLoading" @click="submitForm">保存</el-button>
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
</div>
|
|
</template>
|
|
</Dialog>
|
|
<!-- 可参考内容 -->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { dateFormatter } from '@/utils/formatTime'
|
|
import { DeviceManageApi } from '@/api/applyregistration/deviceManage'
|
|
|
|
defineOptions({ name: 'DeviceManageForm' })
|
|
/*
|
|
* 李传洋
|
|
* DeviceManageForm
|
|
**/
|
|
/** 导入内容 **/
|
|
const emit = defineEmits(['success'])
|
|
|
|
/** 组件引用 **/
|
|
const formRef = ref()
|
|
|
|
/** 数据结构 **/
|
|
const message = useMessage()
|
|
const { t } = useI18n()
|
|
const dialogVisible = ref(false)
|
|
const dialogTitle = ref('')
|
|
const formLoading = ref(false)
|
|
const formType = ref('')
|
|
const orgList = ref<any[]>([])
|
|
const departmentList = ref<any[]>([])
|
|
//表单核心
|
|
const formData0 = ref({
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
doctorName: undefined,
|
|
departmentName: undefined
|
|
})
|
|
const formData = ref({
|
|
/** 测试数据 **/
|
|
id: '',
|
|
deviceName: '',
|
|
deviceStatus: '',
|
|
deviceType: '',
|
|
deviceModel: '',
|
|
madeCompany: '',
|
|
madeCompanyTel: '',
|
|
saleCompany: '',
|
|
saleCompanyTel: '',
|
|
scheduledAET: '',
|
|
remark: '',
|
|
departmentCode: '',
|
|
deviceDepartment: '',
|
|
orgId: ''
|
|
})
|
|
const deviceDepartmentInfo = ref<any>()
|
|
|
|
/****** 自定义内容 ******/
|
|
const resetForm = async () => {
|
|
formData.value = {
|
|
/** 测试数据 **/
|
|
id: '',
|
|
deviceName: '',
|
|
deviceStatus: '',
|
|
deviceType: '',
|
|
deviceModel: '',
|
|
madeCompany: '',
|
|
madeCompanyTel: '',
|
|
saleCompany: '',
|
|
saleCompanyTel: '',
|
|
scheduledAET: '',
|
|
remark: '',
|
|
departmentCode: '',
|
|
deviceDepartment: '',
|
|
orgId: ''
|
|
}
|
|
deviceDepartmentInfo.value = undefined
|
|
formRef.value?.clearValidate()
|
|
}
|
|
|
|
const open = async (type: string, id?: number) => {
|
|
dialogVisible.value = true
|
|
dialogTitle.value = t('action.' + type)
|
|
formType.value = type
|
|
resetForm()
|
|
if (id) {
|
|
formLoading.value = true
|
|
try {
|
|
formData.value = await DeviceManageApi.get(id)
|
|
deviceDepartmentInfo.value = departmentList.value?.find((item) => {
|
|
return (
|
|
item?.departmentCode &&
|
|
formData.value?.departmentCode &&
|
|
item.departmentCode == formData.value.departmentCode
|
|
)
|
|
})
|
|
} finally {
|
|
formLoading.value = false
|
|
}
|
|
}
|
|
}
|
|
|
|
/****** 可参考内容 ******/
|
|
/** 组件事件 **/
|
|
const deviceDept_change = async (value: any) => {
|
|
formData.value.departmentCode = value ? value.departmentCode : ''
|
|
formData.value.deviceDepartment = value ? value.departmentName : ''
|
|
}
|
|
|
|
const submitForm = async () => {
|
|
formLoading.value = true
|
|
try {
|
|
const data = formData.value
|
|
//校验
|
|
if (!data.deviceName) {
|
|
await message.alertWarning('请输入设备名称')
|
|
return
|
|
}
|
|
if (!data.deviceStatus) {
|
|
await message.alertWarning('请选择设备状态')
|
|
return
|
|
}
|
|
if (!data.orgId) {
|
|
await message.alertWarning('请选择机构')
|
|
return
|
|
}
|
|
if (!data.departmentCode || !deviceDepartmentInfo.value) {
|
|
await message.alertWarning('请选择科室')
|
|
return
|
|
}
|
|
//更新
|
|
if (formType.value === 'create') {
|
|
await DeviceManageApi.create(data)
|
|
message.success(t('common.createSuccess'))
|
|
} else if (formType.value === 'update') {
|
|
await DeviceManageApi.update(data)
|
|
message.success(t('common.updateSuccess'))
|
|
}
|
|
dialogVisible.value = false
|
|
emit('success')
|
|
} finally {
|
|
formLoading.value = false
|
|
}
|
|
}
|
|
|
|
/** 钩子方法 **/
|
|
onMounted(async () => {
|
|
orgList.value = await DeviceManageApi.getOrgList()
|
|
departmentList.value = await DeviceManageApi.getDepartmentList()
|
|
})
|
|
|
|
/** 防空作用域 **/
|
|
console.log(dateFormatter)
|
|
console.log(formData0)
|
|
//console.log(null)
|
|
|
|
/** 导出内容 **/
|
|
defineExpose({ open })
|
|
/**
|
|
* 备注：
|
|
*
|
|
* **/
|
|
</script>
|
|
|
|
<style scoped>
|
|
.el-form-item__label {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.item-style {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.item-width {
|
|
width: 100%;
|
|
}
|
|
|
|
.date-picker :deep(.item-width) {
|
|
width: 100%;
|
|
}
|
|
|
|
.radio-group {
|
|
border: 1px solid #ececec;
|
|
}
|
|
</style>
|