开发者社区> 问答> 正文

宜搭的自定义请求输出怎么将返回值作为子表单的输出

代码如下:

/**
* 尊敬的用户,你好:页面 JS 面板是高阶用法,一般不建议普通用户使用,如需使用,请确定你具备研发背景,能够自我排查问题。当然,你也可以咨询身边的技术顾问或者联系宜搭平台的技术支持获得服务(可能收费)。
* 我们可以用 JS 面板来开发一些定制度高功能,比如:调用阿里云接口用来做图像识别、上报用户使用数据(如加载完成打点)等等。
* 你可以点击面板上方的 「使用帮助」了解。
*/

// 当页面渲染完毕后马上调用下面的函数,这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
  console.log(`「页面 JS」:当前页面地址 ${location.href}`);
  // console.log(`「页面 JS」:当前页面 id 参数为 ${this.state.urlParams.id}`);
  // 更多 this 相关 API 请参考:https://aliwork.com/developer/API
  // document.title = window.loginUser.userName + ' | 宜搭';
  var arr = [];
  var datas = this.state.getCustomerData.data;
  console.log(11, datas);
  var customerInfo = {};
  for (var i in datas) {
    arr.push({ "text": datas[i].formData.textField_kp2485y3, "value": datas[i].formData.textField_kp2485y3 });
    customerInfo[datas[i].formData.textField_kp2485y3] = datas[i].formData;
  }
  this.$("selectField_lii832ow").set("dataSource", arr);
  this.state.customerInfo = customerInfo;
}

/**
* Image onClick
* @param e 点击事件对象
*/
export function onClick(e) {
  location = "dingtalk://dingtalkclient/action/jumprobot?dingtalkid=%24%3ALWCP_v1%3A%24YB8ibNFUCE8Akn3qu4MflhjjfqTq7K%2FV&content=%E4%BD%A0%E5%A5%BD";
}





/**
* selectField onChange
* @param value: {mixed} 选中的值
* @param actionType: {String} 触发的方式, 'itemClick', 'enter', 'change'
* @param item: {mixed} 选中的值的对象数据
*/
export function onChange({value, actionType, item}) {
  console.log('onChange', value);
}



/**
* selectField onSearch
* @param value: {String} 数据
*/
export function onSearchCustomerName(keyword) {
  console.log('onSearch', keyword);
  // 注:需开启“可搜索”
  // 如果 Select 需要调用远程接口搜索,请将下方的 selectOptions 改为实际的数据源名称
  var searchFieldJson = { "textField_kp2485y3": keyword };
  var pars = {
    "formUuid":"FORM-AC666081WM19R8QIFXE3M7K50MWB3M9J1KAFLF",
    "currentPage": 1,
    "pageSize": 20,
    "searchFieldJson": JSON.stringify(searchFieldJson),
  }
  this.dataSourceMap['getCustomerData'].load(pars).then((response) => {
    console.log(22,response);
    var tmp = [];
    var datas = response.data;
    var customerInfo = {};
    for(var i in datas){
      tmp.push({ "text": datas[i].formData.textField_kp2485y3, "value": datas[i].formData.textField_kp2485y3})
      customerInfo[datas[i].formData.textField_kp2485y3] = datas[i].formData;
    }
    this.$("selectField_lii832ow").set("dataSource", tmp);
    this.state.customerInfo = customerInfo;
  });
  // var tmp = { "text": "asdf", "value": "asdf" };
  // return tmp
}

