@utogether/udp-core 1.0.0

package/src/plugins/vxe-table/render.tsx

@@ -0,0 +1,397 @@
+/*
+ * @Author: levi7754 levi7754@163.com
+ * @Date: 2023-10-12 13:53:07
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-04-29 14:10:34
+ * @FilePath: /sitzone-mes/src/plugins/vxe-table/render.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+
+import type {
+  FormItemContentRenderParams,
+  VxeColumnPropTypes,
+  VxeGlobalRendererHandles
+} from 'vxe-table';
+
+import { VxeUI } from 'vxe-pc-ui';
+
+import { findTree, isArray, isEmpty } from 'xe-utils';
+
+interface SuEditRender extends VxeColumnPropTypes.EditRender {
+  sourceData: IRecord;
+}
+interface SuRenderCellOptions extends VxeGlobalRendererHandles.RenderCellOptions {
+  sourceData: IRecord[];
+}
+
+VxeUI.renderer.add('#iconselect', {
+  renderEdit(renderOpts, params) {
+    const { row, column } = params;
+    return [<iconSelect v-model={row[column.field]} teleported={false} />];
+  },
+  renderCell(renderOpts, params) {
+    const { row, column } = params;
+    return [<IconifyIconOffline icon={row[column.field]} style="font-size: 16px;" />];
+  },
+  renderItemContent(renderOpts, params) {
+    const { data, field } = params;
+    return [<iconSelect v-model={data[field]} teleported={true} />];
+  }
+});
+
+VxeUI.renderer.add('$treeSelect', {
+  renderEdit(renderOpts: SuEditRender, params) {
+    const { row, column } = params;
+    const { props, sourceData, events } = renderOpts;
+
+    return [
+      <el-tree-select
+        v-model={row[column.field]}
+        data={sourceData}
+        check-strictly
+        {...props}
+        filterable
+        onCheckChange={(node, selected, isLeaf) => onCheckChange(node, selected, isLeaf, events)}
+        onNodeClick={(data, node, treeNode) => onNodeClick(data, node, treeNode, events)}
+        onCurrentChange={(data, node) => onCurrentChange(data, node, events)}
+      />
+    ];
+  },
+  renderCell(renderOpts: SuRenderCellOptions, params) {
+    const { row, column } = params;
+    const { sourceData, props = {} } = renderOpts;
+    const { children = 'children', label = 'label' } = props;
+    const data = findTree(sourceData, item => item['value'] === row[column.field], { children });
+    return data ? [<span>{data.item[label]}</span>] : null;
+  },
+  renderItemContent(renderOpts: SuFormItemRenderOptions, params) {
+    const { data, field } = params;
+    const { props, sourceData, events } = renderOpts;
+    return [
+      <el-tree-select
+        v-model={data[field]}
+        data={sourceData}
+        check-strictly
+        {...props}
+        filterable
+        onCheckChange={(node, selected, isLeaf) => onCheckChange(node, selected, isLeaf, events)}
+        onNodeClick={(data, node, treeNode) => onNodeClick(data, node, treeNode, events)}
+        onCurrentChange={(data, node) => onCurrentChange(data, node, events)}
+      />
+    ];
+  }
+});
+
+/**
+ * 当复选框被点击的时候触发
+ * @param node 传递给 data 属性的数组中该节点所对应的对象
+ * @param selected 节点本身是否被选中
+ * @param isLeaf 节点的子树中是否有被选中的节点
+ */
+const onCheckChange = (node, selected, isLeaf, events) => {
+  console.log(node, selected, isLeaf);
+  events?.checkChange && events?.checkChange(node, selected, isLeaf);
+};
+/**
+ * 节点被点击的时候触发
+ * @param nodeObject 点击的节点对象
+ * @param node TreeNode 的 node 属性
+ * @param treeNode TreeNode
+ */
+const onNodeClick = (nodeObject, node, treeNode, events) => {
+  events?.checkChange && events?.checkChange(nodeObject, node, treeNode);
+};
+/**
+ * 当前选中节点变化时触发的事件
+ * @param data 当前节点的数据
+ * @param node 当前节点的 Node 对象
+ */
+const onCurrentChange = (data, node, events) => {
+  events?.checkChange && events?.checkChange(data, node);
+};
+
+export const VxetableRender = (VXETable, { serviceApi, dict, i18n }) => {
+  console.log(serviceApi, dict, i18n);
+  VXETable.renderer.add('#select', {
+    renderEdit(renderOpts: VxeColumnPropTypes.EditRender, params) {
+      const { row, column } = params;
+      const { options, props, optionProps = {}, events } = renderOpts;
+      // @ts-ignore
+      const { label = 'label', value = 'value', extLabel } = optionProps;
+      if (props.multiple && row[column.field]) {
+        !isArray(row[column.field]) &&
+          row[column.field].split(',').forEach(ff => {
+            const isExit = options.some(s => s[label] === ff);
+            !isExit && options.push({ [value]: ff, [label]: ff });
+          });
+      }
+
+      function onChange(val) {
+        const item = val && options.find(option => val === option[value]);
+        events?.change && events.change(params, val, item, column.field);
+      }
+
+      function onClear() {
+        events?.clear && events.clear({ row, field: column.field });
+      }
+
+      return [
+        <el-select
+          v-model={row[column.field]}
+          filterable
+          clearable
+          {...props}
+          size="small"
+          style="width: 100%"
+          onChange={v => onChange(v)}
+          onClear={() => onClear()}
+        >
+          {options.map(item => {
+            return (
+              <el-option
+                key={item[value]}
+                label={item[extLabel] ? item[value] : item[label]}
+                value={item[value]}
+              >
+                <span style="float: left">
+                  {extLabel && item[extLabel] ? `${item[value]}-${item[extLabel]}` : item[value]}
+                </span>
+                {value !== label && !item[extLabel] ? (
+                  <span class="ut-coSelect-option">{item[label]}</span>
+                ) : null}
+              </el-option>
+            );
+          })}
+        </el-select>
+      ];
+    },
+    // 可编辑显示模板
+    renderCell(renderOpts, params) {
+      const { row, column } = params;
+      const { props, options, optionProps } = renderOpts;
+      // @ts-ignore
+      const { label = 'label', value = 'value', extLabel } = optionProps;
+      const { textValue } = props;
+      let val = row[column.field];
+      const item = options.find(opt => opt[value] === val);
+      if (textValue) {
+        val = eval(`row.${textValue}`) || row[column.field];
+      }
+      if (item) {
+        val = extLabel ? item[value] : item[label];
+      }
+      if (val && props?.multiple && isArray(val)) {
+        val = val && val.join(',');
+      }
+      return [<span>{val}</span>];
+    },
+    renderItemContent(renderOpts, params) {
+      const { data, field } = params;
+      const { options, props, optionProps = {}, events } = renderOpts;
+      // @ts-ignore
+      const { label = 'label', value = 'value' } = optionProps;
+      // 默认值
+      const { defaultValues } = props;
+      if (defaultValues) {
+        data[field] = defaultValues;
+      }
+      /**
+       * @description: 选中值发生变化时触发
+       * @param {*} val 目前的选中值
+       */
+      function onChange(val) {
+        const { fieldMap = {} } = props;
+        const item = options.find(option => val === option[value]);
+        const keys = Object.keys(fieldMap);
+        if (keys.length) {
+          const values: string[] = Object.values(fieldMap);
+          keys.forEach((key, idx) => {
+            data[key] = val ? item[values[idx]] : null;
+          });
+        }
+        const parm = { item, row: data, property: field };
+        events?.change && events.change(parm);
+      }
+
+      /**
+       * @description: 可清空的单选模式下用户点击清空按钮时触发
+       */
+      function onClear() {
+        events?.clear && events.clear({ data, field });
+      }
+
+      return [
+        <el-select
+          v-model={data[field]}
+          {...props}
+          filterable
+          clearable
+          size="small"
+          style="width: 100%"
+          onChange={v => onChange(v)}
+          onClear={() => onClear()}
+        >
+          {options.map(item => {
+            return (
+              <el-option key={item[value]} label={item[label]} value={item[value]}>
+                <span style="float: left">{item[label]}</span>
+                <span class="ut-coSelect-option">{item[value]}</span>
+              </el-option>
+            );
+          })}
+        </el-select>
+      ];
+    }
+  });
+  VXETable.renderer.add('#lov', {
+    renderItemContent(renderOpts, params: FormItemContentRenderParams) {
+      const { data, field } = params;
+      const { props, events } = renderOpts;
+      // 默认值
+      const { defaultValues, mapField } = props;
+      if (defaultValues) {
+        data[field] = defaultValues;
+      }
+      /**
+       * @description: 选中值发生变化时触发
+       * @param {*} val 目前的选中值
+       */
+      function onChange(record, displayField) {
+        const { mapField, field, displayName, isMulti } = props;
+        if (!isMulti) {
+          const obj = {
+            [displayName || field]: record[displayField || displayName || field]
+          };
+          for (const key in mapField) {
+            obj[key] = record[mapField[key]];
+          }
+          Object.assign(data, obj);
+        } else if (isMulti) {
+          const obj = {};
+          data[displayName || field] = record.reduce((curv, prev) => {
+            for (const key in mapField) {
+              obj[key] = !curv ? prev[mapField[key]] : obj[key] + ',' + prev[mapField[key]];
+            }
+            curv = !curv ? prev[displayName || field] : curv + ',' + prev[displayName || field];
+            return curv;
+          }, '');
+          Object.assign(data, obj);
+        }
+        const parm = { row: data, field, item: record };
+        events?.change && events.change(parm);
+      }
+
+      /**
+       * @description: 点击清空按钮时触发
+       */
+      function onClear() {
+        data[field] = null;
+        if (!isEmpty(mapField)) {
+          for (const key in mapField) {
+            data[key] = null;
+          }
+        }
+        events?.clear && events.clear({ data, field: field });
+      }
+
+      return [
+        <ut-lov
+          record={data}
+          {...props}
+          mode="vxe"
+          onChange={(v, f) => onChange(v, f)}
+          onClear={() => onClear()}
+        />
+      ];
+    },
+    // 单元格编辑
+    renderEdit(renderOpts: VxeColumnPropTypes.EditRender, params) {
+      console.log('.......');
+      const { row, column } = params;
+      const { props, events } = renderOpts;
+
+      function onChange(record, displayField) {
+        const { mapField, field, displayName, isMulti } = props;
+        if (!isMulti) {
+          const obj = {
+            [displayName || field]: record[displayField || displayName || field]
+          };
+          for (const key in mapField) {
+            obj[key] = record[mapField[key]];
+          }
+          Object.assign(row, obj);
+        }
+        events?.change && events.change(params, record, row[column.field]);
+      }
+
+      function onClear() {
+        const { mapField, field } = props;
+        row[column.field] = null;
+        if (!isEmpty(mapField)) {
+          for (const key in mapField) {
+            row[key] = null;
+          }
+        }
+        events?.clear && events.clear({ row, field });
+      }
+
+      return [
+        <ut-lov
+          record={row}
+          {...props}
+          mode="ele"
+          onChange={(v, f) => onChange(v, f)}
+          onClear={() => onClear()}
+        />
+      ];
+    },
+    // 单元格默认
+    renderDefault(renderOpts: VxeColumnPropTypes.EditRender, params) {
+      const { row, column } = params;
+      const { props, events } = renderOpts;
+
+      function onChange(record, displayField) {
+        const { mapField, field, displayName, isMulti } = props;
+        if (!isMulti) {
+          const obj = {
+            [displayName || field]: record[displayField || displayName || field]
+          };
+          for (const key in mapField) {
+            obj[key] = record[mapField[key]];
+          }
+          Object.assign(row, obj);
+        }
+        events?.change && events.change(params, record, row[column.field]);
+      }
+
+      function onClear() {
+        const { mapField, field } = props;
+        row[column.field] = null;
+        if (!isEmpty(mapField)) {
+          for (const key in mapField) {
+            row[key] = null;
+          }
+        }
+        events?.clear && events.clear({ row, field });
+      }
+
+      return [
+        <ut-lov
+          record={row}
+          {...props}
+          mode="ele"
+          onChange={(v, f) => onChange(v, f)}
+          onClear={() => onClear()}
+        />
+      ];
+    },
+    // 可编辑显示模板
+    renderCell(renderOpts, params) {
+      const { row, column } = params;
+      // @ts-ignore
+      // const { textValue } = props;
+      const val = row[column.field];
+      return [<span>{val}</span>];
+    }
+  });
+};

