补货页面

mini-pro-web/src/assets/styles/resetVant.scss

@@ -1,7 +1,7 @@
.van-dialog__confirm, .van-dialog__confirm:active {
    color: #17b3ec;
}
.van-button--info{
.van-button--info, .van-checkbox__icon--checked .van-icon{
    background-color: #17b3ec;
    border-color: #17b3ec;
}
@@ -11,3 +11,10 @@
.van-tabs__line{
    background-color: #17b3ec;
}
.van-button--plain{
    background-color: #fff;
}
.van-button--plain.van-button--info{
    border-color: #17b3ec;
    color: #17b3ec;
}

mini-pro-web/src/components/ProductItem/index.vue

@@ -0,0 +1,67 @@
<template>
    <div class='components-product-item' :class="'pitem-full'">
        <div :style="'height: 25%'" class="pitem-bg"></div>
        <div class="pitem-inner">
            <div class="kitbox ">
                <div class="box-flex-1">1号位</div>
                <div>0/5</div>
            </div>
            <div class="ellipsis tc pt8">J氯化钠注J氯化钠注</div>
            <div class="tc pt5">￥27.00</div>
        </div>
    </div>
</template>
<script>
export default{
    data(){
        return {
            
        }
    },
    created() {
        
    },
    methods:{
        
    },
}
</script>
<style lang='scss' scoped>
.components-product-item{
    width: 100px;
    height: 80px;
    background: rgb(238, 238, 238);
    border-radius: 10px;
    margin-left: 10px;
    padding: 5px;
    font-size: 14px;
    position: relative;
    &.pitem-full{
        color: #fff;
    }
    &:first-child{
        margin-left: 0;
    }
    .pitem-inner{
        position: relative;
        z-index: 1;
        background: transparent;
    }
    .pitem-bg{
        background: #17b3ec;
        position: absolute;
        z-index: 0;
        width: 100%;
        bottom: 0;
        left: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        &.orange{
            background: #ff9526;
        }
        &.red{
                background: #ff5e6c;
        }
    }
}
</style>

mini-pro-web/src/router/replenishment.js

@@ -26,14 +26,105 @@ const routeMap = [
				component: () => import("@/views/replenishment/device/detail.vue")
            },
            {
                path: "/replenishment/recordList",
                path: "/replenishment/record/list",
                name: "replenishmentRecordList",
                meta: {
                    title: "补货记录",
                    hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/recordList.vue")
				component: () => import("@/views/replenishment/record/list.vue")
            },
            {
                path: "/replenishment/record/detail",
                name: "replenishmentRecordDetail",
                meta: {
                    title: "补货记录详情",
                    hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/record/detail.vue")
            },
            {
                path: "/replenishment/picking/list",
                name: "replenishmentPickingList",
                meta: {
                    title: "备货单",
                    hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/picking/list.vue")
            },
            {
                path: "/replenishment/picking/detail",
                name: "replenishmentPickingDetail",
                meta: {
                    title: "备货单详情",
                    hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/picking/detail.vue")
            },
            {
                path: "/replenishment/stockUp/deviceList",
                name: "replenishmentStockUpDeviceList",
                meta: {
                    title: "查看缺货设备",
                    hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/stockUp/deviceList.vue")
            },
            {
                path: "/replenishment/stockUp/detail",
                name: "replenishmentStockUpDetail",
                meta: {
                    title: "查看缺货汇总",
                    hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/stockUp/detail.vue")
            },
            {
                path: "/replenishment/start/deviceList",
                name: "replenishmentStartDeviceList",
                meta: {
                    title: "选择设备",
                    hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/start/deviceList.vue")
            },
            {
                path: "/replenishment/start/deviceDetail",
                name: "replenishmentStartDeviceDetail",
                meta: {
                    title: "补货",
                    hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/start/deviceDetail.vue")
            },
            {
                path: "/replenishment/start/productDetail",
                name: "replenishmentStartProductDetail",
                meta: {
                    title: "商品详情",
                    hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/start/productDetail.vue")
            },
            {
                path: "/replenishment/start/selProduct",
                name: "replenishmentStartSelProduct",
                meta: {
                    title: "选择商品",
                    hasTop: false,
                    hasBot: false
                },
				component: () => import("@/views/replenishment/start/selProduct.vue")
            },
		]
    }

mini-pro-web/src/views/login/Login.vue

@@ -18,7 +18,6 @@
                        <van-svg-icon slot="left-icon" icon-class="svg-mima" style="margin-top:2px;"/>
                        <van-svg-icon slot="right-icon" :icon-class="passwordView.icon"/>
                    </van-field>
                    <div class="sign">老人账号默认密码为身份证后六位</div>
                </template>
                <template  v-else>
                    <van-field v-model="data.msgCode" class="codeInp right-line" clearable @click-icon="msgCode=''" maxlength="10"  placeholder="短信验证码">
@@ -39,14 +38,14 @@
                </div>
            </van-cell-group>
            <div class="mt15 c-f14 c-17B3EC clearfix">
                <div class="textLeft">
                <!-- <div class="textLeft">
                    <span v-if="passwordLogin" @click="passwordLogin=false" style="float:left;">验证码登录</span>
                    <span v-else @click="passwordLogin=true" style="float:left;">密码登录</span>
                </div>
                <div class="textCentre">
                    <div v-if="accountLogin" @click="accountLogin=false,data.mobile='',passwordLogin=true">身份证号登录</div>
                    <div v-else @click="accountLogin=true,data.idcord='',passwordLogin=true">账号登录</div>
                </div>
                </div> -->
                <div class="textRight"  @click="goPage('/fotgetPassword')">忘记密码</div>
            </div>
            <!-- <div class="tips">
@@ -58,9 +57,6 @@
                </van-button>
                <van-button v-else block round type="primary" class=""><van-loading class="login-loading" color="#ffffff"/>
                </van-button>
                <van-button  @click="toRegister" block round class="mt20 register-btn">
                    注  册
                </van-button>
            </div>
        </div>
    </div>
@@ -625,7 +621,7 @@ export default {
}
.textRight{
    width: 33.33%;
    width: 100%;
    margin-right: 0px;
    text-align: right;

mini-pro-web/src/views/replenishment/picking/detail.vue

@@ -0,0 +1,46 @@
<template>
    <div class='replenishment-picking-detail fs-14'>
        <div class="list bgc-fff">
            <div class="row kitbox">
                <div class="box-flex-1 pl10">商品名称</div>
                <div class="tc">领料数量</div>
            </div>
            <div class="row kitbox">
                <div class="box-flex-1 pl10 ellipsis">J氯化钠注射液J氯化钠注射液J氯化钠注射液J氯化钠注射液(90mg）</div>
                <div class="tc">5</div>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    name: 'replenishmentPickingDetail',
    data(){
        return {
            
        }
    },
    created() {
        
    },
    methods:{
        
    },
}
</script>
<style lang='scss' scoped>
.replenishment-picking-detail{
    .list{
        .row{
            padding: 10px 0;
            border-bottom: 1px solid #e1e1e1;
            >div:nth-child(2){
                width: 80px;
            }
            &:last-child{
                border-bottom: 0;
            }
        }
    }
}
</style>

mini-pro-web/src/views/replenishment/picking/list.vue

@@ -0,0 +1,165 @@
<template>
    <div class='replenishment-picking-list'>
        <van-sticky>
            <van-tabs v-model="active" >
                <van-tab title="全部"></van-tab>
                <van-tab title="备货中"></van-tab>
                <van-tab title="">
                    <div slot="title">
                        <van-badge :content="5">
                        待领料
                        </van-badge>
                    </div>
                </van-tab>
                <van-tab title="已领料"></van-tab>
                <van-tab title="已驳回"></van-tab>
            </van-tabs>
        </van-sticky>
        <CustomList 
			ref="customList"
            :searchfun="false"
			@onLoad="onLoad">
			<div class="list plr15 pt10">
                <div v-for="(item, i) in list" :key="i" class="item bgc-fff plr15 c-333 fs-14">
                    <div class=" ptb10 kitbox bb-e1e1e1">
                        <div class="box-flex-1 fs-14">备货单号:Q1090811559890001</div>
                        <div class="">
                            <span class="c-ff9526">备货中</span>
                            <!-- <span class="c-17b3ec">待领料</span>
                            <span class="c-999">已领料</span>
                            <span class="c-ff5e6c">已驳回</span> -->
                        </div>
                    </div>
                    <div class="lh20 ptb10 kitbox">
                        <div class="box-flex-1">
                            <div class="row">
                                <div>补货员</div>
                                <div>张三</div>
                            </div>
                            <div class="row">
                                <div>待补设备</div>
                                <div>总健信联1号</div>
                            </div>
                            <div class="row">
                                <div>待补品类</div>
                                <div>10</div>
                            </div>
                            <div class="row">
                                <div>待补库存</div>
                                <div>60</div>
                            </div>
                            <div class="row">
                                <div>单据日期</div>
                                <div>2021-09-10 15:00:41</div>
                            </div>
                        </div>
                        <div class="fs-20 c-pr">
                            <van-icon name="arrow" />
                        </div>
                    </div>
                </div>
            </div>
		</CustomList>
    </div>
</template>
<script>
    export default{
        name: 'replenishmentDeviceList',
        data(){
            return {
                list: [],
            }
        },
        created() {
            
        },
        methods:{
            onLoad({page, pageSize, searchText}){
                setTimeout(()=>{
                    for(var i=0; i<pageSize; i++){
                        this.list.push((page-1)*pageSize + i)
                    }
                    this.$refs.customList.endLoad(page==5, this.list.length)
                }, 1000)
                return
                var that = this, 
                    params = {
                        orgCode: this.$store.getters.orgCode,
                        doctorNameKey: searchText,
                        dept: this.routerParam.dept,
                        diseaseKey: this.routerParam.disease,
                        page: page,
                        pagesize: pageSize
                    };
                
                zhuanjiazixunApi
                    .findDoctorByHospitalAndDiseaseAndDept(params)
                    .then(res=>{
                        if(res.status == 200){
                            var list = res.detailModelList.map(item=>{
                                var data = item
                                data.photo = this.$root.setDocPhoto(data.photo)
                                return data
                            })
                            this.list = page==1? list : this.list.concat(list)
                            this.$refs.customList.endLoad(!res.detailModelList || res.detailModelList.length==0, this.list.length)
                        } else {
                            this.$refs.customList[this.active].endLoad(false, true)
                        }
                    }).catch(err=>{
                        console.error(err)
                        this.$refs.customList[this.active].endLoad(false, true)
                    })
            },
        },
    }
</script>
<style lang='scss' scoped>
.replenishment-picking-list{
    ::v-deep .van-tab{
        &:nth-child(3){
            .van-tab__text{
                overflow: visible;
            }
        }
    }
    .list{
        .item{
            margin-bottom: 10px;
            border-radius: 5px;
            &:last-child{
                margin-bottom: 0;
            }
            .van-icon{
                position: absolute;
                top: 50%;
                transform: translateY(calc(-50% - 15px));
                right: 0;
                color: #ccc;
            }
            .row{
                display: -webkit-box;
                div{
                    &:first-child{
                        width: 60px;
                        position: relative;
                        text-align: justify;
                        text-align-last: justify;
                        margin-right: 12px;
                        &::after{
                            content: "：";
                            display: inline-block;
                            position: absolute;
                            right: -14px;
                            top: 0;
                        }
                    }
                }
            }
        }
    }  
}
</style>

mini-pro-web/src/views/replenishment/record/detail.vue

@@ -0,0 +1,107 @@
<template>
    <div class='replenishment-record-detail'>
        <div class="bgc-fff plr15">
            <div class="bb-e1e1e1 ptb10">众健信联1号</div>
            <div class="lh26 fs-14 ptb10">
                <template>
                    <div>补货时间：2020-08-24 17:15:19</div>
                    <div>设备编号：149122021070000</div>
                    <div>商品数量：2</div>
                    <div>补货人员：张三</div>
                </template>
                <!-- <template>
                    <div>换货时间：2020-08-24 17:15:19</div>
                    <div>设备编号：149122021070000</div>
                    <div>换货人员：张三</div>
                </template>
                <template>
                    <div>上货时间：2020-08-24 17:15:19</div>
                    <div>设备编号：149122021070000</div>
                    <div>上货人员：张三</div>
                </template> -->
            </div>
        </div>
        <div class="mt10 table fs-14 break">
            <div class="kitbox row tc fs-14">
                <div class=" ">图片</div>
                <div class="box-flex-1">商品名/条码</div>
                <div class=" ">数量</div>
            </div>
            <div class="kitbox row tc ptb10">
                <div class=" ">
                    <div>
                        <van-image
                            width="30"
                            height="30"
                            src="https://img01.yzcdn.cn/vant/cat.jpeg"
                        />
                    </div>
                    <div><van-icon name="arrow-down" /></div>
                    <div>
                        <van-image
                            width="30"
                            height="30"
                            src="https://img01.yzcdn.cn/vant/cat.jpeg"
                        />
                    </div>
                </div>
                <div class="box-flex-1 ">
                    <div class="lh30 ellipsis">商品名/条码商品名/条码商品名/条码</div>
                    <div><van-icon name="arrow-down" /></div>
                    <div class="lh30 ellipsis">商品名/条码商品名/条码商品名/条码</div>
                </div>
                <div class=" ">
                    <div class="lh30">2</div>
                    <div><van-icon name="arrow-down" /></div>
                    <div class="lh30">5</div>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
export default{
    name: 'replenishmentRecordDetail',
    data(){
        return {
            
        }
    },
    created() {
        
    },
    methods:{
        
    },
}
</script>
<style lang='scss' scoped>
.replenishment-record-detail{
    .table{
        background: #fff;
        width: 100%;
        .row{
            padding: 10px 0;
            border-bottom: 1px solid #e1e1e1;
            &:last-child{
                border-bottom: 0  ;
            }
            >div:first-child{
                width: 60px;
            }
            >div:last-child{
                width: 60px;
            }
            .van-image{
                display: block;
                margin: 0 auto;
            }
            .van-icon{
                color: #17b3ec;
            }
        }
    }
}
</style>

mini-pro-web/src/views/replenishment/recordList.vue

@@ -12,10 +12,22 @@
            <van-collapse v-model="activeName" accordion>
                <van-collapse-item v-for="(item, i) in list" :key="i" :title="item.title" :name="item.id">
                    <div class="item" v-for="(citem, k) in item.children" :key="k">
                        <div>补货时间：2020-08-24 17:15:19</div>
                        <div>设备编号：149122021070000</div>
                        <div>商品数量：2</div>
                        <div>补货人员：张三</div>
                        <template>
                            <div>补货时间：2020-08-24 17:15:19</div>
                            <div>设备编号：149122021070000</div>
                            <div>商品数量：2</div>
                            <div>补货人员：张三</div>
                        </template>
                        <!-- <template>
                            <div>换货时间：2020-08-24 17:15:19</div>
                            <div>设备编号：149122021070000</div>
                            <div>换货人员：张三</div>
                        </template>
                        <template>
                            <div>上货时间：2020-08-24 17:15:19</div>
                            <div>设备编号：149122021070000</div>
                            <div>上货人员：张三</div>
                        </template> -->
                    </div>
                </van-collapse-item>
            </van-collapse>
@@ -89,7 +101,10 @@ export default{
        ::v-deep .van-collapse-item__content{
            padding: 0 15px;
        }
        .van-cell::after
        ::v-deep .van-cell::after{
            border-bottom: 1px solid #e1e1e1;
            transform: scaleY(1);
        }
        .item{
            padding: 10px 0;
            border-bottom: 1px solid #e1e1e1;

mini-pro-web/src/views/replenishment/start/components/SetStockDialog.vue

@@ -0,0 +1,79 @@
<template>
    <div class='replenishment-start-set-stock-dialog  '>
        <van-popup v-model="value" close-on-popstate :close-on-click-overlay="false">
            <div class="plr15 ptb10 c-pr" style="width: 80vw">
                <div class="close fs-20"><van-icon @click="emitValue(false)" name="close" /></div>
                <div class="tc fs-14 c-333">
                    <span>{{title}}</span>
                </div>
                <template v-if="bussiness==1">
                    <div class="tc pt30 pb20"><van-stepper v-model="stock" min="1" /></div>
                </template>
                <div class="tc" v-else>
                    <div class="pt10">
                        <van-image
                            radius="5px"
                            src="https://img01.yzcdn.cn/vant/cat.jpeg"
                        />
                    </div>
                    <div class="pt10 c-333 fs-16">J氯化钠注射液(90mg）</div>
                    <div class="pt10 c-999">软件显示库存：5</div>
                    <div class="pt10 pb20 ipt plr50">
                        <van-field v-model="stock" label="" type="digit" placeholder=" 请填写实际库存" />
                    </div>
                </div>
                <div class="ptb10">
                    <van-button type="info" size="small" block>确认</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>
<script>
export default{
    props:{
        title:{
            default: '设置库存'
        },
        value: {},
        bussiness: {
            default: 1
        }
    },
    data(){
        return {
            stock: 1
        }
    },
    created() {
        
    },
    methods:{
        emitValue(show){
            this.$emit('input', show)
        },
    },
}
</script>
<style lang='scss' scoped>
.replenishment-start-set-stock-dialog{
    .close{
        position: absolute;
        right: 10px;
        top: 10px;
    }
    ::v-deep .van-field{
        padding: 0;
        .van-cell__value{
            border: 1px solid #e1e1e1;
            input{
                text-align: center;
            }
        }
    }
    .van-image{
        width: 200px;
        height: 150px;
    }
}
</style>

mini-pro-web/src/views/replenishment/start/deviceDetail.vue

@@ -0,0 +1,96 @@
<template>
    <div class='replenishment-start-device-detail fs-14'>
        <div class="bgc-17b3ec c-fff">
            <van-row>
                <van-col span="6">
                    <div class="tc pt15 pb10">
                        <div class="fs-20">1156</div>
                        <div class="fs-12 pt5">库存容量</div>
                    </div>
                </van-col>
                <van-col span="6">
                    <div class="tc pt15 pb10">
                        <div class="fs-20">
                            <span>156</span>
                            <span class="fs-12">/29%</span>
                        </div>
                        <div class="fs-12 pt5">在架库存</div>
                    </div>
                </van-col>
                <van-col span="6">
                    <div class="tc pt15 pb10">
                        <div class="fs-20">1156</div>
                        <div class="fs-12 pt5">缺货库存</div>
                    </div>
                </van-col>
                <van-col span="6">
                    <div class="tc pt15 pb10">
                        <div class="fs-20">1156</div>
                        <div class="fs-12 pt5">预警货道</div>
                    </div>
                </van-col>
            </van-row>
            <div class="kitbox fs-12 plr10 pb5">
                <div class="box-flex-1">当前:0号柜</div>
                <div class="box-flex-1 ml5"> 共:6层</div>
                <div class="box-flex-1 ml5">总货道数:240</div>
                <div class="box-flex-1 ml5">故障货道:18</div>
                <div class="box-flex-1 ml5">关闭货道:0</div>
            </div>
        </div>
        <div class="fs-14 pl15 ptb10 bgc-fff">从上往下数</div>
        <div class="kitbox">
            <div>
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item title="一层"  />
                    <van-sidebar-item title="二层"  />
                    <van-sidebar-item title="三层"  />
                </van-sidebar>
            </div>
            <div class="list box-flex-1 bgc-fff">
                <div class="item" v-for="i in 5" :key="i">
                    <ProductItem/>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import ProductItem from '@/components/ProductItem'
export default{
    name: 'replenishmentStartDeviceDetail',
    components: {
        ProductItem
    },
    data(){
        return {
            activeKey: 0
        }
    },
    created() {
        
    },
    methods:{
        
    },
}
</script>
<style lang='scss' scoped>
.replenishment-start-device-detail{
    .van-sidebar{
        // width: 56px;
    }
    .list{
        display: flex;
        flex-wrap: wrap;
        // min-height: calc(100vh - 130px);
        .item{
            margin-left: 5px;
            margin-bottom: 5px;
            .components-product-item{
                width: 90px;
            }
        }
    }
}
</style>

mini-pro-web/src/views/replenishment/start/deviceList.vue

@@ -0,0 +1,120 @@
<template>
    <div class='replenishment-start-device-list'>
        <van-sticky>
            <van-tabs v-model="active">
                <van-tab title="缺货设备"></van-tab>
                <van-tab title="全部设备"></van-tab>
            </van-tabs>
        </van-sticky>
        <CustomList 
			ref="customList"
			@onLoad="onLoad">
			<div class="list plr15 pt10">
                <div v-for="(item, i) in list" :key="i" class="item bgc-fff plr15 c-333 fs-14">
                    <div class=" ptb10 kitbox">
                        <div class="box-flex-1 fs-14">
                            众健信联1号
                        </div>
                        <div class="">
                            <van-tag type="success">在线</van-tag>
                            <van-tag type="success" class="ml5">在售</van-tag>
                        </div>
                    </div>
                    <div class="lh20 ptb10 kitbox">
                        <div class="box-flex-1">
                            <div>设备编号：149122021070000</div>
                            <div>上次补货时间：2021-09-11 09:00:14</div>
                        </div>
                    </div>
                    <div class="operate kitbox pt10 pb10">
                        <div class=" pr10"><van-button type="info" size="small" block  plain>标记已补货</van-button></div>
                        <div class="pl10"><van-button @click="gotoUrl('./deviceDetail')" type="info" size="small" block>开始补货</van-button></div>
                    </div>
                </div>
            </div>
		</CustomList>
    </div>
</template>
<script>
export default{
    name: 'replenishmentStartDeviceList',
    data(){
        return {
            list: [],
            result: [],
            selAll: false,
            active: 0
        }
    },
    created() {
        
    },
    methods:{
        onLoad({page, pageSize, searchText}){
            setTimeout(()=>{
                for(var i=0; i<pageSize; i++){
                    this.list.push((page-1)*pageSize + i)
                }
                this.$refs.customList.endLoad(page==5, this.list.length)
            }, 1000)
            return
            var that = this, 
                params = {
                    orgCode: this.$store.getters.orgCode,
                    doctorNameKey: searchText,
                    dept: this.routerParam.dept,
                    diseaseKey: this.routerParam.disease,
                    page: page,
                    pagesize: pageSize
                };
            
            zhuanjiazixunApi
                .findDoctorByHospitalAndDiseaseAndDept(params)
                .then(res=>{
                    if(res.status == 200){
                        var list = res.detailModelList.map(item=>{
                            var data = item
                            data.photo = this.$root.setDocPhoto(data.photo)
                            return data
                        })
                        this.list = page==1? list : this.list.concat(list)
                        this.$refs.customList.endLoad(!res.detailModelList || res.detailModelList.length==0, this.list.length)
                    } else {
                        this.$refs.customList[this.active].endLoad(false, true)
                    }
                }).catch(err=>{
                    console.error(err)
                    this.$refs.customList[this.active].endLoad(false, true)
                })
        },
    },
}
</script>
<style lang='scss' scoped>
.replenishment-start-device-list{
    ::v-deep .custom-list .search{
        top: 50px;
    }
    .list{
        .item{
            margin-bottom: 10px;
            border-radius: 5px;
            &:last-child{
                margin-bottom: 0;
            }
            .van-icon{
                position: absolute;
                top: 50%;
                transform: translateY(calc(-50% - 15px));
                right: 0;
                color: #ccc;
            }
        }
    }   
    .operate{
        >div{
            width: 50%;
        }
    }
}
</style>

mini-pro-web/src/views/replenishment/start/productDetail.vue

@@ -0,0 +1,105 @@
<template>
    <div class='replenishment-start-product-detail fs-14'>
        <div class="tc pt50">
            <van-image
                radius="5px"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
        </div>
        <div class="c-17b3ec tc pt20">更换商品</div>
        <div class=" tc pt20">
            <span class="mr10">现有数量：5 </span>
            <span class="ml10">货道容量：5 </span>
        </div>
        <div class="pt20">
            <div class="progress">
                <div class="bar"></div>
                <div class="text">21/500</div>
            </div>
        </div>
        <div class="bot-banner  ptb10">
            <div><van-button type="info" round block size="small">矫正库存</van-button></div>
            <div class="kitbox pt10">
                <div class="box-flex-1 pr10"><van-button type="info" round block plain size="small">修改容量</van-button></div>
                <div class="box-flex-1 pl10"><van-button type="info" round block plain class="red" size="small">下架商品</van-button></div>
            </div>
        </div>
        <!-- 修改容量 -->
        <SetStockDialog v-model="setStockShow" title="矫正库存" :bussiness="2"/>
    </div>
</template>
<script>
import SetStockDialog from './components/SetStockDialog'
export default{
    name: 'replenishmentStartProductDetail',
    components:{
        SetStockDialog
    },
    data(){
        return {
            setStockShow: true
        }
    },
    created() {
        
    },
    methods:{
        
    },
}
</script>
<style lang='scss' scoped>
.replenishment-start-product-detail{
    .van-image{
        width: 100px;
        height: 100px;
    }
    .progress{
        width: 80vw;
        background: #bbb;
        height: 20px;
        border-radius: 20px;
        margin: 0 auto  ;
        position: relative;
        .bar{
            background: #17b3ec;
            height: 100%;
            display: inline-block;
            color: #fff;
            text-align: center;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            line-height: 20px;
            min-width: 40px;
        }
        .text{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            background: transparent;
            text-align: center;
            color: #fff;
            line-height: 20px;
        }
        &.full{
            .bar{
                border-radius: 20px;
            }
        }
    }
    .bot-banner{
        position: fixed;
        bottom: 0;
        width: 80%;
        left: 10%;
        // background: #fff;
        .van-button--plain{
            &.red{
                color: #ff5e6c;
                border-color: #ff5e6c;
            }
        }
    }
}
</style>

mini-pro-web/src/views/replenishment/start/selProduct.vue

@@ -0,0 +1,102 @@
<template>
    <div class='replenishment-start-sel-product fs-14'>
        <form action="/">
            <van-search
                v-model="searchText"
                show-action
                placeholder="请输入商品名称搜索"
                @search="onSearch"
                @cancel="onCancel"
            />
        </form>
        <div v-if="!inSearch" class="kitbox bt-e1e1e1">
            <div>
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item title="全部分类"  />
                    <van-sidebar-item title="默认分类"  />
                </van-sidebar>
            </div>
            <div class="list box-flex-1 bgc-fff pb10">
                <div class="item plr10 pt10" v-for="i in 5" :key="i">
                    <div class="kitbox">
                        <div class="photo">
                            <van-image radius="5px" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
                        </div>
                        <div class="box-flex-1 pl10 right" >
                            <div class="fs-14 c-333">J氯化钠注射液(90mg）</div>
                            <div class="fs-12 c-999">
                                <div>商品条码：12464</div>
                                <div>价格：￥27.00  <span class="ml5">规格：0.33g*27</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else class="list box-flex-1 bgc-fff pb10">
            <div class="item plr10 pt10" v-for="i in 5" :key="i">
                <div class="kitbox">
                    <div class="photo">
                        <van-image radius="5px" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
                    </div>
                    <div class="box-flex-1 pl10 right" >
                        <div class="fs-14 c-333">J氯化钠注射液(90mg）</div>
                        <div class="fs-12 c-999">
                            <div>商品条码：12464</div>
                            <div>价格：￥27.00  <span class="ml5">规格：0.33g*27</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <SetStockDialog v-model="setStockShow" />
    </div>
</template>
<script>
import SetStockDialog from './components/SetStockDialog'
export default{
    name: 'replenishmentStartSelProduct',
    components:{
        SetStockDialog
    },
    data(){
        return {
            activeKey: 0,
            searchText: '',
            inSearch: false,
            setStockShow: false,
        }
    },
    created() {
        
    },
    methods:{
        onSearch(){
        },
        onCancel(){
        }
    },
}
</script>
<style lang='scss' scoped>
.replenishment-start-sel-product{
    .list{
        .item{
            .photo{
                .van-image{
                    width: 50px;
                    height: 50px;
                    display: block;
                }
            }
            .right{
                margin-top: -2px;
            }
        }
    }
}
</style>

mini-pro-web/src/views/replenishment/stockUp/detail.vue

@@ -0,0 +1,50 @@
<template>
    <div class='replenishment-stock-up-detail fs-14'>
        <div class="list bgc-fff">
            <div class="row kitbox">
                <div class="box-flex-1 pl10">商品名称</div>
                <div class="tc">现料数</div>
                <div class="tc">缺料数</div>
            </div>
            <div class="row kitbox">
                <div class="box-flex-1 pl10 ellipsis">J氯化钠注射液J氯化钠注射液J氯化钠注射液J氯化钠注射液(90mg）</div>
                <div class="tc">5</div>
                <div class="tc">5</div>
            </div>
        </div>
        <BotFloatButton :fix="true">下一步，生成备货单</BotFloatButton>
    </div>
</template>
<script>
export default{
    name: 'replenishmentStockUpDetail',
    data(){
        return {
            
        }
    },
    created() {
        
    },
    methods:{
        
    },
}
</script>
<style lang='scss' scoped>
.replenishment-stock-up-detail{
    .list{
        .row{
            padding: 10px 0;
            border-bottom: 1px solid #e1e1e1;
            >div:nth-child(2), >div:nth-child(3){
                width: 80px;
            }
            &:last-child{
                border-bottom: 0;
            }
        }
    }
}
</style>

mini-pro-web/src/views/replenishment/stockUp/deviceList.vue

@@ -0,0 +1,133 @@
<template>
    <div class='replenishment-stock-up-device-list'>
        <CustomList 
			ref="customList"
			@onLoad="onLoad">
			<div class="list plr15 pt10">
                <van-checkbox-group v-model="result">
                    <div v-for="(item, i) in list" :key="i" class="item bgc-fff plr15 c-333 fs-14">
                        <div class=" ptb10 kitbox">
                            <div class="box-flex-1 fs-14">
                                <van-checkbox name="a">众健信联1号</van-checkbox>
                            </div>
                            <div class="">
                                <van-tag type="success">在线</van-tag>
                                <van-tag type="success" class="ml5">在售</van-tag>
                            </div>
                        </div>
                        <div class="kitbox ptb10 pr40">
                            <div class="pt2">空置率：</div>
                            <div class="box-flex-1 pt10"><van-progress :percentage="50" /></div>
                        </div>
                        <div class="lh20 ptb10 kitbox">
                            <div class="box-flex-1">
                                <div>待补商品数量：1156</div>
                                <div>未设商品空货道：133</div>
                                <div>设备所属：禾山街道社区卫生服务中心</div>
                                <div>设备编号：149122021070000</div>
                                <div>上次补货时间：2021-09-11 09:00:14</div>
                            </div>
                            <div class="fs-20 c-pr">
                                <van-icon name="arrow" />
                            </div>
                        </div>
                    </div>
                </van-checkbox-group>
            </div>
		</CustomList>
        <div class="bot-banner ptb10 bgc-fff">
            <div class="kitbox fs-14">
                <div class="pr40 box-v-middle pl15">
                    <van-checkbox v-model="selAll">全选</van-checkbox>
                </div>
                <div class="box-flex-1 plr15">
                    <van-button type="info" size="small" round block>下一步，查看缺货商品汇总</van-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    name: 'replenishmentStockUpDeviceList',
    data(){
        return {
            list: [],
            result: [],
            selAll: false
        }
    },
    created() {
        
    },
    methods:{
        onLoad({page, pageSize, searchText}){
            setTimeout(()=>{
                for(var i=0; i<pageSize; i++){
                    this.list.push((page-1)*pageSize + i)
                }
                this.$refs.customList.endLoad(page==5, this.list.length)
            }, 1000)
            return
            var that = this, 
                params = {
                    orgCode: this.$store.getters.orgCode,
                    doctorNameKey: searchText,
                    dept: this.routerParam.dept,
                    diseaseKey: this.routerParam.disease,
                    page: page,
                    pagesize: pageSize
                };
            
            zhuanjiazixunApi
                .findDoctorByHospitalAndDiseaseAndDept(params)
                .then(res=>{
                    if(res.status == 200){
                        var list = res.detailModelList.map(item=>{
                            var data = item
                            data.photo = this.$root.setDocPhoto(data.photo)
                            return data
                        })
                        this.list = page==1? list : this.list.concat(list)
                        this.$refs.customList.endLoad(!res.detailModelList || res.detailModelList.length==0, this.list.length)
                    } else {
                        this.$refs.customList[this.active].endLoad(false, true)
                    }
                }).catch(err=>{
                    console.error(err)
                    this.$refs.customList[this.active].endLoad(false, true)
                })
        },
    },
}
</script>
<style lang='scss' scoped>
.replenishment-stock-up-device-list{
    .list{
        .item{
            margin-bottom: 10px;
            border-radius: 5px;
            &:last-child{
                margin-bottom: 0;
            }
            .van-icon{
                position: absolute;
                top: 50%;
                transform: translateY(calc(-50% - 15px));
                right: 0;
                color: #ccc;
            }
        }
    }   
    .bot-banner{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 0 5px #ccc;
    }
    ::v-deep .van-list__placeholder{
        height: 60px;
    }
}
</style>