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-17 00:51:54 +08:00
parent 4d832b5e68
commit e34445d655
3 changed files with 145 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
web/src/components/tableSelector/index.vue Normal file
View File

@@ -0,0 +1,117 @@
<template>
<el-select popper-class="popperClass" class="tableSelector" :multiple="props.tableConfig.isMultiple" @remove-tag="removeTag" v-model="data" placeholder="Select">
<template #empty>
<div class="option">
<el-input style="margin-bottom: 10px" v-model="search">
<template #append>
搜索
</template>
</el-input>
<el-table
:data="props.tableConfig.data"
size="mini"
border
style="width: 400px"
max-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>
<el-pagination style="margin-top: 10px" background layout="prev, pager, next" :total="1000"/>
</div>
</template>
</el-select>
</template>
<script setup lang="ts">
import {defineProps, onMounted, ref, watch} from 'vue'
const props = defineProps({
modelValue: {},
label: null,
value:null,
tableConfig: {
data: [],//默认数据
isMultiple: false, //是否多选
}
} 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
data.value = result
}
}, // 当multipleSelection值触发后，同步修改data.value的值
{immediate: true} // 立即触发一次，给data赋值初始值
)
const removeTag = (val:any,aa:any)=>{
console.log(val,aa)
}
/**
* 表格多选
* @param val:Array
*/
const handleSelectionChange = (val:any) => {
multipleSelection.value = val
const {value} = props
const result = val.map((item:any)=>{
return item[value]
})
emit('update:modelValue', result)
}
/**
* 表格单选
* @param val:Object
*/
const handleCurrentChange = (val:any) => {
multipleSelection.value = val
const {value} = props
emit('update:modelValue', val[value])
}
</script>
<style scoped>
.option {
height: auto;
line-height: 1;
padding: 5px;
background-color: #fff;
}
</style>
<style lang="scss">
.popperClass {
height: 320px;
}
.el-select-dropdown__wrap {
max-height: 310px !important;
}
.tableSelector{
.el-icon,.el-tag__close{
display: none;
}
}
</style>

11
web/src/views/system/messageCenter/api.ts
View File

@@ -17,11 +17,12 @@ export function GetObj(id: InfoReq) {
}
export function AddObj(obj: AddReq) {
return request({
url: apiPrefix,
method: 'post',
data: obj,
});
console.log(20,obj)
// return request({
// url: apiPrefix,
// method: 'post',
// data: obj,
// });
}
export function UpdateObj(obj: EditReq) {

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

@@ -2,7 +2,8 @@ import * as api from "./api";
import {dict, compute, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions,} from "@fast-crud/fast-crud";
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;
}
@@ -30,22 +31,7 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
delRequest
},
columns: {
_index: {
title: '序号',
form: {show: false},
column: {
//type: 'index',
align: 'center',
width: '70px',
columnSetDisabled: true, //禁止在列设置中选择
formatter: (context) => {
//计算序号,你可以自定义计算规则，此处为翻页累加
let index = context.index ?? 1;
let pagination = crudExpose.crudBinding.value.pagination;
return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
},
},
},
id: {
title: 'id',
form: {
@@ -117,7 +103,6 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
disabled: true
},
width: 130,
type: 'table-selector',
disabled: true,
dict: dict({
cache: false,
@@ -126,6 +111,24 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
label: 'name', // 数据字典中label字段的属性名
}),
form: {
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',
},]
}
},
show:compute(({ form })=>{
return form.target_type === 0
}),
@@ -232,7 +235,7 @@ export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpos
config: {},
uploader: {
type: "form",
buildUrl(res) {
buildUrl(res:any) {
return res.url;
}
}