h5出库入库

Mr.Shi

2023-08-14 571da48131c3647c6e1468aab82c5b7e8a14ac28

h5出库入库

 h5_standard/.env.development

@@ -12,17 +12,14 @@
# èå§æœ¬åœ°
# VUE_APP_API = 'http://192.168.0.12:10012/'


# ä»»åº·æœ¬åœ°
VUE_APP_API = 'http://192.168.0.15:10021/'
# VUE_APP_API = 'http://192.168.0.15:10021/'

# VUE_APP_API = 'https://dmtest.ahapp.net/doumeeplant_api/'
VUE_APP_API = 'https://dmtest.ahapp.net/doumeeplant_api/'

# VUE_APP_API = 'http://192.168.0.13:10012/'

# VUE_APP_API = 'http://192.168.0.15:10012/'



# åˆ˜ç£Šç£Š
# VUE_APP_API = 'http://192.168.0.18:10012/'
# VUE_APP_API = 'http://192.168.0.18:10012/'

 h5_standard/src/apis/WorkOrderAPI.ts

@@ -469,4 +469,22 @@
      method: 'get',
      params
  })
}

// æ–°å¢žå‡ºåº“
export function createForStandard (data: any): Promise<any> {
    return httpRequest({
        url: '/ext/wOutboundExt/createForStandard',
        method: 'post',
        data
    })
}

// åº“存调整、采购入库入库单创建
export function wOutBoundForStockUp (data: any): Promise<any> {
    return httpRequest({
        url: '/ext/wOutboundExt/wOutBoundForStockUp',
        method: 'post',
        data
    })
}

 h5_standard/src/components/common/Warehouse.vue

@@ -2,7 +2,7 @@
    <van-popup
        v-model:show="props.show"
        position="bottom"
        :style="{ height: '100%' }">
        :style="{ height: props.height }">
        <div class="title">
            <div class="close" @click="close"><van-icon name="arrow-down" size="30" color="#ffffff" /></div>
        </div>
@@ -16,8 +16,7 @@
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="没有更多了~"
                    @load="onLoad"
                >
                    @load="onLoad">
                    <div class="content_list">
                        <div class="content_list_item" v-for="(item, i) in list" :key="i" @click="jump(item)">
                            <div class="content_list_item_name">{{item.name}}</div>
@@ -136,6 +135,10 @@
        systemDicDataId: {
            type: String,
            default: ''
        },
        height: {
            type: String,
            default: '100%'
        }
    })


 h5_standard/src/components/newCom/Material.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,375 @@
<template>
    <van-popup
        v-model:show="props.show"
        position="bottom"
        :style="{ height: '80%' }">
        <div class="title">
            <div class="close" @click="close"><van-icon name="arrow-down" size="30" color="#ffffff" /></div>
        </div>
        <div class="content">
            <div class="content_search content_top">
                <v-Search @searchInput="searchInput" @submit="submit" :isShow="false" placeholder="搜索物料名称"></v-Search>
            </div>
            <div class="content_total">共{{form.total}}条数据</div>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="没有更多了~"
                    @load="onLoad"
                >
                    <div class="content_list">
                        <!-- <div class="page_content" v-for="(item1, idx) in list" :key="idx" @click="jump(item1)">
                            <div class="page_content_title">
                                <div class="page_content_title_top">
                                    <span v-if="item1.batch">{{ item1.mmodelUnionName + ' | ' + item1.mmodelCode }}</span>
                                    <span v-else>{{ item1.mmodelUnionName + ' | ' + item1.mmodelCode }}</span>
                                    <span>{{item1.outActnum}}{{item1.unitName}}</span>
                                </div>
                                <div class="page_content_title_bottom">
                                    <span class="green" v-if="item1.qualityType === 0">合格&nbsp;<span class="black">/</span>&nbsp;</span>
                                    <span class="warning" v-else-if="item1.qualityType === 1">不良&nbsp;<span class="black">/</span>&nbsp;</span>
                                    <span class="error" v-else-if="item1.qualityType === 2">报废&nbsp;<span class="black">/</span>&nbsp;</span>
                                    <span v-else>-&nbsp;/&nbsp;</span>
                                    <span>{{item1.procedureName ? item1.procedureName : '-'}}&nbsp;/&nbsp;</span>
                                    <span>{{item1.batch ? item1.batch : '-'}}</span>
                                </div>
                            </div>
                        </div> -->
                        <div class="content_list_item" v-for="(item, i) in list" :key="i" @click="jump(item)">
                            <div class="content_list_item_name">{{item.mmodelUnionName}}</div>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </van-popup>
</template>

<script setup lang="ts">
    import { defineProps, defineEmits, onMounted, ref, reactive } from 'vue'
    import { materialDistributeExt } from '@/apis/ExWarehouse'
    import { model } from '@/interface'
    import { judgmentPlatform } from "@/utils/utils"
    import vSearch from '@/components/common/Search.vue'

    // æœç´¢æ•°æ®æŽ¥å£
    interface form extends model {
        total: number,
        name: string
    }

    const form = reactive<form>({
        capacity: 50,
        page: 0,
        total: 0,
        name: '',
    })

    // æœç´¢åˆ†ç±»æ ‡ç­¾
    let tagList = ref<Array<{id: string, name: string, num: string}>>([])

    // åˆ—表数据
    const list: any = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false)
    let isOne = ref<boolean>(true)

    // æœç´¢æ¡†
    const searchInput = (data: any) => {
        form.page = 0
        finished.value = false
        list.value = []
        form.name = data
        onLoad()
    }

    // æœç´¢æäº¤
    const submit = (): void => {
        form.page = 0
        finished.value = false
        list.value = []
        onLoad()
    }

    // è¿”回上一页带参数
    const jump = (item: any) => {
        emit('value', item)
    }

    // èŽ·å–物料列表数据
    const onLoad = async () => {
        if (!finished.value) {
            loading.value = true;
            form.page = form.page + 1
            materialDistributeExt({
                capacity: form.capacity,
                page: form.page,
                model: {
                    mmodelUnionName: form.name,
                    status: 1
                }
            }).then(res => {
                if (refreshing.value) {
                    list.value = []
                    refreshing.value = false;
                }
                loading.value = false;
                if (res.code === 200 && res.data.records && res.data.records.length !== 0) {
                    form.total = res.data.total
                    list.value.push(...res.data.records)
                } else {
                    finished.value = true;
                }
            }).catch((err: any) => {
                loading.value = false;
                finished.value = true;
                if (refreshing.value) {
                    list.value = []
                    refreshing.value = false;
                }
            })
        }
    }

    // ä¸‹æ‹‰åˆ·æ–°ä¼˜åŒ–页面
    const onRefresh = () => {
        finished.value = false;
        form.page = 0
        loading.value = true;
        onLoad()
    }

    let status = ref<boolean>(false)

    const props = defineProps({
        show: {
            type: Boolean,
            required: true
        }
    })

    const emit = defineEmits(['close', 'value'])

    // å…³é—­å›žè°ƒ
    const close = () => {
        emit('close')
    }

    onMounted(() => {
        status.value = judgmentPlatform()
    })
</script>

