ci-plus 1.0.8 → 1.1.0

package/index.ts

@@ -4,6 +4,8 @@ import { App } from 'vue';
 
 export default {
   install: (app: App) => {
+    // 注册所有组件
+    console.log('注册所有ci-plus组件: ');
     for (const c in components) {
       app.use(components[c]);
     }

package/package.json

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

package/src/assets/icons/exportExcel.svg

@@ -0,0 +1,19 @@
+<!-- 导出excel -->
+<svg
+  t="1705566058206" class="icon" viewBox="0 0 1024 1024"
+  version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="7831" width="200" height="200"
+>
+  <path
+    d="M595.2 755.2h128v88.32L954.88 710.4 723.2 576v89.6h-128zM266.24 134.4c0-6.4 6.4-12.8 12.8-12.8H652.8c3.84 0 7.68 0 12.8 1.28v198.4H864c1.28 5.12 1.28 29.44 1.28 33.28v252.16l49.92 30.72v-281.6c0-34.56-20.48-102.4-43.52-126.72L760.32 117.76C736 93.44 688.64 74.24 654.08 74.24H279.04c-34.56 0-62.72 28.16-62.72 62.72V262.4h49.92v-128z m449.28 10.24c3.84 2.56 6.4 5.12 8.96 7.68l111.36 111.36c2.56 2.56 5.12 5.12 7.68 8.96h-128v-128z"
+    fill="#22975D"
+    p-id="7832"
+  >
+  </path>
+  <path
+    d="M595.2 385.28H800v58.88H595.2z m270.08 503.04c0 6.4-6.4 12.8-12.8 12.8H279.04c-6.4 0-12.8-6.4-12.8-12.8v-42.24h-49.92v42.24c0 34.56 28.16 62.72 62.72 62.72h574.72c34.56 0 62.72-28.16 62.72-62.72V783.36l-49.92 29.44v75.52zM537.6 320H69.12v468.48H537.6V320zM367.36 687.36l-64-94.72-28.16 43.52h28.16v52.48H160l104.96-153.6L172.8 396.8h76.8l55.04 80.64 55.04-80.64h76.8l-92.16 138.24 104.96 153.6h-81.92z m227.84-185.6H800v58.88H595.2z"
+    fill="#22975D"
+    p-id="7833"
+  >
+  </path>
+</svg>

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,156 @@
 <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"
+      v-bind="$attrs"
+    >
+      <template #prefix>
+        <span class="el-input-number__increase" @click.stop="openTable">
+          <el-icon>
+            <Operation />
+          </el-icon>
+        </span>
+      </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,35 +160,83 @@ const basic = reactive<Basic>({
   is_dialogTable: false,
   search: ''
 })
+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)
     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) => {
@@ -153,12 +246,23 @@ const getTableData = (obj = {}, page1 = false) => {
     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
@@ -185,6 +289,27 @@ const getAxios = async (obj = {}, page1 = false): Promise<any> => {
     })
   return data
 }
+const getOptions = (val: string) => {
+  if (!val) return
+  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
+      if (res.code !== 200) return ElMessage.warning(res.msg)
+      temporary_options.value = res.data
+    })
+    .catch((err) => {
+      ElMessage.error(err.code)
+    })
+}
 </script>
 
 <style lang="scss">
@@ -197,5 +322,14 @@ 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;
 }
 </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

@@ -7,6 +7,9 @@ export interface Scope<T> {
   $index: number,
   column: ColumnCls<T>
 }
+export interface AnyO {
+  [key: string]: any
+}
 export interface SelectColumn {
   col: Props<TableColumnInstance>
   scope?(props: any): string
@@ -14,17 +17,29 @@ export interface SelectColumn {
 }
 export interface SelectSuffix {
   title?: string  //弹出层标题
-  modelValue: string | string[] //下拉框value
+  modelValue?: string | string[] //下拉框value
   columns: SelectColumn[] // 表格列配置
-  mul?: boolean, //多选
+  mul?: boolean //多选
+  aim?: boolean
+  disabled?: boolean
+  size?: "" | "default" | "small" | "large"
   prop: {   //下拉框字段
     label: string
     value: string
   }
-  where?: {  //弹出层打开需要展示Label的请求
+  where?: {  //弹出层打开需要展示Label的请求的params
     [key: string]: string
   }
   axiosConfig: AxiosRequestConfig //Axios请求配置
-  isExist?: boolean,  // 是否选中关闭，单选默认true，多选默认false
-  searchKey?: string // 模糊搜索字段，默认search
+  isExist?: boolean  // 是否选中关闭，单选默认true，多选默认false
+  searchKey?: string // 模糊搜索字段，默认search,
+  // selectConfig?:Props<ISelectV2Props>
+}
+export interface Basic {
+  page: number
+  limit: number
+  count: number
+  is_dialogTable: boolean
+  loading: boolean
+  search: string
 }

package/src/sortableTable/headButtons.vue

@@ -5,9 +5,8 @@
 * @version : 1.0.0
 * @since : 创建时间 2023-12-26 14:18:14
 */ -->
-
 <template>
-  <div class="ci-buttons">
+  <div class="ciheadbtns">
     <div>
       <slot name="left"></slot>
     </div>
@@ -20,7 +19,7 @@
 defineOptions({ name: 'ci-headbtns' })
 </script>
 <style lang="scss">
-.ci-buttons {
+.ciheadbtns {
   display: flex;
   justify-content: space-between;
   padding: 5px 10px;