/**
* button onClick
*/
export function onClickSearch(){
  var customerName = this.$('selectField_lii832ow').getValue();
  console.log(33, this.state.customerInfo[customerName]);
  var customerInfo = this.state.customerInfo[customerName];
  // 成交次数
  this.$('text_l58x78pf').set("content", customerInfo.numberField_l82tyryw_value ? customerInfo.numberField_l82tyryw_value : 0);
  //累计成交金额
  this.$('text_l58x78pj').set("content", customerInfo.numberField_l82tyryx_value ? customerInfo.numberField_l82tyryx_value : 0);
  // 客户全称
  this.$('textField_lhyfbgq8').setValue(customerInfo.textField_kp2485y3);
  // 客户全称
  this.$('textField_lhyfbgq8').setValue(customerInfo.textField_kp2485y3);
  // 销售经理
  this.$('textField_lhyfbgqb').setValue(customerInfo.employeeField_lfak4780[0]);
  // 联系人
  this.$('textField_lhyfbgqg').setValue(customerInfo.textField_kp2485y4);
  // 曾用名
  this.$('textField_lhyfbgqv').setValue(customerInfo.textField_lcu8xqpm);
  // 销售部门
  this.$('textField_lhyl57fr').setValue(customerInfo.departmentSelectField_lfak477z[0]);
  // 客户电话
  this.$('textField_lhyl57g6').setValue(customerInfo.textField_kp2485yj);
  // 统一社会信用代码:
  this.$('textField_lhyfbgr0').setValue(customerInfo.textField_ktiffzr6);
  // 所属公海:
  this.$('textField_lhyl57fw').setValue(customerInfo.selectField_kp2485yn);
  // 职位:
  this.$('textField_lhyl57gb').setValue(customerInfo.textField_l3sg99zp);
  // 客户共享(读):
  this.$('textField_lhyfbgra').setValue(customerInfo.employeeField_kp2485yb ? customerInfo.employeeField_kp2485yb.join(","):"");
  // 客户共享(写):
  this.$('textField_lhyl57g1').setValue(customerInfo.employeeField_kp2485yc ? customerInfo.employeeField_kp2485yc.join(","):"");
  // 联系地址:
  this.$('textField_lhyl57gg').setValue(customerInfo.textField_kp2485yk);

  // 请求 合同新增
  var searchFieldJson = { "textField_ktcnitbg": customerName };
  var pars1 = {
    "formUuid": "FORM-AKA66FB1J7W82H519PN1E6YE8GEE2Q5OE9CFLC",
    "searchFieldJson": JSON.stringify(searchFieldJson),
  }
  this.dataSourceMap['getHeTongXinZeng'].load(pars1).then((response) => {
    console.log(44, response);
    var heTongXinZeng = response.data.length==0 ? {} : response.data[0].formData;
    //已开票金额
    this.$('text_lhy98ihw').set("content", heTongXinZeng.numberField_ktv1bgcq_value ? heTongXinZeng.numberField_ktv1bgcq_value : 0);
    // 应收款金额
    this.$('text_lhy98ihy').set("content", heTongXinZeng.numberField_ktv1bgcp_value ? heTongXinZeng.numberField_ktv1bgcp_value : 0);

  })
  // 请求 工单新增
  var searchFieldJson = { "selectField_l14mkaal": customerName };
  var pars2 = {
    "formUuid": "FORM-Q4A664A1EQ99QJ4PFVI7050T66LM3BN7GVKFLH",
    "searchFieldJson": JSON.stringify(searchFieldJson),
  }
  this.dataSourceMap['getGongDanXinZeng'].load(pars2).then((response) => {
    console.log(55, response);
    var gongDanXinZeng = response.data.length == 0 ? 0 : response.data;
    // 工单数量
    this.$('text_lhy98ii1').set("content", gongDanXinZeng ? gongDanXinZeng.length : 0);

  })
  // 请求 产品 bug 数量
  var searchFieldJson = { "selectField_lh75i5pl": customerName };
  var pars2 = {
    "formUuid": "FORM-3C866TC1IG19NE8YBCMWF53GPTGH2QDB7KAFLK",
    "searchFieldJson": JSON.stringify(searchFieldJson),
  }
  this.dataSourceMap['getChanPinBug'].load(pars2).then((response) => {
    console.log(66, response);
    var chanPinBug = response.data.length == 0 ? 0 : response.data;
    // 工单数量
    this.$('text_lhy98ii3').set("content", chanPinBug ? chanPinBug.length : 0);
  })
  // 请求商机列表
  // 请求商机列表
  var searchFieldJson = { "textField_ks5oxr33": customerName };
  var pars = {
    "formUuid": "FORM-L8966281VD09ACQPA9OQ4CRLPC9K2HRF8MAFLJ",
    "searchFieldJson": JSON.stringify(searchFieldJson),
  }
  this.dataSourceMap['getShangJiLieBiao'].load(pars).then((response) => {
    console.log(77, response);
    // 商机信息表格

    var datas = response.data;

      const tableData = datas.map(item => {
        const children = item.formData.tableField_ktcnitc7.map((_item, index) => {
          return {
            xsztjh: _item.textField_lks625h7,
            productName: _item.textField_lbkho7b0,
            count: _item.numberField_lbkho7b1,
            isChildren: true,
            formInstId: `${item.formInstId}-${index}`,
          }
        });
        return {
          formInstId: item.formInstId,
          formUuid: item.formUuid,
          title: item.title,
          xsztjh: item.formData.textField_lks625h7,
          date: item.formData.dateField_lbkho7ay,
          children,
          isChildren: false
        }
      });
      // return {
      //   currentPage,
      //   totalCount,
      //   data: tableData
      // };

    //10086
    // var dataArr = [];
    // for (var i in datas) {
    //   var tmp = { "xsjhzt": datas[i].formData.textField_ks5oxr2y,
    //    "yqje": datas[i].formData.numberField_ks5oxr5x, 
    //    "xsjd": datas[i].formData.selectField_ks746bqj, 
    //    "ydgl": datas[i].formData.selectField_ks746bq7, 
    //    "sjzt": datas[i].formData.selectField_ks746bqf,
    //     "cjje": datas[i].formData.numberField_ks746bq5,
    //      "yqqdrq": datas[i].formData.dateField_ks5oxr5y, 
    //      "zhgjsj": datas[i].formData.dateField_ks746bqh,
    //       "xsjl": datas[i].formData.employeeField_lfbwdpsg[0],
    //        "xsbm": datas[i].formData.departmentSelectField_lfbwdpsh[0]     
    //        };
    //   dataArr.push(tmp);
    // }
    // var tableData = { "currentPage": 1, "totalCount": response.data.length }
    // tableData.data = dataArr;

  })




}

