ci-plus 1.1.7 → 1.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ci-plus",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "description": "ci组件库",
   "main": "./index.ts",
   "scripts": {
@@ -21,7 +21,8 @@
     "sortablejs": "^1.15.1",
     "vite-plugin-svg-icons": "^2.0.1",
     "jsbarcode": "^3.11.6",
-    "dayjs": "^1.11.9"
+    "dayjs": "^1.11.9",
+    "vue-draggable-plus": "^0.4.0"
   },
   "devDependencies": {},
   "peerDependencies": {},

package/src/fileRelated/seeFile.vue

@@ -30,10 +30,11 @@
 defineOptions({ name: 'ci-seeFile' })
 import { ref, watch } from 'vue'
 import axios from 'axios'
+import apis from '../utils/baseApi'
 import { ElMessage } from 'element-plus'
 
 interface Props {
-  url?: string[] // 传入要显示的附件地址数组
+  url: string[] // 传入要显示的附件地址数组
   baseUrl?: string //  图片展示的基础路径
 }
 
@@ -76,12 +77,13 @@ const fileArr = (url: string, pathArr: string[]) => {
     }
   }
 }
-
+const { storageModule } = apis
+let fileURL = new URL(storageModule).origin + '/' // 附件的地址前缀
 const emits = defineEmits(['onClick'])
 const pathArr = ref<any[]>([])
 // 对数组中的每个字符串应用处理函数
 // @ts-ignore
