feat(license): 实现食品经营许可证变更记录功能

- 新增变更记录弹窗展示功能
- 添加滚动条优化长列表显示
- 增加空状态提示与占位图
- 集成拒绝原因字段展示
- 调整图片上传逻辑仅提交首张
- 更新状态徽章样式映射方式
- 移除模拟数据改用真实接口调用
- 修复获取记录失败时的数据清空问题

src/views/licenseManagement/foodBusinessLicense.vue

@@ -69,32 +69,39 @@
 
     <!-- 变更记录弹窗 -->
     <el-dialog v-model="changeRecordDialogVisible" title="变更记录" width="900px" :close-on-click-modal="false">
-      <div class="change-record-content">
-        <div class="record-date">
-          {{ currentRecordDate }}
-        </div>
-        <div class="record-items">
-          <div v-for="(item, index) in changeRecordList" :key="index" class="record-item">
-            <div class="record-status-badge" :class="getStatusClass(item.status)">
-              {{ getStatusText(item.status) }}
+      <el-scrollbar height="400px" class="change-record-scrollbar">
+        <div v-if="changeRecordList && changeRecordList.length > 0" class="change-record-content">
+          <div v-for="(item, index) in changeRecordList" :key="index" class="record-group">
+            <div class="record-date">
+              {{ item.createdDateFormat }}
             </div>
-            <el-image
-              :src="item.imgUrl"
-              fit="cover"
-              class="record-image"
-              :preview-src-list="changeRecordList.map(record => record.imgUrl)"
-              :initial-index="index"
-            >
-              <template #error>
-                <div class="image-slot">
-                  <el-icon><Picture /></el-icon>
+            <div class="record-items">
+              <div class="record-item">
+                <div class="record-status-badge" :class="getStatusClass(item.licenseExecuteStatus)">
+                  {{ item.licenseExecuteName }}
                 </div>
-              </template>
-            </el-image>
+                <el-image
+                  :src="item.imgUrl"
+                  fit="cover"
+                  class="record-image"
+                  :preview-src-list="changeRecordList.map(record => record.imgUrl)"
+                  :initial-index="index"
+                >
+                  <template #error>
+                    <div class="image-slot">
+                      <el-icon><Picture /></el-icon>
+                    </div>
+                  </template>
+                </el-image>
+              </div>
+            </div>
+            <div v-if="item.reasonRefusal" class="rejection-reason">拒绝原因: {{ item.reasonRefusal }}</div>
           </div>
         </div>
-        <div v-if="rejectionReason" class="rejection-reason">拒绝原因: {{ rejectionReason }}</div>
-      </div>
+        <div v-else class="empty-record">
+          <el-empty description="暂无变更记录" :image-size="100" />
+        </div>
+      </el-scrollbar>
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="changeRecordDialogVisible = false"> 关闭 </el-button>
@@ -195,23 +202,22 @@ const handleReplace = async () => {
 
 const handleViewChangeRecord = async () => {
   try {
-    // TODO: 调用API获取变更记录
-    // const response = await getChangeRecords();
-    // if (response.code === 200) {
-    //   changeRecordList.value = response.data.records;
-    //   currentRecordDate.value = response.data.date;
-    //   rejectionReason.value = response.data.rejectionReason || "";
-    // }
-    // 模拟数据（假数据）
-    changeRecordList.value = [
-      { id: "1", status: "pending", imgUrl: "https://picsum.photos/150/150?random=1" },
-      { id: "2", status: "success", imgUrl: "https://picsum.photos/150/150?random=2" },
-      { id: "3", status: "failed", imgUrl: "https://picsum.photos/150/150?random=3" }
-    ];
-    rejectionReason.value = "";
+    const params = {
+      storeId: localGet("createdId")
+    };
+    const res: any = await getChangeRecords(params);
+    if (res.code === 200) {
+      changeRecordList.value = res.data;
+    } else {
+      // 请求失败时清空数据
+      changeRecordList.value = [];
+    }
     changeRecordDialogVisible.value = true;
   } catch (error) {
     ElMessage.error("获取变更记录失败");
+    // 发生错误时清空数据并显示空状态
+    changeRecordList.value = [];
+    changeRecordDialogVisible.value = true;
   }
 };
 
@@ -529,10 +535,11 @@ const handleSubmitReplace = async () => {
   try {
     // 只提交单张图片，排序为0
     const imageDataWithSort = uploadedFiles.map((file, index) => ({
-      url: file.url,
-      sort: index
+      imgUrl: file.url,
+      imgSort: index,
+      storeId: localGet("createdId")
     }));
-    await submitFoodLicenseReview({ images: imageDataWithSort });
+    await submitFoodLicenseReview(imageDataWithSort[0]);
     ElMessage.success("提交审核成功");
     replaceDialogVisible.value = false;
     fileList.value = [];
@@ -546,12 +553,8 @@ const handleSubmitReplace = async () => {
 };
 
 const getStatusClass = (status: string) => {
-  const statusMap: Record<string, string> = {
-    pending: "status-pending",
-    success: "status-success",
-    failed: "status-failed"
-  };
-  return statusMap[status] || "";
+  const statusInfo = statusMap[status];
+  return statusInfo ? statusInfo.class : "";
 };
 
 const getStatusText = (status: string) => {