icd调整

This commit is contained in:
caozehui
2026-06-16 19:26:47 +08:00
parent 6c191aa96f
commit 8f5642d0b5
8 changed files with 757 additions and 412 deletions

View File

@@ -4,34 +4,34 @@ import http from '@/api'
/**
* @name ICD管理模块
*/
//获取ICD分页
export const getICDList = (params: ICD.ReqICDParams) => {
return http.post(`/icd/list`,params)
return http.post<ICD.ResICDPage>(`/icd/list`, params)
}
//获取ICD
export const getICDAllList = (params: ICD.ResICD) => {
return http.get(`/icd/listAll`,params)
export const getICDAllList = () => {
return http.get<ICD.ResICD[]>(`/icd/listAll`)
}
//添加ICD
export const addICD = (params: ICD.ResICD) => {
export const getStandardICDList = () => {
return http.get<ICD.StandardOption[]>(`/icd/standard-list`)
}
export const getICDById = (id: string) => {
return http.get<ICD.ResICD>(`/icd/getById`, { id })
}
export const addICD = (params: FormData) => {
return http.upload(`/icd/add`, params)
}
//编辑ICD
export const updateICD = (params: ICD.ResICD) => {
}
export const updateICD = (params: FormData) => {
return http.upload(`/icd/update`, params)
}
//删除ICD
export const deleteICD = (params: string[]) => {
}
export const deleteICD = (params: string[]) => {
return http.post(`/icd/delete`, params)
}
}
export const exportICD = (id: string) => {
return http.downloadGetWithHeaders(`/icd/export/${id}`)
}

View File

@@ -1,38 +1,36 @@
import type { ReqPage, ResPage } from '@/api/interface'
// ICD模块
export namespace ICD {
export interface ReqICDParams extends ReqPage {
name?: string
type?: number
}
/**
* ICD表格分页查询参数
*/
export interface ReqICDParams extends ReqPage {
id: string; // 装置序号id 必填
devType?: string; // 设备名称
createTime?: string; //创建时间
}
export interface StandardOption {
id: string
name: string
type?: number
}
/**
* ICD新增、修改、根据id查询返回的对象
*/
export interface ResICD {
id: string; //icdID
name: string;//icd名称
path: string;//icd存储地址
state: number;
createBy?: string| null; //创建用户
createTime?: string| null; //创建时间
updateBy?: string| null; //更新用户
updateTime?: string| null; //更新时间
angle: number; // 是否支持电压相角、电流相角指标
usePhaseIndex: number; // 角型接线时是否使用相别的指标来进行检测
mappingFile: string | null;//映射文件
}
export interface ResICD {
id: string
name: string
state: number
createBy?: string | null
createTime?: string | null
updateBy?: string | null
updateTime?: string | null
angle: number
usePhaseIndex: number
jsonStr: string
xmlStr: string
result: number
msg: string | null
type: number
referenceIcdId: string | null
referenceIcdName?: string | null
hasIcdFile?: boolean | null
}
/**
* ICD表格查询分页返回的对象
*/
export interface ResICDPage extends ResPage<ResICD> {
}
}
export interface ResICDPage extends ResPage<ResICD> {}
}

View File