package/src/router/createComponent.tsx

@@ -0,0 +1,25 @@
+/*
+ * @Author: levi7754 levi7754@163.com
+ * @Date: 2023-12-20 11:45:26
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2023-12-20 13:43:51
+ * @FilePath: /sitzone-mes/src/router/createComponent.tsx
+ * @Description:
+ */
+import { defineComponent } from 'vue';
+/**
+ * 将指定组件设置自定义名称
+ *
+ * @param {String} name 组件自定义名称
+ * @param {AsyncComponent} component
+ * @return {Component}
+ */
+export default function createComponent(name, asyncComponent) {
+  return defineComponent({
+    name: name,
+    components: { asyncComponent },
+    setup() {
+      return () => <async-component />;
+    }
+  });
+}

package/src/router/index.ts

@@ -0,0 +1,183 @@
+import { findIndexOf, isEmpty } from 'xe-utils';
+import {
+  type Router,
+  createRouter,
+  type RouteRecordRaw,
+  type RouteComponent,
+  createWebHistory
+} from 'vue-router';
+import { cookies, NProgress, openLink, isUrl, buildHierarchyTree } from '@utogether/utils';
+import { useMultiTagsStoreHook } from '../store/modules/multiTags';
+import { usePermissionStoreHook } from '../store/modules/permission';
+import {
+  ascending,
+  initRouter,
+  findRouteByPath,
+  handleAliveRoute,
+  formatTwoStageRoutes,
+  formatFlatteningRoutes
+} from './utils';
+import { getEnv } from '../config';
+import { kLOGINER } from '../contant';
+
+import homeRouter from './modules/home';
+import errorRouter from './modules/error';
+import remainingRouter from './modules/remaining';
+
+const systemRouter = import.meta.glob([
+  '../views/system/**/*.{vue,tsx}',
+  '../views/uapp/**/*.{vue,tsx}',
+  '../views/upms/**/*.{vue,tsx}',
+  '../views/ufile/**/*.{vue}',
+  '../views/urpt/**/*.{vue,tsx}',
+  '../views/organization/**/*.{vue,tsx}',
+  '../views/udev/**/*.{vue, tsx}'
+]);
+
+// 原始静态路由（未做任何处理）
+const routes = [homeRouter, errorRouter];
+/** 导出处理后的静态路由（三级及以上的路由全部拍成二级） */
+export const constantRoutes: Array<RouteRecordRaw> = formatTwoStageRoutes(
+  formatFlatteningRoutes(buildHierarchyTree(ascending(routes)))
+);
+
+/** 用于渲染菜单，保持原始层级 */
+export const constantMenus: Array<RouteComponent> = ascending(routes).concat(...remainingRouter);
+
+/** 不参与菜单的路由 */
+export const remainingPaths = Object.keys(remainingRouter).map(v => {
+  return remainingRouter[v].path;
+});
+
+/** 创建路由实例 */
+export const router: Router = createRouter({
+  history: createWebHistory(getEnv().VITE_ROUTER_HISTORY),
+  routes: constantRoutes.concat(...(remainingRouter as any)),
+  strict: true,
+  scrollBehavior(to, from, savedPosition) {
+    return new Promise(resolve => {
+      if (savedPosition) {
+        return savedPosition;
+      } else {
+        if (from.meta.saveSrollTop) {
+          const top: number = document.documentElement.scrollTop || document.body.scrollTop;
+          resolve({ left: 0, top });
+        }
+      }
+    });
+  }
+});
+
+/** 重置路由 */
+export function resetRouter() {
+  router.getRoutes().forEach(route => {
+    const { name, meta } = route;
+    if (name && router.hasRoute(name) && meta?.backstage) {
+      router.removeRoute(name);
+      router.options.routes = formatTwoStageRoutes(
+        formatFlatteningRoutes(buildHierarchyTree(ascending(routes)))
+      );
+    }
+  });
+  usePermissionStoreHook().clearAllCachePage();
+}
+
+let views = null;
+export function setViews(cviews) {
+  views = cviews;
+  Object.assign(views, systemRouter);
+}
+
+export function getViews() {
+  return views;
+}
+
+/** 路由白名单 */
+const whiteList = ['/login'];
+
+router.beforeEach((to: ToRouteType, _from, next) => {
+  if (to.meta?.keepAlive) {
+    handleAliveRoute(to, 'add');
+    // 页面整体刷新和点击标签页刷新
+    if (_from.name === undefined || _from.name === 'redirect') {
+      handleAliveRoute(to);
+    }
+  }
+  const userName = cookies.get(kLOGINER);
+  NProgress.start();
+  const externalLink = isUrl(to?.name as string);
+  /** 如果已经登录并存在登录信息后不能跳转到路由白名单，而是继续保持在当前页面 */
+  function toCorrectRoute() {
+    whiteList.includes(to.fullPath) ? next(_from.fullPath) : next();
+  }
+  if (userName) {
+    // TODO  无权限跳转403页面
+    // if (to.meta?.roles && !isOneOfArray(to.meta?.roles, userInfo?.roles)) {
+    //   next({ path: "/error/403" });
+    // }
+    if (_from?.name && _from?.name !== 'login') {
+      // m.name === to.name 判断param路由跳转
+      const cmp = to.matched.find(
+        m => m.path === to.path || (m.name === to.name && to.params)
+      )?.components;
+      // 如果路由包含http 则是超链接 反之是普通路由
+      if (externalLink) {
+        openLink(to?.name as string);
+        NProgress?.done();
+      } else if (cmp?.default || to.name === 'redirect') {
+        toCorrectRoute();
+      } else {
+        next({ path: '/error/404' });
+      }
+    } else {
+      // 刷新
+      if (usePermissionStoreHook().wholeMenus.length === 0) {
+        initRouter(userName).then((router: Router) => {
+          if (!useMultiTagsStoreHook().getMultiTagsCache) {
+            const { path } = to;
+            const index = findIndexOf(remainingRouter, v => v.path === path);
+            const routes: any = index === -1 ? router.options.routes[0].children : router.options.routes;
+            const route = findRouteByPath(path, routes);
+            if (route && route.meta?.title) {
+              const { path, name, meta } = route;
+              useMultiTagsStoreHook().handleTags('push', { path, name, meta });
+            }
+          }
+          // 确保动态路由完全加入路由列表并且不影响静态路由
+          // （注意：动态路由刷新时router.beforeEach可能会触发两次，
+          // 第一次触发动态路由还未完全添加，第二次动态路由才完全添加到路由列表，
+          // 如果需要在router.beforeEach做一些判断可以在to.name存在的条件下去判断，这样就只会触发一次）
+          if (isEmpty(to.name)) router.push(to.fullPath);
+        });
+      }
+      if (_from.fullPath === '/' && to.fullPath === '/login' && !to.query?.tokenExpire) {
+        to.path = '/welcome';
+        to.fullPath = '/welcome';
+        to.name = 'SuHome';
+      } else if (_from.fullPath === '/' && to.path === '/workflow/approve/index') {
+        to.path = '/welcome';
+        to.fullPath = '/welcome';
+        to.name = 'SuHome';
+        to.query = {};
+      }
+      // next();
+      toCorrectRoute();
+    }
+  } else {
+    if (to.path !== '/login') {
+      if (whiteList.indexOf(to.path) !== -1) {
+        next();
+      } else {
+        next({ path: '/login' });
+      }
+    } else {
+      next();
+    }
+  }
+});
+
+router.afterEach(() => {
+  NProgress?.done();
+});
+
+export default router;

