FlowVue/src/views/system/org/OrgForm.vue

195 lines
7.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="机构编码" prop="orgID" label-width="130px">
<el-input v-model="formData.orgID" placeholder="请输入机构编码" />
</el-form-item>
<el-form-item label="机构名称" prop="orgName" label-width="130px">
<el-input v-model="formData.orgName" placeholder="请输入机构名称" />
</el-form-item>
<el-form-item label="机构地址" prop="address" label-width="130px">
<el-input v-model="formData.address" placeholder="请输入机构地址" />
</el-form-item>
<el-form-item label="联系电话" prop="contactTel" label-width="130px">
<el-input v-model="formData.contactTel" placeholder="请输入联系电话" />
</el-form-item>
<el-form-item label="联系人姓名" prop="contactPerson" label-width="130px">
<el-input v-model="formData.contactPerson" placeholder="请输入联系人姓名" />
</el-form-item>
<el-form-item label="报告上显示名称" prop="reportName" label-width="130px">
<el-input v-model="formData.reportName" placeholder="请输入报告上显示名称" />
</el-form-item>
<el-form-item label="上级机构名称" prop="highLevelOrgName" label-width="130px">
<el-input v-model="formData.highLevelOrgName" :disabled="true" />
</el-form-item>
<el-form-item label="上级机构编码" prop="highLevelOrgID" label-width="130px">
<el-input v-model="formData.highLevelOrgID" :disabled="true" />
</el-form-item>
<!-- <el-form-item label="能收到微信消息提醒的微信列表,格式为wxopenid1,wxopenid2,wxopenid3" prop="wxOpenidlist">
<el-input v-model="formData.wxOpenidlist" placeholder="请输入能收到微信消息提醒的微信列表,格式为wxopenid1,wxopenid2,wxopenid3" />
</el-form-item> -->
<el-form-item label="短位机构编号" prop="orgSN" label-width="130px">
<el-input v-model="formData.orgSN" placeholder="请输入短位机构编号" />
</el-form-item>
<!-- <el-form-item label="创建时间:年月日时分秒" prop="createDate">
<el-date-picker
v-model="formData.createDate"
type="date"
value-format="x"
placeholder="选择创建时间:年月日时分秒"
/>
</el-form-item> -->
<el-form-item label="机构logo的URL" prop="orgLogoUrl" label-width="130px">
<el-input v-model="formData.orgLogoUrl" placeholder="请输入机构logo的URL" />
</el-form-item>
<el-form-item label="机构dcm前缀" prop="dcmprefix" label-width="130px">
<el-input v-model="formData.dcmprefix" placeholder="请输入dcm前缀" />
</el-form-item>
<el-form-item label="机构dcm地址" prop="dcmurl" label-width="130px">
<el-input v-model="formData.dcmurl" placeholder="请输入dcm地址" />
</el-form-item>
<el-form-item label="是否启用云胶片" prop="enableCloudDicom" label-width="130px">
<el-radio-group v-model="formData.enableCloudDicom">
<el-radio-button label="启用" value="1" />
<el-radio-button label="关闭" value="0" />
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<el-button
@click="submitForm"
:disabled="formLoading"
style="background-color: rgb(56, 119, 246); font-size: 14; color: rgb(255, 255, 255)"
>确 定</el-button
>
<el-button
@click="empty"
style="background-color: rgb(56, 119, 246); font-size: 14; color: rgb(255, 255, 255)"
>清空上级机构</el-button
>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { OrgApi, OrgVO } from '@/api/system/org'
/** 机构管理 表单 */
defineOptions({ name: 'OrgForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中1修改时的数据加载2提交的按钮禁用
const formType = ref('') // 表单的类型create - 新增update - 修改
const formData = ref({
orgID: undefined,
orgName: undefined,
address: undefined,
contactTel: undefined,
contactPerson: undefined,
reportName: undefined,
highLevelOrgID: undefined,
wxOpenidlist: undefined,
orgSN: undefined,
createDate: undefined,
highLevelOrgName: undefined,
orgLogoUrl: undefined,
dcmprefix: undefined,
dcmurl: undefined,
enableCloudDicom: '0'
})
const formRules = reactive({
orgID: [{ required: true, message: '请输入机构编码', trigger: 'blur' }],
orgName: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
contactTel: [{ required: true, message: '请输入机构联系人', trigger: 'blur' }],
contactPerson: [{ required: true, message: '请输入机构联系电话', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
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 OrgApi.getOrg(id)
console.log(formData.value.enableCloudDicom)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
const re = ref()
try {
const data = formData.value as unknown as OrgVO
console.log(data.enableCloudDicom)
if (formType.value === 'create') {
re.value = await OrgApi.createOrg(data)
if (re.value === '机构ID已经存在') {
message.error(re.value)
return
} else {
message.success(t('common.createSuccess'))
}
} else {
await OrgApi.updateOrg(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
// 清空上级机构
const empty = () => {
formData.value.highLevelOrgID = undefined
formData.value.highLevelOrgName = undefined
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
orgID: undefined,
orgName: undefined,
address: undefined,
contactTel: undefined,
contactPerson: undefined,
reportName: undefined,
highLevelOrgID: undefined,
wxOpenidlist: undefined,
orgSN: undefined,
createDate: undefined,
highLevelOrgName: undefined,
orgLogoUrl: undefined,
dcmprefix: undefined,
dcmurl: undefined,
enableCloudDicom: '0'
}
formRef.value?.resetFields()
}
</script>