ci-plus/README.md

ci组件库

## 历史更新

```js
1.8.6
  1、修改 ciuploadV4 组件中的一个bug
1.8.5
  1、新增 ciuploadV4 组件
  2、一些导出小优化
1.8.4
  1、优化弹窗组件，使其样式不污染全局
1.8.3
  1、优化ci-select组件中使用名组件称问题
1.8.0
  1、移除原来标识卡模板组件
1.7.9
  1、导入组件3(uploadV3.vue)中增加中英文切换
1.7.8
  1、导入组件3中优化单选文件的时候覆盖文件逻辑
1.7.7
  1、新增导入组件3(可以选择归属公司)
1.7.6
  1、调整语言文件中翻译对象
1.7.5
  1、表头筛选组件新增语言切换功能
1.7.0
  1、更新ajaxBox.ts函数的downFileFetchV3中文件名称匹配逻辑
1.6.9
  1、微调标识卡模板到 1.6.0 版本:更新检验员检验日期检验结果取值逻辑，更新装配标识卡本批数量取值逻辑
1.6.8
  1、微调标识卡模板到 1.5.9 版本:优化单重和净重字段判空逻辑
1.6.7
  1、微调标识卡模板到 1.5.8 版本:删除产品标识卡和返工标识卡中的'采购单号'字段

1.6.6
  1、标识卡模板更新到 1.5.7 版本

1.6.5
  1、将1.2.0 版本中标识卡模板的'单重'和'净重'后面追加单位字段。
  2、附件下载函数ajaxBox.ts中新增 downFileFetchV3 函数：不传递文件名称时使用后端返回文件名导出。

1.6.4
  1、标识卡模板更新到1.5.6版本

1.6.3
  1、更新第二版为尚标识卡模板- 客户名称字段取值
```

## 安装本组件库 特别注意

```sh
# 本组件库是二次封装，所以依赖一些其他库，需要安装以下库：
"lodash": "^4.17.21", # 工具库
"less": "^4.2.0", # less库
"sortablejs": "^1.15.1", # 拖拽库
"vite-plugin-svg-icons": "^2.0.1", # svg图标库
"jsbarcode": "^3.11.6", # 条形码库
"vue-draggable-plus": "^0.4.0", # 拖拽库
"qrcode": "^1.5.3", #二维码库

"vue3-print-nb": "^0.1.4",
"vuedraggable": "^2.24.3",
"qrcode": "^1.5.3",
"@vueuse/core": "^9.13.0"
```

```sh
# 1、安装组件
pnpm install ci-plus -S
# 2、安装element-plus 和引入
pnpm install element-plus@2.5.1  @element-plus/icons-vue@2.3.1 -S
# 3、安装package.json中的其他依赖(到node_modules/ci-plus/package.json目录下，把里面的依赖安装)
# 4、main.ts引入组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import CiPlus from 'ci-plus'

# 5、全局注册
app.use(ElementPlus)
app.use(CiPlus)


```

```sh
#  本地安装项目
pnpm install 项目package.json所在目录
pnpm install D:\UserData\Public\InternalUse\59529\zjk\ci-plus\packages\components
# 安装npm包
pnpm install ci-plus
# 本库依赖element-plus，需要安装element-plus 图标库
pnpm install element-plus@2.5.1 -S
pnpm install @element-plus/icons-vue@2.3.1 -S
# 发布包
npm publish

```

## 如果用pnpm安装组件后出现组件中某个依赖报错说没有默认导出

```sh
# 清楚pnpm缓存，删除项目目录的node_modules文件夹
pnpm store prune
# 重新安装
pnpm install
```

## 组件库使用说明

```sh
# 安装组件
pnpm install ci-plus -S
# 安装element-plus 和引入
pnpm install element-plus@2.5.1  @element-plus/icons-vue@2.3.1 -S
```

## svg图标组件使用说明

```ts
1、首先需要安装插件
pnpm i fast-glob@3.x vite-plugin-svg-icons@2.x -D

2、在src/assets/icons中创建svg文件夹，(可将组件库中的assets/icons文件夹移动到项目中的assets/icons文件夹中)

3、在main.ts中引入svg图标
import 'virtual:svg-icons-register'

4、在vite.config.ts中配置svg图标
import path from 'path'
import { defineConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      // 配置svg文件存放的文件夹,(可将组件库中的assets/icons文件夹移动到项目中的assets/icons文件夹中)
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // clas命名规则
      symbolId: 'icon-[dir]-[name]'
    }
    )
  ]
})
```

6、在组件中使用svg图标

```vue
<template>
  <div>
    <!-- 单独引入 -->
    <Svgicon icon-class="search" />
    <!-- 全局引入：name就是svg文件的文件名 -->
    <ci-svg-icon name="regular-left" size="20" color="#2C93FF" ></ci-svg-icon>
  </div>
</template>
<script setup>
// 单独引入
import { Svgicon } from '@ci-plus/components'
```