功能变化: 完成tableSelect组件
This commit is contained in:
@@ -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)
|
||||||
]))
|
]))
|
||||||
|
|||||||
@@ -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,8 +42,8 @@
|
|||||||
<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: {
|
||||||
@@ -55,7 +54,8 @@ const props = defineProps({
|
|||||||
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,7 +127,7 @@ 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
|
||||||
@@ -138,7 +138,6 @@ const getDict = async () => {
|
|||||||
} else {
|
} else {
|
||||||
tableData.value = data
|
tableData.value = data
|
||||||
}
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
tableData.value = props.tableConfig.data
|
tableData.value = props.tableConfig.data
|
||||||
}
|
}
|
||||||
@@ -163,20 +162,15 @@ const handlePageChange = (page: any) => {
|
|||||||
getDict()
|
getDict()
|
||||||
}
|
}
|
||||||
|
|
||||||
const getDictByValue = async ()=>{
|
// 监听displayLabel的变化,更新数据
|
||||||
const url = props.tableConfig.url
|
|
||||||
const dicts = dict({url: url, params: {}})
|
|
||||||
await dicts.reloadDict()
|
|
||||||
const dictData = dicts.data
|
|
||||||
console.log(dictData)
|
|
||||||
return dictData
|
|
||||||
}
|
|
||||||
|
|
||||||
// 监听modelValue的变化,更新数据
|
|
||||||
watch(() => {
|
watch(() => {
|
||||||
return props.modelValue
|
return props.displayLabel
|
||||||
}, (value) => {
|
}, (value) => {
|
||||||
|
const {tableConfig} = props
|
||||||
|
const result = value ? value.map((item: any) => {
|
||||||
|
return item[tableConfig.label]
|
||||||
|
}) : null
|
||||||
|
data.value = result
|
||||||
}, {immediate: true})
|
}, {immediate: true})
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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',
|
||||||
|
|||||||
Reference in New Issue
Block a user