00:00
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去完成po管理模块的静态。那咱们呢,看一下呢,已经完成的这个项目。那首先说po管理模块,它也是分为上下部分的。分别呢,用两个EL-cut。那所以说啊,回到咱们的自己的代码当中,找到po管理模块。那咱们呢,就一点点的去完成它相应的静态。那首先说啊,它的上方与下方呢,分别是两个EL-K。对吧。那顶上有一个,以及底下这里呢,还有一个EL-cut。那咱们呢,给它格式化一下。那以及啊,咱们呢,先回到这儿啊,先看一下咱们自己的这个对吧,哎,上下两个EL杠卡。但是呢,要注意就是这个卡的之间啊,是有外边距的。
01:03
那所以说啊,给咱们的第一个ER-cut呀,给他写一个style吧。那么咱给他来一个marin,那么上下老师给他来一个20像素左右呢零。那咱们呢,看一下它相应的结构刷新看一下对吧,这是没问题的。那首先说啊,顶上这里有一个什么呀,是不是一个三级联动。而三级联动啊,咱们呢,已经注册为一个全局组件了。所以说啊,咱们呢,可以直接拿过来就用了。而咱们这个三级联动啊,在咱们的平台属性这里啊,曾经用过。那所以说啊,找到咱们曾经写的那个ADR平台属性这里,那么咱们呢,曾经啊在这里用过三级联动。对吧,而且呢,咱们呢,还把它注册为一个全局组件。
02:01
那所以说在顶上这个EL杠看在这啊,那咱呢先给他来一个对不,那这一块呢,老师呢,先给你做一下笔记。这块呢,千万别忘记了,咱们的这个category select已经注册为全局组件了。比如说三级联动。哎,三级联动,那么已经是全局组建了,所以说呢,咱们呢可以直接使用。而且还要注意啊,咱当年的这个三级联动啊,给他绑定了一个自定义事件。那么这个自定义事件的作用是什么类的?还记不记得?就是当咱们选择一级分类,那么会把子组件相应的一级分类的ID是不是传给父组件,以及还有二级分类的ID,以及三级分类的ID?那所以说啊,咱们呢,要给这个自定义事件写上相应的回调。那这里面呢,那咱们得去写咱们的method。
03:03
对吧,哎,Me斜一下。Met hod。写一下methods methods。那咱们呢,得有相应的自己的这个方法。那这块呢,咱们呢做一下笔记,那这个是什么。这个是三级联动,哎,三级联动。三级。联动的自定义事件,那么可以把子组件的相应的ID是不是传递给我们的副组件?对吧。而且呢,还要注意一件事啊,咱们当年的这个三级联动的这个自定义事件啊,当他触发的时候啊,咱们可以找一下这个组件。那么可以给副组件啊回传数据,回传的数据分别是什么来呢?是不是有个叫做category ID和level level,为了是区分一级分类还是二级分类还是三级分类的ID,而categorre ID那分别是一级、二级、三级的ID。
04:10
那所以说啊,咱们在这里啊,可以进行相应的结构,叫做cat和。对吧,ID以及还有一个叫做level字段。那这块呢,老师呢,也做一下笔记,这两个行参的作用是什么?那首先说category ID是获取相应的一级二级三级分类的ID。对吧,啊,就说可以获取到一级。一还有二还有三对吧,还有这个三级,哎,分类的。ID,那以及啊level level是为了什么呢?为了区分是几级ID?对吧。那所以说啊,咱们这里面呢,可以进行相应的判断对吧,比如说如果你的level等于一,那一定是一级ID。
05:02
那将来啊,你这个副组件是要接收这个相应的一级二级三级ID的,为什么呢?因为三级ID有了之后,要拿着这三个参数去获取相应的po的列表进行展示。那所以说啊,咱们写一下子,那就是this.categ GR e ID等于什么?是不是等于category ID?但是也别忘记了啊,但是也别忘记了要清除二级和三级分类的ID,对吧,清除二和三级分类的ID。那就是z.CAT2AD。给置为空,那以及还有cat格为3D,那也置,为什么?是不是也置为空?那当然目前咱们这个副组件是没有这个CATEGORY123这个ID的。那所以说咱们在data这里啊,咱们呢,给他声明一下。那这块呢,咱们呢,得腾回来一个对象。
06:02
那这块呢,分别是哎,分别是呃,分类的ID对吧,那一个叫做cat green。EID,那起始值呢为空,那以及还有CATEGORY2ID起始值为空,那以及还有CATEGORY3ID起始值啊,也为空。对吧,那当然这块呢,还有其他的情况,Else。那如果你的level等于几啊,等于二,那你要存储相应的二级分类的ID。对吧,咱们呢,稍微格式化一下,让它好看一点,对吧,那这块呢,就可以写什么this category。切换一下啊。这点写下catjy啊,CATEGORY2ID等于什么?是不是等于咱们相应的category ID啊?对吧,没有提示了,那这样老师呢,重新进来一下。对吧,给它擦掉一下,重跑一下。
07:02
这个没有提示,还是比较恶心的啊。那所以说啊,咱们的这块呢,还得接着来,对吧,CATEGORY2ID等于什么,是不是等于咱们的category ID。对吧,Cat。那以及啊,也别忘记清除三级ID。那就是这点,CATEGORY3AD等于空。而且呢,还要注意一件事,什么事,当三级ID有的情况下,你看啊,当三级ID有的情况下,是不是要发请求了。对不,那还是同样的套路,Else。那就是这点,CATEGORY3AD等于category ID。Cat jury y category ID以及要干什么?是不是要获取咱们的PU类的列表?数据。是不是进行展示?那所以说啊,咱们将来啊,在这呢,你可以写一个方法,比如说叫做z.get PU list方法。
08:06
对不,那当然咱们目前而言是没有这个方法的,那所以说你在这儿,那咱们呢,还要定义一个。那咱们呢,在这儿呢,给他留一个,那这个是什么是获取啊写一下。获取PU列表数据的方法,那咱呢,搁这儿定义一下,那当然咱们现在不涉及到发请求。因为现在啊,咱们只需要把静态给他完成。那以及也别忘记了,是不是要给这个三级分类传入一个兽的属性,控制着select它的可操作性,对不?那咱们默认的先给他来一个,比如说咱们叫受。那这个属性干什么,是控制,哎,控制三级联动的这个可操作性对吧,咱们默认的先给他来个处。对吧,哎,那咱们先看一下子是触和false,咱们测试一下不就行了吗?对吧,来一个非非常非受对吧,那咱们呢,可以看一下咱们的这个则应该是咱们的po管理。
09:12
对吧,这不就OK了吗?啊,那咱们呢,去看一下数据,看一下咱们的这个组件数据,那这回找的是谁,找的是咱们相应的po模块对吧?啊po模块那咱们呢,找一下子。来刷新看一下,那咱们呢,找一下咱们相应的SPU模块。走啊,看这吧。这这的数据其实当选中的时候,如果有了,其实附子这就应该OK了,对吧,这是没问题的啊,这是没问题的。好,那之后啊,咱们呢,还要搞接着搞搞什么,是不是搞底下的这个静态结构。那么底下的这个静态结构啊,相比而言呢,挺简单的,但是你要注意啊,底下这一部分将来是有几部分切换的,这块要注意。
10:02
这块要注意就是底部,哎,底部这里,那么将来是有三部分进行切换。当然咱们其余两部分呢,先不用管什么添加SPU啊,呃,什么修改SPU还是添加SKU这几个先不用管,先把这的静态结构先给它搭好。对吧,但是你得知道将来是有三部分进行切换。所以说啊,咱们呢,先给他来个div。对不?那将来咱以按照以前套路,是不是有三个div进行切换,谁显示谁隐藏,对不?那咱先来一个。那这块呢,咱们看一下吧,那这块呢是展示咱们的写下,那这里呢是展示。SPU。列表的结构。I结构。那咱们呢,一点点来,那首先说啊,咱们看一下这啊,看这看人家这个是不是有一个按钮。对不,而且还带icon图标上加号叫添加po,咱来呗,那就是EL-button。
11:05
那么它呢,是有icon的,Icon的应该为EL杠,Icon-plus。而且它是有文字的,叫做添加P。那咱们呢,回首回到咱这里去看一下,是不是就这样的一个意思。对吧,那以及啊,底下这里看底下这底下这呢是有一个table是有四列。对不,那所以说咱们呢可以搞对吧,那就是谁EL-C。那虽然说咱们现在没数据,那这个data你先给他干掉。对不啊,这个咱给他提一下子背的是没有对吧,那当然它是有几列啊,它是有四列。那目前而言啊,咱们这呢,只有一列对吧,那咱再复制三份,CTRLCCTRLV,第二列,第三列第四列。对不,那剩下的活咱慢慢的去干。
12:00
那首先说对于这个table啊,它是有表是有那个边框的,所以说啊,咱们也给它加一个boer。对吧,而且呢,看一下子咱们第一列的标题叫啥叫做序号。对不,而咱这玩意叫label,所以这玩意得改,改成谁改成序号。对不哎叫做序号,而且呢,序号呢,它需要加上这个proper属性就不需要了,把type为什么是不为index。那以及它的文字应该是居中的,叫a Li,对吧?A Li alone,为什么呀,为center。对吧,那以及第二个。啊,以及它的宽度啊,咱给它来一个80对吧,让它小一点。80。那一节啊,咱们看一下第二列叫什么,看一下到第二列呢,叫做PU名称和PU描述,那这是咱们呢,也改一下子。叫做PU的名称。
13:01
对吧,以及还有这叫PU的描述PU。描述,那以及底下这儿呢,还有一个叫操作。操作对吧。那咱们呢,先看一下咱们的这个这个结构是没有问题的,而且呢,还要注意啊,你看啊。你看对于操作这里呢,它呢是需要四个按钮的。而这四个按钮啊,是带提示的,所以说将来啊,咱们要封装为一个hint button在这里使用hi button在咱们的组件通信的时候,老师讲过,就是讲到了at tr,那那阵的时候是不是用过,对吧,那咱们呢,先给他写上吧,先给这个四个按钮先给它搞上。对吧,那咱们呢,一个一个去搞一下子,那这那将来啊,咱们需要作用于插槽。给他传结构,那当然,那这里你得搞成啥,是不是搞成咱们的肉还有谁呀,Dollar in desk。Ind。
14:00
Ex。哎,那这里呢,要注意啊,咱们先不封装hi的button,咱们先用EL button替代对吧,到时候换为hi button就行了,稍微封装一下。那这块呢,咱来呗,那分别是谁?分别是四个按钮,那就是四个EL杠谁啊。杠八对吧,啊,当然它这个没有提示了,没有提示老师呢,给它重启一下。重新给他拽进来一下。这个Vs code有的时候会出现这种问题。呃,咱们呢,看一下它呢,是有四个按钮的,那分别是EL杠,But,诶还是没有提示是吧,那这个呢,老师呢,给它叉掉一下,叉掉一下,这也给它叉掉。刷新一下。再给他拽掉。OK,那这回呢,咱们呢,回首再看一下,应该有提示了。对吧,那这个咱看一下应该是谁,是咱们的EL杠八塔EL对吧,哎,杠八。之后呢,咱们看一下子吧,它是什么颜色的,它是这种绿了吧唧的,那咱们看应该是是这个成功。
15:04
成功应该是谁是赛,那咱就给他来一个呗,那这块改成谁。Sus,那以及啊,你看它呢,是有icon图标的,Icon图标是加号这个简单。对吧,Icon,那为什么为EL-I杠。Plus对吧,以及大小个头啊size为什么为。对不,那当然,咱们现在没有数据是看不见咱们这个button。这样懂吧,那咱们先给他写上对吧,那这个除了有一个,还有几个呢?还有三复制一下234,那咱们呢,剩下的就一个一个去改。那首先说啊,它还有什么呢?咱们看一下它的结构。看下它的结构,还有一个是呃,这种橙色对吧,它应该是警告,警告谁是warning。对吧,哎叫warning,而且呢它呢是有一个icon图标小箭头。
16:02
对吧,那不修改吗?那所以说这个呢,咱给它改成warning。啊,那以及这块呢,应该是修改E。对不,那以及再往底下看,它这块呢,还有个颜色就是灰了吧唧的释然的是音符。这呢,咱也给它改一下叫做ino,以及啊,它有一个icon图标,你看它的icon图标是不是像有个小I似的,对吧,其实他用的是谁用的就是音O。对不,那以及最后一个还有个山竹,山竹就是丁嘛。DAJ,那以及这块呢,用的是delay。对吧,哎,这个咱们先给它放在这儿,如果将来有出现单词错误的时候,咱们再回手修改吧,但是至少说你得知道一件事,什么事就是这里的按钮,这里的按钮。将来。哎,用用咱们曾经封装的那个叫hint button。替换。对吧,那咱们呢,先给它放在这儿占个位。
17:02
那咱们再看以及底下呢,还有一个什么,以及底下这里啊,你看是不是还有个扉页。那这个扉页就简单了,扉页咱们用了很多次,甚至咱们自己曾经也封装过。对不,那这块呢,老师呢,给他搞一个,呃,应该是在table的底下,就是EL杠。对吧,这个又没提示了,这个老师给他关一下啊。看这啊,就是在最底下这啊咱们的还有一个啥,是不是还有一个非热器,非热器,其实咱们熟悉就是谁EL-p nation嘛,对吧,哎PG nation。对不,那当然啊,这里面呢,有一些数据咱们还没有呢。对吧,你看比如说这个回调对吧,这个是点击某一个页的时候会出发,这是某一页展示多少条数据时候会出发,对吧,那当然咱们现在只关心什么,只关心静态这两个回调呢,咱们呢,先给它放在这,先给它注释上。
18:00
等需要的时候,咱们再给它打开再拿过来对吧,那咱们这呢,你看啊,当前是第几页,随便来个数字,先写死的六。对不,以及S可以发生变化的值分别多少?那咱来个三。来个五。对吧,再来个十随便来的。那以及每一页多少条数据呢?老师给他来三个。对吧,那以及总共多少条数据,老师给他来一个20层。那以及咱们看一下咱们的这个啊,你要注意这个飞行器应该是居中的。居中呢,很简单,就是给它加一个style。Style之后呢?呃,A test-a Li,为什么呀?为center就行了。对吧,那咱们先看看有没有居中,是不是居中了,而且呢,还要注意一件事,什么事,Total是在最右面。配置size是紧随其后,所以说呢,它应该是total在最右面size。
19:00
来一个罗size。对吧,别忘记这个小操作是不是放在右面,就size和谁和total。对不把这个结构呢,也稍微给他调一下子,那这样咱们的静态不就搞定了,对吧,那这回呢,咱们看一下那相应的静态是不是就搞定了。对吧,那这里呢,老师呢,要强调一下,因为咱们操作这里啊,因为目前这个table是没有数据的,所以说没办法获取到展示出那四个按钮,等到等到咱们获取到数据的时候,这里面可以看到那四个按钮,而且将来哪怕说那四个按钮单词出现错误了,你到时候可以修改,对吧,但是咱们把基本的结构给它搭建完成。
我来说两句