<style lang="scss" scoped>
    .title {
        position: fixed;
        right: 50px;
        bottom: 100px;
        z-index: 9;
        .close {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #999999;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .content {
        .content_code {
            position: fixed;
            right: 30px;
            bottom: 100px;
            img {
                width: 138px;
                height: 138px;
            }
        }
        .content_top {
            top: 0 !important;
        }
        .content_search {
            padding: 30px;
            background: white;
            position: sticky;
            top: 88px;
            z-index: 9;
            .content_search_x {
                height: 24px;
            }
        }
        .content_total {
            padding: 24px 30px;
            background: #F7F7F7;
            font-size: 24px;
            font-weight: 400;
            color: #666666;
            position: sticky;
            z-index: 99;
            top: 127px;
        }
        .content_list {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            .page_content {
                margin-top: 36px;
                padding: 0 30px;
                box-sizing: border-box;
                .page_content_title {
                    display: flex;
                    flex-direction: column;
                    margin-bottom: 10px;
                    .page_content_title_top {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        span {
                            &:nth-child(1) {
                                font-size: 30px;
                                font-weight: 500;
                                color: #222222;
                            }
                            &:nth-child(2) {
                                flex-shrink: 0;
                                font-size: 24px;
                                font-weight: 400;
                                color: #333333;
                                span {
                                    font-size: 24px;
                                    color: $nav-color;
                                }
                            }
                        }
                    }
                    .page_content_title_bottom {
                        .green {
                            color: $nav-stateColor7 !important;
                            .black {
                                color: black !important;
                            }
                        }
                        .warning {
                            color: $nav-stateColor5 !important;
                            .black {
                                color: black !important;
                            }
                        }
                        .error {
                            color: $nav-stateColor4 !important;
                            .black {
                                color: black !important;
                            }
                        }
                        span {
                            font-size: 24px;
                            font-weight: 400;
                            color: #666666;
                        }
                    }
                }
                .lineBorder {
                    border: none !important;
                    padding-bottom: 0 !important;
                    margin-bottom: 24px;
                }
                .page_content_list {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    &:first-child {
                        margin: 0;
                    }
                    &:last-child {
                        border: none;
                    }
                    .page_content_list_nums {
                        width: 30%;
                        display: flex;
                        .page_content_list_num_label {
                            font-size: 26px;
                            font-weight: 400;
                            color: #666666;
                        }
                        .page_content_list_num_nr {
                            font-size: 26px;
                            font-weight: 400;
                            color: #222222;
                        }
                    }
                    .page_content_list_num {
                        width: 70%;
                        display: flex;
                        .page_content_list_num_label {
                            font-size: 26px;
                            font-weight: 400;
                            color: #666666;
                        }
                        .page_content_list_num_nr {
                            font-size: 26px;
                            font-weight: 400;
                            color: #222222;
                        }
                    }
                    .page_content_list_items {
                        width: 30%;
                        display: flex;
                        margin-top: 24px;
                        .page_content_list_item_label {
                            font-size: 26px;
                            font-weight: 400;
                            color: #666666;
                            flex-shrink: 0;
                        }
                        .page_content_list_item_nr {
                            font-size: 26px;
                            font-weight: 400;
                            color: #222222;
                        }
                    }
                    .page_content_list_item {
                        width: 70%;
                        display: flex;
                        .page_content_list_item_label {
                            font-size: 26px;
                            font-weight: 400;
                            color: #666666;
                            flex-shrink: 0;
                        }
                        .page_content_list_item_nr {
                            font-size: 26px;
                            font-weight: 400;
                            color: #222222;
                        }
                    }
                }
            }
            .content_list_item {
                padding: 30px;
                display: flex;
                border-bottom: 1px solid #ececec;
                .serious {
                    color: $nav-stateColor4 !important;
                }
                .success {
                    color: $nav-stateColor2 !important;
                }
                .warning {
                    color: $nav-stateColor5 !important;
                }
                .content_list_item_status {
                    font-size: 28px;
                    margin-right: 10px;
                }
                .content_list_item_name {
                    font-size: 28px;
                }
            }
        }
    }
</style>

 h5_standard/src/components/newCom/location.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,256 @@
<template>
    <van-popup
        v-model:show="props.show"
        position="bottom"
        :style="{ height: '60%' }">
        <div class="title">
            <div class="close" @click="close"><van-icon name="arrow-down" size="30" color="#ffffff" /></div>
        </div>
        <div class="content">
            <div class="content_list">
                <div class="content_list_item" v-for="(item, i) in props.list" :key="i" @click="jump(item)">
                    <div class="content_list_item_name">{{item.unionName}}</div>
                </div>
            </div>
        </div>
    </van-popup>
</template>

<script setup lang="ts">
    import { defineProps, defineEmits, ref } from 'vue'

    // è¿”回上一页带参数
    const jump = (item: any) => {
        emit('value', item)
    }

    const props: any = defineProps({
        show: {
            type: Boolean,
            required: true
        },
        list: {
            type: Array,
            required: true
        }
    })

    const emit = defineEmits(['close', 'value'])

    // å…³é—­å›žè°ƒ
    const close = () => {
        emit('close')
    }
</script>

<style lang="scss" scoped>
    .title {
        position: fixed;
        right: 50px;
        bottom: 100px;
        z-index: 9;
        .close {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #999999;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .content {
        .content_code {
            position: fixed;
            right: 30px;
            bottom: 100px;
            img {
                width: 138px;
                height: 138px;
            }
        }
        .content_top {
            top: 0 !important;
        }
        .content_search {
            padding: 30px;
            background: white;
            position: sticky;
            top: 88px;
            z-index: 9;
            .content_search_x {
                height: 24px;
            }
        }
        .content_total {
            padding: 24px 30px;
            background: #F7F7F7;
            font-size: 24px;
            font-weight: 400;
            color: #666666;
            position: sticky;
            z-index: 99;
            top: 127px;
        }
        .content_list {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            .page_content {
                margin-top: 36px;
                padding: 0 30px;
                box-sizing: border-box;
                .page_content_title {
                    display: flex;
                    flex-direction: column;
                    margin-bottom: 10px;
                    .page_content_title_top {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        span {
                            &:nth-child(1) {
                                font-size: 30px;
                                font-weight: 500;
                                color: #222222;
                            }
                            &:nth-child(2) {
                                flex-shrink: 0;
                                font-size: 24px;
                                font-weight: 400;
                                color: #333333;
                                span {
                                    font-size: 24px;
                                    color: $nav-color;
                                }
                            }
                        }
                    }
                    .page_content_title_bottom {
                        .green {
                            color: $nav-stateColor7 !important;
                            .black {
                                color: black !important;
                            }
                        }
                        .warning {
                            color: $nav-stateColor5 !important;
                            .black {
                                color: black !important;
                            }
                        }
                        .error {
                            color: $nav-stateColor4 !important;
                            .black {
                                color: black !important;
                            }
                        }
                        span {
                            font-size: 24px;
                            font-weight: 400;
                            color: #666666;
                        }
                    }
                }
                .lineBorder {
                    border: none !important;
                    padding-bottom: 0 !important;
                    margin-bottom: 24px;
                }
                .page_content_list {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    &:first-child {
                        margin: 0;
                    }
                    &:last-child {
                        border: none;
                    }
                    .page_content_list_nums {
                        width: 30%;
                        display: flex;
                        .page_content_list_num_label {
                            font-size: 26px;
                            font-weight: 400;
                            color: #666666;
                        }
                        .page_content_list_num_nr {
                            font-size: 26px;
                            font-weight: 400;
                            color: #222222;
                        }
                    }
                    .page_content_list_num {
                        width: 70%;
                        display: flex;
                        .page_content_list_num_label {
                            font-size: 26px;
                            font-weight: 400;
                            color: #666666;
                        }
                        .page_content_list_num_nr {
                            font-size: 26px;
                            font-weight: 400;
                            color: #222222;
                        }
                    }
                    .page_content_list_items {
                        width: 30%;
                        display: flex;
                        margin-top: 24px;
                        .page_content_list_item_label {
                            font-size: 26px;
                            font-weight: 400;
                            color: #666666;
                            flex-shrink: 0;
                        }
                        .page_content_list_item_nr {
                            font-size: 26px;
                            font-weight: 400;
                            color: #222222;
                        }
                    }
                    .page_content_list_item {
                        width: 70%;
                        display: flex;
                        .page_content_list_item_label {
                            font-size: 26px;
                            font-weight: 400;
                            color: #666666;
                            flex-shrink: 0;
                        }
                        .page_content_list_item_nr {
                            font-size: 26px;
                            font-weight: 400;
                            color: #222222;
                        }
                    }
                }
            }
            .content_list_item {
                padding: 30px;
                display: flex;
                border-bottom: 1px solid #ececec;
                .serious {
                    color: $nav-stateColor4 !important;
                }
                .success {
                    color: $nav-stateColor2 !important;
                }
                .warning {
                    color: $nav-stateColor5 !important;
                }
                .content_list_item_status {
                    font-size: 28px;
                    margin-right: 10px;
                }
                .content_list_item_name {
                    font-size: 28px;
                }
            }
        }
    }
</style>

 h5_standard/src/components/newCom/quality.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,259 @@
<template>
    <van-popup
        v-model:show="props.show"
        position="bottom"
        :style="{ height: '60%' }">
        <div class="title">
            <div class="close" @click="close"><van-icon name="arrow-down" size="30" color="#ffffff" /></div>
        </div>
        <div class="content">
            <div class="content_list">
                <div class="content_list_item" v-for="(item, i) in list" :key="i" @click="jump(item)">
                    <div class="content_list_item_name">{{item.name}}</div>
                </div>
            </div>
        </div>
    </van-popup>
</template>

<script setup lang="ts">
    import { defineProps, defineEmits, ref } from 'vue'

    let list = ref([
        { name: '合格', id: '0' },
        { name: '不良', id: '1' },
        { name: '报废', id: '2' },
        { name: '混合', id: '3' }
    ])

    // è¿”回上一页带参数
    const jump = (item: any) => {
        emit('value', item)
    }

    const props: any = defineProps({
        show: {
            type: Boolean,
            required: true
        }
    })

    const emit = defineEmits(['close', 'value'])

    // å…³é—­å›žè°ƒ
    const close = () => {
        emit('close')
    }
</script>

<style lang="scss" scoped>
    .title {
        position: fixed;
        right: 50px;
        bottom: 100px;
        z-index: 9;
        .close {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #999999;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .content {
        .content_code {
            position: fixed;
            right: 30px;
            bottom: 100px;
            img {
                width: 138px;
                height: 138px;
            }
        }
        .content_top {
            top: 0 !important;
        }
        .content_search {
            padding: 30px;
            background: white;
            position: sticky;
            top: 88px;
            z-index: 9;
            .content_search_x {
                height: 24px;
            }
        }
        .content_total {
            padding: 24px 30px;
            background: #F7F7F7;
            font-size: 24px;
            font-weight: 400;
            color: #666666;
            position: sticky;
            z-index: 99;
            top: 127px;
        }
        .content_list {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            .page_content {
                margin-top: 36px;
                padding: 0 30px;
                box-sizing: border-box;
                .page_content_title {
                    display: flex;
                    flex-direction: column;
                    margin-bottom: 10px;
                    .page_content_title_top {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        span {
                            &:nth-child(1) {
                                font-size: 30px;
                                font-weight: 500;
                                color: #222222;
                            }
                            &:nth-child(2) {
                                flex-shrink: 0;
                                font-size: 24px;
                                font-weight: 400;
                                color: #333333;
                                span {
                                    font-size: 24px;
                                    color: $nav-color;
                                }
                            }
                        }
                    }
                    .page_content_title_bottom {
                        .green {
                            color: $nav-stateColor7 !important;
                            .black {
                                color: black !important;
                            }
                        }
                        .warning {
                            color: $nav-stateColor5 !important;
                            .black {
                                color: black !important;
                            }
                        }
                        .error {
                            color: $nav-stateColor4 !important;
                            .black {
                                color: black !important;
                            }
                        }
                        span {
                            font-size: 24px;
                            font-weight: 400;
                            color: #666666;
                        }
                    }
                }
                .lineBorder {
                    border: none !important;
                    padding-bottom: 0 !important;
                    margin-bottom: 24px;
                }
                .page_content_list {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    &:first-child {
                        margin: 0;
                    }
                    &:last-child {
                        border: none;
                    }
                    .page_content_list_nums {
                        width: 30%;
                        display: flex;
                        .page_content_list_num_label {
                            font-size: 26px;
                            font-weight: 400;
                            color: #666666;
                        }
                        .page_content_list_num_nr {
                            font-size: 26px;
                            font-weight: 400;
                            color: #222222;
                        }
                    }
                    .page_content_list_num {
                        width: 70%;
                        display: flex;
                        .page_content_list_num_label {
                            font-size: 26px;
                            font-weight: 400;
                            color: #666666;
                        }
                        .page_content_list_num_nr {
                            font-size: 26px;
                            font-weight: 400;
                            color: #222222;
                        }
                    }
                    .page_content_list_items {
                        width: 30%;
                        display: flex;
                        margin-top: 24px;
                        .page_content_list_item_label {
                            font-size: 26px;
                            font-weight: 400;
                            color: #666666;
                            flex-shrink: 0;
                        }
                        .page_content_list_item_nr {
                            font-size: 26px;
                            font-weight: 400;
                            color: #222222;
                        }
                    }
                    .page_content_list_item {
                        width: 70%;
                        display: flex;
                        .page_content_list_item_label {
                            font-size: 26px;
                            font-weight: 400;
                            color: #666666;
                            flex-shrink: 0;
                        }
                        .page_content_list_item_nr {
                            font-size: 26px;
                            font-weight: 400;
                            color: #222222;
                        }
                    }
                }
            }
            .content_list_item {
                padding: 30px;
                display: flex;
                border-bottom: 1px solid #ececec;
                .serious {
                    color: $nav-stateColor4 !important;
                }
                .success {
                    color: $nav-stateColor2 !important;
                }
                .warning {
                    color: $nav-stateColor5 !important;
                }
                .content_list_item_status {
                    font-size: 28px;
                    margin-right: 10px;
                }
                .content_list_item_name {
                    font-size: 28px;
                }
            }
        }
    }
</style>

 h5_standard/src/router/module/needToBeDealtWith/index.ts

@@ -29,7 +29,7 @@
                path: '/needToBeDealtWith/outbound',
                name: 'outbound',
                meta: {
                    title: '出库',
                    title: '新增出库',
                    keepAlive: false
                },
                component: () => import('@/views/needToBeDealtWith/outbound.vue')
@@ -38,7 +38,7 @@
                path: '/needToBeDealtWith/addWarehousing',
                name: 'addWarehousing',
                meta: {
                    title: '入库',
                    title: '新增入库',
                    keepAlive: false
                },
                component: () => import('@/views/needToBeDealtWith/addWarehousing.vue')

 h5_standard/src/router/module/workOrder/index.ts

@@ -186,6 +186,15 @@
                    keepAlive: false
                },
                component: () => import('@/views/workOrder/location.vue')
            },
            {
                path: '/workOrder/reportingForWork',
                name: 'reportingForWork',
                meta: {
                    title: '一键报工',
                    keepAlive: false
                },
                component: () => import('@/views/workOrder/reportingForWork.vue')
            }
        ]
    }

 h5_standard/src/views/needToBeDealtWith/addWarehousing.vue

