From 27cd042df9aca0383a49f3514bc21958dd890912 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 29 六月 2026 15:42:23 +0800
Subject: [PATCH] 银川 1.联调产品维护页面 2.添加IM即时通讯模块
---
src/views/im/manager/face/pack/modules/item-form.vue | 119 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 119 insertions(+), 0 deletions(-)
diff --git a/src/views/im/manager/face/pack/modules/item-form.vue b/src/views/im/manager/face/pack/modules/item-form.vue
new file mode 100644
index 0000000..becd7b5
--- /dev/null
+++ b/src/views/im/manager/face/pack/modules/item-form.vue
@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import type { ImManagerFacePackItemApi } from '#/api/im/manager/face/item';
+
+import { computed, ref, watch } from 'vue';
+
+import { useVbenModal } from '#/packages/effects/common-ui/src';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+ createManagerFacePackItem,
+ getManagerFacePackItem,
+ updateManagerFacePackItem,
+} from '#/api/im/manager/face/item';
+import { $t } from '#/locales';
+import { probeImageSize } from '#/views/im/manager/utils/format';
+
+import { useItemFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<ImManagerFacePackItemApi.FacePackItem>();
+const packId = ref(0);
+const lastUrl = ref('');
+const getTitle = computed(() => {
+ return formData.value?.id ? '淇敼琛ㄦ儏' : '鏂板琛ㄦ儏';
+});
+
+const [Form, formApi] = useVbenForm({
+ commonConfig: {
+ componentProps: {
+ class: 'w-full',
+ },
+ formItemClass: 'col-span-2',
+ labelWidth: 80,
+ },
+ layout: 'horizontal',
+ schema: useItemFormSchema(),
+ showDefaultActions: false,
+});
+
+/** 鍥炲～鍥剧墖灏哄 */
+async function applyImageSize(url?: string) {
+ if (!url) {
+ lastUrl.value = '';
+ await formApi.setFieldValue('width', undefined);
+ await formApi.setFieldValue('height', undefined);
+ return;
+ }
+ if (url === lastUrl.value) {
+ return;
+ }
+ lastUrl.value = url;
+ try {
+ const size = await probeImageSize(url);
+ await formApi.setFieldValue('width', size.width);
+ await formApi.setFieldValue('height', size.height);
+ } catch {
+ message.warning('鍥剧墖灏哄鎺㈡祴澶辫触锛岃鎵嬪姩濉啓瀹介珮');
+ }
+}
+
+watch(
+ () => formApi.form.values?.url,
+ (url) => {
+ void applyImageSize(url as string | undefined);
+ },
+);
+
+const [Modal, modalApi] = useVbenModal({
+ async onConfirm() {
+ const { valid } = await formApi.validate();
+ if (!valid) {
+ return;
+ }
+ modalApi.lock();
+ const data = (await formApi.getValues()) as ImManagerFacePackItemApi.FacePackItem;
+ try {
+ data.packId = data.packId || packId.value;
+ await (formData.value?.id
+ ? updateManagerFacePackItem(data)
+ : createManagerFacePackItem(data));
+ await modalApi.close();
+ emit('success');
+ message.success($t('ui.actionMessage.operationSuccess'));
+ } finally {
+ modalApi.unlock();
+ }
+ },
+ async onOpenChange(isOpen: boolean) {
+ if (!isOpen) {
+ formData.value = undefined;
+ lastUrl.value = '';
+ await formApi.resetForm();
+ return;
+ }
+ const data = modalApi.getData<{ id?: number; packId: number }>();
+ packId.value = data?.packId || 0;
+ await formApi.setValues({ packId: packId.value, sort: 0 });
+ if (!data?.id) {
+ return;
+ }
+ modalApi.lock();
+ try {
+ formData.value = await getManagerFacePackItem(data.id);
+ lastUrl.value = formData.value.url;
+ await formApi.setValues(formData.value);
+ } finally {
+ modalApi.unlock();
+ }
+ },
+});
+</script>
+
+<template>
+ <Modal :title="getTitle" class="w-1/3">
+ <Form class="mx-4" />
+ </Modal>
+</template>
--
Gitblit v1.9.3