ci-plus 1.4.4 → 1.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ci-plus",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "ci组件库",
   "main": "./index.ts",
   "scripts": {

package/src/selectSuffix/selectSuffix.vue

@@ -41,7 +41,11 @@
           </div>
         </template>
       </el-select-v2>
-      <span class="l_increase" @click.stop="openTable">
+      <span
+        class="l_increase"
+        :class="props.disabled ? 'l_increase-disabled' : ''"
+        @click.stop="!props.disabled ? openTable() : ''"
+      >
         <el-icon>
           <Operation />
         </el-icon>
@@ -471,6 +475,15 @@ defineExpose({ otherChangeTo })
   width: 32px;
   z-index: 1;
 }
+.l_increase:hover {
+  background-color: #bbe7ff;
+  color: #222;
+}
+.l_increase-disabled:hover {
+  background-color: var(--el-fill-color-light);
+  color: var(--el-text-color-regular);
+  cursor: no-drop;
+}
 
 .el-select__wrapper {
   border-top-right-radius: unset;

package/src/sortableTable/headerInput.vue

@@ -10,6 +10,7 @@
         @clear="clear"
         @close="close"
         @open="open"
+        @getFocus="getFocus"
       >
         <template #reference="{ toggle }">
           <div style="width: 40px; height: 30px; line-height: 30px; display: flex">
@@ -49,12 +50,16 @@
                 :colorh="'#2C93FF'"
                 @click="toggle"
               />
+              <!-- <filter-icon-vue
+                @click="toggle"
+                :color="hasValue ? '#2C93FF' : ''"
+              /> -->
             </div>
           </div>
         </template>
         <template #default="{ closeF }">
           <el-select
-            v-if="props.type !== 'select'"
+            v-if="props.type !== 'select' && props.showConnector"
             v-model="operator"
             class="m-2 input-select"
             placeholder="请选择查询类型"
@@ -76,6 +81,8 @@
             :placeholder="placeholder"
             @keydown.enter="confirm(closeF)"
             clearable
+            ref="numberInputRef"
+            type="number"
           />
           <el-input
             v-else-if="!props.type || props.type === 'text'"
@@ -83,22 +90,46 @@
             :placeholder="placeholder"
             @keydown.enter="confirm(closeF)"
             clearable
+            ref="textInputRef"
           />
           <el-select-v2
             v-else-if="props.type === 'select'"
             v-model="selectValue"
             :placeholder="placeholder || _selectConfig.placeholder"
             :size="_selectConfig.selectSize || 'default'"
-            :options="_selectConfig.options"
+            :options="OptiosSelect"
             :clearable="_selectConfig.clearable"
-            :filterable="_selectConfig.filterable"
             :multiple="_selectConfig.selectMultiple"
             :collapse-tags-tooltip="_selectConfig.collapseTagsTooltip"
             :collapse-tags="_selectConfig.collapseTags"
             :allow-create="_selectConfig.allowCreate"
             :default-first-option="_selectConfig.defaultFirstOption"
             :popper-class="_selectConfig.popperClass"
-          />
+            :props="_selectConfig.props"
+            :filterable="_selectConfig.filterable"
+            :remote="myRemote"
+            :remote-method="myRemote ? remoteMethod : () => {}"
+            :loading="loading"
+          >
+            <template #footer v-if="props.selectConfig?.getOptions">
+              <el-pagination
+                v-model:current-page="currentPage"
+                v-model:page-size="pageSize"
+                :page-sizes="[20, 30, 50, 100, 500]"
+                small
+                :background="background"
+                layout=" prev, pager, next, jumper,total"
+                :total="selectOptionTotal"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+              />
+            </template>
+            <template #loading v-if="props.selectConfig?.getOptions">
+              <svg class="circular" viewBox="0 0 50 50">
+                <circle class="path" cx="25" cy="25" r="20" fill="none" />
+              </svg>
+            </template>
+          </el-select-v2>
           <div class="date-picker" v-if="props.type === 'date'">
             <el-date-picker
               v-if="props.type === 'date' && operator === 'between'"
@@ -134,11 +165,11 @@
 
 <script setup lang="ts">
 defineOptions({ name: 'ci-headerInput' })
-// import SvgIcon from '@/components/SvgIcon.vue'
 import SvgIcon from '../svgIcon/svgicon.vue'
-import { computed, ref, watch } from 'vue'
-import lodash from 'lodash'
+import { computed, ref, watch, PropType, onMounted } from 'vue'
+import lodash, { debounce } from 'lodash'
 import headerPopover from './utils/headerPopover.vue'
+import filterIconVue from './utils/filterIcon.vue'
 import { TooltipTriggerType } from 'element-plus'
 
 // 定义 props 的类型
@@ -161,6 +192,10 @@ interface SelectConfig {
   selectAllPlaceholder?: string
   optionValue?: string
   optionLabel?: string
+  props?: { label: string; value: string }
+  getOptions: (val: { page: number; limit: number; search?: string | string[] }) => Promise<any[]>
+  page?: number // 分页
+  limit?: number // 分页每页大小
 }
 // 定义排序的类型
 interface OrdersConfig {
@@ -181,34 +216,97 @@ interface Props {
   ordersConfig?: OrdersConfig // 排序的配置项
 }
 
+interface PopperStyle {
+  [key: string]: string
+}
+
+type SType = 'text' | 'number' | 'select' | 'date' // 输入框类型
+
 // 使用 defineProps 和 withDefaults 来声明 props 并设置默认值
 
-const props = withDefaults(defineProps<Props>(), {
-  type: 'text',
-  initValue: '',
-  disableFilter: false,
-  // storePar: () => {},
-  popperStyle: () => ({ width: '240px', height: '100px' }),
-  selectConfig: (): SelectConfig => ({
-    placeholder: '请选择', // 输入框的placeholder提示
-    selectSize: 'default', // 输入框的大小
-    selectDisabled: false, // 输入框的disabled属性
-    clearable: true, // 是否有清除按钮
-    filterable: true, // 是否可搜索
-    collapseTags: true, // 是否折叠tag
-    collapseTagsTooltip: true, // 是否显示tag的tooltip提示
-    selectMultiple: false, // 是否多选
-    allowCreate: false, // 是否允许创建新条目
-    defaultFirstOption: true, // 是否默认高亮第一个选项
-    popperClass: '', // popper的class类名
-    selectStyle: '', // 输入框的style样式
-    selectAll: false, // 是否显示全选按钮
-    selectAllLabel: '全选', // 全选按钮的文本
-    selectAllPlaceholder: '请选择', // 全选按钮的placeholder提示
-    options: [], //select下拉选项时的 列表数据
-    optionValue: 'value', // 选项的默认value值
-    optionLabel: 'label' // 选项的默认label值
-  })
+const props = defineProps({
+  column: {
+    type: String,
+    // required: true,
+    default: ''
+  },
+  type: {
+    type: String as PropType<SType>,
+    default: 'text'
+  },
+  text: {
+    type: String,
+    required: true,
+    default: ''
+  },
+  storePar: {
+    type: Object,
+    // required: true,
+    default: () => {}
+  },
+
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  initValue: {
+    type: [String, Number],
+    default: ''
+  },
+  disableFilter: {
+    type: Boolean,
+    default: false
+  },
+  popperStyle: {
+    type: Object as PropType<PopperStyle>,
+    default: () => ({ width: '240px', height: '100px' })
+  },
+  trigger: {
+    type: String as PropType<TooltipTriggerType>,
+    default: 'hover'
+  },
+  selectConfig: {
+    type: Object as PropType<SelectConfig>,
+    default: () => ({
+      placeholder: '请选择', // 输入框的placeholder提示
+      selectSize: 'default', // 输入框的大小
+      selectDisabled: false, // 输入框的disabled属性
+      clearable: true, // 是否有清除按钮
+      filterable: true, // 是否可搜索
+      collapseTags: true, // 是否折叠tag
+      collapseTagsTooltip: true, // 是否显示tag的tooltip提示
+      selectMultiple: false, // 是否多选
+      allowCreate: false, // 是否允许创建新条目
+      defaultFirstOption: true, // 是否默认高亮第一个选项
+      popperClass: '', // popper的class类名
+      selectStyle: '', // 输入框的style样式
+      selectAll: false, // 是否显示全选按钮
+      selectAllLabel: '全选', // 全选按钮的文本
+      selectAllPlaceholder: '请选择', // 全选按钮的placeholder提示
+      options: [], //select下拉选项时的 列表数据
+      optionValue: 'value', // 选项的默认value值
+      optionLabel: 'label', // 选项的默认label值
+      props: { label: 'label', value: 'value' },
+      page: 1, // 分页
+      limit: 8 // 分页每页大小
+      // getOptions: {
+      //   type: Function,
+      //   default: null,
+      // }, // 如果使用内置获取数据方法  () => Promise<any[]>
+    })
+  },
+  ordersConfig: {
+    type: Object as PropType<OrdersConfig>,
+    default: () => ({
+      enableOrder: false, // 是否开启排序 默认false 关闭的
+      initOrder: '' // 默认是否升序排序 默认''
+    })
+  },
+  // 是否使用连接符输入框
+  showConnector: {
+    type: Boolean,
+    default: true
+  }
 })
 
 // console.log('props表头', props)
@@ -232,11 +330,19 @@ const _selectConfig = computed((): SelectConfig => {
     selectAllPlaceholder: '请选择', // 全选按钮的placeholder提示
     options: [], //select下拉选项时的 列表数据
     optionValue: 'value', // 选项的默认value值
-    optionLabel: 'label' // 选项的默认label值
+    optionLabel: 'label', // 选项的默认label值
+    props: { label: 'label', value: 'value' }, // 指定显示字段和值字段
+    page: 1, // 分页
+    limit: 8 // 分页每页大小
   }
   return lodash.assign(obj, props.selectConfig || {})
 })
 
+// 根据是否传递远程获取下拉列表函数，判断是否需要开启远程搜索功能
+const myRemote = computed(() => {
+  return props.selectConfig?.getOptions ? true : false
+})
+
 // 根据传参重置排序配置参数的默认值
 const _ordersConfig = computed((): OrdersConfig => {
   let obj = {
@@ -283,6 +389,7 @@ const operatorOptions = ref<
     label: '不等于'
   },
   {
+    // 数组的第8个元素必须是介于,后面再日期的时候会禁用第8个
     value: 'between',
     label: '介于'
   }
@@ -328,7 +435,7 @@ if (props.type === 'select') {
   // 将面板宽度调整宽一些
   // 判断props.popperStyle的宽度是否为小于300px，如果是就修改为300px
   if (props.popperStyle.width && parseInt(props.popperStyle.width.replace('px', '')) < 300) {
-    updatePopperStyle({ width: '300px' })
+    updatePopperStyle({ width: '460px' })
   }
 }
 
@@ -427,9 +534,14 @@ const confirm = (closeF?: Function) => {
   }
 
   // 判断input输入框中的值是否为空
-
-  emits('change', obj)
-  closeF && closeF()
+  if (props.showConnector) {
+    emits('change', obj)
+    closeF && closeF()
+  } else {
+    // 如果是隐藏了条件连接符下拉选择框，就只返回输入的值
+    emits('change', value.value)
+    closeF && closeF()
+  }
 }
 
 // 清除按钮：清空输入框和发送请求
@@ -444,13 +556,66 @@ const clear = () => {
   value.value = void 0
   confirm()
 }
-
+const loading = ref(false)
 // 关闭面板
 const close = () => {}
 const open = () => {
+  if (props.selectConfig?.getOptions) {
+    console.log('打开', props)
+    // getOptins()
+  }
+  // if (props.type === 'select' && props.initValue) {
+  //   search.value = props.initValue
+  //   value.value = props.initValue
+  //   getOptins()
+  // }
   emits('open')
 }
 
+// 请求下拉列表函数
+const getOptins = () => {
+  loading.value = true
+  props.selectConfig
+    ?.getOptions({
+      page: currentPage.value,
+      limit: pageSize.value,
+      search: search.value
+    })
+    .then((val: any) => {
+      console.log('val: ', val)
+      if (val.code === 200 && val.data.length > 0) {
+        OptiosSelect.value = val.data
+        // lodash.uniqBy( [...OptiosSelect.value, ...val.data], (item) => JSON.stringify(item), )
+        selectOptionTotal.value = val.count // 总数
+      } else {
+        OptiosSelect.value = []
+        selectOptionTotal.value = 0
+        console.log('列表数据获取失败或者为空', val.msg)
+      }
+    })
+    .catch((err) => {
+      console.log('err: ', err)
+      loading.value = false
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+// 开启远程搜索函数
+const remoteMethod = (query: string) => {
+  console.log('query: ', query, OptiosSelect.value.length)
+  if (OptiosSelect.value.length < 1 || query) {
+    let setQuery = (q: string) => {
+      search.value = q
+      getOptins()
+    }
+    // 防抖
+    let myDebounce = debounce(() => setQuery(query), 1000)
+    myDebounce()
+  }
+}
+
 // 排序
 const orderChangtop = (val: string) => {
   console.log('升序', ordersVal.value)
@@ -492,17 +657,30 @@ const orderChangbot = (val: string) => {
 }
 
 // 监听 props.storePar 的filters 和 orders属性 然对应按钮颜色是否改变
+// 如果props.showConnector为true，就监听 props.storePar 变化，如果为false就监听props.initValue 的变化
 watch(
-  () => props.storePar,
+  () => {
+    if (props.showConnector) {
+      return props.storePar
+    } else {
+      return props.initValue
+    }
+  },
   (newVal, oldVal) => {
-    // console.log('监听props.storePar', newVal, oldVal)
-    if (newVal.filters) {
+    // console.log('监听输入框中值(store.params.value)变化', newVal, oldVal)
+    // 判断newVal是否为字符串还是对象
+    if (newVal && typeof newVal == 'string') {
+      hasValue.value = true
+    } else {
+      hasValue.value = false
+    }
+    if (newVal?.filters) {
       // 判断是否是当前列的筛选条件
       const filter = newVal.filters.find((item: any) => item.column == props.column)
       if (filter) {
         // console.log('filter: ', filter.value)
         // 判断是否是当前列的筛选条件
-        if (filter.value) {
+        if (filter.value || filter) {
           hasValue.value = true
         } else {
           hasValue.value = false
@@ -511,7 +689,7 @@ watch(
         hasValue.value = false
       }
     }
-    if (newVal.orders) {
+    if (newVal?.orders) {
       // 判断是否是当前列的筛选条件
       const order = newVal.orders.find((item: any) => item.column == props.column)
       if (order) {
@@ -535,6 +713,75 @@ watch(
     immediate: true
   }
 )
+watch(
+  () => props.initValue,
+  (newVal, oldVal) => {
+    // console.log('监听props.initValue变化', newVal, oldVal)
+    // 判断newVal是否为字符串还是对象
+    if (newVal && typeof newVal == 'string') {
+      hasValue.value = true
+    } else {
+      hasValue.value = false
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+// 获取焦点相关代码
+const textInputRef = ref()
+const numberInputRef = ref()
+let getFocus = () => void 0
+
+onMounted(() => {
+  if (textInputRef.value) {
+    getFocus = () => {
+      textInputRef.value.focus()
+    }
+  }
+  if (numberInputRef.value) {
+    getFocus = () => {
+      numberInputRef.value.focus()
+    }
+  }
+})
+const currentPage = computed(() => {
+  return props.selectConfig.page || 1
+})
+const pageSize = computed(() => {
+  return props.selectConfig.limit || 8
+})
+const search = ref('')
+const small = ref(false)
+const background = ref(false) // 是否为圆角
+const selectOptionTotal = ref(0)
+
+const OptiosSelect = ref<any[]>([])
+watch(
+  () => _selectConfig.value.options,
+  (newVal, oldVal) => {
+    OptiosSelect.value = newVal
+  }
+)
+watch(
+  () => props.selectConfig?.options,
+  (newVal, oldVal) => {
+    if (newVal) {
+      OptiosSelect.value = newVal
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+const handleSizeChange = (val: number) => {
+  console.log(`${val} items per page`)
+}
+const handleCurrentChange = (val: number) => {
+  console.log(`current page: ${val}`)
+  getOptins()
+}
 </script>
 
 <style scoped lang="scss">

package/src/sortableTable/utils/filter.vue

@@ -1,5 +1,3 @@
-<!-- @format -->
-
 <template>
   <svg
     t="1702537913405"
@@ -16,11 +14,7 @@
       :fill="color || '#b3b3b3'"
       p-id="1521"
     ></path>
-    <path
-      d="M614.4 409.6h409.6v102.4h-409.6z"
-      :fill="color || '#b3b3b3'"
-      p-id="1522"
-    ></path>
+    <path d="M614.4 409.6h409.6v102.4h-409.6z" :fill="color || '#b3b3b3'" p-id="1522"></path>
   </svg>
 </template>
 <script lang="ts" setup>

package/src/sortableTable/utils/filterIcon.vue

@@ -1,5 +1,3 @@
-<!-- @format -->
-
 <template>
   <filterVue style="cursor: pointer" />
 </template>

package/src/sortableTable/utils/headerPopover.vue

@@ -1,5 +1,3 @@
-<!-- @format -->
-
 <template>
   <el-popover
     ref="popoverRef"