新功能: tableSelector组件

2023-02-18 19:25:15 +08:00
parent e34445d655
commit c633b580be
3 changed files with 175 additions and 82 deletions
--- a/web/src/components/tableSelector/index.vue
+++ b/web/src/components/tableSelector/index.vue
@@ -1,68 +1,89 @@
 <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 :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
+      const {tableConfig} = props
      if (!tableConfig.isMultiple) {
-       data.value = value?value[label]:null
+        data.value = value ? value[tableConfig.label] : null
      } else {
-
        const result = value ? value.map((item: any) => {
-          return item[props.label]
+          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)
@@ -74,9 +95,9 @@ const removeTag = (val:any,aa:any)=>{
 */
 const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
-  const {value} = props
+  const {tableConfig} = props
  const result = val.map((item: any) => {
-    return item[value]
+    return item[tableConfig.value]
  })
  emit('update:modelValue', result)
 }
@@ -87,10 +108,59 @@ const handleSelectionChange = (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,9 +176,11 @@ const handleCurrentChange = (val:any) => {
 .popperClass {
  height: 320px;
 }
+
 .el-select-dropdown__wrap {
  max-height: 310px !important;
 }
+
 .tableSelector {
  .el-icon, .el-tag__close {
    display: none;
--- a/web/src/settings.ts
+++ b/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() {
--- a/web/src/views/system/messageCenter/crud.tsx
+++ b/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;
 }
@@ -104,29 +105,24 @@ 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: {
                            name: shallowRef(tableSelector),
                            vModel: "modelValue",
-                            label:'name',
-                            value:'date',
                            tableConfig: {
+                                url: '/api/system/user/',
+                                label: 'name',
+                                value: 'id',
                                isMultiple: true,
-                                data:[{
-                                    date: '2016-05-03',
-                                    name: 'Tom',
-                                    address: 'No. 189, Grove St, Los Angeles',
+                                columns: [{
+                                    prop: 'name',
+                                    label: '用户名称',
+                                    width: 120
                                }, {
-                                    date: '2016-05-01',
-                                    name: 'Tom',
-                                    address: 'No. 189, Grove St, Los Angeles',
-                                },]
+                                    prop: 'phone',
+                                    label: '用户电话',
+                                    width: 120
+                                }]
                            }
                        },
                        show: compute(({form}) => {
@@ -153,14 +149,25 @@ 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: {
+                        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
                        }),
@@ -184,16 +191,30 @@ 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: {
+                        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
                        }),