@utogether/udp-core 1.0.0

package/src/components/SuCommon/table/index.vue

@@ -0,0 +1,208 @@
+<!--
+ * @Author: levi7754 levi7754@163.com
+ * @Date: 2023-08-31 17:54:43
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2024-06-22 10:14:16
+ * @FilePath: /u-dp-lowcode/src/views/design/packages/contain-widgets/table/table-primary.vue
+ * @Description: 默认表格
+-->
+<template>
+  <vxe-grid ref="xgrid" class="w-full p-1 bg-white" v-bind="gridOptions" v-on="onEvent" />
+</template>
+<script setup lang="tsx">
+import { ref, toRaw, onBeforeMount, onMounted, getCurrentInstance, inject } from 'vue';
+import { formatGridItems, formatRules, successMessage, useRender, errorMessage } from '@utogether/utils';
+import { useI18n } from 'vue-i18n';
+import { clone } from 'xe-utils';
+import { getServiceApi } from '../../../api';
+import { columnButtons } from '../utils/slot';
+import { footerSumMethod, query } from '../utils';
+
+defineOptions({ name: 'WidgetTable', inheritAttrs: false });
+
+interface IProps {
+  widget: IRecord;
+  designMode: boolean;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  widget: (): IRecord => {
+    return {};
+  },
+  designMode: true
+});
+
+const designer = inject<IRecord>('kdesigner');
+
+const instance = getCurrentInstance();
+
+const renderHook = useRender();
+const { t } = useI18n();
+
+const xgrid = ref(null);
+
+const gridOptions = ref({
+  ...props.widget.props,
+  // height: 560,
+  proxyConfig: {
+    form: true, // 启用表单代理
+    autoLoad: props.widget.props.autoLoad,
+    ajax: {
+      query: ({ page, form }) => query(props.widget, form, page, getServiceApi())
+    }
+  }
+});
+
+const formaterItemRender = items => {
+  if (!items.length) return [];
+  items.forEach(item => {
+    if (item.renderType === 'number') {
+      item.itemRender = renderHook.renderNumber();
+    } else if (['date'].includes(item.renderType)) {
+      item.itemRender = renderHook.renderDate();
+    } else if (item.renderType === 'switch') {
+      item.itemRender = renderHook.renderSwitch();
+    }
+  });
+
+  return items;
+};
+
+const initFormItem = () => {
+  let formItems = clone(gridOptions.value.formConfig.items, true);
+  const items = props.widget.props.columns.filter(
+    f => f.searchable && (!formItems.length || !formItems.some(s => f.field === s.field))
+  );
+  const idx = formItems.findIndex(f => f.itemRender?.name === '$buttons');
+  idx !== -1 && formItems.splice(idx, 1);
+  items.length && formItems.push(...items);
+  formItems = formaterItemRender(formItems);
+  gridOptions.value.formConfig.items = formItems.length ? formatGridItems(formItems, null) : [];
+  console.log(formItems);
+};
+
+const initColums = () => {
+  gridOptions.value.columns.forEach(col => {
+    if (col.field !== 'operate') {
+      const events = col.editRender?.events ? Object.keys(col.editRender?.events) : [];
+      events.forEach(event => {
+        const actEvent = event.substring(2).toLowerCase();
+        const body = col.editRender?.events[event];
+        col.editRender.events[actEvent] = e => {
+          new Function('event', 'columns', body)(e, gridOptions.value.columns);
+        };
+      });
+    } else {
+      col = columnButtons(gridOptions.value.operates, col, onRowBtnClick);
+    }
+  });
+  console.log(gridOptions.value.columns);
+};
+
+/** 初始化必填验证 */
+const initEditRule = () => {
+  gridOptions.value.editRules = formatRules(gridOptions.value.columns, t);
+  console.log(gridOptions.value);
+};
+/** 表格合计 */
+const initFooterMethod = () => {
+  if (!gridOptions.value.showFooter) return;
+  const sumFields = gridOptions.value.columns.filter(f => f.sumcolumn).map(m => m.field);
+  gridOptions.value.footerMethod = grid => footerSumMethod(grid, sumFields, gridOptions.value.decimal);
+};
+
+const initBasicProps = () => {
+  gridOptions.value.height = window.innerHeight - 90;
+};
+
+const onRowBtnClick = (btn, row) => {
+  console.log(btn, row);
+  const { service } = btn;
+  if (service.url) {
+    const { beforeSend, method, url, respondSuccess } = service;
+    let body = clone(row, true);
+    if (beforeSend) {
+      const fn = new Function('body', 'app', beforeSend);
+      body = fn(row, designer.value, instance);
+    }
+    gridOptions.value.loading = true;
+    getServiceApi()
+      [method](url, body)
+      .then(res => {
+        if (respondSuccess) {
+          const fn = new Function('respond', 'app', 'self', respondSuccess);
+          fn(res, designer.value, instance);
+        } else {
+          successMessage();
+        }
+        xgrid.value.commitProxy('query');
+      })
+      .catch(() => {
+        errorMessage();
+      })
+      .finally(() => {
+        gridOptions.value.loading = false;
+      });
+  } else {
+    // designer.value.onEvent(btn.onClick, { code: btn.code, row });
+    // const app = designer.value.vinstance || instance;
+    // console.log(app);
+    new Function('code', 'row', 'app', btn.onClick)(btn.code, row, designer.value);
+  }
+};
+
+const onEvent = {
+  editActived: ({ row }) => {
+    console.log(row);
+  }
+};
+
+const initGridProps = () => {
+  initBasicProps();
+  initColums();
+  initFooterMethod();
+  initFormItem();
+  initEditRule();
+};
+
+onBeforeMount(() => {
+  initGridProps();
+  console.log('onBeforeMount ==== ', props.widget.props);
+  // console.log('onBeforeMount ==== ', gridOptions.value);
+  // Object.assign(gridOptions.value, props.widget.props);
+});
+
+const refresh = () => {
+  xgrid.value.commitProxy('query');
+};
+
+const getSelected = () => {
+  const firstColumn = gridOptions.value.columns[0];
+  if (firstColumn.type === 'checkbox') {
+    return xgrid.value.getCheckboxRecords();
+  } else if (firstColumn.type === 'radio') {
+    return xgrid.value.getRadioRecord();
+  }
+};
+
+const getTableData = () => {
+  return xgrid.value.getTableData();
+};
+
+const getInstance = () => {
+  return toRaw(xgrid.value);
+};
+
+defineExpose({
+  refresh,
+  getSelected,
+  getTableData,
+  getInstance
+});
+
+onMounted(() => {
+  if (!props.designMode) {
+    designer.value.eventHandle(null, 'onMounted', props.widget, instance);
+  }
+});
+</script>

