添加动态数据下拉框,可以通过下拉框筛选获取后台数据;

未实现滚动分页;
This commit is contained in:
JiangCYkk
2025-03-28 16:33:42 +08:00
parent 3d704220f3
commit c5d636d697
3 changed files with 114 additions and 12 deletions

View File

@@ -180,6 +180,22 @@ namespace Yi.Framework.Ddd.Application
return new PagedResultDto<TGetListOutputDto>(totalCount, dtos);
}
/// <summary>
/// 获取实体动态下拉框列表,子类重写该方法,通过 keywords 进行筛选
/// </summary>
/// <param name="keywords">查询关键字</param>
/// <returns></returns>
public virtual async Task<PagedResultDto<TGetListOutputDto>> GetSelectDataListAsync(string? keywords = null)
{
List<TEntity> entities = await Repository.GetListAsync();
// 获取总数并映射结果
var totalCount = entities.Count;
var dtos = await MapToGetListOutputDtosAsync(entities);
return new PagedResultDto<TGetListOutputDto>(totalCount, dtos);
}
/// <summary>
/// 批量删除实体
/// </summary>

View File

@@ -0,0 +1,83 @@
<template>
<!-- 动态数据下拉选择框 -->
<el-select v-model="value" :value-key="servicekey" filterable remote clearable :placeholder="placeholder"
:loading="loading" :style="{ width: width + '%' }" :remote-method="remoteMethod" @change="handleChange"
@clear="handleClear">
<el-option v-for="item in options" :key="item[servicekey]" :label="item[servicelabel]" :value="item" />
</el-select>
</template>
<script setup name="SelectDataTag">
import { ref } from 'vue';
import request from '@/utils/request.js'
const props = defineProps({
placeholder: {
type: String,
default: '请输入关键字',
},
width: {
type: [String, Number],
default: 100,
},
/** 动态服务名称 */
servicename: {
type: String,
required: true,
},
/** 指定响应数据的key */
servicekey: {
type: String,
required: true,
},
/** 指定响应数据的label */
servicelabel: {
type: String,
required: true,
},
/** 记录表格渲染行索引 */
index: {
type: [String, Number],
default: 0,
}
});
const emits = defineEmits(["change", "clear"]);
const list = ref([]);
const options = ref([]);
const value = ref([]);
const loading = ref(false);
function getSelectDataList(query) {
return request({
url: '/' + props.servicename + '/select-data-list?keywords=' + query,
method: 'get',
});
}
function remoteMethod(query) {
options.value = [];
if (query) {
loading.value = true;
getSelectDataList(query).then(
(response) => {
list.value = response.data.items;
options.value = list.value;
loading.value = false;
}
);
}
}
function handleChange(data) {
emits("change", data || [], props.index);
}
function handleClear() {
emits("clear");
}
</script>

View File

@@ -43,6 +43,8 @@ import ImagePreview from "@/components/ImagePreview"
import TreeSelect from '@/components/TreeSelect'
// 字典标签组件
import DictTag from '@/components/DictTag'
// 动态数据下拉选择框组件
import SelectDataTag from '@/components/SelectDataTag'
const app = createApp(App)
@@ -57,6 +59,7 @@ app.config.globalProperties.selectDictLabel = selectDictLabel
app.config.globalProperties.selectDictLabels = selectDictLabels
// 全局组件挂载
app.component('SelectDataTag', SelectDataTag)
app.component('DictTag', DictTag)
app.component('Pagination', Pagination)
app.component('TreeSelect', TreeSelect)