Ver Fonte

Merge branch 'development' of http://8.152.195.41:3000/alien/group_web_merchant into development

sunshibo há 2 dias atrás
pai
commit
a0b15cd6b9
1 ficheiros alterados com 29 adições e 2 exclusões
  1. 29 2
      src/views/appoinmentManagement/classifyManagement.vue

+ 29 - 2
src/views/appoinmentManagement/classifyManagement.vue

@@ -57,6 +57,7 @@
               :limit="9"
               :http-request="handlePlaneImageUpload"
               :on-remove="onPlaneImageRemove"
+              :on-preview="onPlaneImagePreview"
               accept="image/*"
               multiple
             >
@@ -90,6 +91,12 @@
         <el-button type="primary" :loading="submitLoading" @click="submitForm"> 确定 </el-button>
       </template>
     </el-dialog>
+
+    <PcImagePreviewViewer
+      v-model:visible="planeImageViewerVisible"
+      :url-list="planeImageViewerUrlList"
+      :initial-index="planeImageViewerInitialIndex"
+    />
   </div>
 </template>
 
@@ -98,8 +105,9 @@ import { ref, reactive } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { useDebounceFn } from "@vueuse/core";
 import type { FormInstance, FormRules } from "element-plus";
-import type { UploadRequestOptions, UploadUserFile } from "element-plus";
+import type { UploadFile, UploadRequestOptions, UploadUserFile } from "element-plus";
 import { Plus } from "@element-plus/icons-vue";
+import PcImagePreviewViewer from "@/components/pcMediaPreview/PcImagePreviewViewer.vue";
 import ProTable from "@/components/ProTable/index.vue";
 import type { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
 import {
@@ -203,6 +211,11 @@ const form = reactive<{
   planeImageFileList: []
 });
 
+/** picture-card 放大镜:EP2 默认 onPreview 为空,需自行打开预览(挂 body,高于弹窗/表格) */
+const planeImageViewerVisible = ref(false);
+const planeImageViewerUrlList = ref<string[]>([]);
+const planeImageViewerInitialIndex = ref(0);
+
 const rules: FormRules = {
   name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
   maxBookingTime: [{ required: true, message: "请输入最长预订时间", trigger: "blur" }],
@@ -252,6 +265,19 @@ function onPlaneImageRemove(_file: UploadUserFile, fileList: UploadUserFile[]) {
   formRef.value?.validateField("planeImageUrls").catch(() => {});
 }
 
+function onPlaneImagePreview(file: UploadFile) {
+  const urls = form.planeImageFileList.map(f => String((f as UploadUserFile).url || "").trim()).filter(Boolean);
+  if (!urls.length) {
+    ElMessage.warning("暂无可预览的图片");
+    return;
+  }
+  const u = String(file.url || "").trim();
+  const idx = u ? urls.indexOf(u) : 0;
+  planeImageViewerUrlList.value = urls;
+  planeImageViewerInitialIndex.value = idx >= 0 ? idx : 0;
+  planeImageViewerVisible.value = true;
+}
+
 function getStoreId(): number | string | null {
   return localGet("geeker-user")?.userInfo?.storeId ?? localGet("createdId") ?? null;
 }
@@ -300,7 +326,7 @@ function parseHasReservationResponse(res: any): boolean {
   return Boolean(val);
 }
 
-async function categoryHasReservation(categoryId: number | string, storeId: number | string): Promise<boolean> {
+async function categoryHasReservation(categoryId: number | string): Promise<boolean> {
   const res: any = await getHasReservation({ categoryId: categoryId, storeId: getStoreId() });
   return parseHasReservationResponse(res);
 }
@@ -394,6 +420,7 @@ async function handleDelete(row: CategoryRow) {
 }
 
 function onDialogClose() {
+  planeImageViewerVisible.value = false;
   editId.value = null;
   form.name = "";
   form.maxBookingTime = 0;