@utogether/udp-core 1.0.0

package/src/components/SuTable/SuTable.vue

@@ -0,0 +1,334 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-12-01 18:49:48
+ * @LastEditors: wei.li
+ * @LastEditTime: 2024-06-27 15:08:50
+ * @Description: file content
+-->
+<template>
+  <div class="page-content">
+    <vxe-form
+      v-if="data.items.length"
+      ref="xSearchFrom"
+      :data="data.listQuery"
+      :items="data.items"
+      size="mini"
+      class="ut-seach-from"
+      title-colon
+      title-align="right"
+      title-width="90"
+      @submit="onSubmit"
+      @reset="onReset"
+      @collapse="onCollapse"
+    />
+
+    <!-- 工具栏 -->
+    <vxe-toolbar
+      v-if="showToolbar"
+      :buttons="comButtons"
+      :tools="tools"
+      @button-click="onButtonClick"
+      @tool-click="onToolClick"
+    />
+
+    <!-- 列表 -->
+    <vxe-table
+      ref="SuTableRef"
+      :height="data.height"
+      :loading="loading"
+      :data="data.dataList"
+      :export-config="exportConfig"
+      :checkbox-config="{
+        checkMethod: ({ row }) => oncheckMethod(row)
+      }"
+      resizable
+      border
+    >
+      <vxe-table-column type="checkbox" width="50" align="center" fixed="left" />
+      <vxe-table-column
+        v-for="column in data.columns"
+        :key="column.field"
+        :field="column.field"
+        :title="$t(column.title)"
+        :fixed="column.fixed || ''"
+        :width="column.width"
+        :min-width="column.minWidth"
+        :formatter="column.formatter || ''"
+        :cell-render="column.cellRender || null"
+      />
+      <slot />
+      <slot name="operate" />
+    </vxe-table>
+    <vxe-pager
+      perfect
+      :current-page="data.listQuery.pageNum"
+      :page-size="data.listQuery.pageSize"
+      :total="data.listQuery.total"
+      @page-change="onPageChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+// import { useI18n } from 'vue-i18n';
+import { ref, reactive, toRaw, computed, onBeforeMount, nextTick, getCurrentInstance } from 'vue';
+import dayjs from 'dayjs';
+import { getServiceApi } from '../../api';
+import { useSystemStoreHook } from '../../store/modules/system';
+import { columnFormat, formatGridItems } from '../../utils/dataFormat';
+import { clone, isString } from 'xe-utils';
+
+interface IProps {
+  serviceCode: string;
+  disabledField?: string; // 禁用字段
+  fetchExtParam?: IRecord; // 查询服务时额外的参数
+  disabledMap?: IRecord; // 禁用
+  exportConfig?: IRecord; // 导出配置
+  columns: Array<ITableColProps>;
+  slots?: Array<IRecord>;
+  formItems?: Array<IFormItemProps>;
+  tools?: Array<IButtonProps>;
+  buttons?: Array<IButtonProps>;
+  extButtons?: Array<IButtonProps>;
+  showToolbar?: boolean;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  serviceCode: '',
+  disabledField: 'id',
+  fetchExtParam: (): IRecord => {
+    return {};
+  },
+  disabledMap: (): IRecord => {
+    return {};
+  },
+  exportConfig: (): IRecord => {
+    return {};
+  },
+  formItems: () => [],
+  columns: () => [],
+  slots: () => [],
+  tools: () => [],
+  buttons: () => [
+    { code: 'add', status: 'u-cyan', icon: 'ri-add-line', auth: 'add' },
+    {
+      code: 'del',
+      name: 'delete',
+      status: 'danger',
+      icon: 'ri-delete-line',
+      auth: 'del'
+    }
+  ],
+  extButtons: () => [],
+  showToolbar: true
+});
+
+const comButtons = computed(() => {
+  props.extButtons.forEach(btn => {
+    if (!props.buttons.find(b => b.code === btn.code)) {
+      // eslint-disable-next-line vue/no-mutating-props
+      props.buttons.push(btn);
+    }
+  });
+  return props.buttons.filter(button => (button.auth ? hasAuthority(button.auth) : !button.auth));
+});
+
+const instance = getCurrentInstance();
+const hasAuthority = instance.appContext.config.globalProperties.$hasAuthority;
+
+const xSearchFrom = ref(null);
+const SuTableRef = ref(null);
+const loading = ref(false);
+const disabledCheckList = ref([]);
+
+/**
+ * @description: 预处理查询form
+ * @return {*}
+ */
+// 获取查询item
+const getItems = () => {
+  if (!props.formItems.length) return props.formItems;
+  return formatGridItems(props.formItems, 'N');
+};
+/**
+ * @description: 预处理 column
+ * @return {*} 表格列表
+ */
+const getColumns = () => {
+  return columnFormat(props.columns);
+};
+const offsetHeight = props.showToolbar ? 200 : 160;
+const data = reactive<IRecord>({
+  record: {},
+  listQuery: Object.assign({}, props.fetchExtParam),
+  dataList: [],
+  items: getItems(),
+  columns: getColumns(),
+  height: window.innerHeight - offsetHeight,
+  showModelView: false,
+  showUserRole: false
+});
+// const listQuery = reactive();
+// const { t } = useI18n();
+
+const getDataList = async () => {
+  let params = Object.assign({}, props.fetchExtParam || {}, data.listQuery);
+  showLoading();
+  try {
+    params = doDateRange(params);
+    const { serviceCode, disabledMap, disabledField } = props;
+    const res = (await getServiceApi().get(serviceCode, params)) as IResponseData;
+    const keys = disabledMap && Object.keys(disabledMap);
+    if (keys?.length) {
+      keys.forEach(key => {
+        const list = res.list.filter(f => f[key] === disabledMap[key]).map(m => m[disabledField]);
+        disabledCheckList.value.push(...list);
+      });
+    }
+    data.dataList = res?.list || [];
+    data.listQuery.total = res?.total || 4;
+  } finally {
+    // data.dataList = [
+    //   { id: '1', calcStatus: '0', periodStatus: '0', domesticAbroad: '1' },
+    //   { id: '2', calcStatus: '1', periodStatus: '1', domesticAbroad: '1' },
+    //   { id: '3', calcStatus: '2', periodStatus: '2', domesticAbroad: '2' },
+    //   { id: '4', calcStatus: '3', periodStatus: '1', domesticAbroad: '2' }
+    // ];
+    hiddenLoading();
+  }
+};
+// 左侧按钮点击事件
+const onButtonClick = event => {
+  emit('onClick', event);
+};
+// 右侧按钮点击事件
+const onToolClick = event => {
+  const $table = SuTableRef.value;
+  event.code === 'export' && $table.openExport();
+  event.code === 'import' && $table.importData();
+  emit('onClick', event);
+};
+// 页数切换
+const onPageChange = ({ currentPage, pageSize }) => {
+  data.listQuery.pageNum = currentPage;
+  data.listQuery.pageSize = pageSize;
+  refreshData();
+};
+const onSubmit = () => {
+  for (const i in data.listQuery) {
+    if (data.listQuery[i] && isString(data.listQuery[i])) {
+      data.listQuery[i] = data.listQuery[i].trim();
+    }
+  }
+  data.listQuery.pageNum = 1;
+  data.listQuery.pageSize = data.listQuery.pageSize || 20;
+  data.listQuery.organizationId = useSystemStoreHook().getOrganizationId;
+  data.listQuery.orgId = useSystemStoreHook().getOrgId;
+  refreshData();
+};
+
+const onReset = () => {
+  data.listQuery = {};
+  // data.listQuery.pageSize = 20;
+  data.listQuery.pageNum = 1;
+  data.listQuery.organizationId = useSystemStoreHook().getOrganizationId;
+  data.listQuery.orgId = useSystemStoreHook().getOrgId;
+  data.listQuery = Object.assign({}, props.fetchExtParam);
+  refreshData();
+};
+
+const doDateRange = listQuery => {
+  const query = clone(listQuery, true);
+  const dateRanges = data.items.filter(f => f.itemRender?.name === '#SuDateRange');
+  if (!dateRanges.length) return query;
+  dateRanges.forEach(element => {
+    const val = query[element.field];
+    if (val && element.toField) {
+      query[element.fromField] = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
+      query[element.toField] = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
+      delete query[element.field];
+    } else if (val) {
+      query[`${element.field}From`] = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
+      query[`${element.field}To`] = dayjs(val[1])
+        .add(23, 'h')
+        .add(59, 'm')
+        .add(59, 's')
+        .format('YYYY-MM-DD HH:mm:ss');
+      delete query[element.field];
+    }
+  });
+  return query;
+};
+const onCollapse = ({ status }) => {
+  if (status) {
+    data.height = window.innerHeight - 200;
+  } else {
+    nextTick(() => {
+      const offsetHeight = xSearchFrom.value.$el.clientHeight - 42 + 200;
+      data.height = window.innerHeight - offsetHeight;
+    });
+  }
+};
+// 请求数据
+const refreshData = () => {
+  getDataList();
+};
+const getCheckboxRecords = () => {
+  return SuTableRef.value && SuTableRef.value.getCheckboxRecords();
+};
+const showLoading = () => {
+  loading.value = true;
+};
+const hiddenLoading = () => {
+  loading.value = false;
+};
+const getInstance = () => {
+  return toRaw(SuTableRef.value);
+};
+// 子组件需对外暴露方法
+defineExpose({
+  refreshData,
+  showLoading,
+  hiddenLoading,
+  getCheckboxRecords,
+  getInstance
+});
+/**
+ * @description: checkbox是否可选
+ */
+const oncheckMethod = row => {
+  if (!disabledCheckList.value?.length) return true;
+  return !disabledCheckList.value.find(f => row[props.disabledField] === f);
+};
+/**
+ * @description: 监听窗口变化，动态改变表格的高度
+ * @param {*}
+ * @return {*}
+ */
+const addResizeListener = (offsetHeight = 200) => {
+  window.onresize = () => {
+    return (() => {
+      data.height = window.innerHeight - offsetHeight;
+    })();
+  };
+};
+
+const emit = defineEmits<{
+  (e: 'onClick', event: Event): void;
+}>();
+onBeforeMount(() => {
+  onSubmit();
+  addResizeListener();
+});
+</script>
+<style lang="scss">
+.page-content {
+  padding: 3px;
+}
+
+.ut-seach-from {
+  .vxe-form--item {
+    padding: 0.1em 0.8em 0.1em 0 !important;
+  }
+}
+</style>

