ci-plus 1.5.1 → 1.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ci-plus",
-  "version": "1.5.1",
+  "version": "1.5.3",
   "description": "ci组件库",
   "main": "./index.ts",
   "scripts": {
@@ -12,7 +12,7 @@
     "vue",
     "element-plus",
     "ui组件库二次封装",
-    "标识卡模板中将下道工序改为显示名称"
+    "utils中的附件下载方法新增一个downFileFetchV2函数"
   ],
   "type": "module",
   "author": {

package/src/dailog/dialog.vue

@@ -4,6 +4,10 @@
 defineOptions({ name: 'ci-dialog' })
 import { ref, reactive } from 'vue'
 import { Close, FullScreen } from '@element-plus/icons-vue'
+import {
+  ElDialog,
+  ElButton,
+} from 'element-plus'
 import './style/index.less'
 //  接收fugure组件传值
 export interface Props {

package/src/fileRelated/ciupload.vue

@@ -39,7 +39,13 @@
 <script setup lang="ts">
 defineOptions({ name: 'ci-upload' })
 import { ref } from 'vue'
-import { ElMessage, ElLoading, genFileId } from 'element-plus'
+import {
+  ElMessage,
+  ElLoading,
+  genFileId,
+  ElButton,
+  ElPopover
+} from 'element-plus'
 import axios from 'axios'
 import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
 const upload = ref<UploadInstance>()

package/src/fileRelated/seeFile.vue

@@ -31,7 +31,11 @@ defineOptions({ name: 'ci-seeFile' })
 import { ref, watch } from 'vue'
 import axios from 'axios'
 import apis from '../utils/baseApi'
-import { ElMessage } from 'element-plus'
+import {
+  ElMessage,
+  ElButton,
+  ElPopover
+} from 'element-plus'
 
 const props = defineProps({
   url: {
@@ -47,7 +51,7 @@ const props = defineProps({
 // 定义一个函数，用于处理字符串
 const setFilePath = (arr: string[], url?: string) => {
   // console.log('重新渲染数据', arr);
-  if (arr && arr.length > 0) {
+  if (arr && Array.isArray(arr) && arr.length > 0) {
     let newArr: { name: string; oldName: string }[] = []
     arr.forEach((item, i) => {
       let segments = item.split('.')
@@ -65,7 +69,7 @@ const setFilePath = (arr: string[], url?: string) => {
 
 // 将路径处理成附件的参数
 const fileArr = (url: string, pathArr: string[]) => {
-  if (pathArr && pathArr.length > 0) {
+  if (pathArr && Array.isArray(pathArr) && pathArr.length > 0) {
     let objArr: any = []
     if (pathArr.length > 0) {
       pathArr.map((item: any) => {

package/src/fileRelated/uploadV2.vue

@@ -83,7 +83,12 @@ const fileArr = (url: string, pathArr: string[]) => {
 }
 
 import { ref } from 'vue'
-import { ElMessage, ElLoading, genFileId } from 'element-plus'
+import {
+  ElMessage,
+  ElLoading,
+  ElButton,
+  ElPopover
+} from 'element-plus'
 import axios from 'axios'
 import type {
   UploadFile,

package/src/identificationCard/identificationCard.vue

@@ -1439,6 +1439,7 @@
 defineOptions({ name: 'ci-identificationCard' })
 import { ref, onMounted, nextTick, watch, computed } from 'vue'
 import barCode from './barCode.vue'
+import { ElButton,ElImage } from 'element-plus'
 import CiQrcode from './qrcode'
 // 导入 public/C&U.png 图片
 // import C_U from '@/assets/C&U.png'

package/src/queryCondition/src/index.vue

@@ -144,6 +144,12 @@
 defineOptions({ name: 'ci-query-condition' })
 import RenderComp from './renderComp.vue'
 import { computed, ref, watch, useSlots, onMounted, reactive, toRef } from 'vue'
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElIcon,
+} from 'element-plus'
 const props = defineProps({
   opts: {
     type: Object,

package/src/select/select.vue

@@ -57,6 +57,11 @@
 <script setup lang="ts">
 defineOptions({ name: 'ci-select' })
 import { computed, useSlots } from 'vue'
+import {
+  ElPagination,
+  ElCheckbox,
+  ElOption
+} from 'element-plus'
 const props: any = defineProps({
   modelValue: {
     type: [String, Number, Array]

package/src/selectSuffix/selectSuffix.vue

@@ -171,7 +171,21 @@
 <script setup lang="ts">
 import { reactive, h, ref, onMounted, watch } from 'vue'
 import { Operation, Search } from '@element-plus/icons-vue'
-import { ElMessage, ElTable } from 'element-plus'
+import {
+  ElMessage,
+  ElTable,
+  ElTableColumn,
+  ElSelectV2,
+  ElPagination,
+  ElIcon,
+  ElDialog,
+  ElRow,
+  ElCol,
+  ElButtonGroup,
+  ElTooltip,
+  ElButton,
+  ElInput
+} from 'element-plus'
 import axios from 'axios'
 import { SelectSuffix, Basic, AnyO } from './types'
 defineOptions({

package/src/selectTable/src/index.vue

@@ -152,7 +152,7 @@ defineOptions({ name: 'ci-select-table' })
 import TQueryCondition from '../../queryCondition/src/index.vue'
 import RenderCol from './renderCol.vue'
 import { computed, useAttrs, useSlots, ref, watch, nextTick, reactive, onMounted } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage,ElInput,ElSelect,ElButton,ElTable,ElTableColumn,ElRadio,ElPagination } from 'element-plus'
 import ClickOutside from '../../utils/directives/click-outside/index'
 const props = defineProps({
   // input输入框的值（modelValue）

package/src/sortableTable/headerCheckBox.vue

@@ -31,7 +31,7 @@
 import { computed, ref } from 'vue'
 import headerPopover from './utils/headerPopover.vue'
 import filterIconVue from './utils/filterIcon.vue'
-import { TooltipTriggerType } from 'element-plus'
+import { TooltipTriggerType,ElCheckboxGroup,ElCheckbox } from 'element-plus'
 const props = defineProps<{
   text?: string
   initValue?: string

package/src/sortableTable/headerInput.vue

@@ -169,8 +169,7 @@ 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 filterIconVue from './utils/filterIcon.vue'
-import { TooltipTriggerType } from 'element-plus'
+import { TooltipTriggerType,ElSelect,ElOption,ElInput,ElSelectV2,ElPagination,ElDatePicker } from 'element-plus'
 
 // 定义 props 的类型
 interface SelectConfig {

package/src/sortableTable/headerRange.vue

@@ -59,7 +59,7 @@
 import { computed, ref } from 'vue'
 import headerPopover from './utils/headerPopover.vue'
 import filterIconVue from './utils/filterIcon.vue'
-import { TooltipTriggerType } from 'element-plus'
+import { TooltipTriggerType, ElInput, ElDatePicker } from 'element-plus'
 import { Shortcuts } from './utils/dateShortcuts'
 type InputConfig = {
   placeholder?: string

package/src/sortableTable/headerSelectV2.vue

@@ -44,9 +44,8 @@
 import SvgIcon from '@/components/SvgIcon.vue'
 import { computed, ref } from 'vue'
 import headerPopover from './utils/headerPopover.vue'
-import filterIconVue from './utils/filterIcon.vue'
+import { TooltipTriggerType, ElSelectV2   } from 'element-plus'
 import { Props } from 'element-plus/es/components/select-v2/src/useProps'
-import { TooltipTriggerType } from 'element-plus'
 import { useWeighingStore } from '@/store/Weighing'
 import { removeParamsFilters } from './utils/removeParamsFilters'
 const store = useWeighingStore()

package/src/sortableTable/sortableTable.vue

@@ -22,7 +22,7 @@
 </template>
 <script setup lang="ts">
 defineOptions({ name: 'ci-table' })
-import { CellCls, ElTable } from 'element-plus'
+import { CellCls, ElTable  } from 'element-plus'
 import Sortable from 'sortablejs'
 import { VNode, computed, ref } from 'vue'
 import { SortableTableIns, SortColumn } from './utils/interface'

package/src/sortableTable/sortableTableDialog.vue

@@ -52,6 +52,7 @@ import { SortableTableDialog } from './utils/interface'
 import sortableTableDragItem from './utils/sortableTableDragItem.vue'
 import { Rank } from '@element-plus/icons-vue'
 import SvgIcon from '../svgIcon/svgicon.vue'
+import { ElDialog,ElButton,ElTooltip,ElIcon,ElPopover } from 'element-plus'
 
 const emits = defineEmits(['update:modelValue', 'update:data', 'submit'])
 const state = ref(false)

package/src/sortableTable/utils/headerPopover.vue

@@ -12,7 +12,7 @@
     <template #reference>
       <slot name="reference" :open="open" :close="close" :toggle="toggle" />
     </template>
-    <div style="display: flex; align-items: center; justify-content: center" v-loading="loading">
+    <div style="display: flex; align-items: center; justify-content: center" >
       <div style="flex-grow: 1">
         <slot :closeF="close" />
       </div>
@@ -39,7 +39,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { ElPopover, TooltipTriggerType } from 'element-plus'
+import { ElPopover,ElButton, TooltipTriggerType } from 'element-plus'
 const popoverRef = ref<InstanceType<typeof ElPopover>>()
 const props = defineProps<{
   popperStyle: any // el-popover的自定义样式

package/src/sortableTable/utils/sortableTableColumnCell.vue

@@ -55,6 +55,7 @@
 defineOptions({ name: 'ci-columncell' })
 import { Scope, SortColumn } from './interface'
 import { h } from 'vue'
+import { ElTableColumn} from 'element-plus'
 
 const props = defineProps<{
   data: SortColumn

package/src/sortableTable/utils/sortableTableDragItem.vue

@@ -47,6 +47,7 @@
 <script setup lang="ts">
 import SvgIcon from '../../svgIcon/index'
 import { computed } from 'vue'
+import { ElInput, ElButton , ElIcon} from 'element-plus'
 // import draggable from 'vuedraggable'
 import { VueDraggable } from 'vue-draggable-plus'
 import { SortColumn, SortableTableIns } from './interface'

package/src/utils/ajaxBox.ts

@@ -62,6 +62,14 @@ const downFileFn = function (blob: Blob | BlobPart, fileName: string) {
 type Obj = {
   [key: string]: any
 }
+
+interface Config {
+  method?: string,  // 请求方法，默认为 GET | POST
+  headers?: Object, // 请求头
+  cbpercentage?: Function  // 获取下载进度的回调函数
+  fileName?: string, // 下载后的文件名
+  chunkSize?: number, // 每次下载的块大小，默认为 10KB
+}
 const ajaxBox = {
   downFile: function (blob: Blob | BlobPart, fileName: string) {
     downFileFn(blob, fileName);
@@ -80,18 +88,28 @@ 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',
     }
+    let _headers
+    if (options.method === 'GET' || method === 'get') {
+      _headers = {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      }
+
+    } else if (options.method === 'POST' || method === 'post') {
+      _headers = {
+        'Content-Type': 'application/json', //设置为json格式
+      }
+    }
     // 判断请求是否为get请求，若是get请求，则将params参数拼接在url后面
     if (method === 'GET') {
       const queryString = new URLSearchParams(params).toString()
       fillAddress = fillAddress + '?' + queryString
     }
     if (headers) {
-      options['headers'] = headers
+      options['headers'] = headers || _headers
     }
     if ((method === 'post' || method === 'POST') && params) {
       options['body'] = JSON.stringify(params)
@@ -151,10 +169,111 @@ const ajaxBox = {
           }
         }
 
+        readBlobInChunks()
+      })
+  },
+
+  // 下载文件:2.0版本
+  /**
+   * 下载文件函数
+   * @param url string     必传 表示服务端接口url地址
+   * @param params  Obj    可选 请求参数
+   * @param config Config  可选 请求配置
+   * Config Config {
+                      method?: string,  // 请求方法，默认为 GET | POST
+                      headers?: Object, // 请求头，默认值根据method方法判断
+                      cbpercentage?: Function  // 获取下载进度的回调函数
+                      fileName?: string,  // 下载后的文件名默认：'附件'
+                      chunkSize?: number, // 每次下载的块大小，默认为 10KB
+                    }
+   * 将给定的blob对象转换为文件，并提供一个下载链接以供用户下载。
+   * 如果blob对象是JSON格式，则尝试解析为JavaScript对象，并显示相应的错误消息。
+   * 如果解析失败，则直接以原始格式下载blob对象。
+   */
+
+  downFileFetchV2: function (url: string, params?: Obj, config?: Config) {
+    let options = {
+      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',
+      }
+
+    } else if (options.method === 'POST' || options.method === 'post') {
+      _headers = {
+        'Content-Type': 'application/json', // 设置为json格式
+      }
+    }
+    // 数组请求头: 优先使用传递的请求头，如果没有传递，则使用默认的请求头
+    options['headers'] = config?.headers || _headers
+
+    // 判断请求是否为get请求，若是get请求，则将params参数拼接在url后面
+    if (options.method === 'GET') {
+      const queryString = new URLSearchParams(params).toString()
+      url = url + '?' + queryString
+    }
+    // 处理post请求的参数
+    if ((options.method === 'post' || options.method === 'POST') && params) {
+      options['body'] = JSON.stringify(params)
+    }
+
+    // 定义每次读取的数据块大小（字节）
+    let chunkSize = config?.chunkSize || 10240 // 例如，10KB
+
+    // 初始化已下载的字节数
+    let downloaded = 0
+    // 初始化 Blob 切片起始点
+    let start = 0
+
+    fetch(url, options)
+      .then((res) => {
+        // console.log('resssssss: ', res)
+        if (!res.ok) {
+          throw new Error('Network response was not ok')
+        }
+        return res.blob()
+      })
+      .then((blob) => {
+        // console.log('blob: ', blob)
+        const reader = new FileReader() // 创建 FileReader 对象
+        const readBlobInChunks = () => {
+          // 创建一个 Blob 切片，大小为 chunkSize
+          const chunkBlob = blob.slice(start, start + chunkSize)
+          start += chunkSize // 更新起始点
+          // 读取 Blob 切片
+          reader.readAsArrayBuffer(chunkBlob)
+          reader.onload = () => {
+            // 累加已下载的字节数
+            // downloaded += reader.result.byteLength
+            if (typeof reader.result === 'string' || reader.result === null) {
+              console.log('reader.result不为 ArrayBuffer');
+              // 处理字符串的情况，可能需要转换为 ArrayBuffer 或者其他处理逻辑
+            } else {
+              downloaded += reader.result.byteLength;
+            }
+            // 计算下载进度百分比
+            const total = blob.size
+            const progress = ((downloaded / total) * 100).toFixed(2)
+            config?.cbpercentage && config?.cbpercentage(progress) // 如果传递了获取下载进度的回调函数，则调用回调函数传递进度百分比
+            console.log(`下载进度: ${progress}%`)
+            // 如果还有数据未读取，则继续读取
+            if (start < total) {
+              readBlobInChunks()
+            } else {
+              console.log('下载完成.')
+              // 处理下载完成的数据，例如将其保存或显示
+              downFileFn(blob, _fileName)
+            }
+          }
+        }
         readBlobInChunks()
       })
   }
 
+
   /*
     sendJSONP: function (url, callbackName, callback) {
       const script = document.createElement('script');
@@ -182,10 +301,9 @@ export default ajaxBox;
 
 
 /**
- * 使用下载示例
+ * 使用下载示例 get
 const exportFile = () => {
   let rowData = InventoryTableRef.value!.getSelectionRows()
-
   const url = storageModule + 'storage_standing_book_batch_export_get/'
   const headers = {
     'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
@@ -204,5 +322,26 @@ const exportFile = () => {
     headers,
     params,
   )
+}
+使用下载示例 post
+const exportFile = () => {
+  let rowData = WeighingTableRef.value!.getSelectionRows()
+  const url = storageModule + 'weighing_record_batch_export_post/'
+  const headers = {
+    'Content-Type': 'application/json', //设置为json格式
+  }
+  const params = {
+    ids: rowData.map((v: { id: any }) => v.id), // 直接数组形式
+    state: 1,
+    org_id: UserData.orgId,
+  }
+  console.log('params', params)
+  CiPlus.Fn.ajaxBox.downFileFetch(
+    url,
+    '称重记录数据(批次).xlsx',
+    'POST',
+    headers,
+    params,
+  )
 }
  */

package/src/sortableTable/utils/sortableTableColumnCell2.vue

@@ -1,70 +0,0 @@
-<!-- /*
-* @module sortableTableColumnCell
-* @author : 杨佳贺&卖女孩的小火柴
-* @description : 表格列单元格
-* @version : 1.0.0
-* @since : 创建时间 2023-12-29 13:40:49
-* @lastTime : 2023-12-29 新增默认居中显示属性
-* @lastTime : 2024-01-03 新增默认超出隐藏悬停显示、拖拽改变列宽
-*/ -->
-
-<template>
-  <el-table-column v-if="!data.hide && data.children" v-bind="data.col">
-    <sortable-table-column-cell v-for="v in data.children || []" :key="v.key" :data="v" />
-  </el-table-column>
-  <el-table-column
-    v-else-if="!data.hide && data.scope"
-    v-bind="data.col"
-    :align="data.col.align || 'center'"
-    :showOverflowTooltip="data.col.showOverflowTooltip || true"
-    :resizable="data.col.resizable || true"
-  >
-    <template #default="scope">
-      {{ data.scope(scope) }}
-    </template>
-    <template #header="header">
-      <component :is="headerVue(header)" :header="header"></component>
-    </template>
-  </el-table-column>
-  <el-table-column
-    v-else-if="!data.hide && data.component"
-    v-bind="data.col"
-    :align="data.col.align || 'center'"
-    :showOverflowTooltip="data.col.showOverflowTooltip || true"
-    :resizable="data.col.resizable || true"
-  >
-    <template #default="scope">
-      <component :is="data.component(h, scope)" :scope="scope"></component>
-    </template>
-    <template #header="header">
-      <component :is="headerVue(header)" :header="header"></component>
-    </template>
-  </el-table-column>
-  <el-table-column
-    v-else-if="!data.hide"
-    v-bind="data.col"
-    :align="data.col.align || 'center'"
-    :showOverflowTooltip="data.col.showOverflowTooltip || true"
-    :resizable="data.col.resizable || true"
-  >
-    <template #header="header">
-      <component :is="headerVue(header)" :header="header"></component>
-    </template>
-  </el-table-column>
-</template>
-<script setup lang="ts">
-import { Scope, SortColumn } from './interface'
-import { h } from 'vue'
-defineOptions({ name: 'ci-columncell' })
-
-const props = defineProps<{
-  data: SortColumn
-}>()
-const headerVue = (header: Pick<Scope<any>, '$index' | 'column'>) => {
-  const item = props.data.header?.(h, header)
-  if (!item) return h('div', props.data.col.label)
-  if (typeof item === 'string') return h('div', item)
-  return item
-}
-</script>
-<style scoped></style>

package/src/sortableTable/utils/sortableTableDragItem2.vue

@@ -1,196 +0,0 @@
-<!-- 2023-12-29 新增显示/隐藏按钮 -->
-
-<template>
-  <!-- <vue-draggable
-    class="drag-container"
-    :list="modelValue"
-    chosen-class="hover"
-    handle=".mover"
-    draggable=".item"
-    itemKey="key"
-  > -->
-  <vue-draggable
-    class="drag-container"
-    v-model="modelValue"
-    chosen-class="hover"
-    handle=".mover"
-    draggable=".item"
-    itemKey="key"
-  >
-    <!-- <template #item="{ element, index }: { element: SortColumn; index: number }">
-      <div :class="{ item: true, 'item-hide': element.hide }">
-        <div class="mover">
-          <el-icon :size="16"><Rank /></el-icon>
-        </div>
-        <div class="title" @click="handleShow(element)">
-          {{ element.col.label }}
-        </div>
-        <div class="pin" v-if="showPin">
-          <span
-            v-if="element.col.fixed === true || element.col.fixed === 'left'"
-            @click="element.col.fixed = void 0"
-          >
-            <svg-icon name="regular-left" size="20" color="#2C93FF"></svg-icon>
-          </span>
-          <span v-else @click="element.col.fixed = 'left'">
-            <svg-icon name="regular-center" size="20"></svg-icon>
-          </span>
-          <span v-if="element.col.fixed === 'right'" @click="element.col.fixed = void 0">
-            <svg-icon name="regular-right" size="20" color="#2C93FF"></svg-icon>
-          </span>
-          <span v-else @click="element.col.fixed = 'right'">
-            <svg-icon name="regular-center" size="20"></svg-icon>
-          </span>
-        </div>
-        <div class="ifshow">
-          <el-button
-            :type="element.hide ? 'primary' : ''"
-            @click="handleShow(element)"
-            size="small"
-          >
-            {{ element.hide ? '显示' : '隐藏' }}
-          </el-button>
-        </div>
-        <div class="widths">
-          宽度：
-          <el-input class="w-50 m-2" v-model="element.col.width" size="small" width="50"></el-input>
-        </div>
-        <sortable-table-drag-item v-if="element.children" v-model="element.children" />
-      </div>
-    </template> -->
-    <div v-for="(element, index) in modelValue" :class="{ item: true, 'item-hide': element.hide }">
-      <div class="mover">
-        <el-icon :size="16"><Rank /></el-icon>
-      </div>
-      <div class="title" @click="element.hide = !element.hide">
-        {{ element.col.label }}
-      </div>
-      <div class="pin" v-if="showPin">
-        <!-- <span v-if="element.col.fixed === true || element.col.fixed === 'left'" @click="element.col.fixed = void 0">
-          <var-icon name="pin-off" :size="16" style="transform: rotate(-30deg); color: cadetblue" />
-        </span>
-        <span v-else @click="element.col.fixed = 'left'">
-          <var-icon name="pin" :size="16" style="transform: rotate(-30deg)" />
-        </span>
-        <span v-if="element.col.fixed === 'right'" @click="element.col.fixed = void 0">
-          <var-icon name="pin-off" :size="16" style="transform: scaleX(-1) rotate(-30deg); color: cadetblue" />
-        </span>
-        <span v-else @click="element.col.fixed = 'right'">
-          <var-icon name="pin" :size="16" style="transform: rotate(30deg)" />
-        </span> -->
-        <span
-          v-if="element.col.fixed === true || element.col.fixed === 'left'"
-          @click="element.col.fixed = void 0"
-        >
-          <svg-icon name="regular-left" size="20" color="#2C93FF"></svg-icon>
-        </span>
-        <span v-else @click="element.col.fixed = 'left'">
-          <svg-icon name="regular-center" size="20"></svg-icon>
-        </span>
-        <span v-if="element.col.fixed === 'right'" @click="element.col.fixed = void 0">
-          <svg-icon name="regular-right" size="20" color="#2C93FF"></svg-icon>
-        </span>
-        <span v-else @click="element.col.fixed = 'right'">
-          <svg-icon name="regular-center" size="20"></svg-icon>
-        </span>
-      </div>
-      <div class="ifshow">
-        <el-button :type="element.hide ? 'primary' : ''" @click="handleShow(element)" size="small">
-          {{ element.hide ? '显示' : '隐藏' }}
-        </el-button>
-      </div>
-      <div class="widths">
-        宽度：
-        <el-input class="w-50 m-2" v-model="element.col.width" size="small" width="50"></el-input>
-      </div>
-      <sortable-table-drag-item v-if="element.children" v-model="element.children" />
-    </div>
-  </vue-draggable>
-</template>
-<script setup lang="ts">
-import SvgIcon from '../../svgIcon/index'
-import { computed } from 'vue'
-// import draggable from 'vuedraggable'
-import { VueDraggable } from 'vue-draggable-plus'
-import { SortColumn, SortableTableIns } from './interface'
-import { Rank } from '@element-plus/icons-vue'
-const props = defineProps<{
-  modelValue: SortableTableIns['modelValue']
-  showPin?: boolean
-}>()
-const emits = defineEmits(['update:modelValue', 'update:data'])
-const modelValue = computed({
-  get() {
-    return props.modelValue
-  },
-  set(value) {
-    emits('update:modelValue', value)
-  }
-})
-
-// 显示或者隐藏列
-const handleShow = (col: SortColumn) => {
-  // console.log('显示或者隐藏列', col)
-  col.hide = !col.hide
-}
-</script>
-<style scoped lang="scss">
-$hoverBC: rgba(137, 182, 233, 0.5);
-
-.drag-container {
-  // display: flex;
-  width: 100%;
-  flex-direction: column;
-
-  .item {
-    border: 1px solid #f2f2f2;
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    width: 100%;
-    .mover,
-    .title {
-      padding: 5px;
-      cursor: pointer;
-      &:hover {
-        background: $hoverBC;
-      }
-    }
-    .title {
-      width: 150px;
-      border-left: 1px solid #f2f2f2;
-      border-right: 1px solid #f2f2f2;
-      overflow: hidden;
-    }
-    .pin {
-      cursor: pointer;
-      > *:hover {
-        background: $hoverBC;
-      }
-      > * {
-        padding: 5px;
-      }
-    }
-    .ifshow {
-      text-align: center;
-      flex: 1;
-      line-height: 32px;
-      .el-button {
-        margin-bottom: 0;
-      }
-    }
-    .widths {
-      .el-input {
-        width: 50px !important;
-        margin-right: 20px;
-      }
-    }
-  }
-  .item-hide {
-    background: rgba(218, 218, 218, 0.5);
-  }
-  .hover {
-    background: $hoverBC;
-  }
-}
-</style>