GitBucket
Newer
<!-- 标准装置台账信息详情 配置核查项 第7套：精密露点仪标准装置 -->
<script name="StandardBookEquipmentConfig" lang="ts" setup>
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { IList } from './seventh-interface'
// import TemplateTable from './templateTable.vue'
import SelectEquipmentDialog from '@/views/business/fieldTest/approve/dialog/selectEquipmentDialog.vue'
import type { dictType } from '@/global'
import { useCheckList } from '@/commonMethods/useCheckList'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { config, getCheckItemDetail } from '@/api/equipment/standard/book'
import { calc } from '@/utils/useCalc'
import { getDictByCode } from '@/api/system/dict'
import { differenceArray, setSelectList, uniqueMultiArray } from '@/utils/Array'
import templateTable from '@/views/business/measure/item/components/second/templateTable.vue'
const textMap: { [key: string]: string } = {
edit: '编辑',
detail: '详情',
}// 页面类型字典
const form = ref({ // 表单
equipmentNo: '', // 统一编号
equipmentName: '', // 设备名称
model: '', // 型号规格
manufactureNo: '', // 出厂编号
measureRange: '', // 测量范围
uncertainty: '', // 不确定度或允许误差极限或准确度等级
itemCategoryName: '', // 核查项分类名称
itemCategoryId: '', // 核查项分类id
remark: '', // 核查项备注
belongStandardEquipment: '', // 检校标准装置
belongStandardEquipmentName: '', // 检校标准装置名称
})
const pageType = ref('detail') // 页面类型: add, edit, detail
const infoId = ref('') // id
const $router = useRouter() // 路由实例
const loading = ref(false) // loading
const equipmentId = ref('') // 设备id
// -----------------------------------路由参数------------------------------------------------------
// 从路由中获取页面类型参数
const $route = useRoute()
if ($route.params && $route.params.type) {
pageType.value = $route.params.type as string
if ($route.params.id) {
infoId.value = $route.params.id as string
}
console.log('pageType.value', pageType.value)
}
// -------------------------------------------核查项-----------------------------------------------
const list = ref<IList[]>([])
const checkoutList = ref<IList[]>([])
const columns = ref<TableColumn[]>([
{ text: '核查项目', value: 'paramsName', align: 'center', required: true, type: 'text' },
{ text: '配套设备名称', value: 'equipmentName', align: 'center', required: true, type: '' },
{ text: '型号规格', value: 'model', align: 'center', required: false, type: 'text' },
{ text: '出厂编号', value: 'manufactureNo', align: 'center', required: false, type: 'text' },
{ text: '类型', value: 'typeValue', align: 'center', required: true, type: 'select' },
{ text: '相对湿度/温度', value: 'relativeDimension', align: 'center', required: true, type: 'select-dict', code: 'RelativeHumidity' },
{ text: '温度点/相对湿度点', value: 'dimensionPoint', align: 'center', required: true, type: 'select-dict', code: 'RelativeHumidityPonit' },
{ text: '循环次数', value: 'cycleNumber', align: 'center', required: true, type: 'number' },
{ text: '核查类型', value: 'checkType', align: 'center', required: true, type: 'select-multi' },
{ text: 'U(k=2)', value: 'urel', align: 'center', required: true, type: 'number' },
])
// 校验表格（点击保存的时候、增加行用）
const checkList = (list: any, title: string) => {
return useCheckList(list, columns.value, '核查项表格')
}
/**
* 增加行公共方法
* @param list 要操作的数组
* @param title 操作的表格
*/
const addRow = (data: IList[], title: string) => {
if (checkList(data, `${title}表格`)) {
const obj = {
paramsName: '温湿度核查',
equipmentName: '',
equipmentId: '',
model: '',
manufactureNo: '',
typeValue: '',
relativeDimension: '',
relativeDimensionUnit: '',
dimensionPoint: '',
dimensionPointUnit: '',
checkType: ['重复性', '稳定性'], // 核查类型
cycleNumber: 10, // 循环次数
unit: '',
params: '1',
urel: '',
}
list.value.length
? list.value.push({
...JSON.parse(JSON.stringify(list.value[list.value.length - 1])),
equipmentName: '',
equipmentId: '',
model: '',
manufactureNo: '',
})
: list.value.push(obj)
}
}
/**
* 删除行公共方法
* @param checkoutList 选中的数组
* @param list 操作的数组
*/
const delRow = (checkoutList: IList[], clist: IList[], title: string) => {
if (!checkoutList.length) {
ElMessage.warning('请选中要删除的行')
}
else {
list.value = differenceArray(clist, checkoutList)
}
}
// 多选
const handleSelectionChange = (e: any, type: string) => {
checkoutList.value = e
}
// ---------------------------------------按钮-----------------------------------------------------
// 点击关闭
const close = () => {
$router.back()
}
// 清空配置
const clear = () => {
ElMessageBox.confirm(
'确认清空配置项吗？',
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
},
)
.then(() => {
list.value = []
form.value.remark = ''
})
}
// 点击保存
const save = () => {
if (!list.value.length) { ElMessage.warning('核查项不能为空'); return false }
if (!checkList(list.value, '核查项表格')) { return false }
// 验证数据 配套设备名称、类型、相对湿度/温度、温度点/相对湿度点这几个字段数据不能完全相同
// const sameData = uniqueMultiArray(uniqueMultiArray(uniqueMultiArray(uniqueMultiArray(list.value, 'equipmentId'), 'typeValue'), 'relativeDimension'), 'dimensionPoint')
// if (sameData.length > 1) {
// ElMessage.warning(`${sameData[0].equipmentName} 的类型、相对湿度/温度、温度点/相对湿度点 不能完全相同`)
// return false
// }
const params = {
itemCategoryId: form.value.itemCategoryId, // 核查项分类id
checkItemDataPointMeterList: list.value.map((item: any) => ({ ...item, equipmentId: equipmentId.value, id: '', remark: form.value.remark })),
equipmentId: equipmentId.value,
standardId: $route.query.standardId,
}
const loading = ElLoading.service({
lock: true,
text: '加载中',
background: 'rgba(255, 255, 255, 0.6)',
})
config(params).then((res) => {
ElMessage.success('已保存')
pageType.value = 'detail'
loading.close()
}).catch(() => {
loading.close()
})
}
// 获取详情
const getInfo = () => {
const loading = ElLoading.service({
lock: true,
text: '加载中',
background: 'rgba(255, 255, 255, 0.6)',
})
const params = {
equipmentId: equipmentId.value, // 设备id
belongStandardEquipment: form.value.belongStandardEquipment, // 检校标准装置code
itemCategoryId: form.value.itemCategoryId, // 核查项分类id
itemCategoryName: form.value.itemCategoryName, // 核查项分类名称
}
getCheckItemDetail(params).then((res) => {
const data = res.data?.checkItemDataPointMeterList || []
data.forEach((item: any) => {
list.value.push({
...item, checkType: ['重复性', '稳定性'], paramsName: '温湿度核查',
})
form.value.remark = item.remark
})
loading.close()
}).catch(() => {
loading.close()
})
}
// 表格下拉框等内容是否禁用
const disabled = ({ scope, column }: any, fun: any) => {
if (column.text === '循环次数') {
fun(true)
return
}
fun(pageType.value === 'detail')
}
// ------------------------------------------钩子--------------------------------------------------
onMounted(() => {
form.value.equipmentNo = $route.query.equipmentNo as string // 统一编号
form.value.equipmentName = $route.query.equipmentName as string // 设备名称
form.value.model = $route.query.model as string // 型号规格
form.value.manufactureNo = $route.query.manufactureNo as string // 出厂编号
form.value.measureRange = $route.query.measureRange as string // 测量范围
form.value.uncertainty = $route.query.uncertainty as string // 不确定度或允许误差极限或准确度等级
form.value.itemCategoryName = $route.query.itemCategoryName as string // 核查项分类名称
form.value.itemCategoryId = $route.query.itemCategoryId as string // 核查项分类id
form.value.belongStandardEquipment = $route.query.belongStandardEquipment as string // 核查项标准装置id
form.value.belongStandardEquipmentName = $route.query.belongStandardEquipmentName as string // 核查项标准装置id
equipmentId.value = $route.query.equipmentId as string // 设备id
getInfo()
})
// 核查类型
const checkTypeList = ref<{ value: string;name: string;id: string }[]>([])
const TypeList = ref<{ value: string;name: string;id: string }[]>([])
// 每个table对应的下拉框内容 字典
const tableDict = ref<{ [key: string]: { value: string;name: string;id: string }[] }>({})
// 获取字典
const fecthDict = async () => {
// 核查类型
const res2 = await getDictByCode('bizFirstStandardCheckType')
checkTypeList.value = res2.data
TypeList.value = [
{
name: '相对湿度',
value: '相对湿度',
id: '1',
},
{
name: '温度',
value: '温度',
id: '2',
},
]
tableDict.value = {
核查类型: checkTypeList.value,
类型: TypeList.value,
}
}
fecthDict()
const changeLoadSituationa = (value: any, index: number, text: string, type: string, list: any[], item: string) => {
if (text === '类型') {
if (typeof value !== 'string') { return }
list[index].dimensionPointUnit = value.includes('温度') ? '℃' : '%RH'
list[index].relativeDimensionUnit = value.includes('温度') ? '%RH' : '℃'
}
}
const selectIndex = ref(0)
const equipmentRef = ref()
// 点击选择设备
const selectedEquipment = (index: number) => {
selectIndex.value = index
equipmentRef.value.initDialog()
}
const confirmSelect = (val: any) => {
if (!val || !val.length) { return false }
list.value[selectIndex.value].equipmentName = val[0].equipmentName
list.value[selectIndex.value].equipmentId = val[0].id
list.value[selectIndex.value].model = val[0].model
list.value[selectIndex.value].manufactureNo = val[0].manufactureNo
}
</script>
<template>
<app-container>
<!-- 选择设备 -->
<select-equipment-dialog ref="equipmentRef" :is-multi="false" @confirm="confirmSelect" />
<detail-page v-loading="loading" :title="`配置核查项（${textMap[pageType]}）`">
<template #btns>
<el-button v-if="pageType === 'edit'" type="warning" @click="clear">
清空配置
</el-button>
<el-button v-if="pageType === 'edit'" type="primary" @click="save">
保存
</el-button>
<el-button type="info" @click="close">
关闭
</el-button>
</template>
<el-form
ref="ruleFormRef"
:model="form"
:label-width="130"
label-position="right"
>
<el-row :gutter="24" class="marg">
<el-col :span="6">
<el-form-item label="统一编号:" prop="equipmentNo">
<el-input
v-model="form.equipmentNo"
disabled
:placeholder="pageType === 'detail' ? '' : '统一编号'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="设备名称:" prop="equipmentName">
<el-input
v-model="form.equipmentName"
disabled
:placeholder="pageType === 'detail' ? '' : '设备名称'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="型号规格:" prop="model">
<el-input
v-model="form.model"
disabled
:placeholder="pageType === 'detail' ? '' : '型号规格'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="出厂编号:" prop="manufactureNo">
<el-input
v-model="form.manufactureNo"
disabled
:placeholder="pageType === 'detail' ? '' : '出厂编号'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="测量范围:" prop="measureRange">
<el-input
v-model="form.measureRange"
disabled
type="textarea"
autosize
:placeholder="pageType === 'detail' ? '' : '测量范围'"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label-width="260" label="不确定度或允许误差极限或准确度等级:" prop="uncertainty">
<el-input
v-model="form.uncertainty"
type="textarea"
autosize
disabled
:placeholder="pageType === 'detail' ? '' : '不确定度或允许误差极限或准确度等级'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="核查项分类名称:" prop="itemCategoryName">
<el-input
v-model="form.itemCategoryName"
disabled
:placeholder="pageType === 'detail' ? '' : '核查项分类名称'"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</detail-page>
<!-- 核查项 -->
<template-table
:data="list" :columns="columns" :page-type="pageType" title="核查项" index="1" :show-btn="pageType !== 'detail'"
:select-all-list="tableDict"
@disabled="disabled"
@selection-change="(e) => handleSelectionChange(e, '核查项')"
@add-row="addRow"
@del-row="delRow"
@change-load-situationa="changeLoadSituationa"
>
<template #custom-check>
核查项
</template>
<template #pre-content="{ scope, column, index }">
<div v-if="column.text === '配套设备名称'">
<el-input v-model="scope.equipmentName" placeholder="配套设备名称" class="input" disabled>
<template #append>
<el-button v-if="pageType !== 'detail'" size="small" @click="selectedEquipment(index)">
选择
</el-button>
</template>
</el-input>
</div>
</template>
<template #next-content="{ scope, column }">
<div v-if="column.text === '相对湿度/温度'" style="display: inline-block;white-space: nowrap;">
{{ scope.relativeDimensionUnit }}
</div>
<span v-if="column.text === '温度点/相对湿度点'" style="display: inline-block;white-space: nowrap;">
{{ scope.dimensionPointUnit }}
</span>
</template>
</template-table>
<!-- 核查项备注 -->
<el-form
:model="form"
label-width="120"
label-position="right"
style="margin-top: 20px;"
>
<el-row>
<el-col :span="12">
<el-form-item label="核查项备注:" prop="remark">
<el-input
v-model="form.remark"
class="full-width-input"
autosize
type="textarea"
:disabled="pageType === 'detail'"
:placeholder="pageType === 'detail' ? ' ' : '请输入核查项备注'"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</app-container>
</template>