@utogether/udp-core 1.0.0 → 1.0.1-beta.1

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

@@ -1,208 +0,0 @@
-<!--
- * @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

@@ -1,103 +0,0 @@
-/*
- * @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

@@ -1,50 +0,0 @@
-/*
- * @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/views/components/contextmenu/basic.vue

@@ -1,74 +0,0 @@
-<template>
-  <div>
-    <h1>基本使用</h1>
-    <div v-contextmenu:contextmenu class="wrapper">
-      <code>右键点击此区域</code>
-    </div>
-
-    <v-contextmenu ref="contextmenu">
-      <v-contextmenu-item>GitHub</v-contextmenu-item>
-      <v-contextmenu-item>GitLab</v-contextmenu-item>
-
-      <v-contextmenu-divider />
-
-      <v-contextmenu-submenu title="蔬菜菜">
-        <v-contextmenu-item>土豆</v-contextmenu-item>
-
-        <v-contextmenu-submenu title="青菜">
-          <v-contextmenu-item>小油菜</v-contextmenu-item>
-          <v-contextmenu-item>空心菜</v-contextmenu-item>
-        </v-contextmenu-submenu>
-
-        <v-contextmenu-item>黄瓜</v-contextmenu-item>
-      </v-contextmenu-submenu>
-
-      <v-contextmenu-item disabled>菠萝蜜</v-contextmenu-item>
-
-      <v-contextmenu-divider />
-
-      <v-contextmenu-item>哈密瓜</v-contextmenu-item>
-    </v-contextmenu>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import {
-  directive,
-  Contextmenu,
-  ContextmenuItem,
-  ContextmenuDivider,
-  ContextmenuSubmenu,
-  ContextmenuGroup
-} from 'v-contextmenu';
-
-export default defineComponent({
-  name: 'ExampleSimple',
-
-  components: {
-    [Contextmenu.name]: Contextmenu,
-    [ContextmenuItem.name]: ContextmenuItem,
-    [ContextmenuDivider.name]: ContextmenuDivider,
-    [ContextmenuSubmenu.name]: ContextmenuSubmenu,
-    [ContextmenuGroup.name]: ContextmenuGroup
-  },
-
-  directives: {
-    contextmenu: directive
-  }
-});
-</script>
-
-<style scoped>
-.wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 300px;
-  height: 200px;
-  background-color: rgb(90 167 164 / 20%);
-  border: 3px dashed rgb(90 167 164 / 90%);
-  border-radius: 8px;
-}
-</style>

package/src/views/components/contextmenu/context-menu.vue

@@ -1,40 +0,0 @@
-<!--
- * @Author: wei.li
- * @Date: 2022-10-17 11:26:28
- * @LastEditors: wei.li
- * @LastEditTime: 2022-11-30 07:58:05
- * @Description: file content
--->
-<script setup lang="ts">
-import basic from './basic.vue';
-import menuGroup from './menuGroup.vue';
-import menuDynamic from './menuDynamic.vue';
-import 'v-contextmenu/dist/themes/default.css';
-defineOptions({
-  name: 'ContextMenu'
-});
-</script>
-
-<template>
-  <el-card>
-    <template #header>
-      <div class="card-header">
-        <span class="font-medium">右键菜单组件</span>
-      </div>
-    </template>
-    <el-row :gutter="24">
-      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
-        <!-- 基本使用 -->
-        <basic />
-      </el-col>
-      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
-        <!-- 按钮组 -->
-        <menuGroup />
-      </el-col>
-      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
-        <!-- 动态菜单 -->
-        <menuDynamic />
-      </el-col>
-    </el-row>
-  </el-card>
-</template>

package/src/views/components/contextmenu/menuDynamic.vue

@@ -1,99 +0,0 @@
-<template>
-  <div>
-    <h1>动态菜单</h1>
-    <div v-contextmenu:contextmenu class="wrapper">
-      <code>右键点击此区域</code>
-    </div>
-
-    <v-contextmenu ref="contextmenu">
-      <v-contextmenu-group title="操作">
-        <v-contextmenu-item :hide-on-click="false" @click="extra.push('item')"
-          >添加菜单</v-contextmenu-item
-        >
-        <v-contextmenu-item :hide-on-click="false" @click="extra.push('group')"
-          >添加菜单组</v-contextmenu-item
-        >
-        <v-contextmenu-item :hide-on-click="false" @click="extra.push('submenu')"
-          >添加子菜单</v-contextmenu-item
-        >
-        <v-contextmenu-item :hide-on-click="false" @click="extra.pop()">删除</v-contextmenu-item>
-      </v-contextmenu-group>
-
-      <template v-for="(item, index) of extra" :key="index">
-        <v-contextmenu-divider />
-
-        <v-contextmenu-group v-if="item === 'group'" :title="`菜单组 ${index + 1}`">
-          <v-contextmenu-item>菜单1</v-contextmenu-item>
-          <v-contextmenu-item>菜单2</v-contextmenu-item>
-          <v-contextmenu-item>菜单3</v-contextmenu-item>
-        </v-contextmenu-group>
-
-        <v-contextmenu-submenu v-else-if="item === 'submenu'" :title="`子菜单 ${index + 1}`">
-          <v-contextmenu-item>菜单1</v-contextmenu-item>
-          <v-contextmenu-item>菜单2</v-contextmenu-item>
-          <v-contextmenu-item>菜单3</v-contextmenu-item>
-        </v-contextmenu-submenu>
-
-        <v-contextmenu-item v-else>菜单 {{ index + 1 }}</v-contextmenu-item>
-      </template>
-    </v-contextmenu>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import {
-  directive,
-  Contextmenu,
-  ContextmenuItem,
-  ContextmenuDivider,
-  ContextmenuSubmenu,
-  ContextmenuGroup
-} from 'v-contextmenu';
-
-export default defineComponent({
-  name: 'ExampleDynamic',
-
-  components: {
-    [Contextmenu.name]: Contextmenu,
-    [ContextmenuItem.name]: ContextmenuItem,
-    [ContextmenuDivider.name]: ContextmenuDivider,
-    [ContextmenuSubmenu.name]: ContextmenuSubmenu,
-    [ContextmenuGroup.name]: ContextmenuGroup
-  },
-
-  directives: {
-    contextmenu: directive
-  },
-
-  data() {
-    return {
-      extra: []
-    };
-  },
-
-  methods: {
-    addItem(type = 'item') {
-      this.extra.push(type);
-    },
-    removeItem() {
-      this.extra.pop();
-    }
-  }
-});
-</script>
-
-<style scoped>
-.wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 300px;
-  height: 200px;
-  margin-bottom: 30px;
-  background-color: rgb(90 167 164 / 20%);
-  border: 3px dashed rgb(90 167 164 / 90%);
-  border-radius: 8px;
-}
-</style>

package/src/views/components/contextmenu/menuGroup.vue

@@ -1,71 +0,0 @@
-<template>
-  <div>
-    <h1>按钮组</h1>
-    <div v-contextmenu:contextmenu class="wrapper">
-      <code>右键点击此区域</code>
-    </div>
-
-    <v-contextmenu ref="contextmenu">
-      <v-contextmenu-item>菜单</v-contextmenu-item>
-
-      <v-contextmenu-group>
-        <v-contextmenu-item>Github</v-contextmenu-item>
-        <v-contextmenu-item>Codepen</v-contextmenu-item>
-        <v-contextmenu-item disabled>Alipay</v-contextmenu-item>
-        <v-contextmenu-item>Wechat</v-contextmenu-item>
-      </v-contextmenu-group>
-
-      <v-contextmenu-divider />
-
-      <v-contextmenu-group title="按钮组">
-        <v-contextmenu-item>菜单1</v-contextmenu-item>
-        <v-contextmenu-item>菜单2</v-contextmenu-item>
-        <v-contextmenu-item disabled>菜单3</v-contextmenu-item>
-      </v-contextmenu-group>
-    </v-contextmenu>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import {
-  directive,
-  Contextmenu,
-  ContextmenuItem,
-  ContextmenuDivider,
-  ContextmenuSubmenu,
-  ContextmenuGroup
-} from 'v-contextmenu';
-
-const ExampleSFC = defineComponent({
-  name: 'ExampleSFC',
-
-  components: {
-    [Contextmenu.name]: Contextmenu,
-    [ContextmenuItem.name]: ContextmenuItem,
-    [ContextmenuDivider.name]: ContextmenuDivider,
-    [ContextmenuSubmenu.name]: ContextmenuSubmenu,
-    [ContextmenuGroup.name]: ContextmenuGroup
-  },
-
-  directives: {
-    contextmenu: directive
-  }
-});
-
-export default ExampleSFC;
-</script>
-
-<style scoped>
-.wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 300px;
-  height: 200px;
-  background-color: rgb(90 167 164 / 20%);
-  border: 3px dashed rgb(90 167 164 / 90%);
-  border-radius: 8px;
-}
-</style>

package/src/views/components/count-to/index.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { ReNormalCountTo, ReboundCountTo } from '@/components/ReCountTo';
-</script>
-
-<template>
-  <el-card>
-    <template #header>
-      <div class="card-header">
-        <span class="font-medium">数字动画组件</span>
-      </div>
-    </template>
-    <div class="flex items-center">
-      <ReNormalCountTo
-        prefix="$"
-        :duration="1000"
-        :color="'#409EFF'"
-        :fontSize="'2em'"
-        :startVal="1"
-        :endVal="1000"
-      />
-      <ul class="flex ml-8">
-        <ReboundCountTo
-          v-for="(num, inx) of [1, 6, 6, 6]"
-          :key="inx"
-          :i="num"
-          :blur="inx"
-          :delay="inx + 1"
-        />
-      </ul>
-    </div>
-  </el-card>
-</template>
-
-<style lang="scss" scoped>
-.flex {
-  display: flex;
-}
-
-:deep(.el-card) {
-  margin-bottom: 10px;
-  text-align: center;
-}
-</style>