<!-- 标准装置台账信息详情 配置核查项 第11套:微波衰减标准装置 --> <!-- 第15套:小功率标准装置 --> <script name="StandardBookEquipmentConfig" lang="ts" setup> import { ElLoading, ElMessage, ElMessageBox } from 'element-plus' import type { IList } from './fifteenth-interface' import TemplateTable from './templateTable.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 } from '@/utils/Array' import { useArrayDataUnique } from '@/commonMethods/useArrayDataUnique' 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 standardFrequencyUnitList = ref<dictType[]>([]) // 频率单位-公用 /** * 获取字典 */ function getDict() { // 频率单位公用 getDictByCode('standardFrequencyUnit').then((response) => { standardFrequencyUnitList.value = response.data }) } getDict() // -------------------------------------------核查项----------------------------------------------- const list = ref<IList[]>([]) const checkoutList = ref<IList[]>([]) // 多选 const columns = ref<TableColumn[]>([ { text: '核查项目', value: 'params', align: 'center', required: true }, { text: '频率', value: 'frequency', align: 'center', required: true, width: '180' }, { text: '频率单位', value: 'frequencyUnit', align: 'center', required: true, width: '100' }, { text: 'Kc/%', value: 'kc', align: 'center', required: true, width: '180' }, { text: 'U(k=2)', value: 'urel', align: 'center', required: true, width: '180' }, { text: '循环次数', value: 'cycleNumber', align: 'center', required: true }, { text: '核查类型', value: 'checkType', align: 'center', required: true }, ]) // 多选 const handleSelectionChange = (e: any) => { checkoutList.value = e } // 校验表格(点击保存的时候、增加行用) const checkList = () => { return useCheckList(list.value, columns.value, '核查项表格') } /** * 增加行公共方法 * @param list 要操作的数组 * @param title 操作的表格 */ const addRow = () => { if (checkList()) { if (list.value.length) { // 增加行时默认上一行数据 list.value.push({ ...list.value[list.value.length - 1] }) } else { list.value.push({ equipmentId: infoId.value, // 配套设备id itemCategoryId: form.value.itemCategoryId, // 核查项分类id(能够确定是哪个标准装置) remark: '', // 核查项备注 params: '校准因子', // 核查项目(字典value) frequency: '', // 频率 frequencyUnit: 'MHz', // 频率单位 kc: '', // Kc/% urel: '', // U(k=2) cycleNumber: 10, // 循环次数 checkType: '重复性, 稳定性', // 核查类型(直接存字典value,多个逗号分隔) }) } } } /** * 删除行公共方法 * @param checkoutList 选中的数组 * @param list 操作的数组 */ const delRow = (checkoutList: IList[], listParams: IList[]) => { if (!checkoutList.length) { ElMessage.warning('请选中要删除的行') } else { list.value = listParams.filter((item: any) => { return !checkoutList.includes(item) }) } } // ---------------------------------------按钮----------------------------------------------------- // 点击关闭 const close = () => { $router.back() } // 清空配置 const clear = () => { ElMessageBox.confirm( '确认清空配置项吗?', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }, ) .then(() => { list.value = [] form.value.remark = '' }) } // 保存之前校验 const checkListBeforeSave = () => { // 验空 if (!list.value.length) { ElMessage.warning('核查项表格 不能为空') return false } if (!checkList()) { return false } // 检查频率和频率单位不能同时完全一样 if (!checkArrayDataUnique(list.value)) { return false } return true } // 校验表格中不能同时出现核查项目和频率、频率单位两个属性同时相同的两条数据 function checkArrayDataUnique(list: any) { for (let i = 0; i < list.length; i++) { const j = i + 1 for (let j = 0; j < list.length; j++) { if (i !== j && list[i].params === list[j].params && (list[i].frequency + list[i].frequencyUnit) === (list[j].frequency + list[j].frequencyUnit)) { ElMessage.warning(`${list[i].params} 第${i + 1}行第${j + 1}行的 频率和频率单位不能同时完全一样`) return false } } } return true } // 点击保存 const save = () => { if (!checkListBeforeSave()) { return false } const params = { equipmentId: equipmentId.value, itemCategoryId: form.value.itemCategoryId, // 核查项分类id checkItemDataLowerPowerList: list.value.map((item: IList) => { return { ...item, id: '', remark: form.value.remark, } }), 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() }) } // 获取详情 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) => { if (res && res.data && res.data.checkItemDataLowerPowerList && res.data.checkItemDataLowerPowerList.length) { list.value = res.data.checkItemDataLowerPowerList.map((item: any) => { return { ...item, params: '校准因子', } }) form.value.remark = list.value[0].remark } loading.close() }) } // ------------------------------------------钩子-------------------------------------------------- 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() }) </script> <template> <app-container> <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> <detail-block title="核查项" style="padding-bottom: 20px;"> <template v-if="pageType !== 'detail'" #btns> <el-button type="primary" @click="addRow"> 增加行 </el-button> <el-button type="info" @click="delRow(checkoutList, list)"> 删除行 </el-button> </template> <el-table :data="list" border style="width: 100%;" @selection-change="handleSelectionChange" > <el-table-column v-if="pageType !== 'detail'" type="selection" width="38" /> <el-table-column align="center" label="序号" width="80" type="index" /> <el-table-column v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text" :width="item.width" align="center" > <template #header> <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span> </template> <template #default="scope"> <precision-input-number v-if="pageType !== 'detail' && (item.value === 'frequency' || item.value === 'urel')" v-model="scope.row[item.value]" :placeholder="`${item.text}`" class="full-width-input" :disabled="pageType === 'detail'" /> <precision-input-number v-if="pageType !== 'detail' && item.value === 'kc'" v-model="scope.row[item.value]" :placeholder="`${item.text}`" class="full-width-input" :disabled="pageType === 'detail'" :precision="3" /> <!-- 频率单位公用 --> <el-select v-if="pageType !== 'detail' && item.value === 'frequencyUnit'" v-model="scope.row[item.value]" :placeholder="`${item.text}`" :disabled="pageType === 'detail'" class="full-width-input" > <el-option v-for="item of standardFrequencyUnitList" :key="item.value" :label="item.name" :value="item.name" /> </el-select> </template> </el-table-column> </el-table> </detail-block> <!-- 核查项备注 --> <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>