Sayho工具箱对话框配置

第项节课完成详情页静态页面的切图，这一节课我们来讲解一下新增接口的对接，也就是绑定这一个提交按钮。我们先回到详情页的配置界面， 其实提交按钮对接的这个功能类型跟我们之前对的那一个查询模块的查询按钮是一样的，都是使用这一个发起请求。在对接接口之前，我们再讲一个知识点，就是这一个必填选，这必填选大家可以暂停看一下气泡的描述。 现在我们页面提交按钮是还没有进行这一个请求参数的绑定的吧，我们先勾选是要去页面探一下， 就是这个策略名称，它的左上角会有一个星号，就是 b 填写的时候会有一个星号，此时页面是还没有进行接口绑定的，我们点提交看一下， 它是不发起这一个策略名称不为空之类的那一个叫验的，这一步操作是需要完成接口对接以后才会进行那一个不为空的叫验。现在我们开始新增接口的对接 装机提交按钮，然后这里设置请出列表添加接口，要添加这一个新增选择，要设置这里跟绑定那个查询按钮是一样的，也是一对模块组建的这些内容进行一一绑定，就像这个迪斯科选，我们看一下接口文档， 要他接口文档，迪斯科选对应是什么字段，我们看一下对内操作描述，我们就安教接口文档的字段，以后对我们的页面进行配置，就模块绑定绑定对应的就是这个对内操作备注， 然后这个对内操作备注是一个多行文本，要我们勾选他这个文本内容切割后的触阻根制服串，他这个是什么意思呢？我们先保存一下，看一下 他这里有一个格式，娇艳，就这个普拉大丽斯是一个数组，数组，他这里面必须是要保持数组的格式，所以我们先传一个空数组， 要对应的状态为零时，将接口返回信息存住数据池，确定确定对立操作。备注，他里面有一个文本值，输入类型为数组时，需要对输入内容设置切割方式，我们看一下他这个数组 以后它的制服串切割方式，大家可以暂停看一下，这里我就不读了，要我们这里输出是制服串的就保持还是制服串，要我们继续回去对接我们的接口制段，然后这个贪心的我们看一下，贪心的是这个有效结束时间， 然后下面这个是开始时间，我们对应绑定这一个有效期，然后也是选择这一个模块组建，然后有效期这个是结束时间，我们就选结束时间， 开始时间就对应的是开始时间，然后这几个制段对应的方式跟前面的不是同模块组建绑定的，我们就直接跳过。然后我们讲一下这参数来源这里面的分类， 这一个获取当前的日期，这里有一个当前的日期跟一个时间戳，我们看一下日期，要日期选择当前日期的话，它的这个格式是包含年、月域时分秒了一个支付串，就这样子一个格式，然后还有一个是时间戳， 时间戳就是输入类型，格式为十三位的纯数字。然后重点讲一下这一个 plato 例子见参数类型是数组的这种， 我们看一下他气泡的描述以后，这里面我们同样也是绑定模块，就绑定这一个表格嘛，他这个普勒大历史，我们看一下接口文档，要他接口文档这一个数组， 它下面对应的这几个数组，就它这里面的品牌、城市集团、国家序号、支付方式，还有这个供应商是不是对应了我们这个表格，这这个登山栏表格，所以这里面我们绑定模块组建这里选择这一个整个表格，就是选择产品， 就当前表格数据确定，就我们选定以后，他就会把对应的，就他会把对应的这些字段给展示出来，然后我们在动态绑定他的这一个绑定表格单元格，我这选定表格以后，他这里面会多出两个选项， 一个是绑定表格单元格，一个是取表格动态数据，我们对比一下前面这些就是数组外面的它是这几个选项，这是绑定表格之后，它就会多出这两个选项，这里面序号，我们绑定表单元格， 然后从单元格组建里面。哪这里我们找到序号，这对应的就是表格里面的内容， 这个是序号，然后对应的这个 b、 m、 b、 s 就是 这个品牌吗？我们都要回到需求里面，地球文档里面就是这个酒店品牌吗？它这里是可以选择多个品牌的，所以它这里也是一个数组，我们这里面同样也是绑定表单元格， 要从单元格里面选择这一个，就对话窗里面的这一个表格，这表格勾选行数据，就我们从那个对话窗表格里面勾选出品牌，要回填到那个表单元格里面，我们选这一个表格，勾选行数据，确定 要我们选定这个表格勾选行数据之后，他这里也同样会多出三个选项，分别是组建选项绑定，还有从其他组建绑定，还有一个是取表格回选数据，这里面的话我们是动态绑定的，所以是绑定这一个组建选项， 要从组建选呛里面选。首先这一个 id 是 不用选的，我们参照一下后端刷个文档格式，要看一下它酒店这一个品牌 blanchett 下面有什么制段，也就是对应了这几个制段 一一对应的，然后我们再根据后端的要求去进行对接，这个组建 id 是 不用对接的，然后我们主要是对接这一个中文名称跟这一个 code， 就 这两个字段，还有的就是这个 shift， 还有这个太，然后我们根据他的 tab 的 美举值，五是品牌， 所以这里面我们 tab 这里就写一个五，然后 tab 是 包含，那就写一个一， 然后对应这两个扣跟令 c n 这一个是需要动态绑定这个表章严格组建的，所以选这个。从组建选呛绑定这里面我们可以看到这是当前的这个表。当严格动态绑定的数据，其实就是那一个置点触据响应接口返回回来的触据制段， 我们找到对应的字段，就是这一个递选那里令 废这个，这个是需要跟后端沟通的，就这个字段对接哪一个模块组建这个是跟后端相应好决定的，而不是说乱填的。然后同样 ct 历史也是我们绑定表彰严格， 然后从酒店城市里面选中这一个国家下的城市搜索框，然后也是它的组建选项，你要确定，然后我们再看一下接口文档， g t lease 应该是这个酒店城市，我们看一下它这里面对接的其实跟酒店品牌这一个字段也是差不多的，也是一个 code， 一个 name， c n 羊，还有一个 state 羊，还有一个太。我们对接一下 code， 也是从组建选项绑定，然后这里面的组建选项，这是那个国家城市查询接口响应返回维来里数据，这是那一个搜索框绑定的那个选项树组，我们这里面 code 对 应的是 ct code， 然后这里面的 name 对 应的也是这个 ct name， 然后还有一个 type， 我 们看一下它的那个酶值类型。 城市是四，这里我们选四。要我们讲一下另外一个就是从其他组建绑定， 这个从组建选项绑定这一个当前绑定的酒店，它是一个搜索框吗？但它这一个 sketch 其实对应的是那个匹配逻辑的那个单选框的，就是那个单选按钮的，因为那一个单选按钮跟这一个搜索框是同级的一个组建， 所以这里面它是另外一个组建的，因为你在那个搜索框里面是拿不到它这一个匹配逻辑的，所以这里面选从其他组建绑定， 要我们再看一下它这个其他组建选项有哪些，这个选择国家下的城市组建是智慧，不给你选了，就如果你勾了是这个其他组建摇，你这一个 stat 有 对应绑定的是这个匹配逻辑的单选按钮的值，我们就选那个按钮值，你要确定 要我们可以看到它对应的就是这个匹配逻辑，其他组建你要记住一点按钮值要它这里面这整个 g t list 它其实是绑的是这一个选择国家下的城市那一个搜索框，然后同样的这几个的话都是一样的， 因为这一个咕噜 list 集团跟这一个国家，这两个跟前面的是一样的。这里面因为课程的时长，我们就直接跳过，我就绑定好了。 然后我们讲一下就是这个支付方式，要支付方式同样也是从表单源格里面绑定绑定这个支付方式按钮，这个支付方式我们之前是前端且死了两个选项，一个是到店现付，一个是现象预付，就两个是前端且死的吗？ 所以呢它这里面的这个组建选项绑定拿到的值就前端且死了两个，一个是选项名，一个是选项值，我们对比一下前面的这些是这些国家查询，它这里面是通过接口响应返回回来的字段，所以这里面是动态获取后端的字段接口的， 然后这里面的选项值却是前端且死的，对应的宁 c n 就是 名，然后这一个扣的就是值， 然后对应的这个支付方式是二，然后 static 是 一，然后这一个供应商这个列表也是动态获取后端数据接口，我们看一下选择这一个供应商， 我们再看一下它这个组建选项有哪些，那它这个也是那一个供应商接口返回来的制段，对应的 q 的 就是 key， 然后 n 的 就是这个 will， 要对应的泰尔跟 kettle 的是 e， 我 们看一下 对，是一，然后我们重新设置一下这个状态码，然后状态码为零，是提示后端返回的制段，面试局将接口返回信息存入数据池， 提示框样式成功吧，如果是其他的话，同样也是提示后端的描述信息，提示框样式就选对一个错误以后保持当前状态无操作，就是没有成功的情况下，我们就保持页面不动，上面那个就是成功，就把数据存入数据池， 而不是纯无数据池，因为这里面添加成功以后，我们看一下他这里面的现成动作有哪些就成功以后我们就选择这一个关闭当前详情页并刷新页面，我们选择这一个流程 确定确定，现在我们再加几个，既是组建的必填写校验，就这个有效期我们加一下，然后这一个挂起状态也加一下，渠道也加一下，把这些表单元格也加一下，看一下。 修改成功，我们回到页面， 点击添加，进入到这个添加的详情页里面，现在这个提交按钮我们已经绑定接口了，我们看一下已经绑定接口的情况下，就是有这个星号的字段没有填写的情况，直接点提交会出现什么样的效果， 他就会提示策略名称为必填选，请检查，最必须要填这一个才能允许继续操作。我们打开那个开发者工具看一下，要这里面我们随便填一下吧，要提交， 那现在这里面渠道是通了，他要求要填一个，填一个商旅，我们看一下如果不填有效期，跟这里面不填这一个挂起状态会怎么样？那如果不填这个有效期，他就会提示有效期为必填权， 然后填完以后他就到下一个，然后这里面挂起状态，没填，这里也需要填一下 表格，也是这里面供应商贵点犬邀请检查邀勾相支付方式也是酒店城市也是包括里面的选择。博佳搜索跟这一个城市搜索也是 这里面随便填个英国要成事就博否选国家适用。提交，尧就把对话窗里面的内容带到表格里面了，尧还有酒店品牌， 我们找一个品牌名称不是空的，就这两个确认，要集团也是，就如果集团像这种表格，如果你没勾选，你要点提交的话，它会提示请从表格勾选至少一条数据， 由我们选一条有集团名称的，这里就选这一条八八七六提交， 然后我们点击提交发起新增请求看一下，现在已经发起请求了，但是这条数据已经重复记录了，这个没关系，我们看一下这个参数我们是怎么传的，现在我们可以发现就是另，这是用名称是不是对应的？我们把这个策略名称里面的文本内容填到这个嫩里面了， 我们再试一下这一个对内操作备注，我们再点提交， 他是不是也动态的把这一个多行文本里面的这一个，哈哈哈哈，已填过去了。还有这个时间有效期的开始跟结束时间，就二月一跟那月二提交 是不是对应的？把 star 二月一，然后变二月二，也跟着动态的把时间框里面的内容填到这个字段里面，包括表格也是我们看一下， 就表格现在只有句序号只有一的这一条，要供应商就是这个，这个萨普利斯，萨普利斯我们是不是只绑定了这个扣跟这个 n 吸烟要这个 stat 跟 type 都是写的，一要它现在是这个阿勾的，要我们勾上这个响度， 要我们提交，看一下现在是不是两条数据就响度跟阿勾达都勾过来了，同样我们取消掉这个响度，阿七请求 现在是不是响度这条数据也从这个 setlist 里面移除掉了？还有这一个支付方式，也是 到店支付，一个扣一个 name， 然后还有的就是国家英国，他的 name 跟扣集团也是他的扣八八七六，还有他的这个 name， 这个什么 v， 什么什么 company， 是 不是这一个要我们再加一条， 加一条就加这条，国际酒店测试也要在线预付，然后这里面国家我们就选美国， 然后城市就选乐山集，然后这里是着选博佳，城市除外，下面是市用，然后这里面我们缴其他的出去，我们就勾这条最长的这条底交，然后还有集团也是 翻译这一个分页，我们后期讲一下它这里面现在是用的公共配置的，它已可以自定义一条数的选这个 hs home 这一个，那选中处了，你要提交 现在是不是有两条数据了，就一条，这上面这一个勾选啊勾打的，然后下面这条就是勾选这一个国际酒店测试的 新征接口的对接课程就到这里，我们下节课再讲解一下，去修改 e 怎么对接。

