@utogether/udp-core 2.0.0-beta.21 → 2.0.0-beta.22

package/src/components/udp/index.ts

@@ -1,6 +1,8 @@
-import UtGrid2 from './grid/index.vue';
-import UtForm2 from './form/form.vue';
-import UtContent2 from './content/index.vue';
-import FormUpload2 from './form-upload/form-upload.vue';
-
-export { UtGrid2, UtForm2, UtContent2, FormUpload2 };
+import UtGrid2 from './grid/index.vue';
+import UtForm2 from './form/form.vue';
+import UtContent2 from './content/index.vue';
+import FormUpload2 from './form-upload/form-upload.vue';
+import UtStampBadge2 from './ut-stamp-badge/index.vue';
+import UtUpload2 from './upload/index.vue';
+
+export { UtGrid2, UtForm2, UtContent2, FormUpload2, UtStampBadge2, UtUpload2 };

package/src/components/udp/upload/index.vue

@@ -0,0 +1,444 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2022-06-21 14:50:52
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2026-03-23 14:39:47
+ * @Description: excel数据导入
+-->
+<template>
+  <vxe-modal v-model="visible" :show-header="false" fullscreen remember @close="onClose">
+    <template #default>
+      <vxe-grid ref="xgrid" v-bind="gridOptions" v-on="gridEvents">
+        <template v-for="col in columns" :key="col.field" #[col.field!]="{ row }">
+          <el-select v-if="col.dictCode && !col.disabled" v-model.trim="row[col.field!]" clearable>
+            <el-option
+              v-for="child in dict[col.dictCode]?.children"
+              :key="child.dictCode"
+              :value="child.dictCode"
+              :label="child.dictName"
+            />
+          </el-select>
+          <el-date-picker
+            v-else-if="['date', 'month', 'datetime'].includes(col.dataType) && !col.disabled"
+            v-model.trim="row[col.field!]"
+            :type="col.dataType"
+            value-format="YYYY-MM-DD hh:mm:ss"
+          />
+          <input v-else-if="!col.da && !col.disabled" v-model.trim="row[col.field!]" class="ut-input" />
+          <span v-else-if="!showErrorMsg">{{ row[col.field!] }}</span>
+          <span v-else>{{ row[col.field!] }}</span>
+        </template>
+        <template #pager>
+          <vxe-pager
+            v-model:current-page="listQuery.currentPage"
+            v-model:page-size="listQuery.pageSize"
+            :layouts="layouts"
+            :page-sizes="[200, 500, 1000, 2000, 5000, 10000]"
+            :total="listQuery.total"
+            @page-change="handlePageChange"
+        /></template>
+      </vxe-grid>
+    </template>
+  </vxe-modal>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'UtUpload'
+};
+</script>
+<script setup lang="ts">
+import { reactive, ref, watch, getCurrentInstance } from 'vue';
+import { toDateString } from 'xe-utils';
+import { storageLocal, cookies, warnMessage } from '@utogether/utils';
+import accounting from 'accounting';
+import { useI18n } from 'vue-i18n';
+import { VxeTableInstance, VxeGridProps, VxeGridListeners } from 'vxe-table';
+import { VxeUI } from 'vxe-pc-ui';
+import type { VxePagerPropTypes, VxePagerEvents } from 'vxe-pc-ui';
+
+export interface IProps {
+  defaultParams?: IRecord;
+  options?: IRecord;
+  columns: Array<ITableColProps>;
+  templateData?: Array<ITableColProps>;
+  serviceCode?: string;
+  url?: string;
+  sourceList?: string;
+}
+
+// const importOptions = {
+//   template: [
+//     {
+//       [t('message.seqNum')]: 10,
+//       [t('message.valueCode')]: 'red',
+//       [t('message.valueDesc')]: '红色',
+//       [t('message.valueDescEn')]: '1000,88.00'
+//     }
+//   ],
+//   columns: [
+//     { field: t('message.seqNum'), mapField: 'seqNum' },
+//     { field: t('message.valueCode'), mapField: 'valueCode' },
+//     { field: t('message.valueDesc'), mapField: 'valueDesc' },
+//     { field: t('message.valueDescEn'), mapField: 'valueDescEn', valueType: 'number', decimal: 2 },
+//     { field: '异常信息', mapField: 'errorMessage', disabled: true, minWidth: 150 }
+//   ],
+//   options: {
+//     errorField: 'errorMessage',
+//     filename: '值集导入模板'
+//   }
+// }
+
+const props = withDefaults(defineProps<IProps>(), {
+  defaultParams: (): IRecord => {
+    return {};
+  },
+  options: (): IRecord => {
+    return {
+      filename: '数据模板',
+      errorField: 'errorMsg',
+      errListField: 'list'
+    };
+  },
+  columns: () => [],
+  templateData: () => [],
+  sourceList: 'list'
+});
+
+const instance = getCurrentInstance()!;
+const serviceApi = instance.appContext.config.globalProperties.$serviceApi;
+const visible = defineModel<boolean>('visible');
+
+const { t } = useI18n();
+
+const showErrorMsg = ref(false);
+
+const dict = storageLocal.getItem('kLov');
+
+watch(
+  () => visible.value,
+  nv => {
+    if (nv) {
+      gridOptions.data = [];
+    }
+  }
+);
+
+const getColumns = () => {
+  const columns = props.columns.map(col => {
+    col.slots = { default: col.field };
+    col.title = col.field;
+    col.decimal = col.decimal;
+    return col;
+  });
+  const col = {
+    type: 'checkbox',
+    width: 40,
+    align: 'center',
+    fixed: 'left'
+  };
+  columns.unshift(col);
+  console.log('columns===', columns);
+  return columns;
+};
+
+const listQuery = ref({ pageSize: 200, currentPage: 1, total: 0 });
+
+const layouts: VxePagerPropTypes.Layouts = [
+  'Sizes',
+  'PrevJump',
+  'PrevPage',
+  'Number',
+  'NextPage',
+  'NextJump',
+  'FullJump',
+  'Total'
+];
+
+const height = window.innerHeight - 20;
+
+const xgrid = ref<VxeTableInstance>();
+// 导入的所有数据
+let dataList = [];
+
+const importConfig = {
+  mode: 'covering',
+  types: ['csv', 'xlsx'],
+  afterImportMethod: onImportMethod
+};
+
+const gridOptions = reactive<VxeGridProps>({
+  border: true,
+  height,
+  data: [],
+  importConfig,
+  showOverflow: true,
+  loading: false,
+  toolbarConfig: {
+    buttons: [
+      {
+        code: 'import_plus',
+        name: t('message.btn.upload'),
+        icon: 'ri-upload-2-line',
+        status: 'primary'
+      },
+      {
+        code: 'save_plus',
+        name: t('message.btn.save'),
+        icon: 'ri-save-3-line',
+        status: 'success'
+      },
+      {
+        code: 'del_plus',
+        name: t('message.btn.delete'),
+        icon: 'ri-delete-bin-line',
+        status: 'danger'
+      },
+      {
+        code: 'export_plus',
+        name: t('message.btn.downloadTemp'),
+        icon: 'ri-download-2-line',
+        status: 'warning'
+      }
+    ],
+    tools: [
+      {
+        code: 'question',
+        name: t('message.btn.FAQ'),
+        status: 'primary',
+        icon: 'vxe-icon-info-circle-fill'
+      },
+      {
+        code: 'replay',
+        name: t('message.btn.back'),
+        status: 'info',
+        icon: 'vxe-icon-undo'
+      }
+    ]
+  },
+  columns: getColumns()
+});
+
+const gridEvents: VxeGridListeners = {
+  toolbarButtonClick({ code }) {
+    // const $grid = xgrid.value;
+    switch (code) {
+      case 'import_plus': {
+        handleImport();
+        break;
+      }
+      case 'save_plus': {
+        handleSave();
+        break;
+      }
+      case 'del_plus': {
+        handleDelete();
+        break;
+      }
+      case 'export_plus': {
+        handleDownLoadFile();
+        break;
+      }
+    }
+  },
+  toolbarToolClick({ code }) {
+    // const $grid = xgrid.value;
+    switch (code) {
+      case 'replay': {
+        onClose();
+        break;
+      }
+      case 'question': {
+        showImportQuestion();
+        break;
+      }
+    }
+  }
+};
+
+const handleImport = () => {
+  dataList = [];
+  xgrid.value?.openImport();
+};
+// 导入后获取数据
+function onImportMethod(options: any) {
+  dataList = options.$table.getTableData().fullData;
+  // 标题会默认导入，删除第一行
+  // dataList.splice(0, 1);
+  const columns = getColumns().filter(f => !f.type && f.mapField !== props.options.errorField);
+  columns.forEach(col => {
+    const idx = dataList.findIndex(data => data[col.field!] === col.field);
+    idx !== -1 && dataList.splice(idx, 1);
+  });
+  props.columns.forEach(col => {
+    if (col.dateFormatter || col.valueType === 'number') {
+      dataList.forEach(data => {
+        if (col.dateFormatter) {
+          data[col.field!] = toDateString(data[col.field!], col.dateFormatter || 'yyyy-MM-dd HH:mm:ss');
+        } else {
+          data[col.field!] = accounting.unformat(data[col.field]).toFixed(col.decimal || 6);
+        }
+      });
+    }
+  });
+  listQuery.value.total = dataList.length;
+  getDataList();
+}
+
+const getDataList = () => {
+  const { currentPage, pageSize } = listQuery.value;
+  gridOptions.data = dataList.filter(
+    (data, idx) => idx < pageSize * currentPage && idx >= pageSize * (currentPage - 1)
+  );
+};
+// 切换页数
+const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
+  listQuery.value.currentPage = currentPage;
+  listQuery.value.pageSize = pageSize;
+  getDataList();
+};
+// 模板下载
+const handleDownLoadFile = () => {
+  const data: ITableColProps[] = [];
+  if (props.templateData.length) {
+    data.push(...props.templateData);
+  } else {
+    const obj: ITableColProps = {};
+    getColumns()
+      .filter(f => f.type !== 'checkbox')
+      .forEach(col => {
+        obj[col.field!] = '案例';
+      });
+    data.push(obj);
+  }
+  const opt: IRecord = {
+    filename: props.options.filename,
+    type: 'xlsx',
+    columns: getColumns().filter(f => f.mapField !== props.options.errorField && f.type !== 'checkbox'),
+    data
+  };
+  xgrid.value?.exportData(opt);
+};
+
+const handleSave = async () => {
+  if (!dataList.length) {
+    return warnMessage(t('message.importEmpty'));
+  }
+  const type = await VxeUI.modal.confirm(t('message.importRecord'));
+  if (type === 'confirm') {
+    gridOptions.loading = true;
+    const { url } = props;
+    formatterData('toSave');
+    serviceApi
+      .post(url, dataList)
+      .then((res: any) => {
+        if (res?.status === 'error' || res?.length) {
+          showErrorMsg.value = true;
+          setErrorMessage(res?.length ? res : res[props.options.errListField || props.sourceList]);
+          VxeUI.modal.message({
+            content: t('message.importFailed'),
+            status: 'error'
+          });
+        } else {
+          VxeUI.modal.message({
+            content: t('message.importSuccess'),
+            status: 'success'
+          });
+          onClose();
+        }
+      })
+      .finally(() => {
+        showErrorMsg.value = false;
+        gridOptions.loading = false;
+      });
+  }
+};
+
+/**
+ * @description:删除行
+ */
+const handleDelete = () => {
+  const checkboxRecords = xgrid.value?.getCheckboxRecords();
+  if (!checkboxRecords?.length) {
+    return VxeUI.modal.message({
+      content: t('message.selectedRecord'),
+      status: 'warning'
+    });
+  }
+  checkboxRecords.forEach(record => {
+    const idx = dataList.findIndex(data => data._X_ROW_KEY === record._X_ROW_KEY)!;
+    idx !== -1 && dataList.splice(idx, 1);
+  });
+  gridOptions.data = dataList;
+};
+
+const setErrorMessage = (array: ITableColProps[]) => {
+  listQuery.value.total = array.length;
+  dataList = array.map((item, idx) => {
+    item._X_ROW_KEY = idx;
+    return item;
+  });
+  formatterData('toShow');
+  getDataList();
+};
+const formatterData = (formatterType: string) => {
+  gridOptions.columns!.forEach((col: any) => {
+    if (formatterType === 'toSave') {
+      const commonParam = cookies.get('kCookies_param') ? JSON.parse(cookies.get('kCookies_param')!) : {};
+      dataList.forEach(data => {
+        data[col.mapField] = data[col.field];
+        Object.assign(data, commonParam, props.defaultParams);
+      });
+    } else {
+      dataList.forEach(data => {
+        data[col.field] = data[col.mapField];
+      });
+    }
+  });
+};
+
+const showImportQuestion = () => {
+  VxeUI.modal.alert(t('message.importTip'), t('message.udp.tip'));
+};
+
+const emit = defineEmits<{ (e: 'close'): void }>();
+
+const onClose = () => {
+  visible.value = false;
+  emit('close');
+};
+</script>
+
+<style lang="scss" scoped>
+.ut-input {
+  box-sizing: border-box;
+  display: inline-block;
+  width: 100%;
+  height: 28px;
+  padding: 0 15px;
+  font-size: 13px;
+  line-height: 28px;
+  color: #606266;
+  appearance: none;
+  outline: 0;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  &:hover {
+    border-color: #c0c4cc;
+  }
+
+  &:focus {
+    outline: 0;
+    border-color: #409eff;
+  }
+
+  &:disabled {
+    outline: none;
+    background-color: #f5f7fa;
+  }
+}
+</style>

