通达科技 - 宜兴电脑维护及IT服务外包服务商

 Exercise

1. 通过扩展看板控制器和创建新的视图对象来扩展看板视图。

2. 在视图注册表中注册为 awesome_tshirt.customer_kanban。

3. 更新看板视图以使用扩展视图。可以使用 js_class 属性完成此操作。

 Exercise

1. 创建一个 CustomerList 组件，目前只显示一个带有一些文本的 div 。

2. 它应该有一个 selectCustomer 属性。

3. 创建一个新的模板，扩展（XPath）看板控制器模板，将 CustomerList 添加到看板渲染器旁边。现在先给它一个空函数 selectCustomer 。

4. 子类化看板控制器，在其子组件中添加 CustomerList 。

5. 确保您在看板视图中看到了您的组件。

 Exercise

1. 修改 CustomerList 组件，在 onWillStart 中获取所有客户的列表。

2. 使用 t-foreach 在模板中显示列表。

3. 每当选择了一个客户，调用 selectCustomer 函数属性。

 Exercise

1. 在看板控制器中实现 selectCustomer 以添加正确的域。

2. 修改模板，将真实的功能赋给 CustomerList 的 selectCustomer 属性。

由于与搜索视图进行交互并不容易，因此这里提供了一个快速的代码片段以帮助您：

selectCustomer(customer_id, customer_name) {
   this.env.searchModel.setDomainParts({
      customer: {
            domain: [["customer_id", "=", customer_id]],
            facetLabel: customer_name,
      },
   });
}

 Exercise

1. 在 CustomerList 组件中添加一个类型为复选框的输入框，并在旁边加上标签“活跃客户”。

2. 更改复选框的值应该过滤出具有有效订单的客户列表。

 Exercise

在客户列表上方添加一个输入框，允许用户输入字符串并根据客户姓名过滤显示的客户。

 Exercise

1. 确保你有一个反应式对象来表示过滤器是否激活（类似于 this.state = useState({ displayActiveCustomers: false, searchString: ''})）。

2. 修改代码以添加一个名为 displayedCustomers 的 getter，该 getter 返回当前活动的客户列表。

3. 修改模板以使用 t-model。

 Exercise

1. 在 CustomerList 中添加一个 pager，并且只加载/渲染前20个客户。

2. 每当分页器改变时，客户列表应相应更新。

这实际上非常困难，特别是与前面练习中的过滤相结合。需要考虑许多边缘情况。