前端主附表回显问题

我有三张表  产品表sku,  主表(入库表)form_in, 附表(入库明细表)form_in_item 

需求, 添加入库单时, 点击选择产品按钮,弹出产品列表,勾选,点击确认,把选中的产品带回到入库单明细中

碰到的问题

1)选择产品页,如何屏蔽掉新增导入导出、以及表格操作栏的按钮

2)选择产品页,点击确定时,把数据带回到入库单明细中,如果多次勾选相同数据,在哪里可以拿到入库单明细数据,然后去重?

3)选择产品页,选择1条产品确认后,再次选择产品,需要在产品选择页,回显之前勾选的那条,即怎么设置表格回显勾选

谢谢!

image.png

image.png

image.png

//  form_in 表中的js增强代码
// 初始化控件
useFun.controlInit('TableView', 'tableView_32983', {
  tableId: '1925362580893753345', //表单开发id
  fixedSearch: {}, //固定表格搜索值(不会被覆盖)
  enhanceData: {}, //传递给表格js增强内部调用配置
  showType: 'dialog', //弹窗类型 dialog | drawer
  popOption: { //弹窗配置
    title: '选择商品', //标题
    width: '90%', //弹窗宽度
    fullscreen: false, //是否全屏
    footerBtn: [ //底部按钮配置
      {
        params: {
          type: 'primary'
        }, //el-button 其他参数
        name: '确认选择', //按钮名称
        display: true, //是否显示
        loading: true, //点击时是否有loading
        icon: '', //图标
        clickFun: (loading) => {
          //点击事件
          console.log('点击确定', tableView_32983.value,)
          // 当前弹窗表格 
          const currTable = componentRef.value.tableView_32983.controlRef
          // 附表实例
          const subTable = subTableRef.value.form_in_item
          if (!currTable.tableSelect?.length) {
            message.info('请勾选数据!')
            if (loading) loading() //关闭loading
            return;
          }
          console.error(currTable, subTable, currTable.tableSelect)
          // 把勾选的数据赋值到附表
          currTable.tableSelect.map(item => {
            subTable.rowAdd({
              sku_id: item.id,
              epc: item.epc,
              name: item.name,
              num: 0
            })
          })

          if (loading) loading() //关闭loading
          tableView_32983.value.show = false  // 关闭弹框
        }
      }
    ],
    headerBtn: [], //顶部按钮配置(配置同上)
    dialogParams: {}, //弹窗其他配置
    handleClose: (done) => { //关闭弹窗前的回调
      done()
    }
  }
})

//控件调用
const { tableView_32983 } = Vue.toRefs(rendControlData.value)

return {
  selectAssetsBtn() {
    const controlData = tableView_32983.value.params //TableView的配置
    tableView_32983.value.show = true //显示TableView
    // componentRef.value.tableView_32983 TableView的Ref控件引用

  }
}


评论区

dtbadmin 2025-05-26 14:38

非常感谢!,您给的例子非常详细,解决了我的问题,但是还有两处问题,问题1)在产品表中回显勾选时,我结合了您的两种方法,使得表格默认勾选了,并且禁用重复勾选,但是如果此时点击表格上的【清空】,则会把已勾选的清楚掉, 如果希望被禁用的不要被清除掉,应该如何设置呢image.pngimage.png

问题2:在不设置禁用的情况下,如果我第一次勾选 A,B两条数据,附表出现两条数据,没问题, 然后继续打开弹框,取消B,点击确定,回到附表页面时,这时候希望附表只保留 A, 即勾选的值整体替换掉附表,该如何实现

image.png

image.png

dtbadmin 2025-05-26 17:35

@超级管理员

请帮忙看看@超级管理员

超级管理员 2025-05-26 17:55

@dtbadmin

问题1:暂时没办法 avue那边的逻辑就是全部清空的,可以隐藏选择提示 tableOption.value.tip=false问题2:所有的数据都在tableForm.value里面可以打印看一下,在添加之前清空对应附表数据就可以了

tableForm.value.test_entrance_info = []

注:添加方法需要setTimeout延迟一下 不然会添加不上

setTimeout(() => {

            currSelectData.forEach(item => {

              subTable.rowAdd({

                product: item.product_name,

                product_id: item.id,

                num: '',

              })

            })

}, 10)


回复