|
|
@@ -0,0 +1,317 @@
|
|
|
+<!-- 性能验证记录 -->
|
|
|
+<template>
|
|
|
+ <div v-loading="loading" class="table">
|
|
|
+ <!-- 添加删除按钮，非只读模式下显示 -->
|
|
|
+ <div v-if="!readonly" class="button">
|
|
|
+ <el-button size="mini" icon="el-icon-plus" type="success" @click="goAdd"
|
|
|
+ >添加</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-close"
|
|
|
+ type="danger"
|
|
|
+ @click="goDelete"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ :data="slicedData"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ >
|
|
|
+ <el-table-column width="50" type="selection" />
|
|
|
+ <el-table-column
|
|
|
+ prop=""
|
|
|
+ label="序号"
|
|
|
+ width="50"
|
|
|
+ type="index"
|
|
|
+ :index="showIndex"
|
|
|
+ />
|
|
|
+ <!-- 记录时间列：只读显示文本，编辑显示日期选择器 -->
|
|
|
+ <el-table-column prop="bianZhiShiJian" label="记录时间" width="140">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-date-picker
|
|
|
+ v-if="!readonly"
|
|
|
+ v-model="row.bianZhiShiJian"
|
|
|
+ type="datetime"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ size="mini"
|
|
|
+ placeholder="选择日期时间"
|
|
|
+ />
|
|
|
+ <span v-else>{{ row.bianZhiShiJian }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 附件列：校准附件，只读时不可操作，编辑时可上传/选择 -->
|
|
|
+ <el-table-column prop="fuJian" label="附件" width="260">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <ibps-attachment
|
|
|
+ v-model="row.fuJian"
|
|
|
+ :download="true"
|
|
|
+ multiple
|
|
|
+ accept="*"
|
|
|
+ :readonly="readonly"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 备注列：只读显示文本，编辑显示输入框 -->
|
|
|
+ <el-table-column prop="beiZhu" label="备注" width="200">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-input v-if="!readonly" v-model="row.beiZhu" size="mini" />
|
|
|
+ <span v-else>{{ row.beiZhu }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 操作列可根据需要启用，已保留查阅和表单查看（需确保行有id） -->
|
|
|
+ <!--
|
|
|
+ <el-table-column prop="" label="操作" width="140">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-view"
|
|
|
+ :disabled="!row.id"
|
|
|
+ @click="look(row)"
|
|
|
+ >查阅</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="ibps-icon-table"
|
|
|
+ :disabled="!row.id"
|
|
|
+ @click="goLookForm(row)"
|
|
|
+ >表单</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ -->
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <el-pagination
|
|
|
+ style="margin-top: 5px; padding-bottom: 10px"
|
|
|
+ :current-page="pagination.currentPage"
|
|
|
+ :page-sizes="[10, 20, 30, 50]"
|
|
|
+ :page-size="pagination.pageSize"
|
|
|
+ layout="prev,pager,next,jumper,sizes,->,total"
|
|
|
+ :total="listDataCopy.length"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :top="'3vh'"
|
|
|
+ :width="'90%'"
|
|
|
+ class="js-custom-dialog"
|
|
|
+ append-to-body
|
|
|
+ :fullscreen="false"
|
|
|
+ :visible.sync="iframeVisible"
|
|
|
+ >
|
|
|
+ <iframe
|
|
|
+ :src="srcUrl"
|
|
|
+ :height="'100%'"
|
|
|
+ :width="'100%'"
|
|
|
+ frameborder="0"
|
|
|
+ scrolling="no"
|
|
|
+ />
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <data-template-formrender-dialog
|
|
|
+ :visible="DialogVisible"
|
|
|
+ form-key="jyxtxzjgyzhqrjlb"
|
|
|
+ :pk-value="pkValue"
|
|
|
+ :readonly="true"
|
|
|
+ @close="(visible) => (DialogVisible = visible)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import DataTemplateFormrenderDialog from '@/business/platform/data/templaterender/form/dialog.vue'
|
|
|
+import IbpsAttachment from '@/business/platform/file/attachment/selector'
|
|
|
+import ibpsUserSelector from '@/business/platform/org/selector'
|
|
|
+import { perfVerificationRecord } from '@/api/platform/device/device'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ ibpsUserSelector,
|
|
|
+ IbpsAttachment,
|
|
|
+ DataTemplateFormrenderDialog
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ params: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {}
|
|
|
+ },
|
|
|
+ hideSysDeviceNo: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ // 是否只读，默认为 true（保持原行为）
|
|
|
+ readonly: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ // 可选的父组件传入数据，若传入则使用该数据，否则内部加载
|
|
|
+ listData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ DialogVisible: false,
|
|
|
+ iframeVisible: false,
|
|
|
+ pkValue: '',
|
|
|
+ srcUrl: '',
|
|
|
+ // 内部维护的数据副本，用于编辑和分页
|
|
|
+ listDataCopy: [],
|
|
|
+ loading: false,
|
|
|
+ // 前端分页参数
|
|
|
+ pagination: {
|
|
|
+ pageSize: 10,
|
|
|
+ currentPage: 1
|
|
|
+ },
|
|
|
+ // 多选选中的行
|
|
|
+ multipleSelection: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 根据当前分页截取数据
|
|
|
+ slicedData() {
|
|
|
+ const start = (this.pagination.currentPage - 1) * this.pagination.pageSize
|
|
|
+ const end = start + this.pagination.pageSize
|
|
|
+ return this.listDataCopy.slice(start, end)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // 监听父组件传入的 listData，更新副本
|
|
|
+ listData: {
|
|
|
+ handler(val) {
|
|
|
+ // 深拷贝避免直接修改父组件数据
|
|
|
+ this.listDataCopy = JSON.parse(JSON.stringify(val || []))
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ // 如果父组件没有传入 listData，则自己加载数据
|
|
|
+ if (!this.listData || this.listData.length === 0) {
|
|
|
+ await this.getData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 查阅
|
|
|
+ look(row) {
|
|
|
+ if (!row.id) {
|
|
|
+ this.$message.warning('新增记录暂无法查阅')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.pkValue = row.id
|
|
|
+ this.DialogVisible = true
|
|
|
+ },
|
|
|
+ // 查看表单
|
|
|
+ goLookForm(row) {
|
|
|
+ if (!row.id) {
|
|
|
+ this.$message.warning('新增记录暂无法查看表单')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const first = this.$store.getters.level.first
|
|
|
+ this.srcUrl =
|
|
|
+ this.$reportPath.replace('show', 'pdf') +
|
|
|
+ '设备校准和计量溯源性/检验系统校准结果验证和确认记录表.rpx&id_=' +
|
|
|
+ row.id +
|
|
|
+ '&org_=' +
|
|
|
+ first
|
|
|
+ this.iframeVisible = true
|
|
|
+ },
|
|
|
+ // 获取分页数据（从后端加载）
|
|
|
+ async getData() {
|
|
|
+ this.loading = true
|
|
|
+ try {
|
|
|
+ const {
|
|
|
+ data: { dataResult, pageResult }
|
|
|
+ } = await perfVerificationRecord({
|
|
|
+ requestPage: {
|
|
|
+ limit: 1000, // 为了前端分页，这里加载较多数据，实际可按需调整
|
|
|
+ pageNo: 1
|
|
|
+ },
|
|
|
+ parameters: [],
|
|
|
+ sorts: [{ field: 'bian_zhi_shi_jian', order: 'desc' }]
|
|
|
+ })
|
|
|
+ // 将后端数据存入副本
|
|
|
+ this.listDataCopy = dataResult || []
|
|
|
+ // 重置到第一页
|
|
|
+ this.pagination.currentPage = 1
|
|
|
+ } catch (error) {
|
|
|
+ console.error(error)
|
|
|
+ } finally {
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 多选变化
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ this.multipleSelection = val
|
|
|
+ },
|
|
|
+ // 删除选中行
|
|
|
+ goDelete() {
|
|
|
+ if (this.multipleSelection.length === 0) {
|
|
|
+ this.$message.warning('请先选择要删除的记录')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$confirm('确认删除选中的记录吗？', '提示', {
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ // 过滤掉选中的行
|
|
|
+ this.listDataCopy = this.listDataCopy.filter(
|
|
|
+ (item) => !this.multipleSelection.includes(item)
|
|
|
+ )
|
|
|
+ // 如果当前页数据为空且不是第一页，则向前一页
|
|
|
+ if (this.slicedData.length === 0 && this.pagination.currentPage > 1) {
|
|
|
+ this.pagination.currentPage -= 1
|
|
|
+ }
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ }).catch(() => {})
|
|
|
+ },
|
|
|
+ // 添加新行
|
|
|
+ goAdd() {
|
|
|
+ // 创建空行，字段与后端保持一致
|
|
|
+ this.listDataCopy.push({
|
|
|
+ id: undefined, // 新增行没有id
|
|
|
+ bianZhiShiJian: '',
|
|
|
+ fuJian: [],
|
|
|
+ beiZhu: ''
|
|
|
+ })
|
|
|
+ // 自动跳转到最后一页以便查看新行
|
|
|
+ this.pagination.currentPage = Math.ceil(
|
|
|
+ this.listDataCopy.length / this.pagination.pageSize
|
|
|
+ )
|
|
|
+ },
|
|
|
+ // 当前页码改变
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.pagination.currentPage = val
|
|
|
+ },
|
|
|
+ // 页码大小改变
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.pagination.pageSize = val
|
|
|
+ this.pagination.currentPage = 1 // 重置为第一页
|
|
|
+ },
|
|
|
+ // 分页连续序号
|
|
|
+ showIndex(index) {
|
|
|
+ return (
|
|
|
+ index + 1 + (this.pagination.currentPage - 1) * this.pagination.pageSize
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.table {
|
|
|
+ .button {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zhonghuizhen