package/src/components/SuTypeit/index.ts

@@ -0,0 +1,51 @@
+/*
+ * @Author: wei.li
+ * @Date: 2023-03-04 09:25:26
+ * @LastEditors: wei.li
+ * @LastEditTime: 2023-03-04 09:28:22
+ * @Description: file content
+ */
+import { h, defineComponent } from 'vue';
+import TypeIt from 'typeit';
+
+// 打字机效果组件（只是简单的封装下，更多配置项参考 https://www.typeitjs.com/docs/vanilla/usage#options）
+export default defineComponent({
+  name: 'TypeIt',
+  props: {
+    /** 打字速度，以每一步之间的毫秒数为单位，默认`200` */
+    speed: {
+      type: Number,
+      default: 200
+    },
+    values: {
+      type: Array,
+      defalut: []
+    },
+    className: {
+      type: String,
+      default: 'type-it'
+    },
+    cursor: {
+      type: Boolean,
+      default: true
+    }
+  },
+  render() {
+    return h(
+      'span',
+      {
+        class: this.className
+      },
+      {
+        default: () => []
+      }
+    );
+  },
+  mounted() {
+    new TypeIt(`.${this.className}`, {
+      strings: this.values,
+      speed: this.speed,
+      cursor: this.cursor
+    }).go();
+  }
+});

