3.3 页面构建原创

大家好，欢迎大家来到腾讯云开发者社区，腾讯云微搭团队共同打造的VR低代码平台，一人构建企业级应用实战训练营第三章第三节我将为大家讲解页面搭建。我是腾讯云微拉团队产品经理崔胜平。上节课我们已经把云数据库的数据模型已经搭建好了，这节课我们将从零开始搭建一个CRM的客户管理，这里我们可以选择从空白创建一个新的应用。当我们进来这个新的应用之后，我发会发现这个应用的名称，它是一个自定义应用的名称，这是我们自定义给的名称，所以我们在这里给它调整一下，我们叫把SCR客户管理。然后呢，我们可以选择PC端的搭建。

进来之后呢，可以看到它一切都是初始化的，在这里它会首只有一个首页页面，然后这个当前页面，它会给一个查询最新创建的5个用户的一个方法，这个方法我们用不到，所以我们就给它删掉。当前页面，我希望我先创建的首页，我们可以当做仪表盘来用。然后我们新建一个页面，我们先把客户的列表给展示出来，那么这里我们可以直接选择这个表格与表单页的这个模型即可这个模板，这个模板会直接帮我们生成表单和表格页。这里我们选的客户信息表，因为这张表已经建立的比较全了，我们选的这个表点击新建。这里他就会帮我们把增删改查全套都给弄出来，这里也有新建按钮，也有删除按钮，当前这个列表也是字段比较全，都展示出来了。然后在后边操作点它会有查看编辑删除。

首先我们对这个列表做一些处理。比如说这里的可能太多了，我们做一些删减，在首页上我希望看到的是一些关键信息，所以我不需要性别。我也可以不需要邮箱。我不需要，呃。备注，还有企业相关的信息。我可以把拉黑信息也不在这儿展示，因为拉黑的用户本身就不会在这个列表展示，所以就没必要把拉黑信息放出来。然后我们可以添加一下字段，我们可以把创建时间给补上去。我们也可以把更新时间拨上去。好的。当我们调整完这些数据之后呢，我们可以发现它的这个所属员工，他并不是一个能够看得懂的数据，这是为什么呢？因为在我们表单新建的时候，它的所属员工这个字段，它存的是人员的ID值。

但是在列表上，他是不会把这个人员的ID值直接。给翻译成人员的中文名或者说其他名称。这个组件是不知道你这个字段它是人员字段的，因此我们需要手动的把这个数据做一层翻译。那怎么翻译呢？所属员工这一列它展示的是ID，那么我们就需要把所属员工的这一列改成自定义内容。然后当我们改成自定义内容之后，它这里会变成一个插槽式，这里我们点击加号，我们可以用成员组件，这个这个组件直接帮他去做渲染。这里我们选择成员组件，然后呢，我们可以把它的标题给隐藏了。

现在它其实渲染的是一个文本框的形式，我们可以把这个文本框改成一个只读的方式。好的，现在数据没有出来，是因为我们并没有给它绑定选中值，这时候我们可以把选中值给它绑定上，怎么绑定呢？它这个绑定的值应该就是当前行的。这个所属员工的数据，你选中值指的就是它的ID，你只要把人员的ID给这个组件，它就能给你返回出来它的一些属性，所以这里我们需要放的就是它的人员ID，也就是所属员工这个字段。那么在这里我们用表达式的方式去获取当前行的数据。这里还告诉我们啊，就是通过这个方式去获取当前行的数据，那这里所属员工也就是。他就给我们提示，叫所属员工。好的，当我们选择这个所属员工之后，就会发现他帮我们把这个字段的中文名，也就是账号名称给我们反馈出来了，所以第一步我们就把这个所属员工给展示出来，此时这个列表其实就已经正常了，我们现在还需做什么呢？我们可以去看一下我们的产品条件。

