更新
This commit is contained in:
xuyuncong
parent
cf441fddf9
commit
e28bae42c8
@ -341,6 +341,11 @@
|
||||
<td>{{ item.theAmount || '' }}</td>
|
||||
<td>{{ item.order_count || '' }}</td>
|
||||
</tr>
|
||||
<tr class="summary-row">
|
||||
<td>合计</td>
|
||||
<td>{{ calculateTotalAmount(data5) }}</td>
|
||||
<td>{{ calculateTotalCount(data5) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@ -362,6 +367,11 @@
|
||||
<div class="sub-text">金额：{{ item.theAmount || '' }}</div>
|
||||
<div class="sub-text">台次：{{ item.order_count || '' }}</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>
|
||||
</el-card>
|
||||
@ -662,12 +672,24 @@
|
||||
this.getStaticsTable5(),
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
.business-statistics {
|
||||
padding: 20px;
|
||||
background: #f4f5f6;
|
||||
@ -742,6 +764,11 @@
|
||||
color: #999;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
font-weight: bold;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
@ -772,6 +799,11 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.summary-item {
|
||||
background: #e3f2fd;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.text_ {
|
||||
font-size: 14px;
|
||||
color: #101A3E;
|
||||
|
||||
@ -192,7 +192,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="供应商" align="center" prop="supplierName" width="180">
|
||||
<template >
|
||||
<template slot-scope="scope">
|
||||
{{info.supplierName}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@ -98,7 +98,6 @@
|
||||
<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="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">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.payConfirm == '1'" type="success">已确认</el-tag>
|
||||
@ -117,23 +116,15 @@
|
||||
>查看
|
||||
</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'"
|
||||
@click="handlePaid(scope.row)" v-if="TicketType === 'tu'"
|
||||
>收款
|
||||
</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"
|
||||
@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 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 v-if="TicketType === 'tp'" size="mini" type="text" icon="el-icon-refresh-right"-->
|
||||
@ -244,24 +235,6 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</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-col :span="24">
|
||||
<el-form-item label="收款备注" prop="remark">
|
||||
@ -271,7 +244,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<template slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="doPaid">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
@ -315,8 +288,8 @@
|
||||
|
||||
<el-row :gutter="1">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="结算方式" prop="settlementType">
|
||||
<el-radio-group v-model="settlementFormData.settlementType" @change="handlePayTypeChange">
|
||||
<el-form-item label="支付方式" prop="payType">
|
||||
<el-radio-group v-model="settlementFormData.payType" @change="handlePayTypeChange">
|
||||
<el-radio label="xj">现结</el-radio>
|
||||
<el-radio label="gz">挂账</el-radio>
|
||||
</el-radio-group>
|
||||
@ -324,7 +297,7 @@
|
||||
</el-col>
|
||||
</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-form-item label="挂账单位" prop="chargeCompanyId">
|
||||
<el-select
|
||||
@ -342,7 +315,7 @@
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button type="text" @click="handleAddChargeCompany">申请挂账单位</el-button>
|
||||
<el-button type="text" @click="handleAddChargeCompany">申请新增</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -459,17 +432,6 @@
|
||||
<el-input v-model="chargeCompanyForm.remark" placeholder="请输入备注" type="textarea" />
|
||||
</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">支持多文件上传，文件格式：pdf、doc、docx、txt、jpg、jpeg、png，大小不超过20MB</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 隐藏字段 -->
|
||||
<el-form-item label="" prop="status" style="display: none;">
|
||||
<el-input v-model="chargeCompanyForm.status" type="hidden" />
|
||||
@ -478,10 +440,6 @@
|
||||
<el-form-item label="" prop="systemCode" style="display: none;">
|
||||
<el-input v-model="chargeCompanyForm.systemCode" type="hidden" />
|
||||
</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>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
@ -489,49 +447,6 @@
|
||||
<el-button @click="cancelChargeCompany">取 消</el-button>
|
||||
</div>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
@ -544,20 +459,16 @@ import {
|
||||
setTicketsSettlement,
|
||||
settlementReview,
|
||||
getSettlement,
|
||||
payConfirm,
|
||||
setTicketsAntiSettlement
|
||||
payConfirm
|
||||
} from '@/api/repair/tickets/Tickets'
|
||||
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 { 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 {
|
||||
name: "TicketTable",
|
||||
components: {EditTickets, TicketsShow, ImagePreview},
|
||||
components: {EditTickets, TicketsShow},
|
||||
props: {
|
||||
TicketType: {
|
||||
type: String,
|
||||
@ -577,20 +488,17 @@ export default {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
showLoading: false, // 添加加载状态
|
||||
return {
|
||||
loading: false,
|
||||
showLoading: false, // 添加加载状态
|
||||
formData: {
|
||||
id: null,
|
||||
ticketsStatus: null,
|
||||
billingRemark: null,
|
||||
payType: null,
|
||||
isPaid: '1',
|
||||
remark: '',
|
||||
accountId: null // 收款账号ID
|
||||
remark: ''
|
||||
},
|
||||
accountList: [], // 收款账号列表
|
||||
accountLoading: false, // 账号加载状态
|
||||
settlementFormData: {
|
||||
actualMoney: 0,
|
||||
discountType: this.defaultDiscountType,
|
||||
@ -608,29 +516,8 @@ export default {
|
||||
address: '',
|
||||
status: false, // 默认为禁用状态
|
||||
systemCode: 'repair',
|
||||
remark: '',
|
||||
file: '' // 文件路径，以逗号分隔
|
||||
remark: ''
|
||||
},
|
||||
// 上传文件列表
|
||||
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: {
|
||||
companyName: [{ required: true, message: '单位名称不能为空', trigger: 'blur' }],
|
||||
contactPerson: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
|
||||
@ -640,13 +527,11 @@ export default {
|
||||
formRules: {
|
||||
payType: [{required: true, message: '支付方式不能为空', trigger: 'blur'}],
|
||||
isPaid: [{required: true, message: '请选择是否支付', trigger: 'blur'}],
|
||||
accountId: [{required: true, message: '请选择收款账号', trigger: 'blur'}],
|
||||
remark: [{required: false, message: '收款备注不能为空', trigger: 'blur'}]
|
||||
},
|
||||
settlementFormRules: {
|
||||
discountType: [{required: true, message: '优惠类型不能为空', trigger: 'blur'}],
|
||||
discount: [{required: true, message: '优惠不能为空', trigger: 'blur'}],
|
||||
settlementType: [{required: true, message: '结算方式不能为空', trigger: 'blur'}]
|
||||
discount: [{required: true, message: '优惠不能为空', trigger: 'blur'}]
|
||||
},
|
||||
dialogVisible: 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: {
|
||||
// 监听是否支付状态变化
|
||||
'formData.isPaid': {
|
||||
@ -765,26 +624,6 @@ export default {
|
||||
} 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,
|
||||
payType: null,
|
||||
isPaid: '1',
|
||||
remark: '',
|
||||
accountId: null
|
||||
remark: ''
|
||||
}
|
||||
this.formData['id'] = row.id
|
||||
this.formData['ticketsStatus'] = '02'
|
||||
this.dialogVisible = true
|
||||
this.checkIsHangAccount(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() {
|
||||
console.log('提交的数据',this.settlementFormData);
|
||||
try {
|
||||
await this.$refs['formRefSettlement'].validate()
|
||||
|
||||
|
||||
if (this.settlementType === 'jssh') {
|
||||
console.log('执行借宿那审核');
|
||||
await settlementReview(this.settlementFormData)
|
||||
} else {
|
||||
await setTicketsSettlement(this.settlementFormData)
|
||||
@ -961,8 +783,7 @@ export default {
|
||||
this.$modal.msgSuccess("提交成功")
|
||||
this.dialogVisibleSettlement = false
|
||||
this.$emit("setVoid")
|
||||
} catch (error) {
|
||||
console.error('Error in settlement process:', error);
|
||||
} catch {
|
||||
}
|
||||
},
|
||||
getDictDataByCode(code) {
|
||||
@ -1058,14 +879,12 @@ export default {
|
||||
// 根据是否支付状态更新表单验证规则
|
||||
updateFormRules(isPaid) {
|
||||
if (isPaid === '0') {
|
||||
// 未支付：收款方式可选，收款备注必填，收款账号可选
|
||||
// 未支付：收款方式可选，收款备注必填
|
||||
this.formRules.payType = [{required: false, message: '支付方式不能为空', trigger: 'blur'}];
|
||||
this.formRules.accountId = [{required: false, message: '请选择收款账号', trigger: 'blur'}];
|
||||
this.formRules.remark = [{required: true, message: '收款备注不能为空', trigger: 'blur'}];
|
||||
} else {
|
||||
// 已支付：收款方式必填，收款备注可选，收款账号必填
|
||||
// 已支付：收款方式必填，收款备注可选
|
||||
this.formRules.payType = [{required: true, message: '支付方式不能为空', trigger: 'blur'}];
|
||||
this.formRules.accountId = [{required: true, message: '请选择收款账号', trigger: 'blur'}];
|
||||
this.formRules.remark = [{required: false, message: '收款备注不能为空', trigger: 'blur'}];
|
||||
}
|
||||
|
||||
@ -1087,11 +906,8 @@ export default {
|
||||
address: '',
|
||||
status: false, // 默认为禁用状态
|
||||
systemCode: 'repair',
|
||||
remark: '',
|
||||
file: ''
|
||||
remark: ''
|
||||
};
|
||||
// 清空上传文件列表
|
||||
this.uploadFileList = [];
|
||||
this.chargeCompanyDialogVisible = true;
|
||||
},
|
||||
|
||||
@ -1100,10 +916,6 @@ export default {
|
||||
this.$refs.chargeCompanyFormRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
// 确保file字段已正确设置
|
||||
const fileField = this.ensureFileField();
|
||||
console.log('提交时的file字段值:', fileField);
|
||||
|
||||
await addChargeCompany(this.chargeCompanyForm);
|
||||
this.$modal.msgSuccess('挂账单位申请成功，请等待审核');
|
||||
this.chargeCompanyDialogVisible = false;
|
||||
@ -1123,183 +935,6 @@ export default {
|
||||
cancelChargeCompany() {
|
||||
this.chargeCompanyDialogVisible = false;
|
||||
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;
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user