这个是官方给出的demo:

/**
* 尊敬的用户,你好:页面 JS 面板是高阶用法,一般不建议普通用户使用,如需使用,请确定你具备研发背景,能够自我排查问题。当然,你也可以咨询身边的技术顾问或者联系宜搭平台的技术支持获得服务(可能收费)。
* 我们可以用 JS 面板来开发一些定制度高功能,比如:调用阿里云接口用来做图像识别、上报用户使用数据(如加载完成打点)等等。
* 你可以点击面板上方的 「使用帮助」了解。
*/

// 当页面渲染完毕后马上调用下面的函数,这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
  console.log(`「页面 JS」:当前页面地址 ${location.href}`);
  // console.log(`「页面 JS」:当前页面 id 参数为 ${this.state.urlParams.id}`);
  // 更多 this 相关 API 请参考:https://www.yuque.com/yida/support/ocmxyv#OCEXd
  // document.title = window.loginUser.userName + ' | 宜搭';
}

// 树形表格数据处理
export function handleData(content) {
  const { currentPage, data, totalCount } = content;
  console.log(10086, data)
  if (!totalCount) { return content };
  const tableData = data.map(item => {
    const children = item.formData.tableField_lbkho7az.map((_item, index) => {
      return {
        xsztjh: _item.textField_lks625h7,
        productName: _item.textField_lbkho7b0,
        count: _item.numberField_lbkho7b1,
        isChildren: true,
        formInstId: `${item.formInstId}-${index}`,
      }
    });
    return {
      formInstId: item.formInstId,
      formUuid: item.formUuid,
      title: item.title,
      xsztjh: item.formData.textField_lks625h7,
      date: item.formData.dateField_lbkho7ay,
      children,
      isChildren: false
    }
  });
  return {
    currentPage,
    totalCount,
    data: tableData
  };
}

// 成员数据处理
export function renderCell(value, index, rowData) {
  console.log(111, rowData)
  return <span>{value}</span>;
}

// 查看详情
export function onDetail(rowData) {
  const { formInstId, formUuid } = rowData;
  this.utils.router.push(`${window.location.origin}/${window.pageConfig.appType || window.g_config.appKey}/formDetail/${formUuid}`, { formInstId, }, true, true);
}

export function actionRender(title, rowData) {
  const { isChildren } = rowData;
  return isChildren ? false : title;  // return false 则不显示
}

10086注释下面的是我之前的代码, 能输出数据,但是子表单输出不了。