@@ -1,18 +1,511 @@
<template>
    <div class="page">
        æ–°å¢žå…¥åº“
    <div class="rework">
        <div class="rework_list">
            <div class="rework_list_item" @click="typeShow = true">
                <span><b>*</b>单据类型</span>
                <div class="rework_list_item_right">
                    <span :class="form.typeName ? 'black' : ''">{{form.typeName ? form.typeName : '请选择'}}</span>
                    <van-icon name="arrow" size="20" color="#999999" />
                </div>
            </div>
            <div class="rework_list_item" @click="warehouseShow = true">
                <span><b>*</b>入库仓库</span>
                <div class="rework_list_item_right">
                    <span :class="form.warehouseName ? 'black' : ''">{{form.warehouseName ? form.warehouseName : '请选择'}}</span>
                    <van-icon name="arrow" size="20" color="#999999" />
                </div>
            </div>
        </div>
        <div class="rework_qd">
            <div class="rework_qd_title">
                <div class="rework_qd_title_left">
                    <div class="x"></div>
                    <span>{{`入库物料清单${list.length}`}}</span>
                </div>
                <div class="rework_qd_title_right" @click="addItem">
                    <img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt="" />
                    <span>增加入库</span>
                </div>
            </div>
            <van-swipe-cell v-for="(item, index) in list" :key="index">
                <div class="rework_qd_list">
                    <div class="rework_qd_item" @click="openL(index)">
                        <span><b>*</b>入库货位</span>
                        <div class="rework_qd_item_right">
                            <span :class="item.locationName ? 'black' : ''">{{item.locationName ? item.locationName : '请选择'}}</span>
                            <van-icon name="arrow" size="20" color="#999999" />
                        </div>
                    </div>
                    <div class="rework_qd_item" @click="openMaterial(index)">
                        <span><b>*</b>入库物料</span>
                        <div class="rework_qd_item_right">
                            <span :class="item.materialName ? 'black' : ''">{{item.materialName ? item.materialName : '请选择'}}</span>
                            <van-icon name="arrow" size="20" color="#999999" />
                        </div>
                    </div>
                    <!-- <div class="rework_qd_item" v-if="form.type != 25">
                        <span>生产工序</span>
                        <div class="rework_qd_item_right">
                            <span :class="item.procedureName ? 'black' : ''">{{item.procedureName ? item.procedureName : '请选择'}}</span>
                            <van-icon name="arrow" size="20" color="#999999" />
                        </div>
                    </div> -->
                    <div class="rework_qd_item" @click="openQ(index)">
                        <span><b>*</b>质量属性</span>
                        <div class="rework_qd_item_right">
                            <span :class="item.qualityTypeName ? 'black' : ''">{{item.qualityTypeName ? item.qualityTypeName : '请选择'}}</span>
                            <van-icon name="arrow" size="20" color="#999999" />
                        </div>
                    </div>
                    <div class="rework_qd_item">
                        <span>批次号</span>
                        <div class="rework_qd_item_right">
                            <input type="text" v-model="item.batch" placeholder="请输入" />
                        </div>
                    </div>
                    <div class="rework_qd_item">
                        <span><b>*</b>入库数量<template v-if="item.unitName">({{ item.unitName }})</template></span>
                        <div class="rework_qd_item_right">
                            <input type="text" v-model="item.num" placeholder="0" />
                        </div>
                    </div>
                </div>
                <template #right>
                    <van-button style="height: 100%;" square type="danger" text="删除" @click="dele(index)" />
                </template>
            </van-swipe-cell>
        </div>
        <div class="rework_zw"></div>
        <div class="rework_footer">
            <button class="rework_footer_submit" @click="onConfirm">提交</button>
        </div>
        <!-- ä»“库 -->
        <Warehouse :show="warehouseShow" @close="close" @value="getValue" />
        <!-- ç‰©æ–™ -->
        <Material :show="materialsShow" @close="close1" @value="getValue1" />
        <!-- è´¨é‡å±žæ€§ -->
        <Quality :show="qualityShow" @close="close2" @value="getValue2" />
        <!-- é€‰æ‹©è´§ä½ -->
        <Location :show="locationShow" :list="locationList" @close="close3" @value="getValue3" />
        <!-- å•æ®ç±»åž‹ -->
        <van-popup v-model:show="typeShow" position="bottom" :style="{ height: '50%' }">
            <van-picker
                :columns="columns"
                @confirm="onConfirm1"
                @cancel="onCancel"
                :columns-field-names="customFieldName"
            />
        </van-popup>
    </div>
</template>

<script setup lang="ts">
    import { onMounted, ref, reactive } from 'vue'
    import { useRouter } from 'vue-router'
    import { Toast } from 'vant'
    import { createForStandard, getListByWarehouseId, wOutBoundForStockUp } from '@/apis/WorkOrderAPI'
    import Warehouse from '@/components/common/Warehouse.vue'
    import Material from '@/components/newCom/Material.vue'
    import Quality from '@/components/newCom/quality.vue'
    import Location from '@/components/newCom/location.vue'

    const router = useRouter()
    // è¡¨å•æ•°æ®
    let form: any = reactive({
        warehouseName: '',
        warehouseId: '',
        type: '',
        typeName: ''
    })

    let locationList: any = ref([])

    let i = ref(0)

    let columns = ref([
        { name: '采购入库', id: 25 },
        { name: '库存调整', id: 28 }
    ])
    const customFieldName = {
      text: 'name'
    };
    let list = ref<Array<any>>([
        {
            batch: '',
            locationId: '',
            locationName: '',
            materialId: '',
            materialName: '',
            num: '',
            procedureId: '',
            procedureName: '',
            qualityType: '',
            qualityTypeName: '',
            unitId: '',
            unitName: ''
        }
    ])
    let warehouseShow = ref<boolean>(false)
    let materialsShow = ref<boolean>(false)
    let qualityShow = ref<boolean>(false)
    let locationShow = ref<boolean>(false)
    let typeShow = ref<boolean>(false)

    // æ‰“开选择物料
    const openMaterial = (index: number) => {
        i.value = index
        materialsShow.value = true
    }
    // æ‰“开选择物料
    const openQ = (index: number) => {
        i.value = index
        qualityShow.value = true
    }
    // æ‰“开选择货位
    const openL = (index: number) => {
        if (!form.warehouseId) return Toast('请选择入库仓库')
        i.value = index
        locationShow.value = true
    }
    const addItem = () => {
        // if (!form.warehouseId) return Toast('请选择入库仓库')
        list.value.push({
            batch: '',
            locationId: '',
            locationName: '',
            materialId: '',
            materialName: '',
            num: '',
            procedureId: '',
            procedureName: '',
            qualityType: '',
            qualityTypeName: '',
            unitId: '',
            unitName: ''
        })
    }

    const onConfirm1 = (value: any) => {
        form.typeName = value.name
        form.type = value.id
        typeShow.value = false
    };
    const onCancel = () => {
        typeShow.value = false
    }
    
    // èŽ·å–当天年月日
    const getDay = () => {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        return `${year}-${month <= 9 ? `0${month}` : month}-${day <= 9 ? `0${day}` : day}`
    }

    // æäº¤
    const onConfirm = () => {
        if (!form.type) return Toast('请选择单据类型')
        if (!form.warehouseId) return Toast('请选择入库仓库')
        if (list.value.length === 0) return Toast('请先添加入库物料')
        for (let i = 0; i < list.value.length; i++) {
            if (!list.value[i].locationId) return Toast(`第${i+1}项入库货位不能为空`)
            if (!list.value[i].materialId) return Toast(`第${i+1}项入库物料不能为空`)
            if (!list.value[i].qualityType) return Toast(`第${i+1}项质量属性不能为空`)
            if (!list.value[i].num || list.value[i].num == '' || list.value[i].num == 0) {
                return Toast(`第${i + 1}项入库数量必须大于0`)
            }
        }
        wOutBoundForStockUp({
            type: form.type,
            planDate: getDay(),
            validDate: getDay(),
            warehouseId: form.warehouseId,
            woutboundInBodyBeanList: list.value
        }).then(res => {
            if (res.code === 200) {
                Toast.success({message: '入库成功'})
                setTimeout(() => {
                    router.go(-1)
                }, 2000)
            }
        })
    }

    // æ‰“开选择物料
    const openMs = () => {
        if (!form.warehouseId) return Toast('请先选择出库仓库')
        const { selected }: any = Material.value
        let ids = list.value.map(item => item.id)
        Material.value.selected = ids
        materialsShow.value = true
    }

    // åˆ é™¤
    const dele = (index: any) => {
        if (list.value.length === 1) {
            Toast('至少保留一条工装信息')
            return
        }
        list.value.splice(index, 1)
    }
    // å…³é—­ä»“库选择弹框
    const close = (): void => {
        warehouseShow.value = false
    }
    // å…³é—­ä»“库选择弹框
    const close1 = (): void => {
        materialsShow.value = false
    }
    // å…³é—­ä»“库选择弹框
    const close2 = (): void => {
        qualityShow.value = false
    }
    // å…³é—­è´§ä½é€‰æ‹©å¼¹æ¡†
    const close3 = (): void => {
        locationShow.value = false
    }
    // é€‰æ‹©ä»“库回调
    const getValue = (item: any): void => {
        form.warehouseName = item.name
        form.warehouseId = item.id
        getListByWarehouseId({ wareHouseId: item.id })
            .then(res => {
                if (res.code === 200) {
                    locationList.value = res.data
                    list.value.forEach(item => {
                        item.locationId = ''
                        item.locationName = ''
                    })
                }
            })
        warehouseShow.value = false
    }
    // é€‰æ‹©ç‰©æ–™
    const getValue1 = (item: any): void => {
        console.log(item)
        list.value[i.value].materialName = item.mmodelUnionName
        list.value[i.value].materialId = item.id
        list.value[i.value].unitId = item.unitId
        list.value[i.value].unitName = item.umodelName
        materialsShow.value = false
    }
    // é€‰æ‹©è´¨é‡å±žæ€§
    const getValue2 = (item: any): void => {
        list.value[i.value].qualityType = item.id
        list.value[i.value].qualityTypeName = item.name
        qualityShow.value = false
    }
    // é€‰æ‹©è´§ä½
    const getValue3 = (item: any): void => {
        list.value[i.value].locationId = item.id
        list.value[i.value].locationName = item.unionName
        locationShow.value = false
    }
    onMounted(() => {
        // èŽ·å–工装信息
        // getLKInfo(route.query.id as string)
    })
</script>

<style lang="scss" scoped>
.page {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #F7F7F7;
}
</style>
    .rework {
        width: 100%;
        height: 100%;
        position: absolute;
        .rework_list {
            display: flex;
            flex-direction: column;
            background: white;
            padding: 0 30px;
            box-sizing: border-box;
            .rework_list_item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 98px;
                border-bottom: 1PX solid #E5E5E5;
                &:last-child {
                    border: none;
                }
                span {
                    font-size: 30px;
                    font-weight: 400;
                    color: #222222;
                    flex-shrink: 0;
                    b {
                        font-size: 30px;
                        color: red;
                        margin-right: 5px;
                    }
                }
                .rework_list_item_right {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    span {
                        font-size: 28px;
                        font-weight: 400;
                        color: #999999;
                    }
                    .black {
                        color: black !important;
                    }
                    input {
                        width: 230px;
                        height: 60px;
                        font-size: 28px;
                        border-radius: 8px;
                        padding: 0 30px;
                        text-align: right;
                        box-sizing: border-box;
                        border: 1px solid #CCCCCC;
                    }
                    input::-webkit-input-placeholder { /* WebKit browsers */
                        font-size: 28px;
                        font-weight: 400;
                        color: #B2B2B2;
                    }
                }
            }
        }
        .rework_qd {
            margin-top: 40px;
            width: 100%;
            background: #F7F7F7;
            .rework_qd_title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 30px 30px 30px;
                .rework_qd_title_left {
                    display: flex;
                    align-items: center;
                    span {
                        font-size: 32px;
                        font-weight: 500;
                        color: #222222;
                    }
                    .x {
                        width: 8px;
                        height: 30px;
                        background: #4275FC;
                        border-radius: 2px;
                        margin-right: 12px;
                    }
                }
                .rework_qd_title_right {
                    display: flex;
                    align-items: center;
                    img {
                        width: 28px;
                        height: 28px;
                        margin-right: 12px;
                    }
                    span {
                        font-size: 28px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #4275FC;
                    }
                }
            }
            .rework_qd_list {
                display: flex;
                flex-direction: column;
                padding: 0 30px;
                background: #FFFFFF;
                box-sizing: border-box;
                margin-bottom: 30px;
                .rework_qd_item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    height: 98px;
                    border-bottom: 1PX solid #E5E5E5;
                    &:last-child {
                        border: none;
                    }
                    span {
                        font-size: 30px;
                        font-weight: 400;
                        color: #222222;
                        flex-shrink: 0;
                        b {
                            font-size: 30px;
                            color: red;
                            margin-right: 5px;
                        }
                    }
                    .rework_qd_item_right {
                        display: flex;
                        align-items: center;
                        span {
                            font-size: 28px;
                            font-weight: 400;
                            color: #999999;
                        }
                        .black {
                            color: black !important;
                        }
                        input {
                            width: 230px;
                            height: 60px;
                            font-size: 28px;
                            border-radius: 8px;
                            padding: 0 30px;
                            text-align: right;
                            box-sizing: border-box;
                            border: 1px solid #CCCCCC;
                        }
                        input::-webkit-input-placeholder { /* WebKit browsers */
                            font-size: 28px;
                            font-weight: 400;
                            color: #B2B2B2;
                        }
                    }
                }
            }
        }
        .rework_zw {
            height: 168px;
        }
        .rework_footer {
            width: calc(100% - 60px);
            position: fixed;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 30px 68px 30px;
            .rework_footer_add {
                flex: 1;
                height: 88px;
                font-size: 30px;
                font-weight: 500;
                color: $nav-color;
                background: #FFFFFF;
                box-shadow: 0 0 12px 0 rgba(0,0,0,0.0800);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .rework_footer_submit {
                flex: 1;
                height: 88px;
                font-size: 30px;
                font-weight: 500;
                color: #ffffff;
                background: $nav-color;
                box-shadow: 0 0 12px 0 rgba(0,0,0,0.0800);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: none;
            }
        }
    }
