1.平板sop页面

小小儁爺

2025-12-30 2b1c5e5c3cfe5ef193364490c293fdf0c7605757

1.平板sop页面

 config/api.js

@@ -444,4 +444,23 @@
export const ProductOrderSearch = (data, config = {}) => http.get(
    '/AppProduct/ProductOrderSearch', {
        params: data
    })


//MES工单查询
export const SopSearchMesOrderSearch = (data, config = {}) => http.get(
    '/SopSearch/MesOrderSearch', {
        params: data
    })

//MES工单编辑获取工序数据
export const SopSearchUpdateMesOrderStepSearch = (data, config = {}) => http.get(
    '/SopSearch/UpdateMesOrderStepSearch', {
        params: data
    })

//MES工单查看工艺SOP
export const SopSearchMesOrderProcessSopSearch = (data, config = {}) => http.get(
    '/SopSearch/MesOrderProcessSopSearch', {
        params: data
    })

 pages.json

@@ -22,6 +22,20 @@
                "navigationStyle": "custom",
                "enablePullDownRefresh": false
            }
        }, {
            "path": "pages/sop/index",
            "style": {
                "navigationBarTitleText": "sop",
                "navigationStyle": "custom",
                "enablePullDownRefresh": false
            }
        }, {
            "path": "pages/sop/sop",
            "style": {
                "navigationBarTitleText": "sop",
                "navigationStyle": "custom",
                "enablePullDownRefresh": false
            }
        },
        {
            "path": "pages/mjgl/mjcx",

 pages/sop/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,394 @@
<template>
    <view>
        <view class="uni-container">

            <view class="headTitle">浙江优步体育用品股份有限公司工序SOP</view>


            <uni-forms ref="form" :modelValue="form" class="headForm">
                <uni-forms-item label="车间名称" label-width='100' class="headFormItem">
                    <uni-data-select v-model="form.wkshopcode" @clear='search' :localdata="wkshopcodeArr"
                        @change="val=>search(val,'wkshopcode')"></uni-data-select>
                    <!--     <uni-easyinput type="text" v-model="form.wkshopcode" placeholder="请输入" @change='search'
                        @clear="search" /> -->
                </uni-forms-item>
                <uni-forms-item label="工单编号" label-width='100' class="headFormItem">
                    <uni-easyinput v-model="form.mesordercode" type="text" placeholder="请输入" @change='search'
                        @clear="search" />
                </uni-forms-item>
                <uni-forms-item label="源单单号" label-width='100' class="headFormItem">
                    <uni-easyinput v-model="form.sourceorder" type="text" placeholder="请输入" @change='search'
                        @clear="search" />
                </uni-forms-item>
                <uni-forms-item label="销售订单" label-width='100' class="headFormItem">
                    <uni-easyinput v-model="form.saleordercode" type="text" placeholder="请输入" @change='search'
                        @clear="search" />
                </uni-forms-item>
                <uni-forms-item label="产品编码" label-width='100' class="headFormItem">
                    <uni-easyinput v-model="form.partcode" type="text" placeholder="请输入" @change='search'
                        @clear="search" />
                </uni-forms-item>
                <uni-forms-item label="产品名称" label-width='100' class="headFormItem">
                    <uni-easyinput v-model="form.partname" type="text" placeholder="请输入" @change='search'
                        @clear="search" />
                </uni-forms-item>
            </uni-forms>

            <uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据" style="height: 52vh;">
                <!-- @selection-change="selectionChange"  type="selection" -->
                <uni-tr>
                    <uni-th width="80" align="center">序号</uni-th>
                    <uni-th width="150" align="center">生产车间</uni-th>
                    <uni-th width="150" align="center">工单编号</uni-th>
                    <uni-th width="150" align="center">源单编号</uni-th>
                    <uni-th width="150" align="center">销售订单</uni-th>
                    <uni-th width="150" align="center">产品编码</uni-th>
                    <uni-th width="150" align="center">产品名称</uni-th>
                    <uni-th width="150" align="center">产品规格</uni-th>
                    <uni-th width="150" align="center">工艺路线</uni-th>
                    <uni-th width="150" align="center">工单数</uni-th>
                    <uni-th width="204" align="center">操作</uni-th>
                </uni-tr>
                <uni-tr v-for="(item, index) in tableData" :key="index">
                    <uni-td>{{ item.rowNum }}</uni-td>
                    <uni-td>
                        <!-- <view class="name">{{ item.wkshp_name }}</view> -->
                        {{ item.wkshp_name?item.wkshp_name:'/' }}
                    </uni-td>
                    <uni-td align="center">{{ item.wo_code? item.wo_code:'/' }}</uni-td>
                    <uni-td align="center">{{ item.m_po?item.m_po:'/' }}</uni-td>
                    <uni-td align="center">{{ item.saleOrderCode?item.saleOrderCode:'/' }}</uni-td>
                    <uni-td align="center">{{ item.partcode?item.partcode:'/' }}</uni-td>
                    <uni-td align="center">{{ item.partname? item.partname:'/' }}</uni-td>
                    <uni-td align="center">{{ item.partspec ? item.partspec:'/'}}</uni-td>
                    <uni-td align="center">{{ item.route_name? item.route_name:'/' }}</uni-td>
                    <uni-td align="center">{{ item.plan_qty? item.plan_qty:'/' }}</uni-td>

                    <uni-td>
                        <view class="uni-group">
                            <button class="uni-button" size="mini" type="primary" @click="trClick(item)">选择工单</button>
                            <!-- <button class="uni-button" size="mini" type="warn">删除</button> -->
                        </view>
                    </uni-td>
                </uni-tr>
            </uni-table>

            <view class="uni-pagination-box"><uni-pagination show-icon :page-size="form.rows" :current="form.page"
                    :total="total" @change="change" /></view>



            <uni-table ref="table2" :loading="loading2" border stripe emptyText="请先选择工单" style="height: 28vh;">
                <!-- @selection-change="selectionChange"  type="selection" -->
                <uni-tr>
                    <uni-th width="80" align="center">序号</uni-th>

                    <uni-th width="150" align="center">工序编码</uni-th>
                    <uni-th width="150" align="center">工序名称</uni-th>
                    <uni-th width="150" align="center">已生产数量</uni-th>
                    <uni-th width="150" align="center">合格数量</uni-th>
                    <uni-th width="150" align="center">不良数量</uni-th>
                    <uni-th width="150" align="center">工废数量</uni-th>
                    <uni-th width="150" align="center">料废数量</uni-th>
                    <uni-th width="150" align="center">总可报数量</uni-th>
                    <uni-th width="150" align="center">待产数量</uni-th>
                    <uni-th width="204" align="center">sop预览</uni-th>
                </uni-tr>
                <uni-tr v-for="(item, index) in sopTableData" :key="index">
                    <uni-td>{{ item.seq }}</uni-td>

                    <uni-td> {{ item.step_code}} </uni-td>
                    <uni-td align="center">{{ item.stepname }}</uni-td>
                    <uni-td align="center">{{ item.produceq_qty }}</uni-td>
                    <uni-td align="center">{{ item.good_qty}}</uni-td>
                    <uni-td align="center">{{ item.ng_qty }}</uni-td>
                    <uni-td align="center">{{ item.laborbad_qty }}</uni-td>
                    <uni-td align="center">{{ item.materielbad_qty }}</uni-td>
                    <uni-td align="center">{{ item.plan_qty }}</uni-td>
                    <uni-td align="center">{{ item.delive_qty }}</uni-td>

                    <uni-td>
                        <view class="uni-group">
                            <button class="uni-button" size="mini" type="primary" @click="sopClick(item)">工序预览</button>
                            <!-- <button class="uni-button" size="mini" type="warn">删除</button> -->
                        </view>
                    </uni-td>
                </uni-tr>
            </uni-table>

        </view>
    </view>
</template>

<script>
    import {
        SopSearchMesOrderSearch,
        SopSearchUpdateMesOrderStepSearch,
        SopSearchMesOrderProcessSopSearch,
        PrentOrganizationNoCompany
    } from '../../config/api.js';

    export default {
        data() {
            return {
                tableData: [],
                // æ•°æ®æ€»é‡
                total: 0,
                loading: false,
                loading2: false,
                form: {
                    wkshopcode: '', // è½¦é—´ç¼–码
                    mesorderstus: '', // å·¥å•çŠ¶æ€ç 
                    mesordercode: '', // å·¥å•ç¼–号
                    partcode: '', // äº§å“ç¼–码
                    ordertype: '', // ordertype
                    sourceorder: '', // æºå•å•å·
                    saleordercode: '', // é”€å”®è®¢å•
                    partname: '', // äº§å“åç§°
                    partspec: '', // äº§å“è§„æ ¼
                    creatuser: '', // åˆ›å»ºäººå‘˜
                    datatype: 'ED', // æ—¥æœŸç±»åž‹(计划开工(PS)、计划完工(PE)、预计交付(ED)、创建日期(CT))
                    timeValue: [], // æŸ¥è¯¢æ—¥æœŸ
                    prop: 'lm_date', // æŽ’序字段
                    order: 'desc', // æŽ’序字段
                    page: 1, // ç¬¬å‡ é¡µ
                    rows: 15 // æ¯é¡µå¤šå°‘条
                },
                sopTableData: [],
                wkshopcodeArr: [],
                rowData: {} // è¡Œç‚¹å‡»äº‹ä»¶å­˜å‚¨å€¼

            }
        },
        onLoad() {
            // this.selectedIndexs = []
            this.getData(1)
        },
        mounted() {
            this.getPrentOrganizationNoCompany()
        },
        methods: {
            async getPrentOrganizationNoCompany() {
                const res = await PrentOrganizationNoCompany()
                this.wkshopcodeArr = res.data.map(({
                    torg_name,
                    torg_code
                }) => ({
                    text: torg_name,
                    value: torg_code
                }))
            },

            // // å¤šé€‰å¤„理
            // selectedItems() {
            //     return this.selectedIndexs.map(i => this.tableData[i])
            // },
            // // å¤šé€‰
            // selectionChange(e) {
            //     console.log(e.detail.index)
            //     this.selectedIndexs = e.detail.index
            // },
            // //批量删除
            // delTable() {
            //     console.log(this.selectedItems())
            // },

            // é€‰æ‹©å·¥å•
            trClick(row) {
                this.rowData = row
                const data = {
                    sourceid: row.sourceid,
                    sourcewo: row.m_po,
                    wocode: row.wo_code,
                    data_sources: row.data_sources
                }
                this.loading2 = true
                SopSearchUpdateMesOrderStepSearch(data).then(res => {
                    this.sopTableData = res.data.stepdata
                    this.loading2 = false
                })
            },
            // å·¥åºé¢„览
            async sopClick(row) {

                const data = {
                    materielcode: this.rowData.partcode,
                    routecode: this.rowData.route_code,
                    stepcode: row.step_code
                }

                const {
                    data: res
                } = await SopSearchMesOrderProcessSopSearch(data)
                // console.log(res)

                if (res.length === 0) {
                    return uni.$u.toast('此工序未上传sop，请先上传!')
                } else {
                    // è·³è½¬åˆ°sop页面，且传入sop信息和工单信息
                    const rowData = {
                        wo_code: this.rowData.wo_code,
                        partname: this.rowData.partname
                    }
                    uni.navigateTo({
                        url: './sop?sopArr=' + JSON.stringify(res) + '&mesOrderObj=' + JSON.stringify(rowData)
                    });
                }





            },
            // åˆ†é¡µè§¦å‘
            change(e) {
                // this.$refs.table.clearSelection()
                // this.selectedIndexs.length = 0
                this.getData(e.current)
            },
            // æœç´¢
            search(val, type) {
                if (type === 'wkshopcode') {
                    this.form.wkshopcode = val
                }
                this.getData(1)
            },
            // èŽ·å–数据
            getData(pageCurrent) {
                this.loading = true
                this.form.page = pageCurrent

                const data = {
                    wkshopcode: this.form.wkshopcode,
                    mesorderstus: this.form.mesorderstus, // å·¥å•çŠ¶æ€ç 
                    mesordercode: this.form.mesordercode, // å·¥å•ç¼–号
                    partcode: this.form.partcode, // äº§å“ç¼–码
                    partname: this.form.partname, // äº§å“åç§°
                    partspec: this.form.partspec, // äº§å“è§„æ ¼
                    creatuser: this.form.creatuser, // åˆ›å»ºäººå‘˜
                    sourceorder: this.form.sourceorder, // æºå•å•å·
                    saleordercode: this.form.saleordercode, // é”€å”®è®¢å•
                    ordertype: this.form.ordertype, // å•æ®ç±»åž‹
                    datatype: this.form.datatype,
                    searchdate: this.form.timeValue.join('~'),
                    // createdate: this.form.createdate.toString().length > 0 ? handleDatetime(this.form.createdate) : '', // åˆ›å»ºæ—¶é—´
                    prop: this.form.prop, // æŽ’序字段
                    order: this.form.order, // æŽ’序字段
                    page: this.form.page, // ç¬¬å‡ é¡µ
                    rows: this.form.rows // æ¯é¡µå¤šå°‘条
                }

                SopSearchMesOrderSearch(data).then(res => {
                    console.log(res)
                    this.tableData = res.data
                    this.total = res.count
                    this.loading = false

                })
                // this.request({
                //     pageSize: this.pageSize,
                //     pageCurrent: pageCurrent,
                //     value: value,
                //     success: res => {
                //         // console.log('data', res);
                //         this.tableData = res.data
                //         this.total = res.total
                //         this.loading = false
                //     }
                // })





            },
            // ä¼ªrequest请求
            request(options) {
                const {
                    pageSize,
                    pageCurrent,
                    success,
                    value
                } = options
                let total = tableData.length
                let data = tableData.filter((item, index) => {
                    const idx = index - (pageCurrent - 1) * pageSize
                    return idx < pageSize && idx >= 0
                })
                if (value) {
                    data = []
                    tableData.forEach(item => {
                        if (item.name.indexOf(value) !== -1) {
                            data.push(item)
                        }
                    })
                    total = data.length
                }

                setTimeout(() => {
                    typeof success === 'function' &&
                        success({
                            data: data,
                            total: total
                        })
                }, 500)
            }
        }
    }
</script>


<style scoped>
    /* #ifndef H5 */
    /* page {
    padding-top: 85px;
} */
    /* #endif */

    .uni-container {
        /*     background-color: #e8e8e8; */
    }

    .uni-group {
        display: flex;
        align-items: center;
    }

    ::v-deep .uni-table-mask {
        background-color: transparent !important;
    }

    .headTitle {
        height: 6vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40rpx;
        font-weight: bolder;
        font-family: Arial;
    }

    .headForm {
        height: 6vh;
        /* border-bottom: 2rpx solid #000; */

        span {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        .headFormItem {
            width: 500rpx;
        }
    }

    .uni-pagination-box {
        height: 4vh;
        margin: 1vh 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
    }
</style>

 pages/sop/sop.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,121 @@
<template>
    <view>
        <view class="headTitle">浙江优步体育用品股份有限公司工序SOP</view>
        <uni-forms ref="form" :modelValue="form" class="headForm">
            <uni-forms-item label="工单编号" label-width='100' class="headFormItem">
                <uni-easyinput v-model="form.mesordercode" type="text" placeholder="请输入" :clearable='false' />
            </uni-forms-item>
            <uni-forms-item label="产品名称" label-width='100' class="headFormItem">
                <uni-easyinput v-model="form.partname" type="text" placeholder="请输入" :clearable='false' />
            </uni-forms-item>
            <uni-forms-item label="工序sop" label-width='100' class="headFormItem">
                <uni-data-select v-model="form.filepath" :localdata="selectArr" :clearable='false'
                    @change="filepathChange"></uni-data-select>
            </uni-forms-item>
            <uni-forms-item label="版本号" label-width='100' class="headFormItem">
                <uni-easyinput v-model="form.v" type="text" placeholder="请输入" :clearable='false' />
            </uni-forms-item>
        </uni-forms>

        <button type="primary" @click="goBack" size="mini" class="goback">返 å›ž</button>


        <web-view class="my-web-view"
            :src="'https://view.xdocin.com/view?src=' + encodeURIComponent(baseUrl+form.filepath)"></web-view>

    </view>
</template>

<script>
    export default {
        onLoad(option) {
            this.sopArr = JSON.parse(option.sopArr)
            this.mesOrderObj = JSON.parse(option.mesOrderObj)
        },
        data() {
            return {
                selectArr: [],
                sopArr: [],
                mesOrderObj: {},
                form: {
                    partname: '',
                    mesordercode: '',
                    filepath: '',
                    v: ''
                },
                baseUrl: this.$baseUrl.split('api')[0],
            }
        },

        mounted() {
            this.selectArr = this.sopArr.map(({
                filename,
                filepath
            }) => ({
                text: filename,
                value: filepath
            }))
            this.form = {
                partname: this.mesOrderObj.partname,
                mesordercode: this.mesOrderObj.wo_code,
                filepath: this.sopArr[0].filepath,
                v: this.sopArr[0].version
            }
        },
        methods: {
            filepathChange(val) {
                console.log(val)
            },
            goBack() {
                // uni.navigateBack()
                uni.navigateTo({
                    url: './index'
                })
            }
        }

    }
</script>

<style scoped>
    .goback {
        position: absolute;
        right: 3vw;
        top: 6.5vh;
    }

    .my-web-view {
        height: 86vh;
        margin-top: 13vh;

    }

    .headTitle {
        height: 6vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40rpx;
        font-weight: bolder;
        font-family: Arial;
    }

    .headForm {
        height: 6vh;
        border-bottom: 2rpx solid #000;

        span {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        .headFormItem {
            width: 500rpx;
        }

        .uniui-clear {
            display: none;
        }
    }
</style>