@utogether/udp-core 2.0.0-beta.26 → 2.0.0-beta.28

package/src/components/udp/index.ts

@@ -5,5 +5,6 @@ import FormUpload2 from './form-upload/form-upload.vue';
 import UtStampBadge2 from './ut-stamp-badge/index.vue';
 import UtUpload2 from './upload/index.vue';
 import UtLov2 from './lov/index.vue';
+import UtModalForm2 from './modal-form/index.vue';
 
-export { UtGrid2, UtForm2, UtContent2, FormUpload2, UtStampBadge2, UtUpload2, UtLov2 };
+export { UtGrid2, UtForm2, UtContent2, FormUpload2, UtStampBadge2, UtUpload2, UtLov2, UtModalForm2 };

package/src/components/udp/modal-form/index.vue

@@ -0,0 +1,326 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-29 21:02:43
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2026-08-06 10:20:41
+ * @Description: file content
+-->
+
+<template>
+  <div>
+    <vxe-modal
+      v-model="showModal"
+      :title="title"
+      :width="width"
+      :height="modalHeight"
+      :loading="loading"
+      :show-footer="dataStatus !== 'detail'"
+      min-width="240"
+      destroy-on-close
+      resize
+      v-bind="modalOptions"
+      @close="onClose"
+    >
+      <template #default>
+        <vxe-form
+          ref="xForm"
+          :data="data"
+          :items="formItems"
+          :rules="rules"
+          :title-width="titleWidth"
+          title-align="right"
+          v-bind="formOptions"
+        >
+          <template #dividerPrefix />
+          <!-- <template #collapseNode>
+            <vxe-checkbox
+              v-model="collapseStatus"
+              content="查看更多"
+              :checked-value="false"
+              :unchecked-value="true"
+              class="pl-10"
+              @change="onChange"
+            />
+          </template> -->
+        </vxe-form>
+      </template>
+      <template v-if="!loading" #footer>
+        <vxe-checkbox
+          v-if="dataStatus === 'add'"
+          v-model="isContinue"
+          :content="$t('message.udp.continuousAddition')"
+          style="margin-right: 8px"
+        />
+        <ut-button
+          v-if="attrs?.showCancleButton !== false"
+          status="warning"
+          :content="modalOptions?.cancelButtonText || 'cancel'"
+          icon="ri-close-line"
+          @tap="onClose"
+        />
+        <slot />
+        <ut-button
+          v-if="attrs?.showConfirmButton !== false"
+          status="u-cyan"
+          :content="modalOptions?.confirmButtonText || 'confirm'"
+          icon="ri-save-3-line"
+          @tap="onConfirm"
+        />
+      </template>
+    </vxe-modal>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'UtModalForm'
+};
+</script>
+<script lang="ts" setup>
+import { onBeforeMount, ref, computed, getCurrentInstance, useAttrs } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { getAttrs } from '../utils';
+import to from 'await-to-js';
+import { formatRules, formatItems, successMessage } from '@utogether/utils';
+import { clone } from 'xe-utils';
+
+export interface IProps {
+  record: IRecord; // 数据对象
+  formOptions?: IRecord;
+  modalOptions?: IRecord;
+  items: Array<IFormItemProps>; // form item
+  url?: string; // 服务路径
+  method?: string; // 请求方式
+  title?: string; // 标题
+  titleWidth?: string | number; // 标题宽度
+  dataStatus?: string; // 状态
+  width?: number;
+  beforeHideMethod?: () => Promise<boolean>;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  record: (): IRecord => {
+    return {};
+  },
+  formOptions: (): IRecord => {
+    return {};
+  },
+  modalOptions: (): IRecord => {
+    return {};
+  },
+  items: () => [],
+  title: '数据记录',
+  width: 420,
+  titleWidth: 100,
+  dataStatus: 'detail',
+  url: '',
+  method: 'post'
+});
+
+const attrs: IRecord = getAttrs(useAttrs());
+
+const loading = ref(false);
+
+const isContinue = ref(false);
+// 保存初始record，用于连续添加时重置
+const defaultRecord = clone(props.record, true);
+
+const data = ref<IRecord>(props.record);
+
+const instance = getCurrentInstance()!;
+
+const serviceApi = instance.appContext.config.globalProperties.$serviceApi;
+
+/**
+ * @description: 根据items 获取必填选
+ */
+const rules = computed(() => {
+  if (!props.items.length) return {};
+  return formatRules(props.items, t);
+});
+
+const { t } = useI18n();
+
+const formItems = computed(() => {
+  if (!props.items.length) return props.items;
+  return formatItems(clone(props.items, true), props.dataStatus, 24);
+});
+
+const modalHeight = computed(() => {
+  const maxHeight = Math.floor(window.innerHeight * 0.8);
+  let height = 0;
+  let offset = props.dataStatus !== 'detail' ? 100 : 60;
+  if (props.items.length === 1) {
+    // 仅有一项时，增加8px的边距
+    offset += 8;
+  }
+  console.log('modalHeight', maxHeight);
+  let contentHeight = 0;
+  let currentRowSpan = 0;
+  let currentRowHeight = 0;
+
+  const flattenItems = (items: any[]): any[] => {
+    const result: any[] = [];
+    items.forEach(item => {
+      result.push(item);
+      if (item.children?.length) {
+        result.push(...item.children);
+      }
+    });
+    return result;
+  };
+
+  const flatItems = flattenItems(props.items);
+  console.log('flatItems', flatItems);
+  flatItems
+    .filter(item => item.visible !== false)
+    .forEach((item, index) => {
+      const span = item.span ?? 24;
+      let itemHeight = item.itemRender?.name === 'VxeTextarea' ? 75 : item.vertical || item.titleBold ? 30 : 45;
+      if (item.visibleMethod) {
+        if (!item.visibleMethod({ data: props.record })) {
+          itemHeight = 0;
+        }
+      }
+      if (index === 0) {
+        currentRowSpan = span;
+        currentRowHeight = itemHeight;
+      } else if (currentRowSpan + span <= 24) {
+        currentRowSpan += span;
+        currentRowHeight = Math.max(currentRowHeight, itemHeight);
+      } else {
+        contentHeight += currentRowHeight;
+        currentRowSpan = span;
+        currentRowHeight = itemHeight;
+      }
+
+      const nextSpan = flatItems[index + 1]?.span ?? 24;
+      if (nextSpan + currentRowSpan > 24) {
+        contentHeight += currentRowHeight;
+        currentRowSpan = 0;
+        currentRowHeight = 0;
+        console.log(index, '-contentHeight=', contentHeight, itemHeight);
+      }
+    });
+  // contentHeight += currentRowHeight;
+
+  height = contentHeight + offset;
+  height = maxHeight < height ? maxHeight : height;
+  // console.log('height', height);
+  // console.log('maxHeight', maxHeight);
+  return height;
+});
+
+const showModal = ref(false);
+
+const xForm = ref(null);
+/**
+ * @description: 弹框确认
+ */
+const onConfirm = () => {
+  // @ts-ignore
+  xForm.value.validate(async (valid: boolean) => {
+    if (!valid) {
+      const { url, method } = props;
+      if (url) {
+        showLoading();
+        const body = attrs?.dataProcessMethod ? attrs?.dataProcessMethod(data.value) : data.value;
+        const [err, res] = await to(serviceApi[method](url, body));
+        hiddenLoading();
+        if (!err) {
+          let beforeHideMethodResult = true;
+          if (props.beforeHideMethod) {
+            beforeHideMethodResult = await props.beforeHideMethod();
+          }
+          successMessage();
+          emit('confirm', res);
+          if (isContinue.value) {
+            // 连续添加：重置表单为默认值，不关闭弹框
+            resetRecord();
+          } else if (beforeHideMethodResult) {
+            onClose();
+          }
+        }
+      } else {
+        emit('confirm');
+      }
+    }
+  });
+};
+
+// const onBeforeHideMethod = () => {
+//   console.log('onBeforeHideMethod');
+//   return new Promise((resolve, reject) => {
+//     reject(new Error());
+//   });
+// };
+
+/**
+ * @description: 重置表单数据为初始值
+ */
+const resetRecord = () => {
+  data.value = clone(defaultRecord, true);
+  xForm.value?.clearValidate();
+};
+
+/**
+ * @description: 显示加载框
+ */
+const showLoading = () => {
+  loading.value = true;
+};
+
+/**
+ * @description: 关闭加载框
+ */
+const hiddenLoading = () => {
+  loading.value = false;
+};
+const validate = (cb: Function) => {
+  // @ts-ignore
+  xForm.value.validate(cb);
+};
+/**
+ * @deprecated 已过期,使用validate
+ */
+const validateForm = (cb: Function) => {
+  // @ts-ignore
+  xForm.value.validate(cb);
+};
+
+/**
+ * @description: 关闭弹框
+ */
+const onClose = () => {
+  showModal.value = false;
+  emit('close');
+};
+/**
+ * @description: 打开弹框
+ */
+const openModal = () => {
+  showModal.value = true;
+};
+
+const closeModal = () => {
+  onClose();
+};
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'confirm', record?: any): void;
+}>();
+
+defineExpose({
+  showLoading,
+  hiddenLoading,
+  openModal,
+  closeModal,
+  validate,
+  validateForm
+});
+
+onBeforeMount(() => {
+  openModal();
+});
+</script>