因为现在上面是没有查询框的，所以我们可以把查询框也补充一下筛选器我们可以根据。名称。可以根据他的电话，客户接到提前渠道做一些筛选。我们就随便选几个，然后放在这里即可，那么列表页看样子已经大差不差了，我们现在去看一下详情页。那我们新建完了之后，会发现这里它其实是有列表，还有编辑页，还有详情页，我们先看一下编辑，编辑页可以发现它是默认生成，默认把我们的组件全部生成出来了，而这里边的字段它其实是平铺的方式。一列下来的，它其实是不太好看的，就我们可以在这里对这个组件的排版做一下调整。怎么做调整呢？

我们先打开这个表单容器的内容插槽，你会发现它的内容插槽下边就是每个字段直接罗列的，那这个时候我们其实是可以加一个。网格布局进来。我们可以用网格布局去给它做一下规范处理。网格布局是怎么一个规范方式呢？它是通过行和列的方式去给你做布局管理，它一行可以有三个，然后每一列你可以按照说这个列你是占12分之几，它可以按这种比例的方式去给你做展示，这时候我希望呢，它分为基本信息和企业信息两个模块。基本信息里边，我希望他展示的就是用户的基本信息数据，所以这里我可以把这个名称到这个列上，而这个列我希望它是一行两个，因此我就把它PC端的列宽拖成6。6:12，也就是2:1，然后移动端列宽呢，我可以让它手动调节到12，因为自动填充它可能会根据你的数据长度不同导致有些问题，所以我们就给它展示成手势，手动调节12。

这时候这一个列我们就可以把它。复制出来，我们后续都用这个列去做。字段的那个排版，所以我可以在这儿多复制几个点，把性别拖进来，把电话拖进来。好，这里我相当于把名称，就是这些基本信息都给你排版了，下边的企业信息我还没有排版，但是我又说过，我想把这一块给分离一下，我希望它是一个整块，就是我们可以把样子再做一些调整，我应该以加一个卡片。

我们把这个卡片加在。这个网格布局里边儿。这个时候可以发现它的这个基础里边是有一个卡片的。这个基础信息，我们可以把这个名称改一下。我感觉基础这些，然后我可以对它的样式做一些调整。对，这个卡片的样式，我们不让它显示底部。然后我们把分割线的来说。好的，我们先在预览看一下，它这就会有一个卡片式，然后这里是它的基础信息，这个备注因为可能会填得多，所以我们可以把它扩展一下。

我们找到备注的这一个，它是最后一个。我们可以把它的这个列调成12。这样看起来就比较饱满一些，然后下面是企业信息，所以我会如法炮制，我们还需要一个卡片。我们在辖也加一个卡片组件，然后呢，我们把企业信息都放进去，企业信息其实我们也可以用一个网络的布局给它加进来。所以我在这儿也加一个网格布局。我们把企业名称，还有企业地址。给放进来。企业信息。然后一样的，我们把它的底部隐藏了。

因为我们没有笔，不需要展示。所以这样的话，我们相当于把企业信息从这管理起来，然后他还有一些拉黑的一些信息，拉黑的信息按理来说我们只需要展示一些拉黑的详情，我们是不需要展示，呃一些。拉是否拉黑的，所以我们可以在这儿直接给他再加一个卡片。我们把这个是否拉黑。拉黑时间，还有拉黑原因，拉黑操作人都展示出来。好的，现在就是这个样子。然后这个文本我们就改为拉黑信息。我们调整一下它的这个样式，我们也不显示底部。

我们把分割线上来出来，好，这个时候我们预览一下。可以看到我们现在三个都是有块状的，下面有提交和按钮没问题，但是现在可以发现它的这个中间是没有间隔的，这每个卡片之间就我们去调整一下样式，我们把企业信息顶部加上一个16PX的一个。间距，然后我们把拉黑信息也加上一个16的间距，好我们再看一遍，你发现它有个16的间距，就会看起来要松散一些，就不会太紧凑。这个就是我们的编辑页面的一些调整，这个时候我们可以去录入一下数据试试。比如说我们点新增，我们随便输入一条数据。