</style>

 h5_standard/src/views/needToBeDealtWith/outbound.vue

@@ -1,18 +1,403 @@
<template>
    <div class="page">
        æ–°å¢žå‡ºåº“
    <div class="rework">
        <div class="rework_list">
            <div class="rework_list_item" @click="typeShow = true">
                <span><b>*</b>单据类型</span>
                <div class="rework_list_item_right">
                    <span :class="form.typeName ? 'black' : ''">{{form.typeName ? form.typeName : '请选择'}}</span>
                    <van-icon name="arrow" size="20" color="#999999" />
                </div>
            </div>
            <div class="rework_list_item" @click="warehouseShow = true">
                <span><b>*</b>出库仓库</span>
                <div class="rework_list_item_right">
                    <span :class="form.warehouseName ? 'black' : ''">{{form.warehouseName ? form.warehouseName : '请选择'}}</span>
                    <van-icon name="arrow" size="20" color="#999999" />
                </div>
            </div>
        </div>
        <div class="rework_qd">
            <div class="rework_qd_title">
                <div class="rework_qd_title_left">
                    <div class="x"></div>
                    <span>{{`出库物料清单${list.length}`}}</span>
                </div>
                <div class="rework_qd_title_right" @click="openMs">
                    <img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt="" />
                    <span>增加出库</span>
                </div>
            </div>
            <van-swipe-cell v-for="(item, index) in list" :key="index">
                <div class="rework_qd_item">
                    <img class="rework_qd_item_dele" @click="dele(index)" src="@/assets/icon/chuku_ic_delete@2x.png" alt="" />
                    <div class="rework_qd_item_wl">
                        <span>{{ item.materialName }} | {{ item.materialCode }}</span>
                    </div>
                    <div class="rework_qd_item_cate">
                        <span class="green" v-if="item.qualityType === '0'">合格&nbsp;|&nbsp;</span>
                        <span class="yellow" v-if="item.qualityType === '1'">不良&nbsp;|&nbsp;</span>
                        <span class="red" v-if="item.qualityType === '2'">报废&nbsp;|&nbsp;</span>
                        <span>{{ item.procedureName }}&nbsp;|&nbsp;</span>
                        <span>{{ item.batch }}</span>
                    </div>
                    <div class="rework_qd_item_hw">
                        <span>出库货位：{{ item.locationName }}</span>
                        <div class="rework_qd_item_hw_right">
                            <span>数量：</span>
                            <input type="number" v-model="item.num" placeholder="0" />
                            <span>{{ item.unitName }}</span>
                        </div>
                    </div>
                </div>
                <!-- <template #right>
                    <van-button style="height: 100%;" square type="danger" text="删除" @click="dele(index)" />
                </template> -->
            </van-swipe-cell>
        </div>
        <div class="rework_zw"></div>
        <div class="rework_footer">
            <button class="rework_footer_submit" @click="onConfirm">提交</button>
        </div>
        <Warehouse :show="warehouseShow" @close="close" @value="getValue" />
        <Materials ref="Material" :show="materialsShow" :id="form.warehouseId.toString()" @close="close1" @value="getValue1" />
        <!-- å•æ®ç±»åž‹ -->
        <van-popup v-model:show="typeShow" position="bottom" :style="{ height: '50%' }">
            <van-picker
                :columns="columns"
                @confirm="onConfirm1"
                @cancel="onCancel"
                :columns-field-names="customFieldName"
            />
        </van-popup>
    </div>
</template>

<script setup lang="ts">
    import { onMounted, ref, reactive } from 'vue'
    import { useRouter } from 'vue-router'
    import { Toast } from 'vant'
    import { createForStandard } from '@/apis/WorkOrderAPI'
    import Warehouse from '@/components/common/Warehouse.vue'
    import Materials from '@/components/common/Materials.vue'
    const Material = ref(null)
    const router = useRouter()
    // è¡¨å•æ•°æ®
    let form = reactive({
        warehouseName: '',
        warehouseId: '',
        type: '',
        typeName: ''
    })

    let columns = ref([
        { name: '销售出库', id: 18 },
        { name: '库存调整', id: 28 },
        { name: '仓库报废', id: 21 }
    ])
    const customFieldName = {
      text: 'name'
    };
    let mIds = ref('')
    let list = ref<Array<any>>([])
    let warehouseShow = ref<boolean>(false)
    let materialsShow = ref<boolean>(false)
    let typeShow = ref<boolean>(false)

    const onConfirm1 = (value: any) => {
        form.typeName = value.name
        form.type = value.id
        typeShow.value = false
    };
    const onCancel = () => {
        typeShow.value = false
    }
    
    // èŽ·å–当天年月日
    const getDay = () => {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      return `${year}-${month <= 9 ? `0${month}` : month}-${day <= 9 ? `0${day}` : day}`
    }

    // æäº¤
    const onConfirm = () => {
        if (!form.type) return Toast('请选择单据类型')
        for (let i = 0; i < list.value.length; i++) {
            if (!list.value[i].num || list.value[i].num == '' || list.value[i].num == 0) {
                return Toast(`第${i + 1}个出库物料数量必须大于0`)
            }
            if (list.value[i].num > list.value[i].total) {
                return Toast(`第${i + 1}个物料数量不能大于库存量！`)
            }
        }
        createForStandard({
            billType: form.type,
            planDate: getDay(),
            origin: 0,
            type: 0,
            warehouseId: form.warehouseId,
            woutBoundDetailBeans: list.value
        }).then(res => {
            if (res.code === 200) {
                Toast.success({message: '出库成功'})
                setTimeout(() => {
                    router.go(-1)
                }, 2000)
            }
        })
    }

    // æ‰“开选择物料
    const openMs = () => {
        if (!form.warehouseId) return Toast('请先选择出库仓库')
        const { selected }: any = Material.value
        let ids = list.value.map(item => item.id)
        Material.value.selected = ids
        materialsShow.value = true
    }

    // åˆ é™¤
    const dele = (index: any) => {
        if (list.value.length === 1) {
            Toast('至少保留一条工装信息')
            return
        }
        list.value.splice(index, 1)
    }
    // å…³é—­ä»“库选择弹框
    const close = (): void => {
        warehouseShow.value = false
    }
    // å…³é—­ä»“库选择弹框
    const close1 = (): void => {
        materialsShow.value = false
    }
    // é€‰æ‹©ä»“库回调
    const getValue = (item: any): void => {
        form.warehouseName = item.name
        form.warehouseId = item.id
        warehouseShow.value = false
    }
    const getValue1 = (item: any): void => {
        item.forEach((row: any) => {
            row.total = row.num
        })
        list.value = [...item, ...list.value]
        materialsShow.value = false
        console.log(list.value)
    }
    
    onMounted(() => {
        // èŽ·å–工装信息
        // getLKInfo(route.query.id as string)
    })
</script>

<style lang="scss" scoped>
.page {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #F7F7F7;
}
</style>
    .rework {
        width: 100%;
        height: 100%;
        position: absolute;
        .rework_list {
            display: flex;
            flex-direction: column;
            background: white;
            padding: 0 30px;
            box-sizing: border-box;
            .rework_list_item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 98px;
                border-bottom: 1PX solid #E5E5E5;
                &:last-child {
                    border: none;
                }
                span {
                    font-size: 30px;
                    font-weight: 400;
                    color: #222222;
                    flex-shrink: 0;
                    b {
                        font-size: 30px;
                        color: red;
                        margin-right: 5px;
                    }
                }
                .rework_list_item_right {
                    display: flex;
                    align-items: center;
                    span {
                        font-size: 28px;
                        font-weight: 400;
                        color: #999999;
                    }
                    .black {
                        color: black !important;
                    }
                    input {
                        width: 230px;
                        font-size: 28px;
                        border: none;
                    }
                    input::-webkit-input-placeholder { /* WebKit browsers */
                        font-size: 28px;
                        font-weight: 400;
                        color: #B2B2B2;
                    }
                }
            }
        }
        .rework_qd {
            margin-top: 40px;
            .rework_qd_title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 30px 30px 30px;
                .rework_qd_title_left {
                    display: flex;
                    align-items: center;
                    span {
                        font-size: 32px;
                        font-weight: 500;
                        color: #222222;
                    }
                    .x {
                        width: 8px;
                        height: 30px;
                        background: #4275FC;
                        border-radius: 2px;
                        margin-right: 12px;
                    }
                }
                .rework_qd_title_right {
                    display: flex;
                    align-items: center;
                    img {
                        width: 28px;
                        height: 28px;
                        margin-right: 12px;
                    }
                    span {
                        font-size: 28px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #4275FC;
                    }
                }
            }
            .rework_qd_item {
                background: #ffffff;
                padding: 30px;
                display: flex;
                flex-direction: column;
                margin-bottom: 30px;
                position: relative;
                .rework_qd_item_dele {
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 48px;
                    height: 48px;
                }
                .rework_qd_item_wl {
                    span {
                        font-size: 30px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #222222;
                    }
                }
                .rework_qd_item_cate {
                    margin-top: 18px;
                    span {
                        font-size: 24px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #666666;
                    }
                }
                .rework_qd_item_hw {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 24px;
                    span {
                        font-size: 26px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                    }
                    .rework_qd_item_hw_right {
                        display: flex;
                        align-items: center;
                        span {
                            font-size: 26px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #666666;
                        }
                        input {
                            width: 140px;
                            height: 60px;
                            font-size: 28px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #333333;
                            background: #FFFFFF;
                            border-radius: 8px;
                            border: 1px solid #CCCCCC;
                            margin: 0 20px;
                            padding: 0 30px;
                            box-sizing: border-box;
                            text-align: right;
                        }
                    }
                }
            }
        }
        .rework_zw {
            height: 168px;
        }
        .rework_footer {
            width: calc(100% - 60px);
            position: fixed;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 30px 68px 30px;
            .rework_footer_add {
                flex: 1;
                height: 88px;
                font-size: 30px;
                font-weight: 500;
                color: $nav-color;
                background: #FFFFFF;
                box-shadow: 0 0 12px 0 rgba(0,0,0,0.0800);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .rework_footer_submit {
                flex: 1;
                height: 88px;
                font-size: 30px;
                font-weight: 500;
                color: #ffffff;
                background: $nav-color;
                box-shadow: 0 0 12px 0 rgba(0,0,0,0.0800);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: none;
            }
        }
    }
</style>

 h5_standard/src/views/workOrder/reportingForWork.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1476 @@
