Form.vue 24.7 KB

Edit Raw Blame History

<template>
	<el-dialog :title="!dataForm.id ? '新建' :  isDetail ? '详情':'编辑'" :close-on-click-modal="false" :visible.sync="visible" class="NCC-dialog NCC-dialog_center" lock-scroll width="1200px">
		<el-row :gutter="15" class="" >
			<el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right" :disabled="!!isDetail" :rules="rules">
				<!-- 上方表单字段：一行三列 -->
				<el-col :span="8">
					<el-form-item label="申请人" prop="applicationUserId">
						<user-select v-model="dataForm.applicationUserId" placeholder="请选择" clearable @change="handleApplicationUserChange">
						</user-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="申请人姓名" prop="applicationUserName">
						<el-input v-model="dataForm.applicationUserName" placeholder="自动填充" disabled :style='{"width":"100%"}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="申请门店" prop="applicationStoreId">
						<el-select v-model="dataForm.applicationStoreId" placeholder="自动填充" disabled :style='{"width":"100%"}' clearable>
							<el-option
								v-for="store in storeOptions"
								:key="store.id"
								:label="store.dm"
								:value="store.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="8">
					<el-form-item label="申请时间" prop="applicationTime">
						<el-date-picker v-model="dataForm.applicationTime" placeholder="请选择" clearable :style='{"width":"100%"}' type='date' format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col> -->
				<el-col :span="8">
					<el-form-item label="总金额" prop="amount">
						<el-input v-model="dataForm.amount" placeholder="自动计算" readonly :style='{"width":"100%"}' >
						</el-input>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="8">
					<el-form-item label="审批人" prop="approveUser">
						<user-select v-model="dataForm.approveUser" placeholder="请选择" clearable >
						</user-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="审批结果" prop="approveStatus">
						<el-input v-model="dataForm.approveStatus" placeholder="请输入" clearable :style='{"width":"100%"}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="审批时间" prop="approveTime">
						<el-date-picker v-model="dataForm.approveTime" placeholder="请选择" clearable :style='{"width":"100%"}' type='date' format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col> -->

				<!-- 购买物品清单选择 -->
				<el-col :span="24">
					<el-form-item label="购买物品清单">
						<el-button type="primary" @click="openPurchaseDialog" :disabled="!!isDetail">选择购买物品</el-button>
						<span v-if="selectedPurchaseRecords.length > 0" style="margin-left: 10px;">
							已选择 {{ selectedPurchaseRecords.length }} 条记录
						</span>
					</el-form-item>
				</el-col>

				<!-- 已选择的购买物品清单 -->
				<el-col :span="24" v-if="selectedPurchaseRecords.length > 0">
					<el-form-item label="已选清单">
						<el-table
							:data="selectedPurchaseRecords"
							:max-height="200"
							border
							size="small">
							<el-table-column type="index" label="序号" width="60" align="center" />
							<!-- <el-table-column prop="reimbursementCategoryId" label="分类编号"   /> -->
							<el-table-column prop="reimbursementCategoryName" label="分类名称"   />
							<el-table-column prop="unitPrice" label="单价"   />
							<el-table-column prop="quantity" label="数量"  />
							<el-table-column prop="amount" label="总金额"   />
							<el-table-column prop="purchaseTime" label="购买时间" width="120" >
								<template slot-scope="scope">
									{{ scope.row.purchaseTime ? formatDate(scope.row.purchaseTime) : '' }}
								</template>
							</el-table-column>
							<el-table-column prop="memo" label="备注说明" min-  show-overflow-tooltip />
							<el-table-column label="操作" align="center" v-if="!isDetail">
								<template slot-scope="scope">
									<el-button type="text" size="small" @click="removePurchaseRecord(scope.$index)" style="color: #F56C6C;">移除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-form-item>
				</el-col>

				<!-- 购买物品选择弹窗 -->
				<el-dialog
					title="选择购买物品"
					:visible.sync="purchaseDialogVisible"
					width="1000px"
					:close-on-click-modal="false"
					append-to-body
					:modal-append-to-body="false"
					class="NCC-dialog NCC-dialog_center">
					<el-table
						ref="purchaseDialogTable"
						v-loading="purchaseListLoading"
						:data="purchaseList"
						@selection-change="handlePurchaseSelectionChange"
						:max-height="400"
						border>
						<el-table-column type="selection" width="55" />
						<!-- <el-table-column prop="reimbursementCategoryId" label="分类编号"   /> -->
						<el-table-column prop="reimbursementCategoryName" label="分类名称"   />
						<el-table-column prop="unitPrice" label="单价"   />
						<el-table-column prop="quantity" label="数量"  />
						<el-table-column prop="amount" label="总金额"   />
						<el-table-column prop="purchaseTime" label="购买时间" width="120" >
							<template slot-scope="scope">
								{{ scope.row.purchaseTime ? formatDate(scope.row.purchaseTime) : '' }}
							</template>
						</el-table-column>
						<el-table-column prop="memo" label="备注说明" min-  show-overflow-tooltip />
					</el-table>
					<span slot="footer" class="dialog-footer">
						<el-button @click="purchaseDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="confirmPurchaseSelection">确 定</el-button>
					</span>
				</el-dialog>
			</el-form>
		</el-row>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="success" @click="handleApprove" v-if="dataForm.id && !isDetail && dataForm.approveStatus === '未审批' ">通过审批</el-button>
			<el-button type="danger" @click="handleReject" v-if="dataForm.id && !isDetail && dataForm.approveStatus === '未审批'">拒绝审批</el-button>
			<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail && dataForm.approveStatus === '未审批'">确 定</el-button>

			<el-button type="warning" @click="handlePrint" v-if="dataForm.id">打 印</el-button>
		</span>
	</el-dialog>
