<!-- 检定项分类管理详情 -->
<script lang="ts" setup name="BusinessMeasureClassificationDetail">
import { ref } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
import type { IForm } from './classification-interface'
import useUserStore from '@/store/modules/user'
import { getDictByCode } from '@/api/system/dict'
import type { dictType } from '@/global'
import { UploadFile } from '@/api/file'
import showPhoto from '@/components/showPhoto/index.vue'
import { getLocationList } from '@/api/business/taskMeasure/measureData'
import { addClassification, updateClassification } from '@/api/business/measure/classification'
import selectTechFiles from '@/views/equipement/standard/book/dialog/selectTechFiles.vue'
const user = useUserStore() // 用户信息
const textMap: { [key: string]: string } = {
edit: '编辑',
add: '新建',
detail: '详情',
}// 字典
const $router = useRouter() // 关闭页面使用
const $route = useRoute() // 路由参数
const pageType = ref('add') // 页面类型: add, edit, detail
const infoId = ref('') // 列表id
const ruleFormRef = ref() // 表单ref
const form = ref<IForm>({
categoryNo: '', // 检定项分类编号
categoryName: '', // 检定项分类名称
deviceType: '', // 设备分类（检校分类）
deviceTypeName: '', // 设备分类（检校分类）名称
belongStandardEquipment: '', // 检校标准装置
belongStandardEquipmentName: '', // 检校标准装置名称
measureCategory: '', // 检校类别
measureCategoryName: '', // 检校类别名称
technologyFile: '', // 依据技术文件
technologyFileArr: [], // 依据技术文件
labLocation: [], // 地点
labH: '', // 选择海口实验室时海口实验室名字
labX: '', // 选择西昌实验室时西昌实验室名字
wiringDiagram: '', // 接线图上传
wiringIllustrate: '', // 接线说明
})
// 校验规则
const formRules = ref({
measureCategory: [{ required: true, message: '检校类别不能为空', trigger: ['blur', 'change'] }],
technologyFile: [{ required: true, message: '依据技术文件不能为空', trigger: ['blur', 'change'] }],
labLocation: [{ required: true, message: '地点不能为空', trigger: ['blur', 'change'] }],
labX: [{ required: true, message: '西昌实验室名字不能为空', trigger: ['blur', 'change'] }],
labH: [{ required: true, message: '海口实验室名字不能为空', trigger: ['blur', 'change'] }],
technologyFileArr: [{ required: true, message: '依据的技术文件不能为空', trigger: ['blur', 'change'] }],
})
// -------------------------------------------字典------------------------------------------
const deviceTypeList = ref<dictType[]>([])// 设备分类
const standardList = ref<dictType[]>([])// 检校标准装置
const measureCategoryList = ref<dictType[]>([])// 检校类别
const labXList = ref([]) as any// 西昌实验室
const labHList = ref([]) as any// 海口实验室
function getDict() {
// 检校类别
getDictByCode('measureCategory').then((response) => {
measureCategoryList.value = response.data
})
// 设备分类
getDictByCode('eqptDeviceType').then((response) => {
deviceTypeList.value = response.data
})
// 检校标准装置
getDictByCode('bizStandardEquipmentType').then((response) => {
standardList.value = response.data
})
// 测试、校准或检定地点
getLocationList({
locationName: '', // 地点名称
locationNo: '', // 地点编号
limit: 999999,
offset: 1,
}).then((res) => {
labXList.value = res.data.rows.filter((item: { locationLab: string }) => item.locationLab === '西昌实验室')
labHList.value = res.data.rows.filter((item: { locationLab: string }) => item.locationLab === '海口实验室')
})
}
// ----------------------------------路由参数------------------------------------------------
if ($route.params && $route.params.type) {
pageType.value = $route.params.type as string
console.log(pageType.value)
if ($route.params.id) {
infoId.value = $route.params.id as string
}
}
// -------------------------------------------选择依据的技术文件--------------------------------------
const delFile = (index: number) => {
form.value.technologyFileArr.splice(index, 1)
form.value.technologyFileArr = form.value.technologyFileArr.map((item: any) => {
return item
})
}
const selectTechFilesRef = ref() // 选择依据的技术文件组件ref
// 点击选择
const handleSelectTechFiles = () => {
selectTechFilesRef.value.initDialog(true)
}
// 选好技术文件
const confirmSelect = (value: any) => {
console.log(value)
form.value.technologyFileArr = value.map((item: { file: string }) => item.file)
}
// --------------------------------------------接线图上传-------------------------------------
// -------------------------------------------文件上传--------------------------------------
const fileRef = ref() // 文件上传input
const onFileChange = (event: any) => {
if (event.target.files?.length !== 0) {
// 创建formdata对象
const fd = new FormData()
fd.append('multipartFile', event.target.files[0])
const loading = ElLoading.service({
lock: true,
background: 'rgba(255, 255, 255, 0.8)',
})
UploadFile(fd).then((res) => {
if (res.code === 200) {
form.value.wiringDiagram = res.data[0]
// 重置当前验证
ElMessage.success('文件上传成功')
loading.close()
}
else {
ElMessage.error(res.message)
loading.close()
}
})
}
}
const upload = () => {
fileRef.value.click()
}
// ------------------------------------------------------------------------------------------
// 关闭新增页面的回调
const close = () => {
$router.back()
}
// 保存
const save = () => {
ruleFormRef.value!.validate((valid: boolean) => {
if (valid) {
const loading = ElLoading.service({
lock: true,
background: 'rgba(255, 255, 255, 0.8)',
})
const labLocation = form.value.labX + form.value.labH
// =======依据的技术文件用分号隔开================
let tempFile = ''
form.value.technologyFileArr.forEach((item: any, index: number) => {
if (index === form.value.technologyFileArr.length - 1) { // 最后一个
tempFile += `${item}`
}
else {
tempFile += `${item};`
}
})
console.log(tempFile)
form.value.technologyFile = tempFile
// ==============================================
if (pageType.value === 'add') { // 新建
addClassification({ ...form.value, labLocation }).then((res) => {
ElMessage.success('保存成功')
form.value.categoryNo = res.data.categoryNo // 检定项分类编号
pageType.value = 'detail'
loading.close()
}).catch(() => {
loading.close()
})
}
// 保存
else if (pageType.value === 'edit') { // 编辑
updateClassification({ ...form.value, id: infoId.value, labLocation }).then((res) => {
ElMessage.success('保存成功')
pageType.value = 'detail'
loading.close()
}).catch(() => {
loading.close()
})
}
}
else {
console.log('表单校验不通过')
}
})
}
// 点击编辑
const edit = () => {
pageType.value = 'edit'
}
// -------------------------------------钩子-----------------------------------------------------
onMounted(async () => {
getDict()
if (pageType.value !== 'add') {
form.value = { ...$route.query as any }
form.value.labLocation = []
if ($route.query.labX) {
form.value.labLocation.push('西昌')
}
if ($route.query.labH) {
form.value.labLocation.push('海口')
}
form.value.technologyFileArr = form.value.technologyFile.split(';')
}
})
</script>
<template>
<app-container>
<detail-page :title="`检定项分类管理-${textMap[pageType]}`">
<template #btns>
<el-button v-if="pageType === 'detail'" type="primary" @click="edit">
编辑
</el-button>
<el-button v-if="pageType !== 'detail'" 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"
:rules="formRules"
>
<el-row :gutter="24">
<el-col :span="6">
<el-form-item label="检定项分类编号:" prop="categoryNo">
<el-input v-model="form.categoryNo" class="full-width-input" disabled placeholder="系统自动生成" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="设备分类:" prop="deviceType">
<el-select
v-model="form.deviceType"
placeholder="设备分类"
class="short-input"
filterable
:disabled="pageType !== 'add'"
>
<el-option v-for="item in deviceTypeList" :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="categoryName">
<el-input v-model="form.categoryName" class="full-width-input" :disabled="pageType !== 'add'" placeholder="请输入检定项分类名称" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="归属标准装置:" prop="belongStandardEquipment">
<el-select
v-model="form.belongStandardEquipment"
placeholder="归属标准装置"
class="short-input"
filterable
:disabled="pageType !== 'add'"
>
<el-option v-for="item in standardList" :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="measureCategory">
<el-select
v-model="form.measureCategory"
placeholder="检校类别"
filterable
:disabled="pageType === 'detail'"
>
<el-option v-for="item in measureCategoryList" :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="labLocation">
<!-- <el-radio-group v-model="form.labLocation" :disabled="pageType === 'detail'">
<el-radio label="西昌">
西昌
</el-radio>
<el-radio label="海口">
海口
</el-radio>
</el-radio-group> -->
<el-checkbox-group v-model="form.labLocation" :disabled="pageType === 'detail'">
<el-checkbox label="西昌" name="labLocation" />
<el-checkbox label="海口" name="labLocation" />
</el-checkbox-group>
</el-form-item>
</el-col>
<el-col v-if="form.labLocation.length > 1 || (form.labLocation[0] === '西昌' && form.labLocation.length === 1)" :span="6">
<el-form-item label="西昌实验室:" prop="labX">
<el-select
v-model="form.labX"
placeholder="请选择西昌实验室"
filterable
:disabled="pageType === 'detail'"
>
<el-option v-for="item in labXList" :key="item.id" :label="item.locationName" :value="item.locationName" />
</el-select>
</el-form-item>
</el-col>
<el-col v-if="form.labLocation.length > 1 || (form.labLocation[0] === '海口' && form.labLocation.length === 1)" :span="6">
<el-form-item label="海口实验室:" prop="labH">
<el-select
v-model="form.labH"
placeholder="请选择海口实验室"
filterable
:disabled="pageType === 'detail'"
>
<el-option v-for="item in labHList" :key="item.id" :label="item.locationName" :value="item.locationName" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="24">
<el-form-item label="依据的技术文件:" prop="technologyFileArr">
<el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-right': '20px' }" @click="handleSelectTechFiles">
{{ !form.technologyFileArr.length ? '选择' : '选择' }}
</el-button>
<div v-for="(item, index) in form.technologyFileArr" :key="index" style="display: flex;">
<show-photo :minio-file-name="item" style="margin-right: 10px;">
<span v-if="pageType !== 'detail'" class="photo-close" @click="delFile(index)">×</span>
</show-photo>
</div>
<span v-if="pageType === 'detail' && !form.technologyFileArr.length">无</span>
<!-- <input v-show="pageType === ''" ref="fileRef" type="file" name="upload" multiple @change="onFileChange"> -->
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="24">
<el-form-item label="接线图上传:">
<show-photo v-if="form.wiringDiagram" :minio-file-name="form.wiringDiagram" />
<span v-else-if="pageType === 'detail'">无</span>
<input
v-show="pageType === ''"
ref="fileRef"
type="file"
@change="onFileChange"
>
<el-button
v-if="pageType !== 'detail'"
id="file"
type="primary"
:disabled="pageType === 'detail'"
:style="{ 'margin-left': form.wiringDiagram === '' ? '0px' : '20px' }"
@click="upload"
>
{{ form.wiringDiagram === '' ? '选择' : '更换附件' }}
</el-button>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="接线说明:" prop="wiringIllustrate">
<el-input
v-model="form.wiringIllustrate"
class="full-width-input"
autosize
type="textarea"
:disabled="pageType === 'detail'"
:placeholder="pageType === 'detail' ? ' ' : '请填写接线说明'"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</detail-page>
</app-container>
<!-- 选择依据的技术文件--选择所依据的技术文件（/资源管理/技术文件/现行测试校准检定方法） -->
<select-tech-files ref="selectTechFilesRef" @confirm="confirmSelect" />
</template>
<style lang="scss" scoped>
.link {
text-decoration: underline;
color: #3d7eff;
cursor: pointer;
}
.file-area {
display: flex;
align-items: center;
font-size: 14px;
color: #60627f;
margin-bottom: 10px;
margin-left: 40px;
white-space: nowrap;
.tech-file {
display: flex;
align-items: center;
margin-left: 20px;
.file-text {
margin-right: 10px;
}
}
}
</style>