可以看到这个所属员工现在是需要填的，所以我们需要把这个字段改一下，把它改成选的。那么这里我们先建一个基本数据进来。可以发现这个数据是建成功了的，只是这个所属员工他没有按我们预想去选，因此我们再回来做一下调整，把所属员工这个字段可以看到它是一个单号文本输入，所以它当然是不能选的，这里我们找一下成员选择，也就是人员字段。我们找到这个成员选择字段，我们把它绑定成我们的所属员工。我把之前的删掉，对，现在它就成了一个成员选择了。他叫我。呃，所属员工，那么这时候我们再看一下这个所属员工，点开就是我们选择的用户。

这时候它就是正常的，我们现在再回来测试一下，把哈一这条数据我们点编辑，可以发现它进来的就是一个成员字段的选择，就是我们选择某一条数据，点确定，点提交。他就把这个数据回显到了这个所属员工中的，所以相当于现在的增删改查是正常的。那么接下来我们再继续优化一下这个编辑页面，可以看到这个企业信息默认是打开的，但是即使我的客户类型选择个人，它也是打开的，所以我希望当我选择公司的时候，才需要让我填写企业信息。那么这个时候应该可以怎么做呢？我们可以把企业信息的这个字段，这个呃组件，它的这个条件展示应该是源于什么，是源于客户类型，这个字段的值是多少，那么我们就可以把它变成一个表达式的方式。

它的来源是客户类型这个字段，所以我们看一下客户类型它的code的，像这个，或者我们可以用一种比较看得懂的方式。这个字段它是当前这个表单的数据，所以我们可以拿到当前表单的数据。用包W。第二。凤一。点value就可以获取到当前表单的数据，然后客户类型是类型。就这个对，我们相当于就拿到了客户类型的数据，个人的话，在我们当时配置那个，呃，数据选择的时候，个人是1，公司是2，所以在这里我们去调整它的这个条件，展示为客户类型等于2的时候才展示。

否则的话他就不展示，现在我们预览看一下。默认它是个人的，这条数据打开的时候它是个人的，所以没有展示那个公司信息，就是我们切换到公司发现他可以展示，所以这块逻辑是正常的。而拉黑信息呢，我希望他是在表单外边去做操作的，而不是在表单编辑的时候去做操作，所以我可以直接把这一块，我先把这个是否拉黑给他隐藏掉。然后当前的这个块儿，我希望它也是根据当前表单的是否拉黑这个字段作为判断。所以他的这个数据还是这样的，是否拉黑？如果说是的话，它才会展示，否则的话它不展示，所以默认的话，我可以让它是false，所以当它为处的时候才会展示，这也是符合我们预期，所以默认进来的时候，它是没有是否拉黑和客户公司信息的数据的。

我们当我们切换为公司的时候，他才会有企业信息。啊，这个编辑页面其实就可以了，那我们发现它其实是没有新增页面的，在这里为什么没有新增页面呢？是因为编辑页面它是和新增放在一起的，这里有个表单场景，这个表单场景是怎么预预来的，它本身应该是可以让我们选的，但是我们可以用表达式的方式让他去确认你进来的表单场景是新增还是编辑。这里会看到有个风type的这么一个属性，这个属性是从哪儿来的？它是从页面传进来的，也就说是URL的参数。相当于上个页面会给我们传过来一个phone type的参数，如果说它是create，它就是新增，如果说是edit，它就是编辑，如果说是read，它就是只读，对，它可以通过这种方式来判断你当前表单应该是个什么状态。

因此在这里他就根据这个来确认我当前表单是新增还是编辑。那么同理，我们现在把这个页面的样式做了调整之后，我们现在去看这个详情页，我们要把它也做出调整。所以其实这3个页面新增编辑。查看应该来说是可以共用一个页面的，所以这里我们就把这个编辑给他，把这个详情给它删掉，我们就不用这个详情页面。我们去用这个编辑页面，就是我们的查看也用这个编辑页面。那么在这里可以看到，我们回到列表这里，点击编辑按钮。它的点击事件就是打开页面，也就是刚刚看到这个编辑页面，它的这个传的是I，然后会把当前行的数据ID给传过去。那么现在我们把这个查看也给他，把这个页面改成编辑页面，但是这个参数我们就传成red。

