报告编制修改

lxp

2025-03-12 2b6e530143e59eae4d3a35eae0cf1620decfe698

报告编制修改

 src/api/business/reportPreparation.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,156 @@
import resquest from '@/utils/request'


export function pageInsReport(params) {
    return resquest({
        url: '/insReport/pageInsReport',
        method: 'get',
        params: params
    })
}

export function inReport(data) {
    return resquest({
        url: '/insReport/inReport',
        method: 'post',
        data: data
    })
}

export function upAll(data) {
    return resquest({
        url: '/insReport/upAll',
        method: 'post',
        data: data
    })
}

export function getLaboratoryByReportId(params) {
    return resquest({
        url: '/insReport/getLaboratoryByReportId',
        method: 'get',
        params: params
    })
}

export function withdraw(data) {
    return resquest({
        url: '/insReport/withdraw',
        method: 'post',
        data: data
    })
}

export function updateApproveConfig(data) {
    return resquest({
        url: '/approveConfig/updateApproveConfig',
        method: 'post',
        data: data
    })
}

export function getUserList(params) {
    return resquest({
        url: '/approveConfig/getUserList',
        method: 'get',
        params: params
    })
}

export function getApproveConfigList(params) {
    return resquest({
        url: '/approveConfig/getApproveConfigList',
        method: 'get',
        params: params
    })
}

export function batchApprovalReport(data) {
    return resquest({
        url: '/insReport/batchApprovalReport',
        method: 'post',
        data: data
    })
}

export function downAll(params) {
    return resquest({
        url: '/insReport/downAll',
        method: 'get',
        params: params
    })
}

export function getBatchApprovalProgress(params) {
    return resquest({
        url: '/insReport/getBatchApprovalProgress',
        method: 'get',
        params: params
    })
}

export function getReportCountInfo(params) {
    return resquest({
        url: '/insReport/getReportCountInfo',
        method: 'get',
        params: params
    })
}

export function downReport(params) {
    return resquest({
        url: '/insReport/downReport',
        method: 'get',
        params: params
    })
}

export function upReportUrl(data) {
    return resquest({
        url: '/insReport/upReportUrl',
        method: 'post',
        params: data
    })
}

export function examineReport(data) {
    return resquest({
        url: '/insReport/examineReport',
        method: 'post',
        data: data
    })
}

export function ratifyReport(data) {
    return resquest({
        url: '/insReport/ratifyReport',
        method: 'post',
        data: data
    })
}

export function writeReport(data) {
    return resquest({
        url: '/insReport/writeReport',
        method: 'post',
        params: data
    })
}


export function downLoad(params) {
    return resquest({
        url: '/file/attachmentType/downLoad',
        method: 'get',
        params: params,
        responseType: 'blob'
    })
}

export function getReportInfo(params) {
    return resquest({
        url: '/file/attachmentType/getMIME',
        method: 'get',
        params: params
    })
}

 src/components/Table/lims-table.vue

@@ -71,13 +71,28 @@
                @click="o.clickFun(scope.row)" :key="key">
                {{ o.name }}
              </el-button>
              <el-upload :action="javaApi + o.url + '?id=' + (o.uploadIdFun ? o.uploadIdFun(scope.row) : scope.row.id)"
              <!-- <el-upload :action="javaApi + o.url + '?id=' + (o.uploadIdFun ? o.uploadIdFun(scope.row) : scope.row.id)"
                size="mini" ref="upload" :multiple="o.multiple ? o.multiple : false" :limit="1"
                :disabled="o.disabled ? o.disabled(scope.row) : false" :accept="o.accept
                  ? o.accept
                  : '.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar'
                  " v-if="o.type == 'upload' && o.url" style="display: inline-block; width: 50px"
                v-show="o.showHide ? o.showHide(scope.row) : true" :headers="uploadHeader" :on-error="onError"
                :data="o.data ? o.data(scope.row) : {}"
                :before-upload="o.beforeUpload ? o.beforeUpload(scope.row) : () => true"
                :on-exceed="onExceed" :on-success="handleSuccessUp" :show-file-list="false" :key="key">
                <el-button :size="o.size ? o.size : 'small'" type="text"
                  :disabled="o.disabled ? o.disabled(scope.row) : false">{{ o.name }}</el-button>
              </el-upload> -->
              <el-upload :action="javaApi + o.url"
                size="mini" ref="upload" :multiple="o.multiple ? o.multiple : false" 
                :disabled="o.disabled ? o.disabled(scope.row) : false" :accept="o.accept
                  ? o.accept
                  : '.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar'
                  " v-if="o.type == 'upload' && o.url" style="display: inline-block; width: 50px"
                v-show="o.showHide ? o.showHide(scope.row) : true" :headers="uploadHeader" :on-error="onError"
                :data="o.data ? o.data(scope.row) : {}"
                :before-upload="o.beforeUpload ? o.beforeUpload(scope.row) : () => true"
                :on-exceed="onExceed" :on-success="handleSuccessUp" :show-file-list="false" :key="key">
                <el-button :size="o.size ? o.size : 'small'" type="text"
                  :disabled="o.disabled ? o.disabled(scope.row) : false">{{ o.name }}</el-button>
@@ -323,6 +338,7 @@
          this.$message.success("上传成功");
        }
      }
      this.$refs.upload.clearFiles();
    },
    onError(err, file, fileList) {
      this.$message.error("上传失败");

 src/main.js

@@ -67,7 +67,7 @@
};
Vue.prototype.javaApi = process.env.VUE_APP_BASE_API
  ? process.env.VUE_APP_BASE_API
  : "http://192.168.0.104:8002";
  : "http://127.0.0.1:8002";
