xiamen-sb-uniapp/pages/spare/spare-detail.vue

<template>
    <view>
        <u-toast ref="uToast" />
        <view class="d-flex px3 py2">
            <view class="top d-flex a-center bg-color-white flex1 one-ellipsis">
                <view class="img" style="cursor:pointer">
                    <image
                        :src="
                            imgSrc
                                ? imgSrc
                                : $BaseTool.UserUtil.getFileUrl(infoData.qrCode)
                        "
                        mode="widthFix"
                    ></image>
                </view>
                <view class="pl-3">
                    <view class="f-size-36 text-color-3 one-ellipsis">{{
                        infoData.name
                    }}</view>
                    <view
                        class="d-flex f-size-28 f-weight-6 f-wrap"
                        style="margin: 20rpx 0"
                    >
                    </view>
                    <view class="d-flex">
                        <text class="f-size-26 mr-3 state-r main-color-bg text-color-white">编码：{{ infoData.no }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="divider"></view>
        <!-- 基本信息 -->
        <view class="mt-3 px3">
            <view
                class="f-size-30 f-weight-bold py2 border-bottom"
            >基本信息</view
            >
            <view
                class="mx3 my2 p3 bg-color-white"
                style="border-radius: 16rpx; border: 1px solid #eee"
            >
                <equipment-line title="备件价格" :content="infoData.initialValue" />
                <equipment-line title="备件编号" :content="infoData.initNo" />
                <equipment-line title="备件类型" :content="infoData.typeName" />
                <equipment-line title="规格型号" :content="infoData.ggxh" />

            </view>
        </view>
        <view class="divider"></view>
        <view class="px3">
            <view
                class="f-size-30 f-weight-bold py2 border-bottom"
            >常用操作</view
            >
            <u-grid :col="3" :border="false">
                <u-grid-item @tap="handleAdd(1)">
                    <view
                        class="iconfont icon-ruku main-color-text"
                        style="color: #0f6fb9;font-size: 56rpx"
                    ></view>
                    <view class="grid-text">入库</view>
                </u-grid-item>
                <u-grid-item @tap="handleStart()">
                    <view class="iconfont icon-chuku main-color-text" style="color: #0f6fb9;font-size: 56rpx"></view>
                    <view class="grid-text">出库</view>
                </u-grid-item>
                <u-grid-item v-if="infoData.status != 7" @tap="handleStop()">
                    <view class="iconfont icon-stop1 main-color-text"></view>
                    <view class="grid-text">盘点</view>
                </u-grid-item>
            </u-grid>
        </view>
        <view class="divider"></view>
        <view class="px3">
            <my-card
                title="备件图片"
                @handleLubrication="handleImg"
            ></my-card>
            <my-card
                icon="icon-tubiaozhizuomoban-135"
                title="备件仓库"
                @handleLubrication="handleSpareStore"
            ></my-card>
        </view>
    </view>
</template>

<script>
import DictCache from '@/utils/dict';

export default {
    data() {
        return {
            list: [
                {
                    name: '维修记录'
                },
                {
                    name: '运行记录'
                },
                {
                    name: '巡检记录'
                }
            ],
            current: 0,
            detailId: '',
            infoData: {},
            statusMap: {},
            rlTypeMap: null,
            colorMap: null,
            imgSrc: '',
            gatherTask: {
                checkTask: 0,
                maintainTask: 0,
                lubricationTask: 0,
                lubricationTaskWeek: 0,
                lubricationTaskMonth: 0,
                oilTask: 0,
                repairTask: 0,
                repairCheckTask: 0
            }
        };
    },
    onLoad(options) {
        // 获取词典
        this.detailId = options.detailId;
        this.$Http.getDictData().then(response => {
            uni.setStorage({
                key: DictCache.BASE_DATA_CACHE,
                data: response.data,
                success: function () {}
            });
            this.statusMap = this.$DictCache.getLabelByValueMapByType(
                this.$DictCache.TYPE.SB_INFO_STATUS
            );
            this.rlTypeMap = this.$DictCache.getLabelByValueMapByType(
                this.$DictCache.TYPE.RANLIAO_TYPE
            );
            this.colorMap = this.$DictCache.getLabelByValueMapByType(
                this.$DictCache.TYPE.SB_COLOR
            );
            this.$Http
                .fetchSparePartInfo({
                    id: this.detailId
                })
                .then((res) => {
                    this.infoData = res.data;
                    this.imgSrc = this.$BaseTool.UserUtil.getFileUrl(this.infoData.image)
                    uni.setNavigationBarTitle({
                        title: this.infoData.name
                    });
                });
        });
    },
    onShow() {
    },
    methods: {
        // 图片
        handleImg() {
            uni.navigateTo({
                url:
                    '/pages/spare/spare-img?detailId=' +
                    this.detailId
            });
        },
        // 备件仓库
        handleSpareStore() {
            uni.navigateTo({
                url: '/pages/spare/spare-store?detailId=' + this.detailId + '&spareName=' + this.infoData.name + '&spareNo=' + this.infoData.no
            });
        },
        // 常用操作跳转
        handleAdd(index) {
            if (index === 1) {
                uni.navigateTo({
                    url:
                        '/pages/repair-add/repair-add?detailId=' +
                        this.detailId
                });
            } else if (index === 2) {
                uni.navigateTo({
                    url: '/pages/running/running-edit?sbId=' + this.detailId
                });
            } else if (index === 3) {
                uni.navigateTo({
                    url:
                        '/pages/inspection/inspection-edit?sbId=' +
                        this.detailId
                });
            }
        },
        change(index) {
            this.current = index;
        },
    }
};
</script>

<style lang="less">
.iconfont {
    font-size: 50rpx;
}

.col2 view:first-child {
    // width: 130rpx;
}

.col2 view:last-child {
    flex: 1;
}

.top {
    .img {
        width: 168rpx;
        height: 168rpx;
        border-radius: 50%;

        image {
            width: 168rpx;
            height: 168rpx;
            border-radius: 50%;
            background-color: #eee;
        }
    }
}

.d-flex.mb-2 {
    align-items: center;
}
.state-r {
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
}
.state-g {
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
    background-color: #e7e8f2;
    color: #949dad;
}
</style>