chenfang
7 months ago
26 changed files with 1433 additions and 595 deletions
@ -1,3 +1,3 @@ |
|||
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