</template>
<script>
	import request from '@/utils/request'
	import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
	import { previewDataInterface } from '@/api/systemData/dataInterface'
	import { UserSettingInfo } from '@/api/permission/userSetting'
	export default {
		components: {},
		props: [],
		data() {
			return {
				loading: false,
				visible: false,
				isDetail: false,
				purchaseDialogVisible: false,
				purchaseListLoading: false,
				purchaseList: [],
				selectedPurchaseRecords: [],
				tempSelectedPurchaseRecords: [], // 弹窗中临时选中的记录
				storeOptions: [], // 门店选项列表
				dataForm: {
					id:undefined,
					applicationUserId:undefined,
					applicationUserName:undefined,
					applicationStoreId:undefined,
					applicationTime:undefined,
					amount:undefined,
					approveUser:undefined,
					approveStatus:'未审批',
					approveTime:undefined,
					purchaseRecordsId:undefined,
					selectedPurchaseRecordIds: [], // 选中的购买记录ID列表
				},
				rules: {
				},
			}
		},
		computed: {},
        watch: {},
        created() {
			this.loadStoreOptions();
		},
		mounted() {
        },
		methods: {
			goBack() {
                this.$emit('refresh')
            },
			// 申请人改变时，自动填充申请人姓名和申请门店
			handleApplicationUserChange(userId) {
				if (userId) {
					// 获取用户信息
					request({
						url: '/api/permission/Users/' + userId,
						method: 'GET',
					}).then(res => {
						this.dataForm.applicationUserName = res.data.realName || res.data.userName || '';
						this.dataForm.applicationStoreId = res.data.mdid || '';
					});
				} else {
					// 清空申请人时，也清空姓名和门店
					this.dataForm.applicationUserName = '';
					this.dataForm.applicationStoreId = '';
				}
			},
			// 加载门店列表
			loadStoreOptions() {
				request({
					url: '/api/Extend/LqMdxx',
					method: 'GET',
					data: {
						currentPage: 1,
						pageSize: 1000
					}
				}).then(res => {
					if (res.data && res.data.list) {
						this.storeOptions = res.data.list;
					}
				}).catch(() => {
					this.storeOptions = [];
				});
			},
			// 格式化日期
			formatDate(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			// 打开购买物品选择弹窗
			openPurchaseDialog() {
				this.purchaseDialogVisible = true;
				// 初始化临时选中列表为当前已选中的记录（用于追加选择）
				this.tempSelectedPurchaseRecords = [...this.selectedPurchaseRecords];
				// 加载当前用户的未报销购买记录
				this.loadCurrentUserPurchaseRecords();
			},
			// 加载当前用户的未报销购买记录
			loadCurrentUserPurchaseRecords() {
				this.purchaseListLoading = true;
					request({
						url: '/api/Extend/LqPurchaseRecords/Actions/GetNoPagingList',
						method: 'GET',
						data: {
							createUserStoreId: this.dataForm.applicationStoreId,
							approveStatus: '未审批'
						}
					}).then(res => {
						// 过滤出未报销的记录（ApplicationId为空）
						this.purchaseList = res.data || [];
						this.purchaseListLoading = false;
					}).catch(() => {
						this.purchaseListLoading = false;
					});
			},
			// 购买记录选择变化（弹窗中）
			handlePurchaseSelectionChange(selection) {
				this.tempSelectedPurchaseRecords = selection;
			},
			// 确认选择购买物品
			confirmPurchaseSelection() {
				// 追加选择：将弹窗中选中的记录追加到已选记录中（去重）
				const existingIds = new Set(this.selectedPurchaseRecords.map(item => item.id));
				const newRecords = this.tempSelectedPurchaseRecords.filter(item => !existingIds.has(item.id));

				// 追加新选中的记录
				this.selectedPurchaseRecords = [...this.selectedPurchaseRecords, ...newRecords];

				// 更新ID列表
				this.dataForm.selectedPurchaseRecordIds = this.selectedPurchaseRecords.map(item => item.id);

				// 自动计算总金额
				const totalAmount = this.selectedPurchaseRecords.reduce((sum, item) => {
					return sum + (parseFloat(item.amount) || 0);
				}, 0);
				this.dataForm.amount = totalAmount.toFixed(2);
				this.purchaseDialogVisible = false;
			},
			// 移除已选中的购买记录
			removePurchaseRecord(index) {
				this.selectedPurchaseRecords.splice(index, 1);
				this.dataForm.selectedPurchaseRecordIds = this.selectedPurchaseRecords.map(item => item.id);
				// 重新计算总金额
				const totalAmount = this.selectedPurchaseRecords.reduce((sum, item) => {
					return sum + (parseFloat(item.amount) || 0);
				}, 0);
				this.dataForm.amount = totalAmount.toFixed(2);
			},
			init(id, isDetail) {
				this.dataForm.id = id || 0;
                this.visible = true;
                this.isDetail = isDetail || false;
				this.selectedPurchaseRecords = [];
				this.purchaseList = [];
				this.$nextTick(() => {
					this.$refs['elForm'].resetFields();
					if (this.dataForm.id) {
						// 编辑模式：加载已有数据
						request({
							url: '/api/Extend/LqReimbursementApplication/' + this.dataForm.id,
							method: 'get'
						}).then(res =>{
							this.dataForm = res.data;
							// 转换时间格式：如果 approveTime 是 ISO 8601 字符串，转换为时间戳
							if (this.dataForm.approveTime && typeof this.dataForm.approveTime === 'string') {
								this.dataForm.approveTime = new Date(this.dataForm.approveTime).getTime();
							}
							// 如果有关联的购买记录，加载并选中
							if (this.dataForm.purchaseRecordsId) {
								this.loadSelectedPurchaseRecords(this.dataForm.purchaseRecordsId);
							}
						})
					} else {
						// 新增模式：设置默认值
						UserSettingInfo().then(response => {
							if (response.data && response.data.id) {
								this.dataForm.applicationUserId = response.data.id;
								// 自动填充申请人姓名和申请门店
								this.handleApplicationUserChange(response.data.id);
							}
						}).catch(() => {
							// 如果API调用失败，尝试从store获取
							const userInfo = this.$store.getters.userInfo;
							if (userInfo) {
								const userId = userInfo.userId || userInfo.id;
								this.dataForm.applicationUserId = userId;
								// 自动填充申请人姓名和申请门店
								this.handleApplicationUserChange(userId);
							}
						});
						this.dataForm.applicationTime = new Date().getTime();
					}
				})
			},
			// 加载已选中的购买记录（编辑时使用）
			loadSelectedPurchaseRecords(purchaseRecordsId) {
				if (!purchaseRecordsId) {
					this.selectedPurchaseRecords = [];
					this.dataForm.selectedPurchaseRecordIds = [];
					return;
				}
				// 处理逗号分隔的ID字符串，去除空格、换行符和空值
				// 先替换所有换行符和回车符为逗号，然后按逗号分割
				const normalizedStr = purchaseRecordsId.replace(/[\r\n]+/g, ',').replace(/\s+/g, '');
				const ids = normalizedStr.split(',').map(id => id.trim()).filter(id => id && id !== '');

				if (ids.length === 0) {
					this.selectedPurchaseRecords = [];
					this.dataForm.selectedPurchaseRecordIds = [];
					return;
				}

				console.log('解析的购买记录ID列表:', ids);

				// 加载所有购买记录
				request({
					url: '/api/Extend/LqPurchaseRecords/Actions/GetNoPagingList',
					method: 'GET',
					data: {}
				}).then(res => {
					const allRecords = res.data || [];
					console.log('加载的所有购买记录数量:', allRecords.length);

					// 清空已选记录列表
					this.selectedPurchaseRecords = [];
					this.dataForm.selectedPurchaseRecordIds = [];

					// 按照ID顺序选中已关联的记录
					const foundIds = [];
					const notFoundIds = [];
					ids.forEach(id => {
						const record = allRecords.find(item => item.id === id);
						if (record) {
							this.selectedPurchaseRecords.push(record);
							this.dataForm.selectedPurchaseRecordIds.push(id);
							foundIds.push(id);
						} else {
							notFoundIds.push(id);
							console.warn('未找到购买记录，ID:', id);
						}
					});

					console.log('找到的记录数量:', foundIds.length, '未找到的ID:', notFoundIds);

					// 计算总金额
					const totalAmount = this.selectedPurchaseRecords.reduce((sum, item) => {
						return sum + (parseFloat(item.amount) || 0);
					}, 0);
					this.dataForm.amount = totalAmount.toFixed(2);

					// 如果有未找到的记录，提示用户
					if (notFoundIds.length > 0) {
						this.$message.warning(`有 ${notFoundIds.length} 条购买记录未找到，可能已被删除`);
					}
				}).catch((error) => {
					console.error('加载购买记录失败:', error);
					this.$message.error('加载购买记录失败');
				});
			},
			dataFormSubmit() {
				this.$refs['elForm'].validate((valid) => {
                    if (valid) {
						// 验证是否选择了购买记录
						if (!this.dataForm.id && (!this.dataForm.selectedPurchaseRecordIds || this.dataForm.selectedPurchaseRecordIds.length === 0)) {
							this.$message({
								message: '请至少选择一条购买记录',
								type: 'warning',
								duration: 2000
							});
							return;
						}

						// 设置关联购买编号（多个ID用逗号分隔）
						this.dataForm.purchaseRecordsId = this.dataForm.selectedPurchaseRecordIds.join(',');

                        if (!this.dataForm.id) {
                            request({
                                url: `/api/Extend/LqReimbursementApplication`,
                                method: 'post',
                                data: this.dataForm,
                            }).then((res) => {
                                this.$message({
                                    message: res.msg,
                                    type: 'success',
                                    duration: 1000,
                                    onClose: () => {
                                        this.visible = false,
                                            this.$emit('refresh', true)
                                    }
                                })
                            })
                        } else {
                            request({
                                url: '/api/Extend/LqReimbursementApplication/' + this.dataForm.id,
                                method: 'PUT',
                                data: this.dataForm
                            }).then((res) => {
                                this.$message({
                                    message: res.msg,
                                    type: 'success',
                                    duration: 1000,
                                    onClose: () => {
                                        this.visible = false
                                        this.$emit('refresh', true)
                                    }
                                })
                            })
                        }
                    }
                })
			},
			handleApprove() {
				this.$confirm('确定要通过审批吗?', '提示', {
					type: 'warning'
				}).then(() => {
					request({
						url: `/api/Extend/LqReimbursementApplication/${this.dataForm.id}/Actions/Approve`,
						method: 'POST'
					}).then(res => {
						this.$message({
							type: 'success',
							message: res.msg || '审批通过成功',
							onClose: () => {
								this.visible = false;
								this.$emit('refresh', true);
							}
						});
					})
				}).catch(() => {
				});
			},
			handleReject() {
				this.$confirm('确定要拒绝审批吗?', '提示', {
					type: 'warning'
				}).then(() => {
					request({
						url: `/api/Extend/LqReimbursementApplication/${this.dataForm.id}/Actions/Reject`,
						method: 'POST'
					}).then(res => {
						this.$message({
							type: 'success',
							message: res.msg || '拒绝审批成功',
							onClose: () => {
								this.visible = false;
								this.$emit('refresh', true);
							}
						});
					})
				}).catch(() => {
				});
			},
			// 打印功能
			handlePrint() {
				if (!this.dataForm.id) {
					this.$message.warning('请先保存报销申请');
					return;
				}

				// 构建打印内容
				let printContent = this.buildPrintContent();

				// 打开新窗口并打印
				let newWindow = window.open('_blank');
				if (!newWindow) {
					this.$message.error('无法打开打印窗口，请检查浏览器弹窗设置');
					return;
				}

				newWindow.document.write(printContent);
				newWindow.document.close();

				// 等待内容加载完成后打印
				setTimeout(() => {
					newWindow.print();
					// 打印后可以选择关闭窗口，但通常浏览器会提示用户
					// newWindow.close();
				}, 300);
			},
			// 构建打印内容
			buildPrintContent() {
				const foundStore = this.storeOptions.find(s => s.id === this.dataForm.applicationStoreId);
				const storeName = (foundStore && foundStore.dm) || this.dataForm.applicationStoreId || '无';
				const approveStatus = this.dataForm.approveStatus || '未审批';
				const approveTime = this.dataForm.approveTime ? this.formatDate(this.dataForm.approveTime) : '无';

				// 构建购买物品清单表格
				let purchaseTableRows = '';
				if (this.selectedPurchaseRecords && this.selectedPurchaseRecords.length > 0) {
					this.selectedPurchaseRecords.forEach((item, index) => {
						purchaseTableRows += `
							<tr>
								<td style="text-align: center;">${index + 1}</td>
								<td>${item.reimbursementCategoryName || '无'}</td>
								<td style="text-align: right;">${item.unitPrice || '0.00'}</td>
								<td style="text-align: center;">${item.quantity || '0'}</td>
								<td style="text-align: right;">${item.amount || '0.00'}</td>
								<td>${item.purchaseTime ? this.formatDate(item.purchaseTime) : '无'}</td>
								<td>${item.memo || '无'}</td>
							</tr>
						`;
					});
				} else {
					purchaseTableRows = '<tr><td colspan="7" style="text-align: center;">暂无数据</td></tr>';
				}

				return `
					<!DOCTYPE html>
					<html>
					<head>
						<meta charset="UTF-8">
						<title>报销申请单</title>
						<style>
							* {
								margin: 0;
								padding: 0;
								box-sizing: border-box;
							}
							body {
								font-family: "Microsoft YaHei", Arial, sans-serif;
								font-size: 13px;
								padding: 15px;
								color: #333;
							}
							.print-header {
								text-align: center;
								margin-bottom: 15px;
								border-bottom: 2px solid #333;
								padding-bottom: 10px;
							}
							.print-header h1 {
								font-size: 22px;
								font-weight: bold;
								margin-bottom: 5px;
							}
							.print-info {
								margin-bottom: 12px;
							}
							.print-info table {
								width: 100%;
								border-collapse: collapse;
								margin-bottom: 12px;
							}
							.print-info table td {
								padding: 6px 10px;
								border: 1px solid #ddd;
							}
							.print-info table td:first-child {
								background-color: #f5f5f5;
								font-weight: bold;
								width: 120px;
								text-align: right;
							}
							.print-table {
								width: 100%;
								border-collapse: collapse;
								margin-bottom: 12px;
							}
							.print-table thead {
								display: table-header-group;
							}
							.print-table tbody {
								display: table-row-group;
							}
							.print-table th,
							.print-table td {
								border: 1px solid #ddd;
								padding: 5px 6px;
								text-align: left;
								font-size: 12px;
							}
							.print-table th {
								background-color: #f5f5f5;
								font-weight: bold;
								text-align: center;
							}
							.print-table tbody tr {
								page-break-inside: avoid;
							}
							.print-footer {
								margin-top: 15px;
								padding-top: 10px;
								border-top: 1px solid #ddd;
								text-align: right;
								font-size: 11px;
								color: #666;
							}
							@media print {
								body {
									padding: 8px;
								}
								.print-header {
									page-break-after: avoid;
									margin-bottom: 12px;
									padding-bottom: 8px;
								}
								.print-info {
									page-break-after: avoid;
									margin-bottom: 10px;
								}
								.print-table {
									page-break-inside: auto;
								}
								.print-table thead {
									display: table-header-group;
								}
								.print-table tbody tr {
									page-break-inside: avoid;
									page-break-after: auto;
								}
								.print-table tbody tr:last-child {
									page-break-after: auto;
								}
								.print-footer {
									page-break-before: avoid;
									margin-top: 10px;
									padding-top: 8px;
								}
								@page {
									margin: 1cm;
								}
							}
						</style>
					</head>
					<body>
						<div class="print-header">
							<h1>报销申请单</h1>
						</div>
						<div class="print-info">
							<table>
								<tr>
									<td>申请人：</td>
									<td>${this.dataForm.applicationUserName || '无'}</td>
									<td>申请门店：</td>
									<td>${storeName}</td>
								</tr>
								<tr>
									<td>总金额：</td>
									<td>¥${this.dataForm.amount || '0.00'}</td>
									<td>审批状态：</td>
									<td>${approveStatus}</td>
								</tr>
								<tr>
									<td>审批时间：</td>
									<td colspan="3">${approveTime}</td>
								</tr>
							</table>
						</div>
						<div class="print-info">
							<h3 style="margin-bottom: 10px;">购买物品清单</h3>
							<table class="print-table">
								<thead>
									<tr>
										<th style="width: 60px;">序号</th>
										<th>分类名称</th>
										<th style="width: 100px;">单价</th>
										<th style="width: 80px;">数量</th>
										<th style="width: 100px;">总金额</th>
										<th style="width: 120px;">购买时间</th>
										<th>备注说明</th>
									</tr>
								</thead>
								<tbody>
									${purchaseTableRows}
								</tbody>
							</table>
						</div>
						<div class="print-footer">
							<p>打印时间：${new Date().toLocaleString('zh-CN')}</p>
						</div>
					</body>
					</html>
				`;
			},
		}
	}
</script>