ci-plus 1.0.9 → 1.1.1

package/package.json

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

package/src/dailog/dialog.vue

@@ -68,7 +68,7 @@ if (!MyFullscreen.value) {
 
 // 根据传递搜全屏给调整最大高度：如果为不全屏立马给一个最大高度
 if (props.fullscreen == false) {
-  console.log('判断进来没222')
+  // console.log('判断进来没222')
   MyStyle.value =
     props.style + `max-height: calc( ${windowHeight.value}px - ${dTop.value});translate(59px, 4px)`
 }
@@ -191,6 +191,7 @@ const onTdMousedown = (e: MouseEvent) => {
       :style="MyStyle"
       :top="dTop"
       ref="MyDialogRef"
+      v-bind="$attrs"
     >
       <template #header="{ close, titleId, titleClass }">
         <div class="my-header">

package/src/dailog/read.md

@@ -0,0 +1,74 @@
+## 注意
+
+如果组件使用了append-to-body 属性将 弹窗提高到了body 的子项时，在本组件中的样式将不在生效，需要在App.vue或者其他高层级中设置 如下样式：
+
+```css
+body {
+  .el-overlay {
+    .el-overlay-dialog {
+      .el-dialog {
+        padding: 0 !important;
+        .el-dialog__header {
+          height: 35px !important;
+          line-height: 35px !important;
+          margin: 0 !important;
+          padding: 0px !important;
+          background-color: rgba(0, 0, 0, 0.1) !important;
+
+          .my-header {
+            display: flex;
+            height: 35px;
+            line-height: 35px;
+            margin: 0 10px;
+            .title {
+              flex: 1;
+              .el-dialog__title {
+                margin: 0px !important;
+                padding: 0px !important;
+                height: 35px !important;
+                line-height: 35px;
+                margin: 0 !important;
+                padding: 0 !important;
+                text-align: left !important;
+                font-weight: 700;
+              }
+            }
+            .btn {
+              max-width: 100px;
+              display: flex;
+              justify-content: flex-end;
+              height: 35px;
+              line-height: 35px;
+              align-items: center;
+            }
+          }
+        }
+
+        // 内容区域
+        .el-dialog__body {
+          height: calc(100% - 65px);
+          overflow: auto;
+          .my-body {
+            text-align: left;
+          }
+        }
+      }
+      .drag {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        bottom: 3px;
+        // background: red;
+        right: 3px;
+        z-index: 999;
+        border-radius: inherit;
+        box-shadow: 2px 2px 0px -1px red;
+        cursor: se-resize; // move:十字
+      }
+    }
+  }
+
+}
+```
+
+或者将本组件的样式文件中的#dia 去掉让样式变成全局样式

package/src/dailog/style/index.less

@@ -1,5 +1,6 @@
 #dia {
   .el-dialog {
+    padding: 0 !important;
     // height: 100% !important;
     // max-height: calc(100% - 10vh);
     .el-dialog__header {
@@ -41,6 +42,7 @@
     // 内容区域
     .el-dialog__body {
       height: calc(100% - 65px);
+      padding-bottom: 0px !important;
       overflow: auto;
       .my-body {
         text-align: left;
@@ -67,3 +69,67 @@
   // 	position: relative;
   // }
 }
+
+// 此处样式会全局生效
+.el-dialog {
+  padding: 0 !important;
+  // height: 100% !important;
+  // max-height: calc(100% - 10vh);
+  .el-dialog__header {
+    height: 35px !important;
+    line-height: 35px !important;
+    margin: 0 !important;
+    padding: 0px !important;
+    background-color: rgba(0, 0, 0, 0.1) !important;
+
+    .my-header {
+      display: flex;
+      height: 35px;
+      line-height: 35px;
+      margin: 0 10px;
+      .title {
+        flex: 1;
+        .el-dialog__title {
+          margin: 0px !important;
+          padding: 0px !important;
+          height: 35px !important;
+          line-height: 35px;
+          margin: 0 !important;
+          padding: 0 !important;
+          text-align: left !important;
+          font-weight: 700;
+        }
+      }
+      .btn {
+        max-width: 100px;
+        display: flex;
+        justify-content: flex-end;
+        height: 35px;
+        line-height: 35px;
+        align-items: center;
+      }
+    }
+  }
+
+  // 内容区域
+  .el-dialog__body {
+    height: calc(100% - 65px);
+    padding-bottom: 0px !important;
+    overflow: auto;
+    .my-body {
+      text-align: left;
+    }
+  }
+}
+.drag {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  bottom: 3px;
+  // background: red;
+  right: 3px;
+  z-index: 999;
+  border-radius: inherit;
+  box-shadow: 2px 2px 0px -1px red;
+  cursor: se-resize; // move:十字
+}

package/src/selectSuffix/selectSuffix copy.vue

@@ -0,0 +1,202 @@
+<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('change', row[props.prop.value], row)
+    setTimeout(() => {
+      emits('update:modelValue', row[props.prop.value])
+    }, 100)
+    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/selectSuffix.vue

@@ -1,111 +1,162 @@
 <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>
+  <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>
+    <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="16" class="flex">
+            <template v-for="(v, i) in chooseRow">
+              <el-tag
+                v-if="i < 3"
+                :key="v[props.prop.value]"
+                closable
+                style="width: 120px"
+                @close="closeTag(v)"
+              >
+                {{ v[props.prop.label] }}
+              </el-tag>
+              <el-tag v-else-if="i == 3" style="width: 60px; font-weight: bold">
+                {{ `+${chooseRow.length - 3}` }}
+              </el-tag>
             </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>
+            <el-button-group>
+              <el-tooltip
+                v-if="aim && chooseRow.length"
+                effect="dark"
+                content="清空选项"
+                placement="top-start"
+              >
+                <el-button
+                  type="info"
+                  plain
+                  size="small"
+                  icon="CloseBold"
+                  style="padding: 5px 7px"
+                  @click="empty"
+                ></el-button>
+              </el-tooltip>
+              <el-tooltip
+                v-if="chooseRow.length"
+                effect="dark"
+                :content="is_aim ? '取消查询' : '查询已选中信息'"
+                placement="top-start"
+              >
+                <el-button
+                  :type="is_aim ? 'primary' : ''"
+                  size="small"
+                  :icon="is_aim ? 'RefreshLeft' : 'Aim'"
+                  style="padding: 5px 7px"
+                  @click="appointGet"
+                ></el-button>
+              </el-tooltip>
+            </el-button-group>
+          </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
+            >
+          </el-col>
+          <el-col :span="8">
+            <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"
+          :row-class-name="tableRowColor"
+          :highlight-current-row="!mul"
+        >
+          <!-- <el-table-column v-if="props.mul" type="selection" align="center" /> -->
+          <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>
+  </div>
 </template>
 
 <script setup lang="ts">
-defineOptions({ name: 'ci-suffix' })
-import { reactive, h, ref } from 'vue'
+import { reactive, h, ref, onMounted, toRef, watch } 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
+import { SelectSuffix, Basic, AnyO } from './types'
+defineOptions({
+  inheritAttrs: false
 })
-console.log('props', props)
-
+const tableRef = ref<InstanceType<typeof ElTable>>()
+const props = defineProps<SelectSuffix>()
 const emits = defineEmits(['update:modelValue', 'change'])
 const basic = reactive<Basic>({
   page: 1,
@@ -115,51 +166,111 @@ const basic = reactive<Basic>({
   is_dialogTable: false,
   search: ''
 })
+const select_loading = ref(false)
+const is_aim = ref(false)
 const tagLabel = ref('')
 const tableData = ref<AnyO[]>([])
+const temporary_options = ref<AnyO[]>([])
+const chooseRow = ref<AnyO[]>([])
+const tableRowColor = ({ row, rowIndex }: { row: AnyO; rowIndex: number }) => {
+  if (chooseRow.value.find((v) => v[props.prop.value] === row[props.prop.value]))
+    return 'success-row'
+  return ''
+}
 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)
-    setTimeout(() => {
-      emits('update:modelValue', row[props.prop.value])
-    }, 100)
     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]))
+      chooseRow.value.splice(
+        chooseRow.value.findIndex((v) => v[props.prop.value] == row[props.prop.value]),
+        1
+      )
+    else chooseRow.value.push(row)
+    // tableRef.value.toggleRowSelection(row, undefined)
+    sendMulValue()
   }
 }
-
-const closeTag = () => {
-  emits('update:modelValue', '')
-  tableRef.value!.setCurrentRow(null)
+const closeTag = (row?: AnyO) => {
+  if (!props.mul) {
+    emits('update:modelValue', '')
+    emits('change', '', null)
+    tableRef.value!.setCurrentRow(null)
+  } else {
+    chooseRow.value.splice(
+      chooseRow.value.findIndex((v) => v == row),
+      1
+    )
+    sendMulValue()
+  }
+}
+const empty = () => {
+  chooseRow.value = []
+  sendMulValue()
+}
+const sendMulValue = () => {
+  let values = chooseRow.value.map((v) => v[props.prop.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)
-    getAxios(props.where ? props.where : searchObj).then((res) => {
+  if (props.modelValue && props.modelValue.length)
+    getAxios(props.where ? props.where : searchObj, true).then((res) => {
       if (res.code == 200 && res.data.length) {
-        tagLabel.value = res.data[0]?.[props.prop.label]
-      } else tagLabel.value = ''
+        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 appointGet = () => {
+  if (!is_aim.value) {
+    let params: AnyO = {}
+    params[props.where ? Object.keys(props.where)[0] : 'search'] = JSON.stringify(props.modelValue)
+    getTableData(params, true)
+  } else getTableData()
+  is_aim.value = !is_aim.value
 }
 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
+    if (props.getData) tableData.value = props.getData(res.data) || []
+    else 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 setCurrent = () => {
+  if (props.mul) {
+    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 {
+    let clickRow = tableData.value.find((v) => v[props.prop.value] === props.modelValue)
+    if (clickRow) tableRef.value!.setCurrentRow(clickRow)
+    else tableRef.value!.setCurrentRow(null)
+  }
 }
-//获取数据
 const getAxios = async (obj = {}, page1 = false): Promise<any> => {
   basic.loading = true
   if (page1) basic.page = 1
@@ -186,6 +297,32 @@ const getAxios = async (obj = {}, page1 = false): Promise<any> => {
     })
   return data
 }
+const getOptions = (val: string) => {
+  if (!val) return
+  select_loading.value = true
+  let searchObj: AnyO = {}
+  searchObj[props.searchKey ? props.searchKey : 'search'] = val
+  axios({
+    ...props.axiosConfig,
+    params: {
+      page: 1,
+      ...searchObj,
+      ...props.axiosConfig.params
+    }
+  })
+    .then((res_) => {
+      let res = res_.data
+      select_loading.value = false
+      if (res.code !== 200) return ElMessage.warning(res.msg)
+      if (props.getData) temporary_options.value = props.getData(res.data) || []
+      else temporary_options.value = res.data || []
+      temporary_options.value = res.data
+    })
+    .catch((err) => {
+      select_loading.value = false
+      ElMessage.error(err.code)
+    })
+}
 </script>
 
 <style lang="scss">
@@ -198,5 +335,31 @@ const getAxios = async (obj = {}, page1 = false): Promise<any> => {
   .el-table__body tr.current-row > td.el-table__cell {
     background-color: #bbe7ff !important;
   }
+
+  .el-tag__content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.el-table .success-row {
+  --el-table-tr-bg-color: #cdedff;
+}
+
+.circular {
+  margin-top: 5px;
+  display: inline;
+  height: 30px;
+  width: 30px;
+  animation: loading-rotate 2s linear infinite;
+}
+
+.path {
+  animation: loading-dash 1.5s ease-in-out infinite;
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
+  stroke-width: 2;
+  stroke: var(--el-color-primary);
+  stroke-linecap: round;
 }
 </style>

package/src/selectSuffix/types copy.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/selectSuffix/types.ts

@@ -3,28 +3,44 @@ 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
 }
 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, //多选
-  prop: {   //下拉框字段
-    label: string
-    value: string
-  }
-  where?: {  //弹出层打开需要展示Label的请求
-    [key: string]: string
-  }
-  axiosConfig: AxiosRequestConfig //Axios请求配置
-  isExist?: boolean,  // 是否选中关闭，单选默认true，多选默认false
-  searchKey?: string // 模糊搜索字段，默认search
+    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"
+}
+export interface Basic {
+    page: number
+    limit: number
+    count: number
+    is_dialogTable: boolean
+    loading: boolean
+    search: string
 }

package/src/sortableTable/utils/interface.ts

@@ -15,7 +15,7 @@ export type Props<T> = Mutable<
 >
 export type anyObj = { [key: string | number | symbol]: any }
 export interface SortColumn {
-  hide?: boolean
+  hide?: boolean //是否显示列
   ban?: boolean
   id?: number
   key?: string
@@ -47,6 +47,6 @@ export interface SortableTableIns
 export interface SortableTableDialog {
   config?: /* @vue-ignore */
   | Props<InstanceType<typeof ElDialog>>
-    | /* @vue-ignore */ Ref<Props<InstanceType<typeof ElDialog>>>['value']
+  | /* @vue-ignore */ Ref<Props<InstanceType<typeof ElDialog>>>['value']
   modelValue: SortColumn[] | Ref<SortColumn[]>['value']
 }