需要在前面添加前缀：data:image/jpeg;base64,然后将值赋值给<img :src="originalImage" />
this.tableLists.map((item)=>{item.originalImage = "data:image/jpeg;base64,"+item.originalImage})
以上方法会导致出现一个小bug，在添加更新列表的时候，上一条数据的图片不显示。如下：
需修改逻辑代码如下：
<el-table-column prop="originalImage" width="120" align="center" label="票据预览"><template #default="scope"><div style="display: flex; align-items: center"><!-- <a :href="scope.row.originalImage" target="_blank"> --><img :src="'data:image/jpeg;base64,'+scope.row.originalImage" alt="" srcset="" slot="reference" style="width: 107px;"/><!-- </a> --></div></template></el-table-column>
在<img>标签上前缀进行动态拼接字段，图像数据即可正常展示。
<template><div id="IntelligentReimbursement" class="scroll-container" style="padding-left: 16px;"><div class="container"><div class="title"><div class="title1"><span><img src="../../assets/fangan@2x.png" alt="" srcset=""></span><span class="titleRight">差旅报销信息</span></div><div class="title2"><!-- <span><img src="../../assets/fangan.png" alt="" srcset=""> --><!-- <el-upload v-model="fileLists"><el-button link type="primary" @click="uploadFile()" style=" margin-right: 8px;">附件上传</el-button></el-upload> --><!-- <img :src="srcUrl" alt="" srcset="" style="width: 100%;height: 100%;"> --><!-- </span> --></div></div><div class="content"><el-form :model="searchParams"ref="FormInfoData"><el-row><el-col :span="8"><el-form-item label="经办人:"><span>{{ '闫主任' }}</span></el-form-item></el-col><el-col :span="8"><el-form-item label="经办人工号:"><span>{{ '20038415' }}</span></el-form-item></el-col><el-col :span="8"><el-form-item label="代报销人工号:"><el-input v-model="searchParams.proxyReimbursementTravelerJobId" placeholder="请输入报销人工号"/></el-form-item></el-col></el-row><el-row><el-col :span="24"><el-form-item label="差旅选项:"><el-checkbox-group v-model="searchParams.checkRadioGroup"><el-checkbox v-for="city in searchParams.radioGroup" :key="city" :label="city" :value="city">{{ city }}</el-checkbox><!-- <el-radio :value="3">关联商旅平台</el-radio><el-radio :value="6">申请差旅补助</el-radio><el-radio :value="9">出差住宿报销</el-radio><el-radio :value="10">新员工入职出差</el-radio> --></el-checkbox-group></el-form-item></el-col></el-row><el-row><el-col :span="8"><el-form-item label="出发地点:"><el-input v-model="searchParams.departure" placeholder="请输入出发地点"/></el-form-item></el-col><el-col :span="8"></el-col><el-col :span="8"><el-form-item label="到达地点:"><el-input v-model="searchParams.arriTripLocation" placeholder="请输入到达地点"/></el-form-item></el-col></el-row><el-row><el-col :span="8"><el-form-item label="起始时间:"><el-input type="date" v-model="searchParams.startTime" placeholder="请输入起始时间"/><!-- <p style=" color: #606266;">（例：日期格式为2024-11-28）</p> --></el-form-item></el-col><el-col :span="8"> </el-col><el-col :span="8"><el-form-item label="结束时间:"><el-input type="date" v-model="searchParams.endTime" placeholder="请输入结束时间"/></el-form-item></el-col></el-row><!-- <el-row><el-col :span="18"><el-form-itemlabel="请仿照示例描述差旅信息:":label-width="labelText + 'px'"><el-inputclass="placeholderTextarea"v-model="searchParams.desInformation"placeholder="本人报销2024年11月3日至11月9日由北京去重庆市出差的差旅票据，本次报销交通费、住宿费用及7天的补助、走部门费用-制造费用、请帮我识别票据信息。"type="textarea"/><p style="color: red;" v-show="isShow">请语音输入需要报销的项目号</p></el-form-item></el-col><el-col :span="1"><img src="../../assets/yuyinshibie@2x.png" alt="" @click="initVoice()" srcset="" style="margin-top: 32px;"></el-col></el-row> --><el-row class="myBottom"><el-col :span="5"><!-- <el-uploadv-model:file-list="fileList"class="upload-demo"action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"multiple:on-preview="handlePreview":on-remove="handleRemove":before-remove="beforeRemove":limit="3":on-exceed="handleExceed"><el-button type="primary">Click to upload</el-button><template #tip><div class="el-upload__tip">jpg/png files with a size less than 500KB.</div></template></el-upload> --><!-- <el-upload ref="ocrupimgupload" action="#" -->
<!-- list-type="text"-->
<!-- :multiple="false"-->
<!-- :on-change="uploadimgChange"-->
<!-- :on-remove="handleRemove"-->
<!-- :on-preview="handlePictureCardPreview"-->
<!-- :auto-upload="false"-->
<!-- :on-success="handleSuccess"-->
<!-- :file-list="imgfileList"-->
<!-- :show-file-list="false"-->
<!-- :before-upload="beforeimglistUpload"-->
<!-- accept=".jpg,.jpeg,.png,.bmp">-->
<!-- -->
<!-- <el-button type="primary">-->
<!-- <img src="../../assets/piaoju@2x.png" alt="" srcset="" class="img-size">-->
<!-- 票据上传-->
<!-- </el-button>-->
<!-- </el-upload>--><div style="position: relative;"><input id="default-btn" type="file" @change="onSelectFile" class="upload-input" style="width: 230px;"><img src="../../assets/piaoju@2x.png" alt="" style="position: absolute; bottom: 28%; right: 78%;"></div><!-- <input type="file" @change="uploadPic"> --></el-col><el-col :span="3"></el-col><el-col :span="5"><el-button type="primary" @click="infoConfirm" ><img src="../../assets/gongdanqueren@2x.png" alt="" srcset="" class="img-size" >信息确认</el-button></el-col></el-row></el-form></div></div><div class="container"><div class="title"><div class="title1"><span><img src="../../assets/guanlianshengchengpingzheng@2x.png" alt="" srcset=""></span><span class="titleRight">商旅出差申请单详情</span></div></div><div class="content2" style="padding: 28px 30px;"><el-table:data="tableDatas"style="width: 100%":header-cell-style="{background: '#ECF3FF',color: '#027DDD',height: '35px',}":row-style="{ height: 12 + 'px' }"border><el-table-columnprop="businessTravelerName"label="出差人"align="center"></el-table-column><!-- <el-table-columnprop="xxx"label="出发城市"align="center"></el-table-column> --><el-table-columnprop="destination"label="出差城市"align="center"></el-table-column><el-table-columnprop="actualStartTime"label="出发日期"align="center"></el-table-column><el-table-columnprop="actualEndTime"label="返回日期"align="center"></el-table-column><el-table-columnlabel="交通工具"align="center"><template #default="scope"><span>{{ scope.row.transportation }}</span><!-- <el-tag effect="dark" type="success">{{ scope.row.transportation }}</el-tag> --></template></el-table-column><!-- <el-table-columnprop="xxx"label="出差类别"align="center"></el-table-column> --><el-table-columnprop="purpose"label="出差事由"align="center"width="270"></el-table-column></el-table></div></div><div class="container"><div class="title"><div class="title1"><span><img src="../../assets/xinxitianxie@2x.png" alt="" srcset=""></span><span class="titleRight">报销项目信息详情</span></div></div><div class="content2" style="padding: 28px 23px;"><el-form :model="searchParams2" ><el-row ><el-col><el-form-item label="出差目的：" :label-width="labelText + 'px'" ><el-input placeholder="出差目的" v-model="searchParams2.PurBusTrip" type="textarea"></el-input></el-form-item></el-col></el-row><el-row style="margin-top: 15px;"><el-col :span="10"><el-form-item label="WBS编号：" :label-width="labelText + 'px'" ><el-select v-model="searchParams2.WbsNumber" placeholder="WBS编号" @change="changeWBS"><el-optionv-for="item in wbsLists":key="item":label="item":value="item"/></el-select></el-form-item></el-col><el-col :span="4"></el-col><el-col :span="10"><el-form-item label="订单号：" :label-width="labelText + 'px'" ><el-select v-model="searchParams2.OrderNo" placeholder="订单号" @change="changeDDH"><el-optionv-for="item in ddLists":key="item":label="item":value="item"/></el-select></el-form-item></el-col></el-row><el-row style="margin-top: 15px;"><el-col :span="10"><el-form-item label="成本中心：" :label-width="labelText + 'px'" ><!-- <el-input placeholder="成本中心" v-model="searchParams2.costCenter"></el-input> --><el-select v-model="searchParams2.costCenter" placeholder="成本中心" @change="changecb"><el-optionv-for="item in cbLists":key="item":label="item":value="item"/></el-select></el-form-item></el-col><el-col :span="4"></el-col><el-col :span="10"><el-form-item label="利润中心：" :label-width="labelText + 'px'" ><!-- <el-input placeholder="利润中心" v-model="searchParams2.profitCenter"></el-input> --><el-select v-model="searchParams2.profitCenter" placeholder="利润中心" @change="changelr"><el-optionv-for="item in lrLists":key="item":label="item":value="item"/></el-select></el-form-item></el-col></el-row></el-form></div></div><div class="container" style="height: 729px;"><div class="title"><div class="title1"><span><img src="../../assets/mingxi@2x.png" alt="" srcset=""></span><span class="titleRight">差旅费用明细</span></div></div><div class="content2" style="padding: 28px 23px;height: 620px;"><el-table:data="tableLists"height="560"style="width: 100%":header-cell-style="{ background: '#ECF3FF', color: '#027DDD',height: '45px', }":row-style="{ height: 12 + 'px' }"@cell-dblclick="tableDbEdit":row-class-name="tableRowClassName"><!-- 拓展展开开始 --><el-table-column type="expand" width="0"><template #default="props"><div class="m4_con"><!-- <div class="title_con"><p m="t-0 b-2">1. 项目资产费用情况说明书已填写完整</p><span style="margin-left:20px">✅</span></div><p m="t-0 b-2">2. 项目资产费用情况说明书填写缺失 <span style="color:red;margin-left:20px">❌</span><span style="margin-left:25px">建议：请补充发票金额数据内容。</span></p> --><p m="t-0 b-2" ><span id="errorText">x</span>发票提前开具。 <span class="ml_20">建议：请上传提前开具发票的说明。<!-- {{ props.row.city }} --></span></p><p m="t-0 b-2" ><span id="errorText">x</span>发票抬头错误。<span class="ml_20"><!-- {{ props.row.city }} -->建议：请重新开具住宿费发票并上传。</span></p></div></template></el-table-column><!-- 拓展展开结束 --><el-table-column type="index" width="80" align="center" label="序号" /><el-table-column prop="originalImage" width="120" align="center" label="票据预览"><template #default="scope"><div style="display: flex; align-items: center"><!-- <a :href="scope.row.originalImage" target="_blank"> --><img :src="'data:image/jpeg;base64,'+scope.row.originalImage" alt="" srcset="" slot="reference" style="width: 107px;"/><!-- </a> --></div></template></el-table-column><el-table-column align="center" prop="invoiceType" width="160" show-overflow-tooltip label="发票类型"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.invoiceType"placeholder="发票类型"></el-input><span v-else>{{ scope.row.invoiceType }}</span></template></el-table-column><el-table-columnprop="ticketAmount"align="center"width="160"label="交通费用金额 (元)"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.ticketAmount"placeholder="交通费用金额"></el-input><span v-else>{{ scope.row.ticketAmount }}</span></template></el-table-column><el-table-column prop="invoiceAmount" width="160" align="center" label="发票金额 (元)"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.invoiceAmount"placeholder="发票金额"></el-input><span v-else>{{ scope.row.invoiceAmount }}</span></template></el-table-column><el-table-column prop="deductibleInvoiceAmountExcludingTax" align="center" width="180" label="抵扣发票的不含税金额 (元)"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.deductibleInvoiceAmountExcludingTax"placeholder="抵扣发票的不含税金额"></el-input><span v-else>{{ scope.row.deductibleInvoiceAmountExcludingTax }}</span></template></el-table-column><!-- <el-table-column prop="civilAviationDevelopmentFund" align="center" width="160" label="民航发展基金"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.civilAviationDevelopmentFund"placeholder="民航发展基金"></el-input><span v-else>{{ scope.row.civilAviationDevelopmentFund }}</span></template></el-table-column> --><!-- <el-table-column prop="deductibleInvoiceTaxAmount" align="center" width="160" label="抵扣发票的税额 (元)"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.deductibleInvoiceTaxAmount"placeholder="抵扣发票的税额"></el-input><span v-else>{{ scope.row.deductibleInvoiceTaxAmount }}</span></template></el-table-column> --><el-table-column prop="startDate" align="center" width="160" label="开始日期"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.startDate"placeholder="开始日期"></el-input><span v-else>{{ scope.row.startDate }}</span></template></el-table-column><el-table-column prop="departureLocation" align="center" width="160" label="出发地点"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.departureLocation"placeholder="出发地点"></el-input><span v-else>{{ scope.row.departureLocation }}</span></template></el-table-column><el-table-column prop="endDate" align="center" width="160" label="结束日期"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.endDate"placeholder="结束日期"></el-input><span v-else>{{ scope.row.endDate }}</span></template></el-table-column><el-table-column prop="arrivalLocation" align="center" width="160" label="到达地点"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.arrivalLocation"placeholder="费用项目"></el-input><span v-else>{{ scope.row.arrivalLocation }}</span></template></el-table-column><!-- <el-table-column prop="fuelSurcharge" align="center" width="160" label="燃油附加费 (元)"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.fuelSurcharge"placeholder="燃油附加费"></el-input><span v-else>{{ scope.row.fuelSurcharge }}</span></template></el-table-column> --><!-- 从这里开始 --><!-- <el-table-column prop="invoiceTaxCode" align="center" width="160" label="税码"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.invoiceTaxCode"placeholder="税码"></el-input><span v-else>{{ scope.row.invoiceTaxCode }}</span></template></el-table-column> -->
<!-- <el-table-column prop="startDate" align="center" width="160" label="开始日期"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.startDate"placeholder="开始日期"></el-input><span v-else>{{ scope.row.startDate }}</span></template></el-table-column><el-table-column prop="departureLocation" align="center" width="160" label="出发地点"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.departureLocation"placeholder="出发地点"></el-input><span v-else>{{ scope.row.departureLocation }}</span></template></el-table-column><el-table-column prop="endDate" align="center" width="160" label="结束日期"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.endDate"placeholder="结束日期"></el-input><span v-else>{{ scope.row.endDate }}</span></template></el-table-column><el-table-column prop="arrivalLocation" align="center" width="160" label="到达地点"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.arrivalLocation"placeholder="费用项目"></el-input><span v-else>{{ scope.row.arrivalLocation }}</span></template></el-table-column> --><el-table-column prop="seat" align="center" width="160" label="座次"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.seat"placeholder="结束日期"></el-input><span v-else>{{ scope.row.seat }}</span></template></el-table-column><!-- 按照系统新增字段属性值开始 -->
<!-- <el-table-column prop="endDate" align="center" width="160" label="交通工具">-->
<!-- <template #default="scope">-->
<!-- <el-input-->
<!-- v-if="scope.row.edit"-->
<!-- v-model="scope.row.fuelSurcharge"-->
<!-- placeholder="交通工具"-->
<!-- ></el-input>-->
<!-- <span v-else>{{ scope.row.fuelSurcharge }}</span>-->
<!-- </template>-->
<!-- </el-table-column>--><!-- <el-table-column prop="endDate" align="center" width="160" label="报销天数">-->
<!-- <template #default="scope">-->
<!-- <el-input-->
<!-- v-if="scope.row.edit"-->
<!-- v-model="scope.row.fuelSurcharge"-->
<!-- placeholder="费用项目"-->
<!-- ></el-input>-->
<!-- <span v-else>{{ scope.row.fuelSurcharge }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="endDate" align="center" width="160" label="住宿城市">-->
<!-- <template #default="scope">-->
<!-- <el-input-->
<!-- v-if="scope.row.edit"-->
<!-- v-model="scope.row.fuelSurcharge"-->
<!-- placeholder="费用项目"-->
<!-- ></el-input>-->
<!-- <span v-else>{{ scope.row.fuelSurcharge }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <!– 按照系统新增字段属性值结束 –>--><el-table-column prop="Remarks" label="*特殊情况说明" align="center" min-width="280" ><template #default="scope"><!-- <div @click="showOverflowTooltip"> --><!-- scope.row.edit --><el-inputv-if="scope.row.edit"v-model="scope.row.Remarks"style="width: 220px"placeholder="请填写异常信息"/><!-- <span id="bzTextInfo" v-else>{{showEditTextContent}}</span> --><span id="bzTextInfo" v-if="showEditTextContent">{{scope.row.Remarks}}</span><!-- <el-button link type="primary" size="small" @click="addFaceDB('edit',scope.row)"></el-button><el-button link type="primary" size="small" @click="deleteItem(scope.row)"></el-button> --><!-- </div> --></template></el-table-column><!-- 按照系统新增末尾字段属性值开始 --><!-- <el-table-column prop="endDate" align="center" width="160" label="成本中心"></el-table-column><el-table-column prop="endDate" align="center" width="160" label="业务类型"></el-table-column><el-table-column prop="endDate" align="center" width="160" label="内部订单"></el-table-column><el-table-column prop="endDate" align="center" width="160" label="WBS元素"></el-table-column><el-table-column prop="endDate" align="center" width="160" label="报销标准"></el-table-column><el-table-column prop="endDate" align="center" width="160" label="是否超标"></el-table-column><el-table-column prop="endDate" align="center" width="160" label="是否关联商旅"></el-table-column> --><!-- 按照系统新增末尾字段属性值结束 --><el-table-column label="操作栏" align="center" fixed="right" min-width="180" ><template #default="scope"><!-- <el-button type="primary" :icon="Edit" @click="editInfoCon(scope.$index,scope.row,'编辑')">{{ textBtn }}</el-button> --><el-button type="primary" :icon="Edit" circle :disabled="scope.row.edit" @click="editInfoCon(scope.$index,scope.row)"></el-button><el-button type="primary" :icon="Check" circle :disabled="!scope.row.edit" @click="saveInfoCon(scope.$index,scope.row)"></el-button><!-- <el-popconfirm title="确定删除吗?"><template #reference><el-button type="danger" :icon="Delete" circle @click="deleteInfoCon(scope.$index,scope.row)"></el-button></template></el-popconfirm> --><el-button type="danger" :icon="Delete" circle @click="deleteInfoCon(scope.$index,scope.row)"></el-button></template></el-table-column></el-table><el-row style="margin-top: 28px;"><el-col><el-button @click="cancelAllPageCon">取消</el-button><el-button type="primary" @click="confirmAllPageCon" style="margin-left: 65px;">确定</el-button></el-col></el-row></div></div><div class="dialog"><el-dialog title="请确认报销信息" v-model="dialogVisible"><el-tablev-loading="loadingTable"element-loading-text="AI正在根据您的描述生成中，请稍等...":element-loading-spinner="svg"element-loading-svg-view-box="-10, -10, 50, 50"element-loading-background="rgba(236, 243, 255, 0.8)":data="confirmInfoLists"default-expand-allheight="380"style="width: 100%":header-cell-style="{ background: '#ECF3FF', color: '#027DDD',height: '45px', }":row-style="{ height: 12 + 'px' }"><el-table-column type="index" width="120" align="center" label="序号" /><el-table-column prop="startTime" width="160" align="center" label="开始日期"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.startTime"placeholder="费用项目"></el-input><span v-else>{{ scope.row.startTime }}</span></template></el-table-column><el-table-column prop="endTime" align="center" width="160" label="结束日期"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.endTime"placeholder="费用项目"></el-input><span v-else>{{ scope.row.endTime }}</span></template></el-table-column><el-table-column prop="invoiceType" align="center" width="160" label="票据类型"><!-- <template #default="scope"><el-tag effect="dark" type="primary">{{ scope.row.invoiceType }}</el-tag></template> --><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.invoiceType"placeholder="费用项目"></el-input><span v-else>{{ scope.row.invoiceType }}</span></template></el-table-column><el-table-column prop="destination" align="center" width="160" label="地点"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.destination"placeholder="费用项目"></el-input><span v-else>{{ scope.row.destination }}</span></template></el-table-column><el-table-column prop="expenseType" align="center" width="160" label="费用类型"><template #default="scope"><el-inputv-if="scope.row.edit"v-model="scope.row.expenseType"placeholder="费用项目"></el-input><span v-else>{{ scope.row.expenseType }}</span></template></el-table-column><el-table-column label="操作栏" align="center" min-width="180" fixed="right"><template #default="scope"><!-- <el-button type="primary" :icon="Edit" @click="editInfoCon(scope.$index,scope.row,'编辑')">{{ textBtn }}</el-button> --><el-button type="primary" :icon="Edit" circle :disabled="scope.row.edit" @click="editDiaInfo(scope.$index,scope.row)"></el-button><el-button type="primary" :icon="Check" circle :disabled="!scope.row.edit" @click="saveDiaInfo(scope.$index,scope.row)"></el-button><el-button type="danger" :icon="Delete" circle @click="deletediaInfo(scope.$index,scope.row)"></el-button></template></el-table-column></el-table><el-row><el-col :span="12" type="cancel">取消</el-col><el-col :span="12" type="primary" @click="submitCon">确认</el-col></el-row><!-- <el-form :model="searchParams_info"ref="FormInfoData" class="dialog-form"><el-row><el-col :span="24" style="margin-top: 14px;"><el-form-itemlabel="报销起始时间:":label-width="dialogLabelText + 'px'"><el-date-pickerv-model="searchParams_info.startTime"type="date"placeholder="请选择"size="large"/></el-form-item></el-col></el-row><el-row><el-col :span="24"><el-form-itemlabel="报销结束时间:":label-width="dialogLabelText + 'px'"><el-date-pickerv-model="searchParams_info.endTime"type="date"placeholder="请选择"size="large"/></el-form-item></el-col></el-row><el-row><el-col :span="18"><el-form-itemlabel="出差地点:":label-width="dialogLabelText + 'px'"><el-inputv-model="searchParams_info.destination"placeholder="请输入出差地点（例如：上海）"size="large"clearable/></el-form-item></el-col></el-row><el-row><el-col :span="18"><el-form-itemlabel="票据类型:":label-width="dialogLabelText + 'px'"><el-select v-model="searchParams2.destination" placeholder="请选择票据类型" @change="changeDes" size="large"><el-optionv-for="item in destinationLists":key="item.dep":label="item.dep":value="item.dep"/></el-select></el-form-item></el-col></el-row><el-row><el-col :span="18"><el-form-itemlabel="费用类型:":label-width="dialogLabelText + 'px'"><el-select v-model="searchParams2.expenseType" placeholder="请选择费用类型" @change="changeExp" size="large"><el-optionv-for="item in expenseTypeLists":key="item.dep":label="item.dep":value="item.dep"/></el-select></el-form-item></el-col></el-row><el-row style="margin-top: 28px;"><el-col><el-button>取消</el-button><el-button type="primary" style="margin-left: 65px;">确定</el-button></el-col></el-row></el-form> --></el-dialog></div></div></template><script setup>import {Check,Delete,Edit,Message,Search,Star,
} from '@element-plus/icons-vue'import { reactive, ref, onBeforeMount, onMounted, watch, nextTick } from "vue";import { ElMessage } from "element-plus";import axios from 'axios';</script><script>import noAttUploadRecognition from "./../noAttUploadRecognition/index.vue";// import voice from '../../apis/commons/ai_voice.adv'import VoiceStreamer from "../../../public/ai_voice.adv.es6.js";
import { fa } from "element-plus/es/locale/index.mjs";export default {name: "IntelligentReimbursement",components: { noAttUploadRecognition },props:{prop:{type: String,default: "这是外部属性没传时的默认值",required: false}},watch: {// // 监听内部属性的变化// inside_prop:{// handler(inside_prop_new){// // 将外部的属性更新// this.$emit('update:prop',inside_prop_new);// },// deep: true,// immediate: true// },// 监听外部属性的变化prop: {handler(jsonString) {// 更新内部的属性try {// this.inside_prop = outside_prop_new;let jsonObj = JSON.parse(jsonString);this.searchParams.departure = jsonObj.departure;//出发地点this.searchParams.arriTripLocation = jsonObj.destination;//到达地点this.searchParams.startTime = jsonObj.startTime;//起始时间this.searchParams.endTime = jsonObj.endTime;//结束时间//this.searchParams.checkRadioGroup = [];if(jsonObj.isLinkedToBusinessTravelPlatform){//是否关联商旅平台this.searchParams.checkRadioGroup.push("关联商旅平台");}if(jsonObj.isApplyingForTravelAllowance){//是否申请差旅补助this.searchParams.checkRadioGroup.push("申请差旅补助");}if(jsonObj.isOvernightStayReimbursement){//是否为加班住宿报销this.searchParams.checkRadioGroup.push("出差住宿报销");}// debuggerif(jsonObj.isNewEmployeeOnboardingTrip){//是否为新员工入职出差this.searchParams.checkRadioGroup.push("新员工入职出差");}if(jsonObj.isProxyReimbursement){//是否代报销this.searchParams.proxyReimbursementTravelerJobId = jsonObj.proxyReimbursementTravelerJobId;}else{this.searchParams.proxyReimbursementTravelerJobId = "";}// jsonObj.isLinkedToBusinessTravelPlatform :"" as boolean, //是否关联商旅平台// jsonObj.isApplyingForTravelAllowance : "" as boolean, //是否申请差旅补助// jsonObj.isOvernightStayReimbursement : "" as boolean, //是否为加班住宿报销// jsonObj.isNewEmployeeOnboardingTrip : "" as boolean, //是否为新员工入职出差// jsonObj.isProxyReimbursement : "" as boolean, //是否代报销// jsonObj.proxyReimbursementTravelerJobId : "", //实际出差报销人员工号}catch (e) {}},deep: true,immediate: true},},data() {return {loadingTable:true, //请确认报销信息LoadingconfirmInfoLists:[], //二次弹窗-请确认报销信息数据srcUrl:'',textBtn:'编辑',//编辑按钮tableLists:[],//差旅费用明细dialogLabelText:230,searchParams_info:{},dialogVisible:false,//弹窗isShow:false, //是否显示重新识别（red）// fileLists:[],//上传文件地址labelText:180,// voiceStreamer:null, //音频播放器// InfoFilling:{}, //报销项目信息详情showTable: false,tableDatas: [], // 出差申请单详情// acticeText_sl: "否", //是否关联商旅平台// ApplyTravelAllowance: "否", //申请差旅补助// acticeText_dbx: "否", //是否为代报销// active_OveAccReim: "否", //是否为加班住宿报销// active_newPerson: "否", //是否为新员工入职出差searchParams: {// radioGroup:3,checkRadioGroup:[],radioGroup:['关联商旅平台','申请差旅补助','出差住宿报销','新员工入职出差'],departure:'' ,//出发地点arriTripLocation:'', //到达地点startTime:'', //起始时间endTime:'', //结束时间proxyReimbursementTravelerJobId:'20079205'// desInformation: "这是2023年1月3日至1月8日去天津和北京出差的差旅票据，本次报销北京3日和5日的火车票、4日的打车票，天津6日和8日的火车票、6日到7日的住宿票，请帮我识别", //描述差旅信息// isRelated: false, //是否关联商旅平台// isReiAgent: false, //请选择是否代报销// ActBusReimbursementName: "", //实际出差报销人员姓名// applyTravelSubsidy: false, //是否申请差旅游补助// OveAccReimbursement: false, // 加班住宿报销// NewEmBusinessTripsJoining: false, // 新员工入职出差},searchParams2:{PurBusTrip:'',//出差目的WbsNumber:'20079205',//WBS编号OrderNo:'', //订单号costCenter:'', //成本中心profitCenter:'', //利润中心},wbsLists:[],ddLists:[],cbLists:[], //成本中心lrLists:[], //利润中心status: false,imgfileList:[], //上传文件图片地址 };},mounted(){//this.voiceStreamer = new VoiceStreamer(this.myCallVoiceText);// setTimeout(()=>{// this.getTableData()// },3000)},created(){},methods: {addRow(index,newRow){this.tableLists.splice(index+1,0,newRow)},//上传图片uploadPic(){},submitCon(){this.infoConfirm()},tableRowClassName({row,rowIndex}){// console.log(row,rowIndex,'aaaa');if(rowIndex==0){// this.tableListsreturn 'warning-row'}},//确认整体界面娇艳confirmAllPageCon(){ElMessage({message:'已提交至财务报账体统',type:"success",duration:5000,showClose: true,})location.reload();},//取消整体界面娇艳cancelAllPageCon(){ElMessage({message:'已取消填报',type:"success",duration:5000,showClose: true,})},//二次确定操作栏deletediaInfo(index,row){this.confirmInfoLists.splice(index, 1)},saveDiaInfo(index,row){row.edit = false},editDiaInfo(index,row){row.edit = true},/*** * @param index 以下为费用明细操作栏处理* @param row *///删除某条数据deleteInfoCon(index,row){this.tableLists.splice(index, 1)},//保存数据saveInfoCon(index,row){row.edit = false// this.tableLists={// ...row// }console.log(index,row,this.tableLists,'看看保存状态');},//编辑行数据editInfoCon(index,row){row.edit = trueconsole.log(index,row,'看看编辑状态');},//编辑表格tableDbEdit(row, column, cell, event){},//上传成功后的函数// handleSuccess(response, file, fileList){// // 如果需要上传// this.getTableData()// console.log(file);// // debugger// this.convertToBase64(file.raw).then(base64 => {// console.log(base64);// // 在这里你可以使用base64数据，例如可以将其设置到某个数据属性上// });// },// //预览图片// handlePictureCardPreview(file){// alert(file)// // file.url 复制给预览图img// // this.srcUrl = file.url// },//获取差旅费用明细数据getTableData(img){axios({method:"POST",url:'/api/ocr/base64',data:{image_base64:img.image_baae64},headers: {'Content-Type': 'application/json'}}).then(res=>{this.$nextTick(()=>{this.tableLists.push(res.data);// this.tableLists.forEach((item)=>{// item.originalImage = "data:image/jpeg;base64,"+item.originalImage// })console.log(this.tableLists,'lokkkkk');})})},//票据上传onSelectFile(event) {// debuggerconst file = event.target.files[0];if (!file) {return;}const reader = new FileReader();reader.onload = (e) => {// debuggervar face64 = e.target.result;var pos = face64.indexOf(';base64,');face64 = face64.substr(pos + ';base64,'.length)var image = {"image_baae64": face64};this.getTableData(image);};reader.readAsDataURL(file);},// change事件 每次选择文件后触发的事件uploadimgChange(file, fileList){// debuggerthis.imgfileList.push(file)// // 如果需要上传// this.getTableData()// let fileFormData = new FormData();// fileFormData.append('file', file);// axios({// method:"get",// url:'api/ocr/1',// headers: {// 'Content-Type': 'multipart/form-data'// },// data: fileFormData,// }).then((res) => {// // console.log(res);// })},// 删除某个已上传的图片handleRemove(file, fileList){this.imgfileList.splice(index, 1)},//上传附件部分// uploadFile(){// const formData = new FormData();// formData.append("file", this.fileLists)// // console.log(this.fileLists,'aaaa');// axios({// method:"get",// url:'api/ocr/1',// data:formData// }).then(res=>{// this.searchParams.desInformation = res.data// ElMessage({// message:'已成功上传附件',// type:"success",// duration:5000,// showClose: true,// })// })// },// myCallVoiceText(text){// var content=this.searchParams.desInformation;// content+=text;// this.searchParams.desInformation = content;// },//获取出差申请单详情getTravelApplyDetail(){axios({method:"GET",url:'/api/oa/11688356',// params:{// id:'11688356'// }}).then(res=>{res.data.travelRequestData.businessTravelerName = res.data.businessTravelerNamethis.tableDatas= [res.data.travelRequestData]console.log(res.data.travelRequestData,this.tableDatas,'this.tableDatas');})},initVoice() {// this.voiceStreamer.StartOrStopVoice('ws://localhost:31206/ws/app/chrome');},infoConfirm() {// debugger//出发地点if(this.searchParams.departure === ""){ElMessage({message: "请填写出发地点",type: "error",duration: 5000,showClose: true,});return ;}//到达地点if(this.searchParams.destination === ""){ElMessage({message: "请填写到达地点",type: "error",duration: 5000,showClose: true,});return ;}//起始时间if(this.searchParams.startTime === ""){ElMessage({message: "请填写起始时间",type: "error",duration: 5000,showClose: true,});return ;}//结束时间if(this.searchParams.endTime === ""){ElMessage({message: "请填写结束时间",type: "error",duration: 5000,showClose: true,});return ;}/*this.searchParams.departure = jsonObj.departure;this.searchParams.arriTripLocation = jsonObj.destination;//到达地点this.searchParams.startTime = jsonObj.startTime;//起始时间this.searchParams.endTime = jsonObj.endTime;//结束时间//this.searchParams.checkRadioGroup = [];if(jsonObj.isLinkedToBusinessTravelPlatform){//是否关联商旅平台this.searchParams.checkRadioGroup.push("关联商旅平台");}if(jsonObj.isApplyingForTravelAllowance){//是否申请差旅补助this.searchParams.checkRadioGroup.push("申请差旅补助");}if(jsonObj.isOvernightStayReimbursement){//是否为加班住宿报销this.searchParams.checkRadioGroup.push("出差住宿报销");}debuggerif(jsonObj.isNewEmployeeOnboardingTrip){//是否为新员工入职出差this.searchParams.checkRadioGroup.push("新员工入职出差");}if(jsonObj.isProxyReimbursement){//是否代报销this.searchParams.proxyReimbursementTravelerJobId = jsonObj.proxyReimbursementTravelerJobId;}else{this.searchParams.proxyReimbursementTravelerJobId = "";}*//*return;//以下为旧代码。保留不用console.log(this.searchParams,'信息填写参数');if(this.searchParams.desInformation=='') {this.isShow = true// this.dialogVisible = true// ElMessage({// message: "请填写差旅信息",// type: "error",// duration: 5000,// showClose: true,// });return false;}else{this.isShow = falsethis.dialogVisible = false //二次确认弹窗校验let searchParams = JSON.stringify({// invoiceText:this.searchParams.desInformationinvoiceText:'请仿照示例描述出差信息:本人2024年11月3日至11月9日去重庆市出差的差旅票据，本次报销交通费、住宿费用及7天的补助'})// axios.post('http://10.54.69.209:25001/text/', searchParams,{// headers: {// 'Content-Type': 'application/json'// }// }).then(res=>{// alert(res,'aaa')// })axios({method:"POST",url:'http://10.54.69.209:25001/text/',data:searchParams,headers: {'Content-Type': 'application/json'}}).then(res=>{if(res){this.loadingTable = false// this.confirmInfoLists=res.data}let handlerData = json.dumps(res)console.log(handlerData,'aaaabbbbbcccc');console.log(JSON.parse(res),res,'lookkk');})// return}this.$refs["FormInfoData"].validate((valid) => {// debuggerif (valid) {*/this.getTravelApplyDetail()//提交表单 接口数据信息 接口文档中-八、查询数据湖/BW财务数据（WBS编号和订单号、一个接口包含项目信息5个字段值）// let url='http://10.129.182.23:8080/api/dataLake/1'axios({method:"GET",url:'/api/dataLake/'+JSON.stringify(this.searchParams2),// params:this.searchParams}).then(res=>{// debuggerif(res.status==200 && res.data){//出差目的 WBS编号 订单号 成本中心 利润中心// debugger// this.searchParams2={this.searchParams2.PurBusTrip=res.data.purpose //出差目的this.searchParams2.WbsNumber=res.data.wbsids[0]//WBS编号this.searchParams2.OrderNo=res.data.internalOrderIds[0] //订单号this.searchParams2.costCenter=res.data.travelerCostCenters[0] //成本中心this.searchParams2.profitCenter=res.data.travelerProfitCenters[0] //利润中心// }this.wbsLists=res.data.wbsidsthis.ddLists=res.data.internalOrderIdsthis.cbLists = res.data.travelerCostCenters //成本中心this.lrLists = res.data.travelerProfitCenters //利润中心// this.getUserInfo()ElMessage({message:'已成功提交信息',type:"success",duration:5000,showClose: true,})}}) .catch((err) => {// ElMessage({// message: "数据保存失败，请重试。",// type: "error",// });});// console.log(valid, "提交成功");// } else {// ElMessage({// message:'信息不正确，请检查后再次信息确认',// type:"success",// duration:5000,// showClose: true,// })// }// );//提交成功后显示表格this.showTable=!this.showTable},/*** * acticeText_sl: '否', //是否关联商旅平台-ApplyTravelAllowance:'否', //申请差旅补助-acticeText_dbx: '否', //是否为代报销-active_OveAccReim:'否', //是否为加班住宿报销active_newPerson:'否', //是否为新员工入职出差*/},};</script><style scoped lang="less">#bzTextInfo{color: red;}.m4_con p{font-weight: 400;}
.ml_20{margin-left: 20px;
}
#errorText{width: 18px;height: 18px;background-color: red;color: #ffffff;font-size: 14px;margin: 0 20px;font-weight: 800;display: inline-block;border-radius: 50%;text-align: center;line-height: 18px;
}#default-btn::file-selector-button{padding: 6px 42px;/*padding-left: 8px;*/background-color: #0B6CF8;border: 1px solid #0B6CF8;border-radius: 3px;cursor: pointer;color: #fff;font-size: 16px;font-weight: 500;width:130px;}#default-btn{font-size: 0;}.m4_con{// padding:20px 68px;padding: 0 92px;// background-color: #FFF1F1;border: 2px solid #ED1D1D;
}.scroll-container{// height: 1800px; /* 模拟长内容 */overflow-y: scroll;}.container {background-color: #fff;margin: 18px 13px;// height: 2308px;border-radius: 7px;}.title{display: flex;justify-content: space-between;border-bottom: 1px solid #E8E8E8;height: 48px;line-height: 48px;}.content{// padding: 54px 48px;padding: 35px 48px;}.title1{// display: flex;display: flex;.titleRight{font-weight: 800;font-size: 15px;}}img{width: 18px;margin-right: 10px;margin-top: 14px;margin-left: 24px;}
.myBottom{margin-left: 328px;// margin-top: 38px;// display: flex;// justify-content: center;// margin-top: 38px;button{// width: 240px;// height: 38px;// font-size: 18px;// width: 156px;height: 36px;font-size: 16px;// margin-left: 265px;background: #0B6CF8;border: 1px solid #0B6CF8;}
}
// .dialog {
// background-color: pink;
// // background: url(../../assets/bg.png) no-repeat center !important;
// // background-size: cover;
// // background-position: center;
// }// 文件管理对话框
/deep/ .el-dialog {background: transparent;background-image: url("../../assets/bg.png");background-size: cover;height: 60vh;
}
/deep/ .el-dialog__title, .el-dialog__headerbtn .el-dialog__close{color: #027DDD;font-weight: 800;font-size: 20px;
}.dialog-form{// border: 1px solid #027DDD;border-radius: 8px;padding-top: 10px 48px;
}.el-table .borderColor{border:1px solid red !important;}.img-size{margin-left: 0;margin-top: 0;
}</style> 