package/src/components/SuCommon/utils/index.ts

@@ -0,0 +1,103 @@
+/*
+ * @Author: levi7754 levi7754@163.com
+ * @Date: 2023-07-24 17:49:20
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2023-10-13 17:06:38
+ * @FilePath: /u-dp-lowcode/src/views/design/utils/index.ts
+ * @Description: 获取样式
+ */
+
+import { clone, isString, toDateString, isEmpty } from 'xe-utils';
+import { cookies } from '@utogether/utils';
+
+const CKEY = 'kCookies_param';
+
+export const getStyle = el => {
+  if (!el.type || el.type !== 'block') {
+    return {
+      width: (25 / 6) * el.props.width + '%'
+    };
+  } else {
+    const style = { width: 0, height: 0 };
+    const arr = el.props.style;
+    if (el.props.divWidth) {
+      style.width = el.props.divWidth;
+    }
+    if (el.props.divHeight) {
+      style.height = el.props.divHeight;
+    }
+    if (arr && arr.length > 0) {
+      arr.forEach(el => {
+        style[el.label] = el.value;
+      });
+    }
+    return style;
+  }
+};
+
+/**
+ * @param grid 表格数据
+ * @param fields 合并字段列表
+ * @param decimal 精度
+ * @returns 合并数据
+ */
+export const footerSumMethod = (grid, fields, decimal) => {
+  return [
+    grid.columns.map((column, columnIndex) => {
+      if (columnIndex === 0) {
+        return '合计';
+      }
+      if (fields.includes(column.property)) {
+        const total = grid.data.reduce((prev, cur) => {
+          return prev + Number(cur[column.property] || 0);
+        }, 0);
+        const ss = total ? Number(total.toFixed(decimal || 2)) : total;
+        return ss;
+      }
+      return '';
+    })
+  ];
+};
+
+/** 查询服务 */
+export const query = (widget, form, page, http, fetchParam?) => {
+  for (const i in form) {
+    if (form[i] && isString(form[i])) {
+      form[i] = form[i].trim();
+    }
+  }
+  const params = {
+    pageNum: page.currentPage,
+    pageSize: page.pageSize
+  };
+  const commonParam = cookies.get(CKEY) ? JSON.parse(cookies.get(CKEY)) : {};
+  Object.assign(params, commonParam, form, fetchParam || {});
+  const query = formatDateRange(params, widget.props.formConfig.items);
+  return http.get(widget.props.url, query);
+};
+
+const startFormatter = 'yyyy-MM-dd 00:00:00';
+const endFormatter = 'yyyy-MM-dd 23:59:59';
+const formatDateRange = (listQuery: any, formItems) => {
+  const dateRanges = formItems.filter(
+    f => f.itemRender?.name === '#SuDateRange' || f.itemRender?.props?.multiple || f.multiple
+  );
+  if (isEmpty(dateRanges)) return listQuery;
+  const query = clone(listQuery, true);
+  dateRanges.forEach((element: any) => {
+    if (element.multiple || element.itemRender?.props?.multiple) {
+      query[element.field] = query[element.field]?.join(',');
+    } else {
+      const val = query[element.field];
+      if (val && element.toField) {
+        query[element.fromField] = toDateString(val[0], startFormatter);
+        query[element.toField] = toDateString(val[1], 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;
+};

package/src/components/SuCommon/utils/slot.tsx

@@ -0,0 +1,50 @@
+/*
+ * @Author: levi7754 levi7754@163.com
+ * @Date: 2023-09-21 16:26:11
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2023-09-23 10:59:43
+ * @FilePath: /u-dp-lowcode/src/views/design/utils/slot.tsx
+ * @Description: slot 工具函数
+ */
+const systemStatus = ['primary', 'success', 'warning', 'danger'];
+
+export const columnButtons = (buttons, col, cb?) => {
+  const count = buttons.length;
+  if (count > 3) {
+    const front2Buttons = buttons.filter((f, idx) => idx < 2);
+    const dropdownButtons = buttons.filter((f, idx) => idx > 1);
+    col.slots = {
+      default: ({ row }) => {
+        const btns = front2Buttons.map((btn, idx) => colButton(btn, row, idx, cb));
+        const drop = (
+          <vxe-button status="primary" transfer>
+            {{
+              default: () => '更多',
+              dropdowns: () => dropdownButtons.map((btn, idx) => colButton(btn, row, idx, cb))
+            }}
+          </vxe-button>
+        );
+        btns.push(drop);
+        return btns;
+      }
+    };
+  } else {
+    col.slots = {
+      default: ({ row }) => buttons.map((btn, idx) => colButton(btn, row, idx, cb))
+    };
+  }
+  return col;
+};
+
+const colButton = (btn, row, idx, cb) => {
+  const statusIdx = idx % systemStatus.length;
+  return (
+    <vxe-button
+      content={btn.name}
+      auth={btn.code}
+      icon={btn.icon}
+      status={btn.status || systemStatus[statusIdx]}
+      onClick={() => cb && cb(btn, row)}
+    />
+  );
+};

package/src/components/SuFloatButton/index.vue

@@ -0,0 +1,159 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2022-06-02 17:30:44
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-04-16 14:33:31
+ * @Description: file content
+-->
+<template>
+  <transition>
+    <div
+      v-if="data.isShow"
+      ref="dragIcon"
+      class="dragIcon"
+      :style="{
+        left: data.left + 'px',
+        top: data.top + 'px',
+        width: itemWidth + 'px',
+        height: itemHeight + 'px'
+      }"
+      @click="onBtnClicked"
+      @dragstart="handleTouchStart"
+      @drag="handleTouchMove($event)"
+      @dragend.stop="handleTouchEnd"
+    >
+      <slot />
+    </div>
+  </transition>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
+interface Props {
+  itemWidth?: number;
+  itemHeight?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  itemHeight: 50,
+  itemWidth: 50
+});
+
+const data = reactive({
+  left: 0,
+  top: 0,
+  startToMove: false,
+  isShow: true,
+  timer: null,
+  currentTop: null,
+  clientW: document.documentElement.clientWidth, //视口宽
+  clientH: document.documentElement.clientHeight //视口高
+});
+const dragIcon = ref(null);
+function onBtnClicked() {
+  console.log('click');
+  // this.$emit('onFloatBtnClicked');
+}
+function handleTouchStart() {
+  console.log('start');
+  data.startToMove = true;
+  dragIcon.value.style.transition = 'none';
+}
+function handleTouchMove(e) {
+  console.log('move');
+  console.log(e);
+  const clientX = e.clientX; //手指相对视口的x
+  const clientY = e.clientY; //手指相对视口的y
+  console.log('clientX', clientX);
+  console.log('clientY', clientY);
+  const isInScreen = clientX <= data.clientW && clientX >= 0 && clientY <= data.clientH && clientY >= 0;
+  if (data.startToMove && clientX) {
+    if (isInScreen) {
+      data.left = clientX - props.itemWidth / 2;
+      data.top = clientY - props.itemHeight / 2;
+      console.log('top', data.top);
+      console.log('left', data.left);
+    }
+  }
+}
+function handleTouchEnd() {
+  console.log('end');
+  data.startToMove = false;
+  if (data.left < data.clientW / 6) {
+    data.left = 15; //不让贴边 所以设置15没设置0
+    handleIconY();
+  } else if (data.left > data.clientW - 15) {
+    data.left = data.clientW - props.itemWidth - 15; //不让贴边 所以减15
+    handleIconY();
+  }
+  dragIcon.value.style.transition = 'all .3s';
+}
+function handleIconY() {
+  if (data.top < 0) {
+    data.top = 15; //不上帖上边所以设置为15 没设置0
+  } else if (data.top + props.itemHeight > data.clientH) {
+    data.top = data.clientH - props.itemHeight - 15; //不让帖下边所以减15
+  }
+}
+function bindScrollEvent() {
+  window.addEventListener('scroll', handleScrollStart);
+}
+function removeScrollEvent() {
+  window.removeEventListener('scroll', handleScrollStart);
+}
+function handleScrollStart() {
+  data.isShow = false;
+  data.timer && clearTimeout(data.timer);
+  data.timer = setTimeout(() => {
+    handleScrollEnd();
+  }, 300);
+  data.currentTop = document.documentElement.scrollTop || document.body.scrollTop;
+}
+function handleScrollEnd() {
+  this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+  // 判断是否停止滚动的条件
+  if (this.scrollTop == this.currentTop) {
+    this.isShow = true;
+  }
+}
+onMounted(() => {
+  data.left = data.clientW - props.itemWidth - 15;
+  data.top = data.clientH / 2 - props.itemHeight / 2;
+  bindScrollEvent();
+});
+onUnmounted(() => {
+  removeScrollEvent();
+});
+</script>
+
+<style lang="scss" scoped>
+.dragIcon {
+  position: fixed;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  font-size: 30px;
+  color: #fff;
+  word-break: break-all;
+  word-wrap: break-word;
+  background-color: #2270fe; /* 浏览器不支持的时候显示 */
+  background-image: linear-gradient(45deg, #2270fe, #1c96f9);
+  border-radius: 50%;
+  box-shadow: 0 0 16px #2270fe;
+}
+
+.v-enter {
+  opacity: 1;
+}
+
+.v-leave-to {
+  opacity: 0;
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.3s;
+}
+</style>

package/src/components/SuQrcode/index.ts

@@ -0,0 +1,14 @@
+/*
+ * @Author: wei.li
+ * @Date: 2022-12-02 19:00:53
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-12-02 19:34:57
+ * @Description: file content
+ */
+import qrcode from './src/index';
+import { withInstall } from '@utogether/utils';
+
+/** 二维码组件 */
+export const SuQrcode = withInstall(qrcode);
+
+export default SuQrcode;

package/src/components/SuQrcode/src/index.scss

@@ -0,0 +1,9 @@
+.qrcode {
+  &--disabled {
+    background: rgb(255 255 255 / 95%);
+
+    & > div {
+      transform: translate(-50%, -50%);
+    }
+  }
+}