就可以了。在我们保存再预览一下，点击查看也发现它进来的也是这个编辑页面，而且它的字段都只读了，这是正常的，但是下边这个提交和返回按钮是没有制度的，这边我还是可以点提交的，就不符合预期的，所以我们可以在这里给他做一下调整。我们先找到这个表单容器的这个form type是什么，把它复制下来。那我们这个phone type为。只读的时候，这个提交按钮应该是不展示的，所以我们把提交按钮是否可见改为当它的风态。不等于red的时候它才可见，等于的时候它就应该不可见，所以这时候我们再预览看一下，会发现它默认进来是没有的，我们点编辑的时候它是有的，我们点新增的时候它也是有的，当我们点查看的时候它是没有的。

这是符合我们预期的，因此增删改查的基础功能我们应该是算是完善了，接下来我们去做一些信息处理，比如说我们现在要做一个拉黑操作，那我们现在如何去做拉黑操作？我们拉黑操作其实就是把当前这个用户的。拉黑那个状态给改，从否改成是，因此我们可以在这个页面上新建一个全局按钮。我们这个新建按钮呢，它应该叫做批量。浪费。我希望它是一个警告词，它是一个错误。我们用描边的方式。然后我们把位置调整在删除的后边批量拉黑，那么我点击批量拉黑的时候，我需要做什么？我需要把我选中的行数据进行拉黑，而拉黑的时候我不能平白无故的拉黑，我需要填一下拉黑的原因。所以。

我拉黑原因应该在哪儿填呢？我可以在页面弹一个窗出来，里边放一个拉黑原因，需要你填了之后才可以。那么我现在点批量拉黑要做的事情就是先判断当前有没有选中行，如果有选中行我才能弹窗，否则我就不弹窗。我就会给你提示说你没有选中行，那么首先我们先在页面上加一个弹窗。我们现在页面加一个弹窗，我们把这个弹窗放在。这个数据表格的外部。并且我们给他重命名一下，叫做拉黑。原因。南非。因为弹窗默认是打开的，我们可以先对这个弹窗做一下调整，这个标题我们叫做拉黑原因。

然后在这个弹窗内容中呢，我们添加一个文本框。我们添加一个多行输入吧，因为这个内容可能会比较多，这个时候它的这个多行文本框的字段应该叫做拉菲原音。标题内容叫拉黑原因。这个时候就可以了，我们点确定的时候，应该会把这个拉黑原因给保存进去，这时候我们先不用管它，我们先把这个批量拉黑的事情给处理了，批量拉黑这里我们应该希望的是。他点击的时候先去判断当前列表选中行有没有数据，那我们就可以选择一个逻辑分支打开。然后这里可以看到它有一个数据容器TABLE1，它这里就有一个s slide roll, 它这里其实选中的就是嗯，表格选中数据对，所以我们相当于根据它来判断，它的表认识来判断。

我们可以用两个感叹号去确认，把它转成一个布尔值，这个时候如果说它的长度是有的。那么它就是出，如果说它没有的话就是false，那只有有的时候我们才会去更新这个，才会去打开那个弹窗，所以我们在它满足条件的时候去打开弹窗，我们选的是件方法，因为它是我们页面上的一个组件，这个组件对应的就是MODEL1，然后我们选择开窗。然后不满足图条件的时候呢，我们就不能打开弹窗，我们还要给他一个提示我们选择。一个提示，弹窗提示叫做。系统提示。

然后内容就是请选择。需要。拉黑的分数。好的，我们现在不需要取消按钮，我们就关掉，这个时候我们可以来试验一下。我们点击批量拉黑的时候，它就会提示我们需要选择需要拉黑的用户，那如果说我们选择之后点击批量拉黑，他就会帮我们把拉黑弹窗给打开。这个时候我们相当于批量拉黑的事情就已经做完了，我们现在要做的是这个弹窗内部的事情。首先我们这个弹窗。先给它把默认打开状态给关闭，然后呢，这个弹窗里边的内容。完了之后我们才能点这个确认确认按钮，因此这个确认按钮事件应该是什么，就是首先我们需要先判断我们的这个弹窗内容的这个多行文本，也就说是拉黑原因是否填了。

