解决上传文件需要认证的问题

spring

2025-03-05 dc3e687df3ba49f48f542c9c3088ce3bbc4318cd

 src/views/CNAS/process/ensureResults/qualityControlPlan/index.vue

@@ -0,0 +1,625 @@
<template>
  <!--  7.7质量监督计划-->
  <div>
    <div class="table-card">
      <TableCard title="年度计划表">
        <template v-slot:form>
          <div class="items_center">
            <span>计划名称：</span>
            <el-input v-model="yearForm.superviseName" class="search" placeholder="请输入" size="small"></el-input>
            <el-button size="small" type="primary" @click="getYearPlanList">查询</el-button>
            <el-button size="small" @click="clearYear">重置</el-button>
          </div>
          <div>
            <el-upload ref='upload' :action="action" :before-upload="beforeUpload" :headers="uploadHeader"
              :on-error="onError" :on-success="handleSuccessUp" :show-file-list="false"
              accept='.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar'>
              <el-button :loading="upLoading" size="small" type="primary">导入</el-button>
            </el-upload>
          </div>
        </template>
        <template v-slot:table>
          <limsTable ref="yearTable" :column="yearColumnData" :height="'28vh'" :highlightCurrentRow="true"
            :rowClick="rowClick" :table-data="yearTableData" :table-loading="yearLoading"
            style="margin-top: 0.5em;padding: 0 15px;" :page="yearPage" @pagination="pagination">
          </limsTable>
        </template>
      </TableCard>
    </div>
    <div class="table-card">
      <TableCard title="年度计划明细表">
        <template v-slot:form>
          <div class="items_center">
            <span>监督目的：</span>
            <el-input v-model="yearDetailForm.supervisePurpose" class="search" placeholder="请输入"
              size="small"></el-input>
            <span>监督项目：</span>
            <el-input v-model="yearDetailForm.superviseProject" class="search" placeholder="请输入"
              size="small"></el-input>
            <el-button size="small" type="primary" @click="getYearDetailPlanList">查询</el-button>
            <el-button size="small" @click="clearDetail">重置</el-button>
          </div>
          <div>
            <el-button size="small" type="primary" @click="showDialog('add')">新增</el-button>
          </div>
        </template>
        <template v-slot:table>
          <limsTable :column="yearDetailColumnData" :height="'28vh'" :table-data="yearDetailTableData"
            :table-loading="yearDetailLoading" style="margin-top: 18px; padding: 0 15px;" :page="yearDetailPage"
            @pagination="pagination1">
          </limsTable>
        </template>
      </TableCard>
    </div>
    <!--新增修改弹框-->
    <detail-form-dialog v-if="formDia" ref="formDia" :superviseId="superviseId"
      @closeDia="closeDia"></detail-form-dialog>
    <!--记录流程弹框-->
    <records-dialog v-if="recordsDia" ref="recordsDia" :superviseId="superviseId"
      @closeRecordsDia="closeRecordsDia"></records-dialog>
    <!--不符合处理流程弹框-->
    <processing-sheet v-if="processingDia" ref="processingDia" :superviseId="superviseId"
      @closeProcessingDia="closeProcessingDia"></processing-sheet>
    <!--纠正处理流程弹框-->
    <rectify-dialog v-if="rectifyDia" ref="rectifyDia" :superviseId="superviseId"
      @closeProcessingDia="closeRectifyDia"></rectify-dialog>
    <el-dialog :visible.sync="ratifyDialog" title="批准" width="30%" @close="closeRatifyDia">
      <span>
        批准备注：
        <el-input v-model="ratifyInfo.ratifyRemark" type="textarea"></el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="ratifyLoading" @click="handleRatify(0)">不批准</el-button>
        <el-button :loading="ratifyLoading" type="primary" @click="handleRatify(1)">批 准</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="downloadDialog" title="导出" width="600px">
      <span>
        <el-button plain type="primary" @click="controlDown">记录单导出</el-button>
        <el-button plain type="primary" @click="processingDown">处理单导出</el-button>
        <el-button plain type="primary" @click="supervisoryDown">纠正单导出</el-button>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="downloadDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import limsTable from "@/components/Table/lims-table.vue";
