#

whycq

2022-04-02 26dd816735330763f2501f47f09d5dc5a83b55ea

#

 pages/basics/demo.vue

@@ -1,50 +1,46 @@
<template>
    <view>
        <scroll-view>
            <view>
                <view class="search-box">
                    <view class="search-area">
                        <view class="search-icon"><uni-icons type="search" size="25" color="#a5a5a5"></uni-icons></view>
                        <input type="text" v-model="orderNo" placeholder="扫码 / 输入(订单编号)" @input="search()"/>
                        <view class="close-icon" @click="reset()"><uni-icons type="closeempty" size="25" color="#a5a5a5"></uni-icons></view>
                    </view>
        <!-- 搜索栏 -->
        <view>
            <view class="cu-bar bg-white search">
                <view class="search-form radius">
                    <text class="cuIcon-search"></text>
                    <input v-model="orderNo" :adjust-position="false" type="text" placeholder="扫码 / 输入 (单据编号)" confirm-type="search" @input="search()"></input>
                    <text class="cuIcon-close" @click="reset()"></text>
                </view>
                <checkbox-group @change="checkbox">
                    <label v-for="(item,index) in data" :key="index" class="demo-list bg-false" :class="'bg-'+item.checked" >
                        <view class="demo-list-left">
                            <checkbox :value="item.id+''" :checked="item.checked" style="display: block;" />
                        </view>
                        <view class="demo-list-right">
                            <!-- <view><text style="font-weight: bold;">序号：{{index+1}}</text></view> -->
                            <view class="order-ditel"><text class="index">No.{{index+1}}</text><text class="orderNo">{{item.orderNo}}</text></view>
                            <view><text style="width: 400rpx;">商品编码：{{item.matnr}}</text></view>
                            <view>
                                <text>应入数量：{{item.anfme}}</text>
                                <text>商品名称：{{item.maktx}}</text>
                            </view>
                            <view>
                                <text>已入数量：{{item.inQty}}</text>
                                <text style="width: auto;">订单状态：</text><text :class="state$"> {{item.state$}}</text>
                            </view>
                        </view>
                    </label>
                </checkbox-group>
                <view class="action">
                    <button class="cu-btn bg-yellow" style="color: #fff;">搜 索</button>
                </view>
            </view>
        </scroll-view>
        <view class="foot flex justify-around">
            <label class="label-btn" style="width: 150rpx;">
                <checkbox :checked="check" @click="allChecked()">{{checkText}}</checkbox>
            </label>
            <label class="label-btn" style="width: 100rpx;">
                <text  @click="reChecked()">反选</text>
            </label>
			
            <label class="label-btn" style="width: 170rpx;">
                <button class="cu-btn bg-red ">撤销上架</button>
            </label>
            <label class="label-btn">
                <button class="cu-btn bg-blue " @click="shangjia()">上架</button>
            </label>
        </view>
        <view class="margin-top">
            <uni-table border stripe type="selection" emptyText="没有更多数据">
                <!-- 表头 -->
                <uni-tr >
                    <uni-th align="center" width="200">订单</uni-th>
                    <uni-th align="center">应入库量</uni-th>
                    <uni-th align="center">已入库量</uni-th>
                    <uni-th align="center" width="200">商品编码</uni-th>
                    <uni-th align="center">商品名称</uni-th>
                    <uni-th align="center">订单状态</uni-th>
                    <uni-th align="center"width="200">操作</uni-th>
                </uni-tr>
                <!-- 表体 -->
                <uni-tr v-for="(item, index) in tabData" :key="index">
                    <uni-td align="center">{{item.orderNo}}</uni-td>
                    <uni-td align="center">{{item.anfme}}</uni-td>
                    <uni-td align="center">{{item.inQty}}</uni-td>
                    <uni-td align="center">{{item.matnr}}</uni-td>
                    <uni-td align="center">{{item.maktx}}</uni-td>
                    <uni-td align="center">{{item.state$}}</uni-td>
                    <uni-td>
                        <view class="flex justify-around">
                            <button class="cu-btn bg-orange sm">上 架</button>
                            <button class="cu-btn bg-red sm">撤销上架</button>
                        </view>
                    </uni-td>
                </uni-tr>
            </uni-table>
        </view>
    </view>
</template>
@@ -53,21 +49,21 @@
    export default {
        data() {
            return {
                data: [],
                orderNo:'',
                tabData: [],
                searchData: {},
                orderNo: '',
                needData:{},
                check:false,
                checkText:'全选',
                checkedData:[],
                state$:'',
            }
        },
        mounted() {
        mounted(){
            const UIP = uni.getStorageSync('UIP');
            this.baseIP = UIP;
            const UPORT = uni.getStorageSync('UPORT');
            this.basePORT = UPORT;
            this.render()
        },
        onLoad() {
			
        },
        methods: {
            // 搜索
@@ -81,27 +77,11 @@
            // 重置
            reset() {
                let that = this;
                if (that.orderNo == '') {
                    uni.vibrateShort();
                } else {
                    uni.vibrateLong();
                }
                that.orderNo = '';
                that.needData['order_no'] = '';
                that.getData();
				
				
            },
            // 表格加载
            render(param) {
                let that = this;
                if(param) {
                    that.needData['order_no'] = param;
                    that.getData();
                } else {
                    that.getData();
                }
            },
            // 获取表格数据
            getData() {
                let that = this
                uni.request({
@@ -111,242 +91,26 @@
                    success(res) {
                        var res = res.data
                        if (res.code === 200) {
                            that.data = res.data.records
                        }
                        for (var i = 0; i < that.data.length; i++) {
                            if (that.data[i].state$ == "未入库") {
                                that.state$ = 'color-red'
                            } else {
                                console.log(2)
                            }
							
                            that.tabData = res.data.records
                        }
                    }
                })
            },
            checkbox: function (e) {
                var items = this.data,
                    values = e.detail.value;
                for (var i = 0, lenI = items.length; i < lenI; ++i) {
                    const item = items[i]
                    item.id = item.id + ''
                    if(values.indexOf(item.id) >= 0){
                        this.$set(item,'checked',true)
                    }else{
                        this.$set(item,'checked',false)
                    }
                }
                if (values.length == items.length) {
                    this.check = true
                    this.checkText = "取消全选"
			
            // 表格加载
            render(param) {
                let that = this;
                if(param) {
                    that.needData['order_no'] = param;
                    that.getData();
                } else {
                    this.check = false
                    this.checkText = "全选"
                    that.getData();
                }
                uni.vibrateShort();
            },
            reChecked() { // 反选
                var checkArr = []
                for (var i = 0; i < this.data.length;i++) {
                    if (this.data[i].checked == true) {
                        this.$set(this.data[i],'checked',false)
                    }else{
                        this.$set(this.data[i],'checked',true)
                    }
                    if (this.data[i].checked == true) {
                        checkArr.push(this.data[i].checked) 
                    }
                }
                if (checkArr.length == this.data.length) {
                    this.check = true
                    this.checkText = "取消全选"
                } else {
                    this.check = false
                    this.checkText = "全选"
                }
                uni.vibrateShort();
            },
            allChecked(e){ // 全选
                if (this.check == true) {
                    for (var i = 0; i < this.data.length;i++) {
                        this.$set(this.data[i],'checked',false)
                    }
                    this.check = false
                    this.checkText = "全选"
                } else {
                    for (var i = 0; i < this.data.length;i++) {
                        this.$set(this.data[i],'checked',true)
                    }
                    this.check = true
                    this.checkText = "取消全选"
                }
                uni.vibrateShort();
            },
            shangjia() {
                this.checkedData = []
                for (var i = 0; i < this.data.length; i++) {
                    if (this.data[i].checked == true) {
                        this.checkedData.push(this.data[i])
                    }
                }
                uni.vibrateShort();
                console.log(this.checkedData)
				
            }
        }
    }
</script>

<style>
    .search-box {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100rpx;
        background-color: #FFF;
        border-bottom: 1px solid #d8d8d8;
        border-radius: 0 0 20rpx 20rpx;
        z-index: 1;
    }
    /*#ifdef H5 */
    .search-box {
        position: fixed;
        left: 0;
        top: 60rpx;
        width: 100%;
        height: 100rpx;
        background-color: #ffffff;
        border-bottom: 1px solid #d8d8d8;
        border-radius: 0 0 20rpx 20rpx;
        z-index: 1;
    }
    /* #endif */
    .search-area {
        background-color: #EDEDED;
        width: 96%;
        height: 70%;
        margin: 15rpx;
        border-radius: 15rpx;
    }
    .search-area input {
        display: inline-block;
        height: 70rpx;
        width: 70%;
        line-height: 70rpx;
        /* color: #a5a5a5; */
        font-size: 25rpx;
        font-weight: 400;
    }
    .search-icon {
        display: inline-block;
        float: left;
        width: 70rpx;
        height: 70rpx;
        text-align: center;
        line-height: 70rpx;
		
    }
    .close-icon {
        display: inline-block;
        float: right;
        width: 70rpx;
        height: 70rpx;
        text-align: center;
        line-height: 70rpx;
    }
    .bg-false {
        background-color: #FFFFFF;
    }
    .bg-true {
        background-color: #ebebeb;
    }
	
    .demo-list {
        border-bottom: 1px solid #d8d8d8;
        height: 180rpx;
        margin: 15rpx;
        border-radius: 20rpx;
    }
    .demo-list:first-child {
        margin-top: 120rpx;
    }
    .demo-list:last-child {
        margin-bottom: 120rpx;
    }
    label {
        display: block;
    }
    .demo-list-left {
        display: inline-block;
        float: left;
        text-align: center;
        width: 100rpx;
        height: 180rpx;
        line-height: 180rpx;
    }
    .demo-list-right {
        display: inline-block;
        float: left;
        height: 180rpx;
        color: #828282;
    }
    .order-ditel {
        height: 60rpx;
        width: 600rpx;
        line-height: 60rpx;
    }

    .demo-list-right .index {
        width: 120rpx;
        height: 25rpx;
        line-height: 25rpx;
        font-size: 40rpx;
        border-right: 4rpx solid #6f6f6f;
        padding-left: 0px;
        padding-right: 10rpx;
        color: #3b3b3b;
        /* background-color: #007AFF; */
    }
    .demo-list-right .orderNo {
        padding-left: 30rpx;
        font-size: 35rpx;
        width: 400rpx;
        color: #3b3b3b;
        /* background-color: #0A98D5; */
    }
    .demo-list-right .vertical-bar { // 竖杠
        /* background-color: #6739B6; */
        width: 50rpx;
        font-size: 30rpx;
        text-align: center;
    }
    .demo-list-right text {
        display: inline-block;
        width: 250rpx;
        font-size: 25rpx;
    }
    .color-red {
        width: auto;
        font-weight: 700;
        color: red;
    }
	
    .foot {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        background-color: #FFF;
        position: fixed;
        bottom: 0;
        border-top: 1px solid #d8d8d8;
        border-radius: 20rpx 20rpx 0 0 ;
        z-index: 1;
    }
    .label-btn {
        width: 150rpx;
    }
    checkbox {
        /* transform:scale(0.7) */
    }
	
</style>

 pages/basics/sale.vue

@@ -1,46 +1,50 @@
<template>
    <view>
        <!-- 搜索栏 -->
        <view>
            <view class="cu-bar bg-white search">
                <view class="search-form radius">
                    <text class="cuIcon-search"></text>
                    <input v-model="orderNo" :adjust-position="false" type="text" placeholder="扫码 / 输入 (单据编号)" confirm-type="search" @input="search()"></input>
                    <text class="cuIcon-close" @click="reset()"></text>
        <scroll-view>
            <view>
                <view class="search-box">
                    <view class="search-area">
                        <view class="search-icon"><uni-icons type="search" size="25" color="#a5a5a5"></uni-icons></view>
                        <input type="text" v-model="orderNo" placeholder="扫码 / 输入(订单编号)" @input="search()"/>
                        <view class="close-icon" @click="reset()"><uni-icons type="closeempty" size="25" color="#a5a5a5"></uni-icons></view>
                    </view>
                </view>
                <view class="action">
                    <button class="cu-btn bg-yellow" style="color: #fff;">搜 索</button>
                </view>
            </view>
        </view>
        <view class="margin-top">
            <uni-table border stripe type="selection" emptyText="没有更多数据">
                <!-- 表头 -->
                <uni-tr >
                    <uni-th align="center" width="200">订单</uni-th>
                    <uni-th align="center">应入库量</uni-th>
                    <uni-th align="center">已入库量</uni-th>
                    <uni-th align="center" width="200">商品编码</uni-th>
                    <uni-th align="center">商品名称</uni-th>
                    <uni-th align="center">订单状态</uni-th>
                    <uni-th align="center"width="200">操作</uni-th>
                </uni-tr>
                <!-- 表体 -->
                <uni-tr v-for="(item, index) in tabData" :key="index">
                    <uni-td align="center">{{item.orderNo}}</uni-td>
                    <uni-td align="center">{{item.anfme}}</uni-td>
                    <uni-td align="center">{{item.inQty}}</uni-td>
                    <uni-td align="center">{{item.matnr}}</uni-td>
                    <uni-td align="center">{{item.maktx}}</uni-td>
                    <uni-td align="center">{{item.state$}}</uni-td>
                    <uni-td>
                        <view class="flex justify-around">
                            <button class="cu-btn bg-orange sm">上 架</button>
                            <button class="cu-btn bg-red sm">撤销上架</button>
                <checkbox-group @change="checkbox">
                    <label v-for="(item,index) in data" :key="index" class="demo-list bg-false" :class="'bg-'+item.checked" >
                        <view class="demo-list-left">
                            <checkbox :value="item.id+''" :checked="item.checked" style="display: block;" />
                        </view>
                    </uni-td>
                </uni-tr>
            </uni-table>
                        <view class="demo-list-right">
                            <!-- <view><text style="font-weight: bold;">序号：{{index+1}}</text></view> -->
                            <view class="order-ditel"><text class="index">No.{{index+1}}</text><text class="orderNo">{{item.orderNo}}</text></view>
                            <view><text style="width: 400rpx;">商品编码：{{item.matnr}}</text></view>
                            <view>
                                <text>应入数量：{{item.anfme}}</text>
                                <text>商品名称：{{item.maktx}}</text>
                            </view>
                            <view>
                                <text>已入数量：{{item.inQty}}</text>
                                <text style="width: auto;">订单状态：</text><text :class="state$"> {{item.state$}}</text>
                            </view>
                        </view>
                    </label>
                </checkbox-group>
            </view>
        </scroll-view>
        <view class="foot flex justify-around">
            <label class="label-btn" style="width: 150rpx;">
                <checkbox :checked="check" @click="allChecked()">{{checkText}}</checkbox>
            </label>
            <label class="label-btn" style="width: 100rpx;">
                <text  @click="reChecked()">反选</text>
            </label>
			
            <label class="label-btn" style="width: 170rpx;">
                <button class="cu-btn bg-red ">撤销上架</button>
            </label>
            <label class="label-btn">
                <button class="cu-btn bg-blue " @click="shangjia()">上架</button>
            </label>
        </view>
    </view>
</template>
@@ -49,21 +53,21 @@
    export default {
        data() {
            return {
                tabData: [],
                searchData: {},
                orderNo: '',
                data: [],
                orderNo:'',
                needData:{},
                check:false,
                checkText:'全选',
                checkedData:[],
                state$:'',
            }
        },
        mounted(){
        mounted() {
            const UIP = uni.getStorageSync('UIP');
            this.baseIP = UIP;
            const UPORT = uni.getStorageSync('UPORT');
            this.basePORT = UPORT;
            this.render()
        },
        onLoad() {
			
        },
        methods: {
            // 搜索
@@ -77,26 +81,17 @@
            // 重置
            reset() {
                let that = this;
                if (that.orderNo == '') {
                    uni.vibrateShort();
                } else {
                    uni.vibrateLong();
                }
                that.orderNo = '';
                that.needData['order_no'] = '';
                that.getData();
				
				
            },
            // 获取表格数据
            getData() {
                let that = this
                uni.request({
                    url: that.baseHttp + that.baseIP + ':' +that.basePORT + that.baseUrl + "/receiveDetl/list/auth",
                    header:{'token':uni.getStorageSync('token')},
                    data: that.needData,
                    success(res) {
                        var res = res.data
                        if (res.code === 200) {
                            that.tabData = res.data.records
                        }
                    }
                })
            },
			
            // 表格加载
            render(param) {
                let that = this;
@@ -106,11 +101,251 @@
                } else {
                    that.getData();
                }
				
            },
            getData() {
                let that = this
                uni.request({
                    url: that.baseHttp + that.baseIP + ':' +that.basePORT + that.baseUrl + "/receiveDetl/list/auth",
                    header:{'token':uni.getStorageSync('token')},
                    data: that.needData,
                    success(res) {
                        var res = res.data
                        if (res.code === 200) {
                            that.data = res.data.records
                        }
                        for (var i = 0; i < that.data.length; i++) {
                            if (that.data[i].state$ == "未入库") {
                                that.state$ = 'color-red'
                            } else {
                                console.log(2)
                            }
							
                        }
                    }
                })
            },
            checkbox: function (e) {
                var items = this.data,
                    values = e.detail.value;
                for (var i = 0, lenI = items.length; i < lenI; ++i) {
                    const item = items[i]
                    item.id = item.id + ''
                    if(values.indexOf(item.id) >= 0){
                        this.$set(item,'checked',true)
                    }else{
                        this.$set(item,'checked',false)
                    }
                }
                if (values.length == items.length) {
                    this.check = true
                    this.checkText = "取消全选"
                } else {
                    this.check = false
                    this.checkText = "全选"
                }
                uni.vibrateShort();
            },
            reChecked() { // 反选
                var checkArr = []
                for (var i = 0; i < this.data.length;i++) {
                    if (this.data[i].checked == true) {
                        this.$set(this.data[i],'checked',false)
                    }else{
                        this.$set(this.data[i],'checked',true)
                    }
                    if (this.data[i].checked == true) {
                        checkArr.push(this.data[i].checked) 
                    }
                }
                if (checkArr.length == this.data.length) {
                    this.check = true
                    this.checkText = "取消全选"
                } else {
                    this.check = false
                    this.checkText = "全选"
                }
                uni.vibrateShort();
            },
            allChecked(e){ // 全选
                if (this.check == true) {
                    for (var i = 0; i < this.data.length;i++) {
                        this.$set(this.data[i],'checked',false)
                    }
                    this.check = false
                    this.checkText = "全选"
                } else {
                    for (var i = 0; i < this.data.length;i++) {
                        this.$set(this.data[i],'checked',true)
                    }
                    this.check = true
                    this.checkText = "取消全选"
                }
                uni.vibrateShort();
            },
            shangjia() {
                this.checkedData = []
                for (var i = 0; i < this.data.length; i++) {
                    if (this.data[i].checked == true) {
                        this.checkedData.push(this.data[i])
                    }
                }
                uni.vibrateShort();
                console.log(this.checkedData)
            }
        }
    }
</script>

<style>
    .search-box {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100rpx;
        background-color: #FFF;
        border-bottom: 1px solid #d8d8d8;
        border-radius: 0 0 20rpx 20rpx;
        z-index: 1;
    }
    /*#ifdef H5 */
    .search-box {
        position: fixed;
        left: 0;
        top: 60rpx;
        width: 100%;
        height: 100rpx;
        background-color: #ffffff;
        border-bottom: 1px solid #d8d8d8;
        border-radius: 0 0 20rpx 20rpx;
        z-index: 1;
    }
    /* #endif */
    .search-area {
        background-color: #F1F1F1;
        width: 96%;
        height: 70%;
        margin: 15rpx;
        border-radius: 15rpx;
    }
    .search-area input {
        display: inline-block;
        height: 70rpx;
        width: 70%;
        line-height: 70rpx;
        font-size: 25rpx;
        font-weight: 400;
    }
    .search-icon {
        display: inline-block;
        float: left;
        width: 70rpx;
        height: 70rpx;
        text-align: center;
        line-height: 70rpx;
		
    }
    .close-icon {
        display: inline-block;
        float: right;
        width: 70rpx;
        height: 70rpx;
        text-align: center;
        line-height: 70rpx;
    }
    .bg-false {
        background-color: #FFFFFF;
    }
    .bg-true {
        background-color: #ebebeb;
    }
	
    .demo-list {
        border-bottom: 1px solid #d8d8d8;
        height: 180rpx;
        margin: 15rpx;
        border-radius: 20rpx;
    }
    .demo-list:first-child {
        margin-top: 120rpx;
    }
    .demo-list:last-child {
        margin-bottom: 120rpx;
    }
    label {
        display: block;
    }
    .demo-list-left {
        display: inline-block;
        float: left;
        text-align: center;
        width: 100rpx;
        height: 180rpx;
        line-height: 180rpx;
    }
    .demo-list-right {
        display: inline-block;
        float: left;
        height: 180rpx;
        color: #828282;
    }
    .order-ditel {
        height: 60rpx;
        width: 600rpx;
        line-height: 60rpx;
    }

    .demo-list-right .index {
        width: 120rpx;
        height: 25rpx;
        line-height: 25rpx;
        font-size: 40rpx;
        border-right: 4rpx solid #6f6f6f;
        padding-left: 0px;
        padding-right: 10rpx;
        color: #3b3b3b;
        /* background-color: #007AFF; */
    }
    .demo-list-right .orderNo {
        padding-left: 30rpx;
        font-size: 35rpx;
        width: 400rpx;
        color: #3b3b3b;
        /* background-color: #0A98D5; */
    }
    .demo-list-right .vertical-bar { // 竖杠
        /* background-color: #6739B6; */
        width: 50rpx;
        font-size: 30rpx;
        text-align: center;
    }
    .demo-list-right text {
        display: inline-block;
        width: 250rpx;
        font-size: 25rpx;
    }
    .color-red {
        width: auto;
        font-weight: 700;
        color: #e74f4f;
    }
	
    .foot {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        background-color: #FFF;
        position: fixed;
        bottom: 0;
        border-top: 1px solid #d8d8d8;
        border-radius: 20rpx 20rpx 0 0 ;
        z-index: 1;
    }
    .label-btn {
        width: 150rpx;
    }
    checkbox {
        /* transform:scale(0.7) */
    }
	
</style>

 pages/login/login.vue

@@ -35,7 +35,7 @@
                </block>
    
                <!-- #ifdef APP-PLUS -->
                <view class="padding flex flex-direction  text-center">
                <view class="padding flex flex-direction  text-center" style="position: fixed;width: 80%;bottom: 0;text-align: center;">
                    当前版本:{{version}}
                </view>
                <!-- #endif -->