如果说没有填了的话，我也不允许它关闭，那么我现在就需要来控制这个弹窗内容。的这个文本，它叫这个，所以我可以根据Dollar w点儿字段id.w可以拿到它的值。如果它有值才是处，不满足条件的时候呢，我可能也需要打开弹窗提示一下，叫系统提示。请输入。拉黑人。这样可以了，那如果说满足条件的时候，我就需要去调接口，把我选中的数据的是否拉黑阶段给更新了，对，在这里我们先保存一下，我们先不做这个处理，因为我们在操作列，我们也需要一个对应的拉黑按钮。所以我们在这里先把这个拉黑按钮给它加上去。

我们叫他拉菲。然后颜色我们选择错误。那么这个按钮的事件就更简单了，它的事件就是打开弹窗，因为点击它的时候是一定会有数据的，就是当前行的数据，所以我点击拉黑的时候就直接打开弹窗就可以了，所以这个时候我就选择组件方法，选择这个弹窗，然后打开弹窗，如果说我打开弹窗之后，我在弹窗那边是可以拿到选中行的数据去做更新的，但是如果说我点击这个拉黑。那我得告诉那个弹窗，我需要拉黑的是哪条数据。所以在这个info这我相当于是可以把我的数据传给这个弹窗，所以我需要把我当前行的数据在这里给它传给弹窗，那在这里我都可以。选择所在行的数据，把这个所在行的数据传递过去，现在就可保存，现在的意思就是如果说我点批量拉黑，它会打开弹窗，然后我在弹窗里可以根据当前列表选中数据。

获取到我需要更新的一些数据，如果是我点击操作列上的拉黑，我就可以在打开弹窗的时候把操作列我点击的这条数据传过去，那么弹窗就根据我根据它获取到的数据进行拉黑即可。所以在拉黑弹窗这里点击确定。点击确定的时候，现在就开始进行我们的这个满足条件的处理，我们首先需要判断一下我们的这个数据有没有。我们这个叫model一点。这个叫opening for.

Open info这个数据就是当前页面这个弹窗所收到的数据，因为我在批量拉黑的时候没有传，而拉黑的时候是传了，所以我需要在这里去判断。他有没有ID。如果说他有ID的话，就证明我当前是从这个拉黑入口进来的，那如果说是从这个拉黑入口进来的，那我就需要去调用数据源方法去更新。我需要去。客户信息表我需要去更新，也就修改修改单条，因为它的修改单条和修改多条是不一样的，所以在这个时候我应该是修改单条，修改单条的时候我需要去配置一下查询条件，我要修改哪一条数据，我要修改的就是它的ID，也就是。数据标识应该是等于我传进来的那条数据的ID，也就是包W点model model1就是当前这个弹窗这个组件，然后它有一个open info的数据的下划线ID。

通过这种方式，我就可以获取到这个model框所收到的ID数据。那么他们两个做映射就可以知道我要更新的是哪条数据，然后我要更新的字段就是是否拉黑，我要把它从for改为true，然后呢，我需要把拉黑时间改成。All w, 我们提供了一些方法，比如说当前时间。这就是当前时间，我们的时间是以时间戳的方式存储的，所以这里相当于就是通过时间戳的方式，然后拉黑，原因其实就是我们刚刚看到的那个弹窗内部这个组件的数据。弹窗组件的ID叫这个，所以就是它的value。那么拉黑操作人，这里我们就先直接放我们的。

当前用户。我们可以打开一下。可以直接获取当前用户的。Name即可。这是我们当前用户对这样的话，相当于我们更新单条，就直接这样更新就可以了。那么如果说我这个逻辑走不同的时候，我就应该也就是当这个open for没有值的时候，就证明我应该是从批量来黑进来的，那如果说我是从批量拉黑进来的话，我也要需要调用数据源，然后这个时候我是需要去更新多条。