Vue.prototype.checkPermi = checkPermi;
Vue.prototype.uploadHeader = {
  Authorization: "Bearer " + getToken(),

 src/views/business/reportPreparation/index.vue

@@ -1,9 +1,1920 @@
<style scoped>
.title {
  height: 60px;
  line-height: 60px;
}

.search {
  background-color: #fff;
  height: 80px;
  display: flex;
  align-items: center;
}

.search_thing {
  display: flex;
  align-items: center;
  height: 50px;
  width: 230px;
}

.search_label {
  width: 90px;
  font-size: 14px;
  text-align: right;
}

.search_input {
  width: calc(100% - 90px);
}

.table {
  margin-top: 10px;
  background-color: #fff;
  width: calc(100% - 40px);
  height: calc(100% - 60px - 80px - 10px - 40px);
  padding: 20px;
}

.el-form-item {
  margin-bottom: 16px;
}

.full-screen {
  position: absolute;
  right: 52px;
  top: 22px;
}

.btns {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translate(0, -50%);
  display: flex;
  align-items: center;
}

.fullscreen {
  height: 82vh;
}
.custom-upload >>> .el-upload-list--text {
  max-height: 20vh;
  overflow-y: scroll;
}
</style>

<template>
  <div>报告编制</div>
  <div class="inspection_order">
    <div style="width: 100%; height: 100%">
      <div>
        <el-row class="title">
          <el-col :span="12" style="padding-left: 20px; text-align: left"
            >报告编制</el-col
          >
        </el-row>
      </div>
      <div class="search" :style="`height: ${more ? 130 : 80}px;`">
        <el-row :gutter="10" style="width: 100%">
          <el-col :span="16" style="display: flex; flex-wrap: wrap">
            <div class="search_thing" v-if="maxNum >= 1">
              <div class="search_label">报告编号：</div>
              <div class="search_input">
                <el-input
                  size="small"
                  placeholder="请输入"
                  clearable
                  v-model="entity.code"
                  @keyup.enter.native="refreshTable()"
                ></el-input>
              </div>
            </div>
            <div class="search_thing" v-if="maxNum >= 2">
              <div class="search_label">上传状态：</div>
              <div class="search_input">
                <el-select
                  size="small"
                  clearable
                  @clear="refreshTable()"
                  @change="refreshTable()"
                  v-model="entity.isUpload"
                >
                  <el-option
                    v-for="(item, index) in tagField.isUpload.select"
                    :value="item.value"
                    :label="item.label"
                    :key="index"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="search_thing" v-if="maxNum >= 3">
              <div class="search_label">提交状态：</div>
              <div class="search_input">
                <el-select
                  size="small"
                  clearable
                  @clear="refreshTable()"
                  @change="refreshTable()"
                  v-model="entity.state"
                >
                  <el-option
                    v-for="(item, index) in tagField.state.select"
                    :value="item.value"
                    :label="item.label"
                    :key="index"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div
              class="search_thing"
              v-if="maxNum >= 4 || (maxNum < 4 && more)"
            >
              <div class="search_label">审核状态：</div>
              <div class="search_input">
                <el-select
                  size="small"
                  clearable
                  @clear="refreshTable()"
                  @change="refreshTable()"
                  v-model="entity.isExamine"
                >
                  <el-option
                    v-for="(item, index) in tagField.isExamine.select"
                    :value="item.value"
                    :label="item.label"
                    :key="index"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="search_thing" v-if="maxNum >= 5 || more">
              <div class="search_label">批准状态：</div>
              <div class="search_input">
                <el-select
                  size="small"
                  clearable
                  @clear="refreshTable()"
                  @change="refreshTable()"
                  v-model="entity.isRatify"
                >
                  <el-option
                    v-for="(item, index) in tagField.isRatify.select"
                    :value="item.value"
                    :label="item.label"
                    :key="index"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="search_thing" v-if="maxNum >= 6 || more">
              <div class="search_label">创建时间：</div>
              <div class="search_input">
                <el-date-picker
                  size="small"
                  clearable
                  @clear="refreshTable()"
                  @change="refreshTable()"
                  v-model="entity.createTimeRange"
                  type="daterange"
                  value-format="yyyy-MM-dd[T]HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                >
                </el-date-picker>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="search_thing">
              <el-button
                v-if="maxNum < 5"
                type="text"
                :icon="!more ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
                style="color: #3a7bfa"
                @click="more = !more"
                >{{ !more ? "更多" : "收起" }}</el-button
              >
              <div class="search_thing" style="padding-left: 20px">
                <el-button
                  size="small"
                  @click="refresh()"
                  style="margin-right: 6px"
                  >重 ç½®</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  @click="refreshTable()"
                  style="margin-right: 6px"
                  >查 è¯¢</el-button
                >
                <template>
                  <el-dropdown
                    @command="handleCommand"
                    style="margin-left: 10px"
                  >
                    <el-button type="primary" size="small">
                      æ›´å¤šæ“ä½œ<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        icon="el-icon-download"
                        command="batchDownload"
                        >批量下载</el-dropdown-item
                      >
                      <el-dropdown-item
                        icon="el-icon-upload"
                        command="batchUpload"
                        >批量上传</el-dropdown-item
                      >
                      <el-dropdown-item
                        icon="el-icon-s-check"
                        command="oneClickApproval"
                        >一键审批</el-dropdown-item
                      >
                      <el-dropdown-item
                        icon="el-icon-setting"
                        command="approvalConfig"
                        >审批签名配置</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
                <template>
                  <el-button
                    size="small"
                    type="primary"
                    @click="handleDowns"
                    :loading="outLoading"
                    style="margin-right: 6px"
                    >批量下载</el-button
                  >
                  <el-button
                    size="small"
                    type="primary"
                    @click="openBatchUploadDia()"
                    :loading="inLoading"
                    >批量上传</el-button
                  >
                  <el-button
                    size="small"
                    type="primary"
                    @click="oneClickApproval()"
                    :loading="approvalLoading"
                    >一键审批</el-button
                  >
                  <el-button
                    size="small"
                    type="primary"
                    @click="openApprovalConfig()"
                    :loading="approvalConfigLoading"
                    >审批签名配置</el-button
                  >
                </template>
              </div>
              <!-- <div class="btns">
              <el-button size="small" type="primary" @click="handleDowns" :loading="outLoading" style="margin-right: 16px;">批量下载</el-button>
              <el-button size="small" type="primary" @click="openBatchUploadDia()" :loading="inLoading">批量上传</el-button>
            </div> -->
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="table">
        <div
          style="
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            font-size: 13px;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
          "
        >
          <p style="margin-left: 15px">
            å¾…提交数量:&nbsp;<span
              style="font-size: 16px; color: rgb(58, 123, 250)"
              >{{ unSubmitCount }}</span
            >
          </p>
          <p style="margin-left: 15px">
            å¾…审核数量:&nbsp;<span
              style="font-size: 16px; color: rgb(58, 123, 250)"
              >{{ unExamineCount }}</span
            >
          </p>
          <p style="margin-left: 15px">
            å¾…批准数量:&nbsp;<span
              style="font-size: 16px; color: rgb(58, 123, 250)"
              >{{ unRatifyCount }}</span
            >
          </p>
        </div>
        <lims-table
          :tableData="tableData"
          :column="column"
          :tableLoading="tableLoading"
          :height="'calc(100vh - 270px)'"
          :page="page"
          @pagination="pagination"
        ></lims-table>
      </div>
    </div>
    <!--报告查看-->
    <el-dialog
      :fullscreen="fullscreen"
      top="5vh"
      :modal-append-to-body="false"
      :visible.sync="viewIssuedVisible"
      title="报告查看"
      width="80vw"
    >
      <div class="full-screen">
        <i
          v-if="!fullscreen"
          class="el-icon-full-screen"
          style="cursor: pointer; font-size: 18px"
          @click="fullscreen = true"
        ></i>
        <!-- <img
          v-else
          alt=""
          src="../../../static/img/no-full.svg"
          style="cursor: pointer"
          @click="fullscreen = false"
        /> -->
      </div>
      <div v-if="viewIssuedVisible" style="height: 80vh">
        <onlyoffice
          ref="onlyoffice"
          :options="option"
          style="width: 100%; height: 100%"
        />
      </div>
    </el-dialog>
    <el-dialog
      title="在线编制"
      :visible.sync="claimVisible"
      width="22cm"
      :modal-append-to-body="false"
      :fullscreen="fullscreen"
    >
      <div class="full-screen">
        <i
          class="el-icon-full-screen"
          style="cursor: pointer; font-size: 18px"
          @click="fullscreen = true"
          v-if="!fullscreen"
        ></i>
        <!-- <img
          src="../../../static/img/no-full.svg"
          alt=""
          v-else
          style="cursor: pointer"
          @click="fullscreen = false"
        /> -->
      </div>
      <Word
        style="height: 70vh"
        :class="{ fullscreen: fullscreen }"
        v-if="claimVisible"
        ref="Word"
        :value="value"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="claimVisible = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="confirmClaim">ç¡® å®š</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="报告审核"
      top="5vh"
      :visible.sync="issuedVisible"
      width="80vw"
      :modal-append-to-body="false"
      :fullscreen="fullscreen"
    >
      <div class="full-screen">
        <i
          class="el-icon-full-screen"
          style="cursor: pointer; font-size: 18px"
          @click="fullscreen = true"
          v-if="!fullscreen"
        ></i>
        <!-- <img
          src="../../../static/img/no-full.svg"
          alt=""
          v-else
          style="cursor: pointer"
          @click="fullscreen = false"
        /> -->
      </div>
      <div style="height: 75vh" v-if="issuedVisible">
        <onlyoffice
          ref="onlyoffice"
          :options="option"
          style="width: 100%; height: 100%"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="issuedReasonVisible = true" :disabled="loadingIssued"
          >不通过</el-button
        >
        <el-button type="primary" @click="subIssued" :loading="loadingIssued"
          >通 è¿‡</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="不通过原因"
      top="5vh"
      :visible.sync="issuedReasonVisible"
      width="400px"
      :modal-append-to-body="false"
    >
      <div class="search_thing">
        <div class="search_label">不通过原因：</div>
        <div class="search_input">
          <el-input
            size="small"
            placeholder="请输入"
            clearable
            v-model="reason"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="issuedReasonVisible = false"
          :disabled="loadingIssuedReason"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="handleIssuedReason"
          :loading="loadingIssuedReason"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="报告批准"
      top="5vh"
      :visible.sync="approveVisible"
      width="80vw"
      :modal-append-to-body="false"
      :fullscreen="fullscreen"
    >
      <div class="full-screen">
        <i
          class="el-icon-full-screen"
          style="cursor: pointer; font-size: 18px"
          @click="fullscreen = true"
          v-if="!fullscreen"
        ></i>
        <!-- <img
          src="../../../static/img/no-full.svg"
          alt=""
          v-else
          style="cursor: pointer"
          @click="fullscreen = false"
        /> -->
      </div>
      <div style="height: 75vh" v-if="approveVisible">
        <onlyoffice
          ref="onlyoffice"
          :options="option"
          style="width: 100%; height: 100%"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="approveReasonVisible = true"
          :disabled="loadingApprove"
          >不批准</el-button
        >
        <el-button type="primary" @click="subApprove" :loading="loadingApprove"
          >批 å‡†</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="不批准原因"
      :visible.sync="approveReasonVisible"
      width="400px"
      :modal-append-to-body="false"
    >
      <div class="search_thing">
        <div class="search_label">不批准原因：</div>
        <div class="search_input">
          <el-input
            size="small"
            placeholder="请输入"
            clearable
            v-model="reason"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="approveReasonVisible = false"
          :disabled="loadingApproveReason"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="handleApproveReason"
          :loading="loadingApproveReason"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="batchUploadDia"
      title="报告批量上传"
      width="30%"
      :close-on-click-modal="false"
      top="5vh"
    >
      <div>
        <!-- <el-upload
            class="upload-demo"
            :action="action"
            :headers="headers"
            :show-file-list="false"
            accept=".doc,.docx"
            :limit="1"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
            ref="upload"
            :on-error="onError">
          </el-upload> -->
        <el-upload
          ref="upload"
          class="upload-demo custom-upload"
          drag
          show-file-list
          accept=".doc,.docx"
          :action="action"
          :headers="headers"
          :on-error="onError"
          :before-upload="beforeUpload"
          :file-list="fileList"
          :auto-upload="false"
          :limit="100"
          :on-exceed="uploadExceed"
          :on-success="handleSuccess"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            åªèƒ½ä¸Šä¼ .doc/.docx文件，且单个文件不超过10MB
          </div>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="submitUpload"
          >确认上传</el-button
        >
      </span>
    </el-dialog>
    <!-- æŠ¥å‘Šæ‰¹é‡å®¡æ‰¹å¼¹æ¡† -->
    <el-dialog
      :visible.sync="oneClickApprovalDialog"
      title="报告批量审批"
      width="40%"
      :close-on-click-modal="false"
      top="5vh"
    >
      <div>
        <el-result
          icon="error"
          v-show="progressData.hasException != null"
          title="错误信息"
          :subTitle="progressData.hasException"
        ></el-result>
        <el-result
          icon="success"
          v-show="isSuccess && progressData.hasException == null"
          title="成功信息"
          subTitle="报告审批完成"
        ></el-result>
        <el-progress
          :percentage="progressData.hasNum"
          :color="customColors"
        ></el-progress>
        <el-statistic title="剩余报告数量">
          <template slot="formatter">
            {{ progressData.surplus }}/{{ progressData.hasCount }}
          </template>
        </el-statistic>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button size="small" type="primary" @click="confirmApproval"
          >确认</el-button
        > -->
      </span>
    </el-dialog>
    <!-- æ’¤å›žå¼¹æ¡† -->
    <el-dialog
      title="请选择需要撤回的试验室"
      :visible.sync="withdrawDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-select
        v-model="laboratory"
        multiple
        clearable
        style="width: 100%; margin-bottom: 20px"
        placeholder="请选择试验室"
      >
        <el-option
          v-for="(item, i) in laboratorys"
          :key="i"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="withdrawOperation">ç¡® å®š</el-button>
      </span>
    </el-dialog>

    <!-- å®¡æ‰¹ç­¾åé…ç½®å¼¹æ¡† -->
    <el-dialog
      :visible.sync="approvalConfigDialog"
      title="审批签名配置"
      width="55%"
      :close-on-click-modal="false"
      top="5vh"
    >
      <div v-if="approvalConfigListTX.editor != null">
        <el-divider content-position="left">通信产品实验室</el-divider>
        <el-form
          size="mini"
          :model="approvalConfigListTX"
          inline
          label-position="right"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="编制人:" prop="editor">
                <el-select
                  v-model="approvalConfigListTX.editor"
                  placeholder="请选择"
                  style="width: 100%"
                  filterable
                >
                  <el-option-group
                    v-for="(item, index) in Object.keys(personList)"
                    :key="index"
                    :label="item"
                  >
                    <el-option
                      v-for="op in personList[item]"
                      :key="op.id"
                      :label="op.name"
                      :value="op.id"
                    >
                    </el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核人:" prop="examiner">
                <el-select
                  v-model="approvalConfigListTX.examiner"
                  placeholder="请选择"
                  style="width: 100%"
                  filterable
                >
                  <el-option-group
                    v-for="(item, index) in Object.keys(personList)"
                    :key="index"
                    :label="item"
                  >
                    <el-option
                      v-for="op in personList[item]"
                      :key="op.id"
                      :label="op.name"
                      :value="op.id"
                    >
                    </el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="批准人:" prop="approver">
                <el-select
                  v-model="approvalConfigListTX.approver"
                  placeholder="请选择"
                  style="width: 100%"
                  filterable
                >
                  <el-option-group
                    v-for="(item, index) in Object.keys(personList)"
                    :key="index"
                    :label="item"
                  >
                    <el-option
                      v-for="op in personList[item]"
                      :key="op.id"
                      :label="op.name"
                      :value="op.id"
                    >
                    </el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <br />
      <div v-if="approvalConfigListDL.editor != null">
        <el-divider content-position="left">电力产品实验室</el-divider>
        <el-form
          size="mini"
          :model="approvalConfigListDL"
          inline
          label-position="right"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="编制人:" prop="editor">
                <el-select
                  v-model="approvalConfigListDL.editor"
                  placeholder="请选择"
                  style="width: 100%"
                  filterable
                >
                  <el-option-group
                    v-for="(item, index) in Object.keys(personList)"
                    :key="index"
                    :label="item"
                  >
                    <el-option
                      v-for="op in personList[item]"
                      :key="op.id"
                      :label="op.name"
                      :value="op.id"
                    >
                    </el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核人:" prop="examiner">
                <el-select
                  v-model="approvalConfigListDL.examiner"
                  placeholder="请选择"
                  style="width: 100%"
                  filterable
                >
                  <el-option-group
                    v-for="(item, index) in Object.keys(personList)"
                    :key="index"
                    :label="item"
                  >
                    <el-option
                      v-for="op in personList[item]"
                      :key="op.id"
                      :label="op.name"
                      :value="op.id"
                    >
                    </el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="批准人:" prop="approver">
                <el-select
                  v-model="approvalConfigListDL.approver"
                  placeholder="请选择"
                  style="width: 100%"
                  filterable
                >
                  <el-option-group
                    v-for="(item, index) in Object.keys(personList)"
                    :key="index"
                    :label="item"
                  >
                    <el-option
                      v-for="op in personList[item]"
                      :key="op.id"
                      :label="op.name"
                      :value="op.id"
                    >
                    </el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="confirmApprovalConfig"
          >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {};
</script>
import limsTable from "@/components/Table/lims-table.vue";
import onlyoffice from "../reportPreparation/onlyoffice.vue";
import {
  pageInsReport,
  inReport,
  upAll,
  getLaboratoryByReportId,
  withdraw,
  updateApproveConfig,
  getUserList,
  getApproveConfigList,
  downAll,
  getBatchApprovalProgress,
  getReportCountInfo,
  downReport,
  upReportUrl,
  ratifyReport,
  writeReport,
  examineReport,
  downLoad,
  getReportInfo,
} from "../../../api/business/reportPreparation";

<style></style>
export default {
  components: {
    limsTable,
    onlyoffice,
  },
  data() {
    return {
      tagField: {
        isUpload: {
          select: [
            {
              value: 0,
              type: "danger",
              label: "未上传",
            },
            {
              value: 1,
              type: "success",
              label: "已上传",
            },
          ],
        },
        isRatify: {
          select: [
            {
              value: -9,
              type: "info",
              label: "未批准",
            },
            {
              value: 0,
              type: "danger",
              label: "不批准",
            },
            {
              value: 1,
              type: "success",
              label: "批准",
            },
          ],
        },
        isExamine: {
          select: [
            {
              value: -9,
              type: "info",
              label: "未审核",
            },
            {
              value: 0,
              type: "danger",
              label: "不通过",
            },
            {
              value: 1,
              type: "success",
              label: "通过",
            },
          ],
        },
        state: {
          select: [
            {
              value: 0,
              type: "danger",
              label: "待提交",
            },
            {
              value: 1,
              type: "success",
              label: "已提交",
            },
          ],
        },
      },
      entity: {
        isUpload: null,
        entrustCode: null,
        state: null,
        isExamine: null,
        isRatify: null,
        code: null,
        createTimeRange: [],
      },
      withdrawDialogVisible: false,
      laboratory: [],
      laboratorys: [],
      isSuccess: false,
      time: null,
      //审批进度对象
      progressData: {
        hasProgress: false,
        hasNum: 0,
        hasCount: 0,
        hasException: null,
        surplus: 0,
      },
      personList: [],
      approvalConfigListTX: {
        editor: null,
        examiner: null,
        approver: null,
      }, //审批签名配置列表
      approvalConfigListDL: {
        editor: null,
        examiner: null,
        approver: null,
      }, //审批签名配置列表
      approvalConfigDialog: false,
      approvalConfigLoading: false,
      surplusReportNum: 0,
      percentage: 0,
      customColors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 },
      ],
      oneClickApprovalDialog: false,
      approvalLoading: false,
      isShowMore: false,
      more: false,
      fileList: [],
      batchUploadDia: false,
      viewIssuedVisible: false,
      tableData: [],
      column: [
        {
          label: "报告编号",
          prop: "code",
        },
        {
          label: "上传状态",
          prop: "isUpload",
          dataType: "tag",
          formatData: (params) => {
            return params == 1 ? "已上传" : "未上传";
          },
          formatType: (params) => {
            return params == 1 ? "success" : "danger";
          },
        },
        {
          label: "创建时间",
          prop: "createTime",
        },
        {
          label: "提交人",
          prop: "writeUserName",
        },
        {
          label: "提交状态",
          prop: "state",
          dataType: "tag",
          formatData: (params) => {
            return params == 1 ? "已提交" : "待提交";
          },
          formatType: (params) => {
            return params == 1 ? "success" : "danger";
          },
        },
        {
          label: "提交时间",
          prop: "writeTime",
        },
        {
          label: "审核人",
          prop: "examineUser",
        },
        {
          label: "审核状态",
          prop: "isExamine",
          dataType: "tag",
          formatData: (params) => {
            let farmat = "";
            if (params == 0) {
              farmat = "不通过";
            } else if (params == 1) {
              farmat = "通过";
            } else {
              farmat = "未审核";
            }
            return farmat;
          },
          formatType: (params) => {
            let farmat = "";
            if (params == 0) {
              farmat = "danger";
            } else if (params == 1) {
              farmat = "success";
            } else {
              farmat = "info";
            }
            return farmat;
          },
        },
        {
          label: "审核备注",
          prop: "examineTell",
        },
        {
          label: "审核时间",
          prop: "examineTime",
        },
        {
          label: "批准人",
          prop: "ratifyUser",
        },
        {
          label: "批准状态",
          prop: "isRatify",
          dataType: "tag",
          formatData: (params) => {
            let farmat = "";
            if (params == 0) {
              farmat = "不批准";
            } else if (params == 1) {
              farmat = "批准";
            } else {
              farmat = "未批准";
            }
            return farmat;
          },
          formatType: (params) => {
            let farmat = "";
            if (params == 0) {
              farmat = "danger";
            } else if (params == 1) {
              farmat = "sucess";
            } else {
              farmat = "info";
            }
            return farmat;
          },
        },
        {
          label: "批准备注",
          prop: "ratifyTell",
        },
        {
          label: "批准时间",
          prop: "ratifyTime",
        },
        {
          dataType: "action",
          fixed: "right",
          label: "操作",
          operation: [
            {
              name: "编制",
              type: "text",
              clickFun: (row) => {
                this.handleWeave(row);
              },
              disabled: (row) => {
                return row.isExamine != -9;
              },
            },
            {
              name: "下载",
              type: "text",
              clickFun: (row) => {
                this.download(row);
              },
            },
            {
              name: "上传",
              type: "upload",
              url: "/file/attachmentType/upload",
              data: (row) => {
                return {
                  id: row.id,
                  type: 1,
                };
              },
              uploadIdFun: (row) => {
                return row.id;
              },
              disabled: (row) => {
                return row.isExamine != -9;
              },
            },
            {
              name: "还原",
              type: "text",
              clickFun: (row) => {
                this.handleRestore(row);
              },
              disabled: (row) => {
                return row.isExamine != -9;
              },
            },
            {
              name: "提交",
              type: "text",
              clickFun: (row) => {
                this.handleSubmit(row);
              },
              disabled: (row) => {
                return row.state != 0;
              },
            },
            {
              name: "审核",
              type: "text",
              clickFun: (row) => {
                this.handleIssued(row);
              },
              disabled: (row) => {
                return (
                  row.state == null || row.state == 0 || row.isExamine == 1
                );
              },
            },
            {
              name: "批准",
              type: "text",
              clickFun: (row) => {
                this.handleApprove(row);
              },
              disabled: (row) => {
                return (
                  row.state == null ||
                  row.state == 0 ||
                  row.isExamine == 0 ||
                  row.isExamine == -9 ||
                  row.isRatify == 1
                );
              },
            },
            {
              name: "撤回",
              type: "text",
              clickFun: (row) => {
                this.withdraw(row);
              },
              disabled: (row) => {
                return row.state == 1;
              },
            },
          ],
        },
      ],
      page: {
        total: 0,
        size: 10,
        current: 1,
      },
      tableLoading: false,
      entityCopy: {},
      upIndex: 0,
      statusList: [],
      claimVisible: false,
      issuedVisible: false,
      issuedReasonVisible: false,
      approveVisible: false,
      approveReasonVisible: false,
      fullscreen: false,
      loadingApproveReason: false,
      loadingApprove: false,
      loadingIssuedReason: false,
      loadingIssued: false,
      value: ``,
      reason: "",
      currentInfo: null,
      option: null,
      mutiList: [],
      outLoading: false,
      inLoading: false,
      maxNum: 1,
      unSubmitCount: 0,
      unRatifyCount: 0,
      unExamineCount: 0,
    };
  },
  computed: {
    headers() {
      return {
        token: sessionStorage.getItem("token"),
      };
    },
    action() {
      return "";
    },
  },
  created() {
    this.getAuthorizedPerson();
    this.handleResize();
    // ç›‘听窗口大小改变事件
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    if (this.time != null) {
      clearInterval(this.time);
      this.time = null;
    }
    this.progressData = {
      hasProgress: false,
      hasNum: 0,
      hasCount: 0,
      hasException: null,
      surplus: 0,
    };
    window.removeEventListener("resize", this.handleResize);
  },
  mounted() {
    this.entityCopy = this.HaveJson(this.entity);
    this.getList();
    this.getReportCountInfo();
  },
  watch: {
    batchUploadDia(newVal) {
      if (!newVal) {
        this.$refs.upload.clearFiles();
        this.fileList = [];
      }
    },
    progressData(newVal) {
      if (newVal && newVal.hasNum == 100) {
        clearInterval(this.time);
        this.$message.success("报告审批完成");
        this.isSuccess = true;
        this.mutiList = [];
        this.refresh();
      } else if (
        newVal &&
        newVal.hasException != null &&
        newVal.hasException != ""
      ) {
        clearInterval(this.time);
      }
    },
    oneClickApprovalDialog(newVal) {
      if (!newVal) {
        this.isSuccess = false;
        this.progressData = {
          hasProgress: false,
          hasNum: 0,
          hasCount: 0,
          hasException: null,
          surplus: 0,
        };
      }
    },
  },
  methods: {
    // è¿”回分页值
    pagination({ page, limit }) {
      this.page.current = page;
      this.page.size = limit;
      this.getList();
    },
    getList() {
      this.tableLoading = true;
      if (!this.entity.createTimeRange) {
        this.entity.createTimeRange = [];
      }
      const data = { ...this.page, ...this.entity };
      pageInsReport(data)
        .then((res) => {
          this.tableData = res.data.records;
          this.page.total = res.data.total;
          this.tableLoading = false;
        })
        .catch((error) => {
          console.error(error);
          this.tableLoading = false;
        });
    },
    // æ’¤å›ž å¼¹æ¡†
    withdraw(row) {
      getLaboratoryByReportId(row.id).then((res) => {
        this.laboratorys = res.data;
        this.reportId = row.id;
        this.withdrawDialogVisible = true;
      });
    },
    withdrawOperation() {
      if (this.laboratory.length == 0) {
        this.$message.error("请选择需要撤回的试验室");
        return;
      }
      let data = {
        laboratory: JSON.stringify(this.laboratory),
        id: this.reportId,
      };
      withdraw(data).then((res) => {
        if (res.code == 200) {
          this.$message.success("撤回成功");
          this.withdrawDialogVisible = false;
          this.refresh();
        }
      });
    },

    handleCommand(command) {
      switch (command) {
        case "batchDownload":
          //批量下载
          this.handleDowns();
          break;
        case "batchUpload":
          //批量上传
          this.openBatchUploadDia();
          break;
        case "oneClickApproval":
          //一键审批
          this.oneClickApproval();
          break;
        case "approvalConfig":
          //审批签名配置
          this.openApprovalConfig();
          break;
      }
    },
    //确认更新审批签名配置
    confirmApprovalConfig() {
      let data = [];
      if (this.approvalConfigListTX.id) {
        data.push(this.approvalConfigListTX);
      }
      if (this.approvalConfigListDL.id) {
        data.push(this.approvalConfigListDL);
      }
      updateApproveConfig({ configList: data })
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("更新成功");
            this.approvalConfigDialog = false;
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
    //获取人员信息
    getAuthorizedPerson() {
      getUserList()
        .then((res) => {
          this.personList = res.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    //打开审批签名配置弹框
    openApprovalConfig() {
      getApproveConfigList()
        .then((res) => {
          if (res.code !== 201) {
            res.data.forEach((ele) => {
              if (ele.laboratory == "通信产品实验室") {
                this.approvalConfigListTX = { ...ele };
              }
              if (ele.laboratory == "电力产品实验室") {
                this.approvalConfigListDL = { ...ele };
              }
            });
          }
        })
        .catch((error) => {
          console.error(error);
        });
      this.$nextTick(() => {
        this.approvalConfigDialog = true;
      });
    },
    //确认审批
    confirmApproval() {},
    //一键审批按钮
    oneClickApproval() {
      if (this.mutiList.length == 0) {
        this.$message.error("请选择要审批的报告");
        return;
      }
      //执行审批
      if (!this.progressData.hasProgress) {
        //未审批的报告
        let unApprovalList = this.mutiList.filter(
          (ele) => ele.isExamine == -9 || ele.isRatify == -9
        );
        let entity = this.entity;
        //根据查询条件过滤已选择的数据
        let ids = unApprovalList
          .filter((f) =>
            entity.isExamine != null && entity.isExamine !== ""
              ? f.isExamine === entity.isExamine
              : true
          )
          .filter((f) =>
            entity.isRatify != null && entity.isRatify !== ""
              ? f.isRatify === entity.isRatify
              : true
          )
          .filter((f) =>
            entity.isUpload != null && entity.isUpload !== ""
              ? f.isUpload === entity.isUpload
              : true
          )
          .filter((f) =>
            entity.code != null && entity.code !== ""
              ? f.code.indexOf(entity.code) >= 0
              : true
          )
          .filter((f) =>
            entity.state != null && entity.state !== ""
              ? f.state === entity.state
              : true
          )
          .map((ele) => ele.id);
        batchApprovalReport({ ids: ids })
          .then((res) => {
            if (res.code != 201) {
              //查询审批进度
              this.time = setInterval(() => {
                this.getProgress();
              }, 500);
            }
          })
          .catch((error) => {
            console.error(error);
            clearInterval(this.time);
          });
      }
      // this.getProgress();
      this.$nextTick(() => {
        this.oneClickApprovalDialog = true;
      });
    },
    getProgress() {
      getBatchApprovalProgress().then((res) => {
        this.progressData = res.data;
      });
    },
    // å®šä¹‰ä¸€ä¸ªå‡½æ•°æ¥å¤„理视口宽度变化
    handleResize() {
      //视口宽度
      let windowWidth = window.innerWidth;
      //减去左边菜单栏宽度92，页边距40,右边的操作按钮宽度viewportWidth*33.33333%
      let viewportWidth = windowWidth - 92 - 40;
      //搜索表单最大宽度
      let formMaxWidth = viewportWidth - viewportWidth * 0.3333333;
      //单个搜索框宽度为230
      this.maxNum = formMaxWidth / 230;
    },
    //批量上传报告
    openBatchUploadDia() {
      this.batchUploadDia = true;
    },
    // æŸ¥çœ‹æŠ¥å‘Š
    viewIssued(row) {
      this.currentInfo = row;
      console.log(`output->row`, row);
      let fileName = row.urlS === null || row.urlS === "" ? row.url : row.urlS;
      let fileType = "docx";
      if (row.tempUrlPdf != null || row.tempUrlPdf === "") {
        fileName = row.tempUrlPdf;
        fileType = "pdf";
      }
      fileName = fileName.replace("/word/", "");
      const userName = JSON.parse(localStorage.getItem("user")).name;
      this.option = {
        url: this.javaApi + "/word/" + fileName,
        isEdit: false,
        fileType: fileType,
        title: fileName,
        lang: "zh-CN",
        isPrint: false,
        user_id: 1,
        user_name: userName,
        editUrl:
          this.javaApi + "/insReport/onlyOffice/save?fileName=" + fileName,
      };
      console.log(this.javaApi + "/word/" + fileName);
      this.viewIssuedVisible = true;
    },
    handleChange(arr) {
      this.mutiList = arr;
    },
    handleDowns() {
      if (this.mutiList.length == 0) {
        this.$message.error("请选择报告");
        return;
      }
      let entity = this.entity;
      //根据查询条件过滤已选择的数据
      let str = this.mutiList
        .filter((f) =>
          entity.isExamine != null && entity.isExamine !== ""
            ? f.isExamine === entity.isExamine
            : true
        )
        .filter((f) =>
          entity.isRatify != null && entity.isRatify !== ""
            ? f.isRatify === entity.isRatify
            : true
        )
        .filter((f) =>
          entity.isUpload != null && entity.isUpload !== ""
            ? f.isUpload === entity.isUpload
            : true
        )
        .filter((f) =>
          entity.code != null && entity.code !== ""
            ? f.code.indexOf(entity.code) >= 0
            : true
        )
        .filter((f) =>
          entity.state != null && entity.state !== ""
            ? f.state === entity.state
            : true
        )
        .map((m) => m.id)
        .join(",");
      if (str === "" || str == null) {
        this.$message.error("没有符合条件的数据!");
        return;
      }
      this.outLoading = true;
      downAll({ ids: str }).then((res) => {
        this.outLoading = false;
        this.$message.success("导出成功");
        // const blob = new Blob([res],{ type: 'application/octet-stream' });
        // const url = URL.createObjectURL(blob);
        // const link = document.createElement('a');
        // link.href = url;
        // link.download = '报告.zip';
        // link.click();
        const link = document.createElement("a");
        link.href = this.javaApi + res.message;
        link.target = "_blank";
        document.body.appendChild(link);
        link.click();
        //下载完成，重置表格
        this.$nextTick(() => {
          this.refresh();
        });
      });
    },
    uploadExceed(file, fileList) {
      this.$message.error("同时上传文件数目最大为100，请重试");
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    beforeUpload(file) {
      const docxType = [
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        "application/msword",
      ];
      if (!docxType.includes(file.type)) {
        this.$message.error("只能上传类型为.doc/.docx的文件");
        return false;
      }
      const maxSize = 10 * 1024 * 1024; //单个文件最大上传大小10MB
      if (file.size > maxSize) {
        this.$message.error("文件" + file.name + "大小超过10MB");
        return false;
      }
      return true;
      // const isZip = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || file.name.endsWith('.zip');
      // if (!isZip) {
      //   this.$message.error('上传文件只能是 ZIP æ ¼å¼!');
      // }
      // if(isZip){
      //   this.inLoading = true;
      // }
      // return isZip;
    },
    handleSuccess(response) {
      this.inLoading = false;
      if (response.code == 200) {
        this.$message.success("导入成功");
        this.refreshTable();
        this.$refs.upload.clearFiles();
        this.fileList = [];
      } else {
        this.$message.error(response.message);
      }
    },
    onError(err, file, fileList, type) {
      this.$message.error("上传失败");
      this.$refs.upload.clearFiles();
      this.fileList = [];
    },
    refreshTable(e) {
      if (!this.entity.createTimeRange) {
        this.entity.createTimeRange = [];
      }
      this.getList();
      this.getReportCountInfo();
    },
    getReportCountInfo() {
      if (!this.entity.createTimeRange) {
        this.entity.createTimeRange = [];
      }
      console.log("entity", this.entity);
      getReportCountInfo(this.entity)
        .then((res) => {
          this.unSubmitCount = res.data.unSubmitCount;
          this.unRatifyCount = res.data.unRatifyCount;
          this.unExamineCount = res.data.unExamineCount;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    refresh() {
      this.entity = this.HaveJson(this.entityCopy);
      this.upIndex++;
      this.mutiList = [];
      this.getReportCountInfo();
    },
    async handleWeave(row) {
      let fileName = row.urlS === null || row.urlS === "" ? row.url : row.urlS;
      fileName = fileName.replace("/word/", "");
      const userName = this.$store.state.user.name;
      //参考vabOnlyOffice组件参数配置
      const { href } = this.$router.resolve({
        path: `/wordEdit`,
        query: {
          url: this.javaApi + "/word/" + fileName,
          isEdit: true,
          fileType: "docx",
          title: fileName,
          lang: "zh-CN",
          isPrint: true,
          user_id: 1,
          user_name: userName,
          editUrl:
            this.javaApi + "/insReport/onlyOffice/save?fileName=" + fileName,
        },
      });
      window.open(href, "_blank");
    },
    confirmClaim() {
      // console.log(this.$refs.Word.getValue())
    },
    async selectAllByOne(row) {
      const userName = JSON.parse(localStorage.getItem("user")).name;
      //参考vabOnlyOffice组件参数配置
      const { href } = this.$router.resolve({
        path: `/wordEdit`,
        query: {
          url: this.javaApi + "/word/" + row.entrustCode + ".docx",
          isEdit: "false",
          fileType: "docx",
          title: row.entrustCode + ".docx",
          lang: "zh-CN",
          isPrint: true,
          user_id: 1,
          user_name: userName,
        },
      });
      window.open(href, "_blank");
      console.log(`output->row`, row);
    },
    download(row) {
      getReportInfo({ id: row.id, type: 1,suffix:'.docx' }).then((response) => {
        if (response.data && response.data.contentType) {
          downLoad({ id: row.id, type: 1, code: row.code,suffix: '.docx' })
            .then((res) => {
              // èŽ·å–文件名
              const blob = new Blob([res], { type: response.data.contentType });
              const url = URL.createObjectURL(blob);
              let link = document.createElement("a");
              link.href = url;
              link.download = row.code;
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
              URL.revokeObjectURL(url);
            })
            .catch((error) => {
              this.$message.error(error);
            });
        } else {
          this.$message.error("未找到文件");
        }
      });
    },
    // è¿˜åŽŸæ“ä½œ
    handleRestore(row) {
      this.$confirm("是否还原当前报告?", "还原", {
        confirmButtonText: "还原",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          upReportUrl({ id: row.id,type:1 }).then((res) => {
            if (res.code === 200) {
              this.$message.success("操作成功");
              this.refreshTable("page");
            }
          });
        })
        .catch({}());
    },
    handleIssued(row) {
      this.currentInfo = row;
      let fileName = row.urlS === null || row.urlS === "" ? row.url : row.urlS;
      fileName = fileName.replace("/word/", "");
      const userName = JSON.parse(localStorage.getItem("user")).name;
      this.option = {
        url: this.javaApi + "/word/" + fileName,
        isEdit: false,
        fileType: "docx",
        title: fileName,
        lang: "zh-CN",
        isPrint: false,
        user_id: 1,
        user_name: userName,
        editUrl:
          this.javaApi + "/insReport/onlyOffice/save?fileName=" + fileName,
      };
      this.issuedVisible = true;
    },
    // å®¡æ ¸é€šè¿‡
    subIssued() {
      this.loadingIssued = true;
      examineReport({ id: this.currentInfo.id, isExamine: 1 })
        .then((res) => {
          this.loadingIssued = false;
          if (res.code === 201) {
            return;
          }
          this.$message.success("提交成功");
          this.refreshTable("page");
          this.currentInfo = null;
          this.issuedVisible = false;
        })
        .catch((e) => {
          this.$message.error("提交失败");
          this.loadingIssued = false;
        });
    },
    handleApprove(row) {
      this.currentInfo = row;
      let fileName = row.urlS === null || row.urlS === "" ? row.url : row.urlS;
      fileName = fileName.replace("/word/", "");
      const userName = JSON.parse(localStorage.getItem("user")).name;
      this.option = {
        url: this.javaApi + "/word/" + fileName,
        isEdit: false,
        fileType: "docx",
        title: fileName,
        lang: "zh-CN",
        isPrint: false,
        user_id: 1,
        user_name: userName,
        editUrl:
          this.javaApi + "/insReport/onlyOffice/save?fileName=" + fileName,
      };
      this.approveVisible = true;
    },
    // æ‰¹å‡†é€šè¿‡
    subApprove() {
      this.loadingApprove = true;
      ratifyReport({ id: this.currentInfo.id, isRatify: 1 }).then((res) => {
        this.loadingApprove = false;
        if (res.code == 201) {
          this.$message.error("批准失败");
          return;
        }
        this.$message.success("已批准");
        this.refreshTable("page");
        this.currentInfo = null;
        this.approveVisible = false;
      });
    },
    // æäº¤æ“ä½œ
    handleSubmit(row) {
      this.$confirm("是否提交当前报告?", "提交", {
        confirmButtonText: "提交",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          writeReport({ id: row.id })
            .then((res) => {
              if (res.code === 201) {
                return;
              }
              this.$message.success("提交成功");
              this.refreshTable("page");
            })
            .catch((e) => {
              this.$message.error("提交失败");
            });
        })
        .catch(() => {});
    },
    // å®¡æ ¸ä¸é€šè¿‡åŽŸå› æäº¤
    handleIssuedReason() {
      if (!this.reason) {
        return this.$message.error("请输入原因");
      }
      this.loadingIssuedReason = true;
      examineReport({
        id: this.currentInfo.id,
        isExamine: 0,
        examineTell: this.reason,
      })
        .then((res) => {
          this.loadingIssuedReason = false;
          if (res.code === 201) {
            return;
          }
          this.$message.success("操作成功");
          this.refreshTable("page");
          this.currentInfo = null;
          this.reason = "";
          this.issuedVisible = false;
          this.issuedReasonVisible = false;
        })
        .catch((e) => {
          this.$message.error("操作失败");
          this.loadingIssuedReason = false;
        });
    },
    // ä¸æ‰¹å‡†åŽŸå› æäº¤
    handleApproveReason() {
      if (!this.reason) {
        return this.$message.error("请输入原因");
      }
      this.loadingApproveReason = true;
      examineReport({
        id: this.currentInfo.id,
        isRatify: 0,
        ratifyTell: this.reason,
      })
        .then((res) => {
          this.loadingApproveReason = false;
          if (res.code === 201) {
            return;
          }
          this.$message.success("操作成功");
          this.refreshTable("page");
          this.currentInfo = null;
          this.reason = "";
          this.issuedVisible = false;
          this.issuedReasonVisible = false;
        })
        .catch((e) => {
          this.$message.error("操作失败");
          this.loadingIssuedReason = false;
        });
    },
    handleClose() {
      this.withdrawDialogVisible = false;
      this.laboratory = [];
    },
    getStyle() {
      return "height: calc(100% - " + (this.more ? "94" : "44") + "px)";
    },
  },
};
</script>

 src/views/business/reportPreparation/onlyoffice.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,207 @@
<!--onlyoffice ç¼–辑器-->
<template>
    <div id="vabOnlyOffice"></div>
  </template>
  
  <script>
  export default {
    name: "VabOnlyOffice",
    props: ['options'],
    data() {
      return {
        doctype: "",
        docEditor: null,
        //参考vabOnlyOffice组件参数配置
        option: {
          url: "",
          isEdit: false,
          fileType: "",
          title: "",
          lang: "zh-CN",
          isPrint: true,
          user: {},
          editUrl: ""
        }
      };
    },
    created() {
      if(this.options){
        const option = this.options
        this.option.url = option.url
        this.option.isEdit = option.isEdit === "true" ? true : false
        this.option.fileType = option.fileType
        this.option.title = option.title
        this.option.lang = option.lang
        this.option.isPrint = option.isPrint
        this.option.user.id = option.user_id
        this.option.user.name = option.user_name
        this.option.editUrl = option.editUrl
      }else{
        const option = this.$route.query
        this.option.url = option.url
        this.option.isEdit = option.isEdit === "true" ? true : false
        this.option.fileType = option.fileType
        this.option.title = option.title
        this.option.lang = option.lang
        this.option.isPrint = option.isPrint
        this.option.user.id = option.user_id
        this.option.user.name = option.user_name
        this.option.editUrl = option.editUrl
      }
    },
    beforeDestroy() {
      if (this.docEditor !== null) {
        this.docEditor.destroyEditor();
        this.docEditor = null;
      }
    },
    watch: {
      option: {
        handler: function(n) {
          this.setEditor(n);
          this.doctype = this.getFileType(n.fileType);
        },
        deep: true
      }
    },
    mounted() {
      if (this.option.url) {
        this.setEditor(this.option);
      }
    },
    methods: {
      async setEditor(option) {
        if (this.docEditor !== null) {
          this.docEditor.destroyEditor();
          this.docEditor = null;
        }
        this.doctype = this.getFileType(option.fileType);
        let config = {
          document: {
            //后缀
            fileType: option.fileType,
            key: option.key || "",
            title: option.title,
            permissions: {
              edit: option.isEdit, //是否可以编辑: åªèƒ½æŸ¥çœ‹ï¼Œä¼ false
              print: option.isPrint,
              download: false
              // "fillForms": true,//是否可以填写表格，如果将mode参数设置为edit，则填写表单仅对文档编辑器可用。 é»˜è®¤å€¼ä¸Žedit或review参数的值一致。
              // "review": true //跟踪变化
            },
            url: option.url
          },
          documentType: this.doctype,
          editorConfig: {
            callbackUrl: option.editUrl, //"编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置
            lang: option.lang, //语言设置
            //定制
            customization: {
              autosave: true, //是否自动保存
              chat: true,
              comments: false,
              help: false,
              "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 é»˜è®¤å€¼ä¸ºfalse
              //是否显示插件
              plugins: false
            },
            user: {
              id: option.user.id,
              name: option.user.name
            },
            mode: option.model ? option.model : "edit"
          },
          width: "100%",
          height: "100%",
          token: option.token || ""
        };
  
        // eslint-disable-next-line no-undef,no-unused-vars
        this.docEditor = new DocsAPI.DocEditor("vabOnlyOffice", config);
      },
      getFileType(fileType) {
        let docType = "";
        let fileTypesDoc = [
          "doc",
          "docm",
          "docx",
          "dot",
          "dotm",
          "dotx",
          "epub",
          "fodt",
          "htm",
          "html",
          "mht",
          "odt",
          "ott",
          "pdf",
          "rtf",
          "txt",
          "djvu",
          "xps"
        ];
        let fileTypesCsv = [
          "csv",
          "fods",
          "ods",
          "ots",
          "xls",
          "xlsm",
          "xlsx",
          "xlt",
          "xltm",
          "xltx"
        ];
        let fileTypesPPt = [
          "fodp",
          "odp",
          "otp",
          "pot",
          "potm",
          "potx",
          "pps",
          "ppsm",
          "ppsx",
          "ppt",
          "pptm",
          "pptx"
        ];
        if (fileTypesDoc.includes(fileType)) {
          docType = "text";
        }
        if (fileTypesCsv.includes(fileType)) {
          docType = "spreadsheet";
        }
        if (fileTypesPPt.includes(fileType)) {
          docType = "presentation";
        }
        return docType;
      }
    }
  };
  </script>
  
  <style>
  html,
  body {
    height: 100%;
  }
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    height: 100%;
  }
  .qualityManual-container {
    padding: 0 !important;
    height: 100%;
  }
  .qualityManual-container-office {
    width: 100%;
    height: calc(100% - 55px);
  }
  </style>