From 07c554d7c7dbb308012e604948118eb153ab93cd Mon Sep 17 00:00:00 2001
From: liyu1201 <1492230202@qq.com>
Date: Mon, 8 Dec 2025 13:34:04 +0800
Subject: [PATCH] 报销

---
 antis-ncc-admin/.env.development                                                 |   4 ++--
 antis-ncc-admin/src/views/lqReimbursementApplication copy/ExportBox.vue          |  66 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 antis-ncc-admin/src/views/lqReimbursementApplication copy/Form.vue               | 909 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 antis-ncc-admin/src/views/lqReimbursementApplication copy/detail.vue             | 709 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 antis-ncc-admin/src/views/lqReimbursementApplication copy/index.vue              | 362 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 antis-ncc-admin/src/views/lqReimbursementApplication/ExportBox.vue               |  66 ------------------------------------------------------------------
 antis-ncc-admin/src/views/lqReimbursementApplication/Form.vue                    | 909 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 antis-ncc-admin/src/views/lqReimbursementApplication/approval-history-dialog.vue | 217 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 antis-ncc-admin/src/views/lqReimbursementApplication/detail-dialog.vue           | 579 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 antis-ncc-admin/src/views/lqReimbursementApplication/detail.vue                  | 709 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 antis-ncc-admin/src/views/lqReimbursementApplication/index.vue                   | 987 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 绿纤uni-app/common/config.js                                                   |   4 ++--
 12 files changed, 3485 insertions(+), 2036 deletions(-)
 create mode 100644 antis-ncc-admin/src/views/lqReimbursementApplication copy/ExportBox.vue
 create mode 100644 antis-ncc-admin/src/views/lqReimbursementApplication copy/Form.vue
 create mode 100644 antis-ncc-admin/src/views/lqReimbursementApplication copy/detail.vue
 create mode 100644 antis-ncc-admin/src/views/lqReimbursementApplication copy/index.vue
 delete mode 100644 antis-ncc-admin/src/views/lqReimbursementApplication/ExportBox.vue
 delete mode 100644 antis-ncc-admin/src/views/lqReimbursementApplication/Form.vue
 create mode 100644 antis-ncc-admin/src/views/lqReimbursementApplication/approval-history-dialog.vue
 create mode 100644 antis-ncc-admin/src/views/lqReimbursementApplication/detail-dialog.vue
 delete mode 100644 antis-ncc-admin/src/views/lqReimbursementApplication/detail.vue

diff --git a/antis-ncc-admin/.env.development b/antis-ncc-admin/.env.development
index f6590fa..c236b7d 100644
--- a/antis-ncc-admin/.env.development
+++ b/antis-ncc-admin/.env.development
@@ -2,7 +2,7 @@
 
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
 # VUE_APP_BASE_API = 'https://erp.lvqianmeiye.com'
-# VUE_APP_BASE_API = 'http://erp_test.lvqianmeiye.com'
-VUE_APP_BASE_API = 'http://localhost:2011'
+VUE_APP_BASE_API = 'http://erp_test.lvqianmeiye.com'
+# VUE_APP_BASE_API = 'http://localhost:2011'
 # VUE_APP_BASE_API = 'http://localhost:2011'
 VUE_APP_BASE_WSS = 'ws://192.168.110.45:2011/websocket'
