ci-plus 1.1.0 → 1.1.2

package/index.ts

@@ -1,6 +1,7 @@
 import * as components from './src/index';
 export * from './src/index';
 import { App } from 'vue';
+export * as cifunction from './src/utils';
 
 export default {
   install: (app: App) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ci-plus",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "ci组件库",
   "main": "./index.ts",
   "scripts": {
@@ -20,7 +20,9 @@
     "less": "^4.2.0",
     "sortablejs": "^1.15.1",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vuedraggable": "^2.24.3"
+    "vuedraggable": "^2.24.3",
+    "jsbarcode": "^3.11.6",
+    "dayjs": "^1.11.9"
   },
   "devDependencies": {},
   "peerDependencies": {},

package/src/components.d.ts

@@ -16,8 +16,11 @@ declare module '@vue/runtime-core' {
     CiSuffix: typeof components.Suffix;
     CiTable: typeof components.SorTables;
     CiHeadbtns: typeof components.Headbtns
+    CiHeaderInput: typeof components.HeaderInput
     CiSdialog: typeof components.Sdialog
     CiColumncell: typeof components.Columncell
+    CiUpload: typeof components.Upload
+    CiIdentificationCard: typeof components.IdentificationCard
   }
 }
 export { };

package/src/fileRelated/README.md

@@ -0,0 +1,7 @@
+## 附件相关组件：
+
+### 1. 文件上传组件：
+
+### 2.表格附件展示组件：
+
+### 3. 表单附件新增/修改组件：

package/src/fileRelated/ciupload.vue

@@ -0,0 +1,149 @@
+<template>
+  <el-popover placement="bottom" :width="300" trigger="click">
+    <el-upload
+      ref="upload"
+      class="upload-demo"
+      :action="url + '_post/'"
+      :limit="1"
+      :on-exceed="handleExceed"
+      :auto-upload="false"
+      :on-success="onSuccess"
+      :on-error="onError"
+      :on-change="handleChange"
+      :data="datas"
+    >
+      <template #trigger>
+        <el-button size="small" type="primary" style="width: 166px" plain> 选择文件 </el-button>
+      </template>
+      <el-button
+        size="small"
+        @click="formwork"
+        style="float: left; margin: 0 12px 0 0; width: 95px"
+      >
+        下载模板
+      </el-button>
+    </el-upload>
+
+    <div style="width: 100%; display: flex">
+      <el-button size="small" @click="visible = false" style="flex: 1"> 取消 </el-button>
+      <el-button size="small" type="primary" @click="submitUpload" style="flex: 2">
+        上传
+      </el-button>
+    </div>
+    <template #reference>
+      <el-button type="success" plain @click="visible = true"> 导入 </el-button>
+    </template>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage, ElLoading, genFileId } from 'element-plus'
+import axios from 'axios'
+import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
+const upload = ref<UploadInstance>()
+const exporLoading = ref()
+const visible = ref(false)
+const filelist = ref([])
+const props = defineProps<{
+  url: string
+  parameter?: object // 附件模板下载时的请求参数
+  data?: object // 附件上传时的请求参数
+  templateName?: string //  模板名称
+  templateDownloadFn?: (val: any) => Promise<any> //附件上传函数?: Function
+}>()
+const emits = defineEmits<{
+  (e: 'reloadTable'): void
+}>()
+
+const datas = ref(props.data)
+
+//选择文件
+const handleExceed: UploadProps['onExceed'] = (files) => {
+  upload.value!.clearFiles()
+  const file = files[0] as UploadRawFile
+  file.uid = genFileId()
+  upload.value!.handleStart(file)
+}
+const handleChange = (file: any, fileList: any) => {
+  filelist.value = fileList //更新文件列表数据
+}
+//上传文件
+const submitUpload = () => {
+  console.log(filelist.value.length)
+  if (!filelist.value.length) return ElMessage.warning('请选择文件后在上传！')
+  exporLoading.value = ElLoading.service({ text: '导入中...' })
+  console.log('upload.value', upload.value)
+  upload.value!.submit()
+  visible.value = false
+}
+//文件上传成功回调
+const onSuccess = (res: any, file: any, fileList: any) => {
+  // console.log('res: ', res)
+  // console.log('file: ', file)
+  // console.log('fileList: ', fileList)
+  exporLoading.value.close()
+  filelist.value.length = 0
+  upload.value!.clearFiles()
+
+  if (res.code !== 200) {
+    return ElMessage.warning(res.msg)
+  }
+
+  ElMessage.success(res.msg)
+  emits('reloadTable')
+}
+//文件上传失败回调
+const onError = (response: any, file: any, fileList: any) => {
+  // console.log('fileList: ', fileList)
+  // console.log('response: ', response)
+  ElMessage.error(file.name + '上传失败')
+  filelist.value.length = 0
+  upload.value!.clearFiles() // 清空文件列表
+  exporLoading.value.close()
+}
+
+//下载模板
+const formwork = () => {
+  if (props.templateDownloadFn) {
+    props
+      .templateDownloadFn({
+        responseType: 'blob',
+        params: props.parameter
+      })
+      .then((res) => {
+        const url = URL.createObjectURL(new Blob([res.data]))
+        let link: HTMLAnchorElement | null = document.createElement('a')
+        link.href = url
+        link.setAttribute('download', props.templateName || '模板.xlsx')
+        document.body.appendChild(link)
+        link.click()
+        link = null
+      })
+      .catch((error) => {
+        console.log(error)
+      })
+  } else {
+    axios({
+      method: 'get',
+      url: props.url + '_get/',
+      responseType: 'blob',
+      params: props.parameter
+    })
+      .then((res) => {
+        const url = URL.createObjectURL(new Blob([res.data]))
+        let link: HTMLAnchorElement | null = document.createElement('a')
+        link.href = url
+        link.setAttribute('download', props.templateName || '模板.xlsx')
+        document.body.appendChild(link)
+        link.click()
+        link = null
+      })
+      .catch((error) => {
+        console.log(error)
+      })
+  }
+}
+</script>
+
+<style scoped></style>