-pathArr.value = setFilePath(props.url, props.baseUrl || 'http://10.20.72.231:9999/')
+pathArr.value = setFilePath(props.url, props.baseUrl || fileURL)
 
 // 监听props.url的变化
 watch(
@@ -89,7 +91,7 @@ watch(
   (newVal) => {
     // 对新值进行处理
     // @ts-ignore
-    pathArr.value = setFilePath(newVal, props.baseUrl || 'http://10.20.72.231:9999/')
+    pathArr.value = setFilePath(newVal, props.baseUrl || fileURL)
   },
   {
     immediate: true, // 是否立即执行

package/src/identificationCard/identificationCard.vue

@@ -190,11 +190,13 @@
                   <td colspan="2">{{ item.r3c2 }}</td>
                 </tr>
                 <tr>
-                  <td>客户名称</td>
+                  <!-- 供应商 -->
+                  <td>{{ item.r4c1 }}</td>
                   <td colspan="2">{{ item.r4c2 }}</td>
                 </tr>
                 <tr>
-                  <td>流转批号</td>
+                  <!-- 材料厂商 -->
+                  <td>{{ item.r5c1 }}</td>
                   <td colspan="2">{{ item.r5c2 }}</td>
                   <td colspan="2" class="content">
                     {{ item.r5c4 }}
@@ -232,6 +234,11 @@
                     {{ item.r9c4 }}
                   </td>
                 </tr>
+                <tr>
+                  <!-- 批次号 -->
+                  <td>{{ item.r10c1 }}</td>
+                  <td colspan="3">{{ item.r10c2 }}</td>
+                </tr>
                 <tr>
                   <td>备注</td>
                   <td colspan="3">{{ item.r12c2 }}</td>
@@ -417,11 +424,13 @@
                   <td colspan="2">{{ item.r3c2 }}</td>
                 </tr>
                 <tr>
-                  <td>客户名称</td>
+                  <!-- 供应商 -->
+                  <td>{{ item.r4c1 }}</td>
                   <td colspan="2">{{ item.r4c2 }}</td>
                 </tr>
                 <tr>
-                  <td>流转批号</td>
+                  <!-- 材料厂商 -->
+                  <td>{{ item.r5c1 }}</td>
                   <td colspan="2">{{ item.r5c2 }}</td>
                   <td colspan="2" class="content">
                     {{ item.r5c4 }}
@@ -472,15 +481,21 @@
                   </td>
                 </tr>
                 <tr>
-                  <td>备注</td>
+                  <!-- 批次号 -->
+                  <td>{{ item.r12c1 }}</td>
                   <td colspan="3">{{ item.r12c2 }}</td>
                 </tr>
+                <tr>
+                  <!-- 备注 -->
+                  <td>{{ item.r13c1 }}</td>
+                  <td colspan="3">{{ item.r13c2 }}</td>
+                </tr>
                 <tr>
                   <td colspan="4">
                     <div class="b2bcode" style="margin: 1px">
                       <bar-code
                         :key="item + new Date()"
-                        :value="item.r13c1"
+                        :value="item.r14c1"
                         :maxWidth="myWidth"
                         :newClass="index"
                       ></bar-code>
@@ -531,7 +546,7 @@
                   <td colspan="2">{{ item.r3c2 }}</td>
                 </tr>
                 <tr>
-                  <td>流转批号</td>
+                  <td>批次号</td>
                   <td colspan="2">{{ item.r4c2 }}</td>
                 </tr>
                 <tr>
@@ -1125,7 +1140,7 @@
                   <td colspan="2">{{ item.r3c2 }}</td>
                 </tr>
                 <tr>
-                  <td>流转批号</td>
+                  <td>批次号</td>
                   <td colspan="2">{{ item.r4c2 }}</td>
                 </tr>
                 <tr>

package/src/sortableTable/headerInput.vue

@@ -1,44 +1,7 @@
-<!-- @format -->
-
 <template>
   <div style="display: flex; align-items: center; justify-content: center">
     <span>{{ text }}</span>
-
     <div class="myporpove" id="myinputs">
-      <!-- <el-button @click.stop="handleButtonClick"> </el-button> -->
-
-      <!-- <el-popover
-        ref="popover"
-        :title="text"
-        content="这是一段内容，这是一段内容。"
-        :visible="visible"
-      >
-        <template #reference>
-          <div style="width: 23px; height: 16px">
-            <svg-icon
-              name="mysearch"
-              size="15"
-              :color="value ? '#2C93FF' : ''"
-              @click="toggle"
-            />
-          </div>
-        </template>
-        <el-select
-          v-model="operator"
-          class="m-2 input-select"
-          placeholder="请选择查询类型"
-          size="default"
-          clearable
-        >
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-popover> -->
-
       <header-popover
         :popperStyle="PopperStyle"
         :trigger="trigger"
@@ -172,11 +135,10 @@
 <script setup lang="ts">
 defineOptions({ name: 'ci-headerInput' })
 import SvgIcon from '@/components/SvgIcon.vue'
-import { computed, ref, watch, toRefs } from 'vue'
+import { computed, ref, watch } from 'vue'
 import lodash from 'lodash'
 import headerPopover from './utils/headerPopover.vue'
 import { TooltipTriggerType } from 'element-plus'
-const popover = ref()
 
 // 定义 props 的类型
 interface SelectConfig {
@@ -440,17 +402,19 @@ if (props.type !== 'date') {
 watch(operator, (newVal, oldVal) => {
   console.log('operator.value: ', newVal, oldVal)
   if (newVal == 'between' || oldVal == 'between') {
+    console.log('重置value的值')
     value.value = ''
   }
 })
 
 // 返回面板数据
 const confirm = (closeF?: Function) => {
-  if (props.selectConfig.selectMultiple) {
-    operator.value = 'in'
+  // 下拉列表框选值的时候处理最终值
+  if (props.type === 'select' && props.selectConfig.selectMultiple) {
+    operator.value = 'in' // 多选
     value.value = selectValue.value?.join(',') || ''
-  } else {
-    operator.value = '='
+  } else if (props.type === 'select' && !props.selectConfig.selectMultiple) {
+    operator.value = '=' // 单选
     value.value = selectValue.value
   }
   // 将当前参数的值放到对象中
@@ -469,6 +433,13 @@ const confirm = (closeF?: Function) => {
 
 // 清除按钮：清空输入框和发送请求
 const clear = () => {
+  // 如果是select下拉框，就清空select的值
+  if (props.type === 'select' && props.selectConfig.selectMultiple) {
+    selectValue.value = []
+  } else if (props.type === 'select' && !props.selectConfig.selectMultiple) {
+    selectValue.value = void 0
+  }
+
   value.value = void 0
   confirm()
 }
@@ -478,67 +449,7 @@ const close = () => {}
 const open = () => {
   emits('open')
 }
-/*
-const handleShow = () => {
-  console.log('打开')
-  visible.value = true
-  document.addEventListener('mousedown', handleDocumentClick)
-}
-const handleHide = () => {
-  console.log('关闭')
-  visible.value = false
-  document.removeEventListener('mousedown', handleDocumentClick)
-}
-
-const handleDocumentClick = (e: any) => {
-  // 查找所有的class名称为 is-light 的元素
-  // const el1 = document.querySelector('.is-light')
-  // console.log('el1: ', el1)
-
-  const elements = document.querySelectorAll('[id^="el-popper-container-"]')
-  console.log('elements: ', elements)
-
-  if (elements && elements.length > 0) {
-    for (let i = 0; i < elements.length; i++) {
-      const element = elements[i]
-      console.log('element: ', element)
-      if (element?.contains(e.target)) {
-        return
-      }
-    }
-  }
-
-  // 通过自定义属性 aria-label 查找元素
-  const el = document.querySelector(`[aria-label="${props.text}"]`)
-  console.dir('el: ', el)
-  // 获取 el 的class为.is-light的兄弟元素
-  const el2 = el?.parentElement?.querySelector('.el-select__popper')
-  console.dir('el2: ', el2)
-  console.log('是否包含: ', el?.contains(e.target))
-  // 获取class为 porpove的元素;
-
-  // 判断点击的元素是否是是e的子元素
-  if (el?.contains(e.target)) {
-    return
-  }
-  if (!popover.value.$el.contains(e.target)) {
-    console.log(22222)
-    handleHide()
-  }
-}
 
-const visible = ref(false)
-// const toggle = () => {
-//   console.log('visible', visible.value)
-//   if (visible.value) {
-//     // visible.value = false
-//   } else {
-//     visible.value = true
-//     document.addEventListener('mousedown', handleDocumentClick)
-//     lodash.debounce(() => handleShow(), 500)
-//   }
-// }
-*/
 // 排序
 const orderChangtop = (val: string) => {
   console.log('升序', ordersVal.value)

package/src/sortableTable/sortableTable copy.vue

@@ -0,0 +1,221 @@
+<template>
+  <el-table v-bind="table || {}" :data="data" :header-cell-class-name="setClass" ref="elTableRef">
+    <slot></slot>
+    <sortable-table-column-cell
+      v-if="props.modelValue"
+      v-for="v in rowValue"
+      :key="v.id"
+      :data="v"
+    />
+  </el-table>
+</template>
+<script setup lang="ts">
+defineOptions({ name: 'ci-table' })
+import { CellCls, ElTable } from 'element-plus'
+import Sortable from 'sortablejs'
+import { computed, onBeforeMount, onMounted, ref } from 'vue'
+import { SortableTableIns, SortColumn } from './utils/interface'
+import sortableTableColumnCell from './index/sortableTableColumnCell'
+import { cloneDeep } from 'lodash'
+let props = defineProps<SortableTableIns>()
+const elTableRef = ref<InstanceType<typeof ElTable>>()
+const emits = defineEmits(['update:modelValue', 'update:data'])
+const rowValue = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emits('update:modelValue', value)
+  }
+})
+const data = computed({
+  get() {
+    return props.data
+  },
+  set(value) {
+    emits('update:data', value)
+  }
+})
+
+onBeforeMount(() => {})
+onMounted(() => {
+  columnDrop(elTableRef.value?.$el)
+})
+const columnDrop = (elem?: HTMLTableElement) => {
+  // 如果没有传入elem，则返回
+  if (!elem) return
+  // 获取表格的表头元素
+  const header = elem.querySelector('.el-table__header-wrapper')
+  // 如果没有表头元素，则返回
+  if (!header) return
+  // 设置延时执行函数
+  setTimeout(() => {
+    // 获取表头中的所有行元素
+    const trs = header.querySelectorAll('thead > tr')
+    // 遍历行元素
+    trs.forEach((v) => {
+      let tr = v as HTMLElement
+      // 创建拖拽排序对象
+      Sortable.create(tr, {
+        // 动画时间
+        animation: 180,
+        // 延迟时间
+        delay: 0,
+        // 拖拽元素
+        draggable: '.sortable',
+        // 过滤器
+        filter: (evt, item) => !getLocation(item),
+        // 拖拽排序时触发的函数
+        onMove: ({ dragged, related }) => {
+          // 获取拖拽元素的排序位置
+          let location = getLocation(dragged)
+          // 如果没有排序位置，则返回false
+          if (!location) return false
+          // 获取排序位置的数组
+          const locationArr = location.split('_').slice(1).map(Number)
+          // 判断拖拽元素是否在相关元素之前
+          return inChildren(locationArr[0], getIndex(tr, dragged), getIndex(tr, related))
+        },
+        // 拖拽排序后的函数
+        onUpdate({ oldIndex, newIndex }) {
+          // 如果没有排序值，则返回
+          if (!rowValue.value) return
+          // 如果没有旧的索引和新的索引，则返回
+          if (oldIndex === void 0 || newIndex === void 0) return
+          // 获取旧的th元素
+          let oldTh = tr.children[oldIndex]
+          // 获取新的th元素
+          let newTh = tr.children[newIndex]
+          // 获取旧的排序位置
+          let oldLocation = getLocation(oldTh)
+          // 获取新的排序位置
+          let newLocation = getLocation(newTh)
+          // 如果没有旧的排序位置或者新的排序位置，则返回false
+          if (!oldLocation || !newLocation) return false
+          // 获取旧的排序位置的数组
+          let oldLocationArr = oldLocation.split('_').slice(1).map(Number)
+          // 如果旧的排序位置的第一个元素为1，则减去count
+          if (oldLocationArr[0] === 1) {
+            let count = tr.querySelectorAll('.el-table-fixed-column--left').length
+            newIndex -= count
+            oldIndex -= count
+          }
+          // 获取新的排序位置的数组
+          let newLocationArr = newLocation.split('_').slice(1).map(Number)
+          // 获取旧的路径
+          let oldPath = getPath(oldLocationArr[0], oldIndex)
+          // 获取新的路径
+          let newPath = getPath(newLocationArr[0], newIndex)
+          // 如果没有旧的路径或者新的路径，则返回false
+          if (!oldPath || !newPath) return false
+          // 克隆排序值
+          let tem = cloneDeep(rowValue.value)
+          // 设置新的路径和新的排序值
+          setValue(cloneDeep(getValue(oldPath)), newPath, tem)
+          // 设置旧的路径和旧的排序值
+          setValue(cloneDeep(getValue(newPath)), oldPath, tem)
+          // 设置新的排序值
+          rowValue.value = tem
+        }
+      })
+    })
+  })
+}
+const getIndex = (father: HTMLElement, child: HTMLElement) =>
+  Array.from(father.children).indexOf(child)
+// 获取元素的路径
+const getLocation = (dom: Element) => dom && dom.className.match(/sortable_[0-9]+_[0-9]+/g)?.[0]
+// 判断当前元素是否在当前行中
+const inChildren = (level: number, from: number, to: number) => {
+  if (!rowValue.value) return false
+  if (level === 1) return true
+  let item = levelFlat(level - 1).filter((v) => !v.hide)
+  return getColumnFatherIndex(item, from) === getColumnFatherIndex(item, to)
+}
+// 获取当前元素的父级元素的索引
+const getColumnFatherIndex = (item: SortColumn[], end: number) => {
+  let i = 0
+  while (end >= 0) {
+    const v = item[i]
+    i++
+    if (v.hide) continue
+    let children = v.children
+    if (!children) return false
+    end -= children.length
+  }
+  return i
+}
+// 获取当前元素的路径
+const getPath = (level: number, end: number) => {
+  if (!rowValue.value) return
+  end += hideCount(level, end)
+  if (level === 1) return [end]
+  let path = Array.from({ length: level }).map((v) => 0)
+  if (!end) {
+    f(rowValue.value, 0)
+    path[level - 1] = 0
+  } else
+    while (end > 0) {
+      f(rowValue.value, 0)
+      end--
+    }
+  function f(data: SortColumn[], depth: number) {
+    let flag = 0
+    for (let i = 0; i < data.length; i++) {
+      let v = data[i]
+      if (depth === level - 1) {
+        if (flag !== i) {
+          flag = i
+          path[depth] = 0
+        }
+        path[depth] += 1
+      } else if (v.children) return f(v.children, depth + 1)
+      else path[depth] += 1
+    }
+  }
+  return path
+}
+// 获取当前元素的值
+const getValue = (
+  path: number[],
+  parent?: boolean,
+  data: SortColumn[] = rowValue.value
+): SortColumn => {
+  if (!path.length) path[0] = 0
+  if (path.length <= (parent ? 2 : 1)) return data[path[0]]
+  return getValue(path.slice(1), parent, data[path[0]].children)
+}
+// 设置当前元素的值
+const setValue = (data: SortColumn, path: number[], value: SortColumn[]): SortColumn[] => {
+  if (path.length) {
+    let tem = value[path[0]]
+    if (path.length === 1) value[path[0]] = data
+    else if (tem.children) value[path[0]].children = setValue(data, path.slice(1), tem.children)
+  }
+  return value
+}
+// 计算当前元素的隐藏数量
+const hideCount = (level: number, index: number) =>
+  levelFlat(level)
+    .slice(0, index + 1)
+    .filter((v) => v.hide).length
+// 获取当前行的数据
+const levelFlat = (level: number, data = rowValue.value): SortColumn[] => {
+  if (level > 1)
+    return levelFlat(
+      level - 1,
+      data.filter((v) => v.children).flatMap((v) => v.children) as SortColumn[]
+    )
+  return data
+}
+// 设置当前元素的类名
+const setClass: CellCls<typeof props.data> = ({ column }) => {
+  let className = props.table?.headerCellClassName || ''
+  if (!column.fixed && column.id) {
+    className += ` sortable sortable_${column.level}_${column.no}`
+  }
+  return className as string
+}
+defineExpose({ table: elTableRef })
+</script>
+<style scoped></style>