import TableCard from '@/components/TableCard/index.vue';
import DetailFormDialog from './components/detailFormDialog.vue';
import RecordsDialog from './components/recordsDialog.vue';
import ProcessingSheet from './components/processingSheet.vue';
import RectifyDialog from './components/rectifyDialog.vue';
import {
  pageQualitySupervise,
  ratifyQualitySupervise,
  exportQualitySupervise,
  delQualitySupervise,
  pageQualitySuperviseDetail,
  exportSuperviseDetailRecord,
  superviseDetailAccordingExport,
  exportSuperviseDetaillCorrect,
  delQualitySuperviseDetail,
} from '@/api/cnas/process/ensureResults/qualityControlPlan.js'
export default {
  name: 'a7-quality-control-plan',
  // import 引入的组件需要注入到对象中才能使用
  components: { RectifyDialog, ProcessingSheet, RecordsDialog, DetailFormDialog, TableCard, limsTable },
  data() {
    // 这里存放数据
    return {
      yearForm: {
        superviseName: '',
      },
      yearPage: {
        current: 1,
        size: 20,
        total: 0
      },
      yearColumnData: [
        {
          label: '计划名称',
          prop: 'superviseName',
          minWidth: '150px'
        }, {
          label: '编制人',
          prop: 'writeUserName',
          minWidth: '100'
        }, {
          label: '编制日期',
          prop: 'writeTime',
          minWidth: '160'
        }, {
          dataType: 'tag',
          label: '批准状态',
          prop: 'ratifyStatus',
          minWidth: '100',
          formatData: (params) => {
            if (params === 0) {
              return '不批准';
            } else if (params === 1) {
              return '批准';
            } else {
              return null;
            }
          },
          formatType: (params) => {
            if (params === 0) {
              return 'danger';
            } else if (params === 1) {
              return 'success';
            } else {
              return null;
            }
          }
        }, {
          label: '批准内容',
          prop: 'ratifyRemark',
          minWidth: '100'
        }, {
          label: '批准人',
          prop: 'ratifyUserName',
          minWidth: '100'
        }, {
          label: '批准日期',
          prop: 'ratifyTime',
          minWidth: '160'
        }, {
          label: '创建日期',
          prop: 'createTime',
          minWidth: '160'
        }, {
          label: '创建人',
          prop: 'createUser',
          minWidth: '100'
        }, {
          dataType: 'action',
          minWidth: '170',
          label: '操作',
          fixed: 'right',
          operation: [
            {
              name: '批准',
              type: 'text',
              disabled: (row) => {
                if (row.ratifyStatus === 1) {
                  return true
                } else {
                  return false
                }
              },
              clickFun: (row) => {
                this.approvalPlan(row)
              }
            },
            {
              name: '导出',
              type: 'text',
              clickFun: (row) => {
                this.handleDown(row)
              }
            },
            {
              name: '删除',
              type: 'text',
              color: '#f56c6c',
              clickFun: (row) => {
                this.delPlan(row)
              }
            }
          ]
        }],
      yearTableData: [],  // 年表
      yearLoading: false,
      yearDetailForm: {
        supervisePurpose: '',
        superviseProject: ''
      },
      yearDetailColumnData: [
        {
          label: '监督日期',
          prop: 'superviseTime',
          minWidth: '150px'
        }, {
          label: '监督目的',
          prop: 'supervisePurpose',
          minWidth: '150px',
          showOverflowTooltip: true,
        }, {
          label: '监控项目',
          prop: 'superviseProject',
          minWidth: '150px'
        }, {
          label: '被监督人员',
          prop: 'supervisee',
          minWidth: '150px'
        }, {
          label: '监督原因',
          prop: 'superviseReason',
          minWidth: '150px'
        }, {
          label: '备注',
          prop: 'remark',
          minWidth: '150px'
        }, {
          dataType: 'action',
          width: '260',
          label: '操作',
          fixed: 'right',
          operation: [
            {
              name: '编辑',
              type: 'text',
              clickFun: (row) => {
                this.showDialog('edit', row)
              }
            },
            {
              name: '记录',
              type: 'text',
              clickFun: (row) => {
                this.records(row)
              }
            },
            {
              name: '处理',
              type: 'text',
              clickFun: (row) => {
                this.processing(row)
              },
              disabled: (row) => {
                if (row.isAccording === 1 || row.isAccording === null) {
                  return true
                } else {
                  return false
                }
              },
            },
            {
              name: '纠正',
              type: 'text',
              clickFun: (row) => {
                this.rectify(row)
              },
              disabled: (row) => {
                if (row.isAccording === 1 || row.isAccording === null || row.isCorrect === null || row.isCorrect === 0) {
                  return true
                } else {
                  return false
                }
              },
            },
            {
              name: '导出',
              type: 'text',
              clickFun: (row) => {
                this.openDownloadDia(row);
              },
            },
            {
              name: '删除',
              type: 'text',
              color: '#f56c6c',
              clickFun: (row) => {
                this.delYearPlanDetail(row)
              }
            }
          ]
        }
      ],
      yearDetailTableData: [], // 年明细表
      yearDetailLoading: false,
      yearDetailPage: {
        current: 1,
        size: 20,
        total: 0
      },
      superviseId: '',
      formDia: false,
      recordsDia: false,
      processingDia: false,
      rectifyDia: false,
      ratifyDialog: false,
      ratifyLoading: false,
      ratifyInfo: {},
      upLoading: false,
      downloadDialog: false,
      download: {},
    };
  },
  mounted() {
    this.getYearPlanList()
  },
  // 方法集合
  methods: {
    // 查询年度计划表
    getYearPlanList() {
      const entity = {
        superviseName: this.yearForm.superviseName,
      }
      const page = this.yearPage
      this.yearLoading = true
      pageQualitySupervise({ ...entity, ...page }).then(res => {
        this.yearLoading = false
        if (res.code === 201) return
        this.yearTableData = res.data.records
        this.yearPage.total = res.data.total
        if (this.yearTableData.length > 0) {
          this.rowClick(this.yearTableData[0])
        }
      }).catch(err => {
        console.log('err---', err);
        this.yearLoading = false
      })
    },
    clearYear() {
      this.yearForm.superviseName = ''
      this.getYearPlanList()
    },
    // 导入流程
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        return false;
      } else {
        this.upLoading = true;
        return true;
      }
    },
    onError(err, file, fileList) {
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    handleSuccessUp(response) {
      this.upLoading = false;
      if (response.code == 200) {
        this.$message.success('上传成功');
        this.getYearPlanList()
      }
    },
    // 批准
    approvalPlan(row) {
      this.ratifyDialog = true
      this.ratifyInfo = row
    },
    handleRatify(ratifyStatus) {
      // 批准状态 , 0 不通过, 1通过
      this.ratifyInfo.ratifyStatus = ratifyStatus
      this.ratifyLoading = true
      ratifyQualitySupervise(this.ratifyInfo).then(res => {
        this.ratifyLoading = false
        if (res.code === 201) return
        this.$message.success('操作成功')
        this.closeRatifyDia()
      }).catch(err => {
        console.log('err---', err);
        this.ratifyLoading = false
      })
    },
    closeRatifyDia() {
      this.ratifyDialog = false
      this.ratifyInfo.ratifyRemark = ''
      this.getYearPlanList()
    },
    // 导出
    handleDown(row) {
      exportQualitySupervise({ superviseId: row.superviseId }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/msword' });
        this.$download.saveAs(blob, row.superviseName + '.docx')
      })
    },
    // 删除进度计划表
    delPlan(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.yearLoading = true
        delQualitySupervise({ superviseId: row.superviseId }).then(res => {
          this.yearLoading = false
          if (res.code === 201) return
          this.$message.success('删除成功')
          this.getYearPlanList()
        }).catch(err => {
          this.yearLoading = false
          console.log('err---', err);
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 年度计划表格，点击行数据后刷新详情
    rowClick(row) {
      this.superviseId = row.superviseId
      this.getYearDetailPlanList()
    },
    // 获取年度明细表
    getYearDetailPlanList() {
      const entity = {
        superviseId: this.superviseId,
        supervisePurpose: this.yearDetailForm.supervisePurpose,
        superviseProject: this.yearDetailForm.superviseProject,
      }
      const page = this.yearDetailPage
      this.yearDetailLoading = true
      pageQualitySuperviseDetail({ ...entity, ...page }).then(res => {
        this.yearDetailLoading = false
        if (res.code === 201) return
        this.yearDetailTableData = res.data.records
        this.yearDetailPage.total = res.data.total
      }).catch(err => {
        console.log('err---', err);
        this.yearDetailLoading = false
      })
    },
    // 重置明细表
    clearDetail() {
      this.yearDetailForm = {
        supervisePurpose: '',
        superviseProject: ''
      }
      this.getYearDetailPlanList()
    },
    // 打开年度明细新增、修改弹框
    showDialog(type, row) {
      this.formDia = true
      this.$nextTick(() => {
        this.$refs.formDia.openDia(type, row)
      })
    },
    closeDia() {
      this.formDia = false
      this.getYearDetailPlanList()
    },
    // 记录流程
    records(row) {
      this.recordsDia = true
      this.$nextTick(() => {
        this.$refs.recordsDia.openDia(row)
      })
    },
    closeRecordsDia() {
      this.recordsDia = false
      this.getYearDetailPlanList()
    },
    // 不符合流程弹框
    processing(row) {
      this.processingDia = true
      this.$nextTick(() => {
        this.$refs.processingDia.openDia(row)
      })
    },
    closeProcessingDia() {
      this.processingDia = false
      this.getYearDetailPlanList()
    },
    // 纠正流程弹框
    rectify(row) {
      this.rectifyDia = true
      this.$nextTick(() => {
        this.$refs.rectifyDia.openDia(row)
      })
    },
    closeRectifyDia() {
      this.rectifyDia = false
      this.getYearDetailPlanList()
    },
    // 打开导出弹框
    openDownloadDia(row) {
      this.downloadDialog = true
      this.download = row
    },
    // 导出记录
    controlDown() {
      exportSuperviseDetailRecord({ superviseDetailsId: this.download.superviseDetailsId }).then(res => {
        const blob = new Blob([res], { type: 'application/msword' });
        this.$download.saveAs(blob, '记录导出' + '.docx')
      }).catch(err => {
        console.log('err---', err);
      })
    },
    // 处理单导出
    processingDown() {
      superviseDetailAccordingExport({
        superviseDetailsId: this.download.superviseDetailsId
      }).then(res => {
        const blob = new Blob([res], { type: 'application/msword' });
        this.$download.saveAs(blob, '不符合项导出' + '.docx')
      }).catch(err => {
        console.log('err---', err);
      })
    },
    // 纠正单导出
    supervisoryDown() {
      exportSuperviseDetaillCorrect({
        superviseDetailsCorrectId: this.download.superviseDetailsCorrectId
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/msword' });
        this.$download.saveAs(blob, '监督纠正措施' + '.docx')
      })
    },
    // 删除年度详情列表
    delYearPlanDetail(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.yearDetailLoading = true
        delQualitySuperviseDetail({
          superviseDetailsId: row.superviseDetailsId
        }).then(res => {
          this.yearDetailLoading = false
          if (res.code === 201) return
          this.$message.success('删除成功')
          this.getYearDetailPlanList()
        }).catch(err => {
          this.yearDetailLoading = false
          console.log('err---', err);
        })
      })
    },
    // 年计划分页
    pagination({ page, limit }) {
      this.yearPage.current = page;
      this.yearPage.size = limit;
      this.getYearPlanList();
    },
    // 年明细计划分页
    pagination1({ page, limit }) {
      this.yearDetailPage.current = page;
      this.yearDetailPage.size = limit;
      this.getYearDetailPlanList();
    },
  },
  // 用于上传文件的信息
  computed: {
    action() {
      return this.javaApi + '/qualitySupervise/importQualitySupervise'
    }
  },
};
</script>

<style scoped>
.table-card {
  background-color: #ffffff;
}

.flex_column {
  display: flex;
  height: 80vh;
  flex-direction: column;
  overflow: auto;
  justify-content: space-between;
}

.pagination {
  display: flex;
  justify-content: space-between
}

.items_center {
  display: flex;
  align-items: center;
}

.date_box {
  margin: 0 5px;
}

.search {
  width: 150px;
  padding: 0 16px;
}
</style>