syntec3-0-ui-components-test 1.0.0

package/src/scss/base/dialog.scss

@@ -0,0 +1,45 @@
+.el-overlay-dialog {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.el-dialog {
+  padding: 0;
+  border-radius: 10px!important;
+  margin: 0 !important;
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 5rem);
+}
+.el-dialog__header {
+  height: 3rem;
+  background-color: #4481b8 !important;
+  color: white !important;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px 10px 0 0 !important;
+  font-size: 18px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.el-dialog__title {
+  color: white !important;
+}
+.el-dialog__body {
+  padding: 1rem;
+  overflow: hidden;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+}
+.el-dialog__footer {
+  padding: 0 0 20px 0;
+  flex-shrink: 0;
+}
+.el-dialog__close {
+  color: white !important;
+}

package/src/scss/base/index.scss

@@ -0,0 +1,3 @@
+@use './table.scss';
+@use './commom.scss';
+@use './dialog.scss';

package/src/scss/base/table.scss

@@ -0,0 +1,28 @@
+.table-box{
+  border: 1px solid #ebeef5;
+  border-bottom: none;
+}
+.no-padding {
+  padding: 0!important;
+}
+.commonTable {
+  width: 100%;
+  border-spacing: 0;
+}
+.commonTable {
+  width: 100%;
+  margin: 1rem 0;
+}
+:deep(.tableHeader), :deep(.el-table th.el-table__cell.tableHeaderCell) {
+  background-color: #edf3f8;
+  color: #303133;
+}
+
+
+:deep(.sub-tableHeader),:deep(.el-table th.el-table__cell.sub-tableHeaderCell) {
+  background-color: #f1f2f4;
+  color: rgba(0, 0, 0, .6);
+}
+:deep( .el-table__expanded-cell) {
+  padding: 0;
+}

package/src/store/index.js

@@ -0,0 +1,25 @@
+// store/index.js
+import { createStore } from 'vuex';
+import langStore from './module/langStore';
+
+const store = createStore({
+  state() {
+    return {
+      user: {
+        synFactoryEmpID: '',
+      },
+    };
+  },
+  getters: {
+    getEmpID(state) {
+      return state.synFactoryEmpID || localStorage.getItem('synFactoryEmpID');
+    },
+  },
+  mutations: {},
+  actions: {},
+  modules: {
+    langStore,
+  },
+});
+
+export default store;

package/src/store/module/langStore.js

@@ -0,0 +1,116 @@
+import apiFunction from '@/scriptFiles/checkApiErrorMechanism';
+import i18n from '@/utils/i18n';
+import errorCodeTranslate from '@/i18n/lang/errorCodeTranslate.mjs';
+import zhCnFiles from '@/i18n/lang/zh-cn.json';
+import enUsFiles from '@/i18n/lang/en-us.json';
+import zhTwFiles from '@/i18n/lang/zh-tw.json';
+
+const moduleCode = 'S3_0UC_app';
+export default {
+  state: {
+    langPackage: {},
+  },
+  getters: {
+    getLangPackage(state) {
+      return state.langPackage;
+    },
+  },
+  mutations: {
+    SET_LANG_PACKAGE(state, val) {
+      state.langPackage = val;
+    },
+  },
+  actions: {
+    async setLangInfo({ commit }) {
+      // 获取系统语系
+      let lang = localStorage.getItem('lang') || 'zh-cn';
+      // 是否为默认语系
+      const isDefaultLang = lang === 'zh-cn' || lang === 'zh-tw' || lang === 'en';
+      // 获取errorcode语系
+      const errorCodeLang = isDefaultLang ? lang : 'en';
+      // 获取本地系统语系
+      let localFiles = {};
+      if (lang === 'zh-cn') {
+        localFiles = { ...zhCnFiles };
+      }
+      if (lang === 'zh-tw') {
+        localFiles = { ...zhTwFiles };
+      }
+      if (lang === 'en' || !isDefaultLang) {
+        localFiles = { ...enUsFiles };
+      }
+      // 获取element语系
+      let elPackage = {};
+      const languageModules = import.meta.glob('/node_modules/element-plus/es/locale/lang/*.mjs');
+      const langModule = await languageModules[`/node_modules/element-plus/es/locale/lang/${lang}.mjs`]();
+      elPackage = langModule.default;
+      // 整合语系包
+      let langPackage = {
+        ...localFiles,
+        ...errorCodeTranslate[errorCodeLang],
+        el: elPackage,
+      };
+      let moduleLangFiles = {};
+      // 获取系统语系配置
+      if (localStorage.getItem('synFactoryEmpID')) {
+        if (isDefaultLang) {
+          // 请求默认语系
+          await apiFunction
+            .getModuleLanguage({
+              schemaCode: moduleCode,
+              languageType: lang,
+            })
+            .then((res) => {
+              if (res.data?.code === 0 && res.data.content.field?.length) {
+                res.data.content.field.forEach((element) => {
+                  moduleLangFiles[element.fieldKey] = element.fieldValue;
+                });
+              }
+            })
+            .catch();
+        } else {
+          // 请求自定义语系
+          const promiseList = [];
+          // 获取语系配置
+          promiseList.push(
+            apiFunction.getModuleLanguage({
+              schemaCode: moduleCode,
+              languageType: lang,
+            }),
+          );
+          // 获取英语语系配置
+          promiseList.push(
+            apiFunction.getModuleLanguage({
+              schemaCode: moduleCode,
+              languageType: 'en',
+            }),
+          );
+          const customizeModuleLangFiles = {};
+          await Promise.all(promiseList)
+            .then((results) => {
+              results.forEach((res, index) => {
+                if (index === 0 && res.data?.code === 0 && res.data.content.field?.length) {
+                  res.data.content.field.forEach((element) => {
+                    customizeModuleLangFiles[element.fieldKey] = element.fieldValue;
+                  });
+                }
+                if (index === 1 && res.data?.code === 0 && res.data.content.field?.length) {
+                  res.data.content.field.forEach((element) => {
+                    moduleLangFiles[element.fieldKey] =
+                      customizeModuleLangFiles[element.fieldKey] || element.fieldValue;
+                  });
+                }
+              });
+            })
+            .catch();
+        }
+      }
+      // 整合全部语系包
+      langPackage = { ...langPackage, ...moduleLangFiles };
+      // 设置语系
+      i18n.global.setLocaleMessage(lang, langPackage);
+      commit('SET_LANG_PACKAGE', langPackage);
+      i18n.global.locale = lang;
+    },
+  },
+};

package/src/style.css

@@ -0,0 +1,52 @@
+html {
+  font-size: 14px !important;
+}
+body {
+  margin: 0;
+  background-color: #ffffff;
+}
+
+#S3_0UC_app {
+  margin: 0;
+  width: 100%;
+  height: calc(100vh - 5rem);
+  position: relative;
+}
+.tableHeaderCell {
+  background-color: #EDF3F8 !important;
+}
+
+/**修改全局的滚动条*/
+/**滚动条的宽度*/
+::-webkit-scrollbar {
+  width: 8px;
+  height: 1px;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #eaecf1;
+  border-radius: 3px;
+}
+/*表格*/
+.el-table__body-wrapper::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background-color: #a1a3a9;
+  border-radius: 3px;
+}
+/* 提示弹窗 */
+.tip-confirm-dialog {
+  .el-message-box__content {
+    .el-message-box__container {
+      .el-message-box__message {
+        p {
+          word-break: break-all;
+        }
+      }
+    }
+  }
+}
+.tableHeaderCell {
+  background-color: #EDF3F8 !important;
+}

