加入新公司第一个项目的问题总结

这是我加入新公司的第一个项目，虽然项目接近尾声，但编写项目的时候遇到了不少问题，在此记录下来，让自己及时回顾，避免再犯。也希望给遇到类似需求的你一些启发：

总结一：项目中有8个流程节点，也就是8个审批流程，8个流程分别由8个组件组成。而流程个数的显示由后端返回的status字段的数字决定。

实现：我在这里运用动态组件实现的，首先我们在vuex里面新建一个js文件：

export const authData = [
    {
        componentName: 'AbnormalCommit', // 异常提交
        status: 1,
    }, {
        componentName: 'OrderTaking', // 处理人接单/转交 
        status: 2,
    }, {
        componentName: 'CoSubmission',  // 协办提交
        status: 3,
    }, {
        componentName: 'ExceptionHandling', // 异常处理
        status: 4,
    }, {
        componentName: 'AbnormalRecombination', // 异常复核
        status: 5,
    }, {
        componentName: 'RewardAndPunishment', // 奖惩处罚
        status: 6,
    }, {
        componentName: 'PartyReview', // 当事人检讨
        status: 7,
    }, {
        componentName: 'ManagerApproval', // 总经理审批
        status: 8,
    },
]

这个文件的作用是将其与后端返回的含有流程字段做匹配再配合动态路由渲染相应的流程组件；

// 利用计算属性计算出要显示的组件名称
isComponent(){
    let componentArr =[]
    if(this.$store.state.abnormal?.newAbnormalObj?.statusList) {
        this.$store.state.abnormal?.newAbnormalObj?.statusList.forEach(item => {
            if (this.$store.state.auth.authData[item - 1]) {
                componentArr.push(this.$store.state.auth.authData[item - 1]?.componentName)
            }
        })
    }
    return componentArr
},

//通过v-for遍历计算属性返回的包含组件名称的数组，动态显示对应的组件，项目的一个需求是从一区域点击进入后，最后一个流程处于编辑状态，所以在component里面给每个子组件传递了isLastAndIsException属性用来控制组件的编辑状态。
<div v-for="(item, i) in isComponent">
    <transition name="el-fade-in-linear">
        <component
            :is="item" :key="i"
            :ref="item" 
            :isLastAndIsException="i == (isComponent.length - 1)">
        </component>
    </transition>
</div>

那如何获取每个组件提交的数据呢？方式有很多，我这里是在每个子组件里面我会定义一个需要传递参数的方法getForm()。然后在包含子组件的父组件中我们通过这样的方式获取每个组件的待提交数据：

const params = this.$refs[this.$store.state.auth.authData[status].componentName][0].getForm()

当然，前提是要给component里面添加ref属性。

总结二：项目的移动端和电脑端该如何区分

这个项目中，我是通过window.navigator.userAgent.includes('Windows')对用户使用的项目设备进行判断，然后配合if..else..进行对应的路由渲染。因为项目里界面涉及到的表单表格较多刚开始想通过media进行实现，但是因为电脑端用的是elementUi组件库，所以对移动端的支持不友好。所以采用了目前的方案。

总结三：该项目的实现过程，让我对数组一些方法的使用不熟悉。导致不熟练将接口返回的数据进行二次加工。接下来，我将总结下数组的一些主要用法，以及列举项目中一些典型的用处。

// 改变原有数组的
a.push()：将数据添加到数组末尾，会改变原数组，返回值为这个数组的长度
    const arr = [1,2,34,6]
    const arrReturnData = arr.push(6)
    console.log(arr, arrReturnData)   [1,2,34,6] 5
    
b.splice()：截取数组 
    语法一：数组.splice(开始索引， 多少个)
           返回一个截取数据新数组
           const arr = [1,2,3,4,6]
           const arrRd = arr.splice(0, 1)
           console.log(arr, arrRd) [2, 3, 4, 6], [1]
           
    语法二：数组.splice(开始索引，多少个，你要插入的数据)
           作用：删除并插入数据
           返回一个所截取值的数据
           const arr = [1,2,3,4,6]
           const arrRd = arr.splice(0, 1, 9)
           console.log(arr, arrRd)  [9, 2, 3, 4, 6], [1]

// 不改变原有数组的
a.concat() 合并数组
    语法：数组.concat(数据)
    const arr = [1,2,3,4,6]
    const arr2= [43,32,67]
    console.log(arr.concat(arr2))  [1,2,3,4,6,43,32,67]

b.indexOf() 从左侧开始检查数据是否含有被查询的值,若不包含则返回-1
    const arr = [1,2,4,5,2,4]
    console.log(arr.indexOf(9))  => -1

// 下面是ES6提供的方法，用的很多，特别是map，在重构数据方面特别好用
a.forEach() 用来遍历数组
    参数：
        1.item：数组的每一项
        2.index：数组的索引
        3.arr：原数组
       
b.map()用来映射数组 （不改变原有数组，会返回一个新数组）
    语法：数组.map(fn(item, index, arr)) {})
    参数：
        item：数组对应的每一项
        index：数组每一项对应的索引
        arr：原来数组
    const arr = [4,3,42,4,42,4,2]
    const arrNew = arr.map( (item, index) => item * 4)
    console.log(arrNew, 99)
    
    这里有个项目中遇到的卡住了我的需求：
    后端返回给我的数据是：
        "punishDetails": [
                {
                    "field6Name": "解/降职",
                    "uId": 101,
                    "field1": 13,
                    "id": 4,
                    "field8": 0,
                    "field3": [
                        {
                            "uNamePy": "chajunxuan",
                            "id": 101,
                        }
                    ],
                    "field2": 4,
                    "field5": "0",
                    "field4": "11"
                }
            ],

        提交需要这样的格式：
        "punishDetails": [
            {
                "field3": [
                   137
                ],
                "field4": "奖罚内容",
                "field6": "6",
                "field7": "10"
            }
        ]
   而我要做的是将每个对象里面的field3的id取出来。其实一行代码就能搞定：
   punishDetails.map(item => {
       item.field3 = item.field3[0].id
   })
   
c.filter: 过滤数组，不影响原数组
    语法：数组.filter(function(item, index, arr) {})
    参数：和上面的一样
    返回：返回筛选后的新数组，若没筛选，则返回空数组
    const arr = [1,2,34,54,3]
    const arr2= arr.filter(item => item> 2)
    console.log(arr, arr2) // [1, 2, 34, 54, 3], [34, 54, 3]

d.find：获取数组中满足条件的第一个数据，不影响原数组
    语法：数组.find(function (item, index, arr) {})
    返回：有就返回一个新的数组，无则返回 undefined
    
    const arr = [
            {
                "field3": [
                   137
                ],
                "field4": "奖罚内容",
                "field6": "6",
                "field7": "10"
            },
            {
                "field3": [
                   137
                ],
                "field4": "奖罚内容",
                "field6": "6",
                "field7": "190"
            }
        ]
    const arr2 = arr.find(item => item.field7 == 100)
    console.log(arr2) undefined
    
    这个方法可以应用在表格中点击某一行删除按钮，删除这一行数据的需求。

以上这些是我项目用到较多的数组方法，其实还有很多，比如some/every/reduce等等。

结束。。。