GitBucket
Newer
<!-- 量值溯源与传递等级 -->
<script name="OrderList" lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { FormRules } from 'element-plus'
import VuePdfEmbed from 'vue-pdf-embed'
import dayjs from 'dayjs'
import { UploadFile } from '@/api/file'
import { getPdfStream } from '@/api/system/tool'
import { getBase64, getObjectURL } from '@/utils/download'
import { addHistory, getGradeForm, getHistoryList, updateHistory } from '@/api/equipment/standard/book'
const props = defineProps({
pageType: { // 页面类型 add新建 edit编辑 detail详情
type: String,
default: 'detail',
},
standardId: { // id
type: String,
},
approvalStatusName: {
type: String,
},
approvalType: { // 审批类型
type: String,
},
fromPage: {
type: String,
},
})
const form = ref({
quantityPdfFile: '', // 量值溯源与传递等级pdf(minio文件名) false
quantityWordFile: '', // 量值溯源与传递等级word(minio文件名) false
standardId: '', // 标准装置id false
updateStatus: '', // 是否修改文件(0:未修改 1:已修改)
id: '',
}) as any
const route = useRoute()
const rules = reactive<FormRules>({ // 表单验证规则
quantityPdfFile: [{ required: true, message: '量值溯源与传递等级关系图（pdf版本）不能为空', trigger: ['blur', 'change'] }],
})
const radioMenus = ref([ // 标签内容
{ name: '当前量值溯源与传递等级', value: 'current', disabled: false },
{ name: '历史量值溯源与传递等级', value: 'history', disabled: false },
])
const current = ref('current') // 选择的tab 默认基本信息
const ruleFormRef = ref()
const formLoading = ref(false) // 表单Loading
// -------------------------------------------文件上传--------------------------------------
// 文件上传
const fileRefWord = ref() // 建标报告ref-word
const fileRefPdf = ref() // 建标报告ref-pdf
// word上传文件，在 Input 值改变时触发
const onQuantityWordFileChange = (event: any) => {
if (event.target.files[0].type !== 'application/msword' && event.target.files[0].type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
ElMessage.warning('请上传doc、docx文件格式')
return
}
UploadFileFn(event, 'quantityWordFile', '文件上传成功')
}
// pdf上传文件，在 Input 值改变时触发
const onQuantityPdfFileChange = (event: any) => {
if (event.target.files[0].type !== 'application/pdf') {
ElMessage.warning('请上传pdf格式')
return
}
UploadFileFn(event, 'quantityPdfFile', '文件上传成功')
}
// 上传文件操作
function UploadFileFn(event: any, prop: string, message: string) {
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[prop] = res.data[0]
// 重置当前验证
ElMessage.success(message)
loading.close()
}
else {
ElMessage.error(res.message)
loading.close()
}
})
}
}
const upload = (fileRef: any) => {
fileRef.click()
}
// 保存
const saveGrade = () => {
ruleFormRef.value.validate((valid: boolean) => {
if (valid) { // 基本信息表单通过校验
// ElMessageBox.confirm(
// '确认保存吗？',
// '提示',
// {
// confirmButtonText: '确认',
// cancelButtonText: '取消',
// type: 'warning',
// },
// ).then(() => {
// 从建标管理的详情页跳转过来
if (route.query.fromPage === 'standardBuildDetail' && form.value.id) {
const params = { // 请求参数
quantityPdfFile: form.value.quantityPdfFile, // 量值溯源与传递等级pdf(minio文件名)
quantityWordFile: form.value.quantityWordFile, // 量值溯源与传递等级word(minio文件名)
standardId: props.standardId, // 标准装置id
id: form.value.id,
}
const loading = ElLoading.service({
lock: true,
text: '加载中...',
background: 'rgba(255, 255, 255, 0.6)',
})
updateHistory(params).then((res) => {
loading.close()
if (route.query.fromPage === 'standardBuildDetail') { // 从建标管理跳过来保存
sessionStorage.setItem('updatedGradeFromBuild', '1')
}
ElMessage.success('已保存')
}).catch(() => {
loading.close()
})
}
if (!form.value.id) {
const params = { // 请求参数
quantityPdfFile: form.value.quantityPdfFile, // 量值溯源与传递等级pdf(minio文件名)
quantityWordFile: form.value.quantityWordFile, // 量值溯源与传递等级word(minio文件名)
standardId: props.standardId, // 标准装置id
// 暂时先传0, 不考虑建标管理的问题
updateStatus: '0', // 是否修改文件(0:未修改 1:已修改)
}
const loading = ElLoading.service({
lock: true,
text: '加载中...',
background: 'rgba(255, 255, 255, 0.6)',
})
addHistory(params).then((res) => {
loading.close()
form.value.id = res.data
if (route.query.fromPage === 'standardBuildDetail') { // 从建标管理跳过来保存
sessionStorage.setItem('updatedGradeFromBuild', '1')
}
ElMessage.success('已保存')
}).catch(() => {
loading.close()
})
}
// })
}
})
}
const pdfUrl = ref() as any
// 获取表单详情
const fetchGradeForm = () => {
formLoading.value = true
if (props.standardId) {
// 后台将详情按钮放弃，要求使用历史列表去查
getHistoryList({ id: props.standardId, limit: 999999, offset: 1 }).then((res) => {
// getGradeForm({ id: props.standardId }).then((res) => {
if (res.data && res.data.rows && res.data.rows.length) {
// form.value.quantityPdfFile = res.data.quantityPdfFile
// form.value.quantityWordFile = res.data.quantityWordFile
form.value.quantityPdfFile = res.data.rows[res.data.rows.length - 1].relationPdfFile
form.value.quantityWordFile = res.data.rows[res.data.rows.length - 1].relationWordFile
// 从建标管理的详情页跳转过来
if (route.query.fromPage === 'standardBuildDetail' && sessionStorage.getItem('updatedGradeFromBuild') === '0') {
form.value.quantityPdfFile = route.query.quantityPdfFile ? route.query.quantityPdfFile as string : form.value.quantityPdfFile
form.value.quantityWordFile = route.query.quantityWordFile ? route.query.quantityWordFile as string : form.value.quantityWordFile
}
if (form.value.quantityPdfFile) {
getPdfStream(form.value.quantityPdfFile).then((res) => {
getBase64(res.data).then((res) => {
pdfUrl.value = res as string
})
})
}
}
else {
// 从建标管理的详情页跳转过来
if (route.query.fromPage === 'standardBuildDetail' && sessionStorage.getItem('updatedGradeFromBuild') === '0') {
form.value.quantityPdfFile = route.query.quantityPdfFile ? route.query.quantityPdfFile as string : form.value.quantityPdfFile
form.value.quantityWordFile = route.query.quantityWordFile ? route.query.quantityWordFile as string : form.value.quantityWordFile
}
}
formLoading.value = false
}).catch(() => {
formLoading.value = false
})
}
}
// ----------------------------------------------表格--------------------------------------
// 查询条件
const listQuery = ref({
id: props.standardId!,
offset: 1,
limit: 20,
})
const loadingTable = ref(false) // 表格loading
const list = ref([]) as any // 表格数据
const total = ref(0) // 数据总条数
const columns = [ // 表头
{ text: '文件编号', value: 'applyNo', align: 'center' },
{ text: '变更原因', value: 'changeReason', align: 'center' },
{ text: '申请人', value: 'createUserName', align: 'center' },
{ text: '申请时间', value: 'createTime', align: 'center' },
{ text: '量值溯源与传递等级关系图', value: 'relationPdfFile', align: 'center' },
]
// 数据查询
function fetchData(isNowPage = false) {
loadingTable.value = true
if (!isNowPage) {
// 是否显示当前页，否则跳转第一页
listQuery.value.offset = 1
}
getHistoryList(listQuery.value).then((response) => {
list.value = response.data.rows
// if (list.value.length) {
// form.value.quantityPdfFile = list.value[list.value.length - 1].relationPdfFile
// form.value.quantityWordFile = list.value[list.value.length - 1].relationWordFile
// }
total.value = parseInt(response.data.total)
loadingTable.value = false
if (!list.value.length) {
radioMenus.value = [ // 标签内容
{ name: '当前量值溯源与传递等级', value: 'current', disabled: false },
]
}
else {
radioMenus.value = [ // 标签内容
{ name: '当前量值溯源与传递等级', value: 'current', disabled: false },
{ name: '历史量值溯源与传递等级', value: 'history', disabled: false },
]
}
}).catch(() => {
loadingTable.value = false
})
}
// 改变页容量
function handleSizeChange(val: number) {
listQuery.value.limit = val
fetchData()
}
// 改变当前页
function handleCurrentChange(val: number) {
listQuery.value.offset = val
fetchData(true)
}
watch(() => form.value.quantityPdfFile, (newVal) => {
if (newVal) {
getPdfStream(form.value.quantityPdfFile).then((res) => {
getBase64(res.data).then((res) => {
pdfUrl.value = res as string
})
})
}
})
onMounted(() => {
fetchData()
fetchGradeForm()
})
defineExpose({ saveGrade })
</script>
<template>
<app-container>
<el-radio-group v-model="current">
<el-radio-button v-for="item in radioMenus" :key="item.value" :label="item.value">
{{ item.name }}
</el-radio-button>
</el-radio-group>
<el-form
v-show="current === 'current'"
ref="ruleFormRef"
v-loading="formLoading"
:model="form"
:label-width="130"
label-position="right"
:rules="rules"
style="margin-top: 30px;"
>
<el-row :gutter="24" class="marg">
<el-col :span="24">
<el-form-item label="量值溯源与传递等级关系图(word版本):" label-width="300px">
<show-photo v-if="form.quantityWordFile" :minio-file-name="form.quantityWordFile" />
<span v-if="!form.quantityWordFile" style="margin-right: 10px;">无</span>
<input v-show="pageType === ''" ref="fileRefWord" type="file" @change="onQuantityWordFileChange">
<!-- 草稿箱、未通过且审批类型为新建、已取消且审批类型为新建这三种情况才可以重新上传 -->
<el-button v-if="route.query.fromPage === 'standardBuildDetail' || (pageType !== 'detail' && (props.approvalStatusName === '草稿箱' || (props.approvalStatusName === '未通过' && props.approvalType === '1') || (props.approvalStatusName === '已取消' && props.approvalType === '1')))" id="file" type="primary" :style="{ 'margin-left': form.quantityWordFile === '' ? '0px' : '20px' }" @click="upload(fileRefWord)">
{{ form.quantityWordFile === '' ? '上传' : '更换附件' }}
</el-button>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="24">
<el-form-item label="量值溯源与传递等级关系图(pdf版本):" prop="quantityPdfFile" label-width="300px">
<show-photo v-if="form.quantityPdfFile" :minio-file-name="form.quantityPdfFile" />
<span v-if="!form.quantityPdfFile" style="margin-right: 10px;">无</span>
<input v-show="pageType === ''" ref="fileRefPdf" type="file" @change="onQuantityPdfFileChange">
<el-button v-if="route.query.fromPage === 'standardBuildDetail' || (pageType !== 'detail' && (props.approvalStatusName === '草稿箱' || (props.approvalStatusName === '未通过' && props.approvalType === '1') || (props.approvalStatusName === '已取消' && props.approvalType === '1')))" id="file" type="primary" :style="{ 'margin-left': form.quantityPdfFile === '' ? '0px' : '20px' }" @click="upload(fileRefPdf)">
{{ form.quantityPdfFile === '' ? '上传' : '更换附件' }}
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div v-if="current === 'current' && pageType === 'detail' && !form.quantityPdfFile" style="margin-top: 20px;color: #606266;font-size: 14px;">
此标准装置无量值溯源与传递等级关系图，请在编辑页面上传！
</div>
<div v-if="pdfUrl" v-show="current === 'current'" style="display: flex;justify-content: center; margin-top: 10px;width: 100%;">
<vue-pdf-embed ref="pdf" style="width: 100%;" :source="pdfUrl" class="vue-pdf-embed" />
</div>
<el-table
v-show="current === 'history'"
v-loading="loadingTable"
:data="list"
border
stripe
style="width: 100%;margin-top: 30px;"
>
<el-table-column label="序号" width="55" align="center">
<template #default="scope">
{{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column
v-for="item in columns"
:key="item.value"
:prop="item.value"
:label="item.text"
align="center"
>
<template #default="scope">
<show-photo v-if="item.value === 'relationPdfFile'" :minio-file-name="scope.row[item.value]" /><br>
<span v-if="item.value !== 'relationPdfFile'">{{ scope.row[item.value] }}</span>
</template>
</el-table-column>
</el-table>
<!-- 页码 -->
<el-pagination
v-show="current === 'history'"
style="width: 100%;margin-top: 10px;"
:current-page="listQuery.offset"
:page-sizes="[10, 20, 30]"
:page-size="listQuery.limit"
:total="total"
layout="total, sizes, prev, pager, next"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</app-container>
</template>