chenfang
7 months ago
26 changed files with 1433 additions and 595 deletions
@ -1,3 +1,3 @@ |
|||||
import SearchTable from './src/SearchTable.vue' |
import SearchTable from './src/SearchTable.vue' |
||||
|
|
||||
export { SearchTable } |
export { SearchTable} |
||||
|
|||||
@ -0,0 +1,3 @@ |
|||||
|
import SearchTable from './src/SearchTableV2.vue' |
||||
|
|
||||
|
export { SearchTable } |
||||
@ -0,0 +1,187 @@ |
|||||
|
<template> |
||||
|
<Dialog :title="dialogTitle" v-model="searchDialogVisible" :width="'80%'"> |
||||
|
<!-- 搜索工作栏 --> |
||||
|
<!-- <Search :schema="searchSchema" @search="setSearchParamsRef" @reset="setSearchParamsRef" /> --> |
||||
|
|
||||
|
<!-- 列表头部 --> |
||||
|
<TableHead |
||||
|
:HeadButttondata="HeadButttondata" |
||||
|
:routeName="routeName" |
||||
|
@searchFormClick="searchFormClick" |
||||
|
:allSchemas="allSchemasRef" |
||||
|
/> |
||||
|
<ContentWrap> |
||||
|
<Table |
||||
|
ref="searchTableRef" |
||||
|
:columns="tableColumns" |
||||
|
:data="tableObjectRef.tableList" |
||||
|
:loading="tableObjectRef.loading" |
||||
|
:pagination="{ |
||||
|
total: tableObjectRef.total |
||||
|
}" |
||||
|
v-model:pageSize="tableObjectRef.pageSize" |
||||
|
v-model:currentPage="tableObjectRef.currentPage" |
||||
|
v-model:sort="tableObjectRef.sort" |
||||
|
:selection="true" |
||||
|
:reserveSelection="true" |
||||
|
row-key="id" |
||||
|
/> |
||||
|
</ContentWrap> |
||||
|
<template #footer> |
||||
|
<div class="flex items-center"> |
||||
|
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> |
||||
|
<el-button @click="searchDialogVisible = false">取 消</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import * as defaultButtons from '@/utils/disposition/defaultButtons' |
||||
|
|
||||
|
// const { t } = useI18n() // 国际化 |
||||
|
const message = useMessage() // 消息弹窗 |
||||
|
|
||||
|
const route = useRoute() // 路由信息 |
||||
|
const routeName = ref() |
||||
|
routeName.value = route.name |
||||
|
|
||||
|
const searchDialogVisible = ref(false) // 弹窗的是否展示 |
||||
|
const dialogTitle = ref('') // 弹窗的标题 |
||||
|
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 |
||||
|
|
||||
|
// 列表头部按钮 |
||||
|
const HeadButttondata = [ |
||||
|
defaultButtons.defaultFilterBtn(null), // 筛选 |
||||
|
] |
||||
|
|
||||
|
/** 打开弹窗 */ |
||||
|
const getListRef = ref() |
||||
|
const setSearchParamsRef = ref() |
||||
|
const tableObjectRef = ref() |
||||
|
const getPage:any = ref() |
||||
|
const searchSchema = ref() |
||||
|
const tableColumns = ref() |
||||
|
const formFieldRef = ref() |
||||
|
const searchFieldRef = ref() |
||||
|
const typeRef = ref() |
||||
|
const rowRef = ref() |
||||
|
const allSchemasRef = ref() |
||||
|
const multipleBol = ref(false) |
||||
|
const searchConditionRef = ref() |
||||
|
|
||||
|
const openData = (titleName: any, tableObject:any ,allSchemas: any,multiple: any) => { |
||||
|
dialogTitle.value = titleName |
||||
|
tableObjectRef.value = tableObject |
||||
|
searchDialogVisible.value = true |
||||
|
multipleBol.value = multiple |
||||
|
allSchemasRef.value = allSchemas |
||||
|
searchSchema.value = allSchemas.searchSchema |
||||
|
tableColumns.value = allSchemas.tableColumns |
||||
|
} |
||||
|
const open = (titleName: any, allSchemas: any,getApiPage: any, formField: any, searchField: any,multiple: any, type: any, row: any, searchCondition:any , isCountRequestRe:any ) => { |
||||
|
searchDialogVisible.value = true |
||||
|
formFieldRef.value = formField |
||||
|
searchFieldRef.value = searchField |
||||
|
allSchemasRef.value = allSchemas |
||||
|
searchSchema.value = allSchemas.searchSchema |
||||
|
tableColumns.value = allSchemas.tableColumns.filter(item => (item.field !== 'action')) |
||||
|
getPage.value = getApiPage |
||||
|
typeRef.value = type |
||||
|
rowRef.value = row |
||||
|
multipleBol.value = multiple |
||||
|
// dialogTitle.value = t('action.' + type) |
||||
|
dialogTitle.value = titleName |
||||
|
const {tableObject, tableMethods } = useTable({ |
||||
|
getListApi: getPage.value // 分页接口 |
||||
|
}) |
||||
|
tableObjectRef.value = tableObject |
||||
|
searchConditionRef.value = searchCondition |
||||
|
if (searchCondition) tableObjectRef.value.params = searchCondition; |
||||
|
|
||||
|
// 获得表格的各种操作 |
||||
|
const { getList } = tableMethods |
||||
|
// setSearchParamsRef.value = setSearchParams |
||||
|
setSearchParamsRef.value = tableObject.params |
||||
|
getListRef.value = getList |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
// 筛选提交 |
||||
|
const searchFormClick = (searchData) => { |
||||
|
console.log(99, rowRef.value) |
||||
|
console.log(100, searchData) |
||||
|
console.log(101, searchConditionRef.value) |
||||
|
// 20240104 修改 判断 当前弹窗 是否有条件 如果有条件 需拼接到 筛选中 searchData.filters |
||||
|
// 20240321 修改 判断 searchData 是否有条件 如果有 拼接 |
||||
|
if (searchData.filters) { |
||||
|
if (searchConditionRef.value.filters) { |
||||
|
Object.keys(searchConditionRef.value.filters).forEach(key => { |
||||
|
searchData.filters.push(searchConditionRef.value.filters[key]) |
||||
|
}); |
||||
|
} else { |
||||
|
Object.keys(searchConditionRef.value).forEach(key => { |
||||
|
searchData.filters.push({ |
||||
|
action: "==", |
||||
|
column: key, |
||||
|
value: searchConditionRef.value[key] |
||||
|
}) |
||||
|
}); |
||||
|
} |
||||
|
} else { |
||||
|
if (searchConditionRef.value.filters) { |
||||
|
searchData.filters = searchConditionRef.value.filters |
||||
|
} else { |
||||
|
Object.keys(searchConditionRef.value).forEach(key => { |
||||
|
searchData.filters = [{ |
||||
|
action: "==", |
||||
|
column: key, |
||||
|
value: searchConditionRef.value[key] |
||||
|
}] |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
tableObjectRef.value.params = { |
||||
|
isSearch: true, |
||||
|
filters: searchData.filters |
||||
|
} |
||||
|
getListRef.value() // 刷新当前列表 |
||||
|
} |
||||
|
|
||||
|
defineExpose({ open,openData }) // 提供 open 方法，用于打开弹窗 |
||||
|
|
||||
|
// Table 组件 ref |
||||
|
const searchTableRef = ref() |
||||
|
|
||||
|
/** 提交表单 */ |
||||
|
const emit = defineEmits(['searchTableSuccess']) // 定义 searchTableSuccess 事件，用于操作成功后的回调 |
||||
|
const submitForm = async () => { |
||||
|
// 提交请求 |
||||
|
formLoading.value = true |
||||
|
const selections = searchTableRef.value.selections |
||||
|
// 如果不是多选的 |
||||
|
if(!multipleBol.value){ |
||||
|
if(selections.length > 1 || selections.length == 0) { |
||||
|
message.warning('请选择一条数据！') |
||||
|
formLoading.value = false |
||||
|
return |
||||
|
} |
||||
|
// 多选 |
||||
|
}else{ |
||||
|
if(selections.length == 0) { |
||||
|
message.warning('至少选择一条数据！') |
||||
|
formLoading.value = false |
||||
|
return |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
try { |
||||
|
searchDialogVisible.value = false |
||||
|
// 发送操作成功的事件 |
||||
|
emit('searchTableSuccess', formFieldRef.value, searchFieldRef.value, selections, typeRef.value, rowRef.value) |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
</style> |
||||
Loading…
Reference in new issue