@utogether/udp-core 1.0.1-beta.4 → 1.0.1-beta.6

package/src/components/udp/flip-down/FlipCard/flip-card.vue

@@ -0,0 +1,251 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { FlipCardHandleInterface } from './interfaces';
+
+const { initFrontText, initBackText, duration } = defineProps({
+  // 初始前牌文字
+  initFrontText: { type: [String, Number], default: '0' },
+  // 初始后牌文字
+  initBackText: { type: [String, Number], default: '1' },
+  // 翻牌动画时间，与CSS中设置的animation-duration保持一致
+  duration: { type: Number, default: 600 }
+});
+// 是否正在翻转中
+const isFlipping = ref(false);
+// 翻转类型，down=向下翻转，up=向上翻转
+const flipType = ref<string>('down');
+// 前牌文字
+const frontText = ref<string | number>(initFrontText);
+// 后牌文字
+const backText = ref<string | number>(initBackText);
+// 翻转
+const flip = ({
+  type,
+  newFrontText,
+  newBackText
+}: {
+  type: string;
+  newFrontText: string | number;
+  newBackText: string | number;
+}) => {
+  if (isFlipping.value) {
+    return false;
+  }
+  frontText.value = newFrontText;
+  backText.value = newBackText;
+  flipType.value = type;
+  isFlipping.value = true;
+
+  setTimeout(() => {
+    frontText.value = newBackText;
+    isFlipping.value = false;
+  }, duration);
+};
+
+defineExpose<FlipCardHandleInterface>({
+  // 下翻牌
+  flipDown: (newFrontText, newBackText) => {
+    flip({ type: 'down', newFrontText, newBackText });
+  },
+  // 上翻牌
+  flipUp: (newFrontText, newBackText) => {
+    flip({ type: 'up', newFrontText, newBackText });
+  }
+});
+</script>
+
+<template>
+  <div class="M-FlipCard" :class="{ down: flipType === 'down', up: flipType === 'up', go: isFlipping }">
+    <div class="digital front" :class="'number' + frontText" />
+    <div class="digital back" :class="'number' + backText" />
+  </div>
+</template>
+
+<style scoped>
+.M-FlipCard {
+  display: inline-block;
+  position: relative;
+  width: 36px;
+  height: 60px;
+  line-height: 60px;
+  border: solid 1px #222;
+  border-radius: 10px;
+  background: #fff;
+  font-size: 46px;
+  font-weight: 700;
+  color: #ec685c;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
+  text-align: center;
+  /* font-family: 'Helvetica Neue'; */
+}
+
+.M-FlipCard .digital:before,
+.M-FlipCard .digital:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  /* background: #000; */
+  background: #222;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.M-FlipCard .digital:before {
+  top: 0;
+  bottom: 50%;
+  border-radius: 10px 10px 0 0;
+  /* border-bottom: solid 1px #666; */
+}
+
+.M-FlipCard .digital:after {
+  top: 50%;
+  bottom: 0;
+  border-radius: 0 0 10px 10px;
+  line-height: 0;
+}
+
+/*向下翻*/
+.M-FlipCard.down .front:before {
+  z-index: 3;
+}
+
+.M-FlipCard.down .back:after {
+  z-index: 2;
+  transform-origin: 50% 0%;
+  transform: perspective(160px) rotateX(180deg);
+}
+
+.M-FlipCard.down .front:after,
+.M-FlipCard.down .back:before {
+  z-index: 1;
+}
+
+.M-FlipCard.down.go .front:before {
+  transform-origin: 50% 100%;
+  animation: frontFlipDown 0.6s ease-in-out both;
+  box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
+  backface-visibility: hidden;
+}
+
+.M-FlipCard.down.go .back:after {
+  animation: backFlipDown 0.6s ease-in-out both;
+}
+
+/*向上翻*/
+.M-FlipCard.up .front:after {
+  z-index: 3;
+}
+
+.M-FlipCard.up .back:before {
+  z-index: 2;
+  transform-origin: 50% 100%;
+  transform: perspective(160px) rotateX(-180deg);
+}
+
+.M-FlipCard.up .front:before,
+.M-FlipCard.up .back:after {
+  z-index: 1;
+}
+
+.M-FlipCard.up.go .front:after {
+  transform-origin: 50% 0;
+  animation: frontFlipUp 0.6s ease-in-out both;
+  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.3);
+  backface-visibility: hidden;
+}
+
+.M-FlipCard.up.go .back:before {
+  animation: backFlipUp 0.6s ease-in-out both;
+}
+
+@keyframes frontFlipDown {
+  0% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(-180deg);
+  }
+}
+
+@keyframes backFlipDown {
+  0% {
+    transform: perspective(160px) rotateX(180deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+}
+
+@keyframes frontFlipUp {
+  0% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(180deg);
+  }
+}
+
+@keyframes backFlipUp {
+  0% {
+    transform: perspective(160px) rotateX(-180deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+}
+
+.M-FlipCard .number0:before,
+.M-FlipCard .number0:after {
+  content: '0';
+}
+
+.M-FlipCard .number1:before,
+.M-FlipCard .number1:after {
+  content: '1';
+}
+
+.M-FlipCard .number2:before,
+.M-FlipCard .number2:after {
+  content: '2';
+}
+
+.M-FlipCard .number3:before,
+.M-FlipCard .number3:after {
+  content: '3';
+}
+
+.M-FlipCard .number4:before,
+.M-FlipCard .number4:after {
+  content: '4';
+}
+
+.M-FlipCard .number5:before,
+.M-FlipCard .number5:after {
+  content: '5';
+}
+
+.M-FlipCard .number6:before,
+.M-FlipCard .number6:after {
+  content: '6';
+}
+
+.M-FlipCard .number7:before,
+.M-FlipCard .number7:after {
+  content: '7';
+}
+
+.M-FlipCard .number8:before,
+.M-FlipCard .number8:after {
+  content: '8';
+}
+
+.M-FlipCard .number9:before,
+.M-FlipCard .number9:after {
+  content: '9';
+}
+</style>

package/src/components/udp/flip-down/FlipCard/interfaces.ts

@@ -0,0 +1,4 @@
+export interface FlipCardHandleInterface {
+  flipDown: (newFrontText: string | number, newBackText: string | number) => void;
+  flipUp: (newFrontText: string | number, newBackText: string | number) => void;
+}

package/src/components/udp/flip-down/FlipClock/flip-clock.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import FlipCard from '../FlipCard/flip-card.vue';
+import type { FlipCardHandleInterface } from '../FlipCard/interfaces.ts';
+
+const timer = ref<ReturnType<typeof setInterval> | null>(null);
+
+const flipCardHour1Ref = ref<FlipCardHandleInterface | null>(null);
+const flipCardHour2Ref = ref<FlipCardHandleInterface | null>(null);
+const flipCardMinute1Ref = ref<FlipCardHandleInterface | null>(null);
+const flipCardMinute2Ref = ref<FlipCardHandleInterface | null>(null);
+const flipCardSecond1Ref = ref<FlipCardHandleInterface | null>(null);
+const flipCardSecond2Ref = ref<FlipCardHandleInterface | null>(null);
+
+const flipCards = [
+  flipCardHour1Ref,
+  flipCardHour2Ref,
+  flipCardMinute1Ref,
+  flipCardMinute2Ref,
+  flipCardSecond1Ref,
+  flipCardSecond2Ref
+];
+
+onMounted(() => {
+  // 开始计时
+  const run = () => {
+    timer.value = setInterval(() => {
+      // 获取当前时间
+      const now = new Date();
+      const nowTimeStr = formatDate(new Date(now.getTime() - 1000), 'hhiiss');
+      const nextTimeStr = formatDate(now, 'hhiiss');
+      for (let i = 0; i < flipCards.length; i++) {
+        if (nowTimeStr[i] === nextTimeStr[i]) {
+          continue;
+        }
+        flipCards[i].value?.flipDown(nowTimeStr[i], nextTimeStr[i]);
+      }
+    }, 1000);
+  };
+  run();
+});
+
+// 正则格式化日期
+const formatDate = (date: Date, dateFormat: string) => {
+  /* 单独格式化年份，根据y的字符数量输出年份
+       * 例如：yyyy => 2019
+              yy => 19
+              y => 9
+       */
+  const yearMatch = dateFormat.match(/(y+)/);
+  if (yearMatch) {
+    dateFormat = dateFormat.replace(yearMatch[0], (date.getFullYear() + '').slice(-yearMatch[0].length));
+  }
+  // 格式化月、日、时、分、秒
+  const formatMap: Record<string, number> = {
+    'm+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'i+': date.getMinutes(),
+    's+': date.getSeconds()
+  };
+  for (const key in formatMap) {
+    const match = dateFormat.match(new RegExp(`(${key})`));
+    if (match) {
+      // 取出对应的值
+      const str = formatMap[key] + '';
+      /* 根据设置的格式，输出对应的字符
+       * 例如: 早上8时，hh => 08，h => 8
+       * 但是，当数字>=10时，无论格式为一位还是多位，不做截取，这是与年份格式化不一致的地方
+       * 例如: 下午15时，hh => 15, h => 15
+       */
+      dateFormat = dateFormat.replace(match[0], match[0].length === 1 ? str : str.padStart(2, '0'));
+    }
+  }
+
+  return dateFormat;
+};
+
+// 初始化
+const now = new Date();
+const initNowTimeStr = formatDate(new Date(now.getTime()), 'hhiiss');
+</script>
+
+<template>
+  <div className="FlipClock">
+    <FlipCard ref="flipCardHour1Ref" :init-front-text="initNowTimeStr[0]" />
+    <FlipCard ref="flipCardHour2Ref" :init-front-text="initNowTimeStr[1]" />
+    <em>:</em>
+    <FlipCard ref="flipCardMinute1Ref" :init-front-text="initNowTimeStr[2]" />
+    <FlipCard ref="flipCardMinute2Ref" :init-front-text="initNowTimeStr[3]" />
+    <em>:</em>
+    <FlipCard ref="flipCardSecond1Ref" :init-front-text="initNowTimeStr[4]" />
+    <FlipCard ref="flipCardSecond2Ref" :init-front-text="initNowTimeStr[5]" />
+  </div>
+</template>
+
+<style scoped>
+.FlipClock {
+  text-align: center;
+}
+
+.FlipClock .M-FlipCard {
+  margin: 0 3px;
+}
+
+.FlipClock em {
+  display: inline-block;
+  line-height: 55px;
+  font-size: 42px;
+  font-style: normal;
+  vertical-align: top;
+}
+</style>

package/src/components/udp/form.vue

@@ -0,0 +1,107 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2022-03-02 17:07:59
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-07-30 18:57:09
+ * @Description: SuForm
+-->
+
+<template>
+  <div class="width: 100%">
+    <vxe-form
+      ref="xForm"
+      v-model:collapse-status="collapseStatus"
+      :data="record"
+      :items="formItems"
+      :rules="rules"
+      :loading="loading"
+      :vertical="vertical"
+      title-align="right"
+      :title-width="titleWidth"
+    >
+      <template #dividerPrefix>
+        <div class="w-2 h-4 bg-amber-600">5555</div>
+      </template>
+      <template #collapseNode>
+        <div class="flex justify-start">
+          <vxe-checkbox
+            v-model="collapseStatus"
+            content="查看更多"
+            :checked-value="false"
+            :unchecked-value="true"
+            class="pl-10"
+          />
+        </div>
+      </template>
+    </vxe-form>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'UtForm'
+};
+</script>
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { ref, computed } from 'vue';
+// import { formatRules } from '@utogether/utils';
+import { formatItems, formatRules } from './utils';
+// import type { IRecord, IFormItemProps } from '../../types';
+
+export interface IProps {
+  record: IRecord; // 数据对象
+  items: Array<IFormItemProps>; // form item
+  loading?: boolean;
+  vertical?: boolean;
+  titleWidth?: number;
+  span?: number;
+  dataStatus?: string;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  record: (): IRecord => {
+    return {};
+  },
+  items: () => [],
+  loading: false,
+  vertical: false,
+  titleWidth: 100,
+  span: 6,
+  dataStatus: 'detail'
+});
+const xForm = ref(undefined);
+const { t } = useI18n();
+const collapseStatus = ref(true);
+/**
+ * @description: 根据items 获取必填选
+ */
+const rules = computed(() => {
+  if (!props.items.length) return {};
+  return formatRules(props.items, t);
+});
+
+const formItems = computed(() => {
+  if (!props.items.length) return props.items;
+  return formatItems(props.items, props.dataStatus, 6);
+});
+
+/**
+ * @deprecated
+ * @description 使用validate替换
+ * @param cb
+ */
+const validateForm = (cb: Function) => {
+  (xForm as any).value.validate(cb);
+};
+const validate = (cb: Function) => {
+  (xForm as any).value.validate(cb);
+  setTimeout(() => {
+    xForm.value.clearValidate();
+  }, 1600);
+};
+defineExpose({
+  validateForm,
+  validate
+});
+</script>

package/src/components/udp/grid.vue

@@ -2,7 +2,7 @@
  * @Author: wei.li
  * @Date: 2021-11-17 16:33:37
  * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-07-23 10:21:02
+ * @LastEditTime: 2025-08-06 11:53:11
  * @Description: file content
 -->
 <template>
@@ -192,7 +192,13 @@ const data = reactive<VxeGridProps>({
       query: ({ page, form }) => query(props, form, page, serviceApi, $mode),
       delete: ({ body: { removeRecords } }) => del(serviceApi, removeRecords, props),
       save: ({ body }) => Promise.all(save(serviceApi, body, props)),
-      querySuccess: e => querySuccess(e)
+
+      querySuccess: response => callback('querySuccess', response),
+      queryError: response => callback('queryError', response),
+      deleteSuccess: response => callback('deleteSuccess', response),
+      deleteError: response => callback('deleteError', response),
+      saveSuccess: response => callback('saveSuccess', response),
+      saveError: response => callback('saveError', response)
     }
   },
   columns: !attrs.gridId ? getColumns() : [],
@@ -322,6 +328,10 @@ const getSelectRecords = (isFull = false) => {
   return checkRecords;
 };
 
+const callback = (cb, response) => {
+  attrs?.callback && attrs?.callback[cb] && attrs?.callback[cb](response);
+};
+
 let sortable2: any;
 const columnDrop = () => {
   const $grid = xgrid.value;
@@ -402,10 +412,6 @@ const onSearch = data => {
   refreshData();
 };
 
-const querySuccess = e => {
-  console.log(e);
-};
-
 /**
  * @description Vue实例对外暴露的相关方法或属性
  */

package/src/components/udp/index.ts

@@ -3,5 +3,8 @@ import FormUpload2 from './form-upload.vue';
 import utLov2 from './lov.vue';
 import UtModalGrid2 from './modal-grid.vue';
 import UtGrid2 from './grid.vue';
+import UtForm2 from './form.vue';
+import UtUpload2 from './upload.vue';
+import UtCountdown2 from './flip-down/FlipClock/flip-clock.vue';
 
-export { UtGrid2, UtModalForm2, FormUpload2, utLov2, UtModalGrid2 };
+export { UtGrid2, UtModalForm2, FormUpload2, utLov2, UtModalGrid2, UtForm2, UtCountdown2, UtUpload2 };

package/src/components/udp/lov.vue

@@ -11,7 +11,7 @@
       resize
       esc-closable
       show-footer
-      :className="className"
+      :class-name="className"
       :before-hide-method="beforeHideMethod"
     >
       <template #default>

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

@@ -34,6 +34,14 @@
         />
       </template>
       <template #footer>
+        <vxe-checkbox
+          v-if="!url && dataStatus === 'add'"
+          v-model="continuous"
+          content="连续添加"
+          unchecked-value="0"
+          checked-value="1"
+          style="margin-right: 12px"
+        />
         <ut-button status="warning" content="cancel" icon="ri-close-line" @tap="onClose" />
         <ut-button status="u-cyan" content="confirm" icon="ri-save-3-line" @tap="onConfirm" />
       </template>
@@ -86,6 +94,7 @@ const props = withDefaults(defineProps<IProps>(), {
 
 const attrs: IRecord = getAttrs(useAttrs());
 
+const continuous = ref('0');
 const loading = ref(false);
 const instance = getCurrentInstance()!;