新功能: 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 fixed type="index" label="#" width="50"/>
-          <el-table-column prop="date" label="Date" width="180"/>
+          <el-table-column :prop="item.prop" :label="item.label" :width="item.width"
-          <el-table-column prop="name" label="Name" width="180"/>
+                           v-for="(item,index) in props.tableConfig.columns"/>
-          <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>
-        <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
+      const {tableConfig} = props
-      if(!tableConfig.isMultiple){
+      if (!tableConfig.isMultiple) {
-       data.value = value?value[label]:null
+        data.value = value ? value[tableConfig.label] : null
-      }else{
+      } else {
-
+        const result = value ? value.map((item: any) => {
-        const result = value?value.map((item:any)=>{
+          return item[tableConfig.label]
-          return item[props.label]
+        }) : null
-        }):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)=>{
+const removeTag = (val: any, aa: any) => {
-  console.log(val,aa)
+  console.log(val, aa)
 }
 
 /**
  * 表格多选
  * @param val:Array
  */
-const handleSelectionChange = (val:any) => {
+const handleSelectionChange = (val: any) => {
   multipleSelection.value = val
-  const {value} = props
+  const {tableConfig} = props
-  const result = val.map((item:any)=>{
+  const result = val.map((item: any) => {
-    return item[value]
+    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
+  const {tableConfig} = props
-  emit('update:modelValue', val[value])
+  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{
+.tableSelector {
+  .el-icon, .el-tag__close {
     display: none;
-}
+  }
 }
 </style>

web/src/settings.ts

@@ -18,7 +18,7 @@ export default {
 			//i18n, //i18n配置，可选，默认使用中文，具体用法请看demo里的 src/i18n/index.js 文件
 			// 此处配置公共的dictRequest（字典请求）
 			async dictRequest({ dict }: any) {
-				return await request({ url: dict.url }); //根据dict的url，异步返回一个字典数组
+				return await request({ url: dict.url,params:dict.params || {} }); //根据dict的url，异步返回一个字典数组
 			},
 			//公共crud配置
 			commonOptions() {

web/src/views/system/messageCenter/crud.tsx

@@ -4,6 +4,7 @@ import {request} from "/@/utils/service";
 import {dictionary} from "/@/utils/dictionary";
 import tableSelector from "/@/components/tableSelector/index.vue"
 import {shallowRef} from "vue";
+
 interface CreateCrudOptionsTypes {
     crudOptions: CrudOptions;
 }
@@ -35,7 +36,7 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                 id: {
                     title: 'id',
                     form: {
-                        show:false
+                        show: false
                     }
 
                 },
@@ -58,8 +59,8 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                 is_read: {
                     title: '是否已读',
                     type: 'dict-select',
-                    column:{
+                    column: {
-                        show:false
+                        show: false
                     },
                     dict: dict({
                         data: [
@@ -68,12 +69,12 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                         ]
                     }),
                     form: {
-                        show:false
+                        show: false
                     }
                 },
                 target_type: {
                     title: '目标类型',
-                    type: ['dict-radio','colspan'],
+                    type: ['dict-radio', 'colspan'],
                     width: 120,
                     // show() {
                     //     return vm.tabActivted === 'send'
@@ -104,32 +105,27 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                     },
                     width: 130,
                     disabled: true,
-                    dict: dict({
-                        cache: false,
-                        url: '/api/system/user/',
-                        value: 'id', // 数据字典中value字段的属性名
-                        label: 'name', // 数据字典中label字段的属性名
-                    }),
                     form: {
-                        component:{
+                        component: {
                             name: shallowRef(tableSelector),
                             vModel: "modelValue",
-                            label:'name',
+                            tableConfig: {
-                            value:'date',
+                                url: '/api/system/user/',
-                            tableConfig:{
+                                label: 'name',
-                                isMultiple:true,
+                                value: 'id',
-                                data:[{
+                                isMultiple: true,
-                                    date: '2016-05-03',
+                                columns: [{
-                                    name: 'Tom',
+                                    prop: 'name',
-                                    address: 'No. 189, Grove St, Los Angeles',
+                                    label: '用户名称',
-                                },{
+                                    width: 120
-                                    date: '2016-05-01',
+                                }, {
-                                    name: 'Tom',
+                                    prop: 'phone',
-                                    address: 'No. 189, Grove St, Los Angeles',
+                                    label: '用户电话',
-                                },]
+                                    width: 120
+                                }]
                             }
                         },
-                        show:compute(({ form })=>{
+                        show: compute(({form}) => {
                             return form.target_type === 0
                         }),
                         rules: [ // 表单校验规则
@@ -153,15 +149,26 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                     },
                     disabled: true,
                     width: 130,
-                    type: 'table-selector',
-                    dict: {
-                        cache: false,
-                        url: '/api/system/role/',
-                        value: 'id', // 数据字典中value字段的属性名
-                        label: 'name', // 数据字典中label字段的属性名
-                    },
                     form: {
-                        show:compute(({ form })=>{
+                        component: {
+                            name: shallowRef(tableSelector),
+                            vModel: "modelValue",
+                            tableConfig: {
+                                url: '/api/system/role/',
+                                label: 'name',
+                                value: 'id',
+                                isMultiple: true,
+                                columns: [{
+                                    prop: 'name',
+                                    label: '角色名称'
+                                },
+                                    {
+                                        prop: 'key',
+                                        label: '权限标识'
+                                    }]
+                            }
+                        },
+                        show: compute(({form}) => {
                             return form.target_type === 1
                         }),
                         rules: [ // 表单校验规则
@@ -184,17 +191,31 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                     },
                     width: 130,
                     type: 'table-selector',
-                    dict: {
-                        cache: false,
-                        url: '/api/system/dept/all_dept/',
-                        isTree: true,
-                        value: 'id', // 数据字典中value字段的属性名
-                        label: 'name', // 数据字典中label字段的属性名
-                        children: 'children', // 数据字典中children字段的属性名
-                    },
-                    disabled: true,
                     form: {
-                        show:compute(({ form })=>{
+                        component: {
+                            name: shallowRef(tableSelector),
+                            vModel: "modelValue",
+                            tableConfig: {
+                                url: '/api/system/dept/all_dept/',
+                                label: 'name',
+                                value: 'id',
+                                isTree: true,
+                                isMultiple: true,
+                                columns: [{
+                                    prop: 'name',
+                                    label: '部门名称'
+                                },
+                                {
+                                    prop: 'status_label',
+                                    label: '状态'
+                                },
+                                {
+                                    prop: 'parent_name',
+                                    label: '父级部门'
+                                }]
+                            }
+                        },
+                        show: compute(({form}) => {
                             return form.target_type === 2
                         }),
                         rules: [ // 表单校验规则
@@ -235,7 +256,7 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
                             config: {},
                             uploader: {
                                 type: "form",
-                                buildUrl(res:any) {
+                                buildUrl(res: any) {
                                     return res.url;
                                 }
                             }