ci-plus 1.4.3 → 1.4.5

package/package.json

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

package/src/identificationCard/barCode.vue

@@ -14,7 +14,7 @@
 
 <script setup lang="ts">
 import { onMounted, nextTick, watch } from 'vue'
-import JsBarcode from 'jsbarcode' //'./jsbarcode.js' //'https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/+esm'
+import JsBarcode from './jsbarcode.js' //'./jsbarcode.js' //'https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/+esm'
 interface Props {
   value: String // 条码文本
   type?: String // 类型

package/src/selectSuffix/selectSuffix.vue

@@ -1,38 +1,56 @@
 <template>
-  <div style="width: 100%">
-    <el-select-v2
-      :size="props.size ?? 'small'"
-      placeholder="请选择"
-      :model-value="props.modelValue"
-      @update:model-value="(val) => emits('update:modelValue', val)"
-      :options="temporary_options"
-      @change="
-        (val) =>
-          emits('change', val, temporary_options.find((v) => v[props.prop.value] == val) ?? null)
-      "
-      filterable
-      style="width: 100%"
-      remote
-      :remote-method="getOptions"
-      :props="props.prop"
-      :height="200"
-      :disabled="props.disabled"
-      :loading="select_loading"
-      v-bind="$attrs"
-    >
-      <template #prefix>
-        <span class="el-input-number__increase" @click.stop="openTable">
-          <el-icon>
-            <Operation />
-          </el-icon>
-        </span>
-      </template>
-      <template #loading>
-        <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="ll-vue-div">
+    <div style="display: flex; width: 100%">
+      <el-select-v2
+        :size="props.size ?? 'small'"
+        placeholder="请搜索"
+        :model-value="props.modelValue"
+        @update:model-value="(val: any) => emits('update:modelValue', val)"
+        :options="temporary_options"
+        @change="(val: string | string[]) => onSelectChange(val)"
+        filterable
+        remote
+        :remote-method="getOptions"
+        :props="props.prop"
+        :height="200"
+        :disabled="props.disabled"
+        :loading="select_loading"
+        v-bind="$attrs"
+        :multiple="props.mul"
+        :collapse-tags="props.mul"
+        collapse-tags-tooltip
+        popper-class="l-popper"
+        style="flex: 1"
+      >
+        <template #loading>
+          <svg class="circular" viewBox="0 0 50 50">
+            <circle class="path" cx="25" cy="25" r="20" fill="none" />
+          </svg>
+        </template>
+        <template #footer>
+          <div v-if="basic.footerShow">以上为选中数据，非全部选项，请远程搜索</div>
+          <div v-else>
+            <el-pagination
+              v-model:current-page="basic.s_page"
+              small
+              layout="prev, pager, next"
+              :pager-count="5"
+              :page-size="10"
+              :total="basic.s_count"
+            />
+          </div>
+        </template>
+      </el-select-v2>
+      <span
+        class="l_increase"
+        :class="props.disabled ? 'l_increase-disabled' : ''"
+        @click.stop="!props.disabled ? openTable() : ''"
+      >
+        <el-icon>
+          <Operation />
+        </el-icon>
+      </span>
+    </div>
     <el-dialog
       class="L-dialog"
       v-model="basic.is_dialogTable"
@@ -60,7 +78,7 @@
             </template>
             <el-button-group>
               <el-tooltip
-                v-if="aim && chooseRow.length"
+                v-if="chooseRow.length"
                 effect="dark"
                 content="清空选项"
                 placement="top-start"
@@ -75,7 +93,7 @@
                 ></el-button>
               </el-tooltip>
               <el-tooltip
-                v-if="chooseRow.length"
+                v-if="aim && chooseRow.length"
                 effect="dark"
                 :content="is_aim ? '取消查询' : '查询已选中信息'"
                 placement="top-start"
@@ -92,8 +110,8 @@
           </el-col>
           <el-col v-else :span="16" class="flex">
             <el-tag v-if="props.modelValue && props.modelValue.length" closable @close="closeTag">
-              {{ tagLabel }}</el-tag
-            >
+              {{ tagLabel }}
+            </el-tag>
           </el-col>
           <el-col :span="8">
             <el-input
@@ -103,7 +121,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>
@@ -142,13 +160,17 @@
           @next-click="getTableData()"
           style="margin-top: 3px"
         />
+        <div>
+          <el-button @click="basic.is_dialogTable = false" style="float: right"> 关闭 </el-button>
+        </div>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { reactive, h, ref, onMounted, toRef, watch } from 'vue'
+import { reactive, h, ref, onMounted, watch } from 'vue'
+import { Operation, Search } from '@element-plus/icons-vue'
 import { ElMessage, ElTable } from 'element-plus'
 import axios from 'axios'
 import { SelectSuffix, Basic, AnyO } from './types'
@@ -162,13 +184,17 @@ const basic = reactive<Basic>({
   page: 1,
   limit: 30,
   count: 0,
+  s_page: 1,
+  s_count: 0,
   loading: false,
   is_dialogTable: false,
+  footerShow: false,
   search: ''
 })
 const select_loading = ref(false)
 const is_aim = ref(false)
 const tagLabel = ref('')
+const filterkey = ref('')
 const tableData = ref<AnyO[]>([])
 const temporary_options = ref<AnyO[]>([])
 const chooseRow = ref<AnyO[]>([])
@@ -177,11 +203,19 @@ const tableRowColor = ({ row, rowIndex }: { row: AnyO; rowIndex: number }) => {
     return 'success-row'
   return ''
 }
+watch(
+  () => basic.s_page,
+  () => {
+    getOptions(filterkey.value, true)
+  }
+)
 const rowClick = (row: AnyO) => {
   if (!props.mul) {
+    temporary_options.value = [row]
+    basic.footerShow = true
+    tagLabel.value = row[props.prop.label]
     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
   } else {
     if (chooseRow.value.find((v) => v[props.prop.value] == row[props.prop.value]))
@@ -190,10 +224,28 @@ const rowClick = (row: AnyO) => {
         1
       )
     else chooseRow.value.push(row)
-    // tableRef.value.toggleRowSelection(row, undefined)
     sendMulValue()
   }
 }
+//下拉框选择
+const onSelectChange = (val: string | string[]) => {
+  if (Array.isArray(val) && props.mul) {
+    let thisPageChooseRows = temporary_options.value.filter(
+      (v) => !v.disabled && val.some((k: string) => k == v[props.prop.value])
+    )
+    thisPageChooseRows.forEach((v) => {
+      if (!chooseRow.value.find((x) => x[props.prop.value] == v[props.prop.value])) {
+        chooseRow.value.push(v)
+      }
+    })
+    chooseRow.value = chooseRow.value.filter((v) =>
+      val.some((k: string) => k == v[props.prop.value])
+    )
+    emits('change', val, chooseRow.value)
+  } else {
+    emits('change', val, temporary_options.value.find((v) => v[props.prop.value] == val) ?? null)
+  }
+}
 const closeTag = (row?: AnyO) => {
   if (!props.mul) {
     emits('update:modelValue', '')
@@ -213,29 +265,38 @@ const empty = () => {
 }
 const sendMulValue = () => {
   let values = chooseRow.value.map((v) => v[props.prop.value])
+  basic.footerShow = true
+  temporary_options.value = chooseRow.value
   emits('update:modelValue', values)
   emits('change', values, chooseRow.value)
 }
+// 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 && props.modelValue.length)
+//     getAxios(props.where ? props.where : searchObj, true).then((res) => {
+//       if (res.code == 200 && res.data.length) {
+//         if (props.mul) chooseRow.value = res.data
+//         else tagLabel.value = res.data[0]?.[props.prop.label]
+//       } else {
+//         tagLabel.value = ''
+//         chooseRow.value = []
+//       }
+//       setCurrent()
+//     })
+//   else {
+//     tagLabel.value = ''
+//     chooseRow.value = []
+//   }
+// }
 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 && props.modelValue.length)
-    getAxios(props.where ? props.where : searchObj, true).then((res) => {
-      if (res.code == 200 && res.data.length) {
-        if (props.mul) chooseRow.value = res.data
-        else tagLabel.value = res.data[0]?.[props.prop.label]
-      } else {
-        tagLabel.value = ''
-        chooseRow.value = []
-      }
-      setCurrent()
-    })
-  else {
-    tagLabel.value = ''
-    chooseRow.value = []
-  }
+  else setCurrent(true)
+  otherChangeTo()
+  // temporary_options.value = chooseRow.value
 }
 const appointGet = () => {
   if (!is_aim.value) {
@@ -254,15 +315,16 @@ const getTableData = (obj = {}, page1 = false) => {
     setCurrent()
   })
 }
-const setCurrent = () => {
+//单页数据
+const setCurrent = (openTable?: boolean) => {
   if (props.mul) {
+    if (openTable) chooseRow.value = []
     let clickRows = tableData.value.filter((v) =>
       (props.modelValue || []).includes(v[props.prop.value])
     )
     clickRows.forEach((v) => {
       if (!chooseRow.value.find((x) => x[props.prop.value] == v[props.prop.value])) {
         chooseRow.value.push(v)
-        // tableRef.value!.toggleRowSelection(v,true)
       }
     })
   } else {
@@ -297,15 +359,22 @@ const getAxios = async (obj = {}, page1 = false): Promise<any> => {
     })
   return data
 }
-const getOptions = (val: string) => {
-  if (!val) return
+const getOptions = (val: string, is_return = false) => {
+  // 5/28 解决如果先点击选择框然后点表格选择，无法展示下拉选项，需要初始化下拉数据
+  if (!val && !is_return) return
+  if (filterkey.value !== val) {
+    filterkey.value = val
+    basic.s_page = 1
+  }
+  basic.footerShow = false
   select_loading.value = true
   let searchObj: AnyO = {}
   searchObj[props.searchKey ? props.searchKey : 'search'] = val
   axios({
     ...props.axiosConfig,
     params: {
-      page: 1,
+      page: basic.s_page,
+      limit: 10,
       ...searchObj,
       ...props.axiosConfig.params
     }
@@ -314,24 +383,65 @@ const getOptions = (val: string) => {
       let res = res_.data
       select_loading.value = false
       if (res.code !== 200) return ElMessage.warning(res.msg)
+      basic.s_count = res.count ?? res.data.length
       if (props.getData) temporary_options.value = props.getData(res.data) || []
       else temporary_options.value = res.data || []
-      temporary_options.value = res.data
+      if (props.mul) {
+        let ohterPageChoose = chooseRow.value.filter(
+          (v) => !temporary_options.value.some((x) => x[props.prop.value] == v[props.prop.value])
+        )
+        ohterPageChoose.forEach((v) => (v.disabled = true))
+        temporary_options.value.push(...ohterPageChoose)
+      }
     })
     .catch((err) => {
       select_loading.value = false
       ElMessage.error(err.code)
     })
 }
+const otherChangeTo = () => {
+  let searchObj: AnyO = {}
+  searchObj[props.searchKey ? props.searchKey : 'search'] = props.mul
+    ? JSON.stringify(props.modelValue)
+    : props.modelValue
+  if (props.modelValue && props.modelValue.length)
+    getAxios(props.where ? props.where : searchObj, true).then((res) => {
+      if (res.code == 200 && res.data.length) {
+        if (!props.mul) tagLabel.value = res.data[0]?.[props.prop.label]
+        temporary_options.value = res.data
+        basic.footerShow = true
+      } else {
+        tagLabel.value = ''
+        chooseRow.value = []
+      }
+    })
+  else {
+    tagLabel.value = ''
+    chooseRow.value = []
+  }
+}
+onMounted(() => {
+  if (!props.modelValue) getOptions('', true)
+  else otherChangeTo()
+})
+defineExpose({ otherChangeTo })
 </script>
 
 <style lang="scss">
+.el-table .success-row {
+  --el-table-tr-bg-color: #cdedff;
+}
+
 .L-dialog {
   .flex {
     display: flex;
     align-items: center;
   }
 
+  .el-dialog__body {
+    height: calc(100% - 27px);
+  }
+
   .el-table__body tr.current-row > td.el-table__cell {
     background-color: #bbe7ff !important;
   }
@@ -342,8 +452,42 @@ const getOptions = (val: string) => {
   }
 }
 
-.el-table .success-row {
-  --el-table-tr-bg-color: #cdedff;
+.ll-vue-div {
+  width: 100%;
+}
+
+.l_increase {
+  align-items: center;
+  background: var(--el-fill-color-light);
+  color: var(--el-text-color-regular);
+  box-shadow: 0 0 0 1px var(--el-border-color) inset;
+  border-top-right-radius: var(--el-border-radius-base);
+  border-bottom-right-radius: var(--el-border-radius-base);
+  cursor: pointer;
+  display: flex;
+  font-size: 13px;
+  height: auto;
+  justify-content: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  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;
+  border-bottom-right-radius: unset;
 }
 
 .circular {
@@ -362,4 +506,20 @@ const getOptions = (val: string) => {
   stroke: var(--el-color-primary);
   stroke-linecap: round;
 }
+
+.el-select-dropdown__list.el-vl__window {
+  min-width: 200px;
+}
+
+.el-select-dropdown {
+  min-width: 200px;
+}
+
+.l-popper {
+  min-width: 200px;
+}
+
+.el-select-dropdown__footer {
+  padding: 3px;
+}
 </style>

package/src/selectSuffix/types.ts

@@ -3,44 +3,76 @@ 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>
+  row: T,
+  $index: number,
+  column: ColumnCls<T>
 }
 export interface AnyO {
-    [key: string]: any
+  [key: string]: any
 }
 export interface SelectColumn {
-    col: Props<TableColumnInstance>
-    scope?(props: any): string
-    component?: (createVNode: typeof h, data: Scope<any>) => ComponentIns
+  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 //多选
-    aim?: boolean
-    disabled?: boolean
-    size?: "" | "default" | "small" | "large"
-    prop: {   //下拉框字段
-        label: string
-        value: string
-    }
-    where?: {  //弹出层打开需要展示Label的请求的params
-        [key: string]: string
-    }
-    axiosConfig: AxiosRequestConfig //Axios请求配置
-    isExist?: boolean  // 是否选中关闭，单选默认true，多选默认false
-    searchKey?: string // 模糊搜索字段，默认search,
-    // selectConfig?:Props<ISelectV2Props> 
-    getData?: (params: any) => any[] // 获取数据的方法::getData="(data: any) => data.data"
+  title?: string  //弹出层标题
+  modelValue?: string | string[] //下拉框value
+  columns: SelectColumn[] // 表格列配置
+  mul?: boolean //多选
+  aim?: boolean
+  disabled?: boolean
+  size?: "" | "default" | "small" | "large"
+  prop: {   //下拉框字段
+    label: string
+    value: string
+  }
+  where?: {  //弹出层打开需要展示Label的请求的params
+    [key: string]: any
+  }
+  axiosConfig: AxiosRequestConfig //Axios请求配置
+  isExist?: boolean  // 是否选中关闭，单选默认true，多选默认false
+  searchKey?: string // 模糊搜索字段，默认search,
+  onChange?: (value: string, row: AnyO) => void
+  // selectConfig?:Props<ISelectV2Props>
+  getData?: (params: any) => any[] // 获取数据的方法::getData="(data: any) => data.data"
 }
 export interface Basic {
-    page: number
-    limit: number
-    count: number
-    is_dialogTable: boolean
-    loading: boolean
-    search: string
+  page: number
+  limit: number
+  count: number
+  s_page: number
+  s_count: number
+  is_dialogTable: boolean
+  loading: boolean
+  footerShow: boolean
+  search: string
+}
+type FormListBase = {
+  name: string
+  label: string
+  col?: number
+  type?: string
+  hide?: { judgment: string, value: any }[]
+  mul?: boolean
+  range?: boolean
+  sub?: string[]
+  listen?: (val: any) => any
+}
+type no_select = { sign: 1 | 4 }
+type is_select = {
+  sign: 3
+  select?: { url: string, pName: string, sign?: number, where?: object }
+  options?: {
+    label: string
+    value: number
+    [propName: string]: any
+  }[]
+}
+type is_suffix = {
+  sign: 2,
+  whereKey?: string
+  suffixConfig: SelectSuffix
 }
+
+export type FormList = FormListBase & (no_select | is_select | is_suffix)

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"