5 changed files with 315 additions and 81 deletions
@ -0,0 +1,3 @@ |
|||||
|
import SearchTableCount from './src/SearchTableCount.vue' |
||||
|
|
||||
|
export { SearchTableCount } |
||||
@ -0,0 +1,222 @@ |
|||||
|
<template> |
||||
|
<Dialog :title="dialogTitle" v-model="searchDialogVisible" :width="'80%'"> |
||||
|
<ContentWrap> |
||||
|
<el-radio-group v-model="radioListType"> |
||||
|
<el-radio :label="item.label" v-for="(item, index) in radioListRef" :key="index">{{ |
||||
|
item.title |
||||
|
}}</el-radio> |
||||
|
</el-radio-group> |
||||
|
</ContentWrap> |
||||
|
<!-- 搜索工作栏 --> |
||||
|
<!-- <Search :schema="searchSchema" @search="setSearchParamsRef" @reset="setSearchParamsRef" /> --> |
||||
|
<el-form |
||||
|
ref="formRef" |
||||
|
:model="ruleForm" |
||||
|
:rules="rules" |
||||
|
label-width="120px" |
||||
|
class="demo-ruleForm" |
||||
|
status-icon |
||||
|
v-if="radioListRef.length == 2 && radioListType == 1" |
||||
|
> |
||||
|
<el-form-item label="数量" prop="count"> |
||||
|
<el-input v-model.number="ruleForm.count" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<!-- 列表头部 --> |
||||
|
<div |
||||
|
v-if=" |
||||
|
(radioListRef.length == 3 && radioListType == 3) || |
||||
|
(radioListRef.length == 2 && radioListType == 2) |
||||
|
" |
||||
|
> |
||||
|
<TableHead |
||||
|
:HeadButttondata="HeadButttondata" |
||||
|
:routeName="routeName" |
||||
|
@searchFormClick="searchFormClick" |
||||
|
:allSchemas="allSchemasRef" |
||||
|
/> |
||||
|
</div> |
||||
|
<ContentWrap |
||||
|
v-if=" |
||||
|
(radioListRef.length == 3 && radioListType == 3) || |
||||
|
(radioListRef.length == 2 && radioListType == 2) |
||||
|
" |
||||
|
> |
||||
|
<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 radioListType = ref(1) |
||||
|
|
||||
|
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 formRef = ref() |
||||
|
const ruleForm = ref({ |
||||
|
count: '' |
||||
|
}) |
||||
|
const rules = ref({ |
||||
|
count: [ |
||||
|
{required: true, message: '请输入数量' , trigger: 'blur' }, |
||||
|
{ type: 'number', message: '必须是数字', trigger: 'blur' }, |
||||
|
] |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
/** 打开弹窗 */ |
||||
|
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 radioListRef = ref() //盘点申请的时候所需的单选数据 |
||||
|
const open = ( |
||||
|
titleName: any, |
||||
|
allSchemas: any, |
||||
|
getApiPage: any, |
||||
|
formField: any, |
||||
|
searchField: any, |
||||
|
multiple: any, |
||||
|
type: any, |
||||
|
row: any, |
||||
|
searchCondition: any, |
||||
|
isCountRequestRe: any, |
||||
|
radioList: 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 |
||||
|
radioListRef.value = radioList |
||||
|
radioListType.value = 1 |
||||
|
ruleForm.value.count = '' |
||||
|
// dialogTitle.value = t('action.' + type) |
||||
|
dialogTitle.value = titleName |
||||
|
const { tableObject, tableMethods } = useTable({ |
||||
|
getListApi: getPage.value // 分页接口 |
||||
|
}) |
||||
|
tableObjectRef.value = tableObject |
||||
|
if (searchCondition) tableObjectRef.value.params = searchCondition |
||||
|
|
||||
|
// 获得表格的各种操作 |
||||
|
const { getList, setSearchParams } = tableMethods |
||||
|
setSearchParamsRef.value = setSearchParams |
||||
|
getListRef.value = getList |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
// 筛选提交 |
||||
|
const searchFormClick = (searchData) => { |
||||
|
tableObjectRef.value.params = { |
||||
|
isSearch: true, |
||||
|
filters: searchData.filters |
||||
|
} |
||||
|
getListRef.value() // 刷新当前列表 |
||||
|
} |
||||
|
|
||||
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||
|
|
||||
|
// Table 组件 ref |
||||
|
const searchTableRef = ref() |
||||
|
|
||||
|
/** 提交表单 */ |
||||
|
const emit = defineEmits(['searchTableSuccess']) // 定义 searchTableSuccess 事件，用于操作成功后的回调 |
||||
|
const submitForm = async () => { |
||||
|
// 提交请求 |
||||
|
let selections = '' |
||||
|
if(radioListRef.value.length == 2 && radioListType.value == 1){ |
||||
|
// 校验表单 |
||||
|
if (!formRef) return |
||||
|
const valid = await formRef.value.validate() |
||||
|
if (!valid) return |
||||
|
} |
||||
|
if ( |
||||
|
(radioListRef.value.length == 3 && radioListType.value == 3) || |
||||
|
(radioListRef.value.length == 2 && radioListType.value == 2) |
||||
|
) { |
||||
|
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 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
formLoading.value = true |
||||
|
try { |
||||
|
searchDialogVisible.value = false |
||||
|
// 发送操作成功的事件 |
||||
|
emit( |
||||
|
'searchTableSuccess', |
||||
|
formFieldRef.value, |
||||
|
searchFieldRef.value, |
||||
|
selections, |
||||
|
radioListType.value, |
||||
|
rowRef.value, |
||||
|
ruleForm.value.count, |
||||
|
) |
||||
|
} finally { |
||||
|
formLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
</style> |
||||
Loading…
Reference in new issue