GitBucket
Newer
<!-- 标准装置台账信息详情 配置核查项 第4套：0.02级活塞式压力计 -->
<script name="StandardBookEquipmentConfig" lang="ts" setup>
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { IList } from './fourth-interface'
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'
const textMap: { [key: string]: string } = {
edit: '编辑',
detail: '详情',
}// 页面类型字典
const form = ref({ // 表单
equipmentNo: '', // 统一编号
equipmentName: '', // 设备名称
model: '', // 型号规格
manufactureNo: '', // 出厂编号
measureRange: '', // 测量范围
uncertainty: '', // 不确定度或允许误差极限或准确度等级
itemCategoryName: '', // 核查项分类名称
itemCategoryId: '', // 核查项分类id
remark: '', // 核查项备注
belongStandardEquipment: '', // 检校标准装置
belongStandardEquipmentName: '', // 检校标准装置名称
// itemCategoryName: '', // 类型：压力值、电信号
})
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 pressureUnitList = ref<dictType[]>([])// 单位（压力值）
const checkPointPressureList = ref<dictType[]>([])// 核查点（压力值）
const maximumErrorAbsolutePressureList = ref<dictType[]>([])// 最大允许误差绝对值（压力值）
const checkItemElectricalSignalList = ref<dictType[]>([])// 核查项目(电信号)
const unitElectricalSignalList = ref<dictType[]>([])// 核查项目(电信号)
const checkPointElectricalSignalListList = ref<dictType[]>([])// 核查点(电信号)
const unitElectricalSignalVList = ref<dictType[]>([])// 核查点V(电信号)
const unitElectricalSignalAList = ref<dictType[]>([])// 核查点A(电信号)
const maximumErrorAbsoluteElectricalSignalList = ref<dictType[]>([])// 最大允许误差绝对值(电信号)
// 查询字典
const getDict = () => {
// 单位（压力值）
getDictByCode('rangeUnit').then((response) => {
pressureUnitList.value = response.data
})
// 核查点（压力值）
getDictByCode('checkPointPressure').then((response) => {
checkPointPressureList.value = response.data
})
// 最大允许误差绝对值（压力值）
getDictByCode('maximumErrorAbsolutePressure').then((response) => {
maximumErrorAbsolutePressureList.value = response.data
})
// 核查项目(电信号)
getDictByCode('checkItemElectricalSignal').then((response) => {
checkItemElectricalSignalList.value = response.data
})
// 单位电压(电信号)
getDictByCode('unitElectricalSignalV').then((response) => {
unitElectricalSignalVList.value = response.data
})
// 单位电流(电信号)
getDictByCode('unitElectricalSignalA').then((response) => {
unitElectricalSignalAList.value = response.data
})
// 核查点(电信号)
getDictByCode('checkPointElectricalSignal').then((response) => {
checkPointElectricalSignalListList.value = response.data
})
// 最大允许误差绝对值(电信号)
getDictByCode('maximumErrorAbsoluteElectricalSignal').then((response) => {
maximumErrorAbsoluteElectricalSignalList.value = response.data
})
}
getDict()
// -------------------------------------------核查项-----------------------------------------------
const list = ref<IList[]>([]) // 核查数据
const checkoutList = ref<IList[]>([]) // 核查数据
const columns = ref<TableColumn[]>([]) // 表头
const columns_pressure = ref<TableColumn[]>([ // 压力表头
{ text: '单位', value: 'unit', align: 'center', required: true },
{ text: '核查点', value: 'checkPoint', align: 'center', required: true },
{ text: '循环次数（正行程和反行程）', value: 'cycleNumber', align: 'center', required: true },
{ text: '最大允许误差绝对值', value: 'maximumErrorAbsolute', align: 'center', required: true },
{ text: '分辨力', value: 'resolution', align: 'center', required: true, reg: (resolution: string | number) => { return Number(resolution) < 1 } },
])
const columns_electrical_signal = ref<TableColumn[]>([ // 电信号表头
{ text: '核查项目', value: 'checkItem', align: 'center', required: true },
{ text: '单位', value: 'unit', align: 'center', required: true },
{ text: '核查点', value: 'checkPoint', align: 'center', required: true },
{ text: '核查标准示值', value: 'standardIndication', align: 'center', required: true },
{ text: '最大允许误差绝对值', value: 'maximumErrorAbsolute', align: 'center', required: true },
{ text: '分辨力', value: 'resolution', align: 'center', required: true, reg: (resolution: string | number) => { return Number(resolution) < 1 } },
])
// 校验表格（点击保存的时候、增加行用）
const checkList = (list: any, title: string) => {
return useCheckList(list, columns.value, title)
}
/**
* 增加行公共方法
* @param list 要操作的数组
* @param title 操作的表格
*/
const addRow = (list: IList[], title: string) => {
if (checkList(list, `${title}表格`)) {
if (list.length) { // 增加行时默认上一行数据
list.push({
id: '',
checkItem: list[list.length - 1].checkItem, // 核查项目(直接存字典value)
checkPoint: list[list.length - 1].checkPoint, // 核查点(直接存字典value)
cycleNumber: list[list.length - 1].cycleNumber, // 循环次数（正行程和反行程） false
equipmentId: list[list.length - 1].equipmentId, // 配套设备id
itemCategoryId: list[list.length - 1].itemCategoryId, // 核查项分类id(能够确定是哪个标准装置)
maximumErrorAbsolute: list[list.length - 1].maximumErrorAbsolute, // 最大允许误差绝对值(直接存字典value)
remark: list[list.length - 1].remark, // 核查项备注(每个数据存储的核查项备注相同，前端取列表中一个即可)
resolution: list[list.length - 1].resolution, // 分辨力
standardIndication: list[list.length - 1].standardIndication, // 核查标准示值
unit: list[list.length - 1].unit, // 单位(直接存字典value)
})
}
else {
list.push({
checkItem: '2', // 核查项目(直接存字典value)
checkPoint: '', // 核查点(直接存字典value)
cycleNumber: form.value.itemCategoryName === '压力值' ? 3 : 0, // 循环次数（正行程和反行程）
equipmentId: infoId.value, // 配套设备id
id: '', // 更新/删除使用参数
itemCategoryId: form.value.itemCategoryId, // 核查项分类id(能够确定是哪个标准装置)
maximumErrorAbsolute: '', // 最大允许误差绝对值(直接存字典value)
remark: '', // 核查项备注(每个数据存储的核查项备注相同，前端取列表中一个即可)
resolution: 0.0001, // 分辨力
standardIndication: '', // 核查标准示值
unit: '', // 单位(直接存字典value)
})
}
}
}
/**
* 删除行公共方法
* @param checkoutList 选中的数组
* @param list 操作的数组
*/
const delRow = () => {
if (!checkoutList.value.length) {
ElMessage.warning('请选中要删除的行')
}
else {
list.value = list.value.filter((item: any) => {
return !checkoutList.value.includes(item)
})
}
}
// 多选
const handleSelectionChange = (e: any) => {
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 params = {
equipmentId: equipmentId.value, // 配套设备id
itemCategoryId: form.value.itemCategoryId, // 核查项分类id
checkItemDataPistonGaugeList: list.value.map((item) => {
return {
...item,
remark: form.value.remark,
}
}),
}
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.data && res.data.checkItemDataPistonGaugeList && res.data.checkItemDataPistonGaugeList.length) {
list.value = res.data.checkItemDataPistonGaugeList.map((item: any) => {
return {
...item,
resolution: Number(item.resolution),
}
})
// 核查项备注
form.value.remark = list.value.length ? list.value[0].remark! : ''
}
loading.close()
})
}
// -----------------------------------分辨力多0少0--------------------------------------------
// 点击减号
const clickSub = (row: IList) => {
row.resolution = Number(calc(row.resolution, 10, '*'))
}
// 点击加号
const clickAdd = (row: IList) => {
row.resolution = Number(calc(row.resolution, 10, '/'))
}
// 监听到电信号核查项目改变,改变分辨率
const checkItemChange = (row: any) => {
console.log(row, 'ppppp')
if (row.checkItem === '1') {
row.resolution = 0.00001
}
else {
row.resolution = 0.0001
}
}
// 监听到电信号核查点改变,改变核查标准示值
const checkPointChange = (row: any) => {
row.standardIndication = row.checkPoint
}
// ------------------------------------------钩子--------------------------------------------------
watch(() => form.value.itemCategoryName, (newValue) => {
if (newValue === '压力值') {
columns.value = columns_pressure.value
}
else { // 电信号
columns.value = columns_electrical_signal.value
}
})
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="核查项">
<template v-if="pageType !== 'detail'" #btns>
<el-button type="primary" @click="addRow(list, '核查项')">
增加行
</el-button>
<el-button type="info" @click="delRow">
删除行
</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-select
v-if="item.value === 'checkItem' && pageType !== 'detail' && form.itemCategoryName === '电信号'"
v-model="scope.row[item.value]"
filterable
:placeholder="pageType === 'detail' ? ' ' : `${item.text}`"
@change="checkItemChange(scope.row)"
>
<el-option v-for="i of checkItemElectricalSignalList" :key="i.id" :label="i.name" :value="i.value" />
</el-select>
<!-- 电信号电压单位 -->
<el-select
v-if="scope.row.checkItem === '1' && item.value === 'unit' && pageType !== 'detail' && form.itemCategoryName === '电信号'"
v-model="scope.row[item.value]"
filterable
:placeholder="pageType === 'detail' ? ' ' : `${item.text}`"
>
<el-option v-for="i of unitElectricalSignalVList" :key="i.id" :label="i.name" :value="i.value" />
</el-select>
<!-- 电信号电流单位 -->
<el-select
v-if="scope.row.checkItem === '2' && item.value === 'unit' && pageType !== 'detail' && form.itemCategoryName === '电信号'"
v-model="scope.row[item.value]"
filterable
:placeholder="pageType === 'detail' ? ' ' : `${item.text}`"
>
<el-option v-for="i of unitElectricalSignalAList" :key="i.id" :label="i.name" :value="i.value" />
</el-select>
<!-- 压力值单位 -->
<el-select
v-if="item.value === 'unit' && pageType !== 'detail' && form.itemCategoryName === '压力值'"
v-model="scope.row[item.value]"
filterable
:placeholder="pageType === 'detail' ? ' ' : `${item.text}`"
>
<el-option v-for="i of pressureUnitList" :key="i.id" :label="i.name" :value="i.value" />
</el-select>
<!-- 电信号核查点 -->
<el-select
v-if="item.value === 'checkPoint' && pageType !== 'detail' && form.itemCategoryName === '电信号'"
v-model="scope.row[item.value]"
filterable
:placeholder="pageType === 'detail' ? ' ' : `${item.text}`"
@change="checkPointChange(scope.row)"
>
<el-option v-for="i of checkPointElectricalSignalListList" :key="i.id" :label="i.name" :value="i.value" />
</el-select>
<!-- 压力值核查点 -->
<el-select
v-if="item.value === 'checkPoint' && pageType !== 'detail' && form.itemCategoryName === '压力值'"
v-model="scope.row[item.value]"
filterable
:placeholder="pageType === 'detail' ? ' ' : `${item.text}`"
>
<el-option v-for="i of checkPointPressureList" :key="i.id" :label="i.name" :value="i.value" />
</el-select>
<!-- 循环次数 -->
<el-input-number
v-if="item.value === 'cycleNumber' && pageType !== 'detail'"
v-model="scope.row[item.value]"
:placeholder="`${item.text}`"
class="input"
:step="1"
:precision="0"
/>
<!-- 核查标准值 -->
<el-input-number
v-if="item.value === 'standardIndication' && pageType !== 'detail'"
v-model="scope.row[item.value]"
:placeholder="`${item.text}`"
class="input"
/>
<!-- 电信号最大允许误差绝对值 -->
<el-select
v-if="item.value === 'maximumErrorAbsolute' && pageType !== 'detail' && form.itemCategoryName === '电信号'"
v-model="scope.row[item.value]"
filterable
:placeholder="pageType === 'detail' ? ' ' : `${item.text}`"
>
<el-option v-for="i of maximumErrorAbsoluteElectricalSignalList" :key="i.id" :label="i.name" :value="i.value" />
</el-select>
<!-- 压力值最大允许误差绝对值 -->
<el-select
v-if="item.value === 'maximumErrorAbsolute' && pageType !== 'detail' && form.itemCategoryName === '压力值'"
v-model="scope.row[item.value]"
filterable
:placeholder="pageType === 'detail' ? ' ' : `${item.text}`"
>
<el-option v-for="i of maximumErrorAbsolutePressureList" :key="i.id" :label="i.name" :value="i.value" />
</el-select>
<!-- 分辨力 -->
<div v-if="item.value === 'resolution' && pageType !== 'detail'" style="display: flex;">
<icon-button v-if="pageType !== 'detail'" style="margin-right: 10px;" size="20" icon="icon-reduce-circle" title="扩大10倍" type="primary" @click="clickSub(scope.row)" />
<el-input
v-if="pageType !== 'detail' " v-model="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input"
/>
<icon-button v-if="pageType !== 'detail'" style="margin-left: 10px;" size="20" icon="icon-add-circle" title="缩小10倍" type="primary" @click="clickAdd(scope.row)" />
</div>
</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>