xiamen-sb-uniapp/pages/in-store/in-store-detail.vue

<template>
    <view style="margin: 0rpx 40rpx 0" class="container">
        <view class="my2 p3 bg-color-white" style="border-radius: 16rpx">
            <view class="f-size-32 f-weight-6 py2 mb-2 title">入库信息</view>
            <detail-list-item title="入库单号">{{ model.inNo }}</detail-list-item>
            <detail-list-item title="入库类型">{{ $BaseTool.Object.getField(typeMap, model.type) }}</detail-list-item>
            <detail-list-item title="仓库">{{ model.storeName }}</detail-list-item>
            <detail-list-item title="总价">{{ model.totalPrice }}</detail-list-item>
<!--            <detail-list-item title="入库人">{{ model.pickUserName }}</detail-list-item>
            <detail-list-item title="入库说明">{{ model.reason }}</detail-list-item>-->

            <view class="f-size-32 f-weight-6 py2 mb-2 title">入库明细</view>
            <template v-for="(detail,index) in model.detailList">
                <view :key="index">
                    <u-line color="#0082ff" />
                    <detail-list-item title="备件名称">{{ detail.spareName }}</detail-list-item>
                    <detail-list-item title="入库数量">{{ detail.num }}</detail-list-item>
                    <detail-list-item title="单价">{{ detail.price }}</detail-list-item>
                    <detail-list-item title="总价">{{ detail.totalPrice }}</detail-list-item>
                </view>
            </template>
        </view>
        <view class="m3" v-if="isConfirm">
            <u-button @click="submit" type="primary" shape="circle">提交入库</u-button>
        </view>
    </view>
</template>

<script>
import DetailListItem from '@/components/detail-list/DescriptionList'
export default {
    components: { DetailListItem },
    data() {
        return {
            model: {
                'pickNo': null,
                'type': null,
                'repairId': null,
                'repaireNo': null,
                'pickUserId': null,
                'pickUserName': null,
                'storeId': null,
                'storeName': null,
                'reason': null,
                'remark': null,
                'status': null,
                'createdUserId': null,
                'updateUserId': null,
                'updateTime': null,
                'createdUserName': null,
                'updateUserName': null
            },
            isConfirm: false,
            typeMap: {},
            statusMap: {}
        };
    },
    created () {
        // 下拉框map
        this.isConfirm = false;
        this.typeMap = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.IN_STORE_FORM_TYPE)
        this.statusMap = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.IN_STORE_FORM_STATUS)
    },
    onLoad(options) {
        this.isConfirm = options.confirm === 1 || options.confirm === '1';
        this.$Http.fetchInStoreForm({ id: options.id }).then(res => {
            this.model = res.data;
            if(this.model.status == 1){
                this.isConfirm = true
            }
        });
    },
    methods: {
        submit() {
            this.$Http.updateInStore({ id: this.model.id })
                .then(() => {
                    this.isConfirm = false
                    uni.showToast({ icon: 'none', title: '入库成功' })
                }).catch(() => {
                })
        }
    }
};
</script>

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

.container {
    padding-bottom: 100rpx;

        .title {
            border-bottom: 1rpx solid #f4f4f4;
            color: #0082ff;
        }

        .p-fixed {
            border-top: 1rpx solid #f4f4f4;
            height: 100rpx;

        .common {
            padding: 15rpx 100rpx;
            border-radius: 30rpx;
            background-color: #0082ff;
            color: #fff;

        &:last-of-type {
             background-color: #fff;
             border: 1rpx solid #0082ff;
             color: #0082ff;
         }
        }
    }

    .footer {
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
    }
}
</style>