xiamen-sb-uniapp/pages/oiling/batch-oiling-select.vue

<template>
    <view>
        <my-add-button @handleClick="handleClick" />
        <u-popup v-model="popupShow" mode="bottom">
            <u-button type="primary" @click="addChange(2)" style="padding-left: 20rpx;padding-right: 20rpx;">批量复制</u-button>
            <u-button type="primary" @click="addChange(0)" style="padding-left: 20rpx;padding-right: 20rpx;">扫码填报</u-button>
            <u-button type="primary" @click="addChange(1)" style="padding-left: 20rpx;padding-right: 20rpx;">手动填报</u-button>
            <!--<u-button type="primary" @click="addChange(3)" style="padding-left: 20rpx;padding-right: 20rpx;">批量确认</u-button>-->
        </u-popup>
        <common-tabs :list="list" :current="current" @change="change" />
        <my-page
            :loadData="loadData"
            :swipe-action="true"
            :row-show-params="{
                statusValue: $DictCache.VALUE.SB_OIL_STATUS,
                statusMap: statusMap,
                statusColor: $DictCache.COLOR.SB_OIL_STATUS,
            }"
            @rowClick="handleDetail"
            :page-size="10"
            ref="myPage"
        >
            <template #pageRow="{ recordModel, rowShowParams }">
                <view
                    class="mx3 my2 p3 bg-color-white box p-relative"
                    @longpress="showMask(recordModel.id,$event)">
                    <common-mask :item="recordModel" :maskId="maskId" @hide="maskId = 0" @del="handleDel(recordModel)" />
                    <view class="d-flex j-between border-bottom pb-2 a-center">
                        <view class="text-color-b f-size-26">{{
                            recordModel.updateTime
                        }}</view>
                        <my-badge
                            :text="rowShowParams.statusMap[recordModel.status]"
                            :status="rowShowParams.statusColor[recordModel.status]"
                        />
                    </view>
                    <view class="mt-2 d-flex j-between">
                        <view class="text-color-3 f-size-32 f-weight-bold">{{
                            recordModel.sbName
                        }}</view>
                        <view class="text-color-3 f-size-32 f-weight-bold">{{
                            recordModel.storeName
                        }}</view>
                    </view>
                    <view class="mt-2 d-flex j-between">
                        <view class="f-size-26 text-color-6 f-weight-4 mt-2">
                            {{ recordModel.sbNo }}
                        </view>
                    </view>
                    <view class="d-flex j-end edit-box">
                        <view
                            class="text-color-3 f-size-32 edit"
                            v-if="recordModel.status === rowShowParams.statusValue.OIL"
                        >
                            <view @click.stop="confirmHandle(recordModel)">确认</view>
                        </view>
                    </view>
                </view>
            </template>
        </my-page>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            statusMap: {},
            current: 0,
            popupShow: false,
            maskId: 0
        };
    },
    onPullDownRefresh() {
        this.$refs.myPage.pagePullDownRefresh();
    },
    onReachBottom() {
        this.$refs.myPage.pageReachBottom();
    },
    created() {
        const sbOilStatusList = this.$DictCache.getChildrenList(
            this.$DictCache.TYPE.SB_OIL_STATUS
        );
        const statusList = [{ label: '全部', value: '' }];
        sbOilStatusList.forEach((item) => {
            if (
                item.value !== this.$DictCache.VALUE.SB_OIL_STATUS.APPLY &&
                item.value !== this.$DictCache.VALUE.SB_OIL_STATUS.REJECT
            ) {
                statusList.push(item);
            }
        });
        this.list = statusList;
        this.statusMap = this.$DictCache.getLabelByValueMapByType(
            this.$DictCache.TYPE.SB_OIL_STATUS
        );
    },
    onShow() {
        this.$nextTick(() => {
            this.$refs.myPage.initPage();
        });
    },
    onLoad() {},
    onHide() {
        this.maskId = 0
    },
    methods: {
        addChange(index) {
            if (index === 0) {
                uni.scanCode({
                    success(e) {
                        console.log(e.result);
                        if (e.result) {
                            uni.navigateTo({
                                url: '/pages/oiling/my-oiling-add?sbId=' + e.result
                            });
                        }
                    }
                });
            } else if (index === 1) {
                uni.navigateTo({
                    url: '/pages/oiling/my-oiling-add'
                });
            } else if (index === 2) {
                this.$Http
                    .copySbOils({})
                    .then((res) => {
                        this.$refs.myPage.pagePullDownRefresh();
                    });
            } else if (index === 3) {
                uni.navigateTo({
                    url: '/pages/oiling/my-oiling-add'
                });
            }
        },
        showMask(id, e) {
            this.maskId = id
            // #ifdef H5
            e.preventDefault()
            // #endif
        },
        // tab
        change(index, e) {
            this.current = index;
            this.$refs.myPage.initPage();
        },
        // 删除
        handleDel(recordModel) {
            const that = this;
            const params = [];
            params.push(recordModel.id);
            uni.showModal({
                title: '提示',
                content: '您确认删除吗?',
                success: (res) => {
                    if (res.confirm) {
                        this.$Http.deleteSbOils(params).then((res) => {
                            uni.showToast({ title: '删除成功' });
                            that.$refs.myPage.listData = [];
                            that.$refs.myPage.loadMore = true;
                            that.$refs.myPage.pageNum = 1;
                            that.$refs.myPage.initData();
                        });
                    } else if (res.cancel) {
                    }
                }
            });
        },

        loadData(parameter) {
            return this.$Http
                .getSbOilPage({
                    ...parameter,
                    filter: 1,
                    status: this.list[this.current].value
                })
                .then((res) => {
                    this.popupShow = false
                    return res.data;
                });
        },
        confirmHandle(recordModel) {
            uni.navigateTo({
                url: '/pages/oiling/my-oiling-detail?confirm=1&id=' + recordModel.id
            });
        },
        // 使其他的列表选择隐藏
        handleClick() {
            this.popupShow = true
        },
        // 详情
        handleDetail(recordModel) {
            if (this.maskId !== 0) { return this.maskId = 0 }
            uni.navigateTo({
                url: '/pages/oiling/my-oiling-detail?id=' + recordModel.id
            });
        }
    }
};
</script>
<style lang="less">
.main {
  .box {
    border-radius: unit(20, rpx);
    padding-right: 0;
  }
}
page {
  background-color: #f4f4f4;
}
.edit-box {
  padding: 0 30rpx;
  margin-top: 40rpx;
  .edit {
    padding: 8rpx 40rpx;
    border: 1px solid #ddd;
    border-radius: 20rpx;
    font-size: 26rpx;
    color: #666;
    margin-left: 30rpx;
  }
}
</style>