@@ -214,6 +214,10 @@ class RequestHttp {
return this.service.post(url, params, { ..._object, responseType: 'blob' })
}
downloadGetWithHeaders(url: string, _object = {}): Promise<AxiosResponse<Blob>> {
return this.service.get(url, { ..._object, responseType: 'blob' })
}
upload(url: string, params?: object, _object = {}): Promise<BlobPart> {
return this.service.post(url, params, {
..._object,

View File

@@ -99,7 +99,7 @@
// 定义弹出组件元信息
const dialogFormRef = ref()
const scene = ref('')
const icdOptions = ref<ICD.ResICD[]>([])
const icdOptions = ref<ICD.StandardOption[]>([])
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
@@ -209,7 +209,7 @@ const close = () => {
}
// 打开弹窗,可能是新增,也可能是编辑
const open = async (sign: string, data: DevType.ResPqDevType,icd: ICD.ResICD[],currentScene: string) => {
const open = async (sign: string, data: DevType.ResPqDevType,icd: ICD.StandardOption[],currentScene: string) => {
// 重置表单
dialogFormRef.value?.resetFields()
titleType.value = sign
@@ -230,4 +230,4 @@ const close = () => {
refreshTable: (() => Promise<void>) | undefined;
}>()
</script>
</script>

View File

@@ -41,8 +41,8 @@
getDevTypeList,
deleteDevType,
} from '@/api/device/devType/index.ts'
import { onBeforeMount, reactive, ref } from 'vue'
import { useModeStore, useAppSceneStore } from '@/stores/modules/mode'
import { onBeforeMount, reactive, ref } from 'vue'
import { useModeStore, useAppSceneStore } from '@/stores/modules/mode'
import { getICDAllList } from '@/api/device/icd'
import type { ICD } from '@/api/device/interface/icd'
@@ -55,7 +55,7 @@ import type { ICD } from '@/api/device/interface/icd'
// ProTable 实例
const proTable = ref<ProTableInstance>()
const devTypePopup = ref()
const icdOptions = ref<ICD.ResICD[]>([])
const icdOptions = ref<ICD.StandardOption[]>([])
const getTableList = async (params: any) => {
let newParams = JSON.parse(JSON.stringify(params))
@@ -156,19 +156,12 @@ import type { ICD } from '@/api/device/interface/icd'
onBeforeMount(async () => {
const response = await getICDAllList({
id: '',
name: '',
path: '',
state: 1
})
const response = await getICDAllList()
icdOptions.value = (response.data as ICD.ResICD[]).map(item => ({
id: item.id,
name: item.name,
path: item.path,
state: item.state,
name: item.name
}))
})
</script>

View File

@@ -0,0 +1,41 @@
export const ICD_TYPE_OPTIONS = [
{ value: 1, label: "标准ICD", disabled: false },
{ value: 2, label: "非标准ICD", disabled: false },
{ value: 3, label: "上游标准ICD", disabled: true },
{ value: 4, label: "上游非标准ICD", disabled: true }
] as const;
export const ICD_REFERENCE_REQUIRED_TYPES = [2, 4] as const;
export const extractIcdName = (fileName: string) =>
fileName.toLowerCase().endsWith(".icd") ? fileName.slice(0, -4) : fileName;
export const formatIcdTypeLabel = (type: number | null | undefined) =>
ICD_TYPE_OPTIONS.find(item => item.value === type)?.label ?? "--";
export const isValidJsonText = (value: string) => {
try {
JSON.parse(value);
return true;
} catch {
return false;
}
};
export const isValidXmlText = (value: string) => {
const parsed = new DOMParser().parseFromString(value, "application/xml");
return parsed.getElementsByTagName("parsererror").length === 0;
};
export const normalizeIcdSubmitPayload = <T extends {
result: number;
msg: string | null;
type: number;
referenceIcdId: string | null;
}>(form: T) => ({
...form,
msg: form.result === 1 ? null : form.msg,
referenceIcdId: ICD_REFERENCE_REQUIRED_TYPES.includes(form.type as (typeof ICD_REFERENCE_REQUIRED_TYPES)[number])
? form.referenceIcdId
: null
});

View File

@@ -1,252 +1,546 @@
<template>
<!-- 基础信息弹出框 -->
<el-dialog :model-value="dialogVisible" :title="dialogTitle" v-bind="dialogSmall" @close="close" align-center>
<div>
<el-form :model="formContent" label-position="right" label-width="80" ref="dialogFormRef" :rules="rules">
<el-form-item label="名称" prop="name">
<el-input v-model="formContent.name" placeholder="请输入icd名称" maxlength="32" show-word-limit />
<el-dialog
:model-value="dialogVisible"
:title="dialogTitle"
v-bind="dialogBig"
class="icd-dialog"
top="8vh"
@close="close"
>
<el-form
ref="dialogFormRef"
:model="formContent"
:rules="rules"
label-position="right"
label-width="auto"
class="form-three"
>
<div class="first-row">
<el-form-item label="名称" class="form-item-third">
<el-input v-model="formContent.name" readonly disabled />
</el-form-item>
<el-form-item label="存储地址" prop="path">
<el-form-item label="icd原始文件" class="form-item-third">
<div class="upload-field">
<div class="upload-actions">
<el-upload
action="#"
:auto-upload="false"
:show-file-list="false"
accept=".icd"
class="upload-container"
@change="handleIcdFileChange"
>
<el-button type="primary">选择文件</el-button>
</el-upload>
<div class="upload-file-name" :class="{ 'upload-file-name-empty': !displayIcdFileName }">
{{ displayIcdFileName || '未选择文件' }}
</div>
<el-button v-if="displayIcdFileName" link type="primary" @click="handleIcdFileRemove">
清空
</el-button>
</div>
<div class="form-tip">仅支持 .icd5MB</div>
</div>
</el-form-item>
</div>
<el-form-item label="支持相角" prop="angle" class="form-item-third">
<el-switch v-model="formContent.angle" :active-value="1" :inactive-value="0" />
</el-form-item>
<el-form-item label="使用相别指标" prop="usePhaseIndex" class="form-item-third">
<el-switch v-model="formContent.usePhaseIndex" :active-value="1" :inactive-value="0" />
</el-form-item>
<div class="type-row">
<el-form-item label="类型" prop="type" class="form-item-third form-item-type">
<el-select v-model="formContent.type" placeholder="请选择类型">
<el-option
v-for="item in ICD_TYPE_OPTIONS"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
/>
</el-select>
</el-form-item>
<div class="type-row-spacer" />
<el-form-item
v-if="shouldShowReferenceIcd"
label="引用标准ICD"
prop="referenceIcdId"
class="form-item-type-reference"
>
<el-select v-model="formContent.referenceIcdId" filterable clearable placeholder="请选择标准ICD">
<el-option
v-for="item in visibleStandardOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</div>
<div class="result-row">
<el-form-item label="结论" prop="result" class="form-item-third form-item-result">
<el-switch v-model="formContent.result" :active-value="1" :inactive-value="0" />
</el-form-item>
<el-form-item
label="描述"
prop="msg"
class="form-item-result-msg"
:class="{ 'form-item-result-msg-hidden': formContent.result === 1 }"
>
<el-input
v-model="formContent.path"
placeholder="请输入icd存储地址"
maxlength="32"
show-word-limit
v-model="formContent.msg"
type="textarea"
:rows="3"
maxlength="1024"
:disabled="formContent.result === 1"
/>
</el-form-item>
<el-form-item label="映射文件" prop="mappingFile">
<el-upload
action="#"
:limit="1"
:on-change='MappingHandleChange'
:auto-upload="false"
:file-list="mappingFileList"
:on-exceed="MappingHandleExceed"
:on-remove="MappingHandleRemove"
style="width: 100% !important;"
accept=".txt"
class="upload-container"
>
<el-button type="primary">选择文件</el-button>
</el-upload>
仅支持上传大小不超过1MB的.txt文件
</el-form-item>
<el-form-item label="是否支持电压相角、电流相角指标" prop="angle" label-width="auto">
<el-switch
v-model="formContent.angle"
:active-value="1"
:inactive-value="0"
inline-prompt
active-text=""
inactive-text=""
/>
</el-form-item>
<el-form-item label="角型接线时是否使用相别的指标来进行检测" prop="usePhaseIndex" label-width="auto">
<el-switch
v-model="formContent.usePhaseIndex"
:active-value="1"
:inactive-value="0"
inline-prompt
active-text=""
inactive-text=""
/>
</el-form-item>
</el-form>
</div>
</div>
<el-form-item label="JSON内容" prop="jsonStr" class="form-item-full">
<el-input v-model="formContent.jsonStr" type="textarea" :rows="3" />
</el-form-item>
<el-form-item label="XML内容" prop="xmlStr" class="form-item-full">
<el-input v-model="formContent.xmlStr" type="textarea" :rows="3" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="close()">取消</el-button>
<el-button type="primary" @click="save()">保存</el-button>
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="save">保存</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ElMessage, UploadFile, type FormInstance, type FormItemRule } from 'element-plus'
import { computed, ref, Ref } from 'vue'
import { type ICD } from '@/api/device/interface/icd'
import { dialogSmall } from '@/utils/elementBind'
import { useDictStore } from '@/stores/modules/dict'
import { addICD, updateICD } from '@/api/device/icd'
import { computed, nextTick, ref, watch, type Ref } from 'vue'
import { ElMessage, type FormInstance, type FormItemRule, type UploadFile, type UploadUserFile } from 'element-plus'
import type { ICD } from '@/api/device/interface/icd'
import { dialogBig } from '@/utils/elementBind'
import { addICD, getICDById, getStandardICDList, updateICD } from '@/api/device/icd'
import {
ICD_TYPE_OPTIONS,
ICD_REFERENCE_REQUIRED_TYPES,
extractIcdName,
isValidJsonText,
isValidXmlText,
normalizeIcdSubmitPayload
} from './icdForm'
const dictStore = useDictStore()
// 定义弹出组件元信息
const dialogFormRef = ref()
const mappingFileName = ref('')
const mappingFileUrl = ref('')
let excelFormData = new FormData()
const mappingFileList = computed(() => {
if (mappingFileName.value && mappingFileUrl.value) {
return [{name: mappingFileName.value, url: mappingFileUrl.value}];
}
return [];
});
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
const formContent = ref<ICD.ResICD>({
id: '',
name: '',
path: '',
state: 1,
angle: 0,
usePhaseIndex: 0,
mappingFile: ''
})
return { dialogVisible, titleType, formContent }
}
const { dialogVisible, titleType, formContent } = useMetaInfo()
// 清空formContent
const resetFormContent = () => {
formContent.value = {
id: '',
name: '',
path: '',
state: 1,
angle: 0,
usePhaseIndex: 0,
mappingFile: ''
}
}
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增ICD' : '编辑ICD'
})
//定义规则
const formRuleRef = ref<FormInstance>()
//定义校验规则
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name: [{ required: true, message: 'icd名称必填', trigger: 'blur' }],
path: [{ required: true, message: 'icd存储地址必填', trigger: 'blur' }],
mappingFile: [{required: true, message: '请上传映射文件', trigger: 'change'}],
})
// 关闭弹窗
const close = () => {
excelFormData = new FormData()
dialogVisible.value = false
// 清空dialogForm中的值
resetFormContent()
// 重置表单
dialogFormRef.value?.resetFields()
}
// 保存数据
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
// 清空 excelFormData
excelFormData.delete('name')
excelFormData.delete('path')
excelFormData.delete('angle')
excelFormData.delete('usePhaseIndex')
excelFormData.append('name', formContent.value.name)
excelFormData.append('path', formContent.value.path)
excelFormData.append('angle', formContent.value.angle)
excelFormData.append('usePhaseIndex', formContent.value.usePhaseIndex)
let baseFileFlag = handleFileLimit(excelFormData.get('mappingFile') as File)
if (!baseFileFlag) {
return
}
if (formContent.value.id) {
excelFormData.append('id', formContent.value.id)
await updateICD(excelFormData)
} else {
await addICD(excelFormData)
}
ElMessage.success({ message: `${dialogTitle.value}成功!` })
close()
// 刷新表格
await props.refreshTable!()
}
})
} catch (err) {
//error('验证过程中出现错误', err)
}
}
// 打开弹窗,可能是新增,也可能是编辑
const open = async (sign: string, data: ICD.ResICD) => {
// 重置表单
dialogFormRef.value?.resetFields()
titleType.value = sign
dialogVisible.value = true
if (data.id) {
formContent.value = { ...data }
formContent.value.id = data.id
// 文件信息回显
if (data.mappingFile) {
mappingFileName.value = data.mappingFile.name
mappingFileUrl.value = data.mappingFile.url
// 模拟文件列表显示
formContent.value.mappingFile = data.mappingFile.name
}
} else {
mappingFileName.value = ''
mappingFileUrl.value = ''
resetFormContent()
// 清空 excelFormData
excelFormData = new FormData();
}
}
const MappingHandleChange = async (param: UploadFile) => {
mappingFileName.value = param.name;
mappingFileUrl.value = URL.createObjectURL(param.raw as Blob);
excelFormData.append('mappingFile', param.raw as Blob, param.name);
formContent.value.mappingFile = param.name;
};
const MappingHandleRemove = () => {
excelFormData.delete('mappingFile');
formContent.value.mappingFile = ''
};
const MappingHandleExceed = (files: File[]) => {
// 移除旧文件
excelFormData.delete('mappingFile');
// 添加新文件
if (files.length > 0) {
const newFile = files[0] as unknown as UploadFile;
mappingFileName.value = newFile.name;
excelFormData.append('mappingFile', newFile as Blob, newFile.name);
formContent.value.mappingFile = newFile.name
}
};
const fileSizeLimit = 1 * 1024 * 1024; // 1MB
const handleFileLimit = (file: File) => {
if (file) {
if (file.size > fileSizeLimit) {
ElMessage.error({message: `文件大小不能超过${fileSizeLimit / 1024 / 1024}MB`});
return false;
} else {
return true;
}
}
return true;
}
// 对外映射
defineExpose({ open })
const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined
}>()
</script>
const dialogFormRef = ref<FormInstance>()
const dialogVisible = ref(false)
const titleType = ref<'add' | 'edit'>('add')
const standardIcdOptions = ref<ICD.StandardOption[]>([])
const selectedIcdFile = ref<File | null>(null)
const icdFileList = ref<UploadUserFile[]>([])
const originalName = ref('')
const MAX_ICD_FILE_SIZE = 5 * 1024 * 1024
const createDefaultForm = (): ICD.ResICD => ({
id: '',
name: '',
state: 1,
angle: 0,
usePhaseIndex: 0,
jsonStr: '',
xmlStr: '',
result: 1,
msg: null,
type: 1,
referenceIcdId: null,
referenceIcdName: null,
hasIcdFile: false
})
const formContent = ref<ICD.ResICD>(createDefaultForm())
const dialogTitle = computed(() => (titleType.value === 'add' ? '新增ICD' : '编辑ICD'))
const shouldShowReferenceIcd = computed(() =>
ICD_REFERENCE_REQUIRED_TYPES.includes(formContent.value.type as (typeof ICD_REFERENCE_REQUIRED_TYPES)[number])
)
const visibleStandardOptions = computed(() => {
return standardIcdOptions.value.filter(item => item.id !== formContent.value.id)
})
const currentReferenceName = computed(() => {
if (!formContent.value.referenceIcdId) {
return ''
}
return visibleStandardOptions.value.find(item => item.id === formContent.value.referenceIcdId)?.name ?? ''
})
const displayIcdFileName = computed(() => {
if (selectedIcdFile.value?.name) {
return selectedIcdFile.value.name
}
if (titleType.value === 'edit' && formContent.value.hasIcdFile && formContent.value.name) {
return `${formContent.value.name}.icd`
}
return ''
})
watch(
() => formContent.value.result,
value => {
if (value === 1) {
formContent.value.msg = null
dialogFormRef.value?.clearValidate(['msg'])
}
}
)
watch(
() => formContent.value.type,
value => {
if (!ICD_REFERENCE_REQUIRED_TYPES.includes(value as (typeof ICD_REFERENCE_REQUIRED_TYPES)[number])) {
formContent.value.referenceIcdId = null
dialogFormRef.value?.clearValidate(['referenceIcdId'])
}
}
)
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
type: [{ required: true, message: '请选择ICD类型', trigger: 'change' }],
result: [{ required: true, message: '请选择结论', trigger: 'change' }],
msg: [
{
validator: (_rule, value, callback) => {
if (formContent.value.result === 0 && !String(value ?? '').trim()) {
callback(new Error('当结论为否时,描述必填'))
return
}
callback()
},
trigger: 'blur'
}
],
referenceIcdId: [
{
validator: (_rule, value, callback) => {
if (shouldShowReferenceIcd.value && !String(value ?? '').trim()) {
callback(new Error('非标准ICD必须选择标准ICD'))
return
}
callback()
},
trigger: 'change'
}
],
jsonStr: [
{ required: true, message: 'JSON内容必填', trigger: 'blur' },
{
validator: (_rule, value, callback) => {
if (!isValidJsonText(String(value ?? ''))) {
callback(new Error('JSON格式不正确'))
return
}
callback()
},
trigger: 'blur'
}
],
xmlStr: [
{ required: true, message: 'XML内容必填', trigger: 'blur' },
{
validator: (_rule, value, callback) => {
if (!isValidXmlText(String(value ?? ''))) {
callback(new Error('XML格式不正确'))
return
}
callback()
},
trigger: 'blur'
}
]
})
const resetForm = () => {
formContent.value = createDefaultForm()
standardIcdOptions.value = []
selectedIcdFile.value = null
icdFileList.value = []
originalName.value = ''
}
const close = () => {
dialogVisible.value = false
dialogFormRef.value?.resetFields()
resetForm()
}
const handleIcdFileChange = (file: UploadFile) => {
const rawFile = file.raw as File | undefined
if (!rawFile) {
return
}
if (!file.name.toLowerCase().endsWith('.icd')) {
ElMessage.error('仅支持上传 .icd 文件')
icdFileList.value = []
selectedIcdFile.value = null
formContent.value.name = titleType.value === 'edit' ? originalName.value : ''
return
}
if (rawFile.size > MAX_ICD_FILE_SIZE) {
ElMessage.error('仅支持上传 5MB 以内的 .icd 文件')
icdFileList.value = []
selectedIcdFile.value = null
formContent.value.name = titleType.value === 'edit' ? originalName.value : ''
return
}
selectedIcdFile.value = rawFile
icdFileList.value = [{ name: file.name }]
formContent.value.name = extractIcdName(file.name)
}
const handleIcdFileRemove = () => {
selectedIcdFile.value = null
icdFileList.value = []
formContent.value.name = titleType.value === 'edit' ? originalName.value : ''
}
const ensureIcdFile = () => {
const hasCurrentFile = titleType.value === 'edit' && !!formContent.value.hasIcdFile
if (!selectedIcdFile.value && !hasCurrentFile) {
ElMessage.warning('请上传 .icd 原始文件')
return false
}
return true
}
const save = async () => {
if (!ensureIcdFile()) {
return
}
await dialogFormRef.value?.validate()
const normalized = normalizeIcdSubmitPayload({
...formContent.value,
msg: formContent.value.msg ?? null,
referenceIcdId: formContent.value.referenceIcdId ?? null
})
const payload = new FormData()
if (normalized.id) {
payload.append('id', normalized.id)
}
payload.append('angle', String(normalized.angle ?? 0))
payload.append('usePhaseIndex', String(normalized.usePhaseIndex ?? 0))
payload.append('jsonStr', normalized.jsonStr)
payload.append('xmlStr', normalized.xmlStr)
payload.append('result', String(normalized.result))
payload.append('msg', normalized.msg ?? '')
payload.append('type', String(normalized.type))
payload.append('referenceIcdId', normalized.referenceIcdId ?? '')
if (selectedIcdFile.value) {
payload.append('icdFile', selectedIcdFile.value, selectedIcdFile.value.name)
}
if (normalized.id) {
await updateICD(payload)
} else {
await addICD(payload)
}
ElMessage.success(`${dialogTitle.value}成功`)
close()
await props.refreshTable?.()
}
const open = async (sign: 'add' | 'edit', data: Partial<ICD.ResICD> = {}) => {
titleType.value = sign
dialogVisible.value = true
resetForm()
await nextTick()
dialogFormRef.value?.clearValidate()
const standardPromise = getStandardICDList()
const detailPromise = data.id ? getICDById(data.id) : Promise.resolve(null)
const [standardResult, detailResult] = await Promise.all([standardPromise, detailPromise])
standardIcdOptions.value = standardResult.data || []
if (detailResult?.data) {
formContent.value = {
...createDefaultForm(),
...detailResult.data,
msg: detailResult.data.msg ?? null,
referenceIcdId: detailResult.data.referenceIcdId ?? null,
referenceIcdName: detailResult.data.referenceIcdName ?? null,
hasIcdFile: Boolean(detailResult.data.hasIcdFile)
}
originalName.value = formContent.value.name
}
await nextTick()
dialogFormRef.value?.clearValidate()
}
defineExpose({ open })
</script>
<style scoped>
.icd-dialog :deep(.el-dialog__body) {
flex: 1;
min-height: 0;
overflow-y: auto;
box-sizing: border-box;
}
.icd-dialog :deep(.el-dialog) {
height: 720px;
display: flex;
flex-direction: column;
}
.form-three {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.first-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
}
.form-three :deep(.el-form-item) {
min-width: 0;
}
.form-three :deep(.el-form-item.form-item-third) {
width: 32.3% !important;
}
.form-three :deep(.el-form-item__content) {
min-width: 0;
}
.form-three :deep(.el-input),
.form-three :deep(.el-select) {
width: 100%;
}
.form-item-full {
width: 100% !important;
}
.type-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
min-height: 88px;
}
.type-row :deep(.form-item-type) {
width: 32.3% !important;
margin-bottom: 18px;
}
.type-row :deep(.form-item-type-reference) {
width: 32.3% !important;
margin-bottom: 18px;
}
.type-row-spacer {
width: 32.3%;
}
.type-reference-note {
display: flex;
align-items: center;
min-height: 32px;
width: 100%;
padding: 0 14px;
border: 1px solid #dcdfe6;
border-radius: 4px;
background-color: #f5f7fa;
color: #909399;
font-size: 13px;
line-height: 1.5;
box-sizing: border-box;
}
.result-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
min-height: 110px;
}
.result-row :deep(.form-item-result) {
width: 32.3% !important;
margin-bottom: 18px;
}
.result-row :deep(.form-item-result .el-form-item__content) {
display: flex;
align-items: center;
min-height: 32px;
}
.result-row :deep(.form-item-result-msg) {
width: 66% !important;
}
.result-row :deep(.form-item-result-msg-hidden) {
visibility: hidden;
pointer-events: none;
}
.upload-container {
flex: none;
}
.upload-field {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 6px;
width: 100%;
min-width: 0;
min-height: 60px;
}
.upload-actions {
display: flex;
align-items: center;
gap: 12px;
min-height: 32px;
width: 100%;
min-width: 0;
}
.upload-file-name {
flex: 1;
min-width: 0;
color: var(--el-text-color-regular);
line-height: 32px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.upload-file-name-empty {
color: var(--el-text-color-placeholder);
}
.form-tip {
color: var(--el-text-color-secondary);
font-size: 12px;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>

View File

@@ -1,122 +1,137 @@
<template>
<div class='table-box' ref='popupBaseView'>
<ProTable
ref='proTable'
:columns='columns'
:request-api='getTableList'
>
<!-- :requestApi="getRoleList" -->
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button v-auth.devType="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
<el-button v-auth.devType="'delete'" type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
@click='batchDelete(scope.selectedListIds)'>
删除
</el-button>
</template>
<!-- 表格操作 -->
<template #operation='scope'>
<el-button v-auth.devType="'edit'" type='primary' link :icon='EditPen' :model-value='false'
@click="openDialog('edit', scope.row)">编辑
</el-button>
<el-button v-auth.devType="'delete'" type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除
</el-button>
</template>
</ProTable>
<div class="table-box">
<ProTable ref="proTable" :columns="columns" :request-api="getTableList">
<template #tableHeader>
<el-button v-auth.devType="'add'" type="primary" :icon="CirclePlus" @click="openDialog('add')">
新增
</el-button>
</template>
<template #operation="scope">
<el-button
v-auth.devType="'edit'"
type="primary"
link
:icon="EditPen"
@click="openDialog('edit', scope.row)"
>
编辑
</el-button>
<el-button
v-auth.devType="'delete'"
type="primary"
link
:icon="Delete"
@click="handleDelete(scope.row)"
>
删除
</el-button>
<el-button type="primary" link :icon="Download" @click="handleExport(scope.row)">导出</el-button>
</template>
</ProTable>
</div>
<IcdPopup :refresh-table='proTable?.getTableList' ref='icdPopup' />
</template>
<script setup lang='tsx' name='useRole'>
import { type ICD } from '@/api/device/interface/icd'
import { useHandleData } from '@/hooks/useHandleData'
import ProTable from '@/components/ProTable/index.vue'
import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete, EditPen, Download, Upload } from '@element-plus/icons-vue'
import {
getICDList,
deleteICD,
} from '@/api/device/icd/index.ts'
import { reactive, ref } from 'vue'
defineOptions({
name: 'devType',
})
<IcdPopup ref="icdPopup" :refresh-table="proTable?.getTableList" />
</template>
// ProTable 实例
const proTable = ref<ProTableInstance>()
const icdPopup = ref()
<script setup lang="tsx" name="useIcd">
import { reactive, ref } from 'vue'
import { CirclePlus, Delete, Download, EditPen } from '@element-plus/icons-vue'
import type { ICD } from '@/api/device/interface/icd'
import ProTable from '@/components/ProTable/index.vue'
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownloadWithServerFileName } from '@/hooks/useDownload'
import { deleteICD, exportICD, getICDList } from '@/api/device/icd'
import { formatIcdTypeLabel, ICD_TYPE_OPTIONS } from './components/icdForm'
import IcdPopup from './components/icdPopup.vue'
const getTableList = async (params: any) => {
let newParams = JSON.parse(JSON.stringify(params))
return getICDList(newParams)
}
// 表格配置项
const columns = reactive<ColumnProps<ICD.ResICD>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
defineOptions({
name: 'icd'
})
const proTable = ref<ProTableInstance>()
const icdPopup = ref<InstanceType<typeof IcdPopup>>()
const getTableList = async (params: ICD.ReqICDParams) => {
return getICDList({ ...params })
}
const formatDateTime = (value?: string | null) => {
if (!value) {
return '--'
}
const date = new Date(value)
if (Number.isNaN(date.getTime())) {
return value
}
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0')
const seconds = String(date.getSeconds()).padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
const columns = reactive<ColumnProps<ICD.ResICD>[]>([
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'name',
label: '名称',
search: { el: 'input' },
prop: 'name',
label: '名称',
minWidth: 180,
search: { el: 'input' }
},
{
prop: 'path',
label: '存储地址',
prop: 'type',
label: '类型',
minWidth: 180,
enum: ICD_TYPE_OPTIONS,
fieldNames: { label: 'label', value: 'value' },
search: {
el: 'select',
props: {
clearable: true,
filterable: true
}
},
render: scope => formatIcdTypeLabel(scope.row.type)
},
{
prop: 'mappingFile',
label: '映射文件路径',
minWidth: 150,
render: scope => {
return scope.row.mappingFile.url
}
prop: 'result',
label: '结论',
width: 100,
render: scope => (scope.row.result === 1 ? '是' : '否')
},
{
prop: 'createTime',
label: '创建时间',
render: scope => {
if (scope.row.createTime) {
const date = new Date(scope.row.createTime);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
return '';
}
prop: 'msg',
label: '描述',
minWidth: 220,
render: scope => scope.row.msg || '--'
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 200 },
])
// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<ICD.ResICD> = {}) => {
{
prop: 'referenceIcdName',
label: '引用标准ICD',
minWidth: 180,
render: scope => scope.row.referenceIcdName || '--'
},
{
prop: 'createTime',
label: '创建时间',
width: 180,
render: scope => formatDateTime(scope.row.createTime)
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 220 }
])
const openDialog = (titleType: 'add' | 'edit', row: Partial<ICD.ResICD> = {}) => {
icdPopup.value?.open(titleType, row)
}
// 批量删除icd
const batchDelete = async (id: string[]) => {
await useHandleData(deleteICD, id, '删除所选icd')
proTable.value?.clearSelection()
}
const handleDelete = async (row: ICD.ResICD) => {
await useHandleData(deleteICD, [row.id], `删除【${row.name}】ICD`)
proTable.value?.getTableList()
}
// 删除设备icd
const handleDelete = async (params: ICD.ResICD) => {
await useHandleData(deleteICD, [params.id] , `删除【${params.name}】icd`)
proTable.value?.getTableList()
}
</script>
}
const handleExport = async (row: ICD.ResICD) => {
await useDownloadWithServerFileName(() => exportICD(row.id), row.name, {}, false, '.zip')
}
</script>