调整tableSelect组件

src/components.d.ts

@@ -8,13 +8,17 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Amap: typeof import('./components/FsMapPicker/components/amap.vue')['default']
+    Area: typeof import('./components/form/Area.vue')['default']
     Baidu: typeof import('./components/FsMapPicker/components/baidu.vue')['default']
     CardItem: typeof import('./components/FsCheckCard/components/CardItem.vue')['default']
     Cropper: typeof import('./components/avatar/cropper.vue')['default']
+    Dict: typeof import('./components/form/Dict.vue')['default']
+    Editor: typeof import('./components/form/Editor.vue')['default']
     ElArea: typeof import('./components/form/ElArea.vue')['default']
     ElDict: typeof import('./components/form/ElDict.vue')['default']
     ElEditor: typeof import('./components/form/ElEditor.vue')['default']
     ElEmployees: typeof import('./components/form/ElEmployees.vue')['default']
+    Employees: typeof import('./components/form/Employees.vue')['default']
     Exception: typeof import('./components/Exception.vue')['default']
     FsCheckCard: typeof import('./components/FsCheckCard/index.vue')['default']
     FsCity: (typeof import('./components/FsCity/index.vue'))['default']
@@ -42,5 +46,6 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     SelIcon: typeof import('./components/SelIcon.vue')['default']
     SvgIcon: typeof import('./components/SvgIcon.vue')['default']
+    TableSelect: typeof import('./components/form/TableSelect.vue')['default']
   }
 }

src/components/FsTableSelect/props.ts

@@ -1,58 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import type { InputProps, PopoverProps, TagProps } from 'element-plus'
-import type { TableConfig } from './types'
-
-export interface TableSelectProps {
-  // 绑定值
-  modelValue: any
-  // 是否多选
-  multiple?: boolean
-  // 是否禁用
-  disabled?: boolean
-  // 尺寸
-  size?: InputProps['size']
-  // 是否支持清除
-  clearable?: boolean
-  // value 的属性名
-  valueKey?: string
-  // label 的属性名
-  labelKey?: string
-  // 回显数据，用于后端分页显示
-  initValue?: any
-  // 气泡位置
-  placement?: PopoverProps['placement']
-  // 占位符
-  placeholder?: string
-  // popover 宽度
-  popperWidth?: number | string
-  // 自定义 popper 类名
-  popperClass?: string
-  // popper 配置项
-  popperOptions?: PopoverProps['popperOptions']
-  // 表格配置
-  tableConfig?: TableConfig
-  // tag 类型
-  tagType?: TagProps['type']
-  // 最多显示多少个tag
-  maxTagCount?: number
-  // 自定义数据转换方法
-  transformData?: Function
-}
-
-/**
- * 事件
- */
-export const tableSelectEmits = {
-  // 更新绑定值
-  'update:modelValue': (_value: any) => true,
-  // 清除按钮点击事件
-  clear: () => true,
-  // 多选单个清除事件
-  'item-clear': (_value: object) => true,
-  // 获取焦点事件
-  focus: (_e: FocusEvent) => true,
-  // 失去焦点事件
-  blur: (_e: FocusEvent) => true,
-  // 输入框值改变事件
-  change: (_value: string | Array<any>) => true
-}

src/components/FsTableSelect/types/index.ts

@@ -1,24 +0,0 @@
-/* 多选选中数据文本 */
-export interface TableConfig {
-  // 表格列
-  column?: Array<TableColumn>
-  // 表格数据
-  datasource: (...args: any) => Promise<any>
-  // 每页显示条数
-  pageSize?: Number
-}
-
-interface TableColumn {
-  // 类型
-  type?: string
-  // 列名
-  field?: string
-  // 表格宽度
-  width?: number | string
-  // 对齐方式
-  align?: string
-  // 标题
-  title?: string
-  // 插槽
-  slot?: string
-}

src/components/form/ElDict.vue → src/components/form/Dict.vue

