@utogether/udp-core 1.0.1-beta.9 → 1.0.2

package/src/components/udp/{form.vue → form/form.vue}

@@ -2,7 +2,7 @@
  * @Author: wei.li
  * @Date: 2022-03-02 17:07:59
  * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-08-19 10:19:16
+ * @LastEditTime: 2025-09-11 16:24:13
  * @Description: SuForm
 -->
 
@@ -16,23 +16,21 @@
       :loading="loading"
       :vertical="vertical"
       :title-width="titleWidth"
-      :disabled="dataStatus === 'detail'"
+      title-overflow
       title-align="right"
       title-bold
       v-bind="$attrs"
     >
       <template #dividerPrefix />
       <template #collapseNode>
-        <div class="flex justify-start">
-          <vxe-checkbox
-            v-model="collapseStatus"
-            content="查看更多"
-            :checked-value="false"
-            :unchecked-value="true"
-            class="pl-10"
-            @change="onChange"
-          />
-        </div>
+        <vxe-checkbox
+          v-model="collapseStatus"
+          content="查看更多"
+          :checked-value="false"
+          :unchecked-value="true"
+          class="pl-10"
+          @change="onChange"
+        />
       </template>
     </vxe-form>
   </div>
@@ -46,9 +44,8 @@ export default {
 <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';
+import { formatRules, formatItems } from '@utogether/utils';
+import { clone } from 'xe-utils';
 
 export interface IProps {
   record: IRecord; // 数据对象
@@ -84,7 +81,7 @@ const rules = computed(() => {
 
 const formItems = computed(() => {
   if (!props.items.length) return props.items;
-  return formatItems(props.items, 'edit', 6);
+  return formatItems(clone(props.items, true), props.dataStatus, 6);
 });
 
 const onChange = () => {

package/src/components/udp/{grid.vue → grid/index.vue}

@@ -2,11 +2,11 @@
  * @Author: wei.li
  * @Date: 2021-11-17 16:33:37
  * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-08-06 11:53:11
+ * @LastEditTime: 2025-11-25 18:44:36
  * @Description: file content
 -->
 <template>
-  <div style="width: 100%">
+  <div style="width: 100%; height: 100%">
     <vxe-grid
       ref="xgrid"
       v-bind="data"
@@ -17,6 +17,7 @@
       @cell-click="cellClick"
       @cell-dblclick="cellDbclick"
       @edit-activated="editEctivated"
+      @form-reset="onReset"
     />
     <!-- <SearchScheme
       v-if="showModal && props.url"
@@ -35,7 +36,9 @@ import { ref, onBeforeMount, reactive, getCurrentInstance, toRaw, useAttrs, onUn
 import { VxeGridProps } from 'vxe-table';
 import Sortable from 'sortablejs';
 import { clone } from 'xe-utils';
-import { formatGridItems, i18nColums, formatRules, errorMessage, dbstorage, warnMessage } from '@utogether/utils';
+import { i18nColums, formatRules, errorMessage, dbstorage, warnMessage } from '@utogether/utils';
+// import { http } from '../../../utils/udp/http';
+import { formatGridItems } from '../../../utils/dataFormat';
 import {
   queryAll,
   query,
@@ -46,9 +49,8 @@ import {
   defaultColums,
   onCheckMethod,
   getAttrs
-} from './utils';
+} from '../utils';
 // import SearchScheme from '../components/SuSearch.vue';
-// import type { IRecord, IFormItemProps, ITableColProps } from '../../types';
 
 defineOptions({
   name: 'UtGrid'
@@ -59,7 +61,7 @@ export interface IProps {
   serviceCode?: IRecord;
   defaultValue?: IRecord;
   defaultParams?: IRecord;
-  url?: string;
+  url?: string | IRecord;
   columns: Array<ITableColProps>;
   items?: Array<IFormItemProps>;
   editable?: boolean;
@@ -142,7 +144,7 @@ const getColumns = () => {
   }
   const act_columns = attrs.gridId ? formatColums(columns) : columns;
 
-  return i18nColums(act_columns);
+  return i18nColums(act_columns, attrs.sortable);
 };
 
 dbstorage.getItem(kSTORECOLUM).then(value => {
@@ -159,7 +161,7 @@ const data = reactive<VxeGridProps>({
   columnConfig: { useKey: true },
   toolbarConfig: { enabled: false },
   sortConfig: { multiple: true, trigger: 'cell' },
-  height: $mode ? undefined : window.innerHeight - 90,
+  height: $mode ? undefined : window.innerHeight - 92,
 
   checkboxConfig: {
     checkMethod: ({ row }) => onCheckMethod(row, props),
@@ -170,19 +172,22 @@ const data = reactive<VxeGridProps>({
   proxyConfig: {
     form: true, // 查询是需要启用表单代理
     autoLoad: props.autoLoad,
+    showResponseMsgvxe: false,
+    showActionMsgvxe: false,
     // 接收 Promise
     ajax: {
       queryAll: ({ form }) => queryAll(props, serviceApi, form),
-      query: ({ page, form }) => query(props, form, page, serviceApi, $mode),
+      query: ({ page, form, code }) => {
+        return query(props, form, page, serviceApi, code, $mode);
+      },
       delete: ({ body: { removeRecords } }) => del(serviceApi, removeRecords, props),
       save: ({ body }) => Promise.all(save(serviceApi, body, props)),
-
-      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)
+      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() : [],
@@ -316,6 +321,27 @@ const callback = (cb, response) => {
   attrs?.callback && attrs?.callback[cb] && attrs?.callback[cb](response);
 };
 
+const onReset = async e => {
+  console.log(e);
+  const data = e.data;
+  const items = props.items.filter(f => f.itemRender?.props?.multiple);
+  console.log(items);
+  items.forEach(item => {
+    if (item.itemRender.props.defaultValue) {
+      data[`_${item.field}`] = item.itemRender.props.defaultValue.split(',');
+      data[`${item.field}`] = item.itemRender.props.defaultValue;
+    } else {
+      data[`_${item.field}`] = [];
+    }
+  });
+  if (items.length) {
+    // 多选时，重新查询一次
+    setTimeout(() => {
+      refreshData();
+    }, 200);
+  }
+};
+
 let sortable2: any;
 const columnDrop = () => {
   const $grid = xgrid.value;
@@ -389,11 +415,15 @@ const columnDrop = () => {
  * @description 常用查询面板确认查询
  * @param data 常用查询条件
  */
-const onSearch = data => {
-  showModal.value = false;
-  const { form } = xgrid.value.getProxyInfo();
-  Object.assign(form, data);
-  refreshData();
+// const onSearch = data => {
+//   showModal.value = false;
+//   const { form } = xgrid.value.getProxyInfo();
+//   Object.assign(form, data);
+//   refreshData();
+// };
+
+const reloadGrid = () => {
+  setGridConfig();
 };
 
 /**
@@ -406,7 +436,8 @@ defineExpose({
   refreshColumn,
   getInstance,
   showLoading,
-  hiddenLoading
+  hiddenLoading,
+  reloadGrid
 });
 
 const toolbarButtonClick = ({ code }) => {
@@ -428,13 +459,11 @@ const editEctivated = e => {
 const addResizeListener = () => {
   window.onresize = () => {
     return (() => {
-      console.log('onresize');
-      let height = attrs?.height || window.innerHeight - 90 - 1;
-      if (attrs?.mode === 'form' && !attrs?.height) {
+      let height = attrs?.height || window.innerHeight - 90;
+      if (attrs.mode !== 'inline' && !attrs?.height) {
         height = window.innerHeight - 180;
       }
       data.height = height < 240 ? 240 : height;
-      console.log(data.height);
     })();
   };
 };
@@ -446,7 +475,6 @@ nextTick(() => {
     columnDrop();
   }, 500);
 });
-
 /**
  * @description Vue实例卸载
  */
@@ -488,6 +516,7 @@ const emit = defineEmits<{
       }
     }
   }
+
   .vxe-grid--layout-body-content-wrapper {
     overflow: hidden;
   }

package/src/components/udp/index.ts

@@ -1,10 +1,5 @@
-import UtModalForm2 from './modal-form.vue';
-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';
+import UtGrid2 from './grid/index.vue';
+import UtForm2 from './form/form.vue';
+import UtContent2 from './content/index.vue';
 
-export { UtGrid2, UtModalForm2, FormUpload2, utLov2, UtModalGrid2, UtForm2, UtUpload2 };
+export { UtGrid2, UtForm2, UtContent2 };

package/src/components/udp/ut-stamp-badge/index.vue

@@ -0,0 +1,271 @@
+<template>
+  <div
+    class="first-ring"
+    v-bind="getBindValue"
+    :class="getStampBadgeClass"
+    style="position: absolute"
+    :style="{ transform: `rotate(${rotate}deg)`, top: `${top}px`, right: `${right}px` }"
+  >
+    <div class="second-ring" :class="getStampBadgeClass">
+      <div class="third-ring" :class="getStampBadgeClass">
+        <div class="forth-ring" :class="getStampBadgeClass">
+          <div class="content-rectangle ellipsis" :class="getStampBadgeClass">
+            <span class="">{{ getContent(content) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { storageLocal } from '@utogether/utils';
+export default {
+  name: 'UTStampBadge',
+  props: {
+    color: {
+      type: String,
+      default: 'primary',
+      validator: v => ['primary', 'error', 'warning', 'success', 'info'].includes(v)
+    },
+    /**
+     * stamp badge size.
+     * @default: middle
+     */
+    size: {
+      type: String,
+      default: 'large',
+      validator: v => ['large', 'middle', 'small'].includes(v)
+    },
+    /**
+     * stamp badge rotate deg.
+     * @default: 0
+     */
+    rotate: { type: Number, default: 45 },
+    top: { type: Number, default: 60 },
+    right: { type: Number, default: 40 },
+    content: { type: String, default: 'Unknown' },
+    code: { type: String, default: '' }
+  },
+  computed: {
+    getStampBadgeClass() {
+      const { color, size } = this.$props;
+      return [
+        {
+          [`stamp-badge-${color}`]: !!color,
+          [`stamp-badge-${size}`]: !!size
+        }
+      ];
+    },
+    getBindValue() {
+      return { ...this.$attrs, ...this.$props };
+    }
+  },
+  methods: {
+    getContent(content) {
+      if (!content) return content;
+      if (this.code) {
+        const dict = storageLocal.getItem('kLov')[this.code];
+        const data = dict.children.find(f => f.dictCode === this.content);
+        return data ? data.dictName : content;
+      }
+      return content;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.first-ring {
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100px;
+}
+
+.second-ring {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  border-radius: 100px;
+}
+
+.third-ring {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100px;
+}
+
+.forth-ring {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  border-radius: 100px;
+}
+
+.content-rectangle {
+  position: absolute;
+  font-weight: bold;
+  text-align: center;
+  background: #fff;
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// primary
+.stamp-badge-primary.first-ring {
+  background: #1890ff;
+}
+
+.stamp-badge-primary.third-ring {
+  background: #1890ff;
+}
+
+.stamp-badge-primary.content-rectangle {
+  color: #1890ff;
+  border: 1px solid #1890ff;
+}
+
+// success
+.stamp-badge-success.first-ring {
+  background: #52c41a;
+}
+
+.stamp-badge-success.third-ring {
+  background: #52c41a;
+}
+
+.stamp-badge-success.content-rectangle {
+  color: #52c41a;
+  border: 1px solid #52c41a;
+}
+
+// error
+.stamp-badge-error.first-ring {
+  background: #ff4d4f;
+}
+
+.stamp-badge-error.third-ring {
+  background: #ff4d4f;
+}
+
+.stamp-badge-error.content-rectangle {
+  color: #ff4d4f;
+  border: 1px solid #ff4d4f;
+}
+
+// warning
+.stamp-badge-warning.first-ring {
+  background: #faad14;
+}
+
+.stamp-badge-warning.third-ring {
+  background: #faad14;
+}
+
+.stamp-badge-warning.content-rectangle {
+  color: #faad14;
+  border: 1px solid #faad14;
+}
+
+// info
+.stamp-badge-info.first-ring {
+  background: #ccc;
+}
+
+.stamp-badge-info.third-ring {
+  background: #ccc;
+}
+
+.stamp-badge-info.content-rectangle {
+  color: #ccc;
+  border: 1px solid #ccc;
+}
+
+// large
+.stamp-badge-large.first-ring {
+  width: 84px;
+  height: 84px;
+}
+
+.stamp-badge-large.second-ring {
+  width: 80px;
+  height: 80px;
+}
+
+.stamp-badge-large.third-ring {
+  width: 74px;
+  height: 74px;
+}
+
+.stamp-badge-large.forth-ring {
+  width: 64px;
+  height: 64px;
+}
+
+.stamp-badge-large.content-rectangle {
+  width: 90px;
+  font-size: 1.2rem;
+}
+
+// middle
+.stamp-badge-middle.first-ring {
+  width: 64px;
+  height: 64px;
+}
+
+.stamp-badge-middle.second-ring {
+  width: 60px;
+  height: 60px;
+}
+
+.stamp-badge-middle.third-ring {
+  width: 56px;
+  height: 56px;
+}
+
+.stamp-badge-middle.forth-ring {
+  width: 48px;
+  height: 48px;
+}
+
+.stamp-badge-middle.content-rectangle {
+  width: 70px;
+  font-size: 1rem;
+}
+
+// small
+.stamp-badge-small.first-ring {
+  width: 54px;
+  height: 54px;
+}
+
+.stamp-badge-small.second-ring {
+  width: 50px;
+  height: 50px;
+}
+
+.stamp-badge-small.third-ring {
+  width: 46px;
+  height: 46px;
+}
+
+.stamp-badge-small.forth-ring {
+  width: 38px;
+  height: 38px;
+}
+
+.stamp-badge-small.content-rectangle {
+  width: 60px;
+  font-size: 0.8rem;
+}
+</style>