下面是一些开发中遇到的问题，然后去不断地试错，最终找到解决办法。还在持续学习，望大佬们也能提供一些自己在开发中遇到的问题和解决办法，欢迎在评论区留言。
在js jdk开发中使用amis-ui组件
let amisLib = amisRequire('amis');
如果我们在交互过程中不想要它内部提供的内容提示，我们可以自己在全局环境中结合提供的组件配置自己想要的内容提示，我们可以这样。
下面以复制内容后提示内容为例。
copy(content) { console.log("content", content) amisLib.toast.success('内容已复制到粘贴板'); },
哪些属性可以书写表达式
- className
className: { "text-danger": "this.orderstatus == 0", "text-success":"this.orderstatus == 1" },
- 后缀是on的属性只有存在数据域的组件才可以被传递参数。
页面中一些操作按钮的权限控制（重点）
这个需求想了好久，最开始是想着通过定义一个js文件引入到项目中，然后通过visibleOn, hiddenOn等控制显隐的属性做一下判断，但是不管是模板语法${}，还是ejs模板语法<%%>，还有直接取值this.showPermit()都是不可以获取，并加以判断的。
{ type: "button", actionType: "ajax", // 取值 label: "<%= data.permits[0].activityName %>", }
网络异常，图片无法展示
|
// 这个都是可以的 hiddenOn: "${ls:permits[0][activityValue] == 'sum'}", disabledOn: "${ls:permits[0][activityValue] == 'add'}",
上面比较的是sum,返回false。所以会显示
网络异常，图片无法展示
|
hiddenOn: "${data.showPermit('add')}"
网络异常，图片无法展示
|
使用ejs语法判断
hiddenOn: "<%= data.showPermit('add') %>" hiddenOn: "<%= data.permits.some(function(item) { return item.activityValue == 'add'}) %>"
网络异常，图片无法展示
|
网络异常，图片无法展示
|
最后发现了onClick事件，他可以直接写js语句来加一判断啊。
onClick: "if(props.showPermit('add')) {return true } else { props.env.notify('info', '暂未权限'); return false}",
上面这种方式就可以在用户点击某个按钮的时候，进行权限校验，然后通过返回值做出提示。
将函数定义在全局的props中即可。
{ location: history.location, showPermit(activityValue) { console.log("===activityValue", activityValue) const permits = JSON.parse(localStorage.getItem("permits")) return permits?.some(item => item.activityValue == activityValue) } },
今天（2022-9-14）又一次发现了新大陆。找到了可以统一处理页面按钮权限的方法了。我们只需要定义一个js文件，引入页面中。然后在visibleOn属性中使用即可。
真的需要吐槽一下官方文档了。一直都是通过data.函数去获取的。谁知道原来可以直接获取，而且自己还在每个页面的data数据域中写了该权限函数，通过data.函数的方式去获取，还是不行。
网络异常，图片无法展示
|
所以就需要多去尝试。
快速创建一个漂亮的crud组件
// 展示和筛选都是依靠这个接口实现 api: '/api/overseatopup', // 是否将过滤条件的参数同步到地址栏 syncLocation: false, // 开启查询区域 列表中需要制定searchable属性 autoGenerateFilter: true, // 设置分页页码属性名 pageField: 'pageNum', // 设置每页显示多少条数据属性名 perPageField: 'pageSize', // 分页相关。其实他的官方文档写的也不是很全，所以需要去测试 "footerToolbar": [ "statistics", "switch-per-page", "pagination", ], // 列属性过多，可以点击展开详情来展示其他的列信息。需要在列表中定义breakpoint: "*"这个属性 "footable": true,
添加
// 显示列和列排序 headerToolbar: [ { type: 'columns-toggler', align: 'left', draggable: true, icon: 'fas fa-cog', overlay: true, footerBtnSize: 'sm' }, { align: 'right', label: '添加', size: "md", type: 'button', actionType: 'dialog', level: 'primary', dialog: { title: '添加记录', className: 'dialog-title', size: 'lg', body: { debug: true, type: 'form', labelWidth: 200, horizontal: { left: 4, right: 6, }, // className: 'form-wrapper', api: { url: '/api/add', method: 'get', // method: 'post', data: { ordernum: "${ordernum}", } }, body: [ { label: '订单号', type: 'input-text', name: 'ordernum', } ] } } }, ],
定制个性化的列（最好使用map组件）
因为他的映射可以写html标签。
就那下面这个例子来说status控制，我们在labelMap中就不能使用html标签来定制我们的内容。
{ name: 'orderstatus', "labelClassName": "text-current text-black", label: '充值状态', type: 'map', map: { "0": "<span class='text-danger'><span class='fa fa-check-circle m-1'></span>失败</span>", "1": "<span class='text-success'><span class='fa fa-times-circle m-1'></span>成功</span>" }, // "type": "status", // "map": { // "0": "fa fa-check-circle text-danger", // "1": "fa fa-times-circle text-success" // }, // 数据映射的时候不能使用过滤器 // "labelMap": { // "0": "${'<span class='text-danger'>失败</span>' | raw}", // "1": "${'<span class='text-success'>成功</span>' | raw}" // }, // 下面这部分代替上面 // "labelMap": { // "0": "失败", // "1": "成功" // }, // // 可以动态配置className属性 // className: { // "text-danger": "this.orderstatus == 0", // "text-success":"this.orderstatus == 1" // }, searchable: { type: 'select', name: 'orderstatus', label: '充值状态：', placeholder: '请选择充值状态', options: [ { label: '成功', value: '1' }, { label: '失败', value: '0' } ] } },
如果想让该列可以复制，那么我们需要在列中定义capyable: true属性。
{ name: 'ordernum', label: '订单号', searchable: { type: 'input-text', name: 'ordernum', label: '订单号：', placeholder: '请输入订单号' }, copyable: true },
其他的自定义table每列的样式
"align": "center", // 内容居中对齐 "labelClassName": "font-bold text-primary text-lg", // 设置表头文字样式 // 设置每一个单元格的样式 ，这个表示过滤一筛选确定样式 "classNameExpr": "<%= data.unusetotal > 1000 ? 'text-danger' : '' %>",
编辑和删除（operation组件）
写在列最后的操作项中。
{ type: "operation", "label": "操作", "buttons": [ { "label": "编辑", "type": "button", "level": "link", "actionType": "dialog", "dialog": { "title": "查看详情", size: "lg", "body": { "type": "form", mode: "horizontal", horizontal: { left: 4, right: 6 }, api: { url: '/api/update', method: 'get', // method: 'post', data: { ordernum: "${ordernum}", id: "${id}" } }, body: [ { type: 'hidden', name: 'id', }, { label: '订单号', type: 'input-text', name: 'ordernum', }, ] } } }, { "label": "删除", "type": "button", level: "link", actionType: "ajax", "className": "text-danger", api: { url: "/api/delete", method: "get", data: { id: "${id}", } } } ] }
actionType中可以设置哪些值
网络异常，图片无法展示
|