diff --git a/antis-ncc-admin/src/views/lqReimbursementApplication copy/ExportBox.vue b/antis-ncc-admin/src/views/lqReimbursementApplication copy/ExportBox.vue
new file mode 100644
index 0000000..4fc5c07
--- /dev/null
+++ b/antis-ncc-admin/src/views/lqReimbursementApplication copy/ExportBox.vue
@@ -0,0 +1,66 @@
+<template>
+  <el-dialog title="导出数据" :close-on-click-modal="false" :visible.sync="visible"
+    class="NCC-dialog NCC-dialog_center" lock-scroll width="600px">
+    <el-form label-position="top" label-width="80px">
+      <el-form-item label="数据选择">
+        <el-radio-group v-model="type">
+          <el-radio :label="0">当前页面数据</el-radio>
+          <el-radio :label="1">全部页面数据</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="导出字段">
+        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
+          @change="handleCheckAllChange">全选</el-checkbox>
+        <el-checkbox-group v-model="columns" @change="handleCheckedChange">
+          <el-checkbox v-for="item in columnList" :label="item.prop" :key="item.prop">
+            {{item.label}}
+          </el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible=false">取 消</el-button>
+      <el-button type="primary" @click="downLoad">导 出</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      btnLoading: false,
+      type: 0,
+      columns: [],
+      checkAll: true,
+      isIndeterminate: false,
+      columnList: []
+    }
+  },
+  methods: {
+    init(columnList) {
+      this.visible = true
+      this.columnList = columnList
+      this.columns = columnList.map(o => o.prop)
+    },
+    handleCheckAllChange(val) {
+      this.columns = val ? this.columnList.map(o => o.prop) : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.columnList.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.columnList.length;
+    },
+    downLoad() {
+      this.$emit('download', { dataType: this.type, selectKey: this.columns.join(',') })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+>>> .el-dialog__body {
+  padding: 20px !important;
+}
+</style>
\ No newline at end of file
diff --git a/antis-ncc-admin/src/views/lqReimbursementApplication copy/Form.vue b/antis-ncc-admin/src/views/lqReimbursementApplication copy/Form.vue
new file mode 100644
index 0000000..0b1dce9
--- /dev/null
+++ b/antis-ncc-admin/src/views/lqReimbursementApplication copy/Form.vue
@@ -0,0 +1,909 @@
+<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="approveStatus">
+						<span class="info-value" :class="{'status-approved': dataForm.approveStatus === '已审批', 'status-pending': dataForm.approveStatus === '未审批'}">
+							{{ dataForm.approveStatus || '无' }}
+						</span>
+					</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="createUserStoreId" label="门店" align="left">
+								<template slot-scope="scope">
+									{{ getStoreName(scope.row.createUserStoreId) }}
+								</template>
+							</el-table-column>
+							<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="100" align="left">
+								<template slot-scope="scope">
+									<div v-if="scope.row.attachment && scope.row.attachment.length > 0" class="attachment-list">
+										<!-- 	v-for="(file, index) in scope.row.attachment" 
+											:key="index" -->
+										<div> 
+											<i class="el-icon-paperclip"></i>
+											<span class="attachment-name">{{ scope.row.attachment.length + '个文件' }}</span>
+										</div>
+										<div class="attachment-item">
+											<el-image :src="baseUrl + scope.row.attachment[0].url" fit="contain" :style="{
+												width: '100%',
+												height: '100px',
+												display: 'block',
+												margin: '0 auto'
+											}" :preview-src-list="getPreviewSrcList(scope.row.attachment)">
+											</el-image>
+											
+										</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="600px"
+				append-to-body>
+				<div class="image-preview-container">
+					<div class="image-wrapper">
+						<el-image 
+							:src="previewImageUrl" 
+							fit="contain"
+							:style="{
+								maxWidth: '100%',
+								maxHeight: '100%',
+								display: 'block',
+								margin: '0 auto'
+							}">
+						</el-image>
+					</div>
+				</div>
+			</el-dialog>
+			</el-form>
+		</el-row>
+		<span slot="footer" class="dialog-footer">
+			<el-button type="warning" @click="handlePrint" v-if="dataForm.id && dataForm.approveStatus === '已审批'">打 印</el-button>
+			<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 {
+				baseUrl: process.env.VUE_APP_BASE_API,
+				loading: false,
+				visible: false,
+				isDetail: false,
+				purchaseDialogVisible: false,
+				purchaseListLoading: false,
+				purchaseList: [],
+				selectedPurchaseRecords: [],
+				tempSelectedPurchaseRecords: [], // 弹窗中临时选中的记录
+				storeOptions: [], // 门店选项列表
+				userMap: {}, // 用户信息映射
+				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: {
+			getPreviewSrcList(attachment) {
+				return attachment.map(item => this.baseUrl + item.url);
+			},
+			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);
+							}
+							// 加载用户信息（用于打印）
+							this.loadUserInfo();
+						})
+					} 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', false);
+							}
+						});
+					})
+				}).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', false);
+							}
+						});
+					})
+				}).catch(() => {
+				});
+			},
+			// 加载用户信息
+			loadUserInfo() {
+				const userIds = []
+				if (this.dataForm.approveUser) {
+					userIds.push(this.dataForm.approveUser)
+				}
+				
+				// 去重
+				const uniqueUserIds = [...new Set(userIds)]
+				
+				// 批量加载用户信息
+				Promise.all(uniqueUserIds.map(userId => {
+					return request({
+						url: `/api/permission/Users/${userId}`,
+						method: 'GET'
+					}).then(res => {
+						if (res.data) {
+							this.userMap[userId] = res.data.realName || res.data.account || userId
+						}
+					}).catch(() => {
+						this.userMap[userId] = userId
+					})
+				}))
+			},
+			// 获取门店名称
+			getStoreName(storeId) {
+				if (!storeId) return ''
+				const store = this.storeOptions.find(item => item.id === storeId)
+				return store ? store.dm : ''
+			},
+			// 获取用户名称
+			getUserName(userId) {
+				if (!userId) return ''
+				return this.userMap[userId] || userId
+			},
+			// 打印功能
+			handlePrint() {
+				if (!this.dataForm.id) {
+					this.$message.warning('无法打印，数据未加载完成')
+					return
+				}
+				
+				// 检查是否已审批
+				if (this.dataForm.approveStatus !== '已审批') {
+					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()
+				}, 300)
+			},
+			// 构建打印内容
+			buildPrintContent() {
+				const storeName = this.getStoreName(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) => {
+						const storeName = this.getStoreName(item.createUserStoreId) || '无'
+						purchaseTableRows += `
+							<tr>
+								<td style="text-align: center; width: 55px;">${index + 1}</td>
+								<td>${item.reimbursementCategoryName || '无'}</td>
+								<td>${storeName}</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="8" 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.id || '无'}</td>
+									<td>申请人：</td>
+									<td>${this.dataForm.applicationUserName || '无'}</td>
+								</tr>
+								<tr>
+									<td>申请门店：</td>
+									<td>${storeName}</td>
+									<td>申请时间：</td>
+									<td>${this.dataForm.applicationTime ? this.formatDate(this.dataForm.applicationTime) : '无'}</td>
+								</tr>
+								<tr>
+									<td>总金额：</td>
+									<td>¥${this.dataForm.amount || '0.00'}</td>
+									<td>审批状态：</td>
+									<td>${approveStatus}</td>
+								</tr>
+								<tr>
+									<td>审批人：</td>
+									<td>${this.getUserName(this.dataForm.approveUser) || '无'}</td>
+									<td>审批时间：</td>
+									<td>${approveTime}</td>
+								</tr>
+							</table>
+						</div>
+						
+						<div class="print-info">
+							<h3 style="margin-bottom: 10px;">购买物品清单</h3>
+							<table class="print-table">
+								<thead>
+									<tr>
+										<th style="width: 55px;">序号</th>
+										<th>分类名称</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>
+<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;
+		}
+	}
+}
+
+.image-preview-container {
+	.image-wrapper {
+		// min-height: 200px;
+		// max-height: 450px;
+		overflow: auto;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		// padding: 20px;
+		background-color: #f5f5f5;
+		border-radius: 4px;
+		// margin-bottom: 15px;
+		box-sizing: border-box;
+		::v-deep .el-image {
+			display: block;
+		}
+	}
+}
+</style>
diff --git a/antis-ncc-admin/src/views/lqReimbursementApplication copy/detail.vue b/antis-ncc-admin/src/views/lqReimbursementApplication copy/detail.vue
new file mode 100644
index 0000000..94335e6
--- /dev/null
+++ b/antis-ncc-admin/src/views/lqReimbursementApplication copy/detail.vue
@@ -0,0 +1,709 @@
+<template>
+	<el-dialog 
+		title="报销申请详情" 
+		:visible.sync="visible" 
+		:close-on-click-modal="false"
+		class="NCC-dialog NCC-dialog_center" 
+		width="1200px"
+		@close="handleClose"
+		@update:visible="handleVisibleChange">
+		<div class="detail-content" v-loading="loading">
+			<!-- 基本信息卡片 -->
+			<el-card class="info-card" shadow="hover">
+				<div slot="header" class="card-header">
+					<i class="el-icon-document"></i>
+					<span class="card-title">基本信息</span>
+				</div>
+				<el-row :gutter="20">
+					<el-col :span="8">
+						<div class="info-item">
+							<label class="info-label">申请编号：</label>
+							<span class="info-value">{{ dataForm.id || '无' }}</span>
+						</div>
+					</el-col>
+					<el-col :span="8">
+						<div class="info-item">
+							<label class="info-label">申请人：</label>
+							<span class="info-value">{{ dataForm.applicationUserName || '无' }}</span>
+						</div>
+					</el-col>
+					<el-col :span="8">
+						<div class="info-item">
+							<label class="info-label">门店：</label>
+							<span class="info-value">{{ getStoreName(dataForm.applicationStoreId) || '无' }}</span>
+						</div>
+					</el-col>
+					<el-col :span="8">
+						<div class="info-item">
+							<label class="info-label">申请时间：</label>
+							<span class="info-value">{{ formatDate(dataForm.applicationTime) || '无' }}</span>
+						</div>
+					</el-col>
+					<el-col :span="8">
+						<div class="info-item">
+							<label class="info-label">总金额：</label>
+							<span class="info-value amount">{{ dataForm.amount || '无' }}</span>
+						</div>
+					</el-col>
+					<el-col :span="8">
+						<div class="info-item">
+							<label class="info-label">审批状态：</label>
+							<span class="info-value" :class="{'status-approved': dataForm.approveStatus === '已审批', 'status-pending': dataForm.approveStatus === '未审批'}">
+								{{ dataForm.approveStatus || '无' }}
+							</span>
+						</div>
+					</el-col>
+				</el-row>
+			</el-card>
+
+			<!-- 购买物品清单卡片 -->
+			<el-card class="info-card" shadow="hover" v-if="purchaseRecords && purchaseRecords.length > 0">
+				<div slot="header" class="card-header">
+					<i class="el-icon-shopping-cart-full"></i>
+					<span class="card-title">购买物品清单</span>
+				</div>
+				<el-table 
+					:data="purchaseRecords" 
+					border
+					size="small"
+					style="width: 100%">
+					<el-table-column type="index" label="序号" width="60" align="center" />
+					<el-table-column prop="reimbursementCategoryName" label="分类名称" />
+					<el-table-column prop="createUserStoreId" label="门店" align="left">
+                        <template slot-scope="scope">
+                            {{ getStoreName(scope.row.createUserStoreId) }}
+                        </template>
+                    </el-table-column>
+					<el-table-column prop="unitPrice" label="单价" align="right" />
+					<el-table-column prop="quantity" label="数量" align="right" />
+					<el-table-column prop="amount" label="总金额" align="right" />
+					<el-table-column prop="purchaseTime" label="购买时间" width="120">
+						<template slot-scope="scope">
+							{{ formatDate(scope.row.purchaseTime) || '无' }}
+						</template>
+					</el-table-column>
+					<el-table-column prop="memo" label="备注说明" min-width="150" show-overflow-tooltip />
+					<el-table-column prop="attachment" label="附件" width="100" align="left">
+						<template slot-scope="scope">
+							<div v-if="scope.row.attachment && scope.row.attachment.length > 0" class="attachment-list">
+								<div> 
+									<i class="el-icon-paperclip"></i>
+									<span class="attachment-name">{{ scope.row.attachment.length + '个文件' }}</span>
+								</div>
+								<div class="attachment-item">
+									<el-image :src="baseUrl + scope.row.attachment[0].url" fit="contain" :style="{
+										width: '100%',
+										height: '100px',
+										display: 'block',
+										margin: '0 auto'
+									}" :preview-src-list="getPreviewSrcList(scope.row.attachment)">
+									</el-image>
+								</div>
+							</div>
+							<span v-else>无</span>
+						</template>
+					</el-table-column>
+				</el-table>
+			</el-card>
+
+			<!-- 审批信息卡片 -->
+			<el-card class="info-card" shadow="hover" v-if="dataForm.approveStatus === '已审批'">
+				<div slot="header" class="card-header">
+					<i class="el-icon-check"></i>
+					<span class="card-title">审批信息</span>
+				</div>
+				<el-row :gutter="20">
+					<el-col :span="8">
+						<div class="info-item">
+							<label class="info-label">审批人：</label>
+							<span class="info-value">{{ getUserName(dataForm.approveUser) || '无' }}</span>
+						</div>
+					</el-col>
+					<el-col :span="8">
+						<div class="info-item">
+							<label class="info-label">审批时间：</label>
+							<span class="info-value">{{ formatDate(dataForm.approveTime) || '无' }}</span>
+						</div>
+					</el-col>
+				</el-row>
+			</el-card>
+		</div>
+		<span slot="footer" class="dialog-footer">
+			<el-button type="warning" @click="handlePrint" v-if="dataForm.id">打 印</el-button>
+			<el-button @click="visible = false">关 闭</el-button>
+		</span>
+		
+		<!-- 图片预览对话框 -->
+		<el-dialog 
+			title="图片预览" 
+			:visible.sync="imagePreviewVisible" 
+			width="600px"
+			append-to-body>
+			<div class="image-preview-container">
+				<div class="image-wrapper">
+					<el-image 
+						:src="previewImageUrl" 
+						fit="contain"
+						:style="{
+							maxWidth: '100%',
+							maxHeight: '100%',
+							display: 'block',
+							margin: '0 auto'
+						}">
+					</el-image>
+				</div>
+			</div>
+		</el-dialog>
+	</el-dialog>
+</template>
+
+<script>
+import request from '@/utils/request'
+
+export default {
+	name: 'ReimbursementApplicationDetail',
+	data() {
+		return {
+			baseUrl: process.env.VUE_APP_BASE_API,
+			visible: false,
+			loading: false,
+			dataForm: {},
+			purchaseRecords: [],
+			storeOptions: [],
+			userMap: {},
+			imagePreviewVisible: false, // 图片预览对话框显示状态
+			previewImageUrl: '' // 预览的图片URL
+		}
+	},
+	methods: {
+		init(id) {
+			this.visible = true
+			this.loading = true
+			this.dataForm = {}
+			this.purchaseRecords = []
+			this.userMap = {}
+			
+			// 加载门店列表
+			this.loadStoreOptions()
+			
+			// 加载详情数据
+			request({
+				url: `/api/Extend/LqReimbursementApplication/${id}`,
+				method: 'GET'
+			}).then(res => {
+				this.dataForm = res.data || {}
+				// 如果有关联的购买记录，加载购买记录详情
+				if (this.dataForm.purchaseRecordsId) {
+					this.loadPurchaseRecords(this.dataForm.purchaseRecordsId)
+				}
+				// 加载用户信息
+				this.loadUserInfo()
+				this.loading = false
+			}).catch(() => {
+				this.loading = false
+				this.$message.error('加载详情失败')
+			})
+		},
+		// 加载门店列表
+		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 = []
+			})
+		},
+		// 加载购买记录
+		loadPurchaseRecords(purchaseRecordsId) {
+			if (!purchaseRecordsId) {
+				this.purchaseRecords = []
+				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.purchaseRecords = []
+				return
+			}
+			
+			// 批量加载购买记录
+			Promise.all(ids.map(id => {
+				return request({
+					url: `/api/Extend/LqPurchaseRecords/${id}`,
+					method: 'GET'
+				}).then(res => res.data).catch(() => null)
+			})).then(results => {
+				this.purchaseRecords = results.filter(item => item !== null)
+			})
+		},
+		// 加载用户信息
+		loadUserInfo() {
+			const userIds = []
+			if (this.dataForm.approveUser) {
+				userIds.push(this.dataForm.approveUser)
+			}
+			
+			// 去重
+			const uniqueUserIds = [...new Set(userIds)]
+			
+			// 批量加载用户信息
+			Promise.all(uniqueUserIds.map(userId => {
+				return request({
+					url: `/api/permission/Users/${userId}`,
+					method: 'GET'
+				}).then(res => {
+					if (res.data) {
+						this.userMap[userId] = res.data.realName || res.data.account || userId
+					}
+				}).catch(() => {
+					this.userMap[userId] = userId
+				})
+			}))
+		},
+		// 获取门店名称
+		getStoreName(storeId) {
+			if (!storeId) return ''
+			const store = this.storeOptions.find(item => item.id === storeId)
+			return store ? store.dm : ''
+		},
+		// 获取用户名称
+		getUserName(userId) {
+			if (!userId) return ''
+			return this.userMap[userId] || userId
+		},
+		// 格式化日期
+		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}`
+		},
+		// 关闭弹窗
+		handleClose() {
+			this.visible = false
+			this.dataForm = {}
+			this.purchaseRecords = []
+			this.userMap = {}
+			this.imagePreviewVisible = false
+			this.previewImageUrl = ''
+			this.$emit('close')
+		},
+		// 获取预览图片列表
+		getPreviewSrcList(attachment) {
+			return attachment.map(item => this.baseUrl + item.url)
+		},
+		// 处理附件点击
+		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)
+		},
+		// 处理 visible 变化
+		handleVisibleChange(val) {
+			this.visible = val
+			if (!val) {
+				this.handleClose()
+			}
+		},
+		// 打印功能
+		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()
+			}, 300)
+		},
+		// 构建打印内容
+		buildPrintContent() {
+			const storeName = this.getStoreName(this.dataForm.applicationStoreId) || '无'
+			const approveStatus = this.dataForm.approveStatus || '未审批'
+			const approveTime = this.dataForm.approveTime ? this.formatDate(this.dataForm.approveTime) : '无'
+			
+			// 构建购买物品清单表格
+			let purchaseTableRows = ''
+			if (this.purchaseRecords && this.purchaseRecords.length > 0) {
+				this.purchaseRecords.forEach((item, index) => {
+					const storeName = this.getStoreName(item.createUserStoreId) || '无'
+					purchaseTableRows += `
+						<tr>
+							<td style="text-align: center; width: 55px;">${index + 1}</td>
+							<td>${item.reimbursementCategoryName || '无'}</td>
+							<td>${storeName}</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="8" 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.id || '无'}</td>
+								<td>申请人：</td>
+								<td>${this.dataForm.applicationUserName || '无'}</td>
+							</tr>
+							<tr>
+								<td>申请门店：</td>
+								<td>${storeName}</td>
+								<td>申请时间：</td>
+								<td>${this.dataForm.applicationTime ? this.formatDate(this.dataForm.applicationTime) : '无'}</td>
+							</tr>
+							<tr>
+								<td>总金额：</td>
+								<td>¥${this.dataForm.amount || '0.00'}</td>
+								<td>审批状态：</td>
+								<td>${approveStatus}</td>
+							</tr>
+							<tr>
+								<td>审批人：</td>
+								<td>${this.getUserName(this.dataForm.approveUser) || '无'}</td>
+								<td>审批时间：</td>
+								<td>${approveTime}</td>
+							</tr>
+						</table>
+					</div>
+					
+					<div class="print-info">
+						<h3 style="margin-bottom: 10px;">购买物品清单</h3>
+						<table class="print-table">
+							<thead>
+								<tr>
+									<th style="width: 55px;">序号</th>
+									<th>分类名称</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>
+
+<style lang="scss" scoped>
+/* 详情内容 */
+.detail-content {
+	//max-height: 70vh;
+	overflow-y: auto;
+	padding: 0 10px;
+}
+
+/* 信息卡片 */
+.info-card {
+	margin-bottom: 20px;
+	border-radius: 8px;
+	overflow: hidden;
+}
+
+.card-header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 16px;
+	font-weight: 600;
+	color: #303133;
+}
+
+.card-header i {
+	font-size: 18px;
+	color: #409EFF;
+}
+
+.card-title {
+	font-size: 16px;
+	font-weight: 600;
+}
+
+/* 信息项 */
+.info-item {
+	margin-bottom: 16px;
+}
+
+.info-label {
+	display: inline-block;
+	font-weight: 500;
+	color: #606266;
+	margin-right: 8px;
+}
+
+.info-value {
+	color: #303133;
+	font-size: 14px;
+}
+
+.info-value.amount {
+	color: #E6A23C;
+	font-weight: 600;
+}
+
+.status-approved {
+	color: #67C23A;
+	font-weight: 600;
+}
+
+.status-pending {
+	color: #E6A23C;
+	font-weight: 600;
+}
+
+/* 附件列表样式 */
+.attachment-list {
+	> div:first-child {
+		display: flex;
+		align-items: center;
+		padding: 4px 0;
+		color: #409EFF;
+		
+		i {
+			margin-right: 4px;
+			font-size: 14px;
+		}
+		
+		.attachment-name {
+			font-size: 12px;
+		}
+	}
+	
+	.attachment-item {
+		margin-top: 4px;
+		cursor: pointer;
+		
+		::v-deep .el-image {
+			border-radius: 4px;
+		}
+	}
+}
+
+/* 图片预览容器样式 */
+.image-preview-container {
+	.image-wrapper {
+		// min-height: 200px;
+		// max-height: 450px;
+		overflow: auto;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		// padding: 20px;
+		background-color: #f5f5f5;
+		border-radius: 4px;
+		// margin-bottom: 15px;
+		box-sizing: border-box;
+		::v-deep .el-image {
+			display: block;
+		}
+	}
+}
+</style>
+
diff --git a/antis-ncc-admin/src/views/lqReimbursementApplication copy/index.vue b/antis-ncc-admin/src/views/lqReimbursementApplication copy/index.vue
new file mode 100644
index 0000000..10c0d4d
--- /dev/null
+++ b/antis-ncc-admin/src/views/lqReimbursementApplication copy/index.vue
@@ -0,0 +1,362 @@
+<template>
+	<div class="NCC-common-layout">
+		<div class="NCC-common-layout-center">
+			<el-row class="NCC-common-search-box" :gutter="16">
+				<el-form @submit.native.prevent>
+		
+					<el-col :span="6">
+						<el-form-item label="申请时间">
+							<el-date-picker v-model="query.applicationTime" type="daterange" value-format="timestamp" format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
+							</el-date-picker>
+						</el-form-item>
+					</el-col>
+					<el-col :span="6">
+						<el-form-item label="申请人">
+							<userSelect v-model="query.applicationUserId" placeholder="请选择申请人" clearable />	
+						</el-form-item>
+					</el-col>
+                    <el-col :span="6">
+						<el-form-item label="门店">
+							<el-select v-model="query.applicationStoreId" placeholder="请选择门店" clearable filterable style="width: 100%">
+								<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>
+					<template v-if="showAll">
+                        <el-col :span="6">
+                            <el-form-item label="审批状态">
+							<el-select v-model="query.approveStatus" placeholder="请选择审批状态" clearable style="width: 100%">
+								<el-option label="已审批" value="已审批"></el-option>
+                                <el-option label="未通过" value="未通过"></el-option>
+								<el-option label="未审批" value="未审批"></el-option>
+							</el-select>
+						</el-form-item>
+                        </el-col>
+                        <!-- <el-col :span="6">
+							<el-form-item label="审批时间">
+								<el-date-picker v-model="query.approveTime" type="daterange" value-format="timestamp" format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
+								</el-date-picker>
+							</el-form-item>
+						</el-col> -->
+					
+					<!-- <el-col :span="6">
+						<el-form-item label="总金额">
+							<el-input v-model="query.amount" placeholder="总金额" clearable />	
+						</el-form-item>
+					</el-col> -->
+					<!-- <el-col :span="6">
+						<el-form-item label="审批人">
+							<userSelect v-model="query.approveUser" placeholder="请选择审批人" />
+						</el-form-item>
+					</el-col>
+					<el-col :span="6">
+						<el-form-item label="审批结果">
+							<el-input v-model="query.approveStatus" placeholder="审批结果" clearable />	
+						</el-form-item>
+					</el-col> -->
+					<!-- <el-col :span="6">
+						<el-form-item label="关联购买编号">
+							<el-input v-model="query.purchaseRecordsId" placeholder="关联购买编号" clearable />	
+						</el-form-item>
+					</el-col> -->
+					</template>
+					<el-col :span="6">
+						<el-form-item>
+							<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
+							<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
+							<el-button type="text" icon="el-icon-arrow-down" @click="showAll=true" v-if="!showAll">展开</el-button>
+							<el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>收起</el-button>
+						</el-form-item>
+					</el-col>
+				</el-form>
+			</el-row>
+			<div class="NCC-common-layout-main NCC-flex-main">
+				<div class="NCC-common-head">
+					<div>
+						<el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button>
+                        <el-button type="text" icon="el-icon-delete" @click="handleBatchRemoveDel()">批量删除</el-button>
+						<!-- <el-button type="text" icon="el-icon-download" @click="exportData()">导出</el-button>
+						<el-button type="text" icon="el-icon-delete" @click="handleBatchRemoveDel()">批量删除</el-button> -->
+					</div>
+					<div class="NCC-common-head-right">
+						<el-tooltip effect="dark" content="刷新" placement="top">
+							<el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="reset()" />
+						</el-tooltip>
+						<screenfull isContainer />
+					</div>
+				</div>
+                <NCC-table v-loading="listLoading" :data="list" has-c @selection-change="handleSelectionChange">
+					<!-- <el-table-column prop="id" label="申请编号" align="left" /> -->
+					<!-- <el-table-column prop="applicationUserId" label="申请人编号" align="left" /> -->
+					<el-table-column prop="applicationUserName" label="申请人" align="left" />
+					<el-table-column prop="applicationStoreId" label="门店" align="left">
+						<template slot-scope="scope">
+							<div class="store-info">
+								<i class="el-icon-shop"></i>
+								<span>{{ getStoreName(scope.row.applicationStoreId) || '无' }}</span>
+							</div>
+						</template>
+					</el-table-column>
+					<el-table-column prop="applicationTime" label="申请时间" align="left" :formatter="ncc.tableDateFormat" />
+					<el-table-column prop="amount" label="总金额" align="left" />
+                    <el-table-column prop="approveStatus" label="审批状态" align="left"/>
+					<el-table-column prop="approveTime" label="审批时间" align="left" :formatter="ncc.tableDateFormat" />
+					<!-- <el-table-column prop="approveUser" label="审批人" align="left" />
+					<el-table-column prop="approveStatus" label="审批结果" align="left" /> -->
+					<!-- <el-table-column prop="purchaseRecordsId" label="关联购买编号" align="left" /> -->
+					<el-table-column label="操作" fixed="right" width="100">
+							<template slot-scope="scope">
+							<el-button type="text" v-if="scope.row.approveStatus === '未审批'" @click="addOrUpdateHandle(scope.row.id)" >编辑</el-button>
+							<el-button type="text" v-if="scope.row.approveStatus === '已审批'" @click="showDetail(scope.row.id)" >查看</el-button>
+                            <!-- <el-button type="text" v-if="scope.row.approveStatus === '未审批'" @click="handleDel(scope.row.id)" class="NCC-table-delBtn" >删除</el-button> -->
+						</template>
+					</el-table-column>
+				</NCC-table>
+                <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
+            </div>
+        </div>
+		<NCC-Form v-if="formVisible" ref="NCCForm" @refresh="refresh" />
+		<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
+		<DetailDialog v-if="detailVisible" ref="DetailDialog" @close="handleDetailClose" />
+	</div>
+</template>
+<script>
+    import request from '@/utils/request'
+    import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
+    import { getStoreSelector } from '@/api/extend/store'
+    import NCCForm from './Form'
+    import ExportBox from './ExportBox'
+    import DetailDialog from './detail'
+    import { previewDataInterface } from '@/api/systemData/dataInterface'
+	export default {
+        components: { NCCForm, ExportBox, DetailDialog },
+        data() {
+            return {
+                showAll: false,
+                storeOptions: [],
+                storeMap: {},
+                detailVisible: false,
+				query: {
+                    id:undefined,
+                    applicationUserId:undefined,
+                    applicationUserName:undefined,
+                    applicationStoreId:undefined,
+                    applicationTime:undefined,
+                    amount:undefined,
+                    approveUser:undefined,
+                    approveStatus:undefined,
+                    approveTime:undefined,
+                    purchaseRecordsId:undefined,
+				},
+                list: [],
+                listLoading: true,
+                multipleSelection: [], total: 0,
+                listQuery: {
+                    currentPage: 1,
+                    pageSize: 20,
+					sort: "desc",
+                    sidx: "",
+                },
+                formVisible: false,
+                exportBoxVisible: false,
+                columnList: [
+                    { prop: 'id', label: '申请编号' },
+                    { prop: 'applicationUserId', label: '申请人编号' },
+                    { prop: 'applicationUserName', label: '申请人姓名' },
+                    { prop: 'applicationStoreId', label: '申请门店' },
+                    { prop: 'applicationTime', label: '申请时间' },
+                    { prop: 'amount', label: '总金额' },
+                    { prop: 'approveUser', label: '审批人' },
+                    { prop: 'approveStatus', label: '审批结果' },
+                    { prop: 'approveTime', label: '审批时间' },
+                    { prop: 'purchaseRecordsId', label: '关联购买编号' },
+				],
+			}
+        },
+		computed: {},
+		created() {
+			this.loadStoreOptions()
+			this.initData()
+		},
+		methods: {
+            		// 加载门店列表
+			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 = [];
+				});
+			},
+	
+			getStoreName(storeId) {
+				if (!storeId) return '无';
+				const store = this.storeOptions.find(item => item.id === storeId);
+				return store ? store.dm : '无';
+			},
+			initData() {
+                this.listLoading = true;
+                let _query = {
+                    ...this.listQuery,
+                    ...this.query
+                };
+                let query = {}
+                for (let key in _query) {
+                    if (Array.isArray(_query[key])) {
+                        query[key] = _query[key].join()
+                    } else {
+                        query[key] = _query[key]
+                    }
+                }
+                request({
+                    url: `/api/Extend/LqReimbursementApplication`,
+                    method: 'GET',
+                    data: query
+                }).then(res => {
+                    this.list = res.data.list
+                    this.total = res.data.pagination.total
+                    this.listLoading = false
+                })
+            },
+			handleDel(id) {
+                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
+                    type: 'warning'
+                }).then(() => {
+                    request({
+                        url: `/api/Extend/LqReimbursementApplication/${id}`,
+                        method: 'DELETE'
+                    }).then(res => {
+                        this.$message({
+                            type: 'success',
+                            message: res.msg,
+                            onClose: () => {
+                                this.initData()
+                            }
+                        });
+                    })
+                }).catch(() => {
+                });
+            },
+			handleSelectionChange(val) {
+                const res = val.map(item => item.id)
+                this.multipleSelection = res
+            },
+            handleBatchRemoveDel() {
+                if (!this.multipleSelection.length) {
+                    this.$message({
+                        type: 'error',
+                        message: '请选择一条数据',
+                        duration: 1500,
+                    })
+                    return
+                }
+                const ids = this.multipleSelection
+                this.$confirm('您确定要删除这些数据吗, 是否继续？', '提示', {
+                    type: 'warning'
+                }).then(() => {
+                    request({
+                        url: `/api/Extend/LqReimbursementApplication/batchRemove`,
+                        method: 'POST',
+                        data: ids ,
+                    }).then(res => {
+                        this.$message({
+                            type: 'success',
+                            message: res.msg,
+                            onClose: () => {
+                                this.initData()
+                            }
+                        });
+                    })
+                }).catch(() => { })
+            },
+			addOrUpdateHandle(id, isDetail) {
+                this.formVisible = true
+                this.$nextTick(() => {
+                    this.$refs.NCCForm.init(id, isDetail)
+                })
+            },
+			exportData() {
+                this.exportBoxVisible = true
+                this.$nextTick(() => {
+                    this.$refs.ExportBox.init(this.columnList)
+                })
+            },
+            download(data) {
+                let query = { ...data, ...this.listQuery, ...this.query }
+                request({
+                    url: `/api/Extend/LqReimbursementApplication/Actions/Export`,
+                    method: 'GET',
+                    data: query
+                }).then(res => {
+                    if (!res.data.url) return
+                    window.location.href = this.define.comUrl + res.data.url
+                    this.$refs.ExportBox.visible = false
+                    this.exportBoxVisible = false
+                })
+            },
+			search() {
+                this.listQuery = {
+                    currentPage: 1,
+                    pageSize: 20,
+                    sort: "desc",
+                    sidx: "",
+                }
+                this.initData()
+            },
+            refresh(isrRefresh) {
+                this.formVisible = false
+                if (isrRefresh) this.reset()
+            },
+            reset() {
+                for (let key in this.query) {
+                    this.query[key] = undefined
+                }
+                this.listQuery = {
+                    currentPage: 1,
+                    pageSize: 20,
+                    sort: "desc",
+                    sidx: "",
+                }
+                this.initData()
+            },
+            showDetail(id) {
+                this.detailVisible = true
+                this.$nextTick(() => {
+                    this.$refs.DetailDialog.init(id)
+                })
+            },
+            handleDetailClose() {
+                this.detailVisible = false
+            }
+		}
+    }
+</script>
+<style lang="scss" scoped>
+.store-info {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  i {
+    color: #67C23A;
+    font-size: 14px;
+  }
+
+  span {
+    color: #303133;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/antis-ncc-admin/src/views/lqReimbursementApplication/ExportBox.vue b/antis-ncc-admin/src/views/lqReimbursementApplication/ExportBox.vue
deleted file mode 100644
index 4fc5c07..0000000
--- a/antis-ncc-admin/src/views/lqReimbursementApplication/ExportBox.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <el-dialog title="导出数据" :close-on-click-modal="false" :visible.sync="visible"
-    class="NCC-dialog NCC-dialog_center" lock-scroll width="600px">
-    <el-form label-position="top" label-width="80px">
-      <el-form-item label="数据选择">
-        <el-radio-group v-model="type">
-          <el-radio :label="0">当前页面数据</el-radio>
-          <el-radio :label="1">全部页面数据</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="导出字段">
-        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
-          @change="handleCheckAllChange">全选</el-checkbox>
-        <el-checkbox-group v-model="columns" @change="handleCheckedChange">
-          <el-checkbox v-for="item in columnList" :label="item.prop" :key="item.prop">
-            {{item.label}}
-          </el-checkbox>
-        </el-checkbox-group>
-      </el-form-item>
-    </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="visible=false">取 消</el-button>
-      <el-button type="primary" @click="downLoad">导 出</el-button>
-    </span>
-  </el-dialog>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      visible: false,
-      btnLoading: false,
-      type: 0,
-      columns: [],
-      checkAll: true,
-      isIndeterminate: false,
-      columnList: []
-    }
-  },
-  methods: {
-    init(columnList) {
-      this.visible = true
-      this.columnList = columnList
-      this.columns = columnList.map(o => o.prop)
-    },
-    handleCheckAllChange(val) {
-      this.columns = val ? this.columnList.map(o => o.prop) : [];
-      this.isIndeterminate = false;
-    },
-    handleCheckedChange(value) {
-      let checkedCount = value.length;
-      this.checkAll = checkedCount === this.columnList.length;
-      this.isIndeterminate = checkedCount > 0 && checkedCount < this.columnList.length;
-    },
-    downLoad() {
-      this.$emit('download', { dataType: this.type, selectKey: this.columns.join(',') })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
->>> .el-dialog__body {
-  padding: 20px !important;
-}
-</style>
\ No newline at end of file
diff --git a/antis-ncc-admin/src/views/lqReimbursementApplication/Form.vue b/antis-ncc-admin/src/views/lqReimbursementApplication/Form.vue
deleted file mode 100644
index 0b1dce9..0000000
--- a/antis-ncc-admin/src/views/lqReimbursementApplication/Form.vue
+++ /dev/null
@@ -1,909 +0,0 @@
-<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="approveStatus">
-						<span class="info-value" :class="{'status-approved': dataForm.approveStatus === '已审批', 'status-pending': dataForm.approveStatus === '未审批'}">
-							{{ dataForm.approveStatus || '无' }}
-						</span>
-					</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="createUserStoreId" label="门店" align="left">
-								<template slot-scope="scope">
-									{{ getStoreName(scope.row.createUserStoreId) }}
-								</template>
-							</el-table-column>
-							<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="100" align="left">
-								<template slot-scope="scope">
-									<div v-if="scope.row.attachment && scope.row.attachment.length > 0" class="attachment-list">
-										<!-- 	v-for="(file, index) in scope.row.attachment" 
-											:key="index" -->
-										<div> 
-											<i class="el-icon-paperclip"></i>
-											<span class="attachment-name">{{ scope.row.attachment.length + '个文件' }}</span>
-										</div>
-										<div class="attachment-item">
-											<el-image :src="baseUrl + scope.row.attachment[0].url" fit="contain" :style="{
-												width: '100%',
-												height: '100px',
-												display: 'block',
-												margin: '0 auto'
-											}" :preview-src-list="getPreviewSrcList(scope.row.attachment)">
-											</el-image>
-											
-										</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="600px"
-				append-to-body>
-				<div class="image-preview-container">
-					<div class="image-wrapper">
-						<el-image 
-							:src="previewImageUrl" 
-							fit="contain"
-							:style="{
-								maxWidth: '100%',
-								maxHeight: '100%',
-								display: 'block',
-								margin: '0 auto'
-							}">
-						</el-image>
-					</div>
-				</div>
-			</el-dialog>
-			</el-form>
-		</el-row>
-		<span slot="footer" class="dialog-footer">
-			<el-button type="warning" @click="handlePrint" v-if="dataForm.id && dataForm.approveStatus === '已审批'">打 印</el-button>
-			<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 {
-				baseUrl: process.env.VUE_APP_BASE_API,
-				loading: false,
-				visible: false,
-				isDetail: false,
-				purchaseDialogVisible: false,
-				purchaseListLoading: false,
-				purchaseList: [],
-				selectedPurchaseRecords: [],
-				tempSelectedPurchaseRecords: [], // 弹窗中临时选中的记录
-				storeOptions: [], // 门店选项列表
-				userMap: {}, // 用户信息映射
-				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: {
-			getPreviewSrcList(attachment) {
-				return attachment.map(item => this.baseUrl + item.url);
-			},
-			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);
-							}
-							// 加载用户信息（用于打印）
-							this.loadUserInfo();
-						})
-					} 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', false);
-							}
-						});
-					})
-				}).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', false);
-							}
-						});
-					})
-				}).catch(() => {
-				});
-			},
-			// 加载用户信息
-			loadUserInfo() {
-				const userIds = []
-				if (this.dataForm.approveUser) {
-					userIds.push(this.dataForm.approveUser)
-				}
-				
-				// 去重
-				const uniqueUserIds = [...new Set(userIds)]
-				
-				// 批量加载用户信息
-				Promise.all(uniqueUserIds.map(userId => {
-					return request({
-						url: `/api/permission/Users/${userId}`,
-						method: 'GET'
-					}).then(res => {
-						if (res.data) {
-							this.userMap[userId] = res.data.realName || res.data.account || userId
-						}
-					}).catch(() => {
-						this.userMap[userId] = userId
-					})
-				}))
-			},
-			// 获取门店名称
-			getStoreName(storeId) {
-				if (!storeId) return ''
-				const store = this.storeOptions.find(item => item.id === storeId)
-				return store ? store.dm : ''
-			},
-			// 获取用户名称
-			getUserName(userId) {
-				if (!userId) return ''
-				return this.userMap[userId] || userId
-			},
-			// 打印功能
-			handlePrint() {
-				if (!this.dataForm.id) {
-					this.$message.warning('无法打印，数据未加载完成')
-					return
-				}
-				
-				// 检查是否已审批
-				if (this.dataForm.approveStatus !== '已审批') {
-					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()
-				}, 300)
-			},
-			// 构建打印内容
-			buildPrintContent() {
-				const storeName = this.getStoreName(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) => {
-						const storeName = this.getStoreName(item.createUserStoreId) || '无'
-						purchaseTableRows += `
-							<tr>
-								<td style="text-align: center; width: 55px;">${index + 1}</td>
-								<td>${item.reimbursementCategoryName || '无'}</td>
-								<td>${storeName}</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="8" 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.id || '无'}</td>
-									<td>申请人：</td>
-									<td>${this.dataForm.applicationUserName || '无'}</td>
-								</tr>
-								<tr>
-									<td>申请门店：</td>
-									<td>${storeName}</td>
-									<td>申请时间：</td>
-									<td>${this.dataForm.applicationTime ? this.formatDate(this.dataForm.applicationTime) : '无'}</td>
-								</tr>
-								<tr>
-									<td>总金额：</td>
-									<td>¥${this.dataForm.amount || '0.00'}</td>
-									<td>审批状态：</td>
-									<td>${approveStatus}</td>
-								</tr>
-								<tr>
-									<td>审批人：</td>
-									<td>${this.getUserName(this.dataForm.approveUser) || '无'}</td>
-									<td>审批时间：</td>
-									<td>${approveTime}</td>
-								</tr>
-							</table>
-						</div>
-						
-						<div class="print-info">
-							<h3 style="margin-bottom: 10px;">购买物品清单</h3>
-							<table class="print-table">
-								<thead>
-									<tr>
-										<th style="width: 55px;">序号</th>
-										<th>分类名称</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>
-<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;
-		}
-	}
-}
-
-.image-preview-container {
-	.image-wrapper {
-		// min-height: 200px;
-		// max-height: 450px;
-		overflow: auto;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		// padding: 20px;
-		background-color: #f5f5f5;
-		border-radius: 4px;
-		// margin-bottom: 15px;
-		box-sizing: border-box;
-		::v-deep .el-image {
-			display: block;
-		}
-	}
-}
-</style>
diff --git a/antis-ncc-admin/src/views/lqReimbursementApplication/approval-history-dialog.vue b/antis-ncc-admin/src/views/lqReimbursementApplication/approval-history-dialog.vue
new file mode 100644
index 0000000..711b8cf
--- /dev/null
+++ b/antis-ncc-admin/src/views/lqReimbursementApplication/approval-history-dialog.vue
@@ -0,0 +1,217 @@
+<template>
+  <el-dialog 
+    title="审批历史" 
+    :visible.sync="visible" 
+    :close-on-click-modal="false"
+    class="NCC-dialog NCC-dialog_center" 
+    width="900px"
+    @close="handleClose"
+  >
+    <div class="history-content" v-loading="loading">
+      <el-timeline v-if="historyList && historyList.length > 0">
+        <el-timeline-item
+          v-for="(item, index) in historyList"
+          :key="index"
+          :timestamp="formatDateTime(item.approvalTime)"
+          placement="top"
+          :type="getTimelineType(item.approvalResult)"
+          :icon="getTimelineIcon(item.approvalResult)"
+        >
+          <el-card class="history-card">
+            <div class="history-header">
+              <div class="history-node-info">
+                <span class="node-name">{{ item.nodeName || '无' }}</span>
+                <el-tag size="small" type="info">第{{ item.nodeOrder }}节点</el-tag>
+              </div>
+              <el-tag 
+                :type="getRecordType(item.approvalResult)"
+                size="medium"
+              >
+                {{ item.approvalResult || '无' }}
+              </el-tag>
+            </div>
+            <div class="history-body">
+              <div class="history-item">
+                <span class="history-label">审批人：</span>
+                <span class="history-value">{{ item.approverName || '无' }}</span>
+              </div>
+              <div class="history-item" v-if="item.approvalOpinion">
+                <span class="history-label">审批意见：</span>
+                <span class="history-value">{{ item.approvalOpinion }}</span>
+              </div>
+              <div class="history-item" v-if="item.approvalTime">
+                <span class="history-label">审批时间：</span>
+                <span class="history-value">{{ formatDateTime(item.approvalTime) }}</span>
+              </div>
+            </div>
+          </el-card>
+        </el-timeline-item>
+      </el-timeline>
+      <el-empty v-else description="暂无审批历史" :image-size="120" />
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">关 闭</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import request from '@/utils/request'
+
+export default {
+  name: 'ApprovalHistoryDialog',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      historyList: []
+    }
+  },
+  methods: {
+    init(id) {
+      this.visible = true
+      this.loading = true
+      this.historyList = []
+      this.getHistory(id)
+    },
+
+    async getHistory(id) {
+      try {
+        const response = await request({
+          url: `/api/Extend/LqReimbursementApplication/${id}/Actions/ApprovalHistory`,
+          method: 'GET'
+        })
+
+        if (response.code === 200) {
+          this.historyList = response.data || []
+        } else {
+          this.$message.error(response.msg || '获取审批历史失败')
+          this.historyList = []
+        }
+      } catch (error) {
+        console.error('获取审批历史失败:', error)
+        this.$message.error('获取审批历史失败')
+        this.historyList = []
+      } finally {
+        this.loading = false
+      }
+    },
+
+    handleClose() {
+      this.visible = false
+      this.historyList = []
+    },
+
+    formatDateTime(dateTime) {
+      if (!dateTime) return '无'
+      // 如果是时间戳（数字），需要转换
+      if (typeof dateTime === 'number') {
+        const date = new Date(dateTime)
+        const year = date.getFullYear()
+        const month = String(date.getMonth() + 1).padStart(2, '0')
+        const day = String(date.getDate()).padStart(2, '0')
+        const hours = String(date.getHours()).padStart(2, '0')
+        const minutes = String(date.getMinutes()).padStart(2, '0')
+        const seconds = String(date.getSeconds()).padStart(2, '0')
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+      }
+      // 如果是字符串，直接返回
+      const date = new Date(dateTime)
+      if (isNaN(date.getTime())) return dateTime
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      const seconds = String(date.getSeconds()).padStart(2, '0')
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+    },
+
+    getRecordType(result) {
+      const typeMap = {
+        '待审批': 'info',
+        '通过': 'success',
+        '不通过': 'danger',
+        '退回': 'warning'
+      }
+      return typeMap[result] || ''
+    },
+
+    getTimelineType(result) {
+      const typeMap = {
+        '待审批': '',
+        '通过': 'success',
+        '不通过': 'danger',
+        '退回': 'warning'
+      }
+      return typeMap[result] || ''
+    },
+
+    getTimelineIcon(result) {
+      const iconMap = {
+        '待审批': 'el-icon-time',
+        '通过': 'el-icon-check',
+        '不通过': 'el-icon-close',
+        '退回': 'el-icon-back'
+      }
+      return iconMap[result] || 'el-icon-time'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.history-content {
+  max-height: 70vh;
+  overflow-y: auto;
+  padding: 20px 0;
+}
+
+.history-card {
+  margin-bottom: 8px;
+
+  .history-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+
+    .history-node-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .node-name {
+        font-weight: 600;
+        color: #303133;
+        font-size: 16px;
+      }
+    }
+  }
+
+  .history-body {
+    .history-item {
+      margin-bottom: 8px;
+      display: flex;
+      align-items: flex-start;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .history-label {
+        min-width: 80px;
+        color: #606266;
+        font-weight: 500;
+      }
+
+      .history-value {
+        color: #303133;
+        flex: 1;
+        word-break: break-all;
+      }
+    }
+  }
+}
+</style>
+
diff --git a/antis-ncc-admin/src/views/lqReimbursementApplication/detail-dialog.vue b/antis-ncc-admin/src/views/lqReimbursementApplication/detail-dialog.vue
new file mode 100644
index 0000000..61cd0a1
--- /dev/null
+++ b/antis-ncc-admin/src/views/lqReimbursementApplication/detail-dialog.vue
@@ -0,0 +1,579 @@
+<template>
+  <el-dialog 
+    title="报销申请详情" 
+    :visible.sync="visible" 
+    :close-on-click-modal="false"
+    class="NCC-dialog NCC-dialog_center" 
+    width="1200px"
+    @close="handleClose"
+  >
+    <div class="detail-content" v-loading="loading">
+      <!-- 表单信息卡片 -->
+      <el-card class="info-card" shadow="hover" v-if="formData">
+        <div slot="header" class="card-header">
+          <i class="el-icon-document"></i>
+          <span class="card-title">申请信息</span>
+        </div>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <div class="info-item">
+              <label class="info-label">申请编号：</label>
+              <span class="info-value">{{ formData.id || '无' }}</span>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="info-item">
+              <label class="info-label">申请人编号：</label>
+              <span class="info-value">{{ formData.applicationUserId || '无' }}</span>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="info-item">
+              <label class="info-label">申请人姓名：</label>
+              <span class="info-value">{{ formData.applicationUserName || '无' }}</span>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="info-item">
+              <label class="info-label">申请门店ID：</label>
+              <span class="info-value">{{ formData.applicationStoreId || '无' }}</span>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="info-item">
+              <label class="info-label">申请时间：</label>
+              <span class="info-value">{{ formatDateTime(formData.applicationTime) || '无' }}</span>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="info-item">
+              <label class="info-label">总金额：</label>
+              <span class="info-value amount">{{ formatMoney(formData.amount) || '无' }}</span>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="info-item">
+              <label class="info-label">审批状态：</label>
+              <el-tag 
+                :type="getStatusType(formData.approveStatus)"
+                size="small"
+              >
+                {{ formData.approveStatus || '无' }}
+              </el-tag>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="info-item">
+              <label class="info-label">购买记录编号：</label>
+              <span class="info-value">{{ formData.purchaseRecordsId || '无' }}</span>
+            </div>
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <!-- 审批流程卡片 -->
+      <el-card class="info-card" shadow="hover" v-if="nodes && nodes.length > 0">
+        <div slot="header" class="card-header">
+          <i class="el-icon-s-order"></i>
+          <span class="card-title">审批流程</span>
+        </div>
+        <div class="approval-flow">
+          <div 
+            v-for="(node, index) in nodes" 
+            :key="node.nodeId" 
+            class="flow-node"
+            :class="{
+              'node-active': node.nodeOrder === currentNodeOrder,
+              'node-completed': node.nodeOrder < currentNodeOrder,
+              'node-pending': node.nodeOrder > currentNodeOrder
+            }"
+          >
+            <div class="node-header">
+              <div class="node-order">{{ node.nodeOrder }}</div>
+              <div class="node-info">
+                <div class="node-name">{{ node.nodeName || '无' }}</div>
+                <div class="node-type">
+                  <el-tag size="mini" :type="node.approvalType === '会签' ? 'success' : 'warning'">
+                    {{ node.approvalType || '无' }}
+                  </el-tag>
+                  <el-tag size="mini" type="info" v-if="node.isRequired === 1">必审</el-tag>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 审批人列表 -->
+            <div class="approvers-list">
+              <div class="approvers-label">审批人：</div>
+              <div class="approvers-items">
+                <el-tag 
+                  v-for="approver in node.approvers" 
+                  :key="approver.userId"
+                  size="small"
+                  style="margin-right: 8px; margin-bottom: 4px;"
+                >
+                  {{ approver.userName || '无' }}
+                </el-tag>
+              </div>
+            </div>
+
+            <!-- 审批记录 -->
+            <div class="approval-records" v-if="node.approvalRecords && node.approvalRecords.length > 0">
+              <div class="records-label">审批记录：</div>
+              <div class="records-list">
+                <div 
+                  v-for="(record, recordIndex) in node.approvalRecords" 
+                  :key="recordIndex"
+                  class="record-item"
+                >
+                  <div class="record-header">
+                    <span class="record-approver">{{ record.approverName || '无' }}</span>
+                    <el-tag 
+                      size="mini" 
+                      :type="getRecordType(record.approvalResult)"
+                    >
+                      {{ record.approvalResult || '无' }}
+                    </el-tag>
+                  </div>
+                  <div class="record-opinion" v-if="record.approvalOpinion">
+                    意见：{{ record.approvalOpinion }}
+                  </div>
+                  <div class="record-time" v-if="record.approvalTime">
+                    时间：{{ formatDateTime(record.approvalTime) }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-card>
+
+      <!-- 当前审批人信息 -->
+      <el-card class="info-card" shadow="hover" v-if="currentApprovers && currentApprovers.length > 0">
+        <div slot="header" class="card-header">
+          <i class="el-icon-user-solid"></i>
+          <span class="card-title">当前审批人</span>
+        </div>
+        <div class="current-approvers">
+          <el-tag 
+            v-for="approver in currentApprovers" 
+            :key="approver.userId"
+            type="warning"
+            size="medium"
+            style="margin-right: 8px;"
+          >
+            {{ approver.userName || '无' }}
+          </el-tag>
+        </div>
+      </el-card>
+
+      <!-- 退回原因 -->
+      <el-card class="info-card" shadow="hover" v-if="returnedReason">
+        <div slot="header" class="card-header">
+          <i class="el-icon-warning"></i>
+          <span class="card-title">退回原因</span>
+        </div>
+        <div class="returned-reason">
+          {{ returnedReason }}
+        </div>
+      </el-card>
+
+      <!-- 审批操作区域 -->
+      <el-card class="info-card" shadow="hover" v-if="canApprove">
+        <div slot="header" class="card-header">
+          <i class="el-icon-edit"></i>
+          <span class="card-title">审批操作</span>
+        </div>
+        <el-form :model="approvalForm" label-width="100px" label-position="right">
+          <el-form-item label="审批结果" required>
+            <el-radio-group v-model="approvalForm.result">
+              <el-radio label="通过">通过</el-radio>
+              <el-radio label="不通过">不通过</el-radio>
+              <el-radio label="退回">退回</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="审批意见">
+            <el-input 
+              v-model="approvalForm.opinion" 
+              type="textarea" 
+              :rows="4"
+              placeholder="请输入审批意见"
+            />
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">关 闭</el-button>
+      <el-button 
+        type="primary" 
+        @click="handleApprove"
+        :loading="approving"
+        v-if="canApprove"
+      >
+        提交审批
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import request from '@/utils/request'
+
+export default {
+  name: 'DetailDialog',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      approving: false,
+      formData: null,
+      nodes: [],
+      currentApprovers: [],
+      currentNodeOrder: 0,
+      approvalStatus: '',
+      returnedReason: null,
+      approvalForm: {
+        result: '通过',
+        opinion: ''
+      }
+    }
+  },
+  computed: {
+    canApprove() {
+      // 判断是否可以审批：状态为"审批中"且当前用户是当前审批人
+      if (this.approvalStatus !== '审批中') {
+        return false
+      }
+      // 这里可以根据实际登录用户信息判断
+      // 暂时返回true，实际应该判断当前登录用户是否在currentApprovers中
+      return true
+    }
+  },
+  methods: {
+    init(id) {
+      this.visible = true
+      this.loading = true
+      this.formData = null
+      this.nodes = []
+      this.currentApprovers = []
+      this.currentNodeOrder = 0
+      this.approvalStatus = ''
+      this.returnedReason = null
+      this.approvalForm = {
+        result: '通过',
+        opinion: ''
+      }
+      this.getDetail(id)
+    },
+
+    async getDetail(id) {
+      try {
+        const response = await request({
+          url: `/api/Extend/LqReimbursementApplication/${id}`,
+          method: 'GET'
+        })
+
+        if (response.code === 200 && response.data) {
+          this.formData = response.data.form || null
+          this.nodes = response.data.nodes || []
+          this.currentApprovers = response.data.currentApprovers || []
+          this.currentNodeOrder = response.data.currentNodeOrder || 0
+          this.approvalStatus = response.data.approvalStatus || ''
+          this.returnedReason = response.data.returnedReason || null
+        } else {
+          this.$message.error(response.msg || '获取详情失败')
+        }
+      } catch (error) {
+        console.error('获取详情失败:', error)
+        this.$message.error('获取详情失败')
+      } finally {
+        this.loading = false
+      }
+    },
+
+    async handleApprove() {
+      if (!this.approvalForm.result) {
+        this.$message.warning('请选择审批结果')
+        return
+      }
+
+      this.approving = true
+      try {
+        const response = await request({
+          url: `/api/Extend/LqReimbursementApplication/${this.formData.id}/Actions/Approve`,
+          method: 'POST',
+          data: {
+            result: this.approvalForm.result,
+            opinion: this.approvalForm.opinion || ''
+          }
+        })
+
+        if (response.code === 200) {
+          this.$message.success('审批成功')
+          this.visible = false
+          this.$emit('refresh')
+        } else {
+          this.$message.error(response.msg || '审批失败')
+        }
+      } catch (error) {
+        console.error('审批失败:', error)
+        this.$message.error('审批失败')
+      } finally {
+        this.approving = false
+      }
+    },
+
+    handleClose() {
+      this.visible = false
+      this.formData = null
+      this.nodes = []
+      this.currentApprovers = []
+      this.currentNodeOrder = 0
+      this.approvalStatus = ''
+      this.returnedReason = null
+      this.approvalForm = {
+        result: '通过',
+        opinion: ''
+      }
+    },
+
+    formatMoney(amount) {
+      if (!amount) return '无'
+      return `¥${Number(amount).toLocaleString('zh-CN', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      })}`
+    },
+
+    formatDateTime(dateTime) {
+      if (!dateTime) return '无'
+      // 如果是时间戳（数字），需要转换
+      if (typeof dateTime === 'number') {
+        const date = new Date(dateTime)
+        const year = date.getFullYear()
+        const month = String(date.getMonth() + 1).padStart(2, '0')
+        const day = String(date.getDate()).padStart(2, '0')
+        const hours = String(date.getHours()).padStart(2, '0')
+        const minutes = String(date.getMinutes()).padStart(2, '0')
+        const seconds = String(date.getSeconds()).padStart(2, '0')
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+      }
+      // 如果是字符串，直接返回
+      const date = new Date(dateTime)
+      if (isNaN(date.getTime())) return dateTime
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      const seconds = String(date.getSeconds()).padStart(2, '0')
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+    },
+
+    getStatusType(status) {
+      const statusMap = {
+        '待审批': 'info',
+        '审批中': 'warning',
+        '已通过': 'success',
+        '未通过': 'danger',
+        '已退回': 'warning'
+      }
+      return statusMap[status] || ''
+    },
+
+    getRecordType(result) {
+      const typeMap = {
+        '待审批': 'info',
+        '通过': 'success',
+        '不通过': 'danger',
+        '退回': 'warning'
+      }
+      return typeMap[result] || ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.detail-content {
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.info-card {
+  margin-bottom: 20px;
+
+  .card-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 600;
+    color: #303133;
+
+    i {
+      font-size: 18px;
+      color: #409EFF;
+    }
+  }
+
+  .info-item {
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+
+    .info-label {
+      min-width: 120px;
+      color: #606266;
+      font-weight: 500;
+    }
+
+    .info-value {
+      color: #303133;
+      flex: 1;
+
+      &.amount {
+        color: #F56C6C;
+        font-weight: 600;
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+.approval-flow {
+  .flow-node {
+    margin-bottom: 24px;
+    padding: 16px;
+    border: 1px solid #e4e7ed;
+    border-radius: 8px;
+    background: #fafafa;
+    transition: all 0.3s;
+
+    &.node-active {
+      border-color: #409EFF;
+      background: #ecf5ff;
+    }
+
+    &.node-completed {
+      border-color: #67C23A;
+      background: #f0f9ff;
+    }
+
+    &.node-pending {
+      border-color: #e4e7ed;
+      background: #fafafa;
+      opacity: 0.6;
+    }
+
+    .node-header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+
+      .node-order {
+        width: 32px;
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+        background: #409EFF;
+        color: #fff;
+        border-radius: 50%;
+        font-weight: 600;
+        margin-right: 12px;
+      }
+
+      .node-info {
+        flex: 1;
+
+        .node-name {
+          font-size: 16px;
+          font-weight: 600;
+          color: #303133;
+          margin-bottom: 8px;
+        }
+
+        .node-type {
+          display: flex;
+          gap: 8px;
+        }
+      }
+    }
+
+    .approvers-list {
+      margin-bottom: 12px;
+      display: flex;
+      align-items: flex-start;
+
+      .approvers-label {
+        min-width: 80px;
+        color: #606266;
+        font-weight: 500;
+      }
+
+      .approvers-items {
+        flex: 1;
+      }
+    }
+
+    .approval-records {
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid #e4e7ed;
+
+      .records-label {
+        color: #606266;
+        font-weight: 500;
+        margin-bottom: 8px;
+      }
+
+      .records-list {
+        .record-item {
+          padding: 8px;
+          margin-bottom: 8px;
+          background: #fff;
+          border-radius: 4px;
+          border-left: 3px solid #409EFF;
+
+          .record-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 4px;
+
+            .record-approver {
+              font-weight: 500;
+              color: #303133;
+            }
+          }
+
+          .record-opinion {
+            color: #606266;
+            font-size: 14px;
+            margin-bottom: 4px;
+          }
+
+          .record-time {
+            color: #909399;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.current-approvers {
+  padding: 12px;
+  background: #fff3cd;
+  border-radius: 4px;
+}
+
+.returned-reason {
+  padding: 12px;
+  background: #fef0f0;
+  border-radius: 4px;
+  color: #F56C6C;
+  line-height: 1.6;
+}
+</style>
+
diff --git a/antis-ncc-admin/src/views/lqReimbursementApplication/detail.vue b/antis-ncc-admin/src/views/lqReimbursementApplication/detail.vue
deleted file mode 100644
index 94335e6..0000000
--- a/antis-ncc-admin/src/views/lqReimbursementApplication/detail.vue
+++ /dev/null
@@ -1,709 +0,0 @@
-<template>
-	<el-dialog 
-		title="报销申请详情" 
-		:visible.sync="visible" 
-		:close-on-click-modal="false"
-		class="NCC-dialog NCC-dialog_center" 
-		width="1200px"
-		@close="handleClose"
-		@update:visible="handleVisibleChange">
-		<div class="detail-content" v-loading="loading">
-			<!-- 基本信息卡片 -->
-			<el-card class="info-card" shadow="hover">
-				<div slot="header" class="card-header">
-					<i class="el-icon-document"></i>
-					<span class="card-title">基本信息</span>
-				</div>
-				<el-row :gutter="20">
-					<el-col :span="8">
-						<div class="info-item">
-							<label class="info-label">申请编号：</label>
-							<span class="info-value">{{ dataForm.id || '无' }}</span>
-						</div>
-					</el-col>
-					<el-col :span="8">
-						<div class="info-item">
-							<label class="info-label">申请人：</label>
-							<span class="info-value">{{ dataForm.applicationUserName || '无' }}</span>
-						</div>
-					</el-col>
-					<el-col :span="8">
-						<div class="info-item">
-							<label class="info-label">门店：</label>
-							<span class="info-value">{{ getStoreName(dataForm.applicationStoreId) || '无' }}</span>
-						</div>
-					</el-col>
-					<el-col :span="8">
-						<div class="info-item">
-							<label class="info-label">申请时间：</label>
-							<span class="info-value">{{ formatDate(dataForm.applicationTime) || '无' }}</span>
-						</div>
-					</el-col>
-					<el-col :span="8">
-						<div class="info-item">
-							<label class="info-label">总金额：</label>
-							<span class="info-value amount">{{ dataForm.amount || '无' }}</span>
-						</div>
-					</el-col>
-					<el-col :span="8">
-						<div class="info-item">
-							<label class="info-label">审批状态：</label>
-							<span class="info-value" :class="{'status-approved': dataForm.approveStatus === '已审批', 'status-pending': dataForm.approveStatus === '未审批'}">
-								{{ dataForm.approveStatus || '无' }}
-							</span>
-						</div>
-					</el-col>
-				</el-row>
-			</el-card>
-
-			<!-- 购买物品清单卡片 -->
-			<el-card class="info-card" shadow="hover" v-if="purchaseRecords && purchaseRecords.length > 0">
-				<div slot="header" class="card-header">
-					<i class="el-icon-shopping-cart-full"></i>
-					<span class="card-title">购买物品清单</span>
-				</div>
-				<el-table 
-					:data="purchaseRecords" 
-					border
-					size="small"
-					style="width: 100%">
-					<el-table-column type="index" label="序号" width="60" align="center" />
-					<el-table-column prop="reimbursementCategoryName" label="分类名称" />
-					<el-table-column prop="createUserStoreId" label="门店" align="left">
-                        <template slot-scope="scope">
-                            {{ getStoreName(scope.row.createUserStoreId) }}
-                        </template>
-                    </el-table-column>
-					<el-table-column prop="unitPrice" label="单价" align="right" />
-					<el-table-column prop="quantity" label="数量" align="right" />
-					<el-table-column prop="amount" label="总金额" align="right" />
-					<el-table-column prop="purchaseTime" label="购买时间" width="120">
-						<template slot-scope="scope">
-							{{ formatDate(scope.row.purchaseTime) || '无' }}
-						</template>
-					</el-table-column>
-					<el-table-column prop="memo" label="备注说明" min-width="150" show-overflow-tooltip />
-					<el-table-column prop="attachment" label="附件" width="100" align="left">
-						<template slot-scope="scope">
-							<div v-if="scope.row.attachment && scope.row.attachment.length > 0" class="attachment-list">
-								<div> 
-									<i class="el-icon-paperclip"></i>
-									<span class="attachment-name">{{ scope.row.attachment.length + '个文件' }}</span>
-								</div>
-								<div class="attachment-item">
-									<el-image :src="baseUrl + scope.row.attachment[0].url" fit="contain" :style="{
-										width: '100%',
-										height: '100px',
-										display: 'block',
-										margin: '0 auto'
-									}" :preview-src-list="getPreviewSrcList(scope.row.attachment)">
-									</el-image>
-								</div>
-							</div>
-							<span v-else>无</span>
-						</template>
-					</el-table-column>
-				</el-table>
-			</el-card>
-
-			<!-- 审批信息卡片 -->
-			<el-card class="info-card" shadow="hover" v-if="dataForm.approveStatus === '已审批'">
-				<div slot="header" class="card-header">
-					<i class="el-icon-check"></i>
-					<span class="card-title">审批信息</span>
-				</div>
-				<el-row :gutter="20">
-					<el-col :span="8">
-						<div class="info-item">
-							<label class="info-label">审批人：</label>
-							<span class="info-value">{{ getUserName(dataForm.approveUser) || '无' }}</span>
-						</div>
-					</el-col>
-					<el-col :span="8">
-						<div class="info-item">
-							<label class="info-label">审批时间：</label>
-							<span class="info-value">{{ formatDate(dataForm.approveTime) || '无' }}</span>
-						</div>
-					</el-col>
-				</el-row>
-			</el-card>
-		</div>
-		<span slot="footer" class="dialog-footer">
-			<el-button type="warning" @click="handlePrint" v-if="dataForm.id">打 印</el-button>
-			<el-button @click="visible = false">关 闭</el-button>
-		</span>
-		
-		<!-- 图片预览对话框 -->
-		<el-dialog 
-			title="图片预览" 
-			:visible.sync="imagePreviewVisible" 
-			width="600px"
-			append-to-body>
-			<div class="image-preview-container">
-				<div class="image-wrapper">
-					<el-image 
-						:src="previewImageUrl" 
-						fit="contain"
-						:style="{
-							maxWidth: '100%',
-							maxHeight: '100%',
-							display: 'block',
-							margin: '0 auto'
-						}">
-					</el-image>
-				</div>
-			</div>
-		</el-dialog>
-	</el-dialog>
-</template>
-
-<script>
-import request from '@/utils/request'
-
-export default {
-	name: 'ReimbursementApplicationDetail',
-	data() {
-		return {
-			baseUrl: process.env.VUE_APP_BASE_API,
-			visible: false,
-			loading: false,
-			dataForm: {},
-			purchaseRecords: [],
-			storeOptions: [],
-			userMap: {},
-			imagePreviewVisible: false, // 图片预览对话框显示状态
-			previewImageUrl: '' // 预览的图片URL
-		}
-	},
-	methods: {
-		init(id) {
-			this.visible = true
-			this.loading = true
-			this.dataForm = {}
-			this.purchaseRecords = []
-			this.userMap = {}
-			
-			// 加载门店列表
-			this.loadStoreOptions()
-			
-			// 加载详情数据
-			request({
-				url: `/api/Extend/LqReimbursementApplication/${id}`,
-				method: 'GET'
-			}).then(res => {
-				this.dataForm = res.data || {}
-				// 如果有关联的购买记录，加载购买记录详情
-				if (this.dataForm.purchaseRecordsId) {
-					this.loadPurchaseRecords(this.dataForm.purchaseRecordsId)
-				}
-				// 加载用户信息
-				this.loadUserInfo()
-				this.loading = false
-			}).catch(() => {
-				this.loading = false
-				this.$message.error('加载详情失败')
-			})
-		},
-		// 加载门店列表
-		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 = []
-			})
-		},
-		// 加载购买记录
-		loadPurchaseRecords(purchaseRecordsId) {
-			if (!purchaseRecordsId) {
-				this.purchaseRecords = []
-				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.purchaseRecords = []
-				return
-			}
-			
-			// 批量加载购买记录
-			Promise.all(ids.map(id => {
-				return request({
-					url: `/api/Extend/LqPurchaseRecords/${id}`,
-					method: 'GET'
-				}).then(res => res.data).catch(() => null)
-			})).then(results => {
-				this.purchaseRecords = results.filter(item => item !== null)
-			})
-		},
-		// 加载用户信息
-		loadUserInfo() {
-			const userIds = []
-			if (this.dataForm.approveUser) {
-				userIds.push(this.dataForm.approveUser)
-			}
-			
-			// 去重
-			const uniqueUserIds = [...new Set(userIds)]
-			
-			// 批量加载用户信息
-			Promise.all(uniqueUserIds.map(userId => {
-				return request({
-					url: `/api/permission/Users/${userId}`,
-					method: 'GET'
-				}).then(res => {
-					if (res.data) {
-						this.userMap[userId] = res.data.realName || res.data.account || userId
-					}
-				}).catch(() => {
-					this.userMap[userId] = userId
-				})
-			}))
-		},
-		// 获取门店名称
-		getStoreName(storeId) {
-			if (!storeId) return ''
-			const store = this.storeOptions.find(item => item.id === storeId)
-			return store ? store.dm : ''
-		},
-		// 获取用户名称
-		getUserName(userId) {
-			if (!userId) return ''
-			return this.userMap[userId] || userId
-		},
-		// 格式化日期
-		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}`
-		},
-		// 关闭弹窗
-		handleClose() {
-			this.visible = false
-			this.dataForm = {}
-			this.purchaseRecords = []
-			this.userMap = {}
-			this.imagePreviewVisible = false
-			this.previewImageUrl = ''
-			this.$emit('close')
-		},
-		// 获取预览图片列表
-		getPreviewSrcList(attachment) {
-			return attachment.map(item => this.baseUrl + item.url)
-		},
-		// 处理附件点击
-		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)
-		},
-		// 处理 visible 变化
-		handleVisibleChange(val) {
-			this.visible = val
-			if (!val) {
-				this.handleClose()
-			}
-		},
-		// 打印功能
-		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()
-			}, 300)
-		},
-		// 构建打印内容
-		buildPrintContent() {
-			const storeName = this.getStoreName(this.dataForm.applicationStoreId) || '无'
-			const approveStatus = this.dataForm.approveStatus || '未审批'
-			const approveTime = this.dataForm.approveTime ? this.formatDate(this.dataForm.approveTime) : '无'
-			
-			// 构建购买物品清单表格
-			let purchaseTableRows = ''
-			if (this.purchaseRecords && this.purchaseRecords.length > 0) {
-				this.purchaseRecords.forEach((item, index) => {
-					const storeName = this.getStoreName(item.createUserStoreId) || '无'
-					purchaseTableRows += `
-						<tr>
-							<td style="text-align: center; width: 55px;">${index + 1}</td>
-							<td>${item.reimbursementCategoryName || '无'}</td>
-							<td>${storeName}</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="8" 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.id || '无'}</td>
-								<td>申请人：</td>
-								<td>${this.dataForm.applicationUserName || '无'}</td>
-							</tr>
-							<tr>
-								<td>申请门店：</td>
-								<td>${storeName}</td>
-								<td>申请时间：</td>
-								<td>${this.dataForm.applicationTime ? this.formatDate(this.dataForm.applicationTime) : '无'}</td>
-							</tr>
-							<tr>
-								<td>总金额：</td>
-								<td>¥${this.dataForm.amount || '0.00'}</td>
-								<td>审批状态：</td>
-								<td>${approveStatus}</td>
-							</tr>
-							<tr>
-								<td>审批人：</td>
-								<td>${this.getUserName(this.dataForm.approveUser) || '无'}</td>
-								<td>审批时间：</td>
-								<td>${approveTime}</td>
-							</tr>
-						</table>
-					</div>
-					
-					<div class="print-info">
-						<h3 style="margin-bottom: 10px;">购买物品清单</h3>
-						<table class="print-table">
-							<thead>
-								<tr>
-									<th style="width: 55px;">序号</th>
-									<th>分类名称</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>
-
-<style lang="scss" scoped>
-/* 详情内容 */
-.detail-content {
-	//max-height: 70vh;
-	overflow-y: auto;
-	padding: 0 10px;
-}
-
-/* 信息卡片 */
-.info-card {
-	margin-bottom: 20px;
-	border-radius: 8px;
-	overflow: hidden;
-}
-
-.card-header {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	font-size: 16px;
-	font-weight: 600;
-	color: #303133;
-}
-
-.card-header i {
-	font-size: 18px;
-	color: #409EFF;
-}
-
-.card-title {
-	font-size: 16px;
-	font-weight: 600;
-}
-
-/* 信息项 */
-.info-item {
-	margin-bottom: 16px;
-}
-
-.info-label {
-	display: inline-block;
-	font-weight: 500;
-	color: #606266;
-	margin-right: 8px;
-}
-
-.info-value {
-	color: #303133;
-	font-size: 14px;
-}
-
-.info-value.amount {
-	color: #E6A23C;
-	font-weight: 600;
-}
-
-.status-approved {
-	color: #67C23A;
-	font-weight: 600;
-}
-
-.status-pending {
-	color: #E6A23C;
-	font-weight: 600;
-}
-
-/* 附件列表样式 */
-.attachment-list {
-	> div:first-child {
-		display: flex;
-		align-items: center;
-		padding: 4px 0;
-		color: #409EFF;
-		
-		i {
-			margin-right: 4px;
-			font-size: 14px;
-		}
-		
-		.attachment-name {
-			font-size: 12px;
-		}
-	}
-	
-	.attachment-item {
-		margin-top: 4px;
-		cursor: pointer;
-		
-		::v-deep .el-image {
-			border-radius: 4px;
-		}
-	}
-}
-
-/* 图片预览容器样式 */
-.image-preview-container {
-	.image-wrapper {
-		// min-height: 200px;
-		// max-height: 450px;
-		overflow: auto;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		// padding: 20px;
-		background-color: #f5f5f5;
-		border-radius: 4px;
-		// margin-bottom: 15px;
-		box-sizing: border-box;
-		::v-deep .el-image {
-			display: block;
-		}
-	}
-}
-</style>
-
diff --git a/antis-ncc-admin/src/views/lqReimbursementApplication/index.vue b/antis-ncc-admin/src/views/lqReimbursementApplication/index.vue
index 10c0d4d..b3423e0 100644
--- a/antis-ncc-admin/src/views/lqReimbursementApplication/index.vue
+++ b/antis-ncc-admin/src/views/lqReimbursementApplication/index.vue
@@ -1,362 +1,653 @@
-<template>
-	<div class="NCC-common-layout">
-		<div class="NCC-common-layout-center">
-			<el-row class="NCC-common-search-box" :gutter="16">
-				<el-form @submit.native.prevent>
-		
-					<el-col :span="6">
-						<el-form-item label="申请时间">
-							<el-date-picker v-model="query.applicationTime" type="daterange" value-format="timestamp" format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
-							</el-date-picker>
-						</el-form-item>
-					</el-col>
-					<el-col :span="6">
-						<el-form-item label="申请人">
-							<userSelect v-model="query.applicationUserId" placeholder="请选择申请人" clearable />	
-						</el-form-item>
-					</el-col>
-                    <el-col :span="6">
-						<el-form-item label="门店">
-							<el-select v-model="query.applicationStoreId" placeholder="请选择门店" clearable filterable style="width: 100%">
-								<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>
-					<template v-if="showAll">
-                        <el-col :span="6">
-                            <el-form-item label="审批状态">
-							<el-select v-model="query.approveStatus" placeholder="请选择审批状态" clearable style="width: 100%">
-								<el-option label="已审批" value="已审批"></el-option>
-                                <el-option label="未通过" value="未通过"></el-option>
-								<el-option label="未审批" value="未审批"></el-option>
-							</el-select>
-						</el-form-item>
-                        </el-col>
-                        <!-- <el-col :span="6">
-							<el-form-item label="审批时间">
-								<el-date-picker v-model="query.approveTime" type="daterange" value-format="timestamp" format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
-								</el-date-picker>
-							</el-form-item>
-						</el-col> -->
-					
-					<!-- <el-col :span="6">
-						<el-form-item label="总金额">
-							<el-input v-model="query.amount" placeholder="总金额" clearable />	
-						</el-form-item>
-					</el-col> -->
-					<!-- <el-col :span="6">
-						<el-form-item label="审批人">
-							<userSelect v-model="query.approveUser" placeholder="请选择审批人" />
-						</el-form-item>
-					</el-col>
-					<el-col :span="6">
-						<el-form-item label="审批结果">
-							<el-input v-model="query.approveStatus" placeholder="审批结果" clearable />	
-						</el-form-item>
-					</el-col> -->
-					<!-- <el-col :span="6">
-						<el-form-item label="关联购买编号">
-							<el-input v-model="query.purchaseRecordsId" placeholder="关联购买编号" clearable />	
-						</el-form-item>
-					</el-col> -->
-					</template>
-					<el-col :span="6">
-						<el-form-item>
-							<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
-							<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
-							<el-button type="text" icon="el-icon-arrow-down" @click="showAll=true" v-if="!showAll">展开</el-button>
-							<el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>收起</el-button>
-						</el-form-item>
-					</el-col>
-				</el-form>
-			</el-row>
-			<div class="NCC-common-layout-main NCC-flex-main">
-				<div class="NCC-common-head">
-					<div>
-						<el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button>
-                        <el-button type="text" icon="el-icon-delete" @click="handleBatchRemoveDel()">批量删除</el-button>
-						<!-- <el-button type="text" icon="el-icon-download" @click="exportData()">导出</el-button>
-						<el-button type="text" icon="el-icon-delete" @click="handleBatchRemoveDel()">批量删除</el-button> -->
-					</div>
-					<div class="NCC-common-head-right">
-						<el-tooltip effect="dark" content="刷新" placement="top">
-							<el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="reset()" />
-						</el-tooltip>
-						<screenfull isContainer />
-					</div>
-				</div>
-                <NCC-table v-loading="listLoading" :data="list" has-c @selection-change="handleSelectionChange">
-					<!-- <el-table-column prop="id" label="申请编号" align="left" /> -->
-					<!-- <el-table-column prop="applicationUserId" label="申请人编号" align="left" /> -->
-					<el-table-column prop="applicationUserName" label="申请人" align="left" />
-					<el-table-column prop="applicationStoreId" label="门店" align="left">
-						<template slot-scope="scope">
-							<div class="store-info">
-								<i class="el-icon-shop"></i>
-								<span>{{ getStoreName(scope.row.applicationStoreId) || '无' }}</span>
-							</div>
-						</template>
-					</el-table-column>
-					<el-table-column prop="applicationTime" label="申请时间" align="left" :formatter="ncc.tableDateFormat" />
-					<el-table-column prop="amount" label="总金额" align="left" />
-                    <el-table-column prop="approveStatus" label="审批状态" align="left"/>
-					<el-table-column prop="approveTime" label="审批时间" align="left" :formatter="ncc.tableDateFormat" />
-					<!-- <el-table-column prop="approveUser" label="审批人" align="left" />
-					<el-table-column prop="approveStatus" label="审批结果" align="left" /> -->
-					<!-- <el-table-column prop="purchaseRecordsId" label="关联购买编号" align="left" /> -->
-					<el-table-column label="操作" fixed="right" width="100">
-							<template slot-scope="scope">
-							<el-button type="text" v-if="scope.row.approveStatus === '未审批'" @click="addOrUpdateHandle(scope.row.id)" >编辑</el-button>
-							<el-button type="text" v-if="scope.row.approveStatus === '已审批'" @click="showDetail(scope.row.id)" >查看</el-button>
-                            <!-- <el-button type="text" v-if="scope.row.approveStatus === '未审批'" @click="handleDel(scope.row.id)" class="NCC-table-delBtn" >删除</el-button> -->
-						</template>
-					</el-table-column>
-				</NCC-table>
-                <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
+<template>
+  <div class="app-container">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <div class="header-left">
+        <h2>报销申请管理</h2>
+        <p class="page-desc">管理报销申请，包括待办审批、所有申请列表等</p>
+      </div>
+      <div class="header-right">
+        <el-button 
+          icon="el-icon-refresh" 
+          @click="getList"
+          :loading="listLoading"
+        >
+          刷新
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 标签页切换 -->
+    <div class="tabs-container">
+      <el-tabs v-model="activeTab" @tab-click="handleTabChange">
+        <el-tab-pane label="所有待办" name="allPending">
+          <template slot="label">
+            <span><i class="el-icon-s-order"></i> 所有待办</span>
+          </template>
+        </el-tab-pane>
+        <el-tab-pane label="我的待办" name="myPending">
+          <template slot="label">
+            <span><i class="el-icon-user"></i> 我的待办</span>
+          </template>
+        </el-tab-pane>
+        <el-tab-pane label="所有申请" name="all">
+          <template slot="label">
+            <span><i class="el-icon-document"></i> 所有申请</span>
+          </template>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <!-- 搜索区域 -->
+    <div class="search-container">
+      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px" label-position="right">
+        <el-form-item label="申请门店ID" prop="applicationStoreId">
+          <el-input 
+            v-model="queryParams.applicationStoreId" 
+            placeholder="请输入申请门店ID" 
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <template v-if="activeTab === 'all'">
+          <el-form-item label="申请编号" prop="id">
+            <el-input 
+              v-model="queryParams.id" 
+              placeholder="请输入申请编号" 
+              clearable
+              style="width: 200px"
+            />
+          </el-form-item>
+          <el-form-item label="申请人编号" prop="applicationUserId">
+            <el-input 
+              v-model="queryParams.applicationUserId" 
+              placeholder="请输入申请人编号" 
+              clearable
+              style="width: 200px"
+            />
+          </el-form-item>
+          <el-form-item label="申请人姓名" prop="applicationUserName">
+            <el-input 
+              v-model="queryParams.applicationUserName" 
+              placeholder="请输入申请人姓名" 
+              clearable
+              style="width: 200px"
+            />
+          </el-form-item>
+          <el-form-item label="申请时间" prop="applicationTime">
+            <el-date-picker
+              v-model="queryParams.applicationTime"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"
+              style="width: 240px"
+            />
+          </el-form-item>
+          <el-form-item label="金额" prop="amount">
+            <el-input 
+              v-model="queryParams.amount" 
+              placeholder="请输入金额" 
+              clearable
+              style="width: 200px"
+            />
+          </el-form-item>
+          <el-form-item label="审批状态" prop="approveStatus">
+            <el-select 
+              v-model="queryParams.approveStatus" 
+              placeholder="请选择审批状态"
+              clearable
+              style="width: 200px"
+            >
+              <el-option label="待审批" value="待审批" />
+              <el-option label="审批中" value="审批中" />
+              <el-option label="已通过" value="已通过" />
+              <el-option label="未通过" value="未通过" />
+              <el-option label="已退回" value="已退回" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="购买记录编号" prop="purchaseRecordsId">
+            <el-input 
+              v-model="queryParams.purchaseRecordsId" 
+              placeholder="请输入购买记录编号" 
+              clearable
+              style="width: 200px"
+            />
+          </el-form-item>
+        </template>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 数据表格 -->
+    <div class="table-container">
+      <NCC-table 
+        v-loading="listLoading" 
+        :data="list" 
+        border 
+        stripe
+        height="calc(100vh - 500px)"
+        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
+      >
+        <!-- 申请编号 -->
+        <el-table-column label="申请编号" width="180" align="center">
+          <template slot-scope="scope">
+            <div class="id-item">
+              <i class="el-icon-document id-icon"></i>
+              <span>{{ scope.row.id || '无' }}</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <!-- 申请人 -->
+        <el-table-column label="申请人" width="140" align="center">
+          <template slot-scope="scope">
+            <div class="user-item">
+              <i class="el-icon-user user-icon"></i>
+              <span>{{ scope.row.applicationUserName || '无' }}</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <!-- 申请门店ID -->
+        <el-table-column label="申请门店ID" width="160" align="center">
+          <template slot-scope="scope">
+            <div class="store-item">
+              <i class="el-icon-shop store-icon"></i>
+              <span>{{ scope.row.applicationStoreId || '无' }}</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <!-- 申请时间 -->
+        <el-table-column label="申请时间" width="180" align="center">
+          <template slot-scope="scope">
+            <div class="time-item">
+              <i class="el-icon-time time-icon"></i>
+              <span>{{ formatDateTime(scope.row.applicationTime) || '无' }}</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <!-- 金额 -->
+        <el-table-column label="金额" width="140" align="center">
+          <template slot-scope="scope">
+            <div class="amount-item">
+              <i class="el-icon-money amount-icon"></i>
+              <span class="amount-value">{{ formatMoney(scope.row.amount) || '无' }}</span>
             </div>
-        </div>
-		<NCC-Form v-if="formVisible" ref="NCCForm" @refresh="refresh" />
-		<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
-		<DetailDialog v-if="detailVisible" ref="DetailDialog" @close="handleDetailClose" />
-	</div>
+          </template>
+        </el-table-column>
+
+        <!-- 审批状态 -->
+        <el-table-column label="审批状态" width="120" align="center">
+          <template slot-scope="scope">
+            <el-tag 
+              :type="getStatusType(scope.row.approveStatus)"
+              size="small"
+            >
+              {{ scope.row.approveStatus || '无' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <!-- 当前审批人 -->
+        <el-table-column label="当前审批人" width="160" align="center" v-if="activeTab !== 'all'">
+          <template slot-scope="scope">
+            <div class="approver-item">
+              <i class="el-icon-user-solid approver-icon"></i>
+              <span>{{ scope.row.currentApprovers || '无' }}</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <!-- 当前节点 -->
+        <el-table-column label="当前节点" width="120" align="center" v-if="activeTab !== 'all'">
+          <template slot-scope="scope">
+            <div class="node-item">
+              <i class="el-icon-s-order node-icon"></i>
+              <span>{{ scope.row.currentNodeOrder ? `第${scope.row.currentNodeOrder}节点` : '无' }}</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <!-- 节点总数 -->
+        <el-table-column label="节点总数" width="100" align="center" v-if="activeTab !== 'all'">
+          <template slot-scope="scope">
+            <div class="node-count-item">
+              <i class="el-icon-s-data node-count-icon"></i>
+              <span>{{ scope.row.nodeCount || '无' }}</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <!-- 操作 -->
+        <el-table-column label="操作" width="200" align="left" fixed="right">
+          <template slot-scope="scope">
+            <div class="action-buttons">
+              <el-button 
+                type="text" 
+                icon="el-icon-view" 
+                @click="handleView(scope.row)"
+                size="small"
+                class="view-btn"
+              >
+                查看
+              </el-button>
+              <el-button 
+                type="text" 
+                icon="el-icon-time" 
+                @click="handleViewHistory(scope.row)"
+                size="small"
+                class="history-btn"
+              >
+                审批历史
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </NCC-table>
+    </div>
+
+    <!-- 分页 -->
+    <div class="pagination-container">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="listQuery.currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="listQuery.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      />
+    </div>
+
+    <!-- 详情/审批弹窗 -->
+    <detail-dialog 
+      v-if="detailVisible"
+      ref="DetailDialog"
+      @refresh="getList"
+    />
+
+    <!-- 审批历史弹窗 -->
+    <approval-history-dialog 
+      v-if="historyVisible"
+      ref="ApprovalHistoryDialog"
+    />
+  </div>
 </template>
+
 <script>
-    import request from '@/utils/request'
-    import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
-    import { getStoreSelector } from '@/api/extend/store'
-    import NCCForm from './Form'
-    import ExportBox from './ExportBox'
-    import DetailDialog from './detail'
-    import { previewDataInterface } from '@/api/systemData/dataInterface'
-	export default {
-        components: { NCCForm, ExportBox, DetailDialog },
-        data() {
-            return {
-                showAll: false,
-                storeOptions: [],
-                storeMap: {},
-                detailVisible: false,
-				query: {
-                    id:undefined,
-                    applicationUserId:undefined,
-                    applicationUserName:undefined,
-                    applicationStoreId:undefined,
-                    applicationTime:undefined,
-                    amount:undefined,
-                    approveUser:undefined,
-                    approveStatus:undefined,
-                    approveTime:undefined,
-                    purchaseRecordsId:undefined,
-				},
-                list: [],
-                listLoading: true,
-                multipleSelection: [], total: 0,
-                listQuery: {
-                    currentPage: 1,
-                    pageSize: 20,
-					sort: "desc",
-                    sidx: "",
-                },
-                formVisible: false,
-                exportBoxVisible: false,
-                columnList: [
-                    { prop: 'id', label: '申请编号' },
-                    { prop: 'applicationUserId', label: '申请人编号' },
-                    { prop: 'applicationUserName', label: '申请人姓名' },
-                    { prop: 'applicationStoreId', label: '申请门店' },
-                    { prop: 'applicationTime', label: '申请时间' },
-                    { prop: 'amount', label: '总金额' },
-                    { prop: 'approveUser', label: '审批人' },
-                    { prop: 'approveStatus', label: '审批结果' },
-                    { prop: 'approveTime', label: '审批时间' },
-                    { prop: 'purchaseRecordsId', label: '关联购买编号' },
-				],
-			}
-        },
-		computed: {},
-		created() {
-			this.loadStoreOptions()
-			this.initData()
-		},
-		methods: {
-            		// 加载门店列表
-			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 = [];
-				});
-			},
-	
-			getStoreName(storeId) {
-				if (!storeId) return '无';
-				const store = this.storeOptions.find(item => item.id === storeId);
-				return store ? store.dm : '无';
-			},
-			initData() {
-                this.listLoading = true;
-                let _query = {
-                    ...this.listQuery,
-                    ...this.query
-                };
-                let query = {}
-                for (let key in _query) {
-                    if (Array.isArray(_query[key])) {
-                        query[key] = _query[key].join()
-                    } else {
-                        query[key] = _query[key]
-                    }
-                }
-                request({
-                    url: `/api/Extend/LqReimbursementApplication`,
-                    method: 'GET',
-                    data: query
-                }).then(res => {
-                    this.list = res.data.list
-                    this.total = res.data.pagination.total
-                    this.listLoading = false
-                })
-            },
-			handleDel(id) {
-                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
-                    type: 'warning'
-                }).then(() => {
-                    request({
-                        url: `/api/Extend/LqReimbursementApplication/${id}`,
-                        method: 'DELETE'
-                    }).then(res => {
-                        this.$message({
-                            type: 'success',
-                            message: res.msg,
-                            onClose: () => {
-                                this.initData()
-                            }
-                        });
-                    })
-                }).catch(() => {
-                });
-            },
-			handleSelectionChange(val) {
-                const res = val.map(item => item.id)
-                this.multipleSelection = res
-            },
-            handleBatchRemoveDel() {
-                if (!this.multipleSelection.length) {
-                    this.$message({
-                        type: 'error',
-                        message: '请选择一条数据',
-                        duration: 1500,
-                    })
-                    return
-                }
-                const ids = this.multipleSelection
-                this.$confirm('您确定要删除这些数据吗, 是否继续？', '提示', {
-                    type: 'warning'
-                }).then(() => {
-                    request({
-                        url: `/api/Extend/LqReimbursementApplication/batchRemove`,
-                        method: 'POST',
-                        data: ids ,
-                    }).then(res => {
-                        this.$message({
-                            type: 'success',
-                            message: res.msg,
-                            onClose: () => {
-                                this.initData()
-                            }
-                        });
-                    })
-                }).catch(() => { })
-            },
-			addOrUpdateHandle(id, isDetail) {
-                this.formVisible = true
-                this.$nextTick(() => {
-                    this.$refs.NCCForm.init(id, isDetail)
-                })
-            },
-			exportData() {
-                this.exportBoxVisible = true
-                this.$nextTick(() => {
-                    this.$refs.ExportBox.init(this.columnList)
-                })
-            },
-            download(data) {
-                let query = { ...data, ...this.listQuery, ...this.query }
-                request({
-                    url: `/api/Extend/LqReimbursementApplication/Actions/Export`,
-                    method: 'GET',
-                    data: query
-                }).then(res => {
-                    if (!res.data.url) return
-                    window.location.href = this.define.comUrl + res.data.url
-                    this.$refs.ExportBox.visible = false
-                    this.exportBoxVisible = false
-                })
-            },
-			search() {
-                this.listQuery = {
-                    currentPage: 1,
-                    pageSize: 20,
-                    sort: "desc",
-                    sidx: "",
-                }
-                this.initData()
-            },
-            refresh(isrRefresh) {
-                this.formVisible = false
-                if (isrRefresh) this.reset()
-            },
-            reset() {
-                for (let key in this.query) {
-                    this.query[key] = undefined
-                }
-                this.listQuery = {
-                    currentPage: 1,
-                    pageSize: 20,
-                    sort: "desc",
-                    sidx: "",
-                }
-                this.initData()
-            },
-            showDetail(id) {
-                this.detailVisible = true
-                this.$nextTick(() => {
-                    this.$refs.DetailDialog.init(id)
-                })
-            },
-            handleDetailClose() {
-                this.detailVisible = false
-            }
-		}
+import request from '@/utils/request'
+import DetailDialog from './detail-dialog.vue'
+import ApprovalHistoryDialog from './approval-history-dialog.vue'
+
+export default {
+  name: 'LqReimbursementApplication',
+  components: {
+    DetailDialog,
+    ApprovalHistoryDialog
+  },
+  data() {
+    return {
+      activeTab: 'allPending', // 当前激活的标签页
+      listLoading: false,
+      list: [],
+      total: 0,
+      detailVisible: false,
+      historyVisible: false,
+      queryParams: {
+        applicationStoreId: '',
+        id: '',
+        applicationUserId: '',
+        applicationUserName: '',
+        applicationTime: null,
+        amount: '',
+        approveStatus: '',
+        purchaseRecordsId: ''
+      },
+      listQuery: {
+        currentPage: 1,
+        pageSize: 20,
+        sidx: 'applicationTime',
+        sort: 'desc'
+      }
     }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    // 获取列表数据
+    async getList() {
+      this.listLoading = true
+      try {
+        let url = '/api/Extend/LqReimbursementApplication'
+        
+        // 根据标签页选择不同的接口
+        if (this.activeTab === 'allPending') {
+          url = '/api/Extend/LqReimbursementApplication/Actions/AllPendingApproval'
+        } else if (this.activeTab === 'myPending') {
+          url = '/api/Extend/LqReimbursementApplication/Actions/PendingApproval'
+        }
+
+        const params = {
+          currentPage: this.listQuery.currentPage,
+          pageSize: this.listQuery.pageSize,
+          sidx: this.listQuery.sidx,
+          sort: this.listQuery.sort
+        }
+
+        // 添加查询参数
+        if (this.queryParams.applicationStoreId) {
+          params.applicationStoreId = this.queryParams.applicationStoreId
+        }
+
+        // 只有"所有申请"标签页才添加这些查询参数
+        if (this.activeTab === 'all') {
+          if (this.queryParams.id) {
+            params.id = this.queryParams.id
+          }
+          if (this.queryParams.applicationUserId) {
+            params.applicationUserId = this.queryParams.applicationUserId
+          }
+          if (this.queryParams.applicationUserName) {
+            params.applicationUserName = this.queryParams.applicationUserName
+          }
+          if (this.queryParams.applicationTime && this.queryParams.applicationTime.length === 2) {
+            params.applicationTime = `${this.queryParams.applicationTime[0]},${this.queryParams.applicationTime[1]}`
+          }
+          if (this.queryParams.amount) {
+            params.amount = this.queryParams.amount
+          }
+          if (this.queryParams.approveStatus) {
+            params.approveStatus = this.queryParams.approveStatus
+          }
+          if (this.queryParams.purchaseRecordsId) {
+            params.purchaseRecordsId = this.queryParams.purchaseRecordsId
+          }
+        }
+
+        const response = await request({
+          url: url,
+          method: 'GET',
+          data: params
+        })
+
+        if (response.code === 200) {
+          this.list = response.data.list || []
+          this.total = (response.data.pagination && response.data.pagination.Total) || 0
+        } else {
+          this.$message.error(response.msg || '获取列表失败')
+          this.list = []
+          this.total = 0
+        }
+      } catch (error) {
+        console.error('获取列表失败:', error)
+        this.$message.error('获取列表失败')
+        this.list = []
+        this.total = 0
+      } finally {
+        this.listLoading = false
+      }
+    },
+
+    // 标签页切换
+    handleTabChange() {
+      this.listQuery.currentPage = 1
+      this.resetQuery()
+    },
+
+    // 搜索
+    handleQuery() {
+      this.listQuery.currentPage = 1
+      this.getList()
+    },
+
+    // 重置搜索
+    resetQuery() {
+      this.queryParams = {
+        applicationStoreId: '',
+        id: '',
+        applicationUserId: '',
+        applicationUserName: '',
+        applicationTime: null,
+        amount: '',
+        approveStatus: '',
+        purchaseRecordsId: ''
+      }
+      this.listQuery = {
+        currentPage: 1,
+        pageSize: 20,
+        sidx: 'applicationTime',
+        sort: 'desc'
+      }
+      this.getList()
+    },
+
+    // 查看详情/审批
+    handleView(row) {
+      this.detailVisible = true
+      this.$nextTick(() => {
+        this.$refs.DetailDialog.init(row.id)
+      })
+    },
+
+    // 查看审批历史
+    handleViewHistory(row) {
+      this.historyVisible = true
+      this.$nextTick(() => {
+        this.$refs.ApprovalHistoryDialog.init(row.id)
+      })
+    },
+
+    // 分页大小改变
+    handleSizeChange(val) {
+      this.listQuery.pageSize = val
+      this.getList()
+    },
+
+    // 当前页改变
+    handleCurrentChange(val) {
+      this.listQuery.currentPage = val
+      this.getList()
+    },
+
+    // 格式化金额
+    formatMoney(amount) {
+      if (!amount) return '无'
+      return `¥${Number(amount).toLocaleString('zh-CN', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      })}`
+    },
+
+    // 格式化日期时间
+    formatDateTime(dateTime) {
+      if (!dateTime) return '无'
+      const date = new Date(dateTime)
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      return `${year}-${month}-${day} ${hours}:${minutes}`
+    },
+
+    // 获取状态类型
+    getStatusType(status) {
+      const statusMap = {
+        '待审批': 'info',
+        '审批中': 'warning',
+        '已通过': 'success',
+        '未通过': 'danger',
+        '已退回': 'warning'
+      }
+      return statusMap[status] || ''
+    }
+  }
+}
 </script>
+
 <style lang="scss" scoped>
-.store-info {
+.app-container {
+  padding: 20px;
+  background: #f5f5f5;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 20px;
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  .header-left {
+    h2 {
+      margin: 0 0 8px 0;
+      color: #303133;
+      font-size: 20px;
+      font-weight: 600;
+    }
+
+    .page-desc {
+      margin: 0;
+      color: #909399;
+      font-size: 14px;
+    }
+  }
+
+  .header-right {
+    display: flex;
+    gap: 12px;
+  }
+}
+
+.tabs-container {
+  margin-bottom: 20px;
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.search-container {
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.table-container {
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+}
+
+// 表格项样式
+.id-item,
+.user-item,
+.store-item,
+.time-item,
+.amount-item,
+.approver-item,
+.node-item,
+.node-count-item {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
-
-  i {
+  
+  .id-icon {
+    color: #409EFF;
+    font-size: 16px;
+  }
+  
+  .user-icon {
     color: #67C23A;
-    font-size: 14px;
+    font-size: 16px;
   }
-
+  
+  .store-icon {
+    color: #67C23A;
+    font-size: 16px;
+  }
+  
+  .time-icon {
+    color: #909399;
+    font-size: 16px;
+  }
+  
+  .amount-icon {
+    color: #F56C6C;
+    font-size: 16px;
+  }
+  
+  .approver-icon {
+    color: #409EFF;
+    font-size: 16px;
+  }
+  
+  .node-icon {
+    color: #909399;
+    font-size: 16px;
+  }
+  
+  .node-count-icon {
+    color: #909399;
+    font-size: 16px;
+  }
+  
   span {
-    color: #303133;
+    color: #606266;
   }
 }
-</style>
\ No newline at end of file
+
+.amount-value {
+  font-weight: 600;
+  color: #F56C6C;
+}
+
+// 操作按钮样式
+.action-buttons {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  .view-btn {
+    color: #409EFF;
+    
+    &:hover {
+      color: #66b1ff;
+    }
+  }
+  
+  .history-btn {
+    color: #909399;
+    
+    &:hover {
+      color: #606266;
+    }
+  }
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: center;
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+</style>
diff --git a/绿纤uni-app/common/config.js b/绿纤uni-app/common/config.js
index c156a1c..ab8ccef 100644
--- a/绿纤uni-app/common/config.js
+++ b/绿纤uni-app/common/config.js
@@ -10,8 +10,8 @@ const ENV_CONFIG = {
 	// 正式环境
 	production: {
 		name: '正式环境',
-		// apiBaseUrl: 'http://erp_test.lvqianmeiye.com',
-		apiBaseUrl: 'https://erp.lvqianmeiye.com',
+		apiBaseUrl: 'http://erp_test.lvqianmeiye.com',
+		// apiBaseUrl: 'https://erp.lvqianmeiye.com',
 		description: '生产环境服务器'
 	}
 };
--
libgit2 0.21.4