2025-06-10 11:38
还有一个问题，主表的批量更新完成后，我是这样刷新列表的
useFun.refreshChange() // 刷新当前页表格数据
tableSelect.value = [] // 重置勾选
initSelectChange()
附表是更新完是
useFun.refreshChange() // 刷新当前页表格数据
subTableRef.value[FORM_ITEM_KEY].crudRef.refreshTable()
这样写有没有问题，现在发现附表这样写，更新完后【批量签收】按钮也不会置灰
2025-06-09 14:45
你好，我在附表顶部加了一个保存草稿，如何在调用完接口后，关闭表单弹框
// 附表 自定义按钮 保存草稿
saveDraft(){
useFun.requestApi('post', FORM_SAVE_URL, {
data: {
...tableForm.value,
status: 0,
form_type: FORM_KEY
}
}).then(res => {
// 这里如何关闭弹框
message.success('保存草稿成功')
useFun.refreshChange() // 刷新当前页表格数据
})
},
2025-06-04 16:46
你好，我写了一个自定义组件SelectSpu， 我想确认一下，1）取消和确认按钮是不是直接写在我的组件里呢，而不用写在footerBtn中？ 2） 如果是写在我的组件里， 组件暴露了一个confirmSelect方法，在 JS增强中如何调用呢？ 3）点击取消按钮，如何关闭弹框呢 4） 子组件如何获取/修改 附表form_in_item的值 5）是不是每一个业务单据都要写弹框初始化?
form_in 打开弹框代码如下
// 选择产品公共弹框 自定义控件初始化
useFun.controlInit('ControlView', 'controlView_37773', {
controlName: 'SelectSku', //控件名称（全局注册的控件使用，例：el-transfer ）
controlPath: 'components/Select/SelectSku.vue', //控件相对路径（未全局注册的控件使用，例：components/IFrame/src/IFrame.vue）
controlParams: {}, //控件配置
showType: 'dialog', //弹窗类型 dialog | drawer
popOption: { //弹窗配置
title: '选择产品', //标题
width: '', //弹窗宽度
fullscreen: false, //是否全屏
footerBtn: [ //底部按钮配置
{
params: {}, //el-button 其他参数
name: '弹框的确认选择', //按钮名称
display: true, //是否显示
loading: true, //点击时是否有loading
icon: '', //图标
clickFun: (loading) => {
// ？？这里有个疑问 我是在这里对选中的数据处理吗？这样好像又回到了之前的问题，代码重复在这里了
// ？？我的理解是这里的 footerBtn 直接为 [], 在自定义组件中加取消和确认两个按钮，
//点击事件
if (loading) loading() //关闭loading
}
}
],
headerBtn: [], //顶部按钮配置（配置同上）
dialogParams: {}, //弹窗其他配置
handleClose: (done) => { //关闭弹窗前的回调
done()
}
}
})
return{
// 自定义按钮 选择产品
selectAssetsBtn() {
// 自定义控件调用
const { controlView_37773 } = Vue.toRefs(rendControlData.value)
controlView_37773.value.show = true //显示ControlView
},
}
自定义组件代码
<template> <ContentWrap> <avue-crud ref="crudRef" v-model="tableForm" v-model:page="tablePage" v-model:search="tableSearch" :table-loading="loading" :data="tableData" :option="tableOption" :before-open="beforeOpen" :permission="permission" @search-change="searchChange" @search-reset="resetChange" @refresh-change="getTableData" @size-change="sizeChange" @current-change="currentChange" @selection-change="selectionChange" > <template #status="scope"> <dict-tag v-if="scope.row.status !== undefined" :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" /> </template> </avue-crud> </ContentWrap> <div class="footer-btns"> <el-button @click="cancel" :loading="exportLoading" >取 消</el-button > <el-button type="primary" @click="confirmSelect" :loading="exportLoading" >确认选择</el-button > </div></template><script lang="ts" setup>import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'import { dateFormatter } from '@/utils/formatTime'import download from '@/utils/download'import * as PostApi from '@/api/system/post'import { CommonStatusEnum } from '@/utils/constants'
defineProps({ // isModal: { // type: Boolean, // default: true // }})
defineOptions({ name: 'SystemPost' })
const message = useMessage() // 消息弹窗const { t } = useI18n() // 国际化const { getCurrPermi } = useCrudPermi()
const loading = ref(true) // 列表的加载中const tableOption = reactive({ align: 'center', headerAlign: 'center', searchMenuSpan: 6, searchMenuPosition: 'left', labelSuffix: ' ', span: 12, dialogWidth: '50%', height:'50vh', column: { id: { label: '商品编号', display: false, width: 90 }, name: { label: '商品名称', search: true, minWidth: 90, rules: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }] }, sort: { label: '商品顺序', width: 90, rules: [{ required: true, message: '商品顺序不能为空', trigger: 'blur' }] }, status: { label: '状态', search: true, type: 'select', width: 90, dicData: getIntDictOptions(DICT_TYPE.COMMON_STATUS), rules: [{ required: true, message: '状态不能为空', trigger: 'blur' }], value: CommonStatusEnum.ENABLE },
createTime: { label: '创建时间', searchRange: true, display: false, type: 'datetime', width: 180, startPlaceholder: '开始时间', endPlaceholder: '结束时间', formatter: (row, val, value, column) => { return dateFormatter(row, column, val) } }, remark: { label: '商品备注', type: 'textarea', minRows: 2, maxRows: 4, minWidth: 150, span: 24 } }, menu: false, // 隐藏列操作 header: false, // 隐藏表格头部操作 selection:true, // 开启选择 tip:false, // 隐藏已选择提示
}) //表格配置const tableForm = ref<{ id?: number }>({})const tableData = ref([])const tableSearch = ref({})const tablePage = ref({ currentPage: 1, pageSize: 10, total: 0})const exportLoading = ref(false) // 导出的加载中const permission = getCurrPermi(['system:post'])const crudRef = ref()const selectedData = ref([])
useCrudHeight(crudRef)
/** 查询列表 */const getTableData = async () => { loading.value = true let searchObj = { ...tableSearch.value, pageNo: tablePage.value.currentPage, pageSize: tablePage.value.pageSize } for (let key in searchObj) if (searchObj[key] === '') delete searchObj[key] try { const data = await PostApi.getPostPage(searchObj) tableData.value = data.list tablePage.value.total = data.total } finally { loading.value = false }}
/** 搜索按钮操作 */const searchChange = (params, done) => { tablePage.value.currentPage = 1 getTableData().finally(() => { done() })}
/** 清空按钮操作 */const resetChange = () => { searchChange({}, () => {})}
const sizeChange = (pageSize) => { tablePage.value.pageSize = pageSize resetChange()}
const currentChange = (currentPage) => { tablePage.value.currentPage = currentPage getTableData()}
/** 表单打开前 */const beforeOpen = async (done, type) => { console.log(11111111) if (['edit', 'view'].includes(type) && tableForm.value.id) { tableForm.value = await PostApi.getPost(tableForm.value.id) } done()}
// 勾选事件const selectionChange = (selection) => { console.error('selection',selection) selectedData.value = selection}
// 关闭弹框const cancel = () => { }
// 确认选择const confirmSelect = () => { console.log('确认', selectedData.value)}
defineExpose({ confirmSelect})
/** 初始化 **/onMounted(async () => { await getTableData()})</script><style lang="scss" scoped>.footer-btns{ display: flex; flex-direction: row; justify-content: flex-end;}</style>
2025-06-03 13:57
可以写个简单例子吗， 我有一个主附表。form_in， form_in_item, 想做一个商品入库流程