这节课我们来学习一下，就是修改详情页的布局以及对应的数据回显，我们看一下就是接口我们已经事先添加了，不过这里有一个知识点我们要讲一下，就是这一个将参数拼入 ui 料路， 一般只有 get 请求是把这个参数传在 u r 要撸呛面的，但它这个接口后端要求把扣的也拼在 u r 要撸像，所以我们这里就按照后端的要求将参数拼入 u r 要撸，这里我们选一个是。然后的是我们现在开始页面的布局。 首先这里的修改，我们看一下文档，就我们的静态布局是一模一样的， 相对于新增修改跟详情则是多出了一个策略编号，就类似于我们每个人的身份证 id 一 样，这是唯一的就用来识别这条数据的。 然后我们设置一下，在这里我们可以用到这一个克隆的功能，我们看一下他的描述，就是可从当前页面克隆其他已设置按钮的详情页样式布局， 它的意思是详情页可以克隆其他按钮的详情页，就是一一对应的关系，就好像我们选对话框，它这里能克隆的也是其他已设置的对话框。 要我们看一下跳转页面的时候，我们页面有哪些可以克隆的按钮，在这里我们看到查询跟重置是不能选的，只有这个添加，因为这个添加它的按钮功能类型也是跳转页面，我们就克隆这一个添加按钮，然后克隆， 克隆完以后，我们可以看到他这里面就修改页面的详情页，已经是按照新增添加的是一样的，就把他的样式给拿过来了，我们保存到页面看一下， 回到页面我们点击修改，然后我们看到静态布局已经拷贝清蒸那边是不是保持一致的，然后对应了我们需求图里面就是修改了之后，就页面会多出一个策略编号，我们现在加一下这个策略编号， 来到修改页面，然后我们点击这一个基本信息的模块，添加表单元格，然后这个叫策略编号，你要对应的它是一个是一个文本内容，它是不可以改，然后我们选一下文本内容， 然后布局，我们把它放在前面，然后我们再添加一个透明组建，用来站位，这里我们克隆一个站位符吧，又把它拉到下面去以后保存页面， 我们再回到产品中心看一下，此时我们点击修改，你要进入到页面，他是不是就多出这一个策略编号了？ 为新增上面是没有策略编号，然后怎么把表格的这条数据带到修改里面， 这里的话可以回顾之前的知识点，就是表格进入到详情页跟对话框，他数据池里面会默认带有一条，就是从上一个菜单表格里面单行单选进来的数据成员，他会把他带进来了，然后他带进来了以后呢，我们就可以双击这一个策略编号， 然后这个默认值来源新增的时候都是前端固定设置呢，如果是修改的话，他这个默认来源我们就要改一下，改成从这一个数据池中获取，然后绑定对应的数据。当前表格单行选中的数据，我们选中这一个对象， 然后再绑定这个对象下面的属性，也就是字段，我们看一下表格里面每一条数据，它包含的字段全部都在这里，它这一个策略编号是不是对应的就是这个扣，要我们选择到月面看一下， 要是这条四零二我们修改，那这个四零二是不是被带进回啊？还有这个零三七进来也是零三七。 让我们看一下页面的请求，我们打开开发者工具查询看一下网络， 那这就是我们列表的请求，让我们看一下结果数据，我们发现他表格里面的数据是没有产品的详细数据的， 所以一般后端会提供一个就是查看详情的接口，就是这种查看详情还有编辑数据接口，我们已经进行绑定了，就刚才已经说过了，我们现在就直接添加一下接口，要回到修改页的配置页， 这里我们添加数据池。我们再讲一下数据池其实就相当于一个仓库，就好像我们每一个商店里面，就我们除了展示在那些柜台上面的商品， 我们是不是仓库里也有很多对应的货，要这些货不是全部都展示到页面上的，我们需要展示哪些商品才会从仓库里面拿出来展示，就卖完一件能再回仓库里面拿一件。 我们大概这样子理解这个数据池的意思，然后添加数据要查看详情，我们是不是从后端接口获取，要我们选择已经设置好的对应的接口，然后就是这个查看详情， 我们选择查看详情以后，然后设置一下他的请求参数，然后这个请求参数只有一个扣的，这个扣的是不是对应的就是一个策略编号，策略编号我们是不是从上一个表格选中的那条数据里面获取的 那条数据也存在于数据池当中，所以这里我们选择从数据池中获取，然后获取完以后绑定数据池，也要选中可选项列表下的成员名称，也就是这个扣的， 我们选择确定要将状态码为零的数据，同样也存到页面的数据池中，确定要绑定这个 date 字段， 要关于这个纯入谢群搜里去这一个，这个我们先不讲要确定，确定这时我们的页面数据池就有两条了，就同样的我们讲一下，就是从这里添加进来的数据池数据是可以修改跟删除的， 给这一个从当前表格单行选中的数据，这一条是不能删除也不能修改，因为这条数据是上一个页面，也就是菜单里面表格获取回来的，这里面只是把这个数据带到我们的详情页当中， 要确定，这时我们再回到页面看像是不是有这一个请求了，就发起这个详情页请求了。 我们清除一下这菜单里面的数据，然后我们点秋干，那这里面是不是多出了一个低跳，也就是我们获取详情页的接口，因为我们有一个设置， 就是将参数拼入到 ui 要路这里，我们选式以后，这个扣也会拼到对应的这一个请求链接下面 要对应的，我们看一下后端返回数据，这里是不是已经把对应的就相对于表格的数据，我们也获取到选择产品的这条四零外数据。我们清除一下表格菜单里面的接口，然后进入到页面里面看一下， 我们再看一下接口请求返回来的数据，相较于表格，我们是不是也拿到了这个 pro max， 这对应的 pro max 下面的一些数据， 此时我们就可以针对这一个扩大里面的字段，包括这些字段做一个页面回显，就把它填回到这一个对应的表单内容里面，回到详情页的配置页， 然后修改要对应的这个菜单名称。同样的也是跟这个策略编号一样，就默认值来源新增是从前端设置固定值，然后修改的时候，这一个默认值来源就是从数据池中绑定， 然后从数据池中选择，我们刚才添加了这个查看详情，绑定这一个后端返回的数据对象，要从这个数据对象里面选择相应的置断， 也就是这一个内，然后这一个投放策略的话，同样我们这里面也是选择从数据池中获取，然后对应这一个默认值，我们也绑定这个详情接口，然后置断也从这个详情接口返回里面。 我们还是看一下接口文档吧，就按照接口文档来对，以免这是对错要对应了，我们看一下他这个贝塔， 我们发现后端给了这个接口，他没有详情，这都没办法，只能据说根据后端就后端，如果没有了情况下，我们就直接就询问后端，因为这个也不可能每一个接口都很完整的， 因为真实正的工作环境里面，我之前你说了，却现在相对于这样子，算是有一个 swag 文档是比较规范一点，有一些比较临时类一些接口可能却只需要口头向对接，或者是后端只给你一个 word 文档什么之类的， 这个我们就不强求，然后这里面的话，我们课程我们就直接就对字断了，然后它对应的是这个莉莉丝， 然后这一个有翘旗，有效旗，我们同样也是默认值来源，选择从数据池绑定，然后也是绑定这个查看详情接口要开始时间，我们从这一个详情接口里面的时段选择这一个贪撒要结束时间至贪变， 然后这个拼接十分秒，大概看一下它这个内容，这这个词段的格式要确定，要对应的对内操作备注，也是从数据池中获取绑定对应的数据池数据，要再绑定对应的字段，也就是这个 disquake 选， 然后渠道也是这里面木任值来源也是从这一个输域池过去，要对应绑定的制段，是这个太对，要我们签完成表单们先看一下效果， 要回到页面，我们看一下这一条，这修改的这条四零二，那我们现在是不是就对应把这个详情页面的制段 在令商语测试一一。然后还有这个对内操作备注，这个一二三四五六七 description 是 不是也对应田宁来了，要挂起状态正常 要投放，不投放对其看不出要这个有效期，九月四到这个爱青年，十月是不是对应了，也把它勾到这一个实弹选择器上面了，然后商语也勾呛来了。