ci-plus 1.4.3 → 1.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ci-plus",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "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,52 @@
 <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" @click.stop="openTable">
+        <el-icon>
+          <Operation />
+        </el-icon>
+      </span>
+    </div>
     <el-dialog
       class="L-dialog"
       v-model="basic.is_dialogTable"
@@ -60,7 +74,7 @@
             </template>
             <el-button-group>
               <el-tooltip
-                v-if="aim && chooseRow.length"
+                v-if="chooseRow.length"
                 effect="dark"
                 content="清空选项"
                 placement="top-start"
@@ -75,7 +89,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 +106,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 +117,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 +156,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 +180,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 +199,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 +220,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 +261,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 +311,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 +355,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 +379,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 +448,33 @@ 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;
+}
+
+.el-select__wrapper {
+  border-top-right-radius: unset;
+  border-bottom-right-radius: unset;
 }
 
 .circular {
@@ -362,4 +493,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)