package/src/utils/excel.js

@@ -0,0 +1,86 @@
+import { utils } from 'xlsx';
+import * as XLSX from 'xlsx';
+
+const EXCEL = {
+  // 輸出excel表單
+  exportFromArray(option) {
+    const config = { name: 'demo', suffix: 'xml', ...option };
+    const {
+      title, body, name, suffix, wscols,
+    } = config;
+    const array = [...title, ...body];
+    const workBook = utils.book_new();
+    const workSheet = utils.aoa_to_sheet(array, { raw: true });
+    // 欄位寬度設定
+    workSheet['!cols'] = wscols;
+    const fileName = `${name}.${suffix}`;
+    utils.book_append_sheet(workBook, workSheet, name);
+    XLSX.writeFile(workBook, fileName, { bookType: suffix, type: 'buffer', writeFile: true });
+  },
+  // 輸出批量excel表單
+  async exportBatchFromArray(arr, fileName) {
+    const workBook = utils.book_new();
+    for (let i = 0; i < arr.length; i += 1) {
+      const config = { ...arr[i] };
+      const {
+        title, body, name, wscols, wsmerges, wsrow,
+      } = config;
+      const array = [...title, ...body];
+      const workSheet = utils.aoa_to_sheet(array, { raw: true });
+      // 欄位寬度設定
+      workSheet['!cols'] = wscols;
+      workSheet['!rows'] = wsrow;
+      workSheet['!merges'] = wsmerges;
+      // eslint-disable-next-line no-await-in-loop
+      await utils.book_append_sheet(workBook, workSheet, name);
+    }
+    // eslint-disable-next-line max-len
+    XLSX.writeFile(workBook, `${fileName}.xlsx`, { bookType: 'xlsx', type: 'buffer', writeFile: true });
+  },
+  // 解析表格數據，返回表格内容，目前不支援導入有單元格合併的表格，data.title為表头、data.body為表格數據
+  async importFromLocal(file) {
+    const workBook = await this.readerWorkBookFromLocal(file);
+    const workSheet = workBook.Sheets[workBook.SheetNames[0]];
+    const content = utils.sheet_to_json(workSheet, { defval: '' });
+    const contentSort = utils.sheet_to_json(workSheet, { header: 1 });
+    if (content.length === 0) {
+      return content;
+    }
+    const data = {};
+    data.title = Object.keys(content[0]);
+    data.body = content;
+    data.titleSort = [...contentSort[0]]; // 记录Excel中的顺序，不会因为数字而导致顺序错乱
+    return data;
+  },
+  // 解析表格數據(第二张Sheet表数据)，返回表格内容，目前不支援導入有單元格合併的表格，data.title為表头、data.body為表格數據
+  async importInstructionsFromLocal(file) {
+    const workBook = await this.readerWorkBookFromLocal(file);
+    const workSheet = workBook.Sheets[workBook.SheetNames[1]];
+    const content = utils.sheet_to_json(workSheet, { defval: '' });
+    if (content.length === 0) {
+      return content;
+    }
+    const data = {};
+    data.title = Object.keys(content[0]);
+    data.body = content;
+    return data;
+  },
+  // 讀取文件的方法，file為文件Data
+  readerWorkBookFromLocal(file) {
+    const reader = new FileReader();
+    reader.readAsBinaryString(file);
+    return new Promise(((resolve, reject) => {
+      reader.onload = function (e) {
+        const fileData = e.target.result;
+        if (reader.readyState === 2) {
+          const workBook = XLSX.read(fileData, { type: 'binary' });
+          resolve(workBook);
+        } else {
+          reject(new Error('讀取文件失敗'));
+        }
+      };
+    }));
+  },
+};
+
+export default EXCEL;