package/src/config/index.ts

@@ -0,0 +1,35 @@
+/*
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:02:30
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-04-03 17:28:24
+ * @Description: file content
+ */
+
+let config: object = {};
+let systemEnv: object = {};
+
+/** 项目动态全局配置 */
+const setConfig = (app, cfg?: unknown) => {
+  config = Object.assign(config, cfg);
+  app.config.globalProperties.$config = getConfig();
+};
+
+/** 获取项目动态全局配置 */
+const getConfig = (): ServerConfigs => {
+  return config;
+};
+/** 项目动态全局配置 */
+const setSystemEnv = (env = {}) => {
+  systemEnv = env;
+};
+
+/** 获取项目动态全局配置 */
+const getEnv = (): ISystemEnv => {
+  return systemEnv;
+};
+
+/** 本地响应式存储的命名空间 */
+const responsiveStorageNameSpace = () => getConfig().ResponsiveStorageNameSpace;
+
+export { getConfig, setConfig, setSystemEnv, getEnv, responsiveStorageNameSpace };

package/src/contant/index.ts

@@ -0,0 +1,20 @@
+/*
+ * @Author: wei.li
+ * @Date: 2022-05-24 11:26:59
+ * @LastEditors: wei.li
+ * @LastEditTime: 2024-06-26 14:59:46
+ * @Description: file content
+ */
+
+/** 中文菜单 */
+export const kMENUZH = 'menu_zh';
+/** 英文菜单 */
+export const kMENUEN = 'menu_en';
+/** token */
+export const kTOKEN = 'authorized-token';
+/** cookies token */
+export const kCKTOKEN = 'kCookies_token';
+/** 系统配置的key */
+export const kSYSCONFIG = 'kSysConfig';
+/** 登录用户信息 */
+export const kLOGINER = 'loginer';

