ci-plus 1.0.1 → 1.0.3

package/README.md

@@ -4,5 +4,56 @@
 #  本地安装项目
 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
 
 ```
+
+## 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'
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ci-plus",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "cc组件库",
   "main": "./index.ts",
   "scripts": {
@@ -16,29 +16,13 @@
   "author": "cc",
   "license": "ISC",
   "dependencies": {
-    "@element-plus/icons-vue": "^2.3.1",
-    "element-plus": "^2.5.1",
     "lodash": "^4.17.21",
-    "sortablejs": "^1.15.1",
-    "vuedraggable": "^2.24.3"
-  },
-  "devDependencies": {
     "less": "^4.2.0",
-    "vite-plugin-svg-icons": "^2.0.1"
-  },
-  "peerDependencies": {
-    "@element-plus/icons-vue": "^2.3.1",
-    "element-plus": "^2.5.1",
-    "lodash": "^4.17.21",
     "sortablejs": "^1.15.1",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vuedraggable": "^2.24.3"
   },
-  "peerDependenciesMeta": {
-    "element-plus": {
-      "optional": true
-    },
-    "lodash": {
-      "optional": true
-    }
-  }
+  "devDependencies": {},
+  "peerDependencies": {},
+  "peerDependenciesMeta": {}
 }

package/src/assets/icons/mysearch.svg

@@ -0,0 +1,33 @@
+<svg t="1703575342209" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12984" data-spm-anchor-id="a313x.search_index.0.i24.6fa73a81kLccOp" width="200" height="200">
+
+<path
+  d="M160.768 102.4h702.464L568.32 486.912V967.68l-139.776-128V486.912z"
+
+  p-id="12985"
+  data-spm-anchor-id="a313x.search_index.0.i25.6fa73a81kLccOp"
+  class="selected">
+</path>
+<path
+  d="M588.8 998.4c-6.656 0-13.824-2.048-18.944-6.656l-160.256-128c-7.168-5.632-11.776-14.848-11.776-24.064V497.152L115.712 120.832c-7.168-9.216-8.192-22.016-3.072-32.256s15.872-16.896 27.648-16.896h743.424c11.776 0 22.528 6.656 27.648 16.896s4.096 23.04-3.072 32.256L619.52 497.152V967.68c0 11.776-6.656 22.528-17.408 27.648-4.096 2.048-8.704 3.072-13.312 3.072z m-129.536-173.568l98.816 78.848V486.912c0-6.656 2.048-13.312 6.144-18.944L821.248 133.12h-619.52l251.392 335.36c4.096 5.12 6.144 11.776 6.144 18.432v337.92z"
+
+  p-id="12986"
+  data-spm-anchor-id="a313x.search_index.0.i21.6fa73a81kLccOp"
+  class="mysearch">
+</path>
+</svg>
+
+<!-- 漏斗筛选组件 -->
+<!-- <path
+  d="M160.768 102.4h702.464L568.32 486.912V967.68l-139.776-128V486.912z"
+  fill="#2C93FF"
+  p-id="12985"
+  data-spm-anchor-id="a313x.search_index.0.i25.6fa73a81kLccOp"
+  class="selected">
+</path>
+<path
+  d="M588.8 998.4c-6.656 0-13.824-2.048-18.944-6.656l-160.256-128c-7.168-5.632-11.776-14.848-11.776-24.064V497.152L115.712 120.832c-7.168-9.216-8.192-22.016-3.072-32.256s15.872-16.896 27.648-16.896h743.424c11.776 0 22.528 6.656 27.648 16.896s4.096 23.04-3.072 32.256L619.52 497.152V967.68c0 11.776-6.656 22.528-17.408 27.648-4.096 2.048-8.704 3.072-13.312 3.072z m-129.536-173.568l98.816 78.848V486.912c0-6.656 2.048-13.312 6.144-18.944L821.248 133.12h-619.52l251.392 335.36c4.096 5.12 6.144 11.776 6.144 18.432v337.92z"
+  fill="#666767"
+  p-id="12986"
+  data-spm-anchor-id="a313x.search_index.0.i21.6fa73a81kLccOp"
+  class="mysearch">
+</path> -->

package/src/assets/icons/regular-center.svg

@@ -0,0 +1,12 @@
+<svg
+  t="1703574894341"
+  class="icon"
+  viewBox="0 0 1024 1024"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  p-id="4767"
+  width="200"
+  height="200"
+>
+  <path d="M393.846154 64.174932l117.454119 0.399843H512.499805l117.454119-0.399843-10.395939 10.395939c-18.89262 18.89262-28.488872 44.982429-26.28973 71.472081l20.292073 250.502148c2.998829 36.68567 18.092932 72.171808 42.483405 99.661069l34.186646 38.684889-122.252245-0.899648-55.478329-0.399844h-0.99961l-55.478329 0.399844-122.452167 0.799687 34.186646-38.684888c24.390472-27.589223 39.484576-62.9754 42.483405-99.66107l20.292074-250.402187c2.199141-26.589613-7.397111-52.679422-26.289731-71.472081l-10.395939-10.395939m281.889887-64.174932h-0.199922L512.399844 0.599766h-0.799688L348.36392 0h-0.199922c-20.891839 0-39.684498 13.494729-45.582194 33.58688-4.098399 13.994533-1.899258 30.887934 17.79305 47.581414l38.584927 38.584927c5.597813 5.597813 8.39672 13.294807 7.796955 21.091761L346.464662 391.247169c-1.899258 23.190941-11.195627 45.08239-26.589613 62.475596l-61.87583 69.872706c-8.696603 9.796173-13.894572 22.291292-14.394377 35.386177-0.299883 8.996486 1.599375 18.89262 8.596642 27.28934 6.897306 8.296759 17.293245 12.894963 27.989067 12.894963h0.299882l175.931277-1.199532 55.178446 422.834831 0.399844 3.098789 0.399844-3.098789 55.178446-422.834831 175.931277 1.199532h0.299882c10.795783 0 21.191722-4.598204 27.989067-12.894963 6.897306-8.39672 8.796564-18.292854 8.596642-27.28934-0.399844-13.094885-5.697774-25.590004-14.394377-35.386177l-61.87583-69.872706c-15.393987-17.393206-24.690355-39.284654-26.589613-62.475596l-20.292074-250.402187c-0.599766-7.796954 2.199141-15.593909 7.796955-21.091761l38.584927-38.584927c19.692308-16.693479 21.891449-33.58688 17.79305-47.581414-5.997657-19.992191-24.790316-33.58688-45.682155-33.58688z" p-id="4768"></path>
+</svg>

package/src/assets/icons/regular-left.svg

@@ -0,0 +1,11 @@
+<svg t="1703571942554"
+  class="icon"
+  viewBox="0 0 1024 1024"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  p-id="3583"
+  width="200"
+  height="200"
+>
+<path d="M944.576 383.296a42.496 42.496 0 0 1-40.768 21.952h-62.656a27.456 27.456 0 0 0-20.992 9.728l-167.104 196.416a109.952 109.952 0 0 0-26.048 64.64l-5.76 95.68a58.048 58.048 0 0 1-15.232 36.096 40.512 40.512 0 0 1-26.048 13.568h-3.264a37.44 37.44 0 0 1-26.368-11.2L423.424 681.6l-347.2 266.752-2.432 2.24 1.984-2.56 266.816-347.328-128.512-126.848a37.248 37.248 0 0 1-11.008-29.632 41.152 41.152 0 0 1 13.568-26.048 57.6 57.6 0 0 1 36.096-15.232l95.68-5.76a109.952 109.952 0 0 0 64.576-26.24l196.416-167.104a27.456 27.456 0 0 0 9.728-20.992v-55.936a44.8 44.8 0 0 1 21.632-47.424 47.616 47.616 0 0 1 22.72-5.76 49.28 49.28 0 0 1 34.752 14.464l117.952 118.912 0.576 0.576 118.912 118.144a48.448 48.448 0 0 1 8.768 57.6z"  p-id="3584"></path>
+</svg>

package/src/assets/icons/regular-right.svg

@@ -0,0 +1,12 @@
+<svg
+  t="1703575012117"
+  class="icon"
+  viewBox="0 0 1024 1024"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  p-id="7766"
+  width="200"
+  height="200"
+>
+<path d="M418.828 642.702l0 157.703 38.272 37.575 158.377-155.61 345.128 278.212-265.838-356.04 157.41-154.71-39.51-38.813-157.972-2.407-313.29-238.838 73.013-71.685-35.28-34.695-315.743 310.18500001 35.257 34.67199999 79.402-77.287 240.773 311.737z"  p-id="7767"></path>
+</svg>

package/src/assets/icons/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/ccapp/ccapp.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-defineOptions({ name: 'cc-app' })
+defineOptions({ name: 'ci-app' })
 import { ref } from 'vue'
 const count = ref(0)
 const add = () => {

package/src/components.d.ts

@@ -10,9 +10,14 @@ declare module '@vue/runtime-core' {
     EaButton: typeof components.Button;
     EaIcon: typeof components.Icon;
     EaButtons: typeof components.Buttons;
-    CcDialog: typeof components.Dialog;
-    CcApp: typeof components.Ccapp;
-    CcTable: typeof components.sortableTable;
+    CiDialog: typeof components.Dialog;
+    CiApp: typeof components.Ccapp;
+    CiSvgicon: typeof components.Svgicon
+    CiSuffix: typeof components.Suffix;
+    CiTable: typeof components.SorTables;
+    CiHeadbtns: typeof components.Headbtns
+    CiSdialog: typeof components.Sdialog
+    CiColumncell: typeof components.Columncell
   }
 }
 export { };

package/src/dailog/dialog.vue

@@ -1,7 +1,7 @@
 <!-- @format -->
 
 <script setup lang="ts">
-defineOptions({ name: 'cc-dialog' })
+defineOptions({ name: 'ci-dialog' })
 import { ref, reactive } from 'vue'
 import { Close, FullScreen } from '@element-plus/icons-vue'
 import './style/index.less'
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
   closeOnClicModal: false,
   closeOnPressEscape: false,
   destroyOnClose: true,
-  style: 'width: 50%;translate(59px, 4px)',
+  style: 'width: 50%;translate(59px, 4px)'
 })
 
 // 给父亲组件传递回选中的数据
@@ -48,9 +48,7 @@ const MyFullscreen = ref(props.fullscreen) // 是否全屏
 
 // 定义一个函数获取窗口高度
 let windowHeightL =
-  window.innerHeight ||
-  document.documentElement.clientHeight ||
-  document.body.clientHeight
+  window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
 const windowHeight = ref(windowHeightL)
 
 /**
@@ -72,8 +70,7 @@ if (!MyFullscreen.value) {
 if (props.fullscreen == false) {
   console.log('判断进来没222')
   MyStyle.value =
-    props.style +
-    `max-height: calc( ${windowHeight.value}px - ${dTop.value});translate(59px, 4px)`
+    props.style + `max-height: calc( ${windowHeight.value}px - ${dTop.value});translate(59px, 4px)`
 }
 
 // 函数
@@ -133,13 +130,13 @@ const openChang = (val: any) => {
 
 defineExpose({
   showMydia,
-  closeDialog, //关闭函数
+  closeDialog //关闭函数
 })
 
 /////////////////////////////////////////////////////
 const domInfo = reactive({
   baseW: 0,
-  baseH: 0,
+  baseH: 0
 })
 const container = ref<HTMLElement>(null)
 
@@ -159,12 +156,8 @@ const updateTarget = (event: MouseEvent) => {
   // 两个鼠标移动事件间隔时间中当中鼠标移动的相对坐标;
   domInfo.baseW = parseInt(MyDialogRef.value.dialogContentRef.$el.style.width)
   domInfo.baseH = parseInt(MyDialogRef.value.dialogContentRef.$el.style.height)
-  MyDialogRef.value.dialogContentRef.$el.style.width = `${
-    domInfo.baseW + event.movementX
-  }px`
-  MyDialogRef.value.dialogContentRef.$el.style.height = `${
-    domInfo.baseH + event.movementY
-  }px`
+  MyDialogRef.value.dialogContentRef.$el.style.width = `${domInfo.baseW + event.movementX}px`
+  MyDialogRef.value.dialogContentRef.$el.style.height = `${domInfo.baseH + event.movementY}px`
   // console.log('参数x', event.movementX)
   // console.log('参数y', event.movementY)
 }
@@ -202,10 +195,7 @@ const onTdMousedown = (e: MouseEvent) => {
       <template #header="{ close, titleId, titleClass }">
         <div class="my-header">
           <div class="title">
-            <div
-              :id="titleId"
-              :class="titleClass"
-            >
+            <div :id="titleId" :class="titleClass">
               {{ title }}
             </div>
           </div>
@@ -217,13 +207,7 @@ const onTdMousedown = (e: MouseEvent) => {
               circle
               @click="fullscreenChang"
             />
-            <el-button
-              size="small"
-              type="danger"
-              :icon="Close"
-              circle
-              @click="closeDialog"
-            />
+            <el-button size="small" type="danger" :icon="Close" circle @click="closeDialog" />
           </div>
         </div>
       </template>
@@ -231,30 +215,16 @@ const onTdMousedown = (e: MouseEvent) => {
       <template #default="props">
         <!-- <div class="my-body"> -->
         <slot :data="MyDialogRef"></slot>
-        <slot
-          name="dialong"
-          :data="props"
-        ></slot>
+        <slot name="dialong" :data="props"></slot>
         <!-- </div> -->
-        <div
-          class="drag"
-          @mousedown="onTdMousedown($event)"
-        ></div>
+        <div class="drag" @mousedown="onTdMousedown($event)"></div>
       </template>
 
-      <template
-        #footer
-        v-if="showfooter"
-      >
+      <template #footer v-if="showfooter">
         <slot name="myfooter">
           <span class="dialog-footer">
             <el-button @click="closeDialog">取消</el-button>
-            <el-button
-              type="primary"
-              @click="Submit"
-            >
-              保存
-            </el-button>
+            <el-button type="primary" @click="Submit"> 保存 </el-button>
           </span>
         </slot>
       </template>

package/src/index.ts

@@ -2,4 +2,10 @@ export * from './button';
 export * from './icon';
 export * from './buttons';
 export * from './dailog';
-export * from './ccapp';
+export * from './ccapp';
+export * from './svgicon';// svg图标
+export * from './selectSuffix';
+export * from './sortableTable/index/headButtons'; // 导出排序表头按钮
+export * from './sortableTable/index/sortableTableTs'; // 导出排序表格
+export * from './sortableTable/index/sortableTableDialog'; // 导出表排序组件
+export * from './sortableTable/index/sortableTableColumnCell'; // 导出表列组件

package/src/selectSuffix/index.ts

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

package/src/selectSuffix/selectSuffix.vue

@@ -0,0 +1,239 @@
+<template>
+  <span
+    class="el-input-number__increase"
+    @click.stop="openTable"
+  >
+    <el-icon>
+      <Operation />
+    </el-icon>
+  </span>
+  <el-dialog
+    class="L-dialog"
+    v-model="basic.is_dialogTable"
+    :title="title ? title : '请选择'"
+    append-to-body
+    style="height: 60%; width: 800px"
+    draggable
+  >
+    <div
+      style="display: flex; flex-direction: column; height: 100%"
+      v-loading="basic.loading"
+    >
+      <el-row style="margin-bottom: 3px">
+        <el-col
+          v-if="mul && Array.isArray(props.modelValue)"
+          :span="14"
+        >
+          <template v-for="(v, i) in props.modelValue">
+            <el-tag
+              v-if="i <= 2"
+              :key="v"
+              closable
+              type=""
+              style="width: 70px"
+            >
+              {{ v }}
+            </el-tag>
+          </template>
+        </el-col>
+        <el-col
+          v-else
+          :span="14"
+          class="flex"
+        >
+          <el-tag
+            v-if="props.modelValue?.length"
+            closable
+            type=""
+            @close="closeTag"
+          >
+            {{ tagLabel }}
+          </el-tag>
+        </el-col>
+        <el-col :span="10">
+          <el-input
+            v-model="basic.search"
+            placeholder="模糊搜索"
+            @keyup.enter="getTableData({}, true)"
+            @change="getTableData({}, true)"
+          >
+            <template #append>
+              <el-button
+                icon="Search"
+                @click="getTableData({}, true)"
+              />
+            </template>
+          </el-input>
+        </el-col>
+      </el-row>
+      <el-table
+        :data="tableData"
+        size="small"
+        @row-click="rowClick"
+        ref="tableRef"
+        style="width: 100%; flex: 1"
+        :highlight-current-row="!mul"
+      >
+        <template v-for="column in columns">
+          <el-table-column
+            v-if="column.component"
+            v-bind="column.col"
+          >
+            <template #default="scope">
+              <component
+                :is="column.component(h, scope)"
+                :scope="scope"
+              ></component>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-else
+            v-bind="column.col"
+          />
+        </template>
+      </el-table>
+      <el-pagination
+        background
+        layout="total,sizes, prev, pager, next,jumper"
+        :pager-count="5"
+        :total="basic.count"
+        small
+        :page-sizes="[30, 100, 200]"
+        v-model:current-page="basic.page"
+        v-model:page-size="basic.limit"
+        @size-change="getTableData()"
+        @current-change="getTableData()"
+        @prev-click="getTableData()"
+        @next-click="getTableData()"
+        style="margin-top: 3px"
+      />
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'ci-suffix' })
+import { reactive, h, ref } from 'vue'
+import { ElMessage, ElTable } from 'element-plus'
+import axios from 'axios'
+import { SelectSuffix } from './types'
+interface AnyO {
+  [key: string]: any
+}
+interface Basic {
+  page: number
+  limit: number
+  count: number
+  is_dialogTable: boolean
+  loading: boolean
+  search: string
+}
+const tableRef = ref<InstanceType<typeof ElTable>>()
+const props = withDefaults(defineProps<SelectSuffix>(), {
+  title: '', //弹出层标题
+  modelValue: '', //下拉框value
+  columns: () => [], // 表格列配置
+  mul: false, //  是否多选
+  prop: () => ({ label: '', value: '' }), //下拉框字段对象
+  where: () => ({}), //弹出层打开需要展示Label的请求对象
+  axiosConfig: () => ({}), //Axios请求配置对象
+  isExist: false, // 是否选中关闭，单选默认true，多选默认false
+  searchKey: 'search', // 模糊搜索字段，默认search
+})
+console.log('props', props)
+
+const emits = defineEmits(['update:modelValue', 'change'])
+const basic = reactive<Basic>({
+  page: 1,
+  limit: 30,
+  count: 0,
+  loading: false,
+  is_dialogTable: false,
+  search: '',
+})
+const tagLabel = ref('')
+const tableData = ref<AnyO[]>([])
+const rowClick = (row: AnyO) => {
+  console.log('row', row)
+  if (!props.mul) {
+    emits('update:modelValue', row[props.prop.value])
+
+    emits('change', row[props.prop.value], row)
+    tagLabel.value = row[props.prop.label]
+    if (!props.isExist) basic.is_dialogTable = false
+  }
+}
+
+const closeTag = () => {
+  emits('update:modelValue', '')
+  tableRef.value!.setCurrentRow(null)
+}
+const openTable = () => {
+  basic.is_dialogTable = true
+  if (!tableData.value.length) getTableData()
+  let searchObj: AnyO = {}
+  searchObj[props.searchKey ? props.searchKey : 'search'] = props.modelValue
+  if (props.modelValue)
+    getAxios(props.where ? props.where : searchObj).then((res) => {
+      if (res.code == 200 && res.data.length) {
+        tagLabel.value = res.data[0]?.[props.prop.label]
+      } else tagLabel.value = ''
+      setCurrent()
+    })
+}
+const getTableData = (obj = {}, page1 = false) => {
+  getAxios(obj, page1).then((res) => {
+    if (res.code !== 200) return ElMessage.warning(res.msg)
+    basic.count = res.count
+    tableData.value = res.data
+    setCurrent()
+  })
+}
+const setCurrent = (row?: AnyO) => {
+  let chooseRow = tableData.value.find(
+    (v) => v[props.prop.value] === props.modelValue,
+  )
+  if (chooseRow) tableRef.value!.setCurrentRow(chooseRow)
+  else tableRef.value!.setCurrentRow(null)
+}
+//获取数据
+const getAxios = async (obj = {}, page1 = false): Promise<any> => {
+  basic.loading = true
+  if (page1) basic.page = 1
+  let data,
+    searchObj: AnyO = {}
+  searchObj[props.searchKey ? props.searchKey : 'search'] = basic.search
+  await axios({
+    ...props.axiosConfig,
+    params: {
+      page: basic.page,
+      limit: basic.limit,
+      ...searchObj,
+      ...props.axiosConfig.params,
+      ...obj,
+    },
+  })
+    .then((res) => {
+      basic.loading = false
+      data = res.data
+    })
+    .catch((err) => {
+      ElMessage.error(err.code)
+      basic.loading = false
+    })
+  return data
+}
+</script>
+
+<style lang="scss">
+.L-dialog {
+  .flex {
+    display: flex;
+    align-items: center;
+  }
+
+  .el-table__body tr.current-row > td.el-table__cell {
+    background-color: #bbe7ff !important;
+  }
+}
+</style>

package/src/selectSuffix/types.ts

@@ -0,0 +1,30 @@
+import { Component as ComponentIns, h } from 'vue'
+import { TableColumnInstance, ColumnCls } from 'element-plus'
+import { AxiosRequestConfig } from 'axios';
+export type Props<T> = Partial<Omit<T, `$${string}` | `_${string}` | '$' | '_'>>
+export interface Scope<T> {
+  row: T,
+  $index: number,
+  column: ColumnCls<T>
+}
+export interface SelectColumn {
+  col: Props<TableColumnInstance>
+  scope?(props: any): string
+  component?: (createVNode: typeof h, data: Scope<any>) => ComponentIns
+}
+export interface SelectSuffix {
+  title?: string  //弹出层标题
+  modelValue: string | string[] //下拉框value
+  columns: SelectColumn[] // 表格列配置
+  mul?: boolean, //多选
+  prop: {   //下拉框字段
+    label: string
+    value: string
+  }
+  where?: {  //弹出层打开需要展示Label的请求
+    [key: string]: string
+  }
+  axiosConfig: AxiosRequestConfig //Axios请求配置
+  isExist?: boolean,  // 是否选中关闭，单选默认true，多选默认false
+  searchKey?: string // 模糊搜索字段，默认search
+}

package/src/sortableTable/headButtons.vue

@@ -7,7 +7,7 @@
 */ -->
 
 <template>
-  <div class="cl-buttons">
+  <div class="ci-buttons">
     <div>
       <slot name="left"></slot>
     </div>
@@ -16,8 +16,11 @@
     </div>
   </div>
 </template>
+<script lang="ts" setup>
+defineOptions({ name: 'ci-headbtns' })
+</script>
 <style lang="scss">
-.cl-buttons {
+.ci-buttons {
   display: flex;
   justify-content: space-between;
   padding: 5px 10px;

package/src/sortableTable/index/headButtons.ts

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

package/src/sortableTable/index/sortableTableColumnCell.ts

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

package/src/sortableTable/index/sortableTableDialog.ts

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

package/src/sortableTable/{utils → index}/sortableTableTs.ts

@@ -1,4 +1,4 @@
-import { SortColumn } from './interface'
+import { SortColumn } from '../utils/interface'
 
 export const setKey = (data: SortColumn[], path: number[] = []) => {
   data.forEach((v, i) => {

package/src/sortableTable/sortableTable.vue

@@ -10,12 +10,12 @@
   </el-table>
 </template>
 <script setup lang="ts">
-defineOptions({ name: 'cc-table' })
+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 './utils/sortableTableColumnCell.vue'
+import sortableTableColumnCell from './index/sortableTableColumnCell'
 import { cloneDeep } from 'lodash'
 let props = defineProps<SortableTableIns>()
 const elTableRef = ref<InstanceType<typeof ElTable>>()

package/src/sortableTable/sortableTableDialog.vue

@@ -1,32 +1,17 @@
 <template>
-  <el-dialog
-    v-model="state"
-    v-bind="config"
-    draggable
-  >
+  <el-dialog v-model="state" v-bind="config" draggable>
     <div class="container">
       <b>
         按住
         <el-icon><Rank /></el-icon>
         进行移动，点击表头名字进行隐藏, 点击确定进行保存，点击
         <!-- <Star style="width: 1em; height: 1em; margin-right: 8px" /> -->
-        <svg-icon
-          name="regular-center"
-          size="14"
-        ></svg-icon>
+        <svg-icon name="regular-center" size="14"></svg-icon>
         固定，点击
         <!-- <StarFilled style="width: 1em; height: 1em; margin-right: 8px" /> -->
-        <svg-icon
-          name="regular-left"
-          size="14"
-          color="#2C93FF"
-        ></svg-icon>
+        <svg-icon name="regular-left" size="14" color="#2C93FF"></svg-icon>
         或
-        <svg-icon
-          name="regular-right"
-          size="14"
-          color="#2C93FF"
-        ></svg-icon>
+        <svg-icon name="regular-right" size="14" color="#2C93FF"></svg-icon>
         取消固定
 
         <el-popover
@@ -48,10 +33,7 @@
         show-pin
       />
 
-      <el-tooltip
-        content="将表头配置保存到数据库"
-        placement="top-end"
-      >
+      <el-tooltip content="将表头配置保存到数据库" placement="top-end">
         <el-button
           type="primary"
           style="width: 100%; margin-top: 10px"
@@ -64,15 +46,13 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
+defineOptions({ name: 'ci-sdialog', inheritAttrs: false })
 import { computed, ref } from 'vue'
 import { SortableTableDialog } from './utils/interface'
 import sortableTableDragItem from './utils/sortableTableDragItem.vue'
 import { Rank } from '@element-plus/icons-vue'
-import SvgIcon from '@/components/SvgIcon.vue'
+import SvgIcon from '../svgIcon/index'
 
-defineOptions({
-  inheritAttrs: false,
-})
 const emits = defineEmits(['update:modelValue', 'update:data', 'submit'])
 const state = ref(false)
 const props = defineProps<SortableTableDialog>()
@@ -82,7 +62,7 @@ const modelValue = computed({
   },
   set(value) {
     emits('update:modelValue', value)
-  },
+  }
 })
 defineExpose({
   open: () => {
@@ -91,7 +71,7 @@ defineExpose({
   close: () => {
     state.value = false
   },
-  state,
+  state
 })
 </script>
 <style scoped lang="scss">

package/src/sortableTable/utils/sortableTable.ts

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

package/src/sortableTable/utils/sortableTableColumnCell.vue

@@ -9,15 +9,8 @@
 */ -->
 
 <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 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"
@@ -30,10 +23,7 @@
       {{ data.scope(scope) }}
     </template>
     <template #header="header">
-      <component
-        :is="headerVue(header)"
-        :header="header"
-      ></component>
+      <component :is="headerVue(header)" :header="header"></component>
     </template>
   </el-table-column>
   <el-table-column
@@ -44,16 +34,10 @@
     :resizable="data.col.resizable || true"
   >
     <template #default="scope">
-      <component
-        :is="data.component(h, scope)"
-        :scope="scope"
-      ></component>
+      <component :is="data.component(h, scope)" :scope="scope"></component>
     </template>
     <template #header="header">
-      <component
-        :is="headerVue(header)"
-        :header="header"
-      ></component>
+      <component :is="headerVue(header)" :header="header"></component>
     </template>
   </el-table-column>
   <el-table-column
@@ -64,19 +48,14 @@
     :resizable="data.col.resizable || true"
   >
     <template #header="header">
-      <component
-        :is="headerVue(header)"
-        :header="header"
-      ></component>
+      <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: 'sortable-table-column-cell',
-})
+defineOptions({ name: 'ci-columncell' })
 
 const props = defineProps<{
   data: SortColumn

package/src/sortableTable/utils/sortableTableDragItem.vue

@@ -9,60 +9,29 @@
     draggable=".item"
     itemKey="key"
   >
-    <template
-      #item="{ element, index }: { element: SortColumn; index: number }"
-    >
+    <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)"
-        >
+        <div class="title" @click="handleShow(element)">
           {{ element.col.label }}
         </div>
-        <div
-          class="pin"
-          v-if="showPin"
-        >
+        <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>
+            <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 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 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 v-else @click="element.col.fixed = 'right'">
+            <svg-icon name="regular-center" size="20"></svg-icon>
           </span>
         </div>
         <div class="ifshow">
@@ -74,16 +43,13 @@
             {{ element.hide ? '显示' : '隐藏' }}
           </el-button>
         </div>
-        <sortable-table-drag-item
-          v-if="element.children"
-          v-model="element.children"
-        />
+        <sortable-table-drag-item v-if="element.children" v-model="element.children" />
       </div>
     </template>
   </draggable>
 </template>
 <script setup lang="ts">
-import SvgIcon from '@/components/SvgIcon.vue'
+import SvgIcon from '../../svgIcon/index'
 import { computed } from 'vue'
 import draggable from 'vuedraggable'
 import { SortColumn, SortableTableIns } from './interface'
@@ -99,7 +65,7 @@ const modelValue = computed({
   },
   set(value) {
     emits('update:modelValue', value)
-  },
+  }
 })
 
 // 显示或者隐藏列

package/src/svgIcon/index.ts

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

package/src/svgIcon/svgicon.vue

@@ -0,0 +1,90 @@
+<template>
+  <svg aria-hidden="true" :class="['svg-icon', spin && 'svg-icon-spin']" :style="getStyle">
+    <use :xlink:href="symbolId" :fill="color" rel="external nofollow" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'ci-svgicon' })
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+const props = defineProps({
+  // 图标的id名称默认为 #icon-name
+  prefix: {
+    type: String,
+    default: 'icon'
+  },
+  //  使用的svg图标名称，也就是svg文件名
+  name: {
+    type: String,
+    required: true
+  },
+  // 颜色：如果想要用color控制svg图标颜色，那么需要修改.svg文件中的fill属性改成  fill="currentColor"或者直接删掉 fill
+  color: {
+    type: String,
+    default: ''
+  },
+  // 悬停颜色
+  colorh: {
+    type: String,
+    default: '#000'
+  },
+  // 大小
+  size: {
+    type: [Number, String],
+    default: 20
+  },
+  // 修旋转
+  spin: {
+    type: Boolean,
+    default: false
+  }
+})
+
+//  计算图标id 名称
+const symbolId = computed(() => {
+  // console.log(`#${props.prefix}-${props.name}`);
+  return `#${props.prefix}-${props.name}`
+})
+
+// 计算图标大小
+const getStyle = computed((): CSSProperties => {
+  const { size } = props
+  let s = `${size}`
+  s = `${s.replace('px', '')}px`
+  return {
+    width: s,
+    height: s
+  }
+})
+</script>
+
+<style scoped>
+.svg-icon {
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: -0.08em;
+  fill: currentColor;
+  color: v-bind(color);
+}
+
+.svg-icon-spin {
+  animation: loadingCircle 1s infinite linear;
+}
+
+/* 自定义class 悬停 */
+.svg-icon:hover {
+  color: v-bind(colorh);
+}
+
+/* 旋转动画 */
+@keyframes loadingCircle {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/sortableTable/sortableTable.ts

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