Linux下Office文档在线预览技术实现与特点

<BaseTable ref="baseTable" :table-url='tableUrl' :auto-search-flag="true" :search-options='searchOptions' :columns='columns' :slot-columns="slotColumns" :call-style='callStyle' :table-event-btn='eventBtnList'> <template #file='{ row }'> <el-button v-if='row.file' type="primary" link @click='reportViewHandler(row)'>查看</el-button> <el-button v-else link>未上传</el-button> </template> <template #think='{ row }'> <el-button v-if='row.think' type="primary" link @click='thinkViewHandler(row)'>查看</el-button> <el-button v-else link>未上传</el-button> </template> <template #eventType="{row}"> {{formatListByKey(eventType,row.eventType)}} </template> <template #maintenanceStatus="{row}"> {{formatListByKey(maintenanceStatus,row.maintenanceStatus)}} </template> <template #isoVersion="{row}"> {{ row.event.isoFileVersion?row.event.isoFileVersion:'--' }} </template> <template #executeTime="{row}"> {{ row.executeTime }} ~ {{ row.executeEndTime }} </template> <template #approvedStatus="{row}"> <el-tag effect="dark" v-if='row.approvedStatus === "0"'>未审核</el-tag> <el-tag effect="dark" v-if='row.approvedStatus === "1"' type="success">审核通过</el-tag> <el-tag effect="dark" v-if='row.approvedStatus === "2"' type="danger">审核驳回</el-tag> </template> <template #action="{row}"> </template> </BaseTable> <el-dialog v-model="reportFormDialog.dialogVisible" :title="reportFormDialog.title" width="40%" class='form-dialog' @close="handleCloseReportFormDialog" style='border-radius: 5px;'> <BaseForm ref='baseReportForm' v-if='reportFormDialog.dialogVisible' :form-options='reportFormDialog.formOptions' :form-modal='reportFormDialog.formModal' :form-rules='reportFormDialog.formRules' @resolve-params='getReportFormDialogParams' > </BaseForm> <template #footer> <el-button @click="handleCloseReportFormDialog">取消</el-button> <el-button type="primary" @click="handleSubmitReportFormDialog">保存</el-button> </template> </el-dialog> <el-dialog v-model="thinkFormDialog.dialogVisible" :title="thinkFormDialog.title" width="60%" class='form-dialog' @close="handleCloseThinkFormDialog" style='border-radius: 5px;'> <BaseForm ref='baseThinkForm' v-if='thinkFormDialog.dialogVisible' :form-options='thinkFormDialog.formOptions' :form-modal='thinkFormDialog.formModal' :form-rules='thinkFormDialog.formRules' @resolve-params='getThinkFormDialogParams' > </BaseForm> <template #footer> <el-button @click="handleCloseThinkFormDialog">取消</el-button> <el-button type="primary" @click="handleSubmitThinkFormDialog">保存</el-button> </template> </el-dialog> <el-dialog v-model="unGeneraldetailDialog.dialogVisible" :title="unGeneraldetailDialog.title" width="60%" class='form-dialog' style='border-radius: 5px;' @close="unGeneraldetailDialog.dialogVisible = false"> <detail-view v-if="unGeneraldetailDialog.dialogVisible" ref="detailViewUnGeneral" :detail-dialog="unGeneraldetailDialog"></detail-view> </el-dialog> <el-dialog v-model="detailDialog.dialogVisible" :title="detailDialog.title" width="60%" class='form-dialog' @close="handleCancelDetail" style='border-radius: 5px;'> <detail-view v-if="detailDialog.dialogVisible" ref="detailView" :detail-dialog="detailDialog"></detail-view> </el-dialog> <el-dialog v-model="formDialog.dialogVisible" :title="formDialog.title" width="40%" @close="handleCloseFormDialog" class='form-dialog' style='border-radius: 5px;'> <BaseForm ref='baseForm' v-if='formDialog.dialogVisible' :form-options='formDialog.formOptions' :form-modal='formDialog.formModal' :form-rules='formDialog.formRules' @resolve-params='getFormDialogParams' > </BaseForm> <template #footer v-if='formDialog.type != "info"'> <el-button @click="handleCloseFormDialog">取消</el-button> <el-button type="primary" @click="handleSubmitFormDialog">保存</el-button> </template> </el-dialog> <el-dialog v-model="approvedDialog.dialogFormVisible" title="PM历史审核" width='500px' style='border-radius: 5px;'> <el-form :model="approvedDialog.form" status-icon ref="ruleFormRef" :rules="approvedDialog.rules"> <el-form-item label="审核状态：" prop='status'> <el-select v-model="approvedDialog.form.status" style='width: 100%' placeholder="Please select a status"> <el-option label="审核通过" value="1" /> <el-option label="审核驳回" value="2" /> </el-select> </el-form-item> <el-form-item label="审核意见：" prop='advise'> <el-input type='textarea' :autosize="{ minRows: 2, maxRows: 4 }" v-model="approvedDialog.form.advise" autocomplete="off" /> </el-form-item> </el-form> <template #footer> <el-button @click="approvedDialog.dialogFormVisible = false">取消</el-button> <el-button type="primary" @click="approvedConfirm"> 确定 </el-button> </template> </el-dialog> <el-dialog v-model="thinkView.thinkViewFlag" title="思考&改进" width="40%" style='border-radius: 5px;'> </el-dialog> <el-dialog v-model="reportView.reportViewFlag" title="报告" width="80%"> <Divider title="PM CheckList 报告" style="margin-bottom: 15px;"></Divider> <Divider title="PM 验证报告" style="margin-bottom: 15px;"></Divider> </el-dialog>