功能变化: 完成tableSelect组件

This commit is contained in:
猿小天
2023-03-04 01:22:21 +08:00
parent e3218c724f
commit 639914b1ae
4 changed files with 35 additions and 29 deletions

View File

@@ -64,6 +64,8 @@ class CustomPagination(PageNumberPagination):
page =int(self.get_page_number(self.request, paginator)) or 1 page =int(self.get_page_number(self.request, paginator)) or 1
total=self.page.paginator.count if self.page else 0 total=self.page.paginator.count if self.page else 0
limit= int(self.get_page_size(self.request)) or 10 limit= int(self.get_page_size(self.request)) or 10
is_next= self.page.has_next()
is_previous= self.page.has_previous()
data=data data=data
if not data: if not data:
@@ -77,5 +79,7 @@ class CustomPagination(PageNumberPagination):
('page', page), ('page', page),
('limit', limit), ('limit', limit),
('total',total), ('total',total),
('is_next',is_next),
('is_previous', is_previous),
('data', data) ('data', data)
])) ]))

View File

@@ -1,5 +1,4 @@
<template> <template>
<div>{{props.modelValue}}</div>
<el-select popper-class="popperClass" class="tableSelector" :multiple="props.tableConfig.isMultiple" <el-select popper-class="popperClass" class="tableSelector" :multiple="props.tableConfig.isMultiple"
@remove-tag="removeTag" v-model="data" placeholder="请选择" @visible-change="visibleChange"> @remove-tag="removeTag" v-model="data" placeholder="请选择" @visible-change="visibleChange">
<template #empty> <template #empty>
@@ -26,7 +25,7 @@
<el-table-column v-if="props.tableConfig.isMultiple" fixed type="selection" width="55"/> <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="item.prop" :label="item.label" :width="item.width" <el-table-column :prop="item.prop" :label="item.label" :width="item.width"
v-for="(item,index) in props.tableConfig.columns"/> v-for="(item,index) in props.tableConfig.columns" :key="index"/>
</el-table> </el-table>
<el-pagination style="margin-top: 10px" background <el-pagination style="margin-top: 10px" background
v-model:current-page="pageConfig.page" v-model:current-page="pageConfig.page"
@@ -43,19 +42,20 @@
<script setup lang="ts"> <script setup lang="ts">
import {defineProps, onMounted, reactive, ref, toRaw, watch} from 'vue' import {defineProps, onMounted, reactive, ref, toRaw, watch} from 'vue'
import {dict} from '@fast-crud/fast-crud' import {dict} from '@fast-crud/fast-crud'
import XEUtils from "xe-utils"; import XEUtils from 'xe-utils'
import qs from 'qs'
const props = defineProps({ const props = defineProps({
modelValue: {}, modelValue: {},
tableConfig: { tableConfig: {
url: null, url: null,
label: null, //显示值 label: null, //显示值
value: null, //数据值 value: null, //数据值
isTree:false, isTree: false,
data: [],//默认数据 data: [],//默认数据
isMultiple: false, //是否多选 isMultiple: false, //是否多选
columns: [], //每一项对应的列表项 columns: [], //每一项对应的列表项
} },
displayLabel: {}
} as any) } as any)
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
// tableRef // tableRef
@@ -67,6 +67,7 @@ const multipleSelection = ref()
watch(multipleSelection, // 监听multipleSelection的变化 watch(multipleSelection, // 监听multipleSelection的变化
(value) => { (value) => {
const {tableConfig} = props const {tableConfig} = props
//是否多选
if (!tableConfig.isMultiple) { if (!tableConfig.isMultiple) {
data.value = value ? value[tableConfig.label] : null data.value = value ? value[tableConfig.label] : null
} else { } else {
@@ -80,7 +81,6 @@ watch(multipleSelection, // 监听multipleSelection的变化
) )
// 搜索值 // 搜索值
const search = ref(undefined) const search = ref(undefined)
//表格数据 //表格数据
@@ -127,18 +127,17 @@ const getDict = async () => {
} }
const dicts = dict({url: url, params: params}) const dicts = dict({url: url, params: params})
await dicts.reloadDict() await dicts.reloadDict()
const dictData = dicts.data const dictData: any = dicts.data
const {data, page, limit, total} = dictData const {data, page, limit, total} = dictData
pageConfig.page = page pageConfig.page = page
pageConfig.limit = limit pageConfig.limit = limit
pageConfig.total = total pageConfig.total = total
if (props.tableConfig.data === undefined || props.tableConfig.data.length === 0) { if (props.tableConfig.data === undefined || props.tableConfig.data.length === 0) {
if(props.tableConfig.isTree){ if (props.tableConfig.isTree) {
tableData.value = XEUtils.toArrayTree(data,{parentKey: 'parent', key: 'id', children: 'children'}) tableData.value = XEUtils.toArrayTree(data, {parentKey: 'parent', key: 'id', children: 'children'})
}else{ } else {
tableData.value = data tableData.value = data
} }
} else { } else {
tableData.value = props.tableConfig.data tableData.value = props.tableConfig.data
} }
@@ -163,21 +162,16 @@ const handlePageChange = (page: any) => {
getDict() getDict()
} }
const getDictByValue = async ()=>{ // 监听displayLabel的变化更新数据
const url = props.tableConfig.url watch(() => {
const dicts = dict({url: url, params: {}}) return props.displayLabel
await dicts.reloadDict() }, (value) => {
const dictData = dicts.data const {tableConfig} = props
console.log(dictData) const result = value ? value.map((item: any) => {
return dictData return item[tableConfig.label]
} }) : null
data.value = result
// 监听modelValue的变化更新数据 }, {immediate: true})
watch(()=>{
return props.modelValue
},(value)=>{
},{immediate: true})
</script> </script>

View File

@@ -39,10 +39,9 @@ export const DictionaryStore = defineStore('Dictionary', {
}).then((ret: { data: [] }) => { }).then((ret: { data: [] }) => {
// 转换数据格式并保存到pinia // 转换数据格式并保存到pinia
let dataList = ret.data; let dataList = ret.data;
dataList.forEach((item: any) => { dataList.forEach((item: any) => {
let childrens = item.children; let childrens = item.children;
console.log(item); // console.log(item);
this.data[item.value] = childrens; this.data[item.value] = childrens;
}); });
}); });

View File

@@ -109,6 +109,12 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
component: { component: {
name: shallowRef(tableSelector), name: shallowRef(tableSelector),
vModel: "modelValue", vModel: "modelValue",
displayLabel:compute(({row}) => {
if(row){
return row.user_info;
}
return null
}),
tableConfig: { tableConfig: {
url: '/api/system/user/', url: '/api/system/user/',
label: 'name', label: 'name',
@@ -195,6 +201,9 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
component: { component: {
name: shallowRef(tableSelector), name: shallowRef(tableSelector),
vModel: "modelValue", vModel: "modelValue",
displayLabel:compute(({ form }) => {
return form.target_dept_name;
}),
tableConfig: { tableConfig: {
url: '/api/system/dept/all_dept/', url: '/api/system/dept/all_dept/',
label: 'name', label: 'name',