质量监督计划：新增计划下发（列表下发状态列与下发按钮，仅已批准未下发的可下发），导出弹窗改卡片式并拦截导出错误响应避免下载损坏文件，日常监督检查记录...

吴羡

12 小时以前 d4d34a9b730ac328068f936598d4138ac2635e57

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

@@ -74,12 +74,43 @@
        <el-button :loading="ratifyLoading" type="primary" @click="handleRatify(1)">批 准</el-button>
      </span></template>
    </el-dialog>
    <el-dialog v-model="downloadDialog" title="导出" width="600px">
      <span>
        <el-button plain type="primary" :disabled="download.recordStatus !== 3" @click="controlDown">记录单导出</el-button>
        <el-button plain type="primary" :disabled="download.accordingStatus !== 3" @click="processingDown">处理单导出</el-button>
        <el-button plain type="primary" :disabled="download.correctStatus !== 3" @click="supervisoryDown">纠正单导出</el-button>
      </span>
    <el-dialog v-model="downloadDialog" title="导出" width="640px">
      <div class="doc-card">
        <div class="doc-card-head">
          <span class="doc-card-name">日常监督检查记录表（记录单）</span>
          <el-tag :type="download.recordStatus === 3 ? 'success' : 'info'" size="small">
            {{ download.recordStatus === 3 ? '已批准' : '未批准' }}
          </el-tag>
        </div>
        <div class="doc-card-foot">
          <el-button type="primary" :disabled="download.recordStatus !== 3" @click="controlDown">导 出</el-button>
        </div>
      </div>
      <div class="doc-card">
        <div class="doc-card-head">
          <span class="doc-card-name">不符合工作控制单（处理单）</span>
          <el-tag :type="download.accordingStatus === 3 ? 'success' : 'info'" size="small">
            {{ download.accordingStatus === 3 ? '已批准' : '未批准' }}
          </el-tag>
        </div>
        <div class="doc-card-foot">
          <el-button type="primary" :disabled="download.accordingStatus !== 3" @click="processingDown">导 出</el-button>
        </div>
      </div>
      <div class="doc-card">
        <div class="doc-card-head">
          <span class="doc-card-name">纠正措施处理单（纠正单）</span>
          <el-tag :type="download.correctStatus === 3 ? 'success' : 'info'" size="small">
            {{ download.correctStatus === 3 ? '已批准' : '未批准' }}
          </el-tag>
        </div>
        <div class="doc-card-foot">
          <el-button type="primary" :disabled="download.correctStatus !== 3" @click="supervisoryDown">导 出</el-button>
        </div>
      </div>
      <div class="down-tip">
        仅"已批准"的表单可导出，灰色表示对应表单尚未批准或暂无数据
      </div>
      <template #footer><span  class="dialog-footer">
        <el-button @click="downloadDialog = false">取 消</el-button>
      </span></template>
@@ -131,7 +162,7 @@
import limsTable from "@/components/Table/lims-table.vue";
import {
  delQualitySupervise, delQualitySuperviseDetail,
  exportQualitySupervise, exportSuperviseDetailRecord,
  exportQualitySupervise, exportSuperviseDetailRecord, issueQualitySupervise,
  pageQualitySupervise, pageQualitySuperviseDetail,
  ratifyQualitySupervise, superviseDetailAccordingExport,
  exportSuperviseDetaillCorrect
@@ -200,6 +231,25 @@
          prop: 'ratifyTime',
          width: '160'
        }, {
          dataType: 'tag',
          label: '下发状态',
          prop: 'issueStatus',
          width: '100',
          formatData: (params) => {
            if (params === 1) {
              return '已下发';
            } else {
              return '未下发';
            }
          },
          formatType: (params) => {
            if (params === 1) {
              return 'success';
            } else {
              return 'info';
            }
          }
        }, {
          dataType: 'action',
          label: '操作',
          operation: [
@@ -215,6 +265,20 @@
              },
              clickFun: (row) => {
                this.approvalPlan(row)
              }
            },
            {
              name: '下发',
              type: 'text',
              disabled: (row) => {
                if (row.ratifyStatus !== 1 || row.issueStatus === 1) {
                  return true
                } else {
                  return false
                }
              },
              clickFun: (row) => {
                this.issuePlan(row)
              }
            },
            {
@@ -389,6 +453,13 @@
              type: 'text',
              clickFun: (row) => {
                this.records(row)
              },
              disabled: () => {
                if (this.currentPlan.issueStatus !== 1) {
                  return true
                } else {
                  return false
                }
              }
            },
            {
@@ -446,6 +517,7 @@
      },
      currentScrollPosition: 0,
      superviseId: '',
      currentPlan: {},
      formDia: false,
      recordsDia: false,
      processingDia: false,
