<!-- 设备台账管理详情页 -->
<script name="EquipmentInfoBookDetail" setup lang="ts">
import type { Ref } from 'vue'
import dayjs from 'dayjs'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import type {
IAccessory,
ICertificate,
IEquipmentFlowLog,
IForm,
IInspect,
IMaintenanceRecord,
IStatusChangeRecord,
ITableMenu,
IUseRecords,
Itech,
} from './book-interface'
import templateTable from './components/templateTable.vue'
import selectUnpackRecordDialog from './components/selectUnpackRecordDialog.vue'
import { useCheckList } from '@/commonMethods/useCheckList'
import { useSetAllRowReadable } from '@/commonMethods/useSetAllRowReadable'
import { getDictByCode } from '@/api/system/dict'
import countries from '@/components/AddressSelect/country-code.json'
import type { deptType, dictType } from '@/global'
import { UploadFile } from '@/api/file'
import { getDeptTreeList } from '@/api/system/dept'
import { getUserList } from '@/api/system/user'
import showPhoto from '@/components/showPhoto/index.vue'
import { toTreeList } from '@/utils/structure'
import useUserStore from '@/store/modules/user'
const user = useUserStore() // 用户信息
const countryList = ref(countries) // 国家列表
const textMap: { [key: string]: string } = {
edit: '编辑',
add: '新建',
detail: '详情',
}// 页面类型字典
const $router = useRouter() // 路由实例
const ruleFormRef = ref() // 基本表单ref
const sourceFormRef = ref() // 溯源表单ref
const loading = ref(false) // 表单加载状态
const pageType = ref('add') // 页面类型: add, edit, detail
const infoId = ref('') // id
const form: Ref<IForm> = ref({ // 基本信息表单
approveType: '', // 审批类型
createUserId: '', // 创建人id
createUserName: '', // 创建人名称
createTime: '', // 创建时间
equipmentNo: '', // 统一编号
equipmentName: '', // 设备名称
unpackRecordId: 'dsgsgsfgfg', // 开箱记录
111: '', // 购进日期
productCountry: '', // 生产国家
manufacturer: '', // 生产厂家
manufactureNo: '', // 出厂编号
222: '', // 生产日期
unitPrice: 0, // 设备单价（万元）
333: '', // 使用年限
model: '', // 型号规格
444: '', // 质量状况
usageStatus: '', // 使用状态
level: '', // 重要等级
type: '', // 设备类型
555: '', // 标准类型
deptId: '', // 部门id
deptName: '', // 所属部门
directorId: '', // 负责人id
directorName: '', // 负责人
category: '', // 设备分类
777: 12, // 检定周期
location: '', // 位置
remark: '', // 备注
instructionsFile: '', // 说明书
fileList: [] as any, // 文件列表
traceCompany: '', // 溯源单位
traceDate: '', // 溯源日期
measureValidDate: '', // 检定有效期
meterIdentify: '', // 计量标识
meterStandardName: '11sdasdvsdvsvasvdsv', // 所属测量标准
technicalFile: 'advdvadvadv', // 所依据的技术文件
})
const rules = reactive<FormRules>({ // 表单验证规则
equipmentName: [{ required: true, message: '设备名称必填', trigger: ['blur', 'change'] }],
unpackRecordId: [{ required: true, message: '开箱记录必填', trigger: ['blur', 'change'] }],
111: [{ required: true, message: '购进日期必填', trigger: ['blur', 'change'] }],
productCountry: [{ required: true, message: '生产国家必填', trigger: ['blur', 'change'] }],
manufacturer: [{ required: true, message: '生产厂家必填', trigger: ['blur', 'change'] }],
manufactureNo: [{ required: true, message: '出厂编号必填', trigger: ['blur', 'change'] }],
222: [{ required: true, message: '生产日期必填', trigger: ['blur', 'change'] }],
unitPrice: [{ required: true, message: '设备单价必填', trigger: ['blur', 'change'] }],
model: [{ required: true, message: '型号规格必填', trigger: ['blur', 'change'] }],
444: [{ required: true, message: '质量状况必填', trigger: ['blur', 'change'] }],
usageStatus: [{ required: true, message: '使用状态必填', trigger: ['blur', 'change'] }],
level: [{ required: true, message: '重要等级必填', trigger: ['blur', 'change'] }],
type: [{ required: true, message: '设备类型必填', trigger: ['blur', 'change'] }],
555: [{ required: true, message: '标准类型必填', trigger: ['blur', 'change'] }],
deptId: [{ required: true, message: '所属部门必填', trigger: ['blur', 'change'] }],
directorId: [{ required: true, message: '负责人必填', trigger: ['blur', 'change'] }],
category: [{ required: true, message: '设备分类必填', trigger: ['blur', 'change'] }],
777: [{ required: true, message: '检定周期必填', trigger: ['blur', 'change'] }],
traceCompany: [{ required: true, message: '溯源单位必填', trigger: ['blur', 'change'] }],
traceDate: [{ required: true, message: '溯源日期必填', trigger: ['blur', 'change'] }],
measureValidDate: [{ required: true, message: '检定有效期必填', trigger: ['blur', 'change'] }],
meterIdentify: [{ required: true, message: '计量标识必填', trigger: ['blur', 'change'] }],
})
// -----------------------------------路由参数-------------------------------------------------
// 从路由中获取页面类型参数
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
}
}
// ---------------------------------右上角按钮(操作表单)------------------------------------------
// 点击关闭
const close = () => {
$router.back()
}
// 点击rfid标签绑定
const bind = () => {}
// 点击提交
const handleSubmit = () => {}
/**
* 点击保存
* @param ruleFormRef 基本信息表单ref
* @param sourceFormRef 溯源表单ref
*/
function saveForm(ruleFormRef: FormInstance | undefined, sourceFormRef: FormInstance | undefined) {
if (!ruleFormRef || !sourceFormRef) { return }
ruleFormRef.validate((valid, fields) => {
if (valid) { // 基本信息表单通过校验
sourceFormRef.validate((validIn, fields) => {
if (validIn) { // 溯源表单信息通过校验
ElMessageBox.confirm(
'确认保存吗？',
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
},
).then(() => {
// 调保存接口
})
}
})
}
})
}
// ----------------------------------------------6个不可编辑表格--------------------------------
// 其他关联数据列表
const dataList = ref({
useRecords: [] as IUseRecords[], // 使用记录
maintenanceRecord: [] as IMaintenanceRecord[], // 维护记录
certificate: [] as ICertificate[], // 证书报告
statusChangeRecord: [] as IStatusChangeRecord[], // 状态变更记录
equipmentHistory: [] as IMaintenanceRecord[], // 设备履历
equipmentFlowLog: [] as IEquipmentFlowLog[], // 设备流转日志
})
// 获取使用记录
const fetchUseRecords = (query = null) => {
if (pageType.value === 'detail') {
//
}
}
// 获取维护记录
const fetchMaintenanceRecord = (query = null) => {
if (pageType.value === 'detail') {
//
}
}
// 获取证书报告
const fetchCertificate = (query = null) => {
if (pageType.value === 'detail') {
//
}
}
// 获取状态变更记录
const fetchStatusChangeRecord = (query = null) => {
if (pageType.value === 'detail') {
//
}
}
// 获取设备履历
const fetchEquipmentHistory = (query = null) => {
if (pageType.value === 'detail') {
//
}
}
// 设备流转日志
const fetchEquipmentFlowLog = (query = null) => {
if (pageType.value === 'detail') {
//
}
}
// 菜单
const menu: ITableMenu[] = [
{
name: '使用记录',
columns: [
{ text: '编号', value: 'code', align: 'center', width: '160' },
{ text: '名称', value: 'name', align: 'center', isFilters: true, filters: [{ text: '证书名称', value: '证书名称value' }, { text: '核查记录', value: '核查记录value' }] },
{ text: '检定员', value: 'jdy', align: 'center' },
{ text: '创建时间', value: 'createTime', align: 'center', width: '180' },
],
list: 'useRecords',
pagination: true,
searchFunc: fetchUseRecords,
},
{
name: '维护记录',
columns: [
{ text: '记录编号', value: 'recordNo', align: 'center', width: '160' },
{ text: '记录名称', value: 'recordName', align: 'center', isFilters: true, filters: [{ text: '周维护', value: '周维护value' }, { text: '月保养', value: '月保养value' }] },
{ text: '记录部门', value: 'recordDept', align: 'center' },
{ text: '记录人', value: 'recordPerson', align: 'center' },
{ text: '记录时间', value: 'recordTime', align: 'center', width: '180' },
],
list: 'maintenanceRecord',
pagination: true,
searchFunc: fetchMaintenanceRecord,
},
{
name: '证书报告',
columns: [
{ text: '证书编号', value: 'certificateNo', align: 'center', width: '160' },
{ text: '证书名称', value: 'certificateName', align: 'center' },
{ text: '溯源单位', value: 'source', align: 'center' },
{ text: '检定日期', value: 'measureDate', align: 'center', width: '120' },
{ text: '检定有效期', value: 'validDate', align: 'center', width: '120' },
],
list: 'certificate',
pagination: true,
searchFunc: fetchCertificate,
},
{
name: '状态变更记录',
columns: [
{ text: '状态变更类型', value: 'type', align: 'center' },
{ text: '开始日期', value: 'startDate', align: 'center', width: '120' },
{ text: '结束日期', value: 'endDate', align: 'center', width: '120' },
{ text: '申请人', value: 'applyPerson', align: 'center' },
{ text: '原因', value: 'reason', align: 'center' },
],
list: 'statusChangeRecord',
pagination: true,
searchFunc: fetchStatusChangeRecord,
},
{
name: '设备履历',
columns: [
{ text: '记录编号', value: 'recordNo', align: 'center', width: '160' },
{ text: '记录名称', value: 'recordName', align: 'center' },
{ text: '记录部门', value: 'recordDept', align: 'center' },
{ text: '记录人', value: 'recordPerson', align: 'center' },
{ text: '记录时间', value: 'recordTime', align: 'center', width: '180' },
],
list: 'equipmentHistory',
pagination: true,
searchFunc: fetchEquipmentHistory,
},
{
name: '设备流转日志',
columns: [
{ text: '使用部门', value: 'useDept', align: 'center' },
{ text: '负责人', value: 'director', align: 'center' },
{ text: '记录日期', value: 'recordDate', align: 'center', width: '120' },
],
list: 'equipmentFlowLog',
pagination: true,
searchFunc: fetchEquipmentFlowLog,
},
]
const currentMenu = ref('使用记录')
const currentMenuObj = computed(() => {
return menu.find(item => item.name === currentMenu.value)
})
watch(currentMenuObj, () => {
// listQuery.value.offset = 1
currentMenuObj.value?.searchFunc()
},
{
deep: true,
immediate: true,
})
// 监听表格页数变化
const changePage = (val: any) => {
if (val.value && currentMenuObj) {
// listQuery.value.offset = val.value.offset
// listQuery.value.limit = val.value.limit
currentMenuObj.value?.searchFunc()
}
}
// 监听筛选变化
const filterChange = (val: { [key: string]: string }) => {
console.log('---++---', val)
}
// ------------------------------------------字典----------------------------------------------
const meterIdentifyDict = ref<dictType[]>([]) // 计量标识
const usageStatusList = ref<dictType[]>([]) // 使用状态
const levelList = ref<dictType[]>([]) // 重要等级
const typeList = ref<dictType[]>([]) // 设备类型
const standardTypeList = ref<dictType[]>([]) // 标准类型
const useDeptList = ref<deptType[]>([]) // 所属部门列表
const userList = ref<{ [key: string]: string }[]>([]) // 用户列表
const categoryList = ref<dictType[]>([]) // 设备分类
/**
* 获取字典
*/
function getDict() {
// 计量标识
getDictByCode('bizMeterIdentify').then((response) => {
meterIdentifyDict.value = response.data
})
// 使用状态
getDictByCode('bizUsageStatus').then((response) => {
usageStatusList.value = response.data
})
// 重要等级
getDictByCode('bizEquipmentLevel').then((response) => {
levelList.value = response.data
})
// 设备类型
getDictByCode('bizEquipmentType').then((response) => {
typeList.value = response.data
})
// 标准类型
getDictByCode('bizStandardType').then((response) => {
standardTypeList.value = response.data
})
// 获取部门列表
getDeptTreeList().then((res) => {
// 转成树结构
useDeptList.value = toTreeList(res.data, '0', true)
})
// 获取用户列表
getUserList({ offset: 1, limit: 999999 }).then((res: any) => {
userList.value = res.data.rows
})
// 设备分类
getDictByCode('bizEquipmentCategory').then((response) => {
categoryList.value = response.data
})
}
// -------------------------------------------------------------------------------------------
// 监听购进日期计算设备使用年限
watch(() => form.value[111], (newValue) => {
form.value[333] = dayjs().diff(newValue, 'year')
})
onMounted(async () => {
await getDict() // 获取字典
form.value.createUserId = user.id// 创建人id
form.value.createUserName = user.name // 创建人
form.value.createTime = dayjs().format('YYYY-MM-DD HH-mm:ss')// 申请时间
})
</script>
<template>
<app-container>
<detail-page v-loading="loading" :title="`设备台账管理-${textMap[pageType]}`">
<template #btns>
<el-button v-if="pageType === 'add'" type="primary" @click="handleSubmit">
提交
</el-button>
<el-button v-if="pageType !== 'detail'" type="primary" @click="saveForm(ruleFormRef, sourceFormRef)">
保存
</el-button>
<el-button type="primary" @click="bind">
rfid标签绑定
</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" class="marg">
<el-col :span="6">
<el-form-item label="审批类型:">
<el-input v-model="form.approveType" disabled />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="创建人:">
<el-input v-model="form.createUserName" disabled />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="创建时间:">
<el-date-picker
v-model="form.createTime"
type="datetime"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
disabled
class="full-width-input"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="6">
<el-form-item label="统一编号:" prop="equipmentNo">
<el-input v-model="form.equipmentNo" disabled placeholder="系统自动生成" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="设备名称:" prop="equipmentName">
<el-input
v-model.trim="form.equipmentName"
:placeholder="pageType === 'detail' ? '' : '请输入设备名称'"
:disabled="pageType === 'detail'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="对应开箱记录:" prop="unpackRecordId">
<span v-if="pageType === 'detail'" class="link" @click="handleClickUnpackRecordLink">{{ form.unpackRecordId }}</span>
<el-input
v-else
v-model.trim="form.unpackRecordId"
:placeholder="pageType === 'detail' ? ' ' : '请选择开箱记录'"
disabled
class="full-width-input"
clearable
>
<template v-if="pageType !== 'detail'" #append>
<el-button
size="small"
@click="selectUnpackRecordList"
>
选择
</el-button>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="购进日期:" prop="111">
<el-date-picker
v-model="form[111]"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:placeholder="pageType === 'detail' ? ' ' : '请选择购进日期'"
:disabled="pageType === 'detail'"
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="生产国家:" prop="productCountry">
<el-select
v-model="form.productCountry"
filterable
:placeholder="pageType === 'detail' ? ' ' : '请选择生产国家'"
:disabled="pageType === 'detail'"
class="full-width-input"
>
<el-option v-for="country of countryList" :key="country.code" :label="country.CNName" :value="country.code" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="生产厂家:" prop="manufacturer">
<el-input
v-model.trim="form.manufacturer"
:placeholder="pageType === 'detail' ? '' : '请输入生产厂家'"
:class="{ 'detail-input': pageType === 'detail' }"
:disabled="pageType === 'detail'"
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="出厂编号:" prop="manufactureNo">
<el-input
v-model.trim="form.manufactureNo"
:placeholder="pageType === 'detail' ? '' : '请输入出厂编号'"
:class="{ 'detail-input': pageType === 'detail' }"
:disabled="pageType === 'detail'"
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="生产日期:" prop="222">
<el-date-picker
v-model="form[222]"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:placeholder="pageType === 'detail' ? ' ' : '请选择生产日期'"
:disabled="pageType === 'detail'"
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="设备单价(万元)" prop="singlePrice">
<el-input-number
v-model="form.unitPrice"
:placeholder="pageType === 'detail' ? '' : '请输入设备单价'"
:disabled="pageType === 'detail'"
:precision="4"
:step="0.1"
:min="0"
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="使用年限:" prop="333">
<el-input
v-model="form[333]"
:placeholder="pageType === 'detail' ? '' : ''"
:class="{ 'detail-input': pageType === 'detail' }"
disabled
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="型号规格" prop="model">
<el-input
v-model.trim="form.model"
:placeholder="pageType === 'detail' ? '' : '请输入型号规格'"
:disabled="pageType === 'detail'"
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="质量状况" prop="444">
<el-input
v-model.trim="form[444]"
:placeholder="pageType === 'detail' ? '' : '请输入质量状况'"
:disabled="pageType === 'detail'"
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="使用状态:" prop="usageStatus">
<el-select
v-model.trim="form.usageStatus"
clearable
:placeholder="pageType === 'detail' ? '' : '请选择使用状态'"
size="default"
:disabled="pageType === 'detail'"
class="full-width-input"
>
<el-option
v-for="item in usageStatusList"
: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="level">
<el-select
v-model.trim="form.level"
clearable
:placeholder="pageType === 'detail' ? '' : '请选择重要等级'"
size="default"
:disabled="pageType === 'detail'"
class="full-width-input"
>
<el-option
v-for="item in levelList"
: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="type">
<el-select
v-model.trim="form.type"
clearable
:placeholder="pageType === 'detail' ? '' : '请选择设备类型'"
size="default"
:disabled="pageType === 'detail'"
class="full-width-input"
>
<el-option
v-for="item in typeList"
: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="555">
<el-select
v-model.trim="form[555]"
clearable
:placeholder="pageType === 'detail' ? '' : '请选择标准类型'"
size="default"
:disabled="pageType === 'detail'"
class="full-width-input"
>
<el-option
v-for="item in standardTypeList"
: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="deptId">
<dept-select v-model="form.deptId" :data="useDeptList" :placeholder="pageType === 'detail' ? ' ' : '所属部门'" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="负责人" prop="directorId">
<el-select
v-model.trim="form.directorId"
placeholder="请选择负责人"
filterable
class="full-width-input"
>
<el-option v-for="item in userList" :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="category">
<el-select
v-model.trim="form.category"
clearable
:placeholder="pageType === 'detail' ? '' : '请选择设备分类'"
size="default"
:disabled="pageType === 'detail'"
class="full-width-input"
>
<el-option
v-for="item in categoryList"
: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="777">
<el-input-number
v-model="form[777]"
:placeholder="pageType === 'detail' ? '' : '请输入检定周期'"
:disabled="pageType === 'detail'"
class="full-width-input"
:min="0"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="12">
<el-form-item label="位置信息:">
<el-input
v-model="form.location"
type="textarea"
autosize
:placeholder="pageType === 'detail' ? '' : '请输入位置信息'"
:disabled="pageType === 'detail'"
:class="{ 'detail-input': pageType === 'detail' }"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="12">
<el-form-item label="备注:">
<el-input
v-model="form.remark"
type="textarea"
autosize
:placeholder="pageType === 'detail' ? '' : '请输入备注'"
:disabled="pageType === 'detail'"
:class="{ 'detail-input': pageType === 'detail' }"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="24">
<el-form-item label="文件:">
<el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-right': '20px' }" @click="upload">
{{ !form.instructionsFile.length ? '上传' : '上传' }}
</el-button>
<div v-for="(item, index) in form.instructionsFile" :key="index" style="display: flex;">
<show-photo :minio-file-name="item">
<span v-if="pageType !== 'detail'" class="photo-close" @click="delFile(index)">×</span>
</show-photo>
</div>
<span v-if="pageType === 'detail' && !form.instructionsFile.length">无</span>
<input v-show="pageType === ''" ref="fileRef" type="file" name="upload" multiple @change="onFileChange">
</el-form-item>
</el-col>
</el-row>
</el-form>
<div style="font-size: 13px;margin-left: 20px;color: #606266;">
说明：以上信息发生变动时，需要经过审批才可生效
</div>
</detail-page>
<!-- 溯源信息表单 -->
<detail-block title="">
<el-form
ref="sourceFormRef"
:model="form"
:label-width="120"
label-position="right"
:rules="rules"
style="display: flex;flex-wrap: nowrap;"
>
<el-form-item label="溯源单位:" prop="traceCompany" style="flex: 1;">
<el-input
v-model="form.traceCompany"
:disabled="pageType === 'detail'"
:placeholder="pageType === 'detail' ? ' ' : '请输入溯源单位'"
/>
</el-form-item>
<el-form-item label="溯源日期:" prop="traceDate" style="flex: 1;">
<el-date-picker
v-model="form.traceDate"
type="date"
:placeholder="pageType === 'detail' ? ' ' : '请选择日期'"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:disabled="pageType === 'detail'"
class="full-width-input"
/>
</el-form-item>
<el-form-item label="检定有效期:" prop="measureValidDate" style="flex: 1;">
<el-date-picker
v-model="form.measureValidDate"
type="date"
:placeholder="pageType === 'detail' ? ' ' : '请选择日期'"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:disabled="pageType === 'detail'"
class="full-width-input"
/>
</el-form-item>
<el-form-item label="计量标识:" prop="meterIdentify" style="flex: 1;">
<el-select
v-model="form.meterIdentify"
:placeholder="pageType === 'detail' ? ' ' : '请选择计量标识'"
:disabled="pageType === 'detail'"
class="full-width-input"
>
<el-option v-for="item of meterIdentifyDict" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
<el-button type="primary" style="margin-left: 10px;" @click="printMeterIdentify">
打印
</el-button>
</el-form>
</detail-block>
<!-- 技术指标 -->
<detail-block title="技术指标">
<div class="file-area">
<span v-if="form.meterStandardName">所属测量标准：<span class="link" @click="handleClickMeterStandardLink">{{ form.meterStandardName }}</span></span>
<div class="tech-file">
<span class="file-text">依据的技术文件: </span>
<el-input
v-if="!form.technicalFile"
v-model.trim="form.technicalFile"
:placeholder="pageType === 'detail' ? '' : '请选择技术文件'"
disabled
width="220"
>
<template v-if="pageType !== 'detail'" #append>
<el-button
size="small"
@click="selectTechFile"
>
选择
</el-button>
</template>
</el-input>
<span v-if="form.technicalFile" class="link" @click="handleClickTechFileLink">{{ form.technicalFile }}</span>
</div>
</div>
<template v-if="pageType !== 'detail'" #btns>
<el-button type="primary" @click="addRow('tech')">
增加行
</el-button>
<el-button type="info" @click="deleteRow('tech')">
删除行
</el-button>
</template>
<el-table
ref="techRef"
:data="technicalIndexList"
border
style="width: 100%;"
@selection-change="handleTechSelectionChange"
>
<el-table-column type="selection" width="38" />
<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"
>
<template #header>
<span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
</template>
<template #default="scope">
<span v-if="!scope.row.editable">{{ scope.row[item.value] }}</span>
<el-input v-else v-model="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input" />
</template>
</el-table-column>
</el-table>
</detail-block>
<!-- 主附件信息 -->
<detail-block title="主附件信息">
<template v-if="pageType !== 'detail'" #btns>
<el-button type="primary" @click="addRow('accessory')">
增加行
</el-button>
<el-button type="info" @click="deleteRow('accessory')">
删除行
</el-button>
</template>
<el-table
ref="accessoryRef"
:data="accessoryList"
border
style="width: 100%;"
@selection-change="handleAccessorySelectionChange"
>
<el-table-column type="selection" width="38" />
<el-table-column align="center" label="序号" width="80" type="index" />
<el-table-column
v-for="item in accessoryColumns"
:key="item.value"
:prop="item.value"
:label="item.text"
align="center"
>
<template #header>
<span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
</template>
<template #default="scope">
<span v-if="!scope.row.editable">{{ scope.row[item.value] }}</span>
<el-input v-else v-model="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input" />
</template>
</el-table-column>
</el-table>
</detail-block>
<!-- 核查点（设备类型为标准设备下才显示） -->
<detail-block title="核查点">
<!-- <detail-block v-if="form.type === '标准设备'" title="核查点"> -->
<template v-if="pageType !== 'detail'" #btns>
<el-button type="primary" @click="addRow('inspect')">
增加行
</el-button>
<el-button type="info" @click="deleteRow('inspect')">
删除行
</el-button>
</template>
<el-table
ref="inspectRef"
:data="inspectList"
border
style="width: 100%;"
@selection-change="handleInspectSelectionChange"
>
<el-table-column type="selection" width="38" />
<el-table-column align="center" label="序号" width="80" type="index" />
<el-table-column
v-for="item in inspectColumns"
:key="item.value"
:prop="item.value"
:label="item.text"
align="center"
>
<template #header>
<span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
</template>
<template #default="scope">
<span v-if="!scope.row.editable">
<!-- 是否例行不可编辑状态 -->
<span v-if="item.value === 'isRoutine'">
{{ scope.row[item.value] === '1' ? '是' : '否' }}
</span>
<!-- 其他列不可编辑状态 -->
<span v-else>{{ scope.row[item.value] }}</span>
</span>
<!-- 是否例行可编辑状态 -->
<el-select
v-if="item.value === 'isRoutine' && scope.row.editable"
v-model="scope.row[item.value]"
filterable
:placeholder="pageType === 'detail' ? ' ' : `${item.text}`"
>
<el-option v-for="i of isRoutineMap" :key="i.id" :label="i.label" :value="i.id" />
</el-select>
<!-- 其他列可编辑状态 -->
<el-input v-if="item.value !== 'isRoutine' && scope.row.editable" v-model="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input" />
</template>
</el-table-column>
</el-table>
</detail-block>
<!-- 使用记录、维护记录、证书报告、状态变更记录、设备履历、设备流转日志 -->
<detail-block-switch v-if="pageType === 'detail'" :title="currentMenu">
<template #menu>
<el-radio-group v-model="currentMenu">
<el-radio-button v-for="item in menu" :key="item.name" :label="item.name">
{{ item.name }}
</el-radio-button>
</el-radio-group>
</template>
<!-- <template-table v-if="currentMenuObj" :columns="currentMenuObj.columns" :list="dataList[currentMenuObj.list]" :loading="false" :pagination="currentMenuObj.pagination" @change-page="currentMenuObj?.searchFunc" /> -->
<!-- <template-table v-if="currentMenuObj" :columns="currentMenuObj.columns" :total="currentMenu === '检定记录' ? totalRecords : totalCertifications" :list="dataList[currentMenuObj.list]" :loading="false" :pagination="currentMenuObj.pagination" @change-page="changePage" /> -->
<template-table v-if="currentMenuObj" :columns="currentMenuObj.columns" :total="0" :list="dataList[currentMenuObj.list]" :loading="false" :pagination="currentMenuObj.pagination" @change-page="changePage" @filter-change="filterChange" />
</detail-block-switch>
<!-- 选择开箱记录 -->
<!-- <select-unpack-record-dialog ref="selectUnpackRecordDialogRef" @confirm="confirmSelectUnpackRecord" /> -->
</app-container>
</template>
<style lang="scss" scoped>
.link {
text-decoration: underline;
color: #3d7eff;
cursor: pointer;
}
.file-area {
display: flex;
align-items: center;
font-size: 16px;
color: #60627f;
margin-bottom: 10px;
white-space: nowrap;
.tech-file {
display: flex;
align-items: center;
margin-left: 20px;
.file-text {
margin-right: 10px;
}
}
}
</style>
