GitBucket
Newer
<!-- 智能模型状态维护 基本信息 -->
<script name="EquipmentStateMaintenanceBasic" lang="ts" setup>
import type { Ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import dayjs from 'dayjs'
import type { IForm } from '../stateMaintenance-interface'
import SelectEquipmentDialog from '@/views/business/fieldTest/approve/dialog/selectEquipmentDialog.vue'
import type { IAccessory, Itech } from '@/views/equipement/info/book/book-interface'
import showPhoto from '@/components/showPhoto/index.vue'
import { UploadFile } from '@/api/file'
import type { deptType, dictType } from '@/global'
import type { IAddress } from '@/components/AddressSelect/address-interface'
import { getDictByCode } from '@/api/system/dict'
import { SCHEDULE } from '@/utils/scheduleDict'
import ApprovalDialog from '@/components/Approval/ApprovalDialog.vue'
import useUserStore from '@/store/modules/user'
import { getDeptTreeList } from '@/api/system/dept'
import { toTreeList } from '@/utils/structure'
import { getStaffList } from '@/api/resource/register'
import countries from '@/components/AddressSelect/country-code.json'
import { getInfo as getEquipmentDetail } from '@/api/equipment/info/book'
import { addStateMaintenance, failUpdateStateMaintenance, getInfo, submit, updateStateMaintenance } from '@/api/equipment/stateMaintenance/stateMaintenance'
const props = defineProps({
pageType: { // 页面类型 add新建 edit编辑 detail详情
type: String,
requre: true,
default: 'detail',
},
id: {
type: String,
requre: true,
},
approvalStatusName: { // 审批状态名称
type: String,
requre: true,
},
title: String, // 标题
approvalType: { // 1启封、2封存、3禁用、4报废
type: String,
default: '1',
},
formId: {
type: String,
default: '',
},
})
const emits = defineEmits(['addSuccess', 'submitSuccess'])
const countryList = ref(countries) // 国家列表
const user = useUserStore() // 用户信息
const $router = useRouter() // 路由实例
const form = ref<IForm>({
approvalNo: '', // 登记表编号、申请表编号
approvalName: '', // 登记表名称
createTime: '', // 申请时间
createUserId: '', // 申请人id
createUserName: '', // 申请人姓名
equipmentId: '', // 智能模型id
equipmentName: '', // 智能模型名称
equipmentNo: '', // 统一编号
model: '', // 规格型号
deptId: '', // 使用单位id
deptName: '', // 使用单位
productCountry: '', // 生产国家
manufacturer: '', // 厂商
manufactureNo: '', // 出厂编号
produceDate: '', // 生产日期
traceCompany: '', // 溯源单位
traceDate: '', // 溯源日期
measureValidDate: '', // 检定有效期
meterIdentify: '', // 计量标识
meterStandardName: '', // 所属测量标准
technicalFile: '', // 所依据的技术文件
approvalAddress: '', // 封存地点/存放地点/报废地点
approvalReason: '', // 封存原因/启封原因/禁用原因/报废原因
approvalType: '', // 申请类型
equipmentStatus: '', // 启封智能模型状态
performStatus: '', // 智能模型性能状态
approvalTime: '', // 封存时间
groupCode: '', // 部门
groupCodeName: '', // 部门名称
labCode: '', // 实验室
labCodeName: '', // 实验室名称
directorId: '', // 负责人id
directorName: '', // 负责人名称
usageStatus: '', // 使用状态
usageStatusName: '', // 使用状态名称
usedYears: '', // 使用年限
})
const ruleFormRef = ref() // 表单ref
const ruleFormRefInfo = ref() // 表单ref
const loading = ref(false) // loading
const infoId = ref('') // id
const meterStandardList = ref([]) as any // 所属的测量标准
const rules = ref<FormRules>({ // 校验规则
equipmentNo: [{ required: true, message: '统一编号不能为空', trigger: ['blur', 'change'] }],
labCode: [{ required: true, message: '实验室不能为空', trigger: ['blur', 'change'] }],
groupCode: [{ required: true, message: '部门不能为空', trigger: ['blur', 'change'] }],
approvalReason: [{ required: true, message: `${props.title}原因不能为空`, trigger: ['blur', 'change'] }],
approvalAddress: [{ required: true, message: `${props.title}地点不能为空`, trigger: ['blur', 'change'] }],
equipmentStatus: [{ required: true, message: '启封智能模型状态不能为空', trigger: ['blur', 'change'] }],
performStatus: [{ required: true, message: '智能模型性能状态不能为空', trigger: ['blur', 'change'] }],
approvalTime: [{ required: true, message: `${props.title}时间不能为空`, trigger: ['blur', 'change'] }],
})
// -----------------------------------------字典--------------------------------------------------------------
const meterIdentifyDict = ref<dictType[]>([]) // 计量标识
const useStatusList = ref<dictType[]>([]) // 使用状态
const useDeptList = ref<deptType[]>([]) // 部门
const labDeptList = ref<deptType[]>([]) // 实验室
const userList = ref<{ [key: string]: string }[]>([]) // 用户列表
function getDict() {
// 计量标识
getDictByCode('bizMeterIdentify').then((response) => {
meterIdentifyDict.value = response.data
})
// 获取用户列表
getStaffList({ offset: 1, limit: 999999 }).then((res: any) => {
userList.value = res.data.rows
})
// 实验室
getDictByCode('bizGroupCodeEquipment').then((response) => {
labDeptList.value = response.data
})
// 部门
getDictByCode('bizGroupCode').then((response) => {
useDeptList.value = response.data
})
// 使用状态
getDictByCode('bizUsageStatus').then((response) => {
useStatusList.value = response.data
})
}
// --------------------------------------表格-------------------------------------------------
const technicalTargetList = ref<Itech[]>([]) // 技术指标列表
const technicalIndexColumns = [ // 技术指标表头
{ text: '检定参数名称', value: 'measureParam', required: true },
{ text: '测量范围', value: 'measureRange', required: true },
{ text: '不确定度或允许误差极限或准确度等级', value: 'uncertainty', required: true },
]
const attachmentList = ref<IAccessory[]>([]) // 主附件信息
const accessoryColumns = [ // 主附件信息
{ text: '名称', value: 'name', required: true },
{ text: '信息', value: 'information', required: true },
{ text: '位置', value: 'location', required: true },
]
// 点击所属依据标准
const handleClickMeterStandardLink = (value: any) => {
// 跳转标准库详情页
$router.push({
path: `/standard/detail/${value.id}`,
query: {
approvalStatusName: '全部', // 审批状态名称
standardNo: value.standardNo, // 标准库编号
standardName: value.standardName, // 标准库名称
},
})
}
// --------------------------------------选择智能模型编号-------------------------------------------------
const selectEquipmentDialogRef = ref() // 选择智能模型编号组件ref
// 批量添加
const selectEquipment = () => {
selectEquipmentDialogRef.value.initDialog(user.bizLabCode, user.groupNo, 'noChange', '4')
}
// 确定选择智能模型
const confirmSelectEquipment = (val: any, type = '') => {
if (val.length) {
getEquipmentDetail({ id: val[0].id, type: '1' }).then((res) => {
if (type !== 'detail') {
attachmentList.value = res.data.attachmentList // 主附件信息
technicalTargetList.value = res.data.technicalTargetList // 技术指标表格
form.value.equipmentId = val[0].id // 智能模型id
form.value.equipmentName = res.data.equipmentInfoApproval.equipmentName // 智能模型名称
form.value.equipmentNo = res.data.equipmentInfoApproval.equipmentNo // 统一编号
form.value.model = res.data.equipmentInfoApproval.model // 规格型号
form.value.productCountry = res.data.equipmentInfoApproval.productCountry // 生产国家
form.value.manufacturer = res.data.equipmentInfoApproval.manufacturer // 厂商
form.value.manufactureNo = res.data.equipmentInfoApproval.manufactureNo // 出厂编号
form.value.produceDate = res.data.equipmentInfoApproval.produceDate // 生产日期
form.value.traceCompany = res.data.equipmentInfoApproval.traceCompany // 溯源单位
form.value.traceDate = res.data.equipmentInfoApproval.traceDate // 溯源日期
form.value.measureValidDate = res.data.equipmentInfoApproval.measureValidDate // 检定有效期
form.value.meterIdentify = res.data.equipmentInfoApproval.meterIdentify // 计量标识
form.value.groupCode = res.data.equipmentInfoApproval.groupCode // 部门
form.value.groupCodeName = res.data.equipmentInfoApproval.groupCodeName // 部门名称
form.value.labCode = res.data.equipmentInfoApproval.labCode // 实验室
form.value.labCodeName = res.data.equipmentInfoApproval.labCodeName // 实验室名称
form.value.directorId = res.data.equipmentInfoApproval.directorId // 负责人id
form.value.directorName = res.data.equipmentInfoApproval.directorName // 负责人名称
form.value.usageStatus = res.data.equipmentInfoApproval.usageStatus // 使用状态
form.value.usageStatusName = res.data.equipmentInfoApproval.usageStatusName // 使用状态名称
form.value.usedYears = res.data.equipmentInfoApproval.usedYears // 使用年限
}
form.value.technicalFile = res.data.equipmentInfoApproval.technicalFile ? res.data.equipmentInfoApproval.technicalFile.split(',') : res.data.equipmentInfoApproval.technicalFile // 核查规范/确认方法
meterStandardList.value = res.data.standardInfoList.map((item: { standardName: string;standardNo: string;id: string }) => {
return {
standardName: item.standardName,
standardNo: item.standardNo,
id: item.id,
}
})
})
}
}
// -----------------------------------------------保存-------------------------------------------
/**
* 点击保存
* @param formEl 基本信息表单ref
*/
const saveForm = async () => {
// if (props.approvalType === '1') { // 启封
// if (!form.value.approvalReason) { return ElMessage.warning('启封原因不能为空') }
// if (!form.value.equipmentStatus) { return ElMessage.warning('启封智能模型状态不能为空') }
// }
await ruleFormRef.value.validate((valid: boolean) => {
if (valid) { // 基本信息表单通过校验
ruleFormRefInfo.value.validate((validin: boolean) => {
if (validin) {
ElMessageBox.confirm(
'确认保存吗？',
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
},
).then(() => {
const loading = ElLoading.service({
lock: true,
text: '加载中...',
background: 'rgba(255, 255, 255, 0.8)',
})
if (props.pageType === 'add') { // 新建
addStateMaintenance({ ...form.value, approvalType: props.approvalType }).then((res) => {
loading.close()
form.value.approvalNo = res.data.approvalNo // 申请编号
infoId.value = res.data.id // id
emits('addSuccess', infoId.value)
ElMessage.success('已保存')
}).catch(() => {
loading.close()
})
}
else if (props.pageType === 'edit') { // 编辑
console.log(props.approvalStatusName)
if (props.approvalStatusName === '草稿箱' || props.approvalStatusName === '全部') {
updateStateMaintenance({ ...form.value, approvalType: props.approvalType }).then((res) => {
loading.close()
emits('addSuccess', infoId.value)
ElMessage.success('已保存')
}).catch(() => {
loading.close()
})
}
else { // '未通过' || '已取消'
failUpdateStateMaintenance({ ...form.value, approvalType: props.approvalType }).then((res) => {
loading.close()
emits('submitSuccess')
ElMessage.success('已保存')
}).catch(() => {
loading.close()
})
}
}
})
}
})
}
})
}
// ----------------------------------------------提交--------------------------------------------
// 提交
/**
*
* @param processId 流程实例id
* @param id
*/
const submitForm = (processId: string, id: string) => {
const loading = ElLoading.service({
lock: true,
text: '加载中...',
background: 'rgba(255, 255, 255, 0.6)',
})
submit({ id, formId: props.formId, processId }).then((res) => {
ElMessage.success('已提交')
emits('submitSuccess')
loading.close()
})
}
// -----------------------------------------获取详情------------------------------------------
// 获取详情
const fetchInfo = () => {
loading.value = true
getInfo({ id: infoId.value }).then((res) => {
loading.value = false
form.value = res.data
attachmentList.value = res.data.attachmentList
technicalTargetList.value = res.data.technicalTargetList
confirmSelectEquipment([{ id: res.data.equipmentId }], 'detail')
})
}
// ---------------------------------------------钩子----------------------------------------------
watch(() => props.id, (newValue) => {
infoId.value = newValue!
if (infoId.value) {
fetchInfo() // 获取详情信息
}
}, { immediate: true })
onMounted(async () => {
await getDict()
form.value.approvalName = (props.title === '启封' || props.title === '封存') ? `智能模型${props.title}登记表` : `智能模型${props.title}申请表` // 登记表名、申请表名称
form.value.createUserId = user.id// 申请人id
form.value.createUserName = user.name // 申请人名字
form.value.createTime = dayjs().format('YYYY-MM-DD HH-mm:ss')// 申请时间
if (props.pageType !== 'add' && infoId.value) {
fetchInfo() // 获取详情信息
}
})
defineExpose({ saveForm, submitForm })
</script>
<template>
<detail-block v-loading="loading" title="">
<el-form
ref="ruleFormRef"
:model="form"
:label-width="120"
label-position="right"
:rules="rules"
>
<el-row :gutter="24">
<el-col :span="6">
<el-form-item label="文件编号">
<el-input v-model="form.approvalNo" disabled placeholder="系统自动生成" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="文件名称">
<el-input
v-model="form.approvalName"
:placeholder="pageType === 'detail' ? '' : '请输入文件名称'"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="申请人:">
<el-input
v-model="form.createUserName" disabled
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="申请时间:" prop="applyTime">
<el-date-picker
v-model="form.createTime"
type="datetime"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="统一编号:" prop="equipmentNo">
<el-input
v-model="form.equipmentNo"
:placeholder="pageType === 'detail' ? '' : '请选择统一编号'"
:class="{ 'detail-input': pageType === 'detail' }"
disabled
>
<template v-if="pageType !== 'detail'" #append>
<el-button size="small" @click="selectEquipment">
选择
</el-button>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="智能模型名称:" prop="equipmentName">
<el-input
v-model.trim="form.equipmentName"
:placeholder="pageType === 'detail' ? '' : '智能模型名称'"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="规格型号" prop="model">
<el-input
v-model.trim="form.model"
:placeholder="pageType === 'detail' ? '' : '规格型号'"
disabled
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="出厂编号" prop="manufactureNo">
<el-input
v-model.trim="form.manufactureNo"
:placeholder="pageType === 'detail' ? '' : '出厂编号'"
disabled
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="生产国家:" prop="productCountry">
<el-select
v-model="form.productCountry"
filterable
:placeholder="pageType === 'detail' ? ' ' : '生产国家'"
disabled
class="full-width-input"
>
<el-option v-for="country of countryList" :key="country.code" :label="country.CNName" :value="country.code" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="厂商" prop="manufacturer">
<el-input
v-model.trim="form.manufacturer"
:placeholder="pageType === 'detail' ? '' : '厂商'"
disabled
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="生产日期:" prop="produceDate">
<el-date-picker
v-model="form.produceDate"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:placeholder="pageType === 'detail' ? ' ' : '生产日期'"
disabled
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="实验室" prop="labCode">
<el-select
v-model.trim="form.labCode"
placeholder="实验室"
filterable
disabled
class="full-width-input"
>
<el-option v-for="item in labDeptList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="部门" prop="groupCode">
<el-select
v-model.trim="form.groupCode"
placeholder="部门"
filterable
disabled
class="full-width-input"
>
<el-option v-for="item in useDeptList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="负责人:">
<el-input
v-model.trim="form.directorName"
:placeholder="pageType === 'detail' ? ' ' : '负责人'"
disabled
class="full-width-input"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="使用状态:" prop="usageStatus">
<el-select
v-model.trim="form.usageStatus"
clearable
:placeholder="pageType === 'detail' ? '' : '使用状态'"
size="default"
disabled
class="full-width-input"
>
<el-option
v-for="item in useStatusList"
:key="item.id"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="使用年限:" prop="usedYears">
<el-input
v-model="form.usedYears"
:placeholder="pageType === 'detail' ? '' : '使用年限'"
disabled
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="溯源单位:" prop="traceCompany" style="flex: 1;">
<el-input
v-model="form.traceCompany"
disabled
:placeholder="pageType === 'detail' ? ' ' : '请输入溯源单位'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="溯源日期:" prop="traceDate" style="flex: 1;">
<el-date-picker
v-model="form.traceDate"
type="date"
:placeholder="pageType === 'detail' ? ' ' : '溯源日期'"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
disabled
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检定有效期:" prop="measureValidDate" style="flex: 1;">
<el-date-picker
v-model="form.measureValidDate"
type="date"
:placeholder="pageType === 'detail' ? ' ' : '检定有效期'"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
disabled
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="计量标识:" prop="meterIdentify" style="flex: 1;">
<el-select
v-model="form.meterIdentify"
:placeholder="pageType === 'detail' ? ' ' : '计量标识'"
disabled
class="full-width-input"
>
<el-option v-for="item of meterIdentifyDict" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</detail-block>
<!-- 技术指标 -->
<detail-block title="技术指标">
<div class="file-area">
<div v-if="meterStandardList.length" style="display: flex;">
<span style="white-space: nowrap;font-weight: 600;">所属测量标准：</span>
<div style="padding-right: 60px;padding-left: 20px;line-height: 24px;cursor: pointer;color: #5193ff;">
<span v-for="item in meterStandardList" :key="item.id" @click="handleClickMeterStandardLink(item)">
<span style="text-decoration: underline;">{{ item.standardName }}</span>ㅤ
</span>
</div>
</div>
<div class="tech-file">
<span style="white-space: nowrap;font-weight: 600;" class="file-text">核查规范/确认方法: </span>
<span v-if="pageType === 'detail' && !form.technicalFile" class="file-text">无 </span>
<div v-if="form.technicalFile && form.technicalFile.length">
<div v-for="(item, index) in form.technicalFile" :key="index" style="display: flex;">
<show-photo :minio-file-name="item" />
</div>
</div>
</div>
</div>
<el-table
ref="techRef"
:data="technicalTargetList"
border
style="width: 100%;"
>
<el-table-column align="center" label="序号" width="80" type="index" />
<el-table-column
v-for="item in technicalIndexColumns"
:key="item.value"
:prop="item.value"
:label="item.text"
align="center"
/>
</el-table>
</detail-block>
<!-- 主附件信息 -->
<detail-block title="主附件信息">
<el-table
ref="accessoryRef"
:data="attachmentList"
border
style="width: 100%;"
>
<el-table-column align="center" label="序号" width="80" type="index" />
<el-table-column
v-for="item in accessoryColumns"
:key="item.value"
:prop="item.value"
:label="item.text"
align="center"
/>
</el-table>
</detail-block>
<detail-block title="">
<el-form
ref="ruleFormRefInfo"
:model="form"
:label-width="120"
label-position="right"
:rules="rules"
>
<el-row v-if="props.title === '封存' || props.title === '禁用'">
<el-col :span="12">
<el-form-item label="智能模型性能状态" prop="performStatus">
<el-input
v-model="form.performStatus"
type="textarea"
autosize
:placeholder="pageType === 'detail' ? '' : '请输入智能模型性能状态'"
:class="{ 'detail-input': pageType === 'detail' }"
:disabled="pageType === 'detail'"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item prop="approvalReason" :label="`${props.title}原因`">
<el-input
v-model="form.approvalReason"
type="textarea"
autosize
:placeholder="pageType === 'detail' ? '' : `请输入${props.title}原因`"
:class="{ 'detail-input': pageType === 'detail' }"
:disabled="pageType === 'detail'"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item v-if="props.title === '封存' || props.title === '禁用' || props.title === '报废'" prop="approvalAddress" :label="`${props.title}地点`">
<el-input
v-model="form.approvalAddress"
type="textarea"
autosize
:placeholder="pageType === 'detail' ? '' : `请输入${props.title}地点`"
:class="{ 'detail-input': pageType === 'detail' }"
:disabled="pageType === 'detail'"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item v-if="props.title === '启封'" prop="equipmentStatus" label="启封智能模型状态">
<el-input
v-model="form.equipmentStatus"
type="textarea"
autosize
:placeholder="pageType === 'detail' ? '' : '请输入启封智能模型状态'"
:class="{ 'detail-input': pageType === 'detail' }"
:disabled="pageType === 'detail'"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item v-if="props.title === '封存' || props.title === '禁用' || props.title === '报废'" prop="approvalTime" :label="`${props.title}时间`">
<el-date-picker
v-model="form.approvalTime"
type="datetime"
:placeholder="pageType === 'detail' ? '' : `请选择${props.title}时间`"
class="full-width-input"
:class="{ 'detail-input': pageType === 'detail' }"
:disabled="pageType === 'detail'"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</detail-block>
<!-- 选择智能模型台账 -->
<select-equipment-dialog ref="selectEquipmentDialogRef" @confirm="confirmSelectEquipment" />
</template>
<style lang="scss" scoped>
.link {
text-decoration: underline;
color: #3d7eff;
cursor: pointer;
}
.file-area {
font-size: 14px;
color: #60627f;
margin-bottom: 10px;
margin-left: 40px;
width: 100%;
flex-wrap: wrap;
.tech-file {
display: flex;
align-items: center;
flex-wrap: wrap;
white-space: nowrap;
.file-text {
margin-right: 10px;
}
}
}
</style>