package/src/router/modules/error.ts

@@ -0,0 +1,32 @@
+/*
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:02:30
+ * @LastEditors: wei.li
+ * @LastEditTime: 2024-06-28 08:50:15
+ * @Description: file content
+ */
+const Layout = () => import('../../layout/layoutView.vue');
+const errorRouter: RouteConfigsTable = {
+  path: '/error',
+  name: 'error',
+  component: Layout,
+  redirect: '/error/403',
+  meta: {
+    showLink: false,
+    icon: 'information-line',
+    title: 'message.udp.error',
+    rank: 999
+  },
+  children: [
+    {
+      path: '/error/403',
+      name: '403',
+      component: () => import('../../views/error/403.vue'),
+      meta: {
+        title: 'message.udp.fourZeroThree'
+      }
+    }
+  ]
+};
+
+export default errorRouter;

package/src/router/modules/home.ts

@@ -0,0 +1,32 @@
+/*
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:02:30
+ * @LastEditors: wei.li
+ * @LastEditTime: 2024-06-18 10:38:44
+ * @Description: file content
+ */
+const Layout = () => import('../../layout/layoutView.vue');
+const homeRouter: RouteConfigsTable = {
+  path: '/',
+  name: 'home',
+  component: Layout,
+  redirect: '/welcome',
+  meta: {
+    icon: 'home-filled',
+    title: 'message.udp.home',
+    rank: 0
+  },
+  children: [
+    {
+      path: '/welcome',
+      name: 'SuHome',
+      component: () => import('../../views/uhome/su-welcome.vue'),
+      meta: {
+        title: 'message.udp.home',
+        keepAlive: true
+      }
+    }
+  ]
+};
+
+export default homeRouter;