展开
收起
1936807337075809 2023-08-02 07:59:08 255 0
5 条回答
写回答
取消 提交回答
  • 北京阿里云ACE会长

    如果您想将一个自定义请求的返回值作为子表单的输出,您可以使用宜搭表单组件中的子表单插件。

    首先,在您的自定义请求中,确保返回值是符合子表单数据格式的。子表单数据格式是一个包含 name 和 value 两个字段的 JSON 数组,如下所示:

    json
    Copy
    [
    {"name": "field1", "value": "value1"},
    {"name": "field2", "value": "value2"},
    ...
    ]
    其中,name 表示子表单中的字段名,value 表示对应的字段值。

    接下来,在您的宜搭页面中,将子表单插件添加到页面中,并在子表单插件的设置中,选择“数据源”选项卡,在“数据来源”中选择“自定义数据源”,并将您的自定义请求的接口地址填写在“数据源 URL”中。

    在“数据格式”中选择“自定义”,并将以下代码复制到“自定义数据格式”中:

    json
    Copy
    [
    {"name": "field1", "display": "Field 1", "type": "text"},
    {"name": "field2", "display": "Field 2", "type": "text"},
    ...
    ]
    其中,name 表示子表单中的字段名,display 表示字段的显示名称,type 表示字段的类型。

    2023-08-02 16:13:55
    赞同 展开评论 打赏
  • 面对过去,不要迷离;面对未来,不必彷徨;活在今天,你只要把自己完全展示给别人看。

    在宜搭中,可以通过自定义请求输出将返回值作为子表单的输出。以下是一个示例的代码片段,展示了如何实现这一功能:

    // 假设你已经完成了自定义请求,并获得了返回结果result
    
    // 获取子表单字段对象
    const subformField = $data.fields["subformField"];
    
    // 创建一个新的子表单行数据对象
    const newRowData = {
      // 假设需要保存返回结果的字段名称为"resultField"
      "resultField": result
    };
    
    // 将新的行数据添加到子表单字段的值中
    subformField.value.push(newRowData);
    
    // 更新字段值
    $subform.getFieldByName("subformField").setValue(subformField);
    

    在上述代码中,我们首先获取子表单字段对象,并创建一个新的子表单行数据对象,将返回结果(result)作为字段的值赋予指定字段名称(例如"resultField")。接着,我们将新的行数据对象添加到子表单字段的值中,并通过更新字段值来确保修改生效。

    2023-08-02 16:03:09
    赞同 展开评论 打赏
  • 天下风云出我辈,一入江湖岁月催,皇图霸业谈笑中,不胜人生一场醉。

    获取数据​ 使用第三方接口获取数据,在这里我们新建一个表单,并且使用页面数据源接口获取数据。 (1)在数据源处增加远程数据源,调用根据条件搜索表单实例详情列表接口,接口配置如图:​ 参考文档:宜搭平台接口(页面数据源可直接调用)

    2023-08-02 14:54:12
    赞同 展开评论 打赏
  • 发表文章、提出问题、分享经验、结交志同道合的朋友

    同学你好,大概看了下你的代码的实现逻辑:
    你想在页面上的 selectField 组件的 onSearch 回调中,根据用户输入的关键字,动态搜索客户信息,并根据搜索结果更新下拉选项。

    如果返回数据console.log()能输出,那问题就出在子表单数据源tableField_ktcnitc7组件定义是否正确

    2023-08-02 09:32:42
    赞同 展开评论 打赏
  • 十分耕耘,一定会有一分收获!

    楼主你好,要将返回值作为子表单的输出,你需要在自定义请求的回调函数中将返回值赋值给子表单的数据源(dataSource)。

    例如,假设你要将请求返回的数据格式为:

    {
    "name": "张三",
    "age": 20,
    "gender": "男"
    }

    则可以在自定义请求的回调函数中添加以下代码:

    // 假设你的子表单ID为 subform_demo,需要将返回值赋值给子表单的字段名为 name,age,gender
    this.$('subform_demo').set(['name', 'age', 'gender'], [data.name, data.age, data.gender]);

    其中,this.$('subform_demo') 表示获取子表单实例,set()方法用于设置子表单的数据源,第一个参数为字段名,第二个参数为对应的值。

    2023-08-02 08:49:21
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
宜搭 - 企业智能化应用搭建平台 立即下载
《云市场-宜搭解决方案》 立即下载
《宜搭开发手册》 立即下载