|  |  | <template> | 
|  |  | <div> | 
|  |  | <!-- 上传Excel按钮 --> | 
|  |  | <el-row :gutter="24"> | 
|  |  | <el-col :span="4"> | 
|  |  | <el-upload | 
|  |  | class="upload-demo" | 
|  |  | action="" | 
|  |  | :before-upload="beforeUpload" | 
|  |  | :http-request="uploadExcel" | 
|  |  | :show-file-list="false"> | 
|  |  | <el-button size="medium" type="success">导入数据</el-button> | 
|  |  | </el-upload> | 
|  |  | </el-col> | 
|  |  | <el-col :span="4"> | 
|  |  | <el-upload | 
|  |  | class="upload-demo" | 
|  |  | action="" | 
|  |  | :before-upload="beforeUpload" | 
|  |  | :http-request="uploadUpdateExcel" | 
|  |  | :show-file-list="false"> | 
|  |  | <el-button size="medium" type="success">更新数据</el-button> | 
|  |  | </el-upload> | 
|  |  | </el-col> | 
|  |  | <el-button size="medium" @click="fetchData" type="primary">查询</el-button> | 
|  |  | </el-row> | 
|  |  | <!-- 数据列表 --> | 
|  |  | <el-row :gutter="24"> | 
|  |  | <el-col :span="24"> | 
|  |  | <el-table :data="tableData" border style="width: 100%"> | 
|  |  | <el-table-column prop="staId" label="标识码"></el-table-column> | 
|  |  | <el-table-column prop="iEPort" label="进出境关区"></el-table-column> | 
|  |  | <el-table-column prop="iEPortCn" label="关区中文名称"></el-table-column> | 
|  |  | <el-table-column prop="tradeCo" label="境内收发货人"></el-table-column> | 
|  |  | <el-table-column prop="ownerCode" label="消费使用单位/生产销售单位"></el-table-column> | 
|  |  | <el-table-column prop="districtCode" label="境内目的地/货源地"></el-table-column> | 
|  |  | <el-table-column prop="districtCodeCn" label="境内目的地/货源地中文名称"></el-table-column> | 
|  |  | <el-table-column prop="trafMode" label="运输方式"></el-table-column> | 
|  |  | <el-table-column prop="trafModeCn" label="运输方式中文名称"></el-table-column> | 
|  |  | <el-table-column prop="tradeMode" label="监管方式"></el-table-column> | 
|  |  | <el-table-column prop="tradeModeCn" label="监管方式中文名称"></el-table-column> | 
|  |  | <el-table-column prop="cutMode" label="征免性质"></el-table-column> | 
|  |  | <el-table-column prop="cutModeCn" label="征免性质中文名称"></el-table-column> | 
|  |  | <el-table-column prop="tradeCountry" label="启抵国"></el-table-column> | 
|  |  | <el-table-column prop="tradeCountryCn" label="启抵国中文名称"></el-table-column> | 
|  |  | <el-table-column prop="originCountry" label="产终国"></el-table-column> | 
|  |  | <el-table-column prop="originCountryCn" label="产终国中文名称"></el-table-column> | 
|  |  | <el-table-column prop="licenseNo" label="许可证编号"></el-table-column> | 
|  |  | <el-table-column prop="manualNo" label="备案号"></el-table-column> | 
|  |  | <el-table-column prop="grossWt" label="毛重"></el-table-column> | 
|  |  | <el-table-column prop="endDate" label="结关日期"></el-table-column> | 
|  |  | <el-table-column prop="codeT" label="商品编号"></el-table-column> | 
|  |  | <el-table-column prop="codeS" label="附加编号"></el-table-column> | 
|  |  | <el-table-column prop="qty1" label="第一数量"></el-table-column> | 
|  |  | <el-table-column prop="unit1" label="第一计量单位"></el-table-column> | 
|  |  | <el-table-column prop="unit1Cn" label="第一计量单位中文名称"></el-table-column> | 
|  |  | <el-table-column prop="qty2" label="第二数量"></el-table-column> | 
|  |  | <el-table-column prop="unit2" label="第二计量单位"></el-table-column> | 
|  |  | <el-table-column prop="unit2Cn" label="第二计量单位中文名称"></el-table-column> | 
|  |  | <el-table-column prop="rmb" label="人民币"></el-table-column> | 
|  |  | <el-table-column prop="usd" label="美元值"></el-table-column> | 
|  |  | <el-table-column prop="dutyMode" label="征免方式"></el-table-column> | 
|  |  | <el-table-column prop="dutyModeCn" label="征免方式中文名称"></el-table-column> | 
|  |  | <el-table-column prop="dutax" label="实征税款"></el-table-column> | 
|  |  | <el-table-column prop="realDuty" label="实征关税"></el-table-column> | 
|  |  | <el-table-column prop="dutaxCut" label="减免税"></el-table-column> | 
|  |  | <el-table-column prop="dutyCut" label="减免关税"></el-table-column> | 
|  |  | <el-table-column prop="empty" label="空白项"></el-table-column> | 
|  |  | <el-table-column prop="gName" label="商品名称"></el-table-column> | 
|  |  | <el-table-column prop="gModel" label="规格型号"></el-table-column> | 
|  |  | <el-table-column prop="selType" label="分类通关"></el-table-column> | 
|  |  | <el-table-column prop="createtime" label="导入时间"></el-table-column> | 
|  |  | <el-table-column prop="opter" label="操作账户"></el-table-column> | 
|  |  | </el-table> | 
|  |  | </el-col> | 
|  |  | <el-col :span="24"> | 
|  |  | <el-pagination | 
|  |  | size="medium" | 
|  |  | @size-change="handleSizeChange" | 
|  |  | @current-change="handleCurrentChange" | 
|  |  | :current-page="query.pageNum" | 
|  |  | :page-sizes="[10, 20, 30, 40]" | 
|  |  | :page-size="query.pageSize" | 
|  |  | layout="total, sizes, prev, pager, next, jumper" | 
|  |  | :total="total"> | 
|  |  | </el-pagination> | 
|  |  | </el-col> | 
|  |  | </el-row> | 
|  |  | </div> | 
|  |  | </template> | 
|  |  |  | 
|  |  | <script> | 
|  |  |  | 
|  |  | import {importExcel, fetchData, importUpdateExcel} from "../../api/AiCustoms/AiCustoms"; | 
|  |  |  | 
|  |  | export default { | 
|  |  | data() { | 
|  |  | return { | 
|  |  | tableData: [], | 
|  |  | total: 0, // 总数据量 | 
|  |  | query: { | 
|  |  | pageNum: 1, | 
|  |  | pageSize: 10 | 
|  |  | }, | 
|  |  | } | 
|  |  | }, | 
|  |  | mounted() { | 
|  |  | this.fetchData() | 
|  |  | }, | 
|  |  | methods: { | 
|  |  | fetchData() { | 
|  |  | fetchData(this.query).then((response) => { | 
|  |  | const res = response.data | 
|  |  | if (res.code !== '200') { | 
|  |  | return this.$message.error('获取消息收发记录,失败!') | 
|  |  | } | 
|  |  | // 获取列表数据 | 
|  |  | this.tableData = res.data.list | 
|  |  | // 获取列表的总记录数 | 
|  |  | this.total = res.data.total | 
|  |  | this.$message.success('获取消息收发记录,成功!'); | 
|  |  | }).catch(error => { | 
|  |  | // 关闭加载 | 
|  |  | this.$message.error(error.toString()) | 
|  |  | }) | 
|  |  | }, | 
|  |  | uploadExcel({ file, onSuccess, onError }){ | 
|  |  | // 生成 FormData 对象 | 
|  |  | const formData = new FormData(); | 
|  |  | formData.append('file', file); | 
|  |  | const loading = this.$loading({ | 
|  |  | lock: true, | 
|  |  | text: 'Loading', | 
|  |  | spinner: 'el-icon-loading', | 
|  |  | background: 'rgba(0, 0, 0, 0.7)' | 
|  |  | }); | 
|  |  | importExcel(formData).then((response) => { | 
|  |  | const res = response.data | 
|  |  | if (res.code !== '200') { | 
|  |  | return this.$message.error(res.msg); | 
|  |  | } | 
|  |  | this.$message.success(res.msg); | 
|  |  | loading.close(); | 
|  |  | this.fetchData(); | 
|  |  | onSuccess(response.data); // 调用 onSuccess 回调通知上传成功 | 
|  |  | }).catch(error => { | 
|  |  | // 关闭加载 | 
|  |  | loading.close(); | 
|  |  | this.$message.error(error.toString()) | 
|  |  | onError(error); // 调用 onError 回调通知上传失败 | 
|  |  | }) | 
|  |  | }, | 
|  |  | uploadUpdateExcel({ file, onSuccess, onError }){ | 
|  |  | // 生成 FormData 对象 | 
|  |  | const formData = new FormData(); | 
|  |  | formData.append('file', file); | 
|  |  | const loading = this.$loading({ | 
|  |  | lock: true, | 
|  |  | text: 'Loading', | 
|  |  | spinner: 'el-icon-loading', | 
|  |  | background: 'rgba(0, 0, 0, 0.7)' | 
|  |  | }); | 
|  |  | importUpdateExcel(formData).then((response) => { | 
|  |  | const res = response.data | 
|  |  | if (res.code !== '200') { | 
|  |  | return this.$message.error(res.msg); | 
|  |  | } | 
|  |  | this.$message.success(res.msg); | 
|  |  | loading.close(); | 
|  |  | this.fetchData(); | 
|  |  | onSuccess(response.data); // 调用 onSuccess 回调通知上传成功 | 
|  |  | }).catch(error => { | 
|  |  | // 关闭加载 | 
|  |  | loading.close(); | 
|  |  | this.$message.error(error.toString()) | 
|  |  | onError(error); // 调用 onError 回调通知上传失败 | 
|  |  | }) | 
|  |  | }, | 
|  |  | handleSizeChange(val) { | 
|  |  | this.query.pageSize=val; | 
|  |  | this.fetchData() | 
|  |  | }, | 
|  |  | handleCurrentChange(val) { | 
|  |  | this.query.pageNum=val; | 
|  |  | this.fetchData() | 
|  |  | } | 
|  |  | } | 
|  |  | } | 
|  |  | </script> | 
|  |  | \ No newline at end of file | 
... | ... |  |