<!-- 检定项管理详情 -->
<script lang="ts" setup name="BusinessMeasureItemDetail">
import { ref } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
// import type { IForm } from './item-interface'
import templateDetailAddRowPattern from './components/first/templateDetailAddRowPattern.vue'
import templateDetailCreatePattern from './components/first/templateDetailCreatePattern.vue'
import templateDetailSecond from './components/second/templateDetail.vue'
import templateDetailThird from './components/third/templateDetail.vue'
import templateDetailFourth from './components/fourth/templateDetail.vue'
import templateDetailFifth from './components/fifth/templateDetail.vue'
import templateDetailSixth from './components/sixth/templateDetail.vue'
import templateDetailNinth from './components/ninth/templateDetail.vue'
import templateDetailEleventh from './components/eleventh/templateDetail.vue'
import templateDetailThirteenth from './components/thirteenth/templateDetail.vue'
import useUserStore from '@/store/modules/user'
import type { Itech } from '@/views/equipement/info/book/book-interface'
import { getDictByCode } from '@/api/system/dict'
import type { dictType } from '@/global'
import { UploadFile } from '@/api/file'
import showPhoto from '@/components/showPhoto/index.vue'
import { configItem, getInfo } from '@/api/business/measure/item'
import { getClassificationList } from '@/api/business/measure/classification'
const user = useUserStore() // 用户信息
const textMap: { [key: string]: string } = {
edit: '编辑',
add: '新建',
detail: '详情',
}// 字典
const $router = useRouter() // 关闭页面使用
const $route = useRoute() // 路由参数
const pageType = ref('add') // 页面类型: add, edit, detail
const infoId = ref('') // 列表id
const ruleFormRef = ref() // 表单ref
const showItemTableType = ref('') // 显示检定项表格两种页面(addRowPattern: 增加行模式，createPattern: 生成检定项模式)
const form = ref({
model: '', // 型号规格
deviceName: '', // 设备名称
helpInstruction: '', // 辅助字段
helpFieldInstruction: '', // 辅助字段说明
deviceType: '', // 设备分类（检校分类）
deviceTypeName: '', // 设备分类（检校分类）名称
itemCategoryId: '', // 设备检定项分类id
itemCategoryName: '', // 设备检定项分类
belongStandardEquipment: '', // 检校标准装置(字典code)
belongStandardEquipmentName: '', // 检校标准装置(字典value)
checkCycle: 0, // 检定周期
itemRemark: '', // 检定项备注
itemId: '', // 检定项id
})
// 校验规则
const rules = ref({
measureCategory: [{ required: true, message: '检校类别不能为空', trigger: ['blur', 'change'] }],
technologyFile: [{ required: true, message: '依据技术文件不能为空', trigger: ['blur', 'change'] }],
labLocation: [{ required: true, message: '地点不能为空', trigger: ['blur', 'change'] }],
labX: [{ required: true, message: '西昌实验室名字不能为空', trigger: ['blur', 'change'] }],
labH: [{ required: true, message: '海口实验室名字不能为空', trigger: ['blur', 'change'] }],
})
// ==========================第一套：多功能校准源标准装置数据==================================
const appearanceFunctionCheck = ref(true) // 第一套:多功能校准源--外观及功能检查
const indicationError = ref(true) // 第一套:多功能校准源--示值误差
const addRowPatternRef = ref() // 第一种模式组件ref（增加行模式）
const createPatternRef = ref() // 第二种模式组件ref（生成检定点）
// ==========================第4套：0.02级活塞式压力计标准装置数据==================================
const standardRef = ref() // 除第一套之外的剩余几套组件ref
// -------------------------------------------字典------------------------------------------
const deviceTypeList = ref<dictType[]>([])// 设备分类
const standardList = ref<dictType[]>([])// 检校标准装置
const measureCategoryList = ref<dictType[]>([])// 检校类别
const labXList = ref<dictType[]>([])// 西昌实验室
const labHList = ref<dictType[]>([])// 海口实验室
function getDict() {
// 检校类别
getDictByCode('measureCategory').then((response) => {
measureCategoryList.value = response.data
})
// 设备分类
getDictByCode('eqptDeviceType').then((response) => {
deviceTypeList.value = response.data
})
// 检校标准装置
getDictByCode('bizStandardEquipmentType').then((response) => {
standardList.value = response.data
})
// 西昌实验室
labXList.value = [{
id: '1',
value: '1',
name: '电力实验室',
},
{
id: '2',
value: '2',
name: '无线电实验室',
},
{
id: '3',
value: '2',
name: '无线电实验室',
},
]
// 海口实验室
labHList.value = [{
id: '1',
value: '电学实验室',
name: '电学实验室',
},
{
id: '2',
value: '2',
name: '压力检测实验室',
},
]
}
// ----------------------------------路由参数------------------------------------------------
if ($route.params && $route.params.type) {
pageType.value = $route.params.type as string
if ($route.params.id) {
infoId.value = $route.params.id as string
}
}
// -------------------------------------------获取检定项分类------------------------------------------------
const itemList = ref<{ id: string; name: string }[]>([]) // 检定项分类列表
// 获取检校标准装置
const fetchItemList = async (deviceType = '', belongStandardEquipment = '') => {
const requestParams = {
belongStandardEquipment, // 检校标准装置
categoryName: '', // 检定项分类名称
categoryNo: '', // 检定项分类编号
deviceType, // 设备分类
measureCategory: '', // 检校类别
limit: 999999,
offset: 1,
}
const response = await getClassificationList(requestParams)
itemList.value = response.data.rows.map((item: { categoryName: string; id: string }) => {
return {
name: item.categoryName, // 检定项分类名称
id: item.id,
}
})
}
// ------------------------------------------------------------------------------------------
// 关闭新增页面的回调
const close = () => {
$router.back()
}
// 校验
const check = () => {
if (form.value.belongStandardEquipment === '1') { // 第一套：多功能校准源
if (showItemTableType.value === 'addRowPattern') { // 增加行模式校验
if (!addRowPatternRef.value.list.length) {
ElMessage.warning('检定项不能为空')
return false
}
if (!addRowPatternRef.value.checkFrequencyUnit()) { return false } // 校验频率单位
if (!addRowPatternRef.value.checkList()) { return false } // 校验其他必填项
}
else {
if (!createPatternRef.value.list.length) {
ElMessage.warning('检定项不能为空')
return false
}
}
}
else if (form.value.belongStandardEquipment === '4') { // 第四套：0.02级活塞式压力计
if (!standardRef.value.list.length) {
ElMessage.warning('检定项不能为空')
return false
}
}
return true
}
// 处理请求数据
const solveData = () => {
let params
if (form.value.belongStandardEquipment === '1') { // 第一套：多功能校准源
params = {
appearanceFunctionCheck: appearanceFunctionCheck.value ? '1' : '0', // 外观及功能检查
helpFieldInstruction: form.value.helpFieldInstruction, // 辅助字段说明
itemId: infoId.value, // 检定项id
itemRemark: form.value.itemRemark, // 检定项备注
measureItemDataCalibratorList: showItemTableType.value === 'addRowPattern' ? addRowPatternRef.value.list : createPatternRef.value.list, // 检定项
}
}
else if (form.value.belongStandardEquipment === '4') { // 第四套：0.02级活塞式压力计
// await standardRef.value.recalculateData()
params = {
helpFieldInstruction: form.value.helpFieldInstruction, // 辅助字段说明
itemId: infoId.value, // 检定项id
itemRemark: form.value.itemRemark, // 检定项备注
measureItemDataPistonGaugeList: standardRef.value.list.map((item: { zeroPosition: string }) => {
return {
...item,
zeroPosition: item.zeroPosition !== '否',
}
}), // 检定项
measureItemConfigPistonGauge: { ...standardRef.value.form },
}
}
return params
}
// 保存
const save = () => {
if (form.value.belongStandardEquipment !== '1' && form.value.belongStandardEquipment !== '4') {
return false
}
if (!check()) { return false }
ruleFormRef.value!.validate((valid: boolean) => {
if (valid) {
const loading = ElLoading.service({
lock: true,
background: 'rgba(255, 255, 255, 0.8)',
})
const params = solveData()
// 保存
configItem(params).then((res) => {
fetchInfo()
ElMessage.success('保存成功')
pageType.value = 'detail'
loading.close()
}).catch(() => {
loading.close()
})
}
else {
console.log('表单校验不通过')
}
})
}
// 点击编辑
const edit = () => {
pageType.value = 'edit'
}
// ------------------------------------技术指标-------------------------------------------
const technicalTargetList = ref<Itech[]>([]) // 技术指标列表
const technicalIndexColumns = [ // 技术指标表头
{ text: '测量范围', value: 'measureRange', required: true },
{ text: '不确定度或允许误差极限或准确度等级', value: 'uncertainty', required: true },
{ text: '依据的技术文件', value: 'basedDocuments', required: true },
]
// ---------------------------------------获取详情------------------------------------------------
const getList = ref([]) // 检定项列表
const getObject = ref({}) // 检定项表单
// 处理返回数据
const solveResponseData = (response: any) => {
if (form.value.belongStandardEquipment === '1') { // 第一套：多功能校准源
getList.value = response.measureItemDataCalibratorList // 检定项表格
}
else if (form.value.belongStandardEquipment === '4') { // 第四套：0.02级活塞式压力计
getList.value = response.measureItemDataPistonGaugeList // 检定项表格
getObject.value = response.measureItemConfigPistonGauge // 检定项表单
}
}
function fetchInfo() {
const loading = ElLoading.service({
lock: true,
background: 'rgba(255, 255, 255, 0.8)',
})
const params = {
id: infoId.value,
itemCategoryName: form.value.itemCategoryName, // 检定项分类名字
belongStandardEquipment: form.value.belongStandardEquipment, // 检校标准装置字典code
}
getInfo(params).then((res) => {
form.value = res.data
technicalTargetList.value = res.data.technicalTargetList // 技术指标
solveResponseData(res.data)
loading.close()
})
}
// -------------------------------------钩子-----------------------------------------------------
onMounted(async () => {
form.value = { ...$route.query as any }
console.log('$route.query.belongStandardEquipment', $route.query.belongStandardEquipment)
fetchItemList() // 获取设备检定项分类
getDict()
if (form.value.itemCategoryName === '数字多用表(手持)' || form.value.itemCategoryName === '数字多用表(台式)' || form.value.itemCategoryName === '多功能电力参数测量仪' || form.value.itemCategoryName === '钳形电流表' || form.value.itemCategoryName === '指针式万用表') {
showItemTableType.value = 'addRowPattern' // 增加行模式
}
else {
showItemTableType.value = 'createPattern' // 生成检定项模式
}
fetchInfo() // 获取详情
})
</script>
<template>
<app-container>
<detail-page :title="`配置检定项-${textMap[pageType]}`">
<template #btns>
<el-button v-if="pageType === 'detail'" type="primary" @click="edit">
编辑
</el-button>
<el-button v-if="pageType !== 'detail'" type="primary" @click="save">
保存
</el-button>
<el-button type="info" @click="close">
关闭
</el-button>
</template>
<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="设备名称:" prop="deviceName">
<el-input v-model="form.deviceName" class="full-width-input" :disabled="pageType !== 'add'" placeholder="设备名称" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="型号规格:" prop="model">
<el-input v-model="form.model" class="full-width-input" :disabled="pageType !== 'add'" placeholder="型号规格" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="辅助字段:" prop="helpInstruction">
<el-input v-model="form.helpInstruction" class="full-width-input" :disabled="pageType !== 'add'" placeholder="辅助字段" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="辅助字段说明:" prop="helpFieldInstruction">
<el-input v-model="form.helpFieldInstruction" type="textarea" autosize class="full-width-input" :disabled="pageType === 'detail'" :placeholder="pageType === 'detail' ? ' ' : '辅助字段说明'" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="设备分类:" prop="deviceType">
<el-select
v-model="form.deviceType"
placeholder="设备分类"
class="short-input"
filterable
disabled
>
<el-option v-for="item in deviceTypeList" :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="categoryName">
<!-- <el-input v-model="form.categoryName" class="full-width-input" disabled placeholder="设备检定项分类" /> -->
<el-select
v-model="form.itemCategoryId"
placeholder="设备检定项分类"
filterable
style="width: 400px;"
disabled
>
<el-option v-for="item in itemList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检定周期(月):" prop="checkCycle">
<el-input-number
v-model="form.checkCycle"
:placeholder="pageType === 'detail' ? '' : '请输入检定周期'"
disabled
class="full-width-input"
:min="0"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</detail-page>
<!-- 技术指标 -->
<detail-block v-if="pageType === 'detail'" title="技术指标">
<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>
<!-- 第一套：多功能校准源标准装置--字典：1 -->
<detail-block v-if="form.belongStandardEquipment === '1'" title="检定项">
<el-checkbox v-model="appearanceFunctionCheck" :disabled="pageType === 'detail'">
外观及功能检查
</el-checkbox>
<el-checkbox v-model="indicationError" disabled>
示值误差
</el-checkbox>
<!-- 检定项表格(增加行模式) -->
<template-detail-add-row-pattern v-if="showItemTableType === 'addRowPattern'" ref="addRowPatternRef" :list="getList" :page-type="pageType" :item-category-name="form.itemCategoryName" />
<!-- 检定项表格(生成检定点模式) -->
<template-detail-create-pattern v-if="showItemTableType === 'createPattern'" ref="createPatternRef" :list="getList" :page-type="pageType" :item-category-name="form.itemCategoryName" />
</detail-block>
<!-- 第2套: 直流稳压电源标准装置--字典：2 -->
<detail-block v-if="form.belongStandardEquipment === '2'" title="检定项">
<template-detail-second
ref="standardRef"
:page-type="pageType"
:item-category-name="form.itemCategoryName"
:belong-standard-equipment="form.belongStandardEquipment"
:item-id="infoId"
:list="getList"
:form="getObject"
/>
</detail-block>
<!-- 第三套: 多功能电气安全校准器标准装置--字典：3 -->
<detail-block v-if="form.belongStandardEquipment === '3'" title="检定项">
<template-detail-third
ref="standardRef"
:page-type="pageType"
:item-category-name="form.itemCategoryName"
:belong-standard-equipment="form.belongStandardEquipment"
:item-id="infoId"
:list="getList"
:form="getObject"
/>
</detail-block>
<!-- 第四套: 0.02级活塞式压力计标准装置--字典：4 -->
<detail-block v-if="form.belongStandardEquipment === '4'" title="检定项">
<template-detail-fourth
ref="standardRef"
:page-type="pageType"
:item-category-name="form.itemCategoryName"
:belong-standard-equipment="form.belongStandardEquipment"
:item-id="infoId"
:list="getList"
:form="getObject"
/>
</detail-block>
<!-- 第五套：二等铂电阻温度计标准装置 -->
<detail-block v-if="form.belongStandardEquipment === '5'" title="检定项">
<template-detail-fifth
ref="standardRef"
:page-type="pageType"
:item-category-name="form.itemCategoryName"
:belong-standard-equipment="form.belongStandardEquipment"
:item-id="infoId"
:list="getList"
:form="getObject"
/>
</detail-block>
<!-- 第6套:安全阀标准装置--字典：6 -->
<detail-block v-if="form.belongStandardEquipment === '6'" title="检定项">
<template-detail-sixth
ref="standardRef"
:page-type="pageType"
:item-category-name="form.itemCategoryName"
:belong-standard-equipment="form.belongStandardEquipment"
:item-id="infoId"
:list="getList"
:form="getObject"
/>
</detail-block>
<!-- 第9套: 频谱分析仪--字典：9 -->
<detail-block v-if="form.belongStandardEquipment === '9'" title="检定项">
<template-detail-ninth
ref="standardRef"
:page-type="pageType"
:item-category-name="form.itemCategoryName"
:belong-standard-equipment="form.belongStandardEquipment"
:item-id="infoId"
:list="getList"
:form="getObject"
/>
</detail-block>
<!-- 第11套: 微波衰减标准装置--字典：11 -->
<detail-block v-if="form.belongStandardEquipment === '11'" title="检定项">
<template-detail-eleventh
ref="standardRef"
:page-type="pageType"
:item-category-name="form.itemCategoryName"
:belong-standard-equipment="form.belongStandardEquipment"
:item-id="infoId"
:list="getList"
:form="getObject"
/>
</detail-block>
<!-- 第13套: 示波器检定装置--字典：13 -->
<detail-block v-if="form.belongStandardEquipment === '13'" title="检定项">
<template-detail-thirteenth
ref="standardRef"
:page-type="pageType"
:item-category-name="form.itemCategoryName"
:belong-standard-equipment="form.belongStandardEquipment"
:item-id="infoId"
:list="getList"
:form="getObject"
/>
</detail-block>
<!-- 检定项备注 -->
<el-form
:model="form"
label-width="120"
label-position="right"
:rules="rules"
style="margin-top: 20px;"
>
<el-row>
<el-col :span="12">
<el-form-item label="检定项备注:" prop="itemRemark">
<el-input
v-model="form.itemRemark"
class="full-width-input"
autosize
type="textarea"
:placeholder="pageType === 'detail' ? ' ' : '请输入检定项备注'"
:disabled="pageType === 'detail'"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</app-container>
</template>
<style lang="scss" scoped>
.link {
text-decoration: underline;
color: #3d7eff;
cursor: pointer;
}
.file-area {
display: flex;
align-items: center;
font-size: 14px;
color: #60627f;
margin-bottom: 10px;
margin-left: 40px;
white-space: nowrap;
.tech-file {
display: flex;
align-items: center;
margin-left: 20px;
.file-text {
margin-right: 10px;
}
}
}
</style>