package/src/directives/elResizeDetector/index.ts

@@ -0,0 +1,33 @@
+/*
+ * @Author: levi7754 levi7754@163.com
+ * @Date: 2023-06-19 09:14:18
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2024-04-14 20:39:36
+ * @FilePath: /udp-front/packages/udp-core/src/directives/elResizeDetector/index.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import type { Directive, DirectiveBinding, VNode } from 'vue';
+import elementResizeDetectorMaker from 'element-resize-detector';
+import type { Erd } from 'element-resize-detector';
+import { emitter } from '../../utils/mitt';
+
+const erd: Erd = elementResizeDetectorMaker({
+  strategy: 'scroll'
+});
+
+export const resize: Directive = {
+  mounted(el: HTMLElement, binding?: DirectiveBinding, vnode?: VNode) {
+    erd.listenTo(el, elem => {
+      const width = elem.offsetWidth;
+      const height = elem.offsetHeight;
+      if (binding?.instance) {
+        emitter.emit('resize', { detail: { width, height } });
+      } else {
+        vnode.el.dispatchEvent(new CustomEvent('resize', { detail: { width, height } }));
+      }
+    });
+  },
+  unmounted(el: HTMLElement) {
+    erd.uninstall(el);
+  }
+};

package/src/directives/index.ts

@@ -0,0 +1,11 @@
+/*
+ * @Author: wei.li
+ * @Date: 2021-12-23 17:33:20
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-10-19 14:06:16
+ * @Description: file content
+ */
+export * from './permission';
+export * from './elResizeDetector';
+// export * from './focus';
+// export * from './spinning';

package/src/directives/permission/index.ts