package/src/fileRelated/index/ciupload.ts

@@ -0,0 +1,4 @@
+import _Upload from '../ciupload.vue'
+import { withInstall } from '../../utils/index';
+export const Upload = withInstall(_Upload)
+export default Upload

package/src/fileRelated/seeFile.vue

@@ -0,0 +1,160 @@
+<!-- /**
+* @module seeFile
+* @author : 卖女孩的小火柴
+* !description : 附件预览
+* @version : 1.0.0
+* @since : 创建时间 2024-02-19 10:13:32
+*/ -->
+
+<template>
+  <el-popover
+    placement="bottom"
+    :width="200"
+    style="height: 200px; max-height: 400px; max-width: 250px"
+    trigger="click"
+  >
+    <template #reference>
+      <el-button type="success" plain size="small"> 附件 </el-button>
+    </template>
+    <template v-for="(item, i) in pathArr" :key="i">
+      <div class="list" v-if="item.name">
+        <div class="list-a" @click="downloadFile(item.oldName, item.name)">
+          {{ item.name || '下载' }}
+        </div>
+      </div>
+    </template>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+const props = defineProps<{
+  url?: string[] // 传入要显示的附件地址数组
+  baseUrl?: string //  图片展示的基础路径
+}>()
+/*
+  数据结构说明：
+  props.url:[
+    "media/material/3.1708222741.7763922.webp",
+    "media/material/3号(number-3)_爱给网_aigei_com.1708222741.7783866.png"
+  ]
+
+  基础路径
+  props.baseUrl : http://10.20.72.231:9999/
+*/
+
+// 定义一个函数，用于处理字符串
+export const setFilePath = (arr: string[], url?: string) => {
+  // console.log('重新渲染数据', arr);
+  if (arr && arr.length > 0) {
+    let newArr: { name: string; oldName: string }[] = []
+    arr.forEach((item, i) => {
+      let segments = item.split('.')
+      let parts = segments[0].split('/') // 获取每名称
+      let name = parts[parts.length - 1] + '.' + segments[segments.length - 1]
+      let oldName = url ? url + item : item //原来的名称
+      // let url = segments[0] + '.' + segments[segments.length - 1]
+      newArr.push({ name, oldName })
+    })
+    return newArr
+  } else {
+    return [] // 如果数组为空，则返回空数组
+  }
+}
+
+// 将路径处理成附件的参数
+export const fileArr = (url: string, pathArr: string[]) => {
+  if (pathArr && pathArr.length > 0) {
+    let objArr: any = []
+    if (pathArr.length > 0) {
+      pathArr.map((item: any) => {
+        objArr.push({
+          name: item.name,
+          oldName: item.oldName,
+          url: url + item.oldName
+        })
+      })
+      return objArr
+    } else {
+      return []
+    }
+  }
+}
+
+const emits = defineEmits(['onClick'])
+
+// console.log('props', props.url)
+
+const pathArr = ref<any[]>([])
+// 对数组中的每个字符串应用处理函数
+// @ts-ignore
+pathArr.value = setFilePath(props.url, props.baseUrl || 'http://10.20.72.231:9999/')
+
+// 监听props.url的变化
+watch(
+  () => props.url,
+  (newVal) => {
+    // console.log('newVal: ', newVal)
+    // 对新值进行处理
+    // @ts-ignore
+    pathArr.value = setFilePath(newVal, props.baseUrl || 'http://10.20.72.231:9999/')
+  },
+  {
+    immediate: true, // 是否立即执行
+    deep: true // 是否深度监听
+  }
+)
+
+// 下载文件
+const downloadFile = (url: string, name: string) => {
+  axios({
+    method: 'GET',
+    url: url,
+    responseType: 'blob'
+  }).then((res) => {
+    console.log('res: ', res)
+    if (res.status === 200) {
+      if (res.headers['Content-Type'] === 'application/json') {
+        let data
+        if (res.request) data = JSON.parse(res.request.responseText)
+        else data = { code: 500, msg: '文件获取失败' }
+        return ElMessage.warning(`${data.code}:${data.msg}`) // 文件获取失败
+      }
+      ElMessage.success('开始下载！')
+      const link = document.createElement('a') // 创建a标签
+      link.href = window.URL.createObjectURL(new Blob([res.data])) // 创建下载链接
+      link.setAttribute('download', name) // 设置下载文件名称(名称+后缀)
+      link.click() // 下载文件
+      window.URL.revokeObjectURL(link.href) // 释放内存
+    } else ElMessage.error(`${res.status}:${res.statusText}`) // 文件获取失败
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.list {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  border: 1px solid #ebeef5;
+  padding: 0 10px;
+  box-sizing: border-box;
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  .list-a {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    &:hover {
+      background-color: #f5f7fa;
+      cursor: pointer;
+    }
+  }
+}
+</style>

package/src/fileRelated/uploadV2.vue

@@ -0,0 +1,212 @@
+<template>
+  <el-popover placement="bottom" :width="300">
+    <el-upload
+      ref="upload"
+      class="upload-demo"
+      :action="url + '_post/'"
+      :limit="mylimit || 1"
+      :on-exceed="handleExceed"
+      :auto-upload="false"
+      :on-success="onSuccess"
+      :on-error="onError"
+      :on-change="handleChange"
+      :on-remove="handleRemove"
+      :data="datas"
+      :multiple="mymultiple || false"
+      v-model:file-list="fileList"
+    >
+      <template #trigger>
+        <el-button size="small" type="primary" style="width: 100px" plain> 选择文件 </el-button>
+      </template>
+      <el-button
+        size="small"
+        @click="formwork"
+        style="float: left; margin: 0 12px 0 0; width: 95px"
+        v-if="url"
+      >
+        下载模板
+      </el-button>
+    </el-upload>
+
+    <div style="width: 100%; display: flex" v-if="url">
+      <el-button size="small" @click="visible = false" style="flex: 1"> 取消 </el-button>
+      <el-button size="small" type="primary" @click="submitUpload" style="flex: 2">
+        上传
+      </el-button>
+    </div>
+    <template #reference>
+      <el-button type="success" plain @click="visible = true" size="small">
+        {{ props.title || '附件上传' }}
+      </el-button>
+    </template>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+// 定义一个函数，用于处理字符串
+export const setFilePath = (arr: string[], url?: string) => {
+  // console.log('重新渲染数据', arr);
+  if (arr && arr.length > 0) {
+    let newArr: { name: string; oldName: string }[] = []
+    arr.forEach((item, i) => {
+      let segments = item.split('.')
+      let parts = segments[0].split('/') // 获取每名称
+      let name = parts[parts.length - 1] + '.' + segments[segments.length - 1]
+      let oldName = url ? url + item : item //原来的名称
+      // let url = segments[0] + '.' + segments[segments.length - 1]
+      newArr.push({ name, oldName })
+    })
+    return newArr
+  } else {
+    return [] // 如果数组为空，则返回空数组
+  }
+}
+
+// 将路径处理成附件的参数
+export const fileArr = (url: string, pathArr: string[]) => {
+  if (pathArr && pathArr.length > 0) {
+    let objArr: any = []
+    if (pathArr.length > 0) {
+      pathArr.map((item: any) => {
+        objArr.push({
+          name: item.name,
+          oldName: item.oldName,
+          url: url + item.oldName
+        })
+      })
+      return objArr
+    } else {
+      return []
+    }
+  }
+}
+
+import { ref } from 'vue'
+import { ElMessage, ElLoading, genFileId } from 'element-plus'
+import axios from 'axios'
+import type {
+  UploadFile,
+  UploadFiles,
+  UploadInstance,
+  UploadProps,
+  UploadUserFile
+} from 'element-plus'
+const upload = ref<UploadInstance>()
+const exporLoading = ref()
+const visible = ref(false)
+// const filelist = ref([])
+
+const props = defineProps<{
+  url?: string // 上传和下载模板的接口(当需要将附件传递回父组件时不需要传递此属性)
+  parameter?: () => {} // 模板下载的时候请求需要携带的参数：{state: 1}
+  data?: () => {} //上传携带的其他数据对象:{userId: 1, userName: '张三'}
+  title?: string // 上传按钮的名称
+  multiple?: boolean // 是否支持多文件
+  limit?: number // 最大文件数量
+  filePath?: UploadFile[] //UploadRawFile[] // 父组件传递的附件数据，用于显示附件列表和上传附件后传递给父组件附件数据
+  RowIndex?: number // 父组件传递的行索引，用于父组件中删除了附件找到对应的行
+}>()
+const emits = defineEmits<{
+  (e: 'reloadTable'): void // 组件中上传附件后刷新父组件表格数据方法
+  (e: 'getFile', files: UploadFiles, file?: UploadFile, rowindex?: number): void
+  (e: 'update:file', files: UploadFiles): void
+}>()
+console.log('附件props: ', props)
+const datas = ref(props.data)
+const mymultiple = ref<boolean>(props.multiple)
+const mylimit = ref<number>(props.limit as number)
+const myfilePath = ref<any>(props.filePath || [])
+console.log('myfilePath: ', props.filePath)
+
+// 对数组中的每个字符串应用处理函数
+let pathArr = setFilePath(myfilePath.value)
+
+// 打印处理后的数组
+// 将父组件中传递过来的名称，处理成el-upload需要的格式
+let pathUrlArr = fileArr(import.meta.env.VITE_BASE_URL9999, pathArr)
+console.log('fileObj(): ', pathUrlArr)
+const fileList = ref<UploadUserFile[]>(pathUrlArr)
+console.log('fileList: ', fileList.value)
+
+//当超出限制时，执行的钩子函数
+const handleExceed: UploadProps['onExceed'] = (files) => {
+  console.log('超出限制: ', files)
+  ElMessage.warning(`超出最大文件数:${mylimit?.value}个文件,请重新选择`)
+  // upload.value!.clearFiles()
+  // const file = files[0] as UploadRawFile
+  // file.uid = genFileId()
+  // upload.value!.handleStart(file)
+}
+
+// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+const handleChange = (file: any, fileLists: any) => {
+  // console.log('file: ', file)
+  // console.log('fileList: ', fileLists)
+  // filelist.value = fileLists //更新文件列表数据
+  // 如果没有url就将选中的附件文件流传递回父组件
+  if (!props.url) {
+    // const files: UploadRawFile[] = fileLists.map(
+    //   (item) => item.raw,
+    // ) as UploadRawFile[]
+    emits('getFile', fileLists) //将选中的文件传递回父组件
+    emits('update:file', fileLists) //同步父组件绑定的附件字段，以便父组件提交表单的时候一起将附件提交
+  }
+}
+// 文件列表删除时
+const handleRemove: UploadProps['onRemove'] = (file, fileList) => {
+  console.log('file: ', file)
+  console.log('fileList: ', fileList)
+  // 如果没有url时 在删除的时候将文件流同步回父组件
+  if (!props.url) {
+    // const files: UploadRawFile[] = fileList.map(
+    //   (item) => item.raw,
+    // ) as UploadRawFile[]
+    emits('getFile', fileList, file, props.RowIndex)
+    emits('update:file', fileList)
+  }
+}
+//上传文件
+const submitUpload = () => {
+  console.log(fileList.value.length)
+  if (!fileList.value.length) return ElMessage.warning('请选择文件后在上传12！')
+  exporLoading.value = ElLoading.service({ text: '导入中...' })
+  console.log('upload.value', upload.value)
+  upload.value!.submit()
+  visible.value = false
+}
+//文件上传成功回调
+const onSuccess = (res: any, file: any, fileList: any) => {
+  exporLoading.value.close()
+  if (res.code !== 200) return ElMessage.warning(res.msg)
+  ElMessage.success(res.msg)
+  emits('reloadTable')
+}
+//文件上传失败回调
+const onError = (response: any, file: any, fileList: any) => {
+  ElMessage.error('服务器异常！')
+}
+
+//下载模板
+const formwork = () => {
+  axios({
+    method: 'get',
+    url: props.url + '_get/',
+    responseType: 'blob',
+    params: props.parameter
+  })
+    .then((res) => {
+      const url = URL.createObjectURL(new Blob([res.data]))
+      let link: HTMLAnchorElement | null = document.createElement('a')
+      link.href = url
+      link.setAttribute('download', '模板.xlsx')
+      document.body.appendChild(link)
+      link.click()
+      link = null
+    })
+    .catch((error) => {
+      console.log(error)
+    })
+}
+</script>
+
+<style scoped></style>

package/src/identificationCard/barCode.vue

@@ -0,0 +1,63 @@
+<!--
+* @module SelfBarcode
+* @author : 卖女孩的小火柴
+* !description : 条形码组件：根据传入的文本生成条形码
+* @version : 1.0.0
+* @since : 创建时间 2024-01-19 16:37:51
+-->
+
+<template>
+  <div>
+    <svg :class="'barcode' + props.value" class="mycards" :style="`max-width: ${maxWidth}`"></svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick, watch } from 'vue'
+import JsBarcode from 'jsbarcode'
+interface Props {
+  value: String // 条码文本
+  type: String // 类型
+  maxWidth: String // 最大宽度
+  newClass: String | Number // 自定义class
+}
+const props = defineProps<Props>()
+// console.log('条码props', props)
+watch(props, () => {
+  draw()
+})
+function draw() {
+  // 第一个参数，要渲染的dom的id或者class名称，第二个参数，条形码的实际文本，第三个参数，条形码的配置
+  JsBarcode('.barcode' + props.value, String(props.value), {
+    // format: 'CODE39', //选择要使用的条形码类型,默认值'auto' (CODE128)
+    width: 2, //设置条之间的宽度
+    height: 40, //高度
+    displayValue: true, //是否在条形码下方显示文字
+    //   text: props.value,//覆盖显示的文本
+    //   text:"456",//覆盖显示的文本
+    //   fontOptions:"bold italic",//使文字加粗体或变斜体
+    //   font:"fantasy",//设置文本的字体
+    //   textAlign:"left",//设置文本的水平对齐方式
+    //   textPosition:"top",//设置文本的垂直位置
+    //   textMargin:5,//设置条形码和文本之间的间距
+    fontSize: 16, //设置文本的大小
+    // background: '#fff', //设置条形码的背景
+    // lineColor: '#2196f3', //设置条和文本的颜色。
+    // margin: 25, //设置条形码周围的空白边距
+    marginTop: 5, //相当于MarginTop
+    marginBottom: 0
+  })
+}
+onMounted(() => {
+  nextTick(() => {
+    draw()
+  })
+})
+</script>
+<style lang="scss" scoped>
+.mycards {
+  color: red;
+  max-width: 600px;
+  min-width: 400px;
+}
+</style>