<template>
    <div class="bg">
        <!--  æŠ•æ–™æ˜Žç»†/合格产出明细/不良产出明细  -->
        <div class="bg_list">
            <div class="bg_list_item">
                <div class="bg_list_item_top">
                    <div class="bg_list_item_top_left">
                        <div class="bg_list_item_top_left_x"></div>
                        <span>投料明细</span>
                        <!-- <span class="blue left">{{tlTotal()}}</span> -->
                    </div>
                    <div class="bg_list_item_top_right" @click="jumpTL" v-if="proxy.$auth('h5:workorderinput:create') && (info.bomType !== 1 || info.bomType == 0 || !info.bomType)">
                        <img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt="" />
                        <span>手动录入</span>
                    </div>
                </div>
                <template v-if="feedingData && feedingData.length > 0">
                    <van-swipe-cell v-for="(item, index) in feedingData" :key="index">
                        <div class="bg_list_item_num">
                            <div class="bg_list_item_num_item">
                                <!-- <span>{{item.code}}</span> -->
                                <div class="bg_list_item_num_item_wl">
                                    <span> {{ item.materialName }}{{ item.procedureName ? `&nbsp;|&nbsp;${item.procedureName}` : '' }}</span>
                                    <div class="bg_list_item_num_item_wl_lx">
                                        <span class="green" v-if="item.qualityType == 0">合格&nbsp;/&nbsp;</span>
                                        <span class="yellow" v-if="item.qualityType == 1">不良&nbsp;/&nbsp;</span>
                                        <span class="red" v-if="item.qualityType == 2">报废&nbsp;/&nbsp;</span>
                                        <span>{{ item.locationName }}</span>
                                        <span>{{ item.batch ? `&nbsp;/&nbsp;${item.batch}` : '' }}</span>
                                    </div>
                                </div>
                                <div class="bg_list_item_num_item_sr">
                                    <input v-model="item.num" :disabled="!proxy.$auth('h5:workorderinput:update')" @blur="change(item.id, item.num, 'T', item.maxNum, item, item.unitAttribute)" type="number" />
                                    <span>{{item.unitName}}</span>
                                </div>
                            </div>
                        </div>
                        <template #right v-if="proxy.$auth('h5:workorderinput:delete')">
                            <van-button style="height: 100%;" square text="删除" @click="deleItem(item.id, 'T')" type="danger" />
                        </template>
                    </van-swipe-cell>
                </template>
                <template v-else>
                    <div class="kong">
                        <span>暂无数据</span>
                    </div>
                </template>
            </div>
            <div class="bg_list_item">
                <div class="bg_list_item_top">
                    <div class="bg_list_item_top_left">
                        <div class="bg_list_item_top_left_x"></div>
                        <span>产出明细</span>
                    </div>
                </div>
                <!-- <template v-if="produceData && produceData.length > 0"> -->
                    <!-- v-for="(item, index) in produceData" :key="index" -->
                    <van-swipe-cell>
                        <div class="bg_list_item_num">
                            <div class="bg_list_item_num_item">
                                <span>良品数</span>
                                <div class="bg_list_item_num_item_sr">
                                    <!-- :disabled="!proxy.$auth('h5:workorderoutput:update')" -->
                                    <!-- @blur="change(item.id, item.num, 'C', item.maxNum, item)" -->
                                    <input type="number" v-model="produceFrom.qualified" @blur="changeCC('0', produceFrom.qualified, produceFrom.qualifiedId)" placeholder="请输入" />
                                    <span v-if="info.umodel">{{info.umodel.name}}</span>
                                </div>
                            </div>
                        </div>
                    </van-swipe-cell>
                    <van-swipe-cell>
                        <div class="bg_list_item_num">
                            <!-- @blur="change(item.id, item.num, 'C', item.maxNum, item)" -->
                            <div class="bg_list_item_num_item">
                                <span>不良数</span>
                                <div class="bg_list_item_num_item_sr">
                                    <!-- :disabled="!proxy.$auth('h5:workorderoutput:update')" -->
                                    <!-- @blur="change(item.id, item.num, 'C', item.maxNum, item)" -->
                                    <input type="number" v-model="produceFrom.undesirable" @blur="changeCC('1', produceFrom.undesirable, produceFrom.undesirableId)" placeholder="请输入" />
                                    <span v-if="info.umodel">{{info.umodel.name}}</span>
                                </div>
                            </div>
                        </div>
                    </van-swipe-cell>
                    <!-- <van-swipe-cell>
                        <div class="bg_list_item_num">
                            <div class="bg_list_item_num_item" @click="show = true">
                                <span>不良项</span>
                                <div class="bg_list_item_num_item_sr">
                                    <span>设置 ></span>
                                </div>
                            </div>
                        </div>
                    </van-swipe-cell> -->
                <!-- </template>
                <template v-else>
                    <div class="kong">
                        <span>暂无数据</span>
                    </div>
                </template> -->
            </div>
            <!-- <div class="bg_list_item">
                <div class="bg_list_item_top">
                    <div class="bg_list_item_top_left">
                        <div class="bg_list_item_top_left_x"></div>
                        <span>合格产出明细</span>
                        <span class="blue left">{{ccTotal()}}</span>
                    </div>
                    <div class="bg_list_item_top_right" @click="jumpCC" v-if="proxy.$auth('h5:workorderoutput:create')">
                        <img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt="" />
                        <span>手动录入</span>
                    </div>
                </div>
                <template v-if="produceData && produceData.length > 0">
                    <van-swipe-cell v-for="(item, index) in produceData" :key="index">
                        <div class="bg_list_item_num">
                            <div class="bg_list_item_num_item">
                                <span>{{item.code}}</span>
                                <div class="bg_list_item_num_item_sr">
                                    <input v-model="item.num" :disabled="!proxy.$auth('h5:workorderoutput:update')" @blur="change(item.id, item.num, 'C', item.maxNum, item)" type="number" />
                                    <span>{{item.company}}</span>
                                </div>
                            </div>
                        </div>
                        <template #right v-if="proxy.$auth('h5:workorderoutput:delete')">
                            <van-button style="height: 100%;" square text="删除" @click="deleItem(item.id, 'C')" type="danger" />
                        </template>
                    </van-swipe-cell>
                </template>
                <template v-else>
                    <div class="kong">
                        <span>暂无数据</span>
                    </div>
                </template>
            </div>

            <div class="bg_list_item">
                <div class="bg_list_item_top">
                    <div class="bg_list_item_top_left">
                        <div class="warning"></div>
                        <span>不良产出明细</span>
                        <span class="yellow left">{{blTotal()}}</span>
                    </div>
                </div>
                <template v-if="undesirable && undesirable.length > 0">
                    <van-swipe-cell v-for="(item, index) in undesirable" :key="index">
                        <div class="bg_list_item_num">
                            <div class="bg_list_item_num_item">
                                <span>{{item.code}}</span>
                                <div class="bg_list_item_num_item_sr">
                                    <input v-model="item.num" :disabled="!proxy.$auth('h5:workorderoutput:update')" @blur="change(item.id, item.num, 'C', item.maxNum, item)" type="number" />
                                    <span>{{item.company}}</span>
                                </div>
                            </div>
                        </div>
                        <template #right v-if="proxy.$auth('h5:workorderoutput:delete')">
                            <van-button style="height: 100%;" square text="删除" @click="deleItem(item.id, 'C')" type="danger" />
                        </template>
                    </van-swipe-cell>
                </template>
                <template v-else>
                    <div class="kong">
                        <span>暂无数据</span>
                    </div>
                </template>
            </div>

            <div class="bg_list_item">
                <div class="bg_list_item_top">
                    <div class="bg_list_item_top_left">
                        <div class="error"></div>
                        <span>报废产出明细</span>
                        <span class="red left">{{bfTotal()}}</span>
                    </div>
                </div>
                <template v-if="scrap && scrap.length > 0">
                    <van-swipe-cell v-for="(item, index) in scrap" :key="index">
                        <div class="bg_list_item_num">
                            <div class="bg_list_item_num_item">
                                <span>{{item.code}}</span>
                                <div class="bg_list_item_num_item_sr">
                                    <input v-model="item.num" :disabled="!proxy.$auth('h5:workorderoutput:update')" @blur="change(item.id, item.num, 'C', item.maxNum, item)" type="number" />
                                    <span>{{item.company}}</span>
                                </div>
                            </div>
                        </div>
                        <template #right v-if="proxy.$auth('h5:workorderoutput:delete')">
                            <van-button style="height: 100%;" square text="删除" @click="deleItem(item.id, 'C')" type="danger" />
                        </template>
                    </van-swipe-cell>
                </template>
                <template v-else>
                    <div class="kong">
                        <span>暂无数据</span>
                    </div>
                </template>
            </div> -->
        </div>
        <div class="details_dj">
            <div class="details_dj_title">
                <div class="details_dj_title_left">
                    <div class="details_x"></div>
                    <span>生产点检</span>
                </div>
                <div class="details_dj_title_right" @click="jumpdj" v-if="proxy.$auth('h5:workorder:processRecord')">
                    <img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt="" />
                    <span>手动录入</span>
                </div>
            </div>
            <div class="details_dj_list">
                <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="没有更多了~"
                    @load="pageDJs">
                    <van-swipe-cell v-for="(item, index) in djData" :key="index">
                        <div class="details_dj_list_item">
                            <span>{{item.attrName}}：{{item.val}}</span>
                            <span>{{item.userName}} {{item.createTime}}</span>
                        </div>
                        <template #right>
                            <van-button square type="danger" style="height: 100%;" @click="dele(item.id)" text="删除" />
                        </template>
                    </van-swipe-cell>
                </van-list>
            </div>
        </div>
        <!--  æŠ¥å·¥æŒ‰é’®  -->
        <template v-if="info.status === 2 || info.procedureNeedcheck === 1">
            <div class="bh_zw"></div>
            <div class="bg_footer">
                <div class="bg_footer_submit" @click="submit">确认报工</div>
            </div>
        </template>
        <!--  æ‰«ç ç»„件  -->
        <v-ScanCode
            :openCode="openCode"
            :infos="['请扫描工装码']"
            @closePopup="closePopup"
            @onDecode="onDecode" />
        <!--  æŠ¥å·¥ç»Ÿè®¡æ•°æ®  -->
        <van-popup v-model:show="statistics" round :closeable="true" position="bottom" :style="{ height: '53%' }">
            <div class="tg">
                <div class="tg_header">请确认报工信息</div>
                <div class="tg_table">
                    <div class="tg_table_header">
                        <div class="tg_table_header_item">类型</div>
                        <div class="tg_table_header_item">物料名称</div>
                        <!-- <div class="tg_table_header_item">工装数量</div> -->
                        <div class="tg_table_header_item">物料数量</div>
                    </div>
                    <div class="nr" v-if="statisticsData.length > 0">
                        <div class="tg_table_nr" v-for="(item, index) in statisticsData" :key="index">
                            <div class="tg_table_nr_item">{{item.name}}</div>
                            <div class="tg_table_nr_item">{{item.materialName}}</div>
                            <!-- <div class="tg_table_nr_item">{{item.gznum}}</div> -->
                            <div class="tg_table_nr_item" :style="item.name === '工单未投料' ? 'color: #DE5243' : ''">{{item.num}}</div>
                        </div>
                    </div>
                    <div class="nr" v-else>
                        <div class="tg_table_nr">
                            <div class="tg_table_nr_item1">暂无数据</div>
                        </div>
                    </div>
                </div>
                <div class="tg_footer">
                    <button class="tg_footer_qr" @click="submitBG" v-if="proxy.$auth('h5:workorderoutput:confirm') && isSubmit">确认报工</button>
                    <div class="tg_footer_fh" @click="gofh" v-else-if="!isSubmit">返回修改</div>
                </div>
            </div>
        </van-popup>
        <!-- é€‰æ‹©ä¸è‰¯é¡¹ -->
        <van-popup v-model:show="show" round position="bottom" :style="{ height: '53%' }">
            <div class="bl">
                <div class="bl_head">
                    <span @click="show = false">取消</span>
                    <span>不良项</span>
                    <span>确认</span>
                </div>
                <div class="bl_list">
                    <div class="bl_list_item" v-for="(item, i) in 12" :key="i">
                        <div class="bl_list_item_left">
                            <input type="checkbox" :checked="true" name="" id="" />
                            <span>有划痕</span>
                        </div>
                        <div class="bl_list_item_right">
                            <input type="number" placeholder="请输入" />
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup lang="ts">
    import { getCurrentInstance, nextTick, onMounted, ref, reactive } from 'vue'
    import { useRouter, useRoute } from "vue-router"
    import { Dialog, Toast } from 'vant'
    import { REGULAR } from '@/utils/utils'
    import {
        getBarcodeContent,
        queryById,
        getOrocessRecord,
        deleteCT,
        updateById,
        comfirmDone,
        comfirmDoneStandard,
        getListByCondition,
        allForStandard,
        pageDJ,
        deletedj,
        dealWorkorderRecordStandard,
        getWorkorderRecordListStandard
    } from '@/apis/WorkOrderAPI'
    import { QRCodeType } from '@/enum'
    const { proxy }: any = getCurrentInstance()
    import VWorkOrderInfo from '@/components/common/WorkOrderInfo.vue'

    const router = useRouter()
    const route = useRoute()

    const loading = ref(false);
    const finished = ref(false);
    let show = ref(false)
    // ç‚¹æ£€æ•°æ®
    let djData: any = ref([])
    // åˆ†é¡µæŸ¥è¯¢æ•°æ®
    let page = reactive({
        capacity: 10,
        page: 0
    })

    // äº§å‡ºåˆæ ¼/不良
    let produceFrom = reactive({
        qualifiedId: '',
        qualified: '',  // åˆæ ¼
        undesirableId: '',
        undesirable: '' // ä¸è‰¯
    })

    // è¯¦æƒ…数据
    const info: any = ref({})

    // åˆ¤æ–­æ˜¯å¦èƒ½æäº¤
    let isSubmit: any = ref<boolean>(false)

    // ä¸è‰¯æ˜Žç»†
    let undesirable: any = ref([])

    // æŠ¥åºŸæ˜Žç»†
    let scrap: any = ref([])

    // æ‰«ç ç±»åž‹
    let type: any = ref('')

    // ç»Ÿè®¡æ•°æ®
    let statisticsData: any = ref([
        // {
        //     name: '工单投料',
        //     materialName: '黄沙',
        //     num: 0
        // },
        // {
        //     name: '工单合格产出',
        //     materialName: '黄沙',
        //     num: 0
        // },
        // {
        //     name: '工单不良产出',
        //     materialName: '黄沙',
        //     num: 0
        // },
        // {
        //     name: '工单未投料',
        //     materialName: '黄沙',
        //     num: 0
        // }
    ])

    // æŠ•æ–™æ•°æ®
    const feedingData: any = ref([])

    // äº§å‡ºæ•°æ®
    const produceData: any = ref([])

    // æŽ§åˆ¶æ‰«ç æ˜¾ç¤ºéšè—
    const openCode = ref<boolean>(false)

    // æŽ§åˆ¶æŠ¥å·¥ç»Ÿè®¡
    const statistics = ref<boolean>(false)

    // æŠ•æ–™ç»Ÿè®¡
    const tlTotal = (): string => {
        if (feedingData.value.length > 0) {
            let total: number = 0
            feedingData.value.forEach((element: any) => {
                total = total + element.num
            })
            return `${total}`
        }
        return ''
    }

    // ä¿®æ”¹äº§å‡º
    const changeCC = (downType: string, num: number, recordId: string) => {
        if (!num) return
        console.log(produceFrom.qualified + produceFrom.undesirable)
        if ((produceFrom.qualified + produceFrom.undesirable) > info.value.planNum) {
            return Toast.fail({ message: '产出数量不能大于计划数量', duration: 2000 })
        }
        if (num >= 0) {
            dealWorkorderRecordStandard({
                downType, num, recordId, workorderId: route.query.id
            }).then(res => {
                if (res.code === 200) {
                    getOrocessRecordCC()
                }
            })
        } else {
            if (downType == 0) {
                produceFrom.qualified = 0
            } else {
                produceFrom.undesirable = 0
            }
            Toast.fail({ message: '产出数量不能小于0', duration: 2000 })
        }
    }

    // è·³è½¬ç‚¹æ£€
    const jumpdj = () => {
        router.push({ name: 'spotCheck', query: { id: route.query.id } })
    }

    // åˆ é™¤ç‚¹æ£€
    const dele = (id: string | number): void => {
        deletedj(id)
            .then(res => {
                if (res.code === 200) {
                    djData.value = []
                    finished.value = false
                    page.page = 0
                    pageDJs()
                }
            })
    }

    // ç‚¹æ£€æ•°æ®
    const pageDJs = () => {
        if (!finished.value) {
            page.page = page.page + 1
            loading.value = true
            pageDJ({
                capacity: page.capacity,
                page: page.page,
                model: {
                    workorderId: route.query.id
                }
            }).then(res => {
                if (res.code === 200 && res.data && res.data.records.length !== 0) {
                    djData.value.push(...res.data.records)
                } else {
                    finished.value = true
                }
                loading.value = false
            }).catch(err => {
                loading.value = false
                finished.value = true
            })
        }
    }

    // ç»Ÿè®¡
    const ccTotal = (): string => {
        if (produceData.value.length > 0) {
            let total: number = 0
            produceData.value.forEach((element: any) => {
                total = total + element.num
            })
            return `${total}${produceData.value[0].company}`
        }
        return ''
    }

    // ç»Ÿè®¡
    const blTotal = (): string => {
        if (undesirable.value.length > 0) {
            let total: number = 0
            undesirable.value.forEach((element: any) => {
                total = total + element.num
            })
            return `${total}${undesirable.value[0].company}`
        }
        return ''
    }

    // ç»Ÿè®¡
    const bfTotal = (): string => {
        if (scrap.value.length > 0) {
            let total: number = 0
            scrap.value.forEach((element: any) => {
                total = total + element.num
            })
            return `${total}${scrap.value[0].company}`
        }
        return ''
    }

    // åˆ é™¤äº§å‡º/投料
    const deleItem = (id: any, type: string) => {
        Dialog.confirm({
            title: '提示',
            message: '确定删除此条记录吗？',
        }).then(() => {
            deleteCT(id)
                .then(res => {
                    if (res.code === 200 && type === 'C') {
                        getOrocessRecordCC()
                    } else if (res.code === 200 && type === 'T') {
                        getOrocessRecords()
                    }
                })
        }).catch(() => {
            // on cancel
        })
    }

    // è·³è½¬æ‰‹åŠ¨äº§å‡º
    const jumpCC = () => {
        router.push({ name: 'manualOutput', query: { id: route.query.id, num: produceData.value.length > 0 ? produceData.value[0].num : '' } })
    }

    // è·³è½¬æ‰‹åŠ¨æŠ•æ–™
    const jumpTL = () => {
        router.push({ name: 'manualFeeding', query: { id: route.query.id } })
    }

    // å…³é—­æ‰«ç ç»„件
    const closePopup = (): void => {
        openCode.value = false
    }

    // èŽ·å–扫码值
    const onDecode = (data: string[]): void => {
        getBarcodeContent({
            barcode: data[0]
        }).then(res => {
            if (res.code === 200) {
                if (res.data.barcodeType === QRCodeType.GZ) {
                    if (type.value === 'tl') {    // æŠ•æ–™æ“ä½œ
                        getListByCondition({ id: res.data.id })
                            .then(gz => {
                                if (gz.code === 200) {
                                    if (gz.data[0].status !== 1) {
                                        router.push({ name: 'codeScanningFeeding', query: { id: route.query.id, gzId: res.data.id } })
                                    } else {
                                        Toast.fail({ message: '扫描的工装状态不能为空', duration: 2000 })
                                    }
                                }
                            })
                    }
                    if (type.value === 'cc') {    // äº§å‡ºæ“ä½œ
                        router.push({ name: 'codeScanningOutput', query: { id: route.query.id, gzId: res.data.id } })
                    }
                } else {
                    Toast({ message: '请扫描正确的篮筐码', duration: 2000 })
                }
            }
        })
        nextTick(() => {
            openCode.value = false
        })
    }

    // è·³è½¬æ‰‹åŠ¨æŠ•æ–™
    const jump = () => {
        router.push({ name: 'manualFeeding', query: { id: route.query.id } })
    }

    // è·³è½¬æ‰«ç æŠ•æ–™
    const jump1 = (types: string) => {
        type.value = types
        openCode.value = true
    }

    // æŸ¥è¯¢å·¥å•è¯¦æƒ…
    const queryByIds = () => {
        queryById(route.query.id).then(res => {
            if (res.code === 200) {
                info.value = res.data
            }
        })
    }

    // æŸ¥è¯¢å·¥å•ç”Ÿäº§è®°å½•---投料
    const getOrocessRecords = () => {
        feedingData.value = []
        allForStandard({
            workorderId: route.query.id,
            type: 0
        }).then(res => {
            if (res.code === 200) {
                feedingData.value = res.data
                // res.data.forEach((item: any) => {
                //     feedingData.value.push({ id: item.id, company: item.umodel.name, gz: item.amodel.code, name: item.mmodel.name, code: item.amodel.code + ' - ' + item.mmodel.name, num: item.num, ynum: item.num, maxNum: item.amodel.num })
                // })
            }
        })
    }

    // æŸ¥è¯¢å·¥å•ç”Ÿäº§è®°å½•---产出
    const getOrocessRecordCC = () => {
        produceData.value = []
        undesirable.value = []
        scrap.value = []
        getWorkorderRecordListStandard({
            workorderId: route.query.id
        }).then(res => {
            if (res.code === 200) {
                if (res.data.length > 0) {
                    res.data.forEach((item: any) => {
                        if (item.doneType === 1) {
                            produceFrom.undesirable = item.num
                            produceFrom.undesirableId = item.id
                        } else {
                            produceFrom.qualified = item.num
                            produceFrom.qualifiedId = item.id
                        }
                    })
                }
                // res.data.forEach((item: any) => {
                //     if (item.doneType === 0 || !item.doneType) { // åˆæ ¼ | æ··åˆ

                //         produceData.value.push({ id: item.id, company: item.umodel.name, name: item.mmodel.name, code: item.amodel.code + ' - ' + item.mmodel.name, num: item.num, ynum: item.num, maxNum: item.amodel.num })
                //     } else if (item.doneType === 1) { // ä¸è‰¯
                //         undesirable.value.push({ id: item.id, company: item.umodel.name, name: item.mmodel.name, code: item.amodel.code + ' - ' + item.mmodel.name, num: item.num, ynum: item.num, maxNum: item.amodel.num })
                //     } else if (item.doneType === 2) { // æŠ¥åºŸ
                //         scrap.value.push({ id: item.id, company: item.umodel.name, name: item.mmodel.name, code: item.amodel.code + ' - ' + item.mmodel.name, num: item.num, ynum: item.num, maxNum: item.amodel.num })
                //     }
                // })
            }
        })
    }

    // ç¼–辑投料/产出
    const change = (id: any, num: any, type: any, maxNum: number, item: object, unitAttribute: number): void => {
        let obj: any = item
        if (type === 'T') {
            if (unitAttribute == 0 && num != '') {
                if(!REGULAR.positiveInteger.test(num)){
                    obj.num = obj.ynum
                    Toast({ message: '只能输入正整数' })
                    return
                }
            }
            if (unitAttribute == 1 && num != '') {
                if(!REGULAR.number.test(num)){
                    Toast({ message: '只能输入正整数或小数（最多四位）' })
                    obj.num = obj.ynum
                    return
                }
            }
            if (num > maxNum) {
                obj.num = obj.ynum
                Toast.fail({ message: '超出工装总数' })
                return
            }
        } else if (type === 'C' && num > info.value.planNum) {
            obj.num = obj.ynum
            Toast.fail({ message: '产出数量不能超过计划数量' })
            return
        }
        updateById({ id: id, num: num }).then(res => {
            if (res.code === 200 && type === 'T') {
                getOrocessRecords()
            } else if (res.code === 200 && type === 'C') {
                getOrocessRecordCC()
            }
        })
    }

    // ç¡®è®¤æŠ¥å·¥
    const submit = () => {
        if (info.value.bomType === 1) {  // æ‹‰å¼
            console.log('拉式')
            statisticsData.value = []
            if (info.value.hasBom === 0) {
                console.log('无bom')
                // let data: any = [
                //     { name: '工单投料', gznum: feedingData.value.length, wlmc: feedingData.value.length > 0 ? feedingData.value[0].name : '', wlnum: 0 },
                //     { name: '工单合格产出', gznum: produceData.value.length, wlmc: produceData.value.length > 0 ? produceData.value[0].name : '', wlnum: 0 },
                //     { name: '工单不良产出', gznum: 0, wlmc: '', wlnum: 0 },
                //     { name: '工单未投料', gznum: '', wlmc: feedingData.value.length > 0 ? feedingData.value[0].name : '', wlnum: 0 }
                // ]
                // if (undesirable.value.length > 0) {   // åˆ¤æ–­æœ‰æ²¡æœ‰ä¸è‰¯
                //     data[2].wlmc = undesirable.value[0].name
                //     data[2].gznum = data[2].gznum + undesirable.value.length
                // }
                // if (scrap.value.length > 0) {   // åˆ¤æ–­æœ‰æ²¡æœ‰ä¸è‰¯
                //     data[2].wlmc = scrap.value[0].name
                //     data[2].gznum = data[2].gznum + scrap.value.length
                // }
                // let tl: number = 0
                // let cc: number = 0
                // let bl: number = 0
                // undesirable.value.forEach((item: any) => {  // ä¸è‰¯
                //     bl = bl + item.num
                // })
                // scrap.value.forEach((item: any) => {  // æŠ¥åºŸ
                //     bl = bl + item.num
                // })
                // if (produceData.value.length > 0) {   // åˆ¤æ–­æœ‰æ²¡æœ‰åˆæ ¼äº§å‡º
                //     produceData.value.forEach((item: any) => {  // äº§å‡º
                //         cc = cc + item.num
                //     })
                // }
                // feedingData.value.forEach((item: any) => {  // æŠ•æ–™
                //     tl = tl + item.num
                // })
                // data[0].wlnum = tl.toString() + info.value.umodel.name
                // if (produceData.value.length > 0) {
                //     data[1].wlnum = cc.toString() + info.value.umodel.name
                // }
                // data[2].wlnum = bl.toString() + info.value.umodel.name
                // let total: number = info.value.planNum - (Number(cc) + Number(bl))
                // data[data.length - 1].wlnum = (info.value.planNum - Number(cc) - Number(bl)).toString() + info.value.umodel.name
                // if (total === 0) {
                //     isSubmit.value = true
                // } else {
                //     isSubmit.value = false
                // }

                let arr: any = []
                let tl = 0
                let res = getGroupNum(feedingData.value)
                for (let i in res) {
                    let num = 0
                    res[i].forEach((item: any) => {
                        num += item.num
                    })
                    arr.push({ name: '工单投料', materialName: i + res[i][0].procedureName, num: num })
                }
                feedingData.value.forEach((item: any) => {
                    tl += item.num
                })
                statisticsData.value = [...statisticsData.value, ...arr]
                statisticsData.value.push({ name: '工单合格产出', materialName:  info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.qualified })
                statisticsData.value.push({ name: '工单不良产出', materialName:  info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.undesirable })
                statisticsData.value.push({ name: '工单未投料', materialName: '', num: info.value.planNum - Number(produceFrom.qualified) - Number(produceFrom.undesirable) })
                let total: number = info.value.planNum - (Number(produceFrom.qualified) + Number(produceFrom.undesirable))
                if (total === 0) {
                    isSubmit.value = true
                } else {
                    isSubmit.value = false
                }
                // if (Number(tl) <= info.value.planNum) {
                //   let total: number = Number(tl) - Number(cc) - Number(bl)  // æ˜¯å¦æœ‰ä½™
                //   data[data.length - 1].wlnum = (Number(tl) - Number(cc) - Number(bl)).toString() + info.value.umodel.name
                //   if (total === 0) {
                //     isSubmit.value = true
                //   } else {
                //     isSubmit.value = false
                //   }
                // } else {
                //   isSubmit.value = false
                // }
                // statisticsData.value = data
            } else if (info.value.hasBom === 1) {  // æœ‰bom情况
                console.log('有bom')
                // let cc: number = 0
                // let bl: number = 0
                // let newData: any = {}
                // if (feedingData.value.length > 0) {  // æŠ•æ–™
                //     feedingData.value.forEach((e: any) => {
                //         if (Object.keys(newData).indexOf('' + e.name) === -1) {
                //             newData[e.name] = []
                //         }
                //         newData[e.name].push(e)
                //     })
                //     for (let key in newData) {
                //         let obj = { name: '工单投料', gznum: newData[key].length, wlmc: key, wlnum: 0, num: 0 }
                //         newData[key].forEach((item: any) => {
                //             obj.wlnum = obj.wlnum + item.num
                //             obj.num = item.num
                //         })
                //         obj.wlnum = obj.wlnum.toString() + newData[key][0].company as never
                //         statisticsData.value.push(obj)
                //     }
                // }
                // if (produceData.value.length > 0) {  // äº§å‡º
                //     produceData.value.forEach((item: any) => {
                //         cc = cc + item.num
                //     })
                //     statisticsData.value.push({ name: '工单合格产出', gznum: produceData.value.length, wlmc: info.value.mmodel.name, wlnum: cc + info.value.umodel.name, num: cc })
                // }
                // if (undesirable.value.length > 0 || scrap.value.length > 0) {  // ä¸è‰¯/报废
                //     undesirable.value.forEach((item: any) => {
                //         bl = bl + item.num
                //     })
                //     scrap.value.forEach((item: any) => {
                //         bl = bl + item.num
                //     })
                //     statisticsData.value.push({ name: '工单不良产出', gznum: undesirable.value.length + scrap.value.length, wlmc: info.value.mmodel.name, wlnum: bl + info.value.umodel.name, num: bl })
                // }
                // let totaltl: number = 0
                // let totalcc: number = 0
                // let totalbl: number = 0
                // statisticsData.value.forEach((item: any) => {
                //     if (item.name === '工单投料') {
                //         totaltl = totaltl + item.num
                //     } else if (item.name === '工单合格产出') {
                //         totalcc = totalcc + item.num
                //     } else if (item.name === '工单不良产出') {
                //         totalbl = totalbl + item.num
                //     }
                // })
                // isSubmit.value = totalcc + totalbl <= info.value.planNum;
                let arr: any = []
                let tl = 0
                let res = getGroupNum(feedingData.value)
                for (let i in res) {
                    let num = 0
                    res[i].forEach((item: any) => {
                        num += item.num
                    })
                    arr.push({ name: '工单投料', materialName: i, num: num })
                }
                feedingData.value.forEach((item:any) => {
                    tl += item.num
                })
                statisticsData.value = [...statisticsData.value, ...arr]
                statisticsData.value.push({ name: '工单合格产出', materialName:  info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.qualified })
                statisticsData.value.push({ name: '工单不良产出', materialName:  info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.undesirable })
                isSubmit.value = produceFrom.qualified + produceFrom.undesirable <= info.value.planNum;
            }
        } else {
            console.log('推式')
            if (feedingData.value.length === 0) {
                Toast.fail({ message: '投料明细不能为空' })
                return
            }
            statisticsData.value = []
            if (info.value.hasBom === 0) {
                console.log('无bom')
                // let data: any = [
                //     { name: '工单投料', gznum: feedingData.value.length, wlmc: feedingData.value.length > 0 ? feedingData.value[0].name : '', wlnum: 0 },
                //     { name: '工单合格产出', gznum: produceData.value.length, wlmc: produceData.value.length > 0 ? produceData.value[0].name : '', wlnum: 0 },
                //     { name: '工单不良产出', gznum: 0, wlmc: '', wlnum: 0 },
                //     { name: '工单未投料', gznum: '', wlmc: feedingData.value.length > 0 ? feedingData.value[0].name : '', wlnum: 0 }
                // ]
                // if (undesirable.value.length > 0) {   // åˆ¤æ–­æœ‰æ²¡æœ‰ä¸è‰¯
                //     data[2].wlmc = undesirable.value[0].name
                //     data[2].gznum = data[2].gznum + undesirable.value.length
                // }
                // if (scrap.value.length > 0) {   // åˆ¤æ–­æœ‰æ²¡æœ‰ä¸è‰¯
                //     data[2].wlmc = scrap.value[0].name
                //     data[2].gznum = data[2].gznum + scrap.value.length
                // }
                // let tl = 0
                // let cc = 0
                // let bl = 0
                // undesirable.value.forEach((item: any) => {  // ä¸è‰¯
                //     bl = bl + item.num
                // })
                // scrap.value.forEach((item: any) => {  // æŠ¥åºŸ
                //     bl = bl + item.num
                // })
                // if (produceData.value.length > 0) {   // åˆ¤æ–­æœ‰æ²¡æœ‰åˆæ ¼äº§å‡º
                //     produceData.value.forEach((item: any) => {  // äº§å‡º
                //         cc = cc + item.num
                //     })
                // }
                // feedingData.value.forEach((item: any) => {  // æŠ•æ–™
                //     tl = tl + item.num
                // })
                // data[0].wlnum = tl.toString() + info.value.umodel.name
                // if (produceData.value.length > 0) {
                //     data[1].wlnum = cc.toString() + info.value.umodel.name
                // }
                // data[2].wlnum = bl.toString() + info.value.umodel.name
                // if (Number(tl) <= info.value.planNum) {
                //     let total: number = Number(tl) - Number(cc) - Number(bl)  // æ˜¯å¦æœ‰ä½™
                //     data[data.length - 1].wlnum = (Number(tl) - Number(cc) - Number(bl)).toString() + info.value.umodel.name
                //     if (total === 0) {
                //         isSubmit.value = true
                //     } else {
                //         isSubmit.value = false
                //     }
                // } else {
                //     isSubmit.value = false
                // }
                // statisticsData.value = data
                let arr: any = []
                let tl = 0
                let res = getGroupNum(feedingData.value)
                for (let i in res) {
                    let num = 0
                    res[i].forEach((item: any) => {
                        num += item.num
                    })
                    arr.push({ name: '工单投料', materialName: i + '-' + res[i][0].procedureName, num: num })
                }
                feedingData.value.forEach((item:any) => {
                    tl += item.num
                })
                statisticsData.value = [...statisticsData.value, ...arr]
                statisticsData.value.push({ name: '工单合格产出', materialName: info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.qualified })
                statisticsData.value.push({ name: '工单不良产出', materialName: info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.undesirable })
                if (Number(tl) <= info.value.planNum) {
                    let total: number = Number(tl) - Number(produceFrom.qualified) - Number(produceFrom.undesirable)  // æ˜¯å¦æœ‰ä½™
                    statisticsData.value.push({ name: '工单未投料', materialName: '', num: (Number(tl) - Number(produceFrom.qualified) - Number(produceFrom.undesirable)).toFixed(2) })
                    if (total === 0) {
                        isSubmit.value = true
                    } else {
                        isSubmit.value = false
                    }
                } else {
                    isSubmit.value = false
                }
            } else if (info.value.hasBom === 1) {  // æœ‰bom情况
                console.log('有bom')
                let arr: any = []
                let tl = 0
                let res = getGroupNum(feedingData.value)
                for (let i in res) {
                    let num = 0
                    res[i].forEach((item: any) => {
                        num += item.num
                    })
                    arr.push({ name: '工单投料', materialName: i, num: num })
                }
                feedingData.value.forEach((item:any) => {
                    tl += item.num
                })
                statisticsData.value = [...statisticsData.value, ...arr]
                statisticsData.value.push({ name: '工单合格产出', materialName: info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.qualified })
                statisticsData.value.push({ name: '工单不良产出', materialName: info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.undesirable })
                // isSubmit.value = produceFrom.qualified + produceFrom.undesirable <= info.value.planNum;
                isSubmit.value = true
            }
        }
        statistics.value = true
    }

    // æ ¹æ®æŸä¸ªå­—段进行分组
    const getGroupNum = (arr: any) => {
        let newArry: any = {};
        for (let i = 0; i < arr.length; i++) {
            if (newArry[arr[i].materialName]) {
                newArry[arr[i].materialName].push(arr[i])
            } else {
                newArry[arr[i].materialName] = [arr[i]]
            }
        }
        return newArry;
    }

    // è¿”回修改
    const gofh = () => {
        statistics.value = false
    }

    // ç¡®è®¤æŠ¥å·¥
    const submitBG = () => {
        comfirmDoneStandard({
            id: route.query.id
        }).then(res => {
            if (res.code === 200) {
                Toast.success({ message: '报工成功', forbidClick: true, duration: 2000 })
                setTimeout(() => {
                    router.go(-2)
                }, 2000)
            }
        })
    }

    onMounted(() => {
        pageDJs()
        queryByIds()
        getOrocessRecords()
        getOrocessRecordCC()
    })
