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