宜搭JSX组件使用

癫喽

已于 2024-04-11 14:23:49 修改

阅读量300

点赞数

分类专栏：钉钉宜搭低代码文章标签： javascript 前端 html

于 2023-10-19 17:15:13 首次发布

本文链接：https://blog.csdn.net/weixin_42652148/article/details/133930348

版权

钉钉宜搭低代码专栏收录该内容

2 篇文章 0 订阅

订阅专栏

展示效果

数据源

JSX组件代码

 function render() {
   //获取复核人
   const check = this.state.check;
   //获取批准人
   const approve = this.state.approve;
   const data = this.state.dataInfo.formData;
   const info = this.state.dataInfo;
   const result = this.state.result;
   const status = this.state.status;

   // 判断status和result的值，决定渲染的内容
   if (status === 'COMPLETED') {
     if (result === 'agree') {
       // 渲染已通过审批的报价单
       return (
         <div>
           <table border='1px' width='100%' style={{ 'border-collapse': 'collapse' }}>
             <tr style={{ height: '80px' }}>
               <td colSpan={8} style={{ paddingLeft: '5px', fontSize: '25px', textAlign: 'center', letterSpacing: '10px' }}>海悦电缆制造有限公司</td>
             </tr>

             <tr style={{ height: '65px' }}>
               <td colSpan={8} style={{ paddingLeft: '5px', fontSize: '35px', textAlign: 'center', letterSpacing: '35px' }}>报价单</td>
             </tr>

             <tr style={{ height: '40px' }}>
               <td colSpan={8} style={{ paddingLeft: '5px', fontWeight: 'bold', letterSpacing: '3px' }}>非常感谢您对本公司的信任与支持!相关产品报价如下:</td>
             </tr>

             <tr style={{ height: '40px' }}>
               <td colSpan={5} style={{ paddingLeft: '5px' }}>客户单位：{data.selectField_lnsjqxed}</td>
               <td colSpan={3} style={{ paddingLeft: '5px' }}>联系人/电话：{data.textField_lnjn6kxi}</td>
             </tr>

             <tr style={{ height: '40px' }}>
               <td colSpan={5} style={{ paddingLeft: '5px' }}>项目名称：{data.textField_lnjn6kxj}</td >
               <td colSpan={3} style={{ paddingLeft: '5px' }}>报价原则：国际。</td>
             </tr>

             <tr style={{ height: '40px' }}>
               <td colSpan={5} style={{ paddingLeft: '5px' }}>付款方式：{data.textField_lnjn6kxk}</td>
               <td colSpan={3} style={{ paddingLeft: '5px' }}>报价日期：{this.utils.formatter('date', data.dateField_lnjn6kxm, 'YYYY-MM-DD')}</td>
             </tr>

             <tr style={{ height: '60px', textAlign: 'center' }}>
               <td>序号</td>
               <td>名称</td>
               <td>规格型号</td>
               <td>单位</td>
               <td>数量</td>
               <td>单价</td>
               <td>金额</td>
               <td>备注</td>
             </tr>

             {
               data.tableField_lntxwyr5.map((item, index) =>
                 <tr style={{ height: '40px', textAlign: 'center' }}>
                   <td>{index + 1}</td>
                   <td>{item.textField_lnk34mxz}</td>
                   <td>{item.selectField_lnsjqxej}</td>
                   <td>{item.textField_lninvi5s}</td>
                   <td>{item.numberField_lnmhf7p7}</td>
                   <td>{item.numberField_lnjyl5np}</td>
                   <td>{item.numberField_lnljp7ti}</td>
                   <td>{item.textField_lnjyl5no}</td>
                 </tr>
               )
             }

             <tr style={{ height: '40px' }}>
               <td style={{ textAlign: 'center' }}>大写</td>
               <td colSpan={4} style={{ paddingLeft: '5px' }}>{data.textField_lnml3r8w}</td>
               <td style={{ textAlign: 'center' }}>合计</td>
               <td style={{ textAlign: 'center' }}>{data.numberField_lnljp7tf}</td>
               <td></td>
             </tr>

             <tr style={{ height: '40px' }}><td style={{ textAlign: 'center' }}>运费</td><td colSpan={4} style={{ paddingLeft: '5px' }}>运费补贴{data.numberField_lnljp7tg}%</td><td style={{ textAlign: 'center' }}>减去</td><td style={{ textAlign: 'center' }}>{data.numberField_lnmhf7p8}</td><td></td></tr>
             <tr style={{ height: '40px' }}><td style={{ textAlign: 'center' }}>大写</td><td colSpan={4} style={{ paddingLeft: '5px' }}>{data.textField_lnml3r8x}</td><td style={{ textAlign: 'center' }}>合计</td><td style={{ textAlign: 'center' }}>{data.numberField_lnljp7th}</td><td></td></tr>
             <tr style={{ height: '40px' }}><td rowSpan={3} style={{ textAlign: 'center' }}>备注：</td><td colSpan={7} style={{ paddingLeft: '5px' }}>1.如总价错误，请以单价（结算价）为准。</td></tr>
             <tr style={{ height: '40px' }}><td colSpan={7} style={{ paddingLeft: '5px' }}>2.报价有效期一天。</td></tr>
             <tr style={{ height: '40px' }}><td colSpan={7} style={{ paddingLeft: '5px' }}>3.未支付定金遇到涨价需要重新报价。</td></tr>
           </table>

           <div style={{ marginTop: '20px', fontFamily: '黑体, Arial, sans-serif', fontSize: '16px', color: 'black' }}>
             <span style={{ paddingLeft: '30px' }}>批准:{approve}</span>
             <span style={{ paddingLeft: '260px' }}>复核:{check}</span>
             <span style={{ paddingLeft: '270px' }}>制表:{info.originator.name.zh_CN}</span>
           </div>

           <div style={{ marginTop: '20px', fontFamily: '黑体, Arial, sans-serif', fontSize: '16px', color: 'black' }}>
             <span style={{ paddingLeft: '20px' }}>地址: 江苏省盐城市龙冈镇盐淮路66号 (S233省道45-5)</span>
             <span style={{ paddingLeft: '50px' }}>网址: www.chychy.cn</span>
             <span style={{ paddingLeft: '55px' }}>E-mail: 2992906429@qqcom</span>
           </div>

           <div style={{ marginTop: '20px', fontFamily: '黑体, Arial, sans-serif', fontSize: '20px', fontWeight: 'bold', color: 'black' }}>
             <span style={{ paddingLeft: '130px' }}>创百年企业</span>
             <span style={{ paddingLeft: '90px' }}>做放心电缆</span>
             <span style={{ paddingLeft: '90px' }}>海悦电缆</span>
             <span style={{ paddingLeft: '90px' }}>全国保检</span>
           </div>

         </div>
       );
     } else if (result === 'disagree') {
       // 渲染审批未通过的信息
       return <div>审批未通过，请到报价表单查看详情</div>;
     }
   } else if (status === 'RUNNING') {
     // 渲染报价单正在审批的信息
     return <div>报价单正在审批</div>;
   } else {
     // 默认情况，如果status不是'COMPLETED'也不是'RUNNING'，显示请创建报价单
     return <div>请创建报价单</div>;
   }

}