package/src/main.ts

@@ -1,111 +1,111 @@
-/*
- * @Author: levi7754 levi7754@163.com
- * @Date: 2025-07-25 13:38:20
- * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-12-26 14:35:03
- * @FilePath: \udp-front\packages\udp-core\src\main.ts
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
-import { createApp, type Directive } from 'vue';
-import App from './App.vue';
-// import router from './router';
-import { setViews } from './router';
-import { setupStore } from './store';
-import { setConfig, setSystemEnv } from './config';
-import { useI18n, transformI18n } from '../src/plugins/i18n';
-import { setTableConfig } from '../src/plugins/vxe-table';
-import { injectResponsiveStorage } from './utils/storage';
-import hasAuthority from './utils/authority';
-import { getServiceApi, getBaseURL, setRouter, setBaseUrl } from './api';
-
-import 'nprogress/nprogress.css';
-// 一定要在main.ts中导入tailwind.css，防止vite每次hmr都会请求src/style/index.scss整体css文件导致热更新慢的问题
-import './style/tailwind.css';
-// // 引入重置样式
-import './style/reset.scss';
-// 导入公共样式
-import './style/index.scss';
-
-// import SuTable from './components/SuTable/SuTable.vue';
-
-import {
-  // utLov2,
-  //   UtDivider,
-  // UtModalForm2
-  FormUpload2,
-  // UtForm2,
-  UtGrid2
-  // UtContent2
-  // UtStampBadge2
-  // UtModalGrid2
-  // UtUpload2
-  //   UtIconSelect,
-  //   UtCalendar
-  // uAttachment
-} from './components/udp';
-
-const app = createApp(App);
-
-// 全局注册`@iconify/vue`图标库
-import { IconifyIconOffline, FontIcon } from './components/ReIcon';
-// 全局注册`vue-tippy`
-import 'tippy.js/dist/tippy.css';
-import 'tippy.js/animations/perspective.css';
-import VueTippy from 'vue-tippy';
-
-app.use(VueTippy, {
-  defaultProps: { animation: 'perspective' }
-});
-
-// 自定义指令
-import * as directives from './directives';
-
-const setGlobal = app => {
-  app.config.globalProperties.$hasAuthority = hasAuthority;
-  app.config.globalProperties.$serviceApi = getServiceApi();
-  app.config.globalProperties.$url = getBaseURL();
-  window.$i18n = transformI18n;
-};
-
-const setGlobalDirective = app => {
-  Object.keys(directives).forEach(key => {
-    app.directive(key, (directives as { [key: string]: Directive })[key]);
-  });
-};
-
-const init = ({ router, config, lang, views, env, tableConfig }) => {
-  setViews(views, router);
-  app.use(router);
-  setRouter(router);
-  setConfig(app, config);
-  setSystemEnv(env);
-  setTableConfig(tableConfig);
-  return new Promise(resolve => {
-    useI18n(app, lang);
-    app.component('IconifyIconOffline', IconifyIconOffline);
-    app.component('FontIcon', FontIcon);
-    // app.component('uAttachment', uAttachment).component('UGrid', UGrid);
-    //   .component('UtDivider', UtDivider)
-    // app.component('UtModalForm2', UtModalForm2);
-    app.component('UtGrid2', UtGrid2);
-    // app.component('UtForm2', UtForm2);
-    // app.component('UtModalGrid2', UtModalGrid2);
-    //   .component('UtIconSelect', UtIconSelect)
-    app.component('FormUpload2', FormUpload2);
-    //   .component('UtCalendar', UtCalendar)
-    // app.component('UtContent2', UtContent2);
-    // app.component('UtStampBadge2', UtStampBadge2);
-    //   .component('UtModalGrid', UtModalGrid);
-    // app.use(VueViewer, { defaultOptions: { zIndex: 9999 } });
-    setGlobal(app);
-    setBaseUrl(getBaseURL());
-    setGlobalDirective(app);
-    // 全局组件
-    setupStore(app);
-    injectResponsiveStorage(app, config);
-    const result = { app, router };
-    resolve(result);
-  });
-};
-
-export default init;
+/*
+ * @Author: levi7754 levi7754@163.com
+ * @Date: 2025-07-25 13:38:20
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2026-03-30 13:50:20
+ * @FilePath: \udp-front\packages\udp-core\src\main.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { createApp, type Directive } from 'vue';
+import App from './App.vue';
+// import router from './router';
+import { setViews } from './router';
+import { setupStore } from './store';
+import { setConfig, getEnv, setSystemEnv } from './config';
+import { useI18n, transformI18n } from '../src/plugins/i18n';
+import { setTableConfig } from '../src/plugins/vxe-table';
+import { injectResponsiveStorage } from './utils/storage';
+import hasAuthority from './utils/authority';
+import { getServiceApi, getBaseURL, setRouter, setBaseUrl, getDebugBaseURL } from './api';
+
+import 'nprogress/nprogress.css';
+// 一定要在main.ts中导入tailwind.css，防止vite每次hmr都会请求src/style/index.scss整体css文件导致热更新慢的问题
+import './style/tailwind.css';
+// // 引入重置样式
+import './style/reset.scss';
+// 导入公共样式
+import './style/index.scss';
+
+import {
+  // utLov2,
+  //   UtDivider,
+  // UtModalForm2
+  FormUpload2,
+  // UtForm2,
+  UtGrid2,
+  UtContent2,
+  UtStampBadge2,
+  // UtModalGrid2
+  UtUpload2
+  //   UtIconSelect,
+  //   UtCalendar
+  // uAttachment
+} from './components/udp';
+
+const app = createApp(App);
+
+// 全局注册`@iconify/vue`图标库
+import { IconifyIconOffline, FontIcon } from './components/ReIcon';
+// 全局注册`vue-tippy`
+import 'tippy.js/dist/tippy.css';
+import 'tippy.js/animations/perspective.css';
+import VueTippy from 'vue-tippy';
+
+app.use(VueTippy, {
+  defaultProps: { animation: 'perspective' }
+});
+
+// 自定义指令
+import * as directives from './directives';
+
+const setGlobal = app => {
+  app.config.globalProperties.$hasAuthority = hasAuthority;
+  app.config.globalProperties.$debugModel = getEnv().VITE_DEBUG === 'true';
+  app.config.globalProperties.$serviceApi = getServiceApi();
+  app.config.globalProperties.$debuggerApi = getDebugBaseURL();
+  app.config.globalProperties.$url = getBaseURL();
+  window.$i18n = transformI18n;
+};
+
+const setGlobalDirective = app => {
+  Object.keys(directives).forEach(key => {
+    app.directive(key, (directives as { [key: string]: Directive })[key]);
+  });
+};
+
+const init = ({ router, config, lang, views, env, tableConfig }) => {
+  setViews(views, router);
+  app.use(router);
+  setRouter(router);
+  setConfig(app, config);
+  setSystemEnv(env);
+  setTableConfig(tableConfig);
+  return new Promise(resolve => {
+    useI18n(app, lang);
+    app.component('IconifyIconOffline', IconifyIconOffline);
+    app.component('FontIcon', FontIcon);
+    // app.component('uAttachment', uAttachment).component('UGrid', UGrid);
+    //   .component('UtDivider', UtDivider)
+    // app.component('UtModalForm2', UtModalForm2);
+    app.component('UtGrid2', UtGrid2);
+    app.component('UtUpload2', UtUpload2);
+    // app.component('UtModalGrid2', UtModalGrid2);
+    //   .component('UtIconSelect', UtIconSelect)
+    app.component('FormUpload2', FormUpload2);
+    //   .component('UtCalendar', UtCalendar)
+    app.component('UtContent2', UtContent2);
+    app.component('UtStampBadge2', UtStampBadge2);
+    //   .component('UtModalGrid', UtModalGrid);
+    // app.use(VueViewer, { defaultOptions: { zIndex: 9999 } });
+    setGlobal(app);
+    setBaseUrl(getBaseURL());
+    setGlobalDirective(app);
+    // 全局组件
+    setupStore(app);
+    injectResponsiveStorage(app, config);
+    const result = { app, router };
+    resolve(result);
+  });
+};
+
+export default init;