需要在前面添加前缀：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-item
label="请仿照示例描述差旅信息:"
:label-width="labelText + 'px'"
>
<el-input
class="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-upload
v-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-column
prop="businessTravelerName"
label="出差人"
align="center"
></el-table-column>
<!-- <el-table-column
prop="xxx"
label="出发城市"
align="center"
></el-table-column> -->
<el-table-column
prop="destination"
label="出差城市"
align="center"
></el-table-column>
<el-table-column
prop="actualStartTime"
label="出发日期"
align="center"
></el-table-column>
<el-table-column
prop="actualEndTime"
label="返回日期"
align="center"
></el-table-column>
<el-table-column
label="交通工具"
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-column
prop="xxx"
label="出差类别"
align="center"
></el-table-column> -->
<el-table-column
prop="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-option
v-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-option
v-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-option
v-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-option
v-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-input
v-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="ticketAmount"
align="center"
width="160"
label="交通费用金额 (元)"
>
<template #default="scope">
<el-input
v-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-input
v-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-input
v-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-input
v-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-input
v-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-input
v-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-input
v-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-input
v-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-input
v-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-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="invoiceTaxCode" align="center" width="160" label="税码">
<template #default="scope">
<el-input
v-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-input
v-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-input
v-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-input
v-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-input
v-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-input
v-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-input
v-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-table
v-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-all
height="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-input
v-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-input
v-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-input
v-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-input
v-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-input
v-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-item
label="报销起始时间:"
:label-width="dialogLabelText + 'px'"
>
<el-date-picker
v-model="searchParams_info.startTime"
type="date"
placeholder="请选择"
size="large"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item
label="报销结束时间:"
:label-width="dialogLabelText + 'px'"
>
<el-date-picker
v-model="searchParams_info.endTime"
type="date"
placeholder="请选择"
size="large"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="18">
<el-form-item
label="出差地点:"
:label-width="dialogLabelText + 'px'"
>
<el-input
v-model="searchParams_info.destination"
placeholder="请输入出差地点（例如：上海）"
size="large"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="18">
<el-form-item
label="票据类型:"
:label-width="dialogLabelText + 'px'"
>
<el-select v-model="searchParams2.destination" placeholder="请选择票据类型" @change="changeDes" size="large">
<el-option
v-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-item
label="费用类型:"
:label-width="dialogLabelText + 'px'"
>
<el-select v-model="searchParams2.expenseType" placeholder="请选择费用类型" @change="changeExp" size="large">
<el-option
v-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("出差住宿报销");
}
// debugger
if(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, //请确认报销信息Loading
confirmInfoLists:[], //二次弹窗-请确认报销信息数据
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.tableLists
return '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 = true
console.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) {
// debugger
const file = event.target.files[0];
if (!file) {
return;
}
const reader = new FileReader();
reader.onload = (e) => {
// debugger
var 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){
// debugger
this.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.businessTravelerName
this.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("出差住宿报销");
}
debugger
if(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 = false
this.dialogVisible = false //二次确认弹窗校验
let searchParams = JSON.stringify({
// invoiceText:this.searchParams.desInformation
invoiceText:'请仿照示例描述出差信息:本人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) => {
// debugger
if (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=>{
// debugger
if(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.wbsids
this.ddLists=res.data.internalOrderIds
this.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>
