xiamen-sb-uniapp/pages/out-store/list.vue

<template>
    <view>
        <my-add-button @handleClick="handleClick" />
        <!-- <view class="border-bottom">
            <u-tabs
                class="p-fixed left0 right0 zIndex"
                :list="list"
                :name="'label'"
                :is-scroll="false"
                :current="current"
                @change="change"
            ></u-tabs>
        </view> -->
        <common-tabs :list='list' :current="current" @change='change' />
        <view>
            <my-page
                :loadData="loadData"
                :swipe-action="true"
                :row-show-params="{statusMap: statusMap,statusValue: $DictCache.VALUE.OUT_STORE_FORM_STATUS,
                                   statusColor: $DictCache.COLOR.OUT_STORE_FORM_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 pr-3">
                            <view class="text-color-3 f-size-32 f-weight-bold">{{
                                    recordModel.storeName
                                }}</view>
                            <view class="text-color-y f-size-32 f-weight-bold">{{
                                    recordModel.totalPrice
                                }}</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.NOT_EXECUTE">
                                <view @click.stop="confirmHandle(recordModel)">提交</view>
                            </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.EXECUTING">
                                <view @click.stop="updateStoreBack(recordModel)">撤销</view>
                            </view>
                        </view>

                    </view>
                </template>
            </my-page>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            current: 0,
            statusMap: {},
            maskId: 0
        };
    },
    onPullDownRefresh() {
        this.$refs.myPage.pagePullDownRefresh();
    },
    onReachBottom() {
        this.$refs.myPage.pageReachBottom();
    },
    created() {
        const formStatusList = this.$DictCache.getChildrenList(this.$DictCache.TYPE.OUT_STORE_FORM_STATUS);
        const statusList = [{ label: '全部', value: '' }]
        this.list = statusList.concat(formStatusList);
        this.statusMap = this.$DictCache.getLabelByValueMapByType(
            this.$DictCache.TYPE.OUT_STORE_FORM_STATUS
        );
    },
    onShow() {
        this.$nextTick(() => {
            this.$refs.myPage.initPage();
        })
    },
    onLoad() {},
    onHide() {
        this.maskId = 0
    },
    methods: {
        showMask(id, e) {
            this.maskId = id
            // #ifdef H5
            e.preventDefault()
            // #endif
        },
        // tab
        change(index, e) {
            this.current = index;
            this.$refs.myPage.initPage();
        },
        // 删除
        handleDel(recordModel) {
            let that = this
            let params = []
            params.push(recordModel.id)
            uni.showModal({
                title: '提示',
                content: '您确认删除吗?',
                success:  (res)=> {
                    if (res.confirm) {
                        this.$Http.deleteOutStoreForms(params).then(res=>{
                            uni.showToast({ title:'删除成功' })
                            that.$refs.myPage.listData = []
                            that.$refs.myPage.loadMore = true
                            that.$refs.myPage.pageNum = 1
                            that.$refs.myPage.initPage();
                        })
                    } else if (res.cancel) {  }
                }
            });
        },
        loadData(parameter) {
            // filter: 1,
            // status: this.list[this.current].value
            return this.$Http
                .getOutStoreFormPage({
                    ...parameter,
                    status: this.list[this.current].value,
                    dataScope:{
                        sortBy:'desc',
                        sortName:'update_time'
                    }
                })
                .then(res => {
                    const data = res.data;
                    if (this.$BaseTool.Object.isNotBlank(data)) {
                        const rows = data.rows;
                        if (this.$BaseTool.Object.isNotBlank(rows) && rows.length > 0) {
                            rows.forEach(item => {
                                item.totalPrice = this.$BaseTool.Amount.formatter(item.totalPrice);
                            })
                        }
                    }
                    return res.data;
                })
        },
        confirmHandle(item) {
            const that = this;
            uni.showModal({
                title: "提示",
                content: "确认提交出库？",
                success: function (res) {
                    if (res.confirm) {
                        that.$Http.updateOutStore(item).then((res) => {
                            that.page = 1;
                            that.loadMore = true;
                            that.listData = [];
                            that.$refs.myPage.initPage();
                        });
                    }
                },
            });
        },
        updateStoreBack(item) {
            const that = this;
            uni.showModal({
                title: "提示",
                content: "确认撤销该出库单？",
                success: function (res) {
                    if (res.confirm) {
                        that.$Http.updateStoreBack(item).then((res) => {
                            that.page = 1;
                            that.loadMore = true;
                            that.listData = [];
                            that.$refs.myPage.initPage();
                        });
                    }
                },
            });
        },
        handleClick() {
            uni.navigateTo({
                url: '/pages/out-store/out-store-add-new'
            });
        },
        // 跳转详情
        handleDetail(recordModel) {
            if (this.maskId != 0) return this.maskId = 0
            uni.navigateTo({
                url: '/pages/out-store/out-store-detail?id=' + recordModel.id
            });
        }
    }
};
</script>

<style lang="less">
page {
    background-color: #f4f4f4;
}

.box {
    border-radius: 20rpx;
    padding-right: 0;
}
.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>