</script>

<style lang="scss" scoped>
    .bg {
        width: 100%;
        /*height: 100%;*/
        position: absolute;
        background: #F7F7F7;
        .details_cz {
            width: 100%;
            padding: 30px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .details_cz_sdtl {
                width: 330px;
                height: 76px;
                background: #FFFFFF;
                border-radius: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                    width: 28px;
                    height: 28px;
                    margin-right: 14px;
                }
                span {
                    font-size: 26px;
                    font-weight: 400;
                    color: #222222;
                }
            }
            .details_cz_smtl {
                /*width: 330px;*/
                flex: 1;
                height: 76px;
                background: $nav-color;
                border-radius: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                    width: 28px;
                    height: 28px;
                    margin-right: 14px;
                }
                span {
                    font-size: 26px;
                    font-weight: 400;
                    color: #ffffff;
                }
            }
        }
        .bg_list {
            width: 100%;
            display: flex;
            flex-direction: column;
            margin-top: 30px;
            .bg_list_item {
                display: flex;
                flex-direction: column;
                margin-bottom: 40px;
                .kong {
                    text-align: center;
                    padding: 30px 0;
                    background: #ffffff;
                    font-size: 25px;
                    span {
                        color: #474747;
                    }
                }
                .bg_list_item_top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-left: 30px;
                    padding-right: 30px;
                    margin-bottom: 30px;
                    .bg_list_item_top_left {
                        display: flex;
                        align-items: center;
                        .left {
                            margin-left: 12px;
                            font-size: 28px;
                        }
                        .warning {
                            width: 8px;
                            height: 30px;
                            border-radius: 2px;
                            margin-right: 12px;
                            background: $nav-stateColor5 !important;
                        }
                        .error {
                            width: 8px;
                            height: 30px;
                            border-radius: 2px;
                            margin-right: 12px;
                            background: $nav-stateColor4 !important;
                        }
                        .bg_list_item_top_left_x {
                            width: 8px;
                            height: 30px;
                            background: $nav-color;
                            border-radius: 2px;
                            margin-right: 12px;
                        }
                        span {
                            font-size: 32px;
                            font-weight: 500;
                            color: #222222;
                            display: flex;
                            align-items: center;
                        }
                    }
                    .bg_list_item_top_right {
                        display: flex;
                        align-items: center;
                        img {
                            width: 28px;
                            height: 28px;
                            margin-right: 12px;
                        }
                        span {
                            font-size: 28px;
                            font-weight: 400;
                            color: $nav-color;
                        }
                    }
                }
                .bg_list_item_num {
                    width: 100%;
                    background: white;
                    padding: 0 30px;
                    box-sizing: border-box;
                    .kong {
                        text-align: center;
                        font-size: 25px;
                        padding: 30px 0;
                        background: #ffffff;
                    }
                    .bg_list_item_num_item {
                        display: flex;
                        align-items: center;
                        // height: 118px;
                        padding: 15px 0;
                        box-sizing: border-box;
                        justify-content: space-between;
                        border-bottom: 1px solid #E5E5E5;
                        &:last-child {
                            border: none;
                        }
                        .bg_list_item_num_item_wl {
                            flex-shrink: 0;
                            display: flex;
                            flex-direction: column;
                            span {
                                font-size: 34px;
                                color: #222222;
                            }
                            .bg_list_item_num_item_wl_lx {
                                margin-top: 10px;
                                span {
                                    color: #222222;
                                    font-size: 28px;
                                }
                            }
                        }
                        .warning {
                            color: $nav-stateColor5 !important;
                        }
                        .err {
                            color: $nav-stateColor4 !important;
                        }
                        span {
                            flex-shrink: 0;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            .warning {
                                color: $nav-stateColor5 !important;
                                margin-right: 5px;
                            }
                            .err {
                                color: $nav-stateColor4 !important;
                                margin-right: 5px;
                            }
                            &:nth-child(1) {
                                font-size: 30px;
                                font-weight: 400;
                                color: #222222;
                            }
                            &:nth-child(2) {
                                font-size: 28px;
                                font-weight: 400;
                                color: #333333;
                                flex-shrink: 0;
                            }
                        }
                        .bg_list_item_num_item_sr {
                            flex: 1;
                            display: flex;
                            align-items: center;
                            justify-content: flex-end;
                            input::-webkit-input-placeholder {
                                font-size: 28px;
                            }
                            input {
                                text-align: right;
                                width: 180px;
                                height: 60px;
                                border-radius: 8px;
                                border: 1PX solid #E5E5E5;
                                margin-right: 20px;
                                font-size: 28px;
                                font-weight: 400;
                                color: #333333;
                                padding: 0 30px
                            }
                            span {
                                font-size: 28px;
                                font-weight: 400;
                                color: #666666;
                            }
                        }
                    }
                }
            }
        }
        .details_dj {
            display: flex;
            flex-direction: column;
            .details_dj_title {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 30px 30px 30px;
                box-sizing: border-box;
                .details_dj_title_left {
                    display: flex;
                    align-items: center;
                    .details_x {
                        width: 8px;
                        height: 30px;
                        background: $nav-color;
                        border-radius: 2px;
                        margin-right: 12px;
                    }
                    span {
                        font-size: 32px;
                        font-weight: 500;
                        color: #222222;
                    }
                }
                .details_dj_title_right {
                    display: flex;
                    align-items: center;
                    img {
                        width: 28px;
                        height: 28px;
                        margin-right: 12px;
                    }
                    span {
                        font-size: 28px;
                        font-weight: 400;
                        color: $nav-color;
                    }
                }
            }
            .details_dj_list {
                width: 100%;
                /*padding: 30px;*/
                box-sizing: border-box;
                background: #ffffff;
                display: flex;
                flex-direction: column;
                .details_dj_list_item {
                    display: flex;
                    flex-direction: column;
                    border-bottom: 1px solid #E5E5E5;
                    padding: 30px;
                    /*margin: 30px;*/
                    /*padding-bottom: 30px;*/
                    /*margin-bottom: 30px !important;*/
                    span {
                        &:nth-child(1) {
                            font-size: 28px;
                            font-weight: 400;
                            color: #222222;
                        }
                        &:nth-child(2) {
                            font-size: 24px;
                            font-weight: 400;
                            color: #999999;
                            margin-top: 24px;
                        }
                    }
                }
            }
        }
        .bh_zw {
            height: 160px;
        }
        .bg_footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 0 30px 60px 30px;
            box-sizing: border-box;
            .bg_footer_submit {
                width: 690px;
                height: 88px;
                background: $nav-color;
                box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
                border-radius: 8px;
                font-size: 30px;
                font-weight: 500;
                color: #FFFFFF;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        .tg {
            width: 100%;
            height: 100%;
            padding: 30px;
            box-sizing: border-box;
            .tg_header {
                width: 100%;
                height: 45px;
                text-align: center;
                line-height: 45px;
                font-size: 30px;
                font-weight: 500;
                color: #222222;
            }
            .tg_table {
                width: 100%;
                margin-top: 40px;
                .tg_table_header {
                    width: 100%;
                    height: 72px;
                    background: #EFF2FC;
                    display: flex;
                    align-items: center;
                    .tg_table_header_item {
                        flex: 1;
                        font-size: 26px;
                        font-weight: 500;
                        color: #333333;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }
            .nr {
                max-height: 400px;
                overflow-x: scroll;
                .tg_table_nr {
                    width: 100%;
                    padding: 24px 10px;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    background: white;
                    box-shadow: inset 0px -2px 0px 0px #E5E5E5;
                    .tg_table_nr_item {
                        flex: 1;
                        font-size: 26px;
                        font-weight: 500;
                        color: #333333;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .tg_table_nr_item1 {
                        flex: 1;
                        font-size: 26px;
                        font-weight: 500;
                        color: #333333;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }
        }
        .tg_footer {
            width: calc(100% - 60px);
            position: fixed;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding-bottom: 40px;
            .tg_footer_fh {
                width: 100%;
                height: 88px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(66, 117, 252, 0.05);
                border-radius: 8px;
                border: 1PX solid #4275FC;
                font-size: 32px;
                font-weight: 500;
                color: $nav-color;
            }
            .tg_footer_qr {
                width: 100%;
                height: 88px;
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
                background: $nav-color;
                border-radius: 8px;
                font-size: 32px;
                font-weight: 500;
                color: #FFFFFF;
            }
        }
        .bl {
            padding: 30px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            .bl_head {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                span {
                    font-size: 28px;
                    color: #222222;
                    &:nth-child(2) {
                        font-size: 32px !important;
                    }
                }
            }
            .bl_list {
                width: 100%;
                height: 580px;
                overflow-y: scroll;
                margin-top: 30px;
                .bl_list_item {
                    width: 100%;
                    height: 60px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 20px;
                    &:last-child {
                        margin-bottom: 0 !important;
                    }
                    .bl_list_item_left {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        input {
                            width: 30px;
                            height: 30px;
                            margin: 0 !important;
                        }
                        span {
                            font-size: 30px;
                            color: #222222;
                            margin-left: 10px;
                        }
                    }
                    .bl_list_item_right {
                        flex: 1;
                        height: 50px;
                        text-align: right;
                        input {
                            padding-left: 5px;
                            width: 160px;
                            height: 100%;
                            font-size: 28px;
                            border-radius: 10px;
                            border: 2px solid #999999
                        }
                    }
                }
            }
        }
    }
</style>

 web_standard/package-lock.json

@@ -1814,63 +1814,6 @@
          "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
          "dev": true
        },
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.4",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "ssri": {
          "version": "8.0.1",
          "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1617826515595&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fssri%2Fdownload%2Fssri-8.0.1.tgz",
@@ -1878,28 +1821,6 @@
          "dev": true,
          "requires": {
            "minipass": "^3.1.1"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        },
        "vue-loader-v16": {
          "version": "npm:vue-loader@16.8.3",
          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
          "dev": true,
          "optional": true,
          "requires": {
            "chalk": "^4.1.0",
            "hash-sum": "^2.0.0",
            "loader-utils": "^2.0.0"
          }
        }
      }
@@ -13414,6 +13335,87 @@
        }
      }
    },
    "vue-loader-v16": {
      "version": "npm:vue-loader@16.8.3",
      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
      "dev": true,
      "optional": true,
      "requires": {
        "chalk": "^4.1.0",
        "hash-sum": "^2.0.0",
        "loader-utils": "^2.0.0"
      },
      "dependencies": {
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.4",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        }
      }
    },
    "vue-qr": {
      "version": "4.0.9",
      "resolved": "https://registry.npmmirror.com/vue-qr/-/vue-qr-4.0.9.tgz",