vue页面上传文件与页面参数传递过程解析

上传文件的请求要带上用户在页面中的选择参数id。

一，表数据选择mainId

src\views\gj\project\GjProjectInfoList.vue文件

const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext

const mainId = computed(() => (unref(selectedRowKeys).length > 0 ? unref(selectedRowKeys)[0] : ''));//mainId是用户选择id

//下发 mainId,子组件接收

provide('mainId', mainId);

selectedRowKeys从tableContext中发出，经过mainId接收，通过provide('mainId', mainId);向各个子标签发送

子标签通过jnject()接收

如：src\views\gj\project\GjProjectConstructionbuilderList.vue

//主表格

<!--引用表格-->

<BasicTable @register="registerTable" :rowSelection="rowSelection" :searchInfo="searchInfo">

//绑定查询参数    :searchInfo="searchInfo"

//接收主表'mainId'

const mainId = inject('mainId') || '';

    //定义查询参数

const searchInfo = {};

//监视主表mainId

watch(mainId, () => {

         searchInfo['projectid'] = unref(mainId);//当mainId有变化，传入searchInfo['projectid']中

         reload();//重新查询

      }

    );

//在src\views\gj\project\GjProjectInfo.api.ts中进行查询

/**

 * 列表接口

 * @param params

 */

export const gjProjectConstructionbuilderList = (params) => {

  if(params['projectid']){  //在这里获取searchInfo['projectid']的参数

    return defHttp.get({url: Api.gjProjectConstructionbuilderList, params});//带上参数projectid

  }

  return Promise.resolve({});

}

二，上传控件

<j-upload-button type="primary" preIcon="ant-design:import-outlined"

          @click="onImportBillTable">导入工程量清单</j-upload-button>

点击事件处理器onImportBillTable()

function onImportBillTable(data: any) {  //data是j-upload-button的文件上传参数，包含上传文件值

  if (isEmpty(unref(mainId))) {        //监控主表选择

    $message.createMessage.warning('请选择一个主表信息');

    return;

  }

  let currentId = unref(mainId);       //获取主表选择id

  let others = { mainId: currentId };  //按照格式构造上传参数，传递主表id

  // let uploadparams = { file: data.file};

  let uploadparams = { file: data.file, data: others };//变量data.file中是上传文件

  handleImportXML(uploadparams, getImportUrl, handleSuccess || reload);

}

三，src\views\gj\ext\gjPageUtil.ts是上传工具文件

服务器端request.getParameter("mainId")取出数据。

四，修改复制文件：entity，数据库实体文件

主键生成改为如下：

type = IdType.INPUT

/**主键*/
@TableId(type = IdType.INPUT)

   @ApiModelProperty(value = "主键")
   private java.lang.String id;

4, 扩展的控制类org.jeecg.modules.gj.bid.billTable.controller. GjprojectbillinfoController

改为protected如下：

@Autowired
protected IGjprojectbillinfoService gjprojectbillinfoService;

@Autowired
protected IGjprojectbillprofileService gjprojectbillprofileService;

@Autowired
protected IGjprojectbillgroupService gjprojectbillgroupService;

@Autowired
protected IGjprojectbilltableService gjprojectbilltableService;