因为这个时候我的更新来源是源于我的这个列表选中项，所以它的这个查询对象呢，也就是还是数据标识，但是数据标识应该就不是等于，而是等于任意一个，我的右右边应该是个数组，是一个呃，数据标识的集合，因此它应该是它的查询条件，就是当数据标识等于任意一个这个集合中的内容即可，那么我现在就需要获取。列表选中的。数据。我们找到这个TABLE1。在这里。这里就是它选中的数据，那么它选中的数据我们需要用麦克的方法返回一下它的ID，因为我们只需要一个ID的集合即可。所以我们用map方法反馈它的ID集合，所以数据标识等于任意一个这个ID集合中的某一个即可算。

符合条件，那么他就会查出来，那这样我们就继续去修改它的数据，每一个我都是把它改为拉黑，然后拉黑时间也是当前时间。然后拉黑，原因也是我们的这个字段。懂班。然后拉黑操作人也是我们。当前用户的内。这样即可。然后没完，当我们更新完数据之后，我们还有一些后置动作需要做。我们需要显示提示，叫做拉黑成功。同时，我们需要把当前弹窗给关闭。

选择这个弹窗关闭。那我们多选的时候一样的，我们也需要把它的。做一个形式提示叫做。批量单飞成功。然后同步，我们也需要把这个弹窗给关闭。好的，所以说我们得保存，我们现在可以试验一下，因为这里我们看不到它的是否拉黑的一个状态，所以我们先把这个列给你展示出来。我们可以添加一个列，叫做。是否拉黑？我们把这个列放在前面去。现在他在这里，OK, 现在我们预览。如果说我直接点这个第一条数据拉黑的话，他会让我写写这个，如果我不写，他会让我请输入拉黑原因，所以我不能不写，那我就现在写了。

点确认。对，他就会帮我把这个改为是为什么我需要手动查询呢？因为我点完拉黑之后，我当前列表没有刷新好的，那这个时候我们回去还需要做一步，也就是当这个确认按钮。成功之后。我们不仅要显示消息提示，显示这个弹窗关闭，我们还需要加一步，就是把这个数据列表。做一个刷新。刷新button。多选的时候也同类，我们需要把这个表格选择刷新。表格查看当前页好保存，我们再预览一下，刚才这一条数据已经改为是的了，所以我们现在查看第2条，我们拉黑。它会自动刷新，然后把这个数据改成刚刚也有弹窗提示说拉黑成功，那现在我们试一下批量，我们先直接点会提示让我们选择需要拉黑的用户，那如果说我我勾选上点需要拉黑，它会弹窗，我点确认，它一样的需要我输入拉黑原因。

我先点一个。选一个拉黑原因。你确认？好的，我们需要去配置一下产品条件。刚刚的那个查询条件应该配置的有问题。啊，这里变成0，应该是刚刚没有保存。所以我们需要。学校的数据标识等于任意一个。Table.选中行收据。妈。我们把这个下划线ID的数据都给导出来，然后当数据标识等于我选中行的。

ID集合中的某一个的时候，他就算查询成功，然后他就会把你查询出来的数据做下边这些处理好的，现在保存上。我们再来试一下这个批量，我们选择这两条数据，然后点批量拉黑。点确定。还有批量拉黑成功，然后我就把这两条数据给拉黑，改为了是。对，所以相当于我们的批量拉黑功能就完成了，现在我们需要把批量拉黑的数据从另外一个页面展示，这个时候来到我们的这个。页面管理部分，我们再直接我们直接把这个客户信息列表给它复制克隆出来一个我们叫做。黑名单。

这黑名单页面就出来了，但是这个黑名单的数据它也是全量的，所以我们需要对这个数据做一个处理，什么处理呢？我们的数据筛应该是是否拉黑为是。OK, 这里展示的就是所有已经被拉黑的用户，那既然展示了，我们就可以把这个是否拉黑这个字段给删除掉。这里展示的就是所有是否拉所有拉黑了的用户，那么我们在这个客户列表这里，我们把它的数据条件也做一下处理。数据筛选，我们把是否拉黑。等于放。好，这里就会展示没有被拉黑的用户。而这边就会展示被拉黑的用户。那么在这一步的时候呢，我们再去把它复制一个页面叫公海池。

