antissoft / lvqianmeiye_ERP

<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 prop="attachment" label="附件" width="180" align="left">
								<template slot-scope="scope">
									<div v-if="scope.row.attachment && scope.row.attachment.length > 0" class="attachment-list">
										<div 
											v-for="(file, index) in scope.row.attachment" 
											:key="index"
											class="attachment-item"
											@click="handleAttachmentClick(file, scope.row.attachment)">
											<i class="el-icon-paperclip"></i>
											<span class="attachment-name" :title="file.name || '文件'">{{ file.name || '文件' }}</span>
										</div>
									</div>
									<span v-else>无</span>
								</template>
							</el-table-column>
							<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-dialog 
					title="图片预览" 
					:visible.sync="imagePreviewVisible" 
					width="800px"
					append-to-body>
					<div style="text-align: center;">
						<el-image 
							:src="previewImageUrl" 
							style="height: 600px;width: 100%;">
						</el-image>
					</div>
				</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>
		</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: [], // 门店选项列表
				imagePreviewVisible: false, // 图片预览对话框显示状态
				previewImageUrl: '', // 预览的图片URL
				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);
			},
			// 处理附件点击
			handleAttachmentClick(file, attachmentList) {
				if (!file || !file.url) {
					this.$message.warning('附件URL不存在');
					return;
				}
				
				// 判断文件类型
				const fileExtension = this.getFileExtension(file.name || file.url);
				const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
				
				// 构建完整的URL（如果url是相对路径，需要加上基础URL）
				let fullUrl = file.url;
				if (file.url && !file.url.startsWith('http')) {
					// 如果url是相对路径，需要加上基础URL
					const baseUrl = (this.define && this.define.comUrl) || window.location.origin;
					fullUrl = baseUrl + file.url;
				}
				
				if (imageExtensions.includes(fileExtension.toLowerCase())) {
					// 图片类型：预览
					this.previewImageUrl = fullUrl;
					this.imagePreviewVisible = true;
				} else {
					// 其他类型：下载
					this.downloadFile(fullUrl, file.name || file.fileId);
				}
			},
			// 获取文件扩展名
			getFileExtension(fileName) {
				if (!fileName) return '';
				const lastDot = fileName.lastIndexOf('.');
				return lastDot > -1 ? fileName.substring(lastDot + 1) : '';
			},
			// 下载文件
			downloadFile(url, fileName) {
				const link = document.createElement('a');
				link.href = url;
				link.download = fileName || 'download';
				link.target = '_blank';
				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link);
			},
			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;
				}
				
				// 批量加载购买记录
				Promise.all(ids.map(id => {
					return request({
						url: `/api/Extend/LqPurchaseRecords/${id}`,
						method: 'GET'
					}).then(res => res.data).catch(() => null);
				})).then(results => {
					this.selectedPurchaseRecords = results.filter(item => item !== null);
					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);
					
					// 如果有未找到的记录，提示用户
					const foundCount = this.selectedPurchaseRecords.length;
					if (foundCount < ids.length) {
						this.$message.warning(`有 ${ids.length - foundCount} 条购买记录未找到，可能已被删除`);
					}
				}).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(() => {
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
.attachment-list {
	.attachment-item {
		display: flex;
		align-items: center;
		padding: 4px 0;
		cursor: pointer;
		color: #409EFF;
		transition: color 0.3s;
		
		&:hover {
			color: #66b1ff;
		}
		
		i {
			margin-right: 4px;
			font-size: 14px;
		}
		
		.attachment-name {
			font-size: 12px;
			max-width: 120px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
</style>