JS代码

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

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

//时间戳转时间
export function timeChange(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();

  const formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  return formattedDate;
}

let totalData = [];
export async function getData(src) {
  let size1 = 0;
  
  const res = await this.dataSourceMap[src].load();
  if (res.totalCount < 101) {
    size1 = 1;
  }
  else {
    size1 = Math.ceil(res.totalCount / 100);
  }

  for (let i = 0; i < size1; i++) {
    const res = await this.dataSourceMap[src].load({
      pageSize: 100,
      currentPage: i + 1
    });
    totalData.push(...res.data);
  }
  console.log('555',totalData)
  //按照创建时间降序排序
  totalData.sort((a, b) => b.gmtCreate - a.gmtCreate);

  const applyArr = totalData
    .map(item => ({
      "text": `${timeChange(item.gmtCreate)} ${item.formData.selectField_lnsjqxed}`,
      "value": item.formInstId
    }));
  this.setState({
    apply: applyArr
  })
}


//打印事件
export function onClick(){
  //绘制需要打印的区域为容器组件内的内容
  const printPart = document.getElementById('div_lntzhsiy');
  window.document.body.innerHTML = "";
  window.document.body.appendChild(printPart);
  let oldstr = window.document.body.innerHTML;
  //调用print()方法去打印定义的网页区域
  window.print();
  document.body.innerHTML = oldstr;
  location.reload();
}

//下拉选项值变化触发事件
export function onChange({value, actionType, item}) {
  console.log('onChange', value);
  for (let i = 0; i < totalData.length; i++) {
    if (value == totalData[i].formInstId) {
      this.setState({
        dataInfo: totalData[i]
      })
      this.dataSourceMap['getStatus'].load({
        processInstanceId: totalData[i].formInstId
      })
    }
  }
}

相关接口参考跨应用数据源API | 钉钉宜搭·帮助中心

根据实例 ID 获取流程实例详情

接口路径： /v1/process/getInstanceById.json
请求类型： GET
参数：

参数名	描述	是否必填	示例	备注
processInstanceId	流程实例 ID	是	f30233fb-72e1-4af4-8cb8-c7e0ea9ee530

返回值示例：

{
  "success": true,
  "errorCode": "",
  "errorMsg": "",
  "result": "实例详情，参见 [附录 3- 流程实例详情对象格式说明](#流程实例详情对象格式说明)"
}

获取审批记录

接口路径： /v1/process/getOperationRecords.json
请求类型： GET
参数：

参数名	描述	是否必填	示例	备注
processInstanceId	流程实例 ID	是	f30233fb-72e1-4af4-8cb8-c7e0ea9ee530

返回值示例：

{
  "success": true,
  "content": [
    {
      "operateTime": "2018-06-22 14:35:40",
      "remark": "",
      "taskHoldTime": 0,
      "type": "HISTORY",
      "operatorName": "宜小搭",
      "operator": "yida",
      "activityId": "sid-restartevent",
      "action": "提交申请",
      "actionExt": "submit",
      "id": 2846866118,
      "operatorPhotoUrl": "/photo/yida.128x128.jpg",
      "processInstanceId": "8c124808-82e7-473b-9a7a-43c29b310837",
      "showName": "提交申请",
      "operateType": "NEW_PROCESS",
      "domains": [],
      "operatorStatus": "A",
      "operatorAgentIds": [],
      "size": 1,
      "operatorDisplayName": "宜小搭",
      "taskId": "null"
    },
    {
      "taskHoldTime": 531398377,
      "type": "TODO",
      "operatorName": "宜小搭",
      "operator": "yida",
      "activityId": "sidJIOB2P2J1JW3RPMDOS28",
      "taskType": "COMMON_ALL_AT_ONCE",
      "actionExt": "doing",
      "operatorPhotoUrl": "/photo/yida.128x128.jpg",
      "processInstanceId": "8c124808-82e7-473b-9a7a-43c29b310837",
      "showName": "执行人",
      "activeTime": "2018-06-22 14:35:41",
      "domains": [],
      "operatorStatus": "A",
      "operatorAgentIds": [],
      "size": 1,
      "operatorDisplayName": "宜小搭",
      "taskId": "2846866145"
    }
  ]
}