@@ -20,7 +20,7 @@ getDict(props.type).then(res => {
 </script>
 
 <template>
-  <el-select v-model="modelValue">
+  <el-select v-model="modelValue" clearable>
     <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
   </el-select>
 </template>

src/components/FsTableSelect/index.vue → src/components/form/TableSelect.vue

@@ -1,13 +1,69 @@
 <script setup lang="ts">
-import type { TableSelectProps } from './props'
-import { tableSelectEmits } from './props'
 import { ElPopover } from 'element-plus'
 import type { VxeTableInstance } from 'vxe-table'
+import type { PopoverProps, TagProps } from 'element-plus'
+
+interface TableColumn {
+  // 类型
+  type?: string
+  // 列名
+  field?: string
+  // 表格宽度
+  width?: number | string
+  // 对齐方式
+  align?: string
+  // 标题
+  title?: string
+  // 插槽
+  slot?: string
+}
+
+interface TableConfig {
+  // 表格列
+  column?: Array<TableColumn>
+  // 表格数据
+  request: (...args: any) => Promise<any>
+  // 每页显示条数
+  pageSize?: Number
+}
+
+interface TableSelectProps {
+  // 绑定值
+  modelValue: any
+  // 是否多选
+  multiple?: boolean
+  // 是否禁用
+  disabled?: boolean
+  // 是否支持清除
+  clearable?: boolean
+  // value 的属性名
+  valueKey?: string
+  // label 的属性名
+  labelKey?: string
+  // 回显数据，用于后端分页显示
+  initValue?: any
+  // 气泡位置
+  placement?: PopoverProps['placement']
+  // 占位符
+  placeholder?: string
+  // popover 宽度
+  popperWidth?: number | string
+  // 自定义 popper 类名
+  popperClass?: string
+  // popper 配置项
+  popperOptions?: PopoverProps['popperOptions']
+  // 表格配置
+  tableConfig?: TableConfig
+  // tag 类型
+  tagType?: TagProps['type']
+  // 最多显示多少个tag
+  maxTagCount?: number
+  // 自定义数据转换方法
+  transformData?: Function
+}
 
-const emits = defineEmits(tableSelectEmits)
 const props = withDefaults(defineProps<TableSelectProps>(), {
   modelValue: '',
-  size: 'default',
   clearable: true,
   valueKey: 'id',
   labelKey: 'name',
@@ -17,6 +73,7 @@ const props = withDefaults(defineProps<TableSelectProps>(), {
   tagType: 'info',
   maxTagCount: 5
 })
+const emits = defineEmits(['update:modelValue', 'change', 'clear', 'item-clear', 'focus', 'blur'])
 
 /* 格式化提交数据 */
 const transformData = (value: any) => {
@@ -182,13 +239,13 @@ const tableDone = () => {
 
 /* 请求数据 */
 const request = (where?: any) => {
-  if (typeof props.tableConfig?.datasource === 'function') {
+  if (typeof props.tableConfig?.request === 'function') {
     loading.value = true
     if (where && where.pageNo) {
       pageNo.value = where.pageNo
     }
     props.tableConfig
-      .datasource({
+      .request({
         pageNo: pageNo.value,
         pageSize: props.tableConfig.pageSize,
         ...where
@@ -205,7 +262,7 @@ const request = (where?: any) => {
         loading.value = false
       })
   } else {
-    console.warn('tableConfig.datasource 必须为 Promise')
+    console.warn('tableConfig.request 必须为 Promise')
   }
 }
 request()
@@ -260,7 +317,6 @@ defineExpose({
     <template #reference>
       <div class="table-select-container" :class="{ 'is-multiple': multiple, 'is-visible': visible }">
         <el-input
-          :size="size"
           :disabled="disabled"
           :placeholder="multiple && !isEmpty ? '' : placeholder"
           :readonly="true"
@@ -279,7 +335,7 @@ defineExpose({
                   <CircleClose />
                 </slot>
               </ElIcon>
-              <ElIcon class="select-down" :class="{ 'select-down-rotate': visible }">
+              <ElIcon class="select-down" :class="{ 'select-down-rotate': visible }" v-else>
                 <slot name="suffixIcon">
                   <ArrowDown />
                 </slot>
@@ -358,11 +414,9 @@ defineExpose({
     border-radius: 50%;
     overflow: hidden;
     z-index: 2;
-    color: #fff;
-    background-color: var(--el-color-info-light-3);
     opacity: 0;
     &:hover {
-      background-color: var(--el-color-info);
+      opacity: 100;
     }
   }
   .select-down {

src/components/index.ts

@@ -7,7 +7,7 @@ function registerComponent(app: App): void {
   for (const key in modules) {
     const name = key.replace(/^\.\/form\/|\.vue/g, '')
     const component = (modules[key] as any).default
-    app.component(name, component)
+    app.component('El' + name, component)
   }
 
   app.component('icon-system', System)

src/views/extension/tableSelect/base.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { TableConfig } from '@/components/FsTableSelect/types'
-
 const data = ref('')
 
 const datas = ref('')
@@ -23,7 +21,7 @@ const request = function ({ pageNo }: any) {
   })
 }
 
-const tableConfig: TableConfig = {
+const tableConfig = {
   column: [
     {
       title: '#',
@@ -43,7 +41,7 @@ const tableConfig: TableConfig = {
     }
   ],
   /* 实际开发应传入接口方法 */
-  datasource: request,
+  request: request,
   pageSize: 5
 }
 
@@ -62,17 +60,17 @@ const transformData2 = (data: any) => {
     <el-row :gutter="15">
       <el-col :span="6">
         <el-form-item label="单选">
-          <fs-table-select v-model="data" :tableConfig="tableConfig" :transform-data="transformData">
+          <el-table-select v-model="data" :tableConfig="tableConfig" :transform-data="transformData">
             <template #sex="{ row }">
               <el-tag size="small">{{ row.sex }}</el-tag>
             </template>
-          </fs-table-select>
+          </el-table-select>
           选中数据： {{ data }}
         </el-form-item>
       </el-col>
       <el-col :span="6">
         <el-form-item label="多选">
-          <fs-table-select
+          <el-table-select
             v-model="datas"
             :tableConfig="tableConfig"
             multiple
@@ -82,7 +80,7 @@ const transformData2 = (data: any) => {
             <template #sex="{ row }">
               <el-tag size="small">{{ row.sex }}</el-tag>
             </template>
-          </fs-table-select>
+          </el-table-select>
           选中数据： {{ datas }}
         </el-form-item>
       </el-col>

src/views/extension/tableSelect/disabled.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import FsTableSelect from '@/components/FsTableSelect/index.vue'
-import type { TableConfig } from '@/components/FsTableSelect/types'
-
 const data = ref('')
 
 const datas = ref('')
@@ -26,7 +23,7 @@ const request = function ({ pageNo }: any) {
   })
 }
 
-const tableConfig: TableConfig = {
+const tableConfig = {
   column: [
     {
       title: '#',
@@ -45,7 +42,7 @@ const tableConfig: TableConfig = {
       slot: 'sex'
     }
   ],
-  datasource: request,
+  request: request,
   pageSize: 5
 }
 </script>
@@ -63,20 +60,20 @@ const tableConfig: TableConfig = {
       </el-col>
       <el-col :span="6">
         <el-form-item label="单选">
-          <fs-table-select v-model="data" :tableConfig="tableConfig" :disabled="isDisabled">
+          <el-table-select v-model="data" :tableConfig="tableConfig" :disabled="isDisabled">
             <template #sex="{ row }">
               <el-tag size="small">{{ row.sex }}</el-tag>
             </template>
-          </fs-table-select>
+          </el-table-select>
         </el-form-item>
       </el-col>
       <el-col :span="6">
         <el-form-item label="多选">
-          <fs-table-select v-model="datas" :tableConfig="tableConfig" :disabled="isDisabled" multiple>
+          <el-table-select v-model="datas" :tableConfig="tableConfig" :disabled="isDisabled" multiple>
             <template #sex="{ row }">
               <el-tag size="small">{{ row.sex }}</el-tag>
             </template>
-          </fs-table-select>
+          </el-table-select>
         </el-form-item>
       </el-col>
     </el-row>

src/views/extension/tableSelect/search.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import FsTableSelect from '@/components/FsTableSelect/index.vue'
-import type { TableConfig } from '@/components/FsTableSelect/types'
-
 const data = ref('')
 const datas = ref('')
 
@@ -28,7 +25,7 @@ const request = function ({ pageNo }: any) {
   })
 }
 
-const tableConfig: TableConfig = {
+const tableConfig = {
   column: [
     {
       title: '#',
@@ -47,7 +44,7 @@ const tableConfig: TableConfig = {
       slot: 'sex'
     }
   ],
-  datasource: request,
+  request: request,
   pageSize: 5
 }
 
@@ -98,7 +95,7 @@ const setInitValue = () => {
       </el-col>
       <el-col :span="6">
         <el-form-item label="单选" prop="name">
-          <fs-table-select
+          <el-table-select
             v-model="data"
             :tableConfig="tableConfig"
             :init-value="initValue"
@@ -129,12 +126,12 @@ const setInitValue = () => {
             <template #sex="{ row }">
               <el-tag size="small">{{ row.sex }}</el-tag>
             </template>
-          </fs-table-select>
+          </el-table-select>
         </el-form-item>
       </el-col>
       <el-col :span="6">
         <el-form-item label="多选">
-          <fs-table-select
+          <el-table-select
             v-model="datas"
             :init-value="initValue2"
             :tableConfig="tableConfig"
@@ -163,7 +160,7 @@ const setInitValue = () => {
             <template #sex="{ row }">
               <el-tag size="small">{{ row.sex }}</el-tag>
             </template>
-          </fs-table-select>
+          </el-table-select>
         </el-form-item>
       </el-col>
     </el-row>

src/views/form/Basic.vue

@@ -2,6 +2,24 @@
 import type { BasicForm } from '@/types/form'
 import { ElInput } from 'element-plus'
 
+const request = function ({ pageNo }: any) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      const data = {
+        list: [
+          { name: '张三' + pageNo, sex: '男', id: '' + pageNo + 1 },
+          { name: '李四' + pageNo, sex: '女', id: '' + pageNo + 2 },
+          { name: '王五' + pageNo, sex: '男', id: '' + pageNo + 3 },
+          { name: '赵六' + pageNo, sex: '女', id: '' + pageNo + 4 },
+          { name: '张三' + pageNo, sex: '男', id: '' + pageNo + 5 }
+        ],
+        total: 10
+      }
+      resolve(data)
+    }, 1500)
+  })
+}
+
 const formData = reactive<any>({})
 const formConfig = reactive<BasicForm>({
   span: 12,
@@ -40,6 +58,37 @@ const formConfig = reactive<BasicForm>({
         }
       }
     },
+    {
+      label: '下拉表格',
+      value: '',
+      name: 'tableSelect',
+      type: 'tableSelect',
+      props: {
+        tableConfig: {
+          column: [
+            {
+              title: '#',
+              type: 'seq',
+              width: 45,
+              align: 'center'
+            },
+            {
+              title: '姓名',
+              field: 'name',
+              align: 'center'
+            },
+            {
+              title: '性别',
+              align: 'center',
+              slot: 'sex'
+            }
+          ],
+          /* 实际开发应传入接口方法 */
+          request: request,
+          pageSize: 5
+        }
+      }
+    },
     {
       label: '手机号',
       value: '',
@@ -86,7 +135,6 @@ const formConfig = reactive<BasicForm>({
       type: 'dict',
       props: {
         type: 'task_from',
-        clearable: true,
         multiple: true
       }
     },