This commit is contained in:
xuyuncong 2025-10-25 15:01:52 +08:00
parent cf441fddf9
commit e28bae42c8
3 changed files with 59 additions and 416 deletions

View File

@ -341,6 +341,11 @@
<td>{{ item.theAmount || '' }}</td> <td>{{ item.theAmount || '' }}</td>
<td>{{ item.order_count || '' }}</td> <td>{{ item.order_count || '' }}</td>
</tr> </tr>
<tr class="summary-row">
<td>合计</td>
<td>{{ calculateTotalAmount(data5) }}</td>
<td>{{ calculateTotalCount(data5) }}</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -362,6 +367,11 @@
<div class="sub-text">金额{{ item.theAmount || '' }}</div> <div class="sub-text">金额{{ item.theAmount || '' }}</div>
<div class="sub-text">台次{{ item.order_count || '' }}</div> <div class="sub-text">台次{{ item.order_count || '' }}</div>
</div> </div>
<div class="stat-item multi-line summary-item">
<div class="text_">合计</div>
<div class="sub-text">金额{{ calculateTotalAmount(data5) }}</div>
<div class="sub-text">台次{{ calculateTotalCount(data5) }}</div>
</div>
</div> </div>
</div> </div>
</el-card> </el-card>
@ -662,12 +672,24 @@
this.getStaticsTable5(), this.getStaticsTable5(),
this.getFileStatistics() this.getFileStatistics()
]) ])
},
//
calculateTotalAmount(data) {
if (!data || data.length === 0) return 0;
return data.reduce((total, item) => total + (parseFloat(item.theAmount) || 0), 0).toFixed(2);
},
//
calculateTotalCount(data) {
if (!data || data.length === 0) return 0;
return data.reduce((total, item) => total + (parseInt(item.order_count) || 0), 0);
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss">
.business-statistics { .business-statistics {
padding: 20px; padding: 20px;
background: #f4f5f6; background: #f4f5f6;
@ -742,6 +764,11 @@
color: #999; color: #999;
padding: 40px 0; padding: 40px 0;
} }
.summary-row {
font-weight: bold;
background-color: #f5f5f5;
}
} }
.card-content { .card-content {
@ -772,6 +799,11 @@
text-align: left; text-align: left;
} }
&.summary-item {
background: #e3f2fd;
font-weight: bold;
}
.text_ { .text_ {
font-size: 14px; font-size: 14px;
color: #101A3E; color: #101A3E;

View File

@ -192,7 +192,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="供应商" align="center" prop="supplierName" width="180"> <el-table-column label="供应商" align="center" prop="supplierName" width="180">
<template > <template slot-scope="scope">
{{info.supplierName}} {{info.supplierName}}
</template> </template>
</el-table-column> </el-table-column>

View File

@ -98,7 +98,6 @@
<el-table-column label="服务顾问" align="center" prop="adviserName" width="100"/> <el-table-column label="服务顾问" align="center" prop="adviserName" width="100"/>
<el-table-column label="备注" align="center" prop="remark" width="180"/> <el-table-column label="备注" align="center" prop="remark" width="180"/>
<el-table-column label="所属门店" align="center" prop="corpId" width="180"/> <el-table-column label="所属门店" align="center" prop="corpId" width="180"/>
<el-table-column label="收款账号" align="center" v-if="TicketType === 'tp'" prop="receivablesAccount" width="180"/>
<el-table-column label="确认收款状态" v-if="TicketType === 'tp'" width="100"> <el-table-column label="确认收款状态" v-if="TicketType === 'tp'" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag v-if="scope.row.payConfirm == '1'" type="success">已确认</el-tag> <el-tag v-if="scope.row.payConfirm == '1'" type="success">已确认</el-tag>
@ -117,23 +116,15 @@
>查看 >查看
</el-button> </el-button>
<el-button v-hasPermi="['repair:tk:paid']" size="mini" type="text" icon="el-icon-finished" <el-button v-hasPermi="['repair:tk:paid']" size="mini" type="text" icon="el-icon-finished"
@click="handlePaid(scope.row)" v-if="TicketType === 'tu' && scope.row.settlementType != 'gz'" @click="handlePaid(scope.row)" v-if="TicketType === 'tu'"
>收款 >收款
</el-button> </el-button>
<el-button v-hasPermi="['repair:tk:paid']" size="mini" type="text" icon="el-icon-finished"
@click="handleAntiSettlement(scope.row)" v-if="TicketType === 'tu' && scope.row.settlementType != 'gz'"
>反结算
</el-button>
<el-button v-hasPermi="['repair:tk:paid']" size="mini" type="text" icon="el-icon-finished"
@click="handlePaid(scope.row)" v-if="TicketType === 'tu' && scope.row.settlementType == 'gz'"
>销账
</el-button>
<el-button v-hasPermi="['repair:tk:settlement']" size="mini" type="text" icon="el-icon-finished" <el-button v-hasPermi="['repair:tk:settlement']" size="mini" type="text" icon="el-icon-finished"
@click="handleSettlement(scope.row,'js')" v-if="TicketType === 'ts' && (!scope.row.settlement || scope.row.payStatus == '04')" @click="handleSettlement(scope.row,'js')" v-if="TicketType === 'ts' && !scope.row.settlement"
>结算 >结算
</el-button> </el-button>
<el-button v-hasPermi="['repair:tk:settlement:review']" size="mini" type="text" icon="el-icon-finished" <el-button v-hasPermi="['repair:tk:settlement:review']" size="mini" type="text" icon="el-icon-finished"
@click="handleSettlement(scope.row,'jssh')" v-if="TicketType === 'ts' && scope.row.settlement && scope.row.payStatus != '04'" @click="handleSettlement(scope.row,'jssh')" v-if="TicketType === 'ts' && scope.row.settlement"
>结算审核 >结算审核
</el-button> </el-button>
<!-- <el-button v-if="TicketType === 'tp'" size="mini" type="text" icon="el-icon-refresh-right"--> <!-- <el-button v-if="TicketType === 'tp'" size="mini" type="text" icon="el-icon-refresh-right"-->
@ -244,24 +235,6 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="1">
<el-col :span="24">
<el-form-item label="收款账号" prop="receivablesAccount">
<el-select
v-model="formData.receivablesAccount"
placeholder="请选择收款账号"
:loading="accountLoading"
>
<el-option
v-for="item in accountList"
:key="item.id"
:label="item.accountName + ' - ' + item.accountNumber"
:value="item.accountNumber">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="1"> <el-row :gutter="1">
<el-col :span="24"> <el-col :span="24">
<el-form-item label="收款备注" prop="remark"> <el-form-item label="收款备注" prop="remark">
@ -271,7 +244,7 @@
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<template slot="footer"> <template slot="footer" class="dialog-footer">
<el-button type="primary" @click="doPaid"> </el-button> <el-button type="primary" @click="doPaid"> </el-button>
<el-button @click="dialogVisible = false"> </el-button> <el-button @click="dialogVisible = false"> </el-button>
</template> </template>
@ -315,8 +288,8 @@
<el-row :gutter="1"> <el-row :gutter="1">
<el-col :span="24"> <el-col :span="24">
<el-form-item label="结算方式" prop="settlementType"> <el-form-item label="支付方式" prop="payType">
<el-radio-group v-model="settlementFormData.settlementType" @change="handlePayTypeChange"> <el-radio-group v-model="settlementFormData.payType" @change="handlePayTypeChange">
<el-radio label="xj">现结</el-radio> <el-radio label="xj">现结</el-radio>
<el-radio label="gz">挂账</el-radio> <el-radio label="gz">挂账</el-radio>
</el-radio-group> </el-radio-group>
@ -324,7 +297,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="1" v-if="settlementFormData.settlementType === 'gz'"> <el-row :gutter="1" v-if="settlementFormData.payType === 'gz'">
<el-col :span="24"> <el-col :span="24">
<el-form-item label="挂账单位" prop="chargeCompanyId"> <el-form-item label="挂账单位" prop="chargeCompanyId">
<el-select <el-select
@ -342,7 +315,7 @@
:value="item.id"> :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
<el-button type="text" @click="handleAddChargeCompany">申请挂账单位</el-button> <el-button type="text" @click="handleAddChargeCompany">申请新增</el-button>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -459,17 +432,6 @@
<el-input v-model="chargeCompanyForm.remark" placeholder="请输入备注" type="textarea" /> <el-input v-model="chargeCompanyForm.remark" placeholder="请输入备注" type="textarea" />
</el-form-item> </el-form-item>
<!-- 资料上传 -->
<el-form-item label="资料上传" prop="file">
<el-upload class="upload-demo" :action="uploadFileUrl" :multiple="true" :before-upload="beforeUpload"
:file-list="uploadFileList" :on-success="handleUploadSuccess" :on-error="handleUploadError"
:on-remove="handleRemove" :headers="headers" name="file" accept=".pdf,.doc,.docx,.txt,.jpg,.jpeg,.png"
:on-preview="previewFile">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">支持多文件上传文件格式pdfdocdocxtxtjpgjpegpng大小不超过20MB</div>
</el-upload>
</el-form-item>
<!-- 隐藏字段 --> <!-- 隐藏字段 -->
<el-form-item label="" prop="status" style="display: none;"> <el-form-item label="" prop="status" style="display: none;">
<el-input v-model="chargeCompanyForm.status" type="hidden" /> <el-input v-model="chargeCompanyForm.status" type="hidden" />
@ -478,10 +440,6 @@
<el-form-item label="" prop="systemCode" style="display: none;"> <el-form-item label="" prop="systemCode" style="display: none;">
<el-input v-model="chargeCompanyForm.systemCode" type="hidden" /> <el-input v-model="chargeCompanyForm.systemCode" type="hidden" />
</el-form-item> </el-form-item>
<el-form-item label="" prop="file" style="display: none;">
<el-input v-model="chargeCompanyForm.file" type="hidden" />
</el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -489,49 +447,6 @@
<el-button @click="cancelChargeCompany"> </el-button> <el-button @click="cancelChargeCompany"> </el-button>
</div> </div>
</el-dialog> </el-dialog>
<!-- 文件预览对话框 -->
<el-dialog :title="'文件预览(' + selectFile.fileName + ''" :visible.sync="isShowFile" width="70%" append-to-body>
<!-- 全屏按钮 -->
<el-button
class="fullscreen-btn"
icon="el-icon-full-screen"
size="mini"
@click="toggleFullScreen"
style="position: absolute; top: 10px; right: 100px; z-index: 10;"
>
全屏
</el-button>
<div class="preview-container" ref="previewContainer">
<!-- 音频预览 -->
<audio v-if="isAudioType" class="preview-iframe" controls>
<source :src="getPreviewFilePath(selectFile)"/>
</audio>
<!-- 图片预览 -->
<img
v-if="isImageType"
:src="getPreviewFilePath(selectFile)"
class="preview-iframe"
style="max-width: 100%; max-height: 80vh; object-fit: contain;"
>
<!-- Office文档预览 -->
<iframe
v-if="!isAudioType && !isImageType && !isPdfType && !isTxtType"
:src="fileUrl"
frameborder="0"
class="preview-iframe"
>
</iframe>
<!-- PDF和TXT预览 -->
<iframe
v-if="isPdfType || isTxtType"
:src="getPreviewFilePath(selectFile)"
frameborder="0"
class="preview-iframe"
>
</iframe>
</div>
</el-dialog>
</div> </div>
</template> </template>
@ -544,20 +459,16 @@ import {
setTicketsSettlement, setTicketsSettlement,
settlementReview, settlementReview,
getSettlement, getSettlement,
payConfirm, payConfirm
setTicketsAntiSettlement
} from '@/api/repair/tickets/Tickets' } from '@/api/repair/tickets/Tickets'
import TicketsShow from "@/views/repair/tickets/Components/TicketsShow.vue"; import TicketsShow from "@/views/repair/tickets/Components/TicketsShow.vue";
import { getByNameAndMobile} from "@/api/base/customer"; import {getByNameAndMobile} from "@/api/base/customer";
import EditTickets from "@/views/repair/tickets/form/EditTickets.vue"; import EditTickets from "@/views/repair/tickets/form/EditTickets.vue";
import { getChargeCompanyList, addChargeCompany } from '@/views/base/chargeCompany/api/chargeCompanyApi' import { getChargeCompanyList, addChargeCompany } from '@/views/base/chargeCompany/api/chargeCompanyApi'
import { getAccounts } from '@/views/company/account/api/accountApi'
import { getAccessToken } from "@/utils/auth"
import ImagePreview from '@/components/ImagePreview';
export default { export default {
name: "TicketTable", name: "TicketTable",
components: {EditTickets, TicketsShow, ImagePreview}, components: {EditTickets, TicketsShow},
props: { props: {
TicketType: { TicketType: {
type: String, type: String,
@ -586,11 +497,8 @@ export default {
billingRemark: null, billingRemark: null,
payType: null, payType: null,
isPaid: '1', isPaid: '1',
remark: '', remark: ''
accountId: null // ID
}, },
accountList: [], //
accountLoading: false, //
settlementFormData: { settlementFormData: {
actualMoney: 0, actualMoney: 0,
discountType: this.defaultDiscountType, discountType: this.defaultDiscountType,
@ -608,29 +516,8 @@ export default {
address: '', address: '',
status: false, // status: false, //
systemCode: 'repair', systemCode: 'repair',
remark: '', remark: ''
file: '' //
}, },
//
uploadFileList: [],
//
viewFileUrl: process.env.VUE_APP_FILE_API,
//
uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload",
//
headers: { Authorization: "Bearer " + getAccessToken() },
//
uploadingCount: 0,
//
isShowFile: false,
selectFile: {
fileName: '',
filePath: '',
isImage: false
},
fileUrl: '',
//
isSyncingFromParent: false,
chargeCompanyRules: { chargeCompanyRules: {
companyName: [{ required: true, message: '单位名称不能为空', trigger: 'blur' }], companyName: [{ required: true, message: '单位名称不能为空', trigger: 'blur' }],
contactPerson: [{ required: true, message: '联系人不能为空', trigger: 'blur' }], contactPerson: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
@ -640,13 +527,11 @@ export default {
formRules: { formRules: {
payType: [{required: true, message: '支付方式不能为空', trigger: 'blur'}], payType: [{required: true, message: '支付方式不能为空', trigger: 'blur'}],
isPaid: [{required: true, message: '请选择是否支付', trigger: 'blur'}], isPaid: [{required: true, message: '请选择是否支付', trigger: 'blur'}],
accountId: [{required: true, message: '请选择收款账号', trigger: 'blur'}],
remark: [{required: false, message: '收款备注不能为空', trigger: 'blur'}] remark: [{required: false, message: '收款备注不能为空', trigger: 'blur'}]
}, },
settlementFormRules: { settlementFormRules: {
discountType: [{required: true, message: '优惠类型不能为空', trigger: 'blur'}], discountType: [{required: true, message: '优惠类型不能为空', trigger: 'blur'}],
discount: [{required: true, message: '优惠不能为空', trigger: 'blur'}], discount: [{required: true, message: '优惠不能为空', trigger: 'blur'}]
settlementType: [{required: true, message: '结算方式不能为空', trigger: 'blur'}]
}, },
dialogVisible: false, dialogVisible: false,
dialogVisibleSettlement: false, dialogVisibleSettlement: false,
@ -696,32 +581,6 @@ export default {
] ]
} }
}, },
computed: {
//
isImageType() {
if (!this.selectFile.fileName) return false;
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp'];
const extension = this.selectFile.fileName.substring(this.selectFile.fileName.lastIndexOf('.')).toLowerCase();
return imageExtensions.includes(extension);
},
//
isAudioType() {
if (!this.selectFile.fileName) return false;
const audioExtensions = ['.mp3', '.wav', '.ogg', '.flac', '.aac'];
const extension = this.selectFile.fileName.substring(this.selectFile.fileName.lastIndexOf('.')).toLowerCase();
return audioExtensions.includes(extension);
},
// PDF
isPdfType() {
if (!this.selectFile.fileName) return false;
return this.selectFile.fileName.toLowerCase().endsWith('.pdf');
},
// TXT
isTxtType() {
if (!this.selectFile.fileName) return false;
return this.selectFile.fileName.toLowerCase().endsWith('.txt');
}
},
watch: { watch: {
// //
'formData.isPaid': { 'formData.isPaid': {
@ -765,26 +624,6 @@ export default {
} catch { } catch {
} }
}, },
async handleAntiSettlement(row) {
this.$prompt('反结算备注', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then(({value}) => {
this.formData.id = row.id
this.formData['remark'] = value
this.formData.ticketsStatus = "03"
this.doAntiSettlement()
}).catch(() => {
})
},
async doAntiSettlement() {
try {
await setTicketsAntiSettlement(this.formData)
this.$modal.msgSuccess("反结算成功")
this.$emit("setAntiSettlement")
} catch {
}
},
/** /**
* 打印 * 打印
*/ */
@ -869,32 +708,13 @@ export default {
billingRemark: null, billingRemark: null,
payType: null, payType: null,
isPaid: '1', isPaid: '1',
remark: '', remark: ''
accountId: null
} }
this.formData['id'] = row.id this.formData['id'] = row.id
this.formData['ticketsStatus'] = '02' this.formData['ticketsStatus'] = '02'
this.dialogVisible = true this.dialogVisible = true
this.checkIsHangAccount(row) this.checkIsHangAccount(row)
this.getSettlement(row) this.getSettlement(row)
this.loadAccountList()
},
//
async loadAccountList() {
this.accountLoading = true;
try {
const res = await getAccounts({
status: 1, // 1
systemCode: 'repair' // systemCode
});
this.accountList = res.data.records || [];
} catch (err) {
console.error('获取收款账号列表失败:', err);
this.$modal.msgError('获取收款账号列表失败');
} finally {
this.accountLoading = false;
}
}, },
// //
@ -950,10 +770,12 @@ export default {
} }
}, },
async doSettlement() { async doSettlement() {
console.log('提交的数据',this.settlementFormData);
try { try {
await this.$refs['formRefSettlement'].validate() await this.$refs['formRefSettlement'].validate()
if (this.settlementType === 'jssh') { if (this.settlementType === 'jssh') {
console.log('执行借宿那审核');
await settlementReview(this.settlementFormData) await settlementReview(this.settlementFormData)
} else { } else {
await setTicketsSettlement(this.settlementFormData) await setTicketsSettlement(this.settlementFormData)
@ -961,8 +783,7 @@ export default {
this.$modal.msgSuccess("提交成功") this.$modal.msgSuccess("提交成功")
this.dialogVisibleSettlement = false this.dialogVisibleSettlement = false
this.$emit("setVoid") this.$emit("setVoid")
} catch (error) { } catch {
console.error('Error in settlement process:', error);
} }
}, },
getDictDataByCode(code) { getDictDataByCode(code) {
@ -1058,14 +879,12 @@ export default {
// //
updateFormRules(isPaid) { updateFormRules(isPaid) {
if (isPaid === '0') { if (isPaid === '0') {
// //
this.formRules.payType = [{required: false, message: '支付方式不能为空', trigger: 'blur'}]; this.formRules.payType = [{required: false, message: '支付方式不能为空', trigger: 'blur'}];
this.formRules.accountId = [{required: false, message: '请选择收款账号', trigger: 'blur'}];
this.formRules.remark = [{required: true, message: '收款备注不能为空', trigger: 'blur'}]; this.formRules.remark = [{required: true, message: '收款备注不能为空', trigger: 'blur'}];
} else { } else {
// //
this.formRules.payType = [{required: true, message: '支付方式不能为空', trigger: 'blur'}]; this.formRules.payType = [{required: true, message: '支付方式不能为空', trigger: 'blur'}];
this.formRules.accountId = [{required: true, message: '请选择收款账号', trigger: 'blur'}];
this.formRules.remark = [{required: false, message: '收款备注不能为空', trigger: 'blur'}]; this.formRules.remark = [{required: false, message: '收款备注不能为空', trigger: 'blur'}];
} }
@ -1087,11 +906,8 @@ export default {
address: '', address: '',
status: false, // status: false, //
systemCode: 'repair', systemCode: 'repair',
remark: '', remark: ''
file: ''
}; };
//
this.uploadFileList = [];
this.chargeCompanyDialogVisible = true; this.chargeCompanyDialogVisible = true;
}, },
@ -1100,10 +916,6 @@ export default {
this.$refs.chargeCompanyFormRef.validate(async (valid) => { this.$refs.chargeCompanyFormRef.validate(async (valid) => {
if (valid) { if (valid) {
try { try {
// file
const fileField = this.ensureFileField();
console.log('提交时的file字段值:', fileField);
await addChargeCompany(this.chargeCompanyForm); await addChargeCompany(this.chargeCompanyForm);
this.$modal.msgSuccess('挂账单位申请成功,请等待审核'); this.$modal.msgSuccess('挂账单位申请成功,请等待审核');
this.chargeCompanyDialogVisible = false; this.chargeCompanyDialogVisible = false;
@ -1123,183 +935,6 @@ export default {
cancelChargeCompany() { cancelChargeCompany() {
this.chargeCompanyDialogVisible = false; this.chargeCompanyDialogVisible = false;
this.$refs.chargeCompanyFormRef && this.$refs.chargeCompanyFormRef.resetFields(); this.$refs.chargeCompanyFormRef && this.$refs.chargeCompanyFormRef.resetFields();
//
this.uploadFileList = [];
},
//
beforeUpload(file) {
//
const isLt20M = file.size / 1024 / 1024 < 20 // 20MB
if (!isLt20M) {
this.$message.error('上传文件大小不能超过 20MB!')
return false
}
//
if (this.uploadingCount === 0) {
this.$modal.loading("正在上传文件,请稍候...")
}
this.uploadingCount++
return true
},
//
handleUploadSuccess(res, file, fileList) {
this.uploadingCount--
//
console.log('上传成功响应:', res);
// 使
const originalFileName = file.name || '未知文件名';
//
const index = this.uploadFileList.findIndex(item => item.uid === file.uid)
if (index > -1) {
// 使
const filePath = res && res.code === 0 && res.data ? res.data : file.name
//
this.uploadFileList[index].url = filePath
this.uploadFileList[index].status = 'success'
this.uploadFileList[index].name = originalFileName // 使
this.uploadFileList[index].fileName = originalFileName // fileName
this.uploadFileList[index].filePath = filePath // filePath
this.uploadFileList[index].isImage = this.isImageExtension(originalFileName) //
} else {
//
const filePath = res && res.code === 0 && res.data ? res.data : file.name
this.uploadFileList.push({
uid: file.uid,
name: originalFileName,
fileName: originalFileName,
url: filePath,
filePath: filePath,
status: 'success',
isImage: this.isImageExtension(originalFileName)
})
}
// file
this.updateFilePaths()
//
if (this.uploadingCount === 0) {
this.$modal.closeLoading()
}
},
//
handleUploadError(err, file, fileList) {
this.uploadingCount--
this.$message.error('文件上传失败,请重试')
if (this.uploadingCount === 0) {
this.$modal.closeLoading()
}
},
//
handleRemove(file, fileList) {
this.uploadFileList = fileList
this.updateFilePaths()
},
//
updateFilePaths() {
// 使
const paths = this.uploadFileList
.filter(file => file && (file.status === 'success' || file.url)) //
.map(file => {
// 使使url
const filePath = file.url || file.name || ''
// viewFileUrl
if (filePath && this.viewFileUrl && filePath.includes(this.viewFileUrl)) {
return filePath.replace(this.viewFileUrl, '')
}
return filePath
})
// 使
const filePathStr = paths.join(',') || ''
this.chargeCompanyForm.file = filePathStr
console.log('更新后的file字段值:', filePathStr)
},
//
isImageExtension(fileName) {
if (!fileName) return false;
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp'];
const extension = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
return imageExtensions.includes(extension);
},
//
getPreviewFilePath(file) {
if (!file || !file.filePath && !file.url) return '';
const filePath = file.filePath || file.url || '';
// http
if (filePath.startsWith('http://') || filePath.startsWith('https://')) {
return filePath;
}
// URL
return `${this.viewFileUrl || process.env.VUE_APP_BASE_API}${filePath}`;
},
//
previewFile(file) {
console.log('预览文件:', file);
//
this.selectFile = {
fileName: file.name || file.fileName || '未知文件',
filePath: file.url || file.filePath || '',
isImage: file.isImage || this.isImageExtension(file.name || file.fileName || '')
};
// Office使Office Online
if (!this.isImageExtension(this.selectFile.fileName) && !this.isPdfType && !this.isTxtType && !this.isAudioType) {
const fileUrl = this.getPreviewFilePath(this.selectFile);
this.fileUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(fileUrl)}`;
}
//
this.isShowFile = true;
},
//
toggleFullScreen() {
const container = this.$refs.previewContainer;
if (!container) return;
if (!document.fullscreenElement) {
container.requestFullscreen().catch(err => {
console.error(`全屏切换失败: ${err.message}`);
});
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
},
//
extractFileName(path) {
if (!path) return '未知文件';
// URL
let cleanPath = path;
if (cleanPath.includes('http://') || cleanPath.includes('https://')) {
const urlObj = new URL(cleanPath);
cleanPath = urlObj.pathname;
}
//
const parts = cleanPath.split('/');
return parts[parts.length - 1] || '未知文件';
},
// file
ensureFileField() {
this.updateFilePaths()
return this.chargeCompanyForm.file
} }
} }
} }
@ -1331,28 +966,4 @@ export default {
color: #409EFF; color: #409EFF;
margin-bottom: 10px; margin-bottom: 10px;
} }
/* 文件预览样式 */
.preview-container {
position: relative;
width: 100%;
height: 600px;
overflow: auto;
}
.preview-iframe {
width: 100%;
height: 100%;
border: none;
}
.fullscreen-btn {
background: #409EFF;
color: white;
border: none;
}
.fullscreen-btn:hover {
background: #66b1ff;
color: white;
}
</style> </style>