<!-- 第15套:小功率标准装置 --> <script lang="ts" setup name="TemplateDetailFifteenth"> import { ElMessage } from 'element-plus' import type { IList } from './templateDetail-interface' import type { dictType } from '@/global' import { getDictByCode } from '@/api/system/dict' import { calc } from '@/utils/useCalc' import { useCheckList } from '@/commonMethods/useCheckList' import { calculate, recalculate } from '@/api/business/measure/caculate' import { useRound } from '@/commonMethods/useRound' const props = defineProps({ pageType: { type: String, default: 'add', }, itemCategoryName: { type: String, require: true, }, // 设备检定项分类名称 belongStandardEquipment: { // 检校标准装置code type: String, require: true, }, list: { type: Array as any, }, form: { // 检定项表单 type: Object as any, }, itemId: { // 检定项id type: String, default: '', }, }) const list = ref<IList[]>([]) // 表格数据(上面表格) const checkoutList = ref<IList[]>([]) // 表格多选 const tableLoading = ref(false) const form = ref({ appearanceFunctionCheck: 1, // 外观检查 }) // ----------------------------------------表头------------------------------------------------ const columns = ref([ { 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: '标准反射系数ГGe', value: 'standardReflectionCoefficient', align: 'center', required: true, width: '180' }, { text: '被检设备反射系数Гu', value: 'deviceReflectionCoefficient', align: 'center', required: true, width: '180' }, { text: 'U(k=2)', value: 'urel', align: 'center', required: true, width: '180' }, ]) // ------------------------------------------字典---------------------------------------------- const standardFrequencyUnitList = ref<dictType[]>([]) // 频率单位-公用 /** * 获取字典 */ function getDict() { // 频率单位公用 getDictByCode('standardFrequencyUnit').then((response) => { standardFrequencyUnitList.value = response.data }) } getDict() // --------------------------------表格操作--------------------------------------------------- // 多选 const handleSelectionChange = (e: any) => { checkoutList.value = e } /** * 增加行公共方法 * @param list 要操作的数组 * @param title 操作的表格 */ const addRow = (list: IList[], title: string) => { if (checkList()) { if (list.length) { // 增加行时默认上一行数据 list.push({ ...list[list.length - 1] }) } else { list.push({ id: '', // id,更新/删除使用参数 params: title, itemId: props.itemId, // 检定项id dataType: '1', // 检定项数据类型(一个检定项中区分两个表格)(字典code) frequency: '', // 频率 frequencyUnit: 'MHz', // 频率单位 kc: '', // Kc/% standardReflectionCoefficient: '0.10', // 标准反射系数ГGe deviceReflectionCoefficient: '0.10', // 被检设备反射系数Гu urel: '', // U(k=2) }) } } } /** * 删除行公共方法 * @param checkoutList 选中的数组 * @param list 操作的数组 */ const delRow = (checkoutList: IList[], listParam: IList[]) => { if (!checkoutList.length) { ElMessage.warning('请选中要删除的行') } else { list.value = listParam.filter((item: any) => { return !checkoutList.includes(item) }) } } // ---------------------------------------------校验--------------------------------------------------- // 校验表格(点击保存的时候用) function checkList() { return useCheckList(list.value, columns.value, '检定项表格') } const checkListBeforeSave = () => { if (!list.value.length) { ElMessage.warning('校准因子表格不能为空') return false } if (!checkList()) { return false } return true } // ----------------------------------------------------------------------------------------------------- watch(() => props.list, (newVal) => { // 检定项表格 if (newVal && newVal.length) { list.value = [...newVal] list.value = list.value.map((item: IList) => { return { ...item, params: '校准因子', kc: useRound(item.kc, 3), // 处理小数位数保留 standardReflectionCoefficient: useRound(item.standardReflectionCoefficient, 2), deviceReflectionCoefficient: useRound(item.deviceReflectionCoefficient, 2), } }) as any } }) watch(() => props.form, (newValue) => { if (newValue && Object.keys(newValue).length) { form.value.appearanceFunctionCheck = newValue.appearanceFunctionCheck // 外观及功能性检查 } }, { deep: true, immediate: true }) defineExpose({ list, checkListBeforeSave, form }) </script> <template> <div style="padding: 0 10px;"> <el-checkbox v-model="form.appearanceFunctionCheck" :true-label="1" :false-label="0" :disabled="pageType === 'detail'"> 外观及功能性检查 </el-checkbox> <el-checkbox :checked="true" disabled> 校准因子 </el-checkbox> </div> <detail-block title=" " style="margin-top: 0;padding-top: 0;"> <template v-if="pageType !== 'detail'" #btns> <el-button type="primary" @click="addRow(list, '校准因子')"> 增加行 </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"> <el-input-number v-if="pageType !== 'detail' && (item.value === 'kc' || item.value === 'standardReflectionCoefficient' || item.value === 'deviceReflectionCoefficient')" v-model="scope.row[item.value]" :placeholder="`${item.text}`" class="full-width-input" :disabled="props.pageType === 'detail'" :precision="item.value === 'kc' ? 3 : 2" /> <el-input-number v-if="pageType !== 'detail' && (item.value === 'urel' || item.value === 'frequency')" v-model="scope.row[item.value]" :placeholder="`${item.text}`" class="full-width-input" :disabled="props.pageType === 'detail'" /> <!-- 频率单位公用 --> <el-select v-if="pageType !== 'detail' && item.value === 'frequencyUnit'" v-model="scope.row[item.value]" :placeholder="`${item.text}`" :disabled="props.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> </template>