package/src/utils/formula.js

@@ -0,0 +1,69 @@
+import { create, all } from 'mathjs';
+
+const SUM = (...numbers) => {
+    return numbers.reduce((acc, curr) => acc + curr, 0);
+};
+
+const  MAX = (...numbers) => {
+    return Math.max(...numbers);
+};
+
+const  MIN = (...numbers) => {
+    return Math.min(...numbers);
+};
+
+const  AVG = (...numbers) => {
+    const sum = numbers.reduce((acc, curr) => acc + curr, 0);
+    return sum / numbers.length;
+};
+
+export const math = create(all);
+math.import({
+  SUM,
+  MAX,
+  MIN,
+  AVG,
+}, { override: true });
+
+/**
+ * @param {number} decimalPlaces - 需要保留几位小数 (0-5)
+ * @param {number} value - 需要处理的数字
+ * @param {number} type - 0 四舍五入    1  去尾法    2 收尾法
+ * @param {number} isThousandSeparator - 是否显示千分位
+ * @returns {number} 处理后的数值
+ */
+export const formatDecimal = (decimalPlaces, value, type) => {
+    if (typeof value !== 'number' || isNaN(value)) {
+        throw new Error('value必须是有效数字');
+    }
+    let processedValue = null;
+    const multiplier = Math.pow(10, decimalPlaces);
+    switch (type){
+        case 0:
+            processedValue = Math.round(value * multiplier) / multiplier;
+            break;
+        case 1:
+            processedValue =  Math.floor(value * multiplier) / multiplier;
+            break;
+        case 2:
+            processedValue =  Math.ceil(value * multiplier) / multiplier;
+            break;
+        default:
+            processedValue = value;
+    }
+        // 处理浮点数精度问题
+    processedValue = parseFloat(processedValue.toFixed(10));
+    
+    // 转换为字符串并确保小数位数
+    let resultStr;
+    
+    if (decimalPlaces > 0) {
+        // 使用toFixed确保小数位数
+        resultStr = processedValue.toFixed(decimalPlaces);
+    } else {
+        // 小数位数为0时，直接取整
+        resultStr = Math.round(processedValue).toString();
+    }
+    return resultStr;
+    
+};

