需求描述

uniapp微信小程序项目开发时，需要添加数据，
1.数据分为两类，一类是从接口添加，一类是从本地添加，
2.本地添加后，点击保存将本地添加的数据提交。
3.两类数据都支持删除，本地的删除直接从数组中移除即可，接口数据需要确认框确认后，触发接口删除。
4.添加数据时，需要对两组数据进行重复校验，如果已添加就不允许再次添加了。
代码记录一下。以便于后期可能会遇到类似的需求，节省时间。

使用

实现代码

<template>
    <view class="carList">
        <getPopDriver :FleetId="FleetId" @getdata="getlist" title="选择驾驶员">
            <div class="caradd">
                <image src="
/buildingMaterialsCloud/car/icon_add.png" mode="">
                </image><text>添加驾驶员</text>
            </div>
        </getPopDriver>
        <div class="carList2">
            <div class="carList2Item" v-for="(item,index) in list" :key="index">
                <div class="carList2Iteml">{{item.RealName}}</div>
                <div class="carList2Itemr" @click="deleteInfoConfirm(item)">
                    <image src="
/buildingMaterialsCloud/car/icon_delete.png" mode="">
                </div>
            </div>
            <div class="carList2Item" v-for="(item,index) in list2" :key="index">
                <div class="carList2Iteml">{{item.RealName}}</div>
                <div class="carList2Itemr" @click="deleteInfoConfirm2(index)">
                    <image src="
/buildingMaterialsCloud/car/icon_delete.png" mode="">
                </div>
            </div>
        </div>
        <showToast ref="showToast"></showToast>
    </view>
</template>

<script>
    import {
        CarMainerGetFleetDrivers,
        CarMainerAddFleetDriver,
        CarMainerReMoveFleetDriver
    } from '@/config/api.js'
    import getPopDriver from '@/components/getPopType/getPopDriver.vue'
    export default {
        components: {
            getPopDriver
        },
        data() {
            return {
                titleStyle: {
                    color: '#FFFFFF',
                    fontSize: '34rpx'
                },
                data: {
                    BelongId: '',
                    FleetId: '',
                },
                list: [],
                list2: []
            }
        },
        props: {
            FleetId: {
                type: String | Number,
                default () {
                    return ''
                }
            }
        },
        mounted() {
            var that = this;
            that.data.BelongId = JSON.parse(uni.getStorageSync('userData')).BelongId
            that.getdata()
        },
        watch: {
            FleetId() {
                this.getdata()
            },
        },
        methods: {
            deleteInfoConfirm2(index) {
                var that = this;
                that.list2.splice(index, 1)
            },
            getdata() {
                var that = this;
                CarMainerGetFleetDrivers({
                    params: {
                        BelongId: that.data.BelongId,
                        FleetId: that.FleetId,
                    },
                    custom: {
                        auth: true
                    }
                }).then(res => {
                    if (res.Code == 200) {
                        that.list = res.Data
                    }
                }).catch(err => {

                })
            },
            getlist(item) {
                var isHas = false
                // 判断已添加的车辆是否已添加
                this.list.forEach((type) => {
                    if (item.RealName == type.RealName) {
                        isHas = true
                    }
                });

                // 判断预添加车辆是否存在
                this.list2.forEach((type) => {
                    if (item.RealName == type.RealName) {
                        isHas = true
                    }
                });
                if (!isHas) {
                    this.list2.push(item)
                }
            },
            getIds() {
                var Ids = []
                this.list2.forEach((type) => {
                    Ids.push(type.Id)
                });
                if (Ids.length > 0) {
                    this.getadd(Ids)
                }
            },
            // 添加车队司机
            getadd(Ids) {
                var that = this;
                CarMainerAddFleetDriver({
                    FleetId: this.FleetId,
                    DriverIds: Ids
                }, {
                    custom: {
                        auth: true
                    }
                }).then(res => {
                    if (res.Code == 200) {
                        // that.list = res.Data
                        // that.getdata()
                    }
                }).catch(err => {

                })
            },
            // 删除车辆
            deleteInfo(item) {
                var that = this;
                CarMainerReMoveFleetDriver({
                    FleetId: that.FleetId,
                    DriverIds: [item.Id]
                }, {
                    custom: {
                        auth: true
                    }
                }).then(res => {
                    if (res.Code == 200) {
                        that.$emit('getdata', 0)
                        that.getdata()
                        this.$refs['showToast'].success('删除成功');
                    }
                }).catch(err => {

                })
            },
            deleteInfoConfirm(item) {
                var that = this;
                uni.showModal({
                    title: '提示',
                    confirmText: '删除',
                    cancelText: '取消',
                    content: '确定要删除吗?',
                    success: function(res) {
                        if (res.confirm) {
                            console.log('用户点击确定');
                            that.deleteInfo(item)
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            },
        }
    }
</script>

<style scoped lang="scss">
    .caradd {
        width: 694rpx;
        height: 88rpx;
        background: rgba(#EBF0FA, 1);
        border-radius: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: flex-start;
        margin: 28rpx auto;

        image {
            width: 30rpx;
            height: 30rpx;
            margin-right: 12rpx;
        }

        text {
            font-size: 30rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #006AFF;
        }
    }

    .carList2 {
        .carList2Item {
            width: 694rpx;
            height: 112rpx;
            background: #FFFFFF;
            border-radius: 20rpx;
            margin: 0 auto;
            margin-bottom: 20rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: nowrap;
            flex-direction: row;
            align-content: flex-start;

            .carList2Iteml {
                font-size: 32rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #151852;
                margin-left: 32rpx;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: nowrap;
                flex-direction: row;
                align-content: flex-start;
            }

            .carList2Itemr {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                flex-wrap: nowrap;
                flex-direction: row;
                align-content: flex-start;

                image {
                    width: 36rpx;
                    height: 36rpx;
                    margin-right: 46rpx;
                }
            }
        }
    }
</style>