@@ -562,8 +634,9 @@
      this.getUserList()
    },
    getUserList() {
      selectUserCondition({ type: 2 }).then((res) => {
        this.userList = res.data;
      // 质量监督面向全实验室, 人员列表不按部门筛选
      selectUserCondition({ type: 1 }).then((res) => {
        this.userList = res.data || [];
      })
    },
    // 批准
@@ -592,14 +665,29 @@
    // 导出
    handleDown(row) {
      exportQualitySupervise({ superviseId: row.superviseId }).then(res => {
        try {
          this.outLoading = false
          const blob = new Blob([res], { type: 'application/msword' });
          this.$download.saveAs(blob, row.superviseName + '.docx')
        } catch (error) {
          console.error('创建Blob对象时出错:', error);
        }
        this.outLoading = false
        this.saveDocx(res, row.superviseName + '.docx')
      }).catch(err => {
        console.log('err---', err);
      })
    },
    // 保存导出文件: 后端导出失败时会返回错误JSON, 此时弹提示而不是存成损坏的docx
    saveDocx(res, filename) {
      const reader = new FileReader();
      reader.readAsText(res, 'utf-8');
      reader.onload = () => {
        const text = (reader.result || '').trim();
        if (text.startsWith('{') || text.startsWith('[')) {
          let msg = '导出失败';
          try { msg = JSON.parse(text).msg || msg; } catch (e) { }
          this.$message.error(msg);
        } else {
          this.$download.saveAs(new Blob([res], { type: 'application/msword' }), filename);
        }
      };
      reader.onerror = () => {
        this.$download.saveAs(new Blob([res], { type: 'application/msword' }), filename);
      };
    },
    // 删除进度计划表
    delPlan(row) {
@@ -627,7 +715,31 @@
    // 年度计划表格，点击行数据后刷新详情
    rowClick(row) {
      this.superviseId = row.superviseId
      this.currentPlan = row
      this.getYearDetailPlan()
    },
    // 下发计划
    issuePlan(row) {
      this.$confirm('下发后监督员与相关检测人员将收到通知, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.yearLoading = true
        issueQualitySupervise({ superviseId: row.superviseId }).then(res => {
          this.yearLoading = false
          this.$message.success('下发成功')
          this.getYearPlanList()
        }).catch(err => {
          this.yearLoading = false
          console.log('err---', err);
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消下发'
        });
      });
    },
    getYearDetailPlan () {
      this.yearDetailPage.current = 1
@@ -715,8 +827,7 @@
    // 导出记录
    controlDown() {
      exportSuperviseDetailRecord({ superviseDetailsId: this.download.superviseDetailsId }).then(res => {
        const blob = new Blob([res], { type: 'application/msword' });
        this.$download.saveAs(blob, '记录导出.docx')
        this.saveDocx(res, '记录导出.docx')
      }).catch(err => {
        console.log('err---', err);
      })
@@ -724,8 +835,7 @@
    // 处理单导出
    processingDown() {
      superviseDetailAccordingExport({ superviseDetailsId: this.download.superviseDetailsId }).then(res => {
        const blob = new Blob([res], { type: 'application/msword' });
        this.$download.saveAs(blob, '不符合项导出.docx')
        this.saveDocx(res, '不符合项导出.docx')
      }).catch(err => {
        console.log('err---', err);
      })
@@ -733,8 +843,9 @@
    // 纠正单导出
    supervisoryDown() {
      exportSuperviseDetaillCorrect({ superviseDetailsCorrectId: this.download.superviseDetailsCorrectId }).then(res => {
        const blob = new Blob([res], { type: 'application/msword' });
        this.$download.saveAs(blob, '监督纠正措施.docx')
        this.saveDocx(res, '监督纠正措施.docx')
      }).catch(err => {
        console.log('err---', err);
      })
    },
    // 删除年度详情列表
@@ -793,6 +904,37 @@
  margin: 0 5px;
}

.doc-card {
  padding: 12px 16px;
  margin-bottom: 12px;
  background-color: #f7f8fa;
  border: 1px solid #ebeef5;
  border-radius: 6px;
}

.doc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.doc-card-name {
  font-size: 14px;
  color: var(--lims-text-2, #303133);
}

.doc-card-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.down-tip {
  margin-top: 10px;
  color: #909399;
  font-size: 12px;
}

.search {
  width: 150px;
  padding: 0 16px;