@@ -0,0 +1,29 @@
+/*
+ * @Author: levi7754 levi7754@163.com
+ * @Date: 2023-06-19 09:14:18
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2024-04-14 20:39:45
+ * @FilePath: /udp-front/packages/udp-core/src/directives/permission/index.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { usePermissionStoreHook } from '../../store/modules/permission';
+import type { Directive } from 'vue';
+import router from '../../router';
+import type { DirectiveBinding } from 'vue';
+
+export const auth: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const { value } = binding;
+    if (value) {
+      const prefixAuth = router.currentRoute.value.meta?.prefixAuth;
+      const authRoles = `${prefixAuth}.${value}`;
+      const buttonAuth = usePermissionStoreHook().getButtonAuth;
+      const hasAuth = buttonAuth.includes(authRoles);
+      if (!hasAuth) {
+        el.parentNode.removeChild(el);
+      }
+    } else {
+      throw new Error("need roles! Like v-auth=\"['admin','test']\"");
+    }
+  }
+};

package/src/layout/components/lay-chrome/index.vue

@@ -0,0 +1,30 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2024-06-13 15:31:57
+ * @LastEditors: wei.li
+ * @LastEditTime: 2024-06-13 15:32:44
+ * @Description: file content
+-->
+<template>
+  <svg class="w-full h-full">
+    <defs>
+      <symbol id="geometry-left" viewBox="0 0 214 36">
+        <path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z" />
+      </symbol>
+      <symbol id="geometry-right" viewBox="0 0 214 36">
+        <use xlink:href="#geometry-left" />
+      </symbol>
+      <clipPath>
+        <rect width="100%" height="100%" x="0" />
+      </clipPath>
+    </defs>
+    <svg width="51%" height="100%">
+      <use xlink:href="#geometry-left" width="214" height="36" fill="currentColor" />
+    </svg>
+    <g transform="scale(-1, 1)">
+      <svg width="51%" height="100%" x="-100%" y="0">
+        <use xlink:href="#geometry-right" width="214" height="36" fill="currentColor" />
+      </svg>
+    </g>
+  </svg>
+</template>

package/src/layout/components/lay-content/index.vue

@@ -0,0 +1,143 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-12-23 17:33:20
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-04-05 10:43:53
+ * @Description: 主页面
+-->
+<script setup lang="ts">
+import { h, computed, Transition, defineComponent } from 'vue';
+import { useGlobal } from '@utogether/utils';
+import { useI18n } from 'vue-i18n';
+import { useTags } from '../../hooks/useTag';
+import backTop from '../../../assets/svg/back_top.svg?component';
+import { usePermissionStoreHook } from '../../../store/modules/permission';
+
+const props = defineProps({
+  fixedHeader: Boolean
+});
+
+const { showModel } = useTags();
+const { t } = useI18n();
+const { $storage, $config } = useGlobal();
+
+const keepAlive = computed(() => {
+  return $config?.KeepAlive;
+});
+
+const transitions = computed(() => {
+  return route => {
+    return route.meta.transition;
+  };
+});
+
+const hideTabs = computed(() => {
+  return $storage?.configure.hideTabs;
+});
+const layout = computed(() => {
+  return $storage?.layout.layout === 'vertical';
+});
+
+const getSectionStyle = computed(() => {
+  // 在iframe中默认就是审批
+  return window.top === window.self
+    ? [
+        hideTabs.value && layout ? 'padding-top: 48px;' : '',
+        !hideTabs.value && layout
+          ? showModel.value == 'chrome'
+            ? 'padding-top: 85px;'
+            : 'padding-top: 81px;'
+          : '',
+        hideTabs.value && !layout.value ? 'padding-top: 48px' : '',
+        !hideTabs.value && !layout.value
+          ? showModel.value == 'chrome'
+            ? 'padding-top: 85px;'
+            : 'padding-top: 81px;'
+          : '',
+        props.fixedHeader ? '' : 'padding-top: 0;'
+      ]
+    : 'padding-top: 0';
+});
+
+const transitionMain = defineComponent({
+  props: {
+    route: {
+      type: undefined,
+      required: true
+    }
+  },
+  render() {
+    const transitionName = transitions.value(this.route)?.name || 'fade-transform';
+    const enterTransition = transitions.value(this.route)?.enterTransition;
+    const leaveTransition = transitions.value(this.route)?.leaveTransition;
+    return h(
+      Transition,
+      {
+        name: enterTransition ? 'pure-classes-transition' : transitionName,
+        enterActiveClass: enterTransition ? `animate__animated ${enterTransition}` : undefined,
+        leaveActiveClass: leaveTransition ? `animate__animated ${leaveTransition}` : undefined,
+        mode: 'out-in',
+        appear: true
+      },
+      {
+        default: () => [this.$slots.default()]
+      }
+    );
+  }
+});
+</script>
+
+<template>
+  <section
+    :class="[props.fixedHeader ? 'app-main' : 'app-main-nofixed-header']"
+    :style="getSectionStyle"
+  >
+    <router-view>
+      <template #default="{ Component, route }">
+        <el-scrollbar v-if="props.fixedHeader">
+          <template #default>
+            <div class="h-full">
+              <el-backtop :title="t('message.udp.backtop')" target=".app-main .el-scrollbar__wrap">
+                <backTop />
+              </el-backtop>
+              <transitionMain :route="route">
+                <keep-alive v-if="keepAlive" :include="usePermissionStoreHook().cachePageList">
+                  <component :is="Component" :key="route.fullPath" class="main-content" />
+                </keep-alive>
+                <component :is="Component" v-else :key="route.fullPath" class="main-content" />
+              </transitionMain>
+            </div>
+          </template>
+        </el-scrollbar>
+        <div v-else>
+          <transitionMain :route="route">
+            <keep-alive v-if="keepAlive" :include="usePermissionStoreHook().cachePageList">
+              <component :is="Component" :key="route.fullPath" class="main-content" />
+            </keep-alive>
+            <component :is="Component" v-else :key="route.fullPath" class="main-content" />
+          </transitionMain>
+        </div>
+      </template>
+    </router-view>
+  </section>
+</template>
+
+<style scoped>
+.app-main {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+.app-main-nofixed-header {
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+}
+
+.main-content {
+  /* padding: 6px; */
+  height: 100%;
+}
+</style>