package/src/utils/https.js

@@ -0,0 +1,13 @@
+export default{
+  baseURL() {
+    if (process.env.NODE_ENV === 'development') {
+      return 'http://18.18.1.9/PMS/API/V1/';
+    } else if (process.env.NODE_ENV === 'production') {
+      // 生产环境
+      const { protocol } = window.location;
+      const { hostname } = window.location;
+      const { port } = window.location;
+      return `${protocol}//${hostname}:${port}/PMS/API/V1/`;
+    }
+  },
+};

package/src/utils/i18n.js

@@ -0,0 +1,42 @@
+import { createI18n } from 'vue-i18n';
+
+// 导入 element-plus 的国际化文件
+import elementZhCn from 'element-plus/es/locale/lang/zh-cn';
+import elementEn from 'element-plus/es/locale/lang/en';
+import elementZhTw from 'element-plus/es/locale/lang/zh-tw';
+
+import zhCnFiles from '../i18n/lang/zh-cn.json';
+import enUsFiles from '../i18n/lang/en-us.json';
+import zhTwFiles from '../i18n/lang/zh-tw.json';
+import errorCodeTranslate from '../i18n/lang/errorCodeTranslate.mjs';
+
+const messages = {
+  'zh-cn': {
+    ...zhCnFiles,
+    ...errorCodeTranslate['zh-cn'],
+    el: elementZhCn,
+  },
+  'zh-tw': {
+    ...zhTwFiles,
+    ...errorCodeTranslate['zh-tw'],
+    el: elementZhTw,
+  },
+  'en': {
+    ...enUsFiles,
+    ...errorCodeTranslate['en'],
+    el: elementEn,
+  },
+};
+
+const i18n = createI18n({
+  locale: localStorage.getItem('lang') || 'zh-cn',
+  fallbackLocale: 'zh-cn',
+  silentTranslationWarn: true,
+  missingWarn: false,
+  silentFallbackWarn: true,
+  fallbackWarn: false,
+  messages,
+});
+
+// 创建 i18n 实例并导出
+export default i18n;

package/src/utils/shiftSelect.js

