腾讯云微搭低代码
有奖捉虫：办公协同&微信生态&物联网文档专题 HOT
文档中心 > 腾讯云微搭低代码 > 最佳实践 > 代码编辑器的常用实战指南

代码编辑器的常用实战指南

最近更新时间：2023-10-13 17:05:31

我的收藏

本页目录：

对数据模型中的数据进行增删改查

批量导出列表的全部数据

解决方案： 一般情况下微搭会提供导出按钮支持当前页面数据的批量导出，但是要批量导出列表的全量数据时就必须通过低代码方式实现。（这种用 JS 实现导出的方案还有很多种开源方案，用户也可以自行查找解决方案替换）。
实战代码：
export default async function({event, data}) {
  //查询条件
  //const conditions = [{ key:"fkyqm",rel:"eq",val:event.detail.fkyqm },{ key:"mzt",rel:"eq",val:"2" }];
  const result1 = await app.cloud.callDataSource(
    { dataSourceName: 'sys_user',  // 数据表名
        methodName: 'wedaGetRecords',  // 查询方法（多条数据列表）
        params:{
          //添加条件
          //where:conditions,
        },
  });
  /** 1、查出总数 **/
  var total = result1.total;
  // 要导出的json数据
  const jsonData = [];
  /** 2、每1000条取一次数据 **/
  for(var i = 1 ; i-1 < total/1000 ; i++){
    const result2 = await app.cloud.callDataSource(
    { dataSourceName: 'sys_user',  // 数据表名
        methodName: 'wedaGetRecords',  // 查询方法（多条数据列表）
        params:{
          pageNo:i,
          pageSize:1000,
          //添加条件
          //where:conditions,
        },
    });
    //数组拼接
    jsonData.push.apply(jsonData,result2.records);
  }
  /** 3、拼接导出文件数据 **/
  // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
  let str = `列表标题A,列表标题B,列表标题C,列表标题D\\n`;
  // 循环取值
  for(let i = 0 ; i < jsonData.length ; i++ ){
    //这里可以根据业务字段取值,增加""为区分字符串中的逗号,增加\\t为了不让表格显示科学计数法或者其他格式
    for(const key in jsonData[i]){
      str+=`"${jsonData[i][key] + '"\\t'},`;    
    }
      str+='\\n';
    //可以根据列内容选择对应的key
    //str+=`"${jsonData[i]['xm'] + '"\\t'},`; 
    //str+=`"${jsonData[i]['nl'] + '"\\t'},`; 
    //str+='\\n';
  }
  // encodeURIComponent解决中文乱码
  const uri = 'data:text/csv;charset=utf-8,\\ufeff' + encodeURIComponent(str);
  /** 4、导出链接设置 **/
  // 通过创建a标签实现
  const link = document.createElement("a");
  link.href = uri;
  // 对下载的文件命名
  link.download =  "json数据表.csv";
  link.click();
}

实现不同状态结果值的样式变化

解决方案： 通过枚举工具方法 app.utils.formatEnum({字段获取路径}, {字段名称}, app) 获取枚举字段对应的值。通过表达式绑定三目运算符（ x?a:b）的方式实现不同状态的判断和逻辑处理。
实战案例： 例如审批状态想要实现不同结果显示不同的背景颜色、字体颜色，可以在样式中绑定自定义的获取字段枚举值：
app.utils.formatEnum($w.item_9adw.spzt, 'spzt', app)


判断字段样式 style：
$w.item_9adw.spzt == 2 ? {
  background: "#e5f9f6",
  color: "#58d9c8",
  border: "1px solid"
} : $w.item_9adw.spzt == 0 ? {
  background: "#ffe8d5",
  color: "#ff7102",
  border: "1px solid"
} : {
  background: "#f0f0f0",
  color: "#A8a8a8",
  border: "1px solid"
}





实现时间格式的自定义显示

解决方案：app.utils.formatDate(date, mask, utc, gmt) 格式化日期函数，能够按照特定的格式将时间戳格式化。输入参数如下：
参数
类型
必填
说明
date
timestamp
是
时间戳（毫秒级别）
mask
string
是
日期的格式
utc
boolean
否
协调世界时间
gmt
boolean
否
格林威治平时间
实战案例
app.utils.formatDate(forItems.id2.kssj, 'yyyy-mm-dd hh:mm:ss')

中国站