|
|
@@ -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;
|