@@ -0,0 +1,164 @@
+// directives/shiftSelect.js
+export const vShiftSelect = {
+  mounted(el, binding) {
+    let lastSelectedIndex = -1;
+    let isShiftPressed = false;
+    let observer = null;
+    const arg = binding.arg;
+
+     // 监听表格 body 变化
+    const tableBody = el.querySelector('tbody');
+    if (tableBody) {
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === 'childList') {
+            // 行发生变化，可能是翻页           
+            lastSelectedIndex = -1;
+          }
+        });
+      });
+      
+      observer.observe(tableBody, {
+        childList: true,
+        subtree: true,
+      });
+    }
+
+    // 获取表格实例
+    const getTableInstance = () => {
+      if (binding.instance) {
+        // 从绑定值获取
+        return binding.instance.$refs[arg];
+      } else {
+        return null;
+      }
+      // 通过 DOM 查找最近的 Table 组件
+      // const tableEl = el.closest('.el-table');
+      // if (tableEl && tableEl.__vueParentComponent) {
+      //   return tableEl.__vueParentComponent.proxy;
+      // }   
+      // return null;
+    };
+    
+    // 获取表格数据
+    const getTableData = () => {
+      const table = getTableInstance();
+      return table.data;
+    };
+    
+    // 获取所有行 DOM 元素
+    const getTableRows = () => {
+      return Array.from(el.querySelectorAll('tbody .el-table__row'));
+    };
+    
+    // 根据行元素获取数据索引
+    const getRowIndex = (rowElement) => {
+      const rows = getTableRows();
+      const rowIndex = rows.indexOf(rowElement);
+      // 如果找不到，尝试通过 data-index 属性
+      if (rowIndex === -1 && rowElement.dataset.index) {
+        return parseInt(rowElement.dataset.index);
+      }
+      
+      return rowIndex;
+    };
+    
+    // 处理复选框点击
+    const handleCheckboxClick = (e) => {
+      // 阻止事件冒泡，防止触发多次
+      e.stopPropagation();
+      el?.focus();
+      const checked = e.target.checked;
+      if( checked === undefined )return;
+      const checkbox = e.target.closest('.el-checkbox');
+     
+      if (!checkbox) return;
+      const rowElement = checkbox.closest('.el-table__row');
+    
+      if (!rowElement) return;
+      const table = getTableInstance();
+     
+      if (!table) return;
+      const currentIndex = getRowIndex(rowElement);
+     
+      if (isShiftPressed && lastSelectedIndex !== -1 && currentIndex !== -1) {
+        // Shift 多选
+        e.preventDefault();
+        const tableData = getTableData();
+        const start = Math.min(lastSelectedIndex, currentIndex);
+        const end = Math.max(lastSelectedIndex, currentIndex);
+        // 选择范围内的所有行
+        for (let i = start; i <= end; i++) {
+          const rowData = tableData[i];
+          if (rowData) {
+            // 使用 setTimeout 避免渲染冲突
+            setTimeout(() => {
+              table.toggleRowSelection(rowData, checked);
+            }, 0);
+          }
+        }
+        // 更新最后选择的索引
+        lastSelectedIndex = currentIndex;
+      } else {
+        lastSelectedIndex = currentIndex;
+      }
+    };
+    
+    // 处理键盘事件
+    const handleKeyDown = (e) => {
+      if (e.key === 'Shift') {
+        isShiftPressed = true;
+      }
+    };
+    
+    const handleKeyUp = (e) => {
+      if (e.key === 'Shift') {
+        isShiftPressed = false;
+      }
+    };
+    
+    // 添加全局键盘事件监听
+    window.addEventListener('keydown', handleKeyDown, true);
+    window.addEventListener('keyup', handleKeyUp, true);
+
+    // 备用的事件委托方法
+    const handleTableClick = (e) => {
+      el.focus({ preventScroll: true });
+      const checkbox = e.target.closest('.el-checkbox');
+      const isSelectAllCheckbox = e.target.closest('.el-table__header .el-checkbox');
+      if( isSelectAllCheckbox ){
+        lastSelectedIndex = -1;
+        return;
+      }
+      if (checkbox) {
+        // 使用 setTimeout 确保在 Element Plus 的默认行为之前执行
+        setTimeout(() => handleCheckboxClick(e), 0);
+      }
+    };
+    // 使用捕获阶段
+    el.addEventListener('click', handleTableClick, true);
+    // 清理函数
+    el._shiftSelectCleanup = () => {
+      observer && observer.disconnect();
+      window.removeEventListener('keydown', handleKeyDown, true);
+      window.removeEventListener('keyup', handleKeyUp, true);
+      el.removeEventListener('click', handleTableClick, true);
+    };
+    // 设置焦点
+    setTimeout(() => {
+      if (document.activeElement !== el) {
+        el.setAttribute('tabindex', '-1');
+        el.focus();
+        // 移除焦点时的轮廓
+        el.style.outline = 'none';
+      }
+    }, 500);
+    
+  }, 
+  unmounted(el) {
+    if (el._shiftSelectCleanup) {
+      el._shiftSelectCleanup();
+      delete el._shiftSelectCleanup;
+    }
+  },
+};