ci-plus 1.0.3 → 1.0.6

package/README.md

@@ -1,5 +1,23 @@
 ## 安装本组件库
 
+```sh
+# 1、安装组件
+pnpm install ci-plus -S
+# 2、安装element-plus 和引入
+pnpm install element-plus@2.5.1  @element-plus/icons-vue@2.3.1 -S
+# 3、安装package.json中的其他依赖(到node_modules/ci-plus/package.json目录下，把里面的依赖安装)
+# 4、main.ts引入组件
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import CiPlus from 'ci-plus'
+
+# 5、全局注册
+app.use(ElementPlus)
+app.use(CiPlus)
+
+
+```
+
 ```sh
 #  本地安装项目
 pnpm install 项目package.json所在目录

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ci-plus",
-  "version": "1.0.3",
-  "description": "cc组件库",
+  "version": "1.0.6",
+  "description": "ci组件库",
   "main": "./index.ts",
   "scripts": {
     "build": "vite build",

package/src/index.ts

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

package/src/selectSuffix/selectSuffix.vue

@@ -1,8 +1,5 @@
 <template>
-  <span
-    class="el-input-number__increase"
-    @click.stop="openTable"
-  >
+  <span class="el-input-number__increase" @click.stop="openTable">
     <el-icon>
       <Operation />
     </el-icon>
@@ -15,38 +12,17 @@
     style="height: 60%; width: 800px"
     draggable
   >
-    <div
-      style="display: flex; flex-direction: column; height: 100%"
-      v-loading="basic.loading"
-    >
+    <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"
-        >
+        <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"
-            >
+            <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"
-          >
+        <el-col v-else :span="14" class="flex">
+          <el-tag v-if="props.modelValue?.length" closable type="" @close="closeTag">
             {{ tagLabel }}
           </el-tag>
         </el-col>
@@ -58,10 +34,7 @@
             @change="getTableData({}, true)"
           >
             <template #append>
-              <el-button
-                icon="Search"
-                @click="getTableData({}, true)"
-              />
+              <el-button icon="Search" @click="getTableData({}, true)" />
             </template>
           </el-input>
         </el-col>
@@ -75,21 +48,12 @@
         :highlight-current-row="!mul"
       >
         <template v-for="column in columns">
-          <el-table-column
-            v-if="column.component"
-            v-bind="column.col"
-          >
+          <el-table-column v-if="column.component" v-bind="column.col">
             <template #default="scope">
-              <component
-                :is="column.component(h, scope)"
-                :scope="scope"
-              ></component>
+              <component :is="column.component(h, scope)" :scope="scope"></component>
             </template>
           </el-table-column>
-          <el-table-column
-            v-else
-            v-bind="column.col"
-          />
+          <el-table-column v-else v-bind="column.col" />
         </template>
       </el-table>
       <el-pagination
@@ -138,7 +102,7 @@ const props = withDefaults(defineProps<SelectSuffix>(), {
   where: () => ({}), //弹出层打开需要展示Label的请求对象
   axiosConfig: () => ({}), //Axios请求配置对象
   isExist: false, // 是否选中关闭，单选默认true，多选默认false
-  searchKey: 'search', // 模糊搜索字段，默认search
+  searchKey: 'search' // 模糊搜索字段，默认search
 })
 console.log('props', props)
 
@@ -149,7 +113,7 @@ const basic = reactive<Basic>({
   count: 0,
   loading: false,
   is_dialogTable: false,
-  search: '',
+  search: ''
 })
 const tagLabel = ref('')
 const tableData = ref<AnyO[]>([])
@@ -190,9 +154,7 @@ const getTableData = (obj = {}, page1 = false) => {
   })
 }
 const setCurrent = (row?: AnyO) => {
-  let chooseRow = tableData.value.find(
-    (v) => v[props.prop.value] === props.modelValue,
-  )
+  let chooseRow = tableData.value.find((v) => v[props.prop.value] === props.modelValue)
   if (chooseRow) tableRef.value!.setCurrentRow(chooseRow)
   else tableRef.value!.setCurrentRow(null)
 }
@@ -210,8 +172,8 @@ const getAxios = async (obj = {}, page1 = false): Promise<any> => {
       limit: basic.limit,
       ...searchObj,
       ...props.axiosConfig.params,
-      ...obj,
-    },
+      ...obj
+    }
   })
     .then((res) => {
       basic.loading = false

package/src/sortableTable/utils/sortableTableDragItem.vue

@@ -43,6 +43,10 @@
             {{ 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>
@@ -78,7 +82,7 @@ const handleShow = (col: SortColumn) => {
 $hoverBC: rgba(137, 182, 233, 0.5);
 
 .drag-container {
-  display: flex;
+  // display: flex;
   width: 100%;
   flex-direction: column;
 
@@ -119,6 +123,12 @@ $hoverBC: rgba(137, 182, 233, 0.5);
         margin-bottom: 0;
       }
     }
+    .widths {
+      .el-input {
+        width: 50px !important;
+        margin-right: 20px;
+      }
+    }
   }
   .item-hide {
     background: rgba(218, 218, 218, 0.5);

package/src/sortableTable/index/sortableTableTs.ts

@@ -1,9 +0,0 @@
-import { SortColumn } from '../utils/interface'
-
-export const setKey = (data: SortColumn[], path: number[] = []) => {
-  data.forEach((v, i) => {
-    const path_ = [...path, i]
-    v.key = path_.join('_')
-    if (v.children) setKey(v.children, path_)
-  })
-}