新的组件

src/api/public-api.js

@@ -25,6 +25,10 @@ export function getChargeCode(pyCode) {
     })
 }
 
+/**
+ * 获取全部科室
+ * @return Promise<any[]>
+ */
 export function getDept() {
     return request({
         url: '/publicApi/getDept',

src/components/cy/combo-grid/CyComboGridTest.vue

@@ -69,9 +69,6 @@ const rules = {
 
 let monaco: any = null
 
-function method(val: any) {
-}
-
 function method2(val: any) {
   return new Promise(resolve => {
     setTimeout(() => {

src/components/cy/combo-grid/src/CyComboGrid.vue

@@ -19,6 +19,7 @@ const emits = defineEmits<{
   (e: 'rowClick', value: any): void,
   (e: 'clear'): void,
   (e: 'focus'): void,
+
   (e: 'change', value: any): void;
 }>()
 
@@ -246,6 +247,7 @@ defineExpose({
               <vxe-column field="label" title="名称" :width="rightTableLabelWidth"/>
             </vxe-table>
           </div>
+          <!--     主要的table     -->
           <div :style="{width: XEUtils.addUnit(props.tableWidth) }">
             <vxe-table :class="nsSelect.e('table')"
                        ref="tableRef"
@@ -308,7 +310,6 @@ defineExpose({
             </vxe-table>
           </div>
         </div>
-
       </template>
     </el-tooltip>
   </div>

src/components/cy/cy-select-table/Table.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import * as us from "./index";
+
+defineOptions({
+  name: 'CySelectTableComponent',
+})
+
+const {pageInfo, tmpTable, ...root} = inject(us.key)
+</script>
+
+<template>
+  <div style="width: 100%">
+    <el-table :data="tmpTable"
+              :max-height="root.props.tableHeight"
+              alignWhole="center"
+              stripe
+              :header-cell-style="{
+                background: 'var(--el-fill-color-light)',
+                color: 'var(--el-text-color-primary)'
+            }"
+              :row-key="root.props.rowKey">
+      <el-table-column v-for="item in root.props.tableHeader"
+                       :prop="item.prop"
+                       :label="item.label"
+                       :width="item.width"
+      />
+    </el-table>
+    <el-pagination
+        background
+        small
+        style="width: 100%;margin: 16px 0;display: flex;flex-wrap: wrap;justify-content: flex-end;"
+        :total="pageInfo.total"
+        :pager-count="5"
+        :current-page="pageInfo.currentPage"
+        :page-size="pageInfo.pageSize"
+        @currentChange="(val) => pageInfo.currentPage = val"
+        @sizeChange="(val) => pageInfo.pageSize = val"
+        layout="prev, pager, next"
+    />
+  </div>
+</template>
+
+<style lang="scss">
+
+</style>

src/components/cy/cy-select-table/index.tsx

@@ -0,0 +1,146 @@
+import {ElForm, ElSelect} from "element-plus";
+import type {InjectionKey} from "vue";
+import {ExtractPropTypes, PropType} from "vue";
+import sleep from "@/utils/sleep";
+import XEUtils from "xe-utils";
+
+export type Aaa = {
+    aa: string
+}
+
+export const Props = {
+    modelValue: {
+        type: [Object, String, Array, Number] as PropType<string | any[] | object>,
+        required: true,
+    },
+    multiple: {
+        type: Boolean,
+        default: false,
+    },
+    tableHeader: {
+        type: Array as PropType<{
+            prop: string,
+            label: string
+            width?: string | number
+        }[]>,
+        default: [],
+    },
+    rowKey: {
+        type: [String, Function] as PropType<string | ((row: any) => string)>,
+        default: 'code',
+    },
+    remoteMethod: {
+        type: Function as PropType<(value: string) => null | Promise<any[] | unknown>>,
+        default: () => [],
+    },
+    tableHeight: {
+        type: [String, Number],
+        default: 300,
+    },
+    pagination: {
+        type: [Object] as PropType<{
+            localPage: boolean,
+            pageSize: number,
+            pageSizeName: string,
+            currentPageName: string,
+            total: string,
+            data: string
+        }>,
+        default: {
+            localPage: true,
+            pageSize: 5,
+            pageSizeName: "pageSize",
+            currentPageName: "currentPage",
+            total: "total",
+            data: "data"
+        }
+    }
+}
+
+export const useSelectTable = (props: Readonly<Required<ExtractPropTypes<typeof Props>>>) => {
+    const selectRef = shallowRef<InstanceType<typeof ElSelect>>()
+    const formRef = shallowRef<InstanceType<typeof ElForm>>()
+    const tableContentRef = shallowRef<HTMLDivElement>()
+
+    const store = reactive({
+        modelValue: "",
+        tableData: [] as any[],
+        searchValue: "",
+
+        loading: false,
+    })
+
+    const tmpTable = computed(() => {
+        if (props.pagination.localPage) {
+            return store.tableData.slice((pageInfo.currentPage - 1) * pageInfo.pageSize, pageInfo.currentPage * pageInfo.pageSize);
+        }
+        return store.tableData;
+    })
+
+    const pageInfo = reactive({
+        queryParams: {},
+        total: 0,
+        pageSize: props.pagination.pageSize,
+        currentPage: 1,
+    })
+
+    const mutation = {
+        onSearch: async () => {
+            if (!props.remoteMethod) {
+                return;
+            }
+            if (store.loading) return
+            store.loading = true
+            if (props.pagination.localPage) {
+                // @ts-ignore
+                store.tableData = await props.remoteMethod(store.searchValue)
+                    .catch(() => {
+                        return [];
+                    })
+                pageInfo.total = store.tableData.length
+            } else {
+                await props.remoteMethod(store.searchValue).then(res => {
+                    store.tableData = XEUtils.get(res, props.pagination.data)
+                    pageInfo.total = XEUtils.get(res, props.pagination.total)
+                }).catch(() => {
+                    store.tableData = []
+                    pageInfo.total = 0
+                    pageInfo.currentPage = 1
+                    pageInfo.pageSize = props.pagination.pageSize
+                })
+            }
+
+            store.loading = false;
+
+        },
+        visibleChange: async (val: string) => {
+            if (!val) {
+                return;
+            }
+            const div = tableContentRef.value;
+            const inputs = div.querySelectorAll('input');
+            if (inputs && inputs.length && inputs.length > 0) {
+                // onMounted(async () => {
+                await sleep(200)
+                //     inputs[0].focus();
+                // })
+                inputs[0].focus();
+            }
+        }
+    }
+
+    return {
+        selectRef,
+        formRef,
+        store,
+        props,
+        mutation,
+        tableContentRef,
+        pageInfo,
+        tmpTable
+    }
+}
+
+export const key: InjectionKey<ReturnType<typeof useSelectTable>> =
+    Symbol('CySelectTable')
+

src/components/cy/cy-select-table/index.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import {ElSelect} from "element-plus";
+import CySelectTableComponent from "./Table.vue";
+import * as us from "./index";
+
+defineOptions({
+  name: 'CySelectTable',
+})
+
+const props = defineProps({...us.Props});
+// @ts-ignore
+const {store, mutation, ...root} = us.useSelectTable(props);
+
+function setFormRef(el: any) {
+  root.formRef.value = el
+}
+
+function setSelectRef(el: any) {
+  root.selectRef.value = el
+}
+
+function setTableContentRef(el: any) {
+  root.tableContentRef.value = el;
+}
+
+provide(us.key, {store, mutation, ...root});
+</script>
+
+<template>
+  <el-select :ref="setSelectRef"
+             @visibleChange="mutation.visibleChange">
+    <template #empty>
+      <div
+          :ref="setTableContentRef"
+          style="margin: 1rem"
+          class="cy-select-table-empty"
+          v-loading="store.loading"
+      >
+        <el-form
+            :ref="setFormRef"
+            :inline="true"
+            label-position="right">
+          <el-form-item prop="searchValue">
+            <el-input v-model="store.searchValue"
+                      style="width: 220px"
+                      clearable
+                      @keydown.enter.stop.prevent="mutation.onSearch"/>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="primary" text bg @click="mutation.onSearch">
+              查询
+            </el-button>
+          </el-form-item>
+        </el-form>
+
+        <CySelectTableComponent/>
+      </div>
+    </template>
+  </el-select>
+</template>
+
+<style>
+
+</style>

src/utils/cy-use/useList.ts

@@ -2,26 +2,28 @@ import XEUtils from "xe-utils";
 
 type CodeType<T> = keyof T & string | ((item: T) => string);
 
-export default function useList<T = any>(opt: {
+type OptObj<T> = {
     value: T[];
     key: CodeType<T>;
     errMsg: ((item: T) => string) | string
-} | T[]) {
+}
+
+export default function useList<T = any>(opt: OptObj<T> | T[]) {
 
     let trackProxy = () => {
     }
     let triggerProxy = () => {
     }
 
-    let list = []
+    let list: T[] = []
 
     if (XEUtils.isArray(opt)) {
         list = opt
     }
 
     if (XEUtils.isObject(opt)) {
-        if (Array.isArray(opt.value)) {
-            list = value
+        if (Array.isArray(opt!.value)) {
+            list = opt!.value
         }
     }
 
@@ -39,7 +41,7 @@ export default function useList<T = any>(opt: {
 
     return customRef((track, trigger) => {
         trackProxy = track;
-        triggerProxy = XEUtils.debounce(trigger);
+        triggerProxy = XEUtils.debounce(trigger, 200);
         return {
             get() {
                 track()
@@ -51,5 +53,6 @@ export default function useList<T = any>(opt: {
                 trigger()
             }
         }
-    });
+    })
+
 }