ci-plus 1.7.4 → 1.7.6

package/README.md

@@ -1,6 +1,10 @@
 ## 历史更新
 
 ```js
+1.7.6
+  1、调整语言文件中翻译对象
+1.7.5
+  1、表头筛选组件新增语言切换功能
 1.7.0
   1、更新ajaxBox.ts函数的downFileFetchV3中文件名称匹配逻辑
 1.6.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ci-plus",
-  "version": "1.7.4",
+  "version": "1.7.6",
   "description": "ci组件库",
   "main": "./index.ts",
   "scripts": {
@@ -19,7 +19,9 @@
     "email": "10000@qq.com"
   },
   "license": "ISC",
-  "dependencies": {},
+  "dependencies": {
+    "vue-i18n": "^11.1.3"
+  },
   "devDependencies": {},
   "peerDependencies": {},
   "peerDependenciesMeta": {}

package/src/sortableTable/headerInput.vue

@@ -62,7 +62,7 @@
             v-if="props.type !== 'select' && props.showConnector"
             v-model="operator"
             class="m-2 input-select"
-            placeholder="请选择查询类型"
+            :placeholder="t('public.placeholders')"
             size="default"
           >
             <!-- clearable -->
@@ -136,9 +136,9 @@
               v-model="value"
               type="daterange"
               unlink-panels
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
+              :range-separator="t('sortableTable.datepicker.rangeseparator')"
+              :start-placeholder="t('sortableTable.datepicker.startplaceholder')"
+              :end-placeholder="t('sortableTable.datepicker.endplaceholder')"
               :shortcuts="shortcuts"
               size="default"
               :style="{ width: '100%' }"
@@ -169,8 +169,16 @@ import SvgIcon from '../svgIcon/svgicon.vue'
 import { computed, ref, watch, PropType, onMounted } from 'vue'
 import lodash, { debounce } from 'lodash-es'
 import headerPopover from './utils/headerPopover.vue'
-import { TooltipTriggerType,ElSelect,ElOption,ElInput,ElSelectV2,ElPagination,ElDatePicker } from 'element-plus'
-
+import {
+  TooltipTriggerType,
+  ElSelect,
+  ElOption,
+  ElInput,
+  ElSelectV2,
+  ElPagination,
+  ElDatePicker
+} from 'element-plus'
+import t from '../utils/lang/index'
 // 定义 props 的类型
 interface SelectConfig {
   options: any[]
@@ -267,7 +275,7 @@ const props = defineProps({
   selectConfig: {
     type: Object as PropType<SelectConfig>,
     default: () => ({
-      placeholder: '请选择', // 输入框的placeholder提示
+      placeholder: t('public.placeholders'), //'请选择', // 输入框的placeholder提示
       selectSize: 'default', // 输入框的大小
       selectDisabled: false, // 输入框的disabled属性
       clearable: true, // 是否有清除按钮
@@ -280,8 +288,8 @@ const props = defineProps({
       popperClass: '', // popper的class类名
       selectStyle: '', // 输入框的style样式
       selectAll: false, // 是否显示全选按钮
-      selectAllLabel: '全选', // 全选按钮的文本
-      selectAllPlaceholder: '请选择', // 全选按钮的placeholder提示
+      selectAllLabel: t('public.selectAll'), //'全选', // 全选按钮的文本
+      selectAllPlaceholder: t('public.placeholders'), // '请选择', // 全选按钮的placeholder提示
       options: [], //select下拉选项时的 列表数据
       optionValue: 'value', // 选项的默认value值
       optionLabel: 'label', // 选项的默认label值
@@ -312,7 +320,7 @@ const props = defineProps({
 // 根据传参重置下拉列配置参数的默认值
 const _selectConfig = computed((): SelectConfig => {
   let obj = {
-    placeholder: '请选择', // 输入框的placeholder提示
+    placeholder: t('public.placeholders'), // '请选择', // 输入框的placeholder提示
     selectSize: 'default', // 输入框的大小
     selectDisabled: false, // 输入框的disabled属性
     clearable: true, // 是否有清除按钮
@@ -325,8 +333,8 @@ const _selectConfig = computed((): SelectConfig => {
     popperClass: '', // popper的class类名
     selectStyle: '', // 输入框的style样式
     selectAll: false, // 是否显示全选按钮
-    selectAllLabel: '全选', // 全选按钮的文本
-    selectAllPlaceholder: '请选择', // 全选按钮的placeholder提示
+    selectAllLabel: t('public.selectAll'), //'全选', // 全选按钮的文本
+    selectAllPlaceholder: t('public.placeholders'), //'请选择', // 全选按钮的placeholder提示
     options: [], //select下拉选项时的 列表数据
     optionValue: 'value', // 选项的默认value值
     optionLabel: 'label', // 选项的默认label值
@@ -361,36 +369,36 @@ const operatorOptions = ref<
 >([
   {
     value: 'like',
-    label: '包含'
+    label: t('sortableTable.operatorOptions.like') //'包含'
   },
   {
     value: '=',
-    label: '等于'
+    label: t('sortableTable.operatorOptions.equals') //'等于'
   },
   {
     value: '>',
-    label: '大于'
+    label: t('sortableTable.operatorOptions.greaterThan') //'大于'
   },
   {
     value: '>=',
-    label: '大于等于'
+    label: t('sortableTable.operatorOptions.greaterThanOrEqualTo') //'大于等于'
   },
   {
     value: '<',
-    label: '小于'
+    label: t('sortableTable.operatorOptions.lessThan') //'小于'
   },
   {
     value: '<=',
-    label: '小于等于'
+    label: t('sortableTable.operatorOptions.lessThanOrEqualTo') //'小于等于'
   },
   {
     value: '<>',
-    label: '不等于'
+    label: t('sortableTable.operatorOptions.notEqualTo') //'不等于'
   },
   {
     // 数组的第8个元素必须是介于,后面再日期的时候会禁用第8个
     value: 'between',
-    label: '介于'
+    label: t('sortableTable.operatorOptions.between') //'介于'
   }
 ])
 
@@ -450,7 +458,7 @@ if (props.type === 'date') {
   // 判断是否是日期范围
   shortcuts.value = [
     {
-      text: '前一周',
+      text: t('sortableTable.datepicker.aweekAgo'), //'前一周',
       value: () => {
         const end = new Date()
         const start = new Date()
@@ -459,7 +467,7 @@ if (props.type === 'date') {
       }
     },
     {
-      text: '前一月',
+      text: t('sortableTable.datepicker.lastMonth'), //'前一月',
       value: () => {
         const end = new Date()
         const start = new Date()
@@ -468,7 +476,7 @@ if (props.type === 'date') {
       }
     },
     {
-      text: '最近3个月',
+      text: t('sortableTable.datepicker.last3Month'), //'最近3个月',
       value: () => {
         const end = new Date()
         const start = new Date()
@@ -479,11 +487,11 @@ if (props.type === 'date') {
   ]
   shortcutsDay.value = [
     {
-      text: '今天',
+      text: t('sortableTable.datepicker.Today'), //'今天',
       value: new Date()
     },
     {
-      text: '昨天',
+      text: t('sortableTable.datepicker.Yesterday'), //'昨天',
       value: () => {
         const date = new Date()
         date.setTime(date.getTime() - 3600 * 1000 * 24)
@@ -491,7 +499,7 @@ if (props.type === 'date') {
       }
     },
     {
-      text: '一周前',
+      text: t('sortableTable.datepicker.aweekAgo'), //'一周前',
       value: () => {
         const date = new Date()
         date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)

package/src/sortableTable/utils/headerPopover.vue

@@ -12,16 +12,18 @@
     <template #reference>
       <slot name="reference" :open="open" :close="close" :toggle="toggle" />
     </template>
-    <div style="display: flex; align-items: center; justify-content: center" >
+    <div style="display: flex; align-items: center; justify-content: center">
       <div style="flex-grow: 1">
         <slot :closeF="close" />
       </div>
       <div style="margin-left: 5px">
         <div>
-          <el-button type="primary" size="small" @click="submit"> 确认 </el-button>
+          <el-button type="primary" size="small" @click="submit">
+            {{ t('public.confirm') }}
+          </el-button>
         </div>
         <div style="margin-top: 5px">
-          <el-button size="small" @click="emits('clear')"> 清空 </el-button>
+          <el-button size="small" @click="emits('clear')"> {{ t('public.clear') }} </el-button>
         </div>
         <!-- <div style="margin-top: 5px">
           <el-button
@@ -39,7 +41,8 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { ElPopover,ElButton, TooltipTriggerType } from 'element-plus'
+import { ElPopover, ElButton, TooltipTriggerType } from 'element-plus'
+import t from '../../utils/lang/index'
 const popoverRef = ref<InstanceType<typeof ElPopover>>()
 const props = defineProps<{
   popperStyle: any // el-popover的自定义样式

package/src/utils/ajaxBox.ts

@@ -1,10 +1,10 @@
 /**
-* @module downFile
-* @author : 卖女孩的小火柴
-* !description : 下载文件方法
-* @version : 1.0.2
-* @since : 创建时间 2024-07-09 10:46:11
-*/
+ * @module downFile
+ * @author : 卖女孩的小火柴
+ * !description : 下载文件方法
+ * @version : 1.0.2
+ * @since : 创建时间 2024-07-09 10:46:11
+ */
 import { ElMessage } from 'element-plus'
 
 /**
@@ -15,10 +15,15 @@ import { ElMessage } from 'element-plus'
  * 如果blob对象是JSON格式，则尝试解析为JavaScript对象，并显示相应的错误消息。
  * 如果解析失败，则直接以原始格式下载blob对象。
  */
-const downFileFn = function (blob: Blob | BlobPart, fileName: string, resolve?: Function, reject?: Function) {
+const downFileFn = function (
+  blob: Blob | BlobPart,
+  fileName: string,
+  resolve?: Function,
+  reject?: Function
+) {
   // 创建一个新的Blob对象，指定类型为application/json,假设blob是我们需要转换的Blob对象
   let b = new Blob([blob], {
-    type: 'application/json',
+    type: 'application/json'
   })
 
   // 创建一个FileReader对象用于读取Blob对象,创建一个新的FileReader实例
@@ -39,9 +44,7 @@ const downFileFn = function (blob: Blob | BlobPart, fileName: string, resolve?:
     } catch (error) {
       // 如果解析失败，将Blob对象转换为URL并创建下载链接
       // console.error('Error parsing JSON', error)
-      const url = URL.createObjectURL(
-        new Blob([b]),
-      )
+      const url = URL.createObjectURL(new Blob([b]))
       let link: HTMLAnchorElement | null = document.createElement('a')
       link.href = url
       link.setAttribute('download', fileName)
@@ -57,7 +60,6 @@ const downFileFn = function (blob: Blob | BlobPart, fileName: string, resolve?:
   reader.onerror = function () {
     console.error('读取过程中出错.')
   }
-
 }
 
 type Obj = {
@@ -65,16 +67,16 @@ type Obj = {
 }
 
 interface Config {
-  method?: string,  // 请求方法，默认为 GET | POST
-  headers?: Object, // 请求头
-  cbpercentage?: Function  // 获取下载进度的回调函数
-  fileName?: string, // 下载后的文件名
-  chunkSize?: number, // 每次下载的块大小，默认为 10KB
-  body?: string, // 请求体
+  method?: string // 请求方法，默认为 GET | POST
+  headers?: Object // 请求头
+  cbpercentage?: Function // 获取下载进度的回调函数
+  fileName?: string // 下载后的文件名
+  chunkSize?: number // 每次下载的块大小，默认为 10KB
+  body?: string // 请求体
 }
 const ajaxBox = {
   downFile: function (blob: Blob | BlobPart, fileName: string) {
-    downFileFn(blob, fileName);
+    downFileFn(blob, fileName)
   },
 
   // 下载文件
@@ -90,19 +92,25 @@ const ajaxBox = {
    * 如果解析失败，则直接以原始格式下载blob对象。
    */
 
-  downFileFetch: function (fillAddress: string, fileName: string, method?: string, headers?: Obj, params?: Obj, cbpercentage?: Function) {
+  downFileFetch: function (
+    fillAddress: string,
+    fileName: string,
+    method?: string,
+    headers?: Obj,
+    params?: Obj,
+    cbpercentage?: Function
+  ) {
     let options = {
-      method: method || 'GET',
+      method: method || 'GET'
     }
     let _headers
     if (options.method === 'GET' || method === 'get') {
       _headers = {
-        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
       }
-
     } else if (options.method === 'POST' || method === 'post') {
       _headers = {
-        'Content-Type': 'application/json', //设置为json格式
+        'Content-Type': 'application/json' //设置为json格式
       }
     }
     // 判断请求是否为get请求，若是get请求，则将params参数拼接在url后面
@@ -149,10 +157,10 @@ const ajaxBox = {
             // 累加已下载的字节数
             // downloaded += reader.result.byteLength
             if (typeof reader.result === 'string' || reader.result === null) {
-              console.log('reader.result不为 ArrayBuffer');
+              console.log('reader.result不为 ArrayBuffer')
               // 处理字符串的情况，可能需要转换为 ArrayBuffer 或者其他处理逻辑
             } else {
-              downloaded += reader.result.byteLength;
+              downloaded += reader.result.byteLength
             }
             // 计算下载进度百分比
             const total = blob.size
@@ -195,18 +203,17 @@ const ajaxBox = {
 
   downFileFetchV2: function (url: string, params?: Obj, config?: Config) {
     let options = {
-      method: config?.method || 'GET',
+      method: config?.method || 'GET'
     }
     let _headers
     let _fileName = config?.fileName || '附件'
     if (options.method === 'GET' || options.method === 'get') {
       _headers = {
-        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
       }
-
     } else if (options.method === 'POST' || options.method === 'post') {
       _headers = {
-        'Content-Type': 'application/json', // 设置为json格式
+        'Content-Type': 'application/json' // 设置为json格式
       }
     }
     // 数组请求头: 优先使用传递的请求头，如果没有传递，则使用默认的请求头
@@ -252,10 +259,10 @@ const ajaxBox = {
               // 累加已下载的字节数
               // downloaded += reader.result.byteLength
               if (typeof reader.result === 'string' || reader.result === null) {
-                console.log('reader.result不为 ArrayBuffer');
+                console.log('reader.result不为 ArrayBuffer')
                 // 处理字符串的情况，可能需要转换为 ArrayBuffer 或者其他处理逻辑
               } else {
-                downloaded += reader.result.byteLength;
+                downloaded += reader.result.byteLength
               }
               // 计算下载进度百分比
               const total = blob.size
@@ -274,7 +281,8 @@ const ajaxBox = {
             }
           }
           readBlobInChunks()
-        }).catch((error) => {
+        })
+        .catch((error) => {
           console.error('下载文件时出错:', error)
           reject(error)
         })
@@ -284,17 +292,17 @@ const ajaxBox = {
   // 下载文件:3.0版本:优先使用传递的文件名，若不传递文件问就使用后端返回的文件名
   downFileFetchV3: function (url: string, params?: Obj, config?: Config) {
     let options: any = {
-      method: config?.method || 'GET',
+      method: config?.method || 'GET'
     }
     let _headers
     let _fileName = ''
     if (options.method === 'GET' || options.method === 'get') {
       _headers = {
-        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
       }
     } else if (options.method === 'POST' || options.method === 'post') {
       _headers = {
-        'Content-Type': 'application/json', // 设置为json格式
+        'Content-Type': 'application/json' // 设置为json格式
       }
     }
     // 数组请求头: 优先使用传递的请求头，如果没有传递，则使用默认的请求头
@@ -332,11 +340,18 @@ const ajaxBox = {
             console.log('后端返回的文件名字符串: ', contentDisposition)
             if (contentDisposition) {
               // 解析文件名
-              const fileNameMatch = contentDisposition.match(/filename="(.+)"/) || contentDisposition.match(/filename\*=utf-8''(.+)/);
+              const fileNameMatch =
+                contentDisposition.match(/filename="(.+)"/) || // attachment; filename="文件名.xlsx"  匹配文件名带双引号
+                contentDisposition.match(/filename='(.+)'/) || // attachment; filename='文件名.xlsx'  匹配文件名带单引号
+                contentDisposition.match(/filename=(?:([^;]+))/) || // attachment; filename=文件名.xlsx  匹配文件名不带引号
+                contentDisposition.match(/filename\*=utf-8''(.+)/) || // attachment; filename*=utf-8''文件名.xlsx
+                contentDisposition.match(/filename=(?:"([^"]+)"|'([^']+)'|([^;]+))/) //匹配文件名带双引号、单引号、不带引号
               // console.log('文件名数组: ', fileNameMatch)
               if (fileNameMatch.length > 1) {
                 // 匹配到文件名，则将文件名解码并赋值给 _fileName
-                _fileName = decodeURIComponent(fileNameMatch[1])
+                _fileName = decodeURIComponent(
+                  fileNameMatch[1] || fileNameMatch[2] || fileNameMatch[3]
+                )
                 console.log('后端返回的文件名: ', _fileName)
                 return res.blob().then((blob: Blob) => ({ blob, _fileName }))
               }
@@ -391,9 +406,7 @@ const ajaxBox = {
           reject(error)
         })
     })
-  },
-
-
+  }
 
   /*
     sendJSONP: function (url, callbackName, callback) {
@@ -413,13 +426,8 @@ const ajaxBox = {
       };
     },
   */
-
-
-
-
 }
-export default ajaxBox;
-
+export default ajaxBox
 
 /**
  * 使用下载示例 get

package/src/utils/index.ts

@@ -1,13 +1,24 @@
-export { default as withInstall } from './withinstall/index';
+export { default as withInstall } from './withinstall/index'
 
 // export { default as setCardList } from './cardPrint'; // 导入默认的导出
 // export * from './cardPrint'; // 导入所有导出(不包含默认导出)
-import withInstall from './withinstall/index';
-import { cardPrint, setCardList } from "./cardPrint";
-import apis from "./baseApi";
-import { setDate, setDateTime } from "./Dayjs";
-import dayjs from "./Dayjs";
-import ajaxBox from "./ajaxBox"; // 处理文件下载方法
+import withInstall from './withinstall/index'
+import { cardPrint, setCardList } from './cardPrint'
+import apis from './baseApi'
+import { setDate, setDateTime } from './Dayjs'
+import dayjs from './Dayjs'
+import ajaxBox from './ajaxBox' // 处理文件下载方法
+import t from './lang/index' // 中英文切换
 
 // 导出 cardPrint 和 apis
-export default { apis, cardPrint, setCardList, withInstall, dayjs, setDate, setDateTime, ajaxBox };
+export default {
+  apis,
+  cardPrint,
+  setCardList,
+  withInstall,
+  dayjs,
+  setDate,
+  setDateTime,
+  ajaxBox,
+  t
+}

package/src/utils/lang/en.js

@@ -0,0 +1,42 @@
+const en = {
+  sortableTable: {
+    operatorOptions: {
+      like: 'like',
+      equals: 'Equals',
+      greaterThan: 'Greater than',
+      greaterThanOrEqualTo: 'Greater than or equal to',
+      lessThan: 'Less than',
+      lessThanOrEqualTo: 'Less than or equal to',
+      notEqualTo: 'Not equal to',
+      between: 'Between'
+    },
+    datepicker: {
+      rangeseparator: ' - ',
+      startplaceholder: 'Start date',
+      endplaceholder: 'End date',
+      Today: 'Today',
+      Yesterday: 'Yesterday', // 昨天
+      aweekAgo: 'A week ago', // 前一周
+      lastMonth: 'Last Month', // 前一月,
+      last3Month: 'Last 3 Month' // 最近3个月
+    }
+  },
+  public: {
+    placeholders: 'Please choose', // 请选择
+    placeholderi: 'Please fill in', // 请填写
+    loading: 'Loading in progress ...', // 加载中···
+    confirm: 'Confirm', // 确定
+    clear: 'clear', // '清空',
+    cancel: 'Cancel', // 取消
+    search: 'Search', // 搜索
+    reset: 'Reset', // 重置
+    add: 'Add', // 新增
+    edit: 'Edit', // 编辑
+    delete: 'Delete', // 删除
+    save: 'Save', // 保存
+    close: 'Close', // 关闭
+    submit: 'Submit', // 提交
+    selectAll: 'Select All' // 全选
+  }
+}
+export default en

package/src/utils/lang/index.ts

@@ -0,0 +1,26 @@
+import { createI18n, I18nOptions } from 'vue-i18n'
+import en from './en'
+import zh from './zh'
+import { computed } from 'vue'
+// 本地缓存的语言用计算属性获取
+export let lang = computed({
+  get() {
+    return localStorage.getItem('language') || 'zh'
+  },
+  set(val) {
+    return val
+  }
+})
+const i18n = createI18n({
+  locale: lang.value, // 设置默认语言, // 设置默认语言
+  messages: { en, zh }
+})
+const t = (key: string, langs?: 'zh' | 'en') => {
+  if (langs) {
+    i18n.global.locale = langs
+  } else {
+    i18n.global.locale = lang.value as 'zh' | 'en'
+  }
+  return i18n.global.t(key)
+}
+export default t

package/src/utils/lang/zh.js

@@ -0,0 +1,42 @@
+const zh = {
+  sortableTable: {
+    operatorOptions: {
+      like: '包含',
+      equals: '等于',
+      greaterThan: '大于',
+      greaterThanOrEqualTo: '大于等于',
+      lessThan: '小于',
+      lessThanOrEqualTo: '小于等于',
+      notEqualTo: '不等于',
+      between: '介于'
+    },
+    datepicker: {
+      rangeseparator: ' 至 ',
+      startplaceholder: '开始日期',
+      endplaceholder: '结束日期',
+      Today: '今天',
+      Yesterday: '昨天',
+      aweekAgo: '一周前',
+      lastMonth: '前一月',
+      last3Month: '最近3个月'
+    }
+  },
+  public: {
+    placeholders: '请选择',
+    placeholderi: '请填写',
+    loading: '加载中...',
+    confirm: '确定',
+    clear: '清空',
+    cancel: '取消',
+    search: '搜索',
+    reset: '重置',
+    add: '新增',
+    edit: '编辑',
+    delete: '删除',
+    save: '保存',
+    close: '关闭',
+    submit: '提交',
+    selectAll: '全选'
+  }
+}
+export default zh