@utogether/udp-core 1.0.1 → 1.0.2

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>

package/src/components/udp/utils.ts

@@ -1,40 +1,408 @@
-import { useRender } from '@utogether/utils';
-
-export const getAttrs = attrs => {
-  const data = {};
-  Object.keys(attrs).forEach(key => {
-    const nKey = key.replace(/-(\w)/g, str => str.slice(1).toUpperCase());
-    data[nKey] = attrs[key];
-  });
-  return data;
-};
-
-export const formatItems = (items, status, span = 24) => {
-  const renderHook = useRender();
-
-  if (!items.length) return items;
-  return items.map(item => {
-    item.title = item.title || `message.${item.field}`;
-    item.span = item.span || span;
-    let disabled = false;
-    if (status === 'detail') {
-      disabled = true;
-      item.placeholder = null;
-    } else {
-      disabled =
-        item.disabled === false ? item.disabled : item.disabled || item.itemRender?.props?.disabled;
-    }
-    let itemRender = {
-      name: 'VxeInput',
-      props: { disabled, placeholder: disabled ? '' : item.placeholder }
-    };
-    if (item.code && !item.itemRender) {
-      itemRender = renderHook.renderDict(item.code);
-    }
-    item.itemRender = item.itemRender || itemRender;
-    item.itemRender['props'] = Object.assign(item.itemRender.props || {}, {
-      disabled
-    });
-    return item;
-  });
-};
+/*
+ * @Author: wei.li
+ * @Date: 2022-06-23 17:29:11
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-12-02 18:32:18
+ * @Description: file content
+ */
+// @ts-nocheck
+
+import { clone, isString, orderBy, isEmpty, toDateString, isObject, isFunction } from 'xe-utils';
+import { cookies, storageLocal } from '@utogether/utils';
+/** 系统配置的key */
+const kSYSCONFIG = 'kSysConfig';
+const kCOOKIES = 'kCookies_param';
+
+const sysConfig = storageLocal.getItem(kSYSCONFIG);
+
+/** 工具栏按钮标准化 */
+export const formatButton = (buttons, auth?) => {
+  buttons.forEach(btn => {
+    btn.auth = auth ? auth[btn.code] || btn.auth : btn.auth;
+    if (!btn.name) {
+      btn.name = `message.btn.${btn.code}`;
+    } else if (sysConfig?.i18nEnabled === 'Y' && !btn.name.startsWith('message.')) {
+      btn.name = `message.btn.${btn.name}`;
+    }
+    if (btn.dropdowns?.length) {
+      formatButton(btn.dropdowns, auth);
+    }
+  });
+  return buttons;
+};
+
+/**
+ * @description 查询10W数据,常用于Excel导出
+ * @param props 查询接口的路径
+ * @param http http实例
+ * @param form 查询条件
+ * @returns 查询返回的数据
+ */
+export const queryAll = (props, http, form) => {
+  const params = { pageNum: 1, pageSize: 100000 };
+  const commonParam = getCookieParam();
+  Object.assign(params, form, commonParam, props.defaultParams || {});
+  let query = formatMultipleParams(params, props.items);
+  query = formatDateRange(query, props.items);
+
+  const { url } = props;
+  if (!url) return null;
+  const requestURL = isString(url) ? url : url.fetch || url.restful;
+  if (!requestURL) return null;
+  const method = url.fetch ? 'post' : 'get';
+  return new Promise((resolve, reject) => {
+    http[method](requestURL, query)
+      .then((response: IResponseData) => {
+        resolve(response.list);
+      })
+      .catch((e: any) => {
+        reject(e);
+      });
+  });
+};
+
+/**
+ * @description 查询服务
+ * @param props 查询接口的路径
+ * @param form 查询条件
+ * @param page 分页参数
+ * @param http http实例
+ * @param isDoc doc文档
+ * @returns Promise
+ */
+export const query = (props, form, page, http, code, isDoc) => {
+  if (isDoc) return getDocData();
+  for (const key in form) {
+    if (form[key] && isString(form[key])) {
+      form[key] = form[key].trim();
+    }
+  }
+  const params = { pageNum: page.currentPage, pageSize: page.pageSize };
+  const commonParam = getCookieParam();
+  Object.assign(params, commonParam, props.defaultParams || {}, form);
+
+  let query = formatMultipleParams(params, props.items);
+  query = formatDateRange(query, props.items);
+  const { url } = props;
+  if (!url) return null;
+  const requestURL = isString(url) ? url : url.fetch || url.restful;
+  const method = url.fetch ? 'post' : 'get';
+  if (!requestURL) return null;
+  return http[method](requestURL, query);
+};
+
+/**
+ * @description 表格删除方法
+ * @param http http实例
+ * @param records 记录行
+ * @param props 删除接口的路径
+ * @returns Promise
+ */
+export const del = (http, records, props) => {
+  const { url } = props;
+  if (!url) return null;
+  const requestURL = isString(url) ? url : url.del || url.restful;
+  if (!requestURL) return null;
+  const method = url.del ? 'post' : 'delete';
+  return http[method](requestURL, records);
+};
+
+/** 更新服务 */
+export const save = (http, body, props) => {
+  const allService = [];
+  const { url } = props;
+  if (!url) return null;
+
+  const { insertRecords, updateRecords } = body;
+  if (!isEmpty(insertRecords)) {
+    const commonParam = getCookieParam();
+    insertRecords.forEach(m => {
+      !isEmpty(props?.defaultValue) && Object.assign(m, props.defaultValue);
+      Object.keys(commonParam)?.forEach(key => {
+        m[key] = m[key] || commonParam[key];
+      });
+    });
+    const requestURL = isString(url) ? url : url.add || url.restful;
+    requestURL && allService.push(http.post(requestURL, insertRecords));
+  }
+  if (!isEmpty(updateRecords)) {
+    const requestURL = isString(url) ? url : url.save || url.restful;
+    const method = url.save ? 'post' : 'put';
+    requestURL && allService.push(http[method](requestURL, updateRecords));
+  }
+  return allService;
+};
+
+/**
+ * 多选数据优化
+ * @param listQuery
+ * @param items
+ * @returns
+ */
+const formatMultipleParams = (listQuery: any, items) => {
+  const multipleItems = items.filter(f => f.itemRender?.props?.multiple || f.multiple);
+  if (isEmpty(multipleItems)) return listQuery;
+  const query = clone(listQuery, true);
+  multipleItems.forEach((element: any) => {
+    if (element.itemRender.name === '#select' && element.itemRender.props.multiple) {
+      if (query[`_${element.field}`]?.length === 0) {
+        // 重置后
+        query[`${element.field}`] = null;
+      }
+      delete listQuery[`_${element.field}`];
+      delete query[`_${element.field}`];
+    }
+  });
+  return query;
+};
+
+const startFormatter = 'yyyy-MM-dd 00:00:00';
+const endFormatter = 'yyyy-MM-dd 23:59:59';
+// 时间范围优化
+const formatDateRange = (listQuery: any, items) => {
+  const dateRanges = items.filter(f => ['#SuDateRange', 'VxeDateRangePicker'].includes(f.itemRender?.name));
+  if (isEmpty(dateRanges)) return listQuery;
+  const query = clone(listQuery, true);
+  dateRanges.forEach((element: any) => {
+    const val = query[element.field];
+    if (val && element.itemRender.startField) {
+      query[element.itemRender.startField] = toDateString(query[element.itemRender.startField], startFormatter);
+      query[element.itemRender.endField] = toDateString(query[element.itemRender.endField], endFormatter);
+    } else if (val) {
+      query[`${element.field}From`] = toDateString(val[0], startFormatter);
+      query[`${element.field}To`] = toDateString(val[1], endFormatter);
+    }
+    delete query[element.field];
+  });
+  return query;
+};
+
+const getCookieParam = () => {
+  return cookies.get(kCOOKIES) ? JSON.parse(cookies.get(kCOOKIES)) : {};
+};
+
+/** 工具栏默认按钮组 */
+export const inlineButtons = [
+  {
+    code: 'insert_actived',
+    name: 'add',
+    status: 'u-cyan',
+    icon: 'vxe-icon-add',
+    auth: 'add',
+    sort: 1
+  },
+  {
+    code: 'delete',
+    status: 'danger',
+    icon: 'vxe-icon-delete',
+    auth: 'del',
+    sort: 2
+  },
+  {
+    code: 'save',
+    status: 'primary',
+    icon: 'vxe-icon-save',
+    auth: 'edit',
+    sort: 3
+  }
+];
+// form 模式按钮
+export const dialogButtons = [
+  {
+    code: 'add',
+    status: 'u-cyan',
+    icon: 'vxe-icon-add',
+    auth: 'add',
+    sort: 1
+  },
+  {
+    code: 'del',
+    status: 'danger',
+    icon: 'vxe-icon-delete',
+    auth: 'del',
+    sort: 2
+  }
+];
+
+export const defaultColums = [
+  { field: 'createdByName', width: 90, visible: false },
+  { field: 'creationDate', width: 140, visible: false },
+  { field: 'lastUpdatedByName', width: 90, visible: false },
+  { field: 'lastUpdateDate', width: 140, visible: false }
+];
+
+/** 导出配置 */
+export const getExportConfig = attrs => {
+  if (isObject(attrs.exportConfig)) return attrs.exportConfig;
+  return {
+    filename: attrs.fileName || '导出明细',
+    type: 'xlsx',
+    types: ['xlsx', 'csv'],
+    modes: ['current', 'selected', 'all'],
+    useStyle: true,
+    sheetMethod: ({ worksheet }) => (attrs.onSheetMethod ? attrs.onSheetMethod(worksheet) : onSheetMethod(worksheet)),
+    columnFilterMethod: ({ column }) =>
+      attrs.columnFilter
+        ? !!attrs.columnFilter(column)
+        : !['operate'].includes(column.field) && column.type !== 'checkbox'
+  };
+};
+
+export const getToolBarConfig = (data, props, attrs, hasAuthority) => {
+  const refreshOptions = {
+    icon: 'ri-refresh-line',
+    iconLoading: 'vxe-icon-spinner roll vxe-loading--default-icon'
+  };
+  // 不可编辑时
+  if (!props.editable) {
+    data.editConfig.editable = props.editable;
+    const hasExport = props.needExport && hasAuthority('export');
+    if (hasExport) {
+      data.exportConfig = getExportConfig(attrs);
+    }
+    data.toolbarConfig = {
+      buttons: [],
+      enabled: hasExport,
+      refreshOptions,
+      exportOptions: { icon: 'ri-download-2-line', code: 'export' },
+      export: hasExport,
+      custom: !!attrs.gridId,
+      refresh: true,
+      perfect: true
+    };
+    return data;
+  }
+
+  // 先设置传入的按钮
+  let buttons = clone(attrs.buttons || [], true);
+
+  buttons.forEach((button, idx) => {
+    button.sort = button.sort || idx + 10;
+  });
+
+  // 获取默认的按钮
+  const toolButtons = attrs.mode !== 'form' ? clone(inlineButtons, true) : clone(dialogButtons, true);
+  // 判断传入的按钮是否有默认按钮的auth,有就不加入按钮组中,相当于重写了默认的按钮
+  // reverse的原因是: 保持现有按钮顺序， 新增，保存，删除
+  toolButtons.reverse().forEach(btn => {
+    !buttons.some(s => s.code === btn.code) && buttons.unshift(btn);
+    if (attrs.authPrefix && !['printer', 'export'].includes(btn.auth)) {
+      btn.auth = attrs.authPrefix + btn.auth.slice(0, 1).toLocaleUpperCase() + btn.auth.slice(1).toLocaleLowerCase();
+    }
+  });
+
+  buttons = formatButton(buttons, props.auth).filter(button => {
+    const flag = button.auth ? hasAuthority(button.auth) : true;
+    if (button.dropdowns?.length) {
+      button.dropdowns = button.dropdowns.filter(btn => !btn.auth || (btn.auth && hasAuthority(btn.auth)));
+    }
+    return flag;
+  });
+  // inline 行内模式，单击行模式
+  const editConfig = { trigger: 'dblclick', mode: 'row', showStatus: true };
+  data.editConfig = attrs.mode !== 'form' ? editConfig : { enabled: false };
+  // 导出权限
+  const hasExport = props.needExport && hasAuthority('export');
+  let exportBtn = null;
+  if (hasExport) {
+    data.exportConfig = getExportConfig(attrs);
+    exportBtn = { icon: 'ri-download-2-line', code: 'export' };
+  }
+  data.toolbarConfig = {
+    buttons: orderBy(buttons, 'sort'),
+    enabled: true,
+    refreshOptions,
+    customOptions: attrs.gridId ? {} : null,
+    exportOptions: exportBtn,
+    custom: !!attrs.gridId,
+    export: hasExport,
+    refresh: true,
+    perfect: true
+  };
+  return data;
+};
+
+/**
+ * @description: 表格脚合并方法
+ * @param {*} columns 列数据
+ * @param {*} data 数据源
+ * @param {*} sum 合并属性
+ * @return {*} 合并脚方法
+ */
+export const footerSumMethod = ({ columns, data }, sum) => {
+  return [
+    columns.map((column, columnIdx) => {
+      if (columnIdx === (sum.index || 0)) {
+        return sum.label || '合计';
+      }
+      if (sum.fields?.includes(column.property)) {
+        const total = data.reduce((prev, cur) => {
+          return prev + Number(cur[column.property] || 0);
+        }, 0);
+        return total ? Number(total.toFixed(sum.decimal || 2)) : total;
+      }
+      return '';
+    })
+  ];
+};
+
+/**
+ * @description: checkbox是否可选
+ */
+export const onCheckMethod = (row, props) => {
+  if (isFunction(props.checkMethod)) {
+    return props.checkMethod(row);
+  }
+  return true;
+};
+
+/*** excel样式重置 */
+const onSheetMethod = ws => {
+  ws.eachRow((row, rowNumber) => {
+    row.font = { name: '微软雅黑', size: 9 };
+    row.border = {
+      top: { style: 'thin' },
+      left: { style: 'thin' },
+      bottom: { style: 'thin' },
+      right: { style: 'thin' }
+    };
+
+    if (rowNumber === 1) {
+      row.fill = {
+        type: 'pattern',
+        pattern: 'solid',
+        fgColor: { argb: '4F81BD' }
+      };
+      row.font = {
+        name: '微软雅黑',
+        size: 10,
+        bold: true,
+        color: { argb: 'FFFFFFFF' }
+      };
+    }
+  });
+};
+
+const getDocData = () => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      const list = [
+        { id: 1, name: 'Test1', sex: 'Man', age: 28, address: 'Shenzhen' },
+        { id: 2, name: 'Test2', sex: 'Women', age: 22, address: 'Guangzhou' },
+        { id: 3, name: 'Test3', sex: 'Man', age: 32, address: 'Shanghai' },
+        { id: 4, name: 'Test4', sex: 'Women', age: 23, address: 'test abc' },
+        { id: 5, name: 'Test5', sex: 'Women', age: 30, address: 'Shanghai' }
+      ];
+      resolve({ list, total: 5 });
+    }, 100);
+  });
+};
+
+export const getAttrs = attrs => {
+  const data = {};
+  Object.keys(attrs).forEach(key => {
+    const nKey = key.replace(/-(\w)/g, str => str.slice(1).toUpperCase());
+    data[nKey] = attrs[key];
+  });
+  return data;
+};