新功能: tableSelector组件

web/src/components/tableSelector/index.vue

@@ -1,82 +1,103 @@
 <template>
-  <el-select popper-class="popperClass" class="tableSelector" :multiple="props.tableConfig.isMultiple" @remove-tag="removeTag" v-model="data" placeholder="Select">
+  <el-select popper-class="popperClass" class="tableSelector" :multiple="props.tableConfig.isMultiple"
+             @remove-tag="removeTag" v-model="data" placeholder="请选择" @visible-change="visibleChange">
     <template #empty>
       <div class="option">
-        <el-input style="margin-bottom: 10px" v-model="search">
+        <el-input style="margin-bottom: 10px" v-model="search" clearable placeholder="请输入关键词" @change="getDict"
+                  @clear="getDict">
           <template #append>
-            搜索
+            <el-button type="primary" icon="Search"/>
           </template>
         </el-input>
         <el-table
-            :data="props.tableConfig.data"
+            :data="tableData"
             size="mini"
             border
+            row-key="id"
             style="width: 400px"
             max-height="200"
+            height="200"
             :highlight-current-row="!props.tableConfig.isMultiple"
             @selection-change="handleSelectionChange"
             @current-change="handleCurrentChange"
         >
           <el-table-column v-if="props.tableConfig.isMultiple" fixed type="selection" width="55"/>
-          <el-table-column fixed type="index" label="#" width="50" />
-          <el-table-column prop="date" label="Date" width="180"/>
-          <el-table-column prop="name" label="Name" width="180"/>
-          <el-table-column prop="address" label="Address" width="300"/>
-          <el-table-column prop="address" label="Address" width="300"/>
-          <el-table-column prop="address" label="Address" width="300"/>
-          <el-table-column prop="address" label="Address" width="300"/>
+          <el-table-column fixed type="index" label="#" width="50"/>
+          <el-table-column :prop="item.prop" :label="item.label" :width="item.width"
+                           v-for="(item,index) in props.tableConfig.columns"/>
         </el-table>
-        <el-pagination style="margin-top: 10px" background layout="prev, pager, next" :total="1000"/>
+        <el-pagination style="margin-top: 10px" background
+                       v-model:current-page="pageConfig.page"
+                       v-model:page-size="pageConfig.limit"
+                       layout="prev, pager, next"
+                       :total="pageConfig.total"
+                       @current-change="handlePageChange"
+        />
       </div>
     </template>
   </el-select>
 </template>
 
 <script setup lang="ts">
-import {defineProps, onMounted, ref, watch} from 'vue'
+import {defineProps, onMounted, reactive, ref, toRaw, watch} from 'vue'
+import {dict} from '@fast-crud/fast-crud'
+import XEUtils from "xe-utils";
 
 const props = defineProps({
   modelValue: {},
-  label: null,
-  value:null,
   tableConfig: {
+    url: null,
+    label: null, //显示值
+    value: null, //数据值
+    isTree:false,
     data: [],//默认数据
     isMultiple: false, //是否多选
+    columns: [], //每一项对应的列表项
   }
 } as any)
 const emit = defineEmits(['update:modelValue'])
 // template上使用data
 const data = ref()
+// 多选值
 const multipleSelection = ref()
 watch(multipleSelection, // 监听multipleSelection的变化，
     (value) => {
-      const {tableConfig,label} = props
-      if(!tableConfig.isMultiple){
-       data.value = value?value[label]:null
-      }else{
-
-        const result = value?value.map((item:any)=>{
-          return item[props.label]
-        }):null
+      const {tableConfig} = props
+      if (!tableConfig.isMultiple) {
+        data.value = value ? value[tableConfig.label] : null
+      } else {
+        const result = value ? value.map((item: any) => {
+          return item[tableConfig.label]
+        }) : null
         data.value = result
       }
     }, // 当multipleSelection值触发后，同步修改data.value的值
     {immediate: true} // 立即触发一次，给data赋值初始值
 )
+// 搜索值
+const search = ref(undefined)
+//表格数据
+const tableData = ref()
+// 分页的配置
+const pageConfig = reactive({
+  page: 1,
+  limit: 10,
+  total: 0
+})
 
-const removeTag = (val:any,aa:any)=>{
-  console.log(val,aa)
+const removeTag = (val: any, aa: any) => {
+  console.log(val, aa)
 }
 
 /**
  * 表格多选
  * @param val:Array
  */
-const handleSelectionChange = (val:any) => {
+const handleSelectionChange = (val: any) => {
   multipleSelection.value = val
-  const {value} = props
-  const result = val.map((item:any)=>{
-    return item[value]
+  const {tableConfig} = props
+  const result = val.map((item: any) => {
+    return item[tableConfig.value]
   })
   emit('update:modelValue', result)
 }
@@ -85,12 +106,61 @@ const handleSelectionChange = (val:any) => {
  * 表格单选
  * @param val:Object
  */
-const handleCurrentChange = (val:any) => {
+const handleCurrentChange = (val: any) => {
   multipleSelection.value = val
-  const {value} = props
-  emit('update:modelValue', val[value])
+  const {tableConfig} = props
+  emit('update:modelValue', val[tableConfig.value])
 }
 
+/**
+ * 获取字典值
+ */
+const getDict = async () => {
+  const url = props.tableConfig.url
+  const params = {
+    page: pageConfig.page,
+    limit: pageConfig.limit,
+    search: search
+  }
+  const dicts = dict({url: url, params: params})
+  await dicts.reloadDict()
+  const dictData = dicts.data
+  const {data, page, limit, total} = dictData
+  pageConfig.page = page
+  pageConfig.limit = limit
+  pageConfig.total = total
+  if (props.tableConfig.data === undefined || props.tableConfig.data.length === 0) {
+    if(props.tableConfig.isTree){
+      tableData.value = XEUtils.toArrayTree(data,{parentKey: 'parent', key: 'id', children: 'children'})
+    }else{
+      tableData.value = data
+    }
+
+  } else {
+    tableData.value = props.tableConfig.data
+  }
+}
+
+/**
+ * 下拉框展开/关闭
+ * @param bool
+ */
+const visibleChange = (bool: any) => {
+  if (bool) {
+    getDict()
+  }
+}
+
+/**
+ * 分页
+ * @param page
+ */
+const handlePageChange = (page: any) => {
+  pageConfig.page = page
+  getDict()
+}
+
+
 </script>
 
 <style scoped>
@@ -106,12 +176,14 @@ const handleCurrentChange = (val:any) => {
 .popperClass {
   height: 320px;
 }
+
 .el-select-dropdown__wrap {
   max-height: 310px !important;
 }
-.tableSelector{
-.el-icon,.el-tag__close{
-  display: none;
-}
+
+.tableSelector {
+  .el-icon, .el-tag__close {
+    display: none;
+  }
 }
 </style>