公海池里边展示的就是当这个所属员工为空的。所以它的数据筛选应该是是否拉黑等于false，且。所属员工等于空空，这里我们用一个空字不串来。好的，所以现在没有，所以我们就他就没有数据，我们把这里。改成宫。是。黑名单。这里我们改成。此时这些页面我们已经配置的好了，但是黑名单和公海时我们需要再做一下处理。首先我们先去把左侧菜单栏给生成出来，因为我们先配置好了页面，所以在布局设计这边，我们假设我们选择用场次布局。

然后这里我们改一下它的菜单标题叫做SM。呃，图标我们先不做处理，然后在这个里边呢，我们去看一下它的导航信息，这里有个一键生成，我们可以直接点用它，它就会帮我们把这个菜单信息给生成出来。此时我们把这个编辑页面去掉，我们把编辑页面去掉，那么这个时候它这4个就是我们想要的结果。就是说我们可以保存一下，然后回到我们的页面来。看一下我们的信息列表。客户信息列表呢，因为这个页面它是没有绑定我们的这个布局，所以我们给他绑定一下长的布局可以了，我们把这个黑名单也给他绑定一下。

绑定完了之后，你会发现这里都是高亮的，因为它会跟你的页面做一个绑定关系，当你点到这里的时候，它页面就会高亮。我们把首页，因为首页我们还没有编辑，所以我们暂时先不做处理。客户列表，这个时候我们来测试一下客户信息列表，这里我们查询应该是可以的，它只展示了一条数据，黑名单里边有4条数据，因为因为现在我们还不能直接改这个黑名单的数据。我们还不能把那个是否拉黑给改回来，所以我们可以在这里把它再拉拉黑一条。好，这个数据没有了。这里变成了5条数据，就证明那条数据过来了，这边的查询是没有问题了，现在我们在做一些调整，因为拉黑的页面我就不能再拉黑了，我要做的是批量提出，所以我在这里把这个方法改成移出。

为什么我要改这个方法，而不是新加一个呢？因为这两个方法其实是比较相似的，所以我们没有必要去呃修改，就没必要再新建一个方法，他们两个方法其实是相似的，所以我们就改成批量移出，把这里改成一个品牌。然后我们把这个拉黑，把它也改成一个叫移出。这两个方法我们把它也改成品牌色。这两个方法本身的目的就是打开这个弹窗，这个批量一出，它也是打开这个弹窗，顺便也先判断一下有没有选中的项，他们打开的弹窗其实就是这个弹窗，这个弹窗是我们刚复制过来的，我们现在把它的名称改成。一个出盘款。改成移出弹窗之后，他们就会点击这两个按钮的时候，弹开这个弹窗，这个弹窗里边我们要做一些调整，比如说它的弹窗标题叫不叫拉黑，叫做一不远因。

然后弹窗的内容就是我们现在就不叫拉原，也叫移归。那么底部按钮我们点击确认的时候呢，我们会去调研一个接口，首先我们去看你的移出原因有没有填，如果说填了的话，我就会去判断MODEL1的这个opening for有没有值，这个值就是通过我从后边的这个移出点进来的时候有没有传值进来。那如果说它传值进来了，那么我就会修改单条，修改单条的话，这个查询条件就应该是数据标识，等于这个ID，这个查询的条件是没问题的。然后这里我就需要把是否拉黑给关掉。然后拉黑时间，拉黑原因和拉黑操作人这里我都不用填，因为我只需要。把它关掉即可。然后显示弹窗，也就是关闭弹窗，然后这里我需要刷新，然后这个提消息提示就变成了移出成功。

如果说不满足的时候，我们需要修改多条，所以我们在这里还是这个条件，这个条件就是当数据标识等于选中的呃，某一项的ID的时候。要修改多条，然后我们这里也把他的这个是否拉黑给关掉，然后把这个拉黑时间给清空。好的，然后我们要把这个显示消息改为批量移出成果。刷新，然后如果说这整条不满足的时候，我打开弹窗，应该就是请输入移出原因。然后保存即可，这里其实能发现这个移出原因是没有用到的，待会儿我们会把这个移出原因放到我们的记录表里边去做记录，所以暂时我们还没有用到。

我们先可以把它放在这里，点击保存。然后这个时候我们可以看一下移出是否好使，现在客户表里边儿是空的，黑名单里边是有5条数据，我们现在点击移出。然后我们点一下。说一下溢出原因，点击确定好的，他现在就有4条数据了，然后在客户信息表里边儿就会多了这一条数据。而且我们点编辑或者查看的时候，它是没有那个呃，移出原因的黑名单原因的，但是在黑名单里边应该是都能看到这个拉黑信息的，这里我们应该要把它改成只读方式，因为不允许你在这里直接去修改，所以我们可以再回到这个编辑页面去把。拉黑信息。改成只读的。也就是说我们把这个浪费时间。状态改成制度。拉黑原因？状态。

也感制度。这里改成读之后，刚刚那个问题就没有了，现在我们就回到这个列表页。可以看到单其实完成了们可以做，我不单不能让黑名单应该也不能删除。我们就把删除完以后给它删掉，它只能。查看和移出，当你这个黑名单的用户被移出了之后，他才能编辑或者怎么样的，我们这就提供一个移出按钮。我们现在可以把它变成一个填充色。黑名单完成之后呢，我们现在再去看，我们还有什么需要做调整，我们的这个列表，他现在只有批量拉黑，但他没有批量转移，所以他没有跟公海做一个关联，所以现在我们再去跟公海做一个关联。

所以这里我们可能需要加一个批量转移的功能。那么一样的，我们就需要把这个批量拉黑给他复制一下，因为批量拉黑和批量转移都是一样的，我们只需要改一个字段就行，所以我们叫做批量转移。那么批量转移，我们给它改成中性色，加上也是描边的。然后下边的这个弹窗，我们也可以给它复制一份。弹窗复制1分之后呢，我们来调整一下弹窗的内容，包括。嗯嗯。然后我们的这个就不叫多输入了，它应该叫做成员选择，我们要选择他是转移到别人的手下去。所以我们把成员选择填到这里来。

然后点确认的时候，一样的，我们的逻辑分支就改成了，现在我们不是要判断这个文本框，我们现在没有文本框，我们是根据这个成员选择是否有值。来判断，那如果说他有值就继续走，如果没有值的话，我们叫做行个。那如果说我们有值的话，那么我们现在就可以去调动数据源，调用数据源的话，我们分为两种情况，一个是批量转移和一个是后边点的转移，那如果说我点的是批量转移的话，那么我们也是修改单条，然后条件也是一样的，我们只需要把下边的这个结构改一下，把是否拉黑，把之前的都默认重置。我们现在就要把所属员工改成我们这个数据即可。

改成这个就可以了，那么一样的，我们需要把这边的这个数据源。修改多条。也要。把他。我回去。我们把这个搜索员工。你改成这个这样就可以了。然后显示消息，我们改成批量转。咦？好的，剩下的就是关闭弹窗和刷新页面这一块正常，所以我们就保存，现在可以把后边的这个按钮也加上。

你把它放在这个位置，然后给它改成。品牌色。我们现在打开的是弹窗2。然后也是把当前的数据传递过去，这时候应该就已经可以了，我们来试验一下，批量转移它好的第一个文案我们没有调整。我们就去看一下批量转移。这里的选择，需要选择的诱惑。那么这里我们点的批量转移的时候，它会提示我们就是说选择一个，然后点批量转移，它会让我选择。这个弹窗应该弹错了。我们在。处理一下弹框需要改成2。

我们现在把这个。嗯。看一下它的弹窗什么好的不没问题。可以了，他这儿需要让我们选择转移人，我们现在换成另外一个人点确定。可以看到它这里又改了，比如说点这个转移去把它再改回来。哎，它也是正常改的，且能刷新，对，所以相当于我们就通过了一个很快速的方式去解决了这个问题。那么在公海池这边，我们也可以同理加上这么一个批量转移功能，在黑名单这我们就不用操作操作了。这个时候我们的页面相当于就整体完成了，剩下就是一个首页的开发。这节课主要我们完成了信息表，还有黑名单，还有公海池这三个页面的开发，下一节我们将主要针对首页的仪表盘做一个开发。