界面优化

schangxiang@126.com

2024-08-28 6667b0cc7e221402fd50582151457fcf9ac38622

界面优化

 yiqi_pda/api/api.js

@@ -1,8 +1,8 @@
// åŒæ—¶å‘送异步请求的次数，防止一次点击有多次请求
let ajaxTime = 0;
//export const baseUrl = 'http://localhost:7788'
//export const baseUrl = 'http://10.135.75.70:7788' //生产用
export const baseUrl = 'http://192.168.216.203:7788' //测试用
export const baseUrl = 'http://10.135.75.70:7788' //生产用
//export const baseUrl = 'http://192.168.216.203:7788' //测试用

// å…¬å…±çš„request方法
function request(option) {

 yiqi_pda/config/modules/ajax.js

@@ -1,9 +1,9 @@
export default {
    errMsg:'网络错误！',
    host:{  //接口调用的域名设置
        //'default':'http://10.135.75.70:7788',//生产用
        'default':'http://192.168.216.203:7788', //生产环境地址
         //'default':'http://localhost:7788',
         'default':'http://10.135.75.70:7788',//生产用
        //'default':'http://192.168.216.203:7788', //生产环境地址
        //'default':'http://localhost:7788',
        'mock':'http://localhost:3012'
    },
    block:{

 yiqi_pda/manifest.json

@@ -2,7 +2,7 @@
    "name" : "连杆线数采",
    "appid" : "__UNI__F24DEB0",
    "description" : "一汽连杆",
    "versionName" : "2.0.14",
    "versionName" : "2.0.16",
    "versionCode" : 6,
    "transformPx" : false,
    /* 5+App特有相关 */

 yiqi_pda/pages/outBound/index - ÐÞ¸ÄÇ°±¸·Ý.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,369 @@
<template>
    <default-header-page-layout ref="page" title="出库执行">

        <view class="page-frame with-action-user-row" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
            <action-user-row />
            <scan-input-form-item :inputFocus="inputFocus" v-model="OP80NewCode" class="forma-item" :label="baseTitile"
                :msg="msg" :msg-type="msgType" @search="onSearchContainter" @clear="onClearContainter" />
            <view class="with-action-user-row-page-content">


                <Content @deleteData="deleteData" :workPieceData="workPieceData" />
            </view>
            <modalPwd @reflesh="reflesh" ref="pwdRef" />
        </view>
        <template v-slot:footer>
            <view class="bottom-btns-row">
                <view class="btn-frame right-btn-frame">
                    <u-button :disabled="workPieceData.length<1" type="primary" text="确认出库"
                        @click="outBoundConfirm"></u-button>
                </view>
            </view>
        </template>
    </default-header-page-layout>
</template>

<script>
    import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
    import ActionUserRow from '@/components/ActionUserRow.vue'
    import ScanInputFormItem from './modules/ScanInputFormItem.vue'
    import Content from './modules/content.vue'
    import modalPwd from './modules/modalPwd.vue'
    import Vue from 'vue'
    import {
        parseDic,
        $alert,
        $successInfo
    } from '@/static/js/utils/index.js'
    import {
        getWorkPieceByOP80NewCode,
        outBoundWorkPiece,
        getOutBoundWorkPieceInfoCount
    } from '@/api/outBound/index.js'
    import {
        listbycode
    } from '@/api/common/index.js'
    export default {
        name: 'baseInPage',
        components: {
            DefaultHeaderPageLayout,
            ActionUserRow,
            ScanInputFormItem,
            Content,
            modalPwd
        },
        data() {
            return {
                barHeight: '',
                ckNumToday: "0", //今天总出库数
                baseTitile: '扫描成品码/工件二维码', //扫描成品码/工件二维码
                title: '',
                pageBodyHeight: 0,
                initInterVal: null,
                myInterval: null,
                msg: '',
                msgType: 'error',
                OP80NewCode: '',
                workPieceData: [],
                workPieceStatus: [],
                inputFocus: true,
                // codeLength:1
            }
        },
        onLoad() {
            var _this = this;
            _this._getOutBoundWorkPieceInfoCount();
            this.myInterval = setInterval(function() {
                _this._getOutBoundWorkPieceInfoCount();
            }, 1000 * 10);
            //this.myInterval=setInterval(this.myFun(), 3000);
        },
        methods: {
            // èŽ·å–工件信息
            async _getOutBoundWorkPieceInfoCount(OP80NewCode) {
                try {
                    let {
                        data
                    } = await getOutBoundWorkPieceInfoCount(null)
                    this.ckNumToday = data;
                } catch (e) {}
                this.setMsg();
            },
            // èŽ·å–工件信息
            async onSearchContainter(OP80NewCode) {
                // if (OP80NewCode.length > 22) {
                //     this.initFocus(100);

                //     uni.showToast({
                //         title: '工件码或成品码长度不正确',
                //         icon: 'error',
                //         duration: 2000,
                //         mask: true
                //     });
                //     return;
                // }
                this.inputFocus = false
                const param = {
                    OP80NewCode: OP80NewCode
                }
                try {
                    let {
                        data
                    } = await getWorkPieceByOP80NewCode(param)
                    if (!this.workPieceData.some(item => item.workPieceID == data.workPieceID)) {
                        data.addTime = new Date();
                        this.workPieceData.push(data)
                    }
                    //顺序调转，排序
                    this.workPieceData.sort((a, b) => b.addTime - a.addTime);

                    this.initFocus(100);
                    //console.log(this.workPieceData,'dsts');
                    // setTimeout(()=>{
                    //     this.OP80NewCode = '' ;//每次刷完就清空输入框 ã€Editby shaocx,2024-06-12】
                    //     this.inputFocus=true
                    // },100)
                } catch (e) {
                    //debugger
                    this.initFocus(100);
                    //TODO handle the exception
                    console.log(e);
                }
                //this.msg = " æ‰«ç æ•°:"+this.workPieceData.length+"    ä»Šæ—¥å‡ºåº“æ•°:";
                this.setMsg();
            },
            setMsg() {
                this.msg = " æ‰«ç æ•°:" + this.workPieceData.length + "    ä»Šæ—¥å‡ºåº“æ•°:" + this.ckNumToday;
            },
            initFocus(num) {
                setTimeout(() => {
                    this.OP80NewCode = ''; //每次刷完就清空输入框 ã€Editby shaocx,2024-06-12】
                    this.inputFocus = true
                }, num)
            },
            // èŽ·å–扫码长度
            // async listbycode(){
            //     try{
            //         let {data}=await listbycode({code:'outbound_code_length'})
            //         this.codeLength=data.length>0?Number.parseInt(data[0].label):1
            //     }catch(e){
            //         //TODO handle the exception
            //         console.log(e);
            //     }

            // },
            onClearContainter() {
                this.OP80NewCode = ''
            },
            deleteData(opt) {
                this.workPieceData = this.workPieceData.filter(item => item.workPieceID != opt.workPieceID)
                this.setMsg();
            },
            reflesh() {
                this.OP80NewCode = ''
                this.workPieceData = []
            },
            outBoundConfirm() {
                // å­˜åœ¨éžæˆå“
                const flag = this.workPieceData.some(item => item.workPieceState != 10)
                if (flag) {
                    uni.showModal({
                        title: '提示',
                        content: '当前工件存在非成品，确定强制出库吗？',
                        success: (value) => {
                            const {
                                confirm,
                                cancel
                            } = value
                            if (confirm) {
                                this.$refs.pwdRef.showModal(this.workPieceData)
                            }
                        }
                    })
                } else {
                    this.$refs.pwdRef.showModal(this.workPieceData)
                }

            },
            /* é¡µé¢åˆå§‹åŒ–获取页面body高度的定时器 */
            startInitInterval(callback) {
                this.initInterVal = setInterval(() => {
                    //console.log('bbb')
                    if (this.pageBodyHeight) {
                        this.clearInitInterval()
                        callback && callback()
                    } else {
                        this.pageBodyHeight = this.$refs.page.getBodyHeight()
                    }
                }, 200)
            },
            /* æ¸…除定时器 */
            clearInitInterval() {
                try {
                    //alert('执行');
                    clearInterval(this.initInterVal)
                    this.initInterVal = null
                } catch (e) {
                    //TODO handle the exception
                }
            },
            clearInitInterval2() {
                try {
                    clearInterval(this.myInterval)
                    this.myInterval = null
                } catch (e) {
                    //TODO handle the exception
                }
            },
            comfirmUpdate() {
                this.$refs.pwdRef.showModal(this.barDetail);
            },
            myFun() {
                console.log('aaaa')
            }
        },
        onReady() {
            this.setMsg();

            this.startInitInterval(() => {
                /* é¡µé¢åˆå§‹åŒ–后需要执行的代码在这边调用 */
                // this.listbycode()

            })
        },
        mounted() {
            // è®¾ç½®fixed定位
            //this.barHeight = Vue.prototype.CustomBar || 45
            this.barHeight = Vue.prototype.CustomBar
        },
        onUnload() {
            //alert(11); é¡µé¢ç¦»å¼€æ—¶
            this.clearInitInterval()
            this.clearInitInterval2();
        },
        //监听原生返回键
        onBackPress(e) {
            // æ­¤å¤„一定要return为true，否则页面不会返回到指定路径
            if (1 != 1) {
                return false //可返回
            } else {
                uni.showModal({
                    title: '提示',
                    content: '是否确认返回？',
                    showCancel: true,
                    cancelColor: '#333333',
                    success: (res => {
                        if (res.confirm) {
                            uni.redirectTo({
                                url: '/pages/home/index'
                            })
                        } else if (res.cancel) {

                        }
                    })
                });
                return true
            }
        },
    }
</script>

<style scoped lang="scss">
    .bottom-btns-row {
        display: flex;
        padding: 10rpx 0;
        background-color: #fff;

        .btn-frame {
            box-sizing: border-box;
        }

        .left-btn-frame {
            width: 30%;
            padding-left: 20rpx;
            padding-right: 8rpx;
        }

        .right-btn-frame {
            flex: 1;
            padding-right: 20rpx;
            padding-left: 8rpx;
        }

        .u-button {
            border: 2px solid #F08202;
        }
    }

    .forma-item {
        margin-bottom: 24rpx;
    }

    .material-item-group {
        background-color: $uni-bg-color;
        padding-top: 10rpx;

        .material-list-item {
            border-bottom: 2rpx solid $uni-border-color;
            padding-bottom: 10rpx;
            padding-left: 60rpx;
            margin-bottom: 10rpx;
            position: relative;

            &:last-child {
                border-bottom: 0;
            }

            .item-row {
                display: flex;

                &>.label {
                    flex-shrink: 0;
                    color: $u-tips-color;
                    width: 144rpx;
                }

                &>.content {
                    flex-grow: 1;
                    color: $u-content-color;

                    uni-input {
                        font: inherit;
                        color: $u-primary;
                        text-decoration: underline;
                    }
                }
            }

            .badge-box {
                position: absolute;
                top: 8rpx;
                left: 8rpx;
                z-index: 1;
            }

            .close-btn {
                $closeBtnSize: 70rpx;
                width: $closeBtnSize;
                height: $closeBtnSize;
                z-index: 1;
                position: absolute;
                top: 0rpx;
                right: 8rpx;
                background-color: $u-error;
                opacity: 0.6;
                border-radius: 25rpx;

                .icon-layer {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 2;
                }
            }
        }
    }
</style>

 yiqi_pda/pages/outBound/index.vue

@@ -73,9 +73,12 @@
        onLoad() {
            var _this = this;
            _this._getOutBoundWorkPieceInfoCount();
            //不再循环读
            /*
            this.myInterval = setInterval(function() {
                _this._getOutBoundWorkPieceInfoCount();
            }, 1000 * 10);
            //*/
            //this.myInterval=setInterval(this.myFun(), 3000);
        },
        methods: {
@@ -91,25 +94,27 @@
            },
            // èŽ·å–工件信息
            async onSearchContainter(OP80NewCode) {
                // if (OP80NewCode.length > 22) {
                //     this.initFocus(100);

                //     uni.showToast({
                //         title: '工件码或成品码长度不正确',
                //         icon: 'error',
                //         duration: 2000,
                //         mask: true
                //     });
                //     return;
                // }
                //debugger
                if (OP80NewCode.length != 21) {
                    this.initFocus(100);
                    // uni.showToast({
                    //     title: '工件码或成品码长度不正确',
                    //     icon: 'error',
                    //     duration: 2000,
                    //     mask: true
                    // });
                    return;
                }
				
                this.inputFocus = false
                const param = {
                    OP80NewCode: OP80NewCode
                }
                try {
                    let {
                        data
                    } = await getWorkPieceByOP80NewCode(param)
                    let data={};
                    data.addTime = new Date();
                    data.workPieceID=OP80NewCode;
                    data.oP80NewCode=OP80NewCode;
                    if (!this.workPieceData.some(item => item.workPieceID == data.workPieceID)) {
                        data.addTime = new Date();
                        this.workPieceData.push(data)
@@ -117,6 +122,7 @@
                    //顺序调转，排序
                    this.workPieceData.sort((a, b) => b.addTime - a.addTime);

                    this.OP80NewCode = ''; //每次刷完就清空输入框 ã€Editby shaocx,2024-06-12】
                    this.initFocus(100);
                    //console.log(this.workPieceData,'dsts');
                    // setTimeout(()=>{
@@ -162,8 +168,15 @@
            reflesh() {
                this.OP80NewCode = ''
                this.workPieceData = []
                setTimeout(() => {
                    this._getOutBoundWorkPieceInfoCount();
                    this.setMsg();
                }, 1000)
            },
            outBoundConfirm() {
                this.$refs.pwdRef.showModal(this.workPieceData)
				
                /*
                // å­˜åœ¨éžæˆå“
                const flag = this.workPieceData.some(item => item.workPieceState != 10)
                if (flag) {
@@ -183,6 +196,8 @@
                } else {
                    this.$refs.pwdRef.showModal(this.workPieceData)
                }
				
                //*/

            },
            /* é¡µé¢åˆå§‹åŒ–获取页面body高度的定时器 */

 yiqi_pda/pages/outBound/modules/ScanInputFormItem.vue

@@ -6,14 +6,15 @@
            <view class="input-view">
                <u-input ref="uinput" :focus="inputFocus" :clearable="clearable" border="none" :type="type"
                    :placeholder="placeholder" v-model.trim="innerValue" @clear="onClear" @blur="onBlur"
                    @change="onChange"
                    @confirm="onConfirm" />
            </view>
            <view class="scan-view">
            <!-- <view class="scan-view">
                <view @tap.stop="onScan"><u-icon name="scan" color="#F18201" :size="32"></u-icon></view>
            </view>
            <view class="btn-view" v-if="hasSearch">
                <view class="search-btn" @tap.stop="onSearch">搜</view>
            </view>
            </view> -->
        </view>
        <view class="msg-row" v-if="msg" :class="[msgType==='info'?'info-type':'']">{{msg}}</view>
    </view>
@@ -115,7 +116,14 @@
            onBlur() {
                this.$emit('blur', this.innerValue)
            },
            onChange(val) {
                //debugger
                //alert(val);
                this.$emit('search', val)
            },
            onConfirm(val) {
                //debugger
                /*
                if(val!=this.innerValue) {
                    this.confirmType='auto'
                }
@@ -123,6 +131,7 @@
                if(val) {
                    this.$emit('search', val)
                }
                //*/
            },
        },
        created() {

 yiqi_pda/pages/outBound/modules/content - ¸±±¾.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,129 @@
<template>
    <u-swipe-action>
        <u-swipe-action-item v-for="(item,index) in workPieceData" :key="index" :options="options" 
            :name="index" @click="actionClick" style="margin-bottom: 10rpx;background-color: #fff;">
        <view class="content" >
            <view class="content_flex">
                <view class="flex_index">{{workPieceData.length-index}}</view>
                <view class="flex_code">OP80成品码: {{item.oP80NewCode}}</view>
                <view class="flex_status">{{item.qualityStateName}}</view>
            </view>
            <view class="content_flex">
                <view class="flex_color" style="width: 100%;">工件号: {{item.workPieceID}}</view>
                <!-- <view class="flex_color" style="text-align: right;">当前工序: {{item.workingProcedureCurrent}}</view> -->
            </view>
            <view class="content_flex">
                <view class="flex_color" style="width: 100%;">工件状态: {{item.workPieceStateName}}</view>
            </view>
            <view class="content_flex">
                <view class="flex_color" style="width: 100%;">当前工序: {{item.workingProcedureCurrent}}</view>
            </view>
            <view class="content_flex">
                <view class="flex_color" style="width: 100%;">设备编号: {{item.equipmentID}}</view>
            </view>
        </view>
    </u-swipe-action-item>
    </u-swipe-action>
</template>

<script>
    export default {
        props: {
            workPieceData: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                options: [{
                    text: "移除",
                    style: {
                        background: '#F08202'
                    }
                }],
            }
        },
        methods:{
            actionClick(opt){
                uni.showModal({
                title: '提示',
                content: '是否确认移除工件号"'+this.workPieceData[opt.name].workPieceID+'"？',
                showCancel: true,
                cancelColor: '#333333',
                success: (res => {
                        if (res.confirm) {
                            console.log('移除',opt);
                            this.$emit('deleteData',this.workPieceData[opt.name])
                        } else if (res.cancel) {
						
                        }
                    })
                });
				
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        background-color: #fff;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #fff;
        padding: 15rpx;
        margin-bottom: 10rpx;

        .content_flex {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 5rpx;

            .flex_index {
                width: 50rpx;
                height: 50rpx;
                background: $color-common;
                color: #fff;
                font-size: 30rpx;
                line-height: 50rpx;
                text-align: center;
                border-radius: 50%;
                margin-right: 15rpx;
            }

            .flex_code {
                font-size: 32rpx;
                color: $color-common;
                width: 75%;
            }

            .flex_status {
                width: 90rpx;
                text-align: center;
                padding: 10rpx;
                background: $color-common;
                color: #fff;
                font-weight: 550;
                align-self: flex-end;

            }

            .flex_color {
                font-size: 32rpx;
                color: #000;
                width: 75%;

            }
			
            .card-action {
                width: 100%;
                display: flex;
                justify-content: flex-end;
                align-items: center;
            }

        }
    }
</style>

 yiqi_pda/pages/outBound/modules/content.vue

@@ -5,12 +5,11 @@
        <view class="content" >
            <view class="content_flex">
                <view class="flex_index">{{workPieceData.length-index}}</view>
                <view class="flex_code">OP80成品码: {{item.oP80NewCode}}</view>
                <view class="flex_status">{{item.qualityStateName}}</view>
                <view class="flex_code">成品码: {{item.oP80NewCode}}</view>
                <!-- <view class="flex_status">{{item.qualityStateName}}</view> -->
            </view>
            <view class="content_flex">
            <!-- <view class="content_flex">
                <view class="flex_color" style="width: 100%;">工件号: {{item.workPieceID}}</view>
                <!-- <view class="flex_color" style="text-align: right;">当前工序: {{item.workingProcedureCurrent}}</view> -->
            </view>
            <view class="content_flex">
                <view class="flex_color" style="width: 100%;">工件状态: {{item.workPieceStateName}}</view>
@@ -20,7 +19,7 @@
            </view>
            <view class="content_flex">
                <view class="flex_color" style="width: 100%;">设备编号: {{item.equipmentID}}</view>
            </view>
            </view> -->
        </view>
    </u-swipe-action-item>
    </u-swipe-action>