admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新功能: tableSelector组件

Browse Source
This commit is contained in:
猿小天
2023-02-18 19:25:15 +08:00
parent e34445d655
commit c633b580be
3 changed files with 175 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
web/src/components/tableSelector/index.vue
View File

@@ -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>

2
web/src/settings.ts
View File

@@ -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() {

111
web/src/views/system/messageCenter/crud.tsx
View File

@@ -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:{
show:false
column: {
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',
value:'date',
tableConfig:{
isMultiple:true,
data:[{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},]
tableConfig: {
url: '/api/system/user/',
label: 'name',
value: 'id',
isMultiple: true,
columns: [{
prop: 'name',
label: '用户名称',
width: 120
}, {
prop: 'phone',
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;
}
}