FBA项目模块完结感想

喜欢ヅ旅行 2021-09-02 10:51 261阅读 0赞

FBA项目模块整理：

> 首先，整个模块开发过程中，与后端的沟通不够及时，对于不同的权限显示不同的按钮这一点，前端我做了判断已经写死了，同样的后端也做了判断会根据不同的权限返回按钮的名字或是否显示的Boolean值  
> 这一点没有提前沟通好 导致重复作用 是一点弊端

可以借鉴louis的代码![加粗样式][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doMjAxNDEyMTI_size_16_color_FFFFFF_t_70_pic_center]  
\*\*  
css

<el-table-column align="center" width="200px" label="操作">
              <template slot-scope="scope">
                
                <el-dropdown
                  v-if="scope.row.button_list.length > 1"
                  split-button
                  size="mini"
                  @command="commandClick($event, scope.row)"
                  @click="getbuttontype(scope.row.button_list, scope.row)"
                >
                  
                  <span v-if="scope.row.button_list[0]">{ { 
                    scope.row.button_list[0].name
                  }}</span>
                  
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-show="index > 0"
                      v-for="(item, index) in scope.row.button_list"
                      :key="index"
                      :command="item.ename"
                      >{ {  item.name }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
    
                <el-button
                  style="width: 125px"
                  size="mini"
                  @click="getbuttontype(scope.row.button_list, scope.row)"
                  v-if="scope.row.button_list.length == 1"
                  >{ {  scope.row.button_list[0].name }}</el-button
                >
              </template>
            </el-table-column>

返回的数据格式

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doMjAxNDEyMTI_size_16_color_FFFFFF_t_70_pic_center 1]  
commandClick点击函数

// 点击下拉按钮
        commandClick(command, row) { 
          console.log(row);
          console.log(command, row);
    
          if (command == "delete") { 
            //删除
            this.apipurchasedelete(row);
          } else if (command == "save") { 
            //编辑
            this.editrow(row);
          } else if (command == "audit") { 
            //提交审核
            this.apiaudit(row);
          } else if (command == "detail") { 
            this.goprocessdetails(row);
          }
        },

> 其次，开发过程中出现了逻辑不清楚 需求交叉的情况  
> 比如 在配货区的地方 上传文件的地方 显示可用的css状态 （即当前模块的颜色 是白色还是灰色） 与可点击的状态不统一  
> 即 可点击的状态下 是灰色的 或者不可点击的状态下是白色的  
> css样式与js逻辑不匹配的问题

以后开发的地方，在逻辑方面希望更严谨而且符合实际逻辑 统一状态的使用模式 否则逻辑错误 体验感不好而且给开发增加了很多的代码冲突

> 再者 在开发过程中 出现两个不同状态的功能 使用同一个按钮保存信息的功能  
> 但是两个保存信息的功能 状态并不一致 在不同的状态下可用状态不一致  
> 比如 配货区的待发货状态下提价信息 分为两个信息填写模式 一个是物流信息 一个是实际发仓量  
> 在不同的状态下 两个功能可以分开使用 但是都使用同一个按钮提交  
> 物流信息作为一个衡量状态的功能按钮 和 实际发仓量按钮 作为同一个按钮会产生很多矛盾  
> 且需要的数据结构复杂 这种涉及两个功能的需求建议使用两个按钮 分开控制 且接口分为两个方便控制数据模式和数据填写 便于数据回显和修改

以后开发希望功能分工明确 不产生互相冲突的功能需求和逻辑

关于css样式的统一问题

> 关于css样式 因为是三个组开发 所以css样式有时候会不一致  
> 下次再开项目钱要先定好css样式 否则后期全局修改的时候会很麻烦  
> 需要统一的地方包括 字体大小 icon图标 按钮大小 表格样式 弹框样式等问题需要统一

关于权限问题的统一

> 这里说一点非常重要事情就是，关于项目权限的问题，包括按钮权限，模块权限，职位权限，菜单权限等  
> 在项目开发前期，关于权限的问题一定要跟所有开发人员讲清楚 涉及到的操作权限和显示权限 需要合理的清晰的展现出来 否则在开发的过程中一定会出现逻辑冲突和代码碰撞  
> 新增的权限部分 也许跟部分开发人员无直接关联 但是还是要通知所有开发人员 防止模块链接的时候出现权限冲突和权限无法使用的问题  
> 按钮权限 当前项目涉及到按钮权限 可以在菜单权限中添加按钮 设定按钮的功能 由后端返回给前端 在页面上使用 但是开始的时候并没有了解到这一点所以 每个组的按钮权限设置的不一样  
> 目前,FBA模块并没有与菜单权限的按钮所链接 在菜单按钮设置的按钮权限不会在FBA使用  
> 所以涉及到权限的问题，一些公用的方法要经过所有开发人员的讨论和开会以后再确定 否则会出现这些问题

开发中遇到的难点总结：

*  第一，关于图片的下载问题，图片下载会产生跨域问题 无法正常下载图片 需要进行跨域访问下载图片 先生成canvas 然后将图片转换成base64格式的文件 通过a标签的download下载功能下来
 *  第二，开发中会有PDF下载的功能，vue层面PDF下载都是预览的模式没有直接下载的方法，需要寻找下载PDF的方法
 *  第三，开发中会有函数嵌套 弹框嵌套的问题 需要捋清楚逻辑流程 做好代码的回调和退出程序问题
 *  第四，开发中遇见路由跳转与tab导航不相同的情况，用全局变量挂载 ，挂载在vuex中之后继续挂载在本地，方便使用而且能够解决vue刷新数据消失的问题
 *  第五，textarea的数据转换和回显问题 只要记住\\n\\r或者\\n是textarea的换行符 使用split（）函数和 replace（）函数替换即可实现数据传递给后端和数据回显在Html页面的问题
 *  第六，在页面不使用form表单 单独使用input的时候，input框只允许输入数字，可以使用oninput方法  
    在别的博客中有写  
    @keyup.native=“scope.row.autcal\_num = oninput(scope.row.autcal\_num)”
 *  第七，函数嵌套的时候，可以使用return跳出当前子涵数，可以设置全局变量，控制函数调用进程
 *  第八，父子组件的传值问题，传递的值无法获取到，需要在watch函数里面监听父函数传递过来的数据  
    然后，一旦数据发生改变传递给子函数即可
 *  第九，嵌套表格的使用，嵌套表格的数据格式 在表格中遍历数组的使用，浩瀚有单独封装一个表格函数，在当前项目里，可以去查看使用方法
 *  第十，如果使用v-if的方式实现tab导航，不使用路由的方式的情况下，子页面则无法使用路由的方式跳转，转成弹框的方式展现即可

目前为止，暂时记录这么多 去看图片空间的逻辑及原型图了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doMjAxNDEyMTI_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/e5a16fe21b9048b880c0d754d34235a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doMjAxNDEyMTI_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/0c7547a3d5134758b25c495e4535090e.png