chenhaozhe
2026-03-13 b7b47130b76637898f76197a2d0eaa29f5f73ff3
pages/huanyangdan/BackSampleCheckBillList.vue
New file
@@ -0,0 +1,584 @@
<template>
    <view>
        <view class="page-header">
            <view class="search-item">
                <view class="left">日期间隔</view>
                <view class="right">
                    <picker mode="selector" :value="curDateGap" :range="dateRangePicker"
                        @change="onDateRangePickerChangeHandler">
                        <input disabled v-model="curDateGap" placeholder="请选择日期间隔" />
                        <view class="picker-overlay"></view>
                    </picker>
                </view>
            </view>
            <view class="search-item">
                <view class="left">开始日期</view>
                <view class="right">
                    <uni-datetime-picker :clear-icon="false" type="date" v-model="startDate"
                        :disabled="!enableCustomDateRange">
                        <view class="datetime-picker-inner"
                            :class="enableCustomDateRange?'font__enable':'font__disable'">
                            <text>{{ startDate }}</text>
                        </view>
                    </uni-datetime-picker>
                </view>
            </view>
            <view class="search-item">
                <view class="left">结束日期</view>
                <view class="right">
                    <uni-datetime-picker :clear-icon="false" type="date" v-model="endDate"
                        :disabled="!enableCustomDateRange">
                        <view class="datetime-picker-inner"
                            :class="enableCustomDateRange?'font__enable':'font__disable'">{{ endDate }}</view>
                    </uni-datetime-picker>
                </view>
            </view>
            <view class="search-item">
                <view class="left">单据号</view>
                <view class="right">
                    <input type="text" auto-focus v-model="HBillNo" />
                </view>
            </view>
            <view class="button-groups">
                <button type="default" size="mini" class="btn-b" @tap.stop="onAddClickHandler">新增</button>
                <button type="default" size="mini" class="btn-c" @tap.stop="onSearchClickHandler">查询</button>
                <button type="default" size="mini" class="btn-a" @tap.stop="onResetClickHandler">重置</button>
            </view>
        </view>
        <view style="width: 100%;height: 16rpx;background-color: #e5e5e5;"></view>
        <scroll-view id="pageContent" scroll-y class="page-content" :style="{height: pageContentHeight + 'px'}">
            <view v-for="(item,index) in listData" :key="index">
                <uni-card :title="item['单据号']" :extra="'No.'+item['sorderid']"
                    @tap="showDetail = showDetail==index?-1:index">
                    <view class="card-detail">
                        <view class="detail" v-if="item['单据号']">
                            <text>单据号:</text>{{item['单据号']}}
                        </view>
                        <view class="detail" v-if="item['单据状态']">
                            <text>单据状态:</text>{{item['单据状态']}}
                        </view>
                        <view class="detail" v-if="item['日期']">
                            <text>日期:</text>{{item['日期']}}
                        </view>
                        <view class="detail" v-if="item['部门']">
                            <text>部门:</text>{{item['部门']}}
                        </view>
                        <view class="detail" v-if="item['工序']">
                            <text>工序:</text>{{item['工序']}}
                        </view>
                        <view class="detail" v-if="item['产品编码']">
                            <text>产品编码:</text>{{item['产品编码']}}
                        </view>
                        <view class="detail" v-if="item['产品名称']">
                            <text>产品名称:</text>{{item['产品名称']}}
                        </view>
                        <view class="detail" v-if="item['规格型号']">
                            <text>规格型号:</text>{{item['规格型号']}}
                        </view>
                        <view class="detail" v-if="item['计量单位']">
                            <text>计量单位:</text>{{item['计量单位']}}
                        </view>
                        <view class="detail" v-if="item['生产订单']">
                            <text>生产订单:</text>{{item['生产订单']}}
                        </view>
                        <view class="detail" v-if="item['流转卡']">
                            <text>流转卡:</text>{{item['流转卡']}}
                        </view>
                        <view class="detail" v-if="item['制单人']">
                            <text>制单人:</text>{{item['制单人']}}
                        </view>
                        <view class="detail" v-if="item['审核人']">
                            <text>审核人:</text>{{item['审核人']}}
                        </view>
                    </view>
                    <view class="card-detail" v-if="showDetail == index">
                        <view class="detail" v-if="item['还样员']">
                            <text>还样员:</text>{{item['还样员']}}
                        </view>
                        <view class="detail" v-if="item['还样数量']">
                            <text>还样数量:</text>{{item['还样数量']}}
                        </view>
                        <view class="detail" v-if="item['来源组织']">
                            <text>来源组织:</text>{{item['来源组织']}}
                        </view>
                        <view class="detail" v-if="item['质检组织']">
                            <text>质检组织:</text>{{item['质检组织']}}
                        </view>
                        <view class="detail" v-if="item['工序流转卡号']">
                            <text>工序流转卡号:</text>{{item['工序流转卡号']}}
                        </view>
                        <view class="detail" v-if="item['工序流转卡子内码']">
                            <text>工序流转卡子内码:</text>{{item['工序流转卡子内码']}}
                        </view>
                        <view class="detail" v-if="item['工序流转卡数量']">
                            <text>工序流转卡数量:</text>{{item['工序流转卡数量']}}
                        </view>
                        <view class="detail" v-if="item['工序流转卡批次号']">
                            <text>工序流转卡批次号:</text>{{item['工序流转卡批次号']}}
                        </view>
                        <view class="detail" v-if="item['任务单号']">
                            <text>任务单号:</text>{{item['任务单号']}}
                        </view>
                        <view class="detail" v-if="item['制单日期']">
                            <text>制单日期:</text>{{item['制单日期']}}
                        </view>
                        <view class="detail" v-if="item['审核日期']">
                            <text>审核日期:</text>{{item['审核日期']}}
                        </view>
                        <view class="detail" v-if="item['修改人']">
                            <text>修改人:</text>{{item['修改人']}}
                        </view>
                        <view class="detail" v-if="item['修改日期']">
                            <text>修改日期:</text>{{item['修改日期']}}
                        </view>
                        <view class="detail" v-if="item['关闭人']">
                            <text>关闭人:</text>{{item['关闭人']}}
                        </view>
                        <view class="detail" v-if="item['关闭日期']">
                            <text>关闭日期:</text>{{item['关闭日期']}}
                        </view>
                        <view class="detail" v-if="item['作废人']">
                            <text>作废人:</text>{{item['作废人']}}
                        </view>
                        <view class="detail" v-if="item['作废日期']">
                            <text>作废日期:</text>{{item['作废日期']}}
                        </view>
                    </view>
                    <view class="more" v-if="showDetail == index && operations != index">
                        <view class="part" style="border-right: 1px solid #eee;">
                            <uni-icons type="top" style="color: #888;margin-right: 10rpx;" size="14"></uni-icons>收起
                        </view>
                        <view class="part" @tap.stop="operations = operations==index?-1:index">
                            <uni-icons type="more-filled" style="color: #888;margin-right: 10rpx;"
                                size="14"></uni-icons>操作
                        </view>
                    </view>
                    <view class="more" v-if="showDetail != index && operations != index">
                        <view class="part" style="border-right: 1px solid #eee;">
                            <uni-icons type="bottom" style="color: #888;margin-right: 10rpx;" size="14"></uni-icons>更多信息
                        </view>
                        <view class="part" @tap.stop="operations = operations==index?-1:index">
                            <uni-icons type="more-filled" style="color: #888;margin-right: 10rpx;"
                                size="14"></uni-icons>操作
                        </view>
                    </view>
                    <view class="op" v-if="operations == index">
                        <!-- <button class="op1" size="mini" plain @tap.stop="">子表信息</button> -->
                        <!-- <button class="op2" size="mini" plain @tap.stop="">反审核</button> -->
                        <!-- <button class="op3" size="mini" plain @tap.stop="edit(item)">编辑</button> -->
                        <button class="op4" size="mini" plain @tap.stop="del(item)">删除</button>
                        <button class="op5" size="mini" plain @tap.stop="operations = -1">取消操作</button>
                    </view>
                </uni-card>
            </view>
            <view class="over" v-if="listData.length == 0">暂无数据</view>
        </scroll-view>
        <!-- 分页器 -->
        <view class="page-footer">
            <uni-pagination id="pagination" title="标题文字" v-model="pageMeta.curPage" :pageSize="pageMeta.size"
                :total="pageMeta.total" @change="onPageChangeHandler"></uni-pagination>
        </view>
    </view>
</template>
<script>
    import dayjs from 'dayjs'
    import {
        CommonUtils
    } from '@/utils/common.js'
    import {
        getUserInfo
    } from '../../utils/auth'
    export default {
        data() {
            return {
                // 计算卡片列表高度
                pagination_top: 0,
                pageContent_top: 0,
                // 分页控制
                pageMeta: {
                    curPage: 1,
                    size: 50,
                    total: 0,
                },
                // 滚动控制
                scrollTop: 0,
                old: {
                    scrollTop: 0
                },
                dateRangePicker: ["任意间隔", "今天", "近两天", "近三天",
                    "近四天", "近五天", "近六天", "近七天", "近30天"
                ],
                curDateGap: "近七天",
                enableCustomDateRange: false,
                startDate: dayjs(new Date()).subtract(7, 'day').format('YYYY-MM-DD'),
                endDate: dayjs(new Date()).format('YYYY-MM-DD'),
                HBillNo: '',
                listData: [],
                showDetail: -1,
                operations: -1,
            }
        },
        computed: {
            pageContentHeight: {
                get() {
                    return (this.pagination_top - this.pageContent_top)
                }
            },
        },
        onLoad() {
            this.onSearchClickHandler()
        },
        onPullDownRefresh() {
            this.onSearchClickHandler()
        },
        async onReady() {
            // #ifndef MP-WEIXIN
            let query = uni.createSelectorQuery().in(this)
            query.select("#pagination")
                .boundingClientRect((data) => {
                    if (data) {
                        this.pagination_top = data.top
                    } else {
                        console.log("未找到#pagination节点");
                    }
                })
                .exec();
            query.select("#pageContent")
                .boundingClientRect((data) => {
                    if (data) {
                        this.pageContent_top = data.top
                    } else {
                        console.log("未找到#pageContent节点");
                    }
                })
                .exec();
            // #endif
        },
        methods: {
            // 新增还样单
            onAddClickHandler() {
                uni.navigateTo({
                    url: "/pages/huanyangdan/BackSampleCheckBill?operationType=0"
                })
            },
            del(item) {
                uni.showModal({
                    title: '删除确认',
                    content: '确认要删除吗,删除后不能恢复',
                    success: (res) => {
                        if (res.confirm) {
                            console.log('用户点击确定');
                            CommonUtils.doRequest2({
                                url: '/QC_TakeSampleCheckBill/DeleteQC_BackSampleCheckBillMain',
                                data: {
                                    HInterID: item['hmainid'],
                                    user: getUserInfo()['Czymc']
                                },
                                resFunction: (res) => {
                                    let {
                                        data,
                                        count,
                                        Message
                                    } = res.data
                                    if (count == 1) {
                                        uni.showToast({
                                            icon: 'none',
                                            title: '删除成功!'
                                        })
                                        this.onSearchClickHandler()
                                    } else {
                                        uni.showToast({
                                            icon: 'none',
                                            title: Message
                                        })
                                    }
                                }
                            })
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            },
            goTop: function(e) {
                // 解决view层不同步的问题
                this.scrollTop = this.old.scrollTop
                this.$nextTick(function() {
                    this.scrollTop = 0
                });
            },
            onDateRangePickerChangeHandler({
                detail
            }) {
                this.enableCustomDateRange = false
                this.curDateGap = this.dateRangePicker[detail.value]
                let date = new Date()
                switch (this.curDateGap) {
                    case "今天":
                        this.startDate = dayjs(date).format("YYYY-MM-DD")
                        break;
                    case "近一天":
                        this.startDate = dayjs(date).subtract(1, 'day').format("YYYY-MM-DD")
                        break;
                    case "近两天":
                        this.startDate = dayjs(date).subtract(2, 'day').format("YYYY-MM-DD")
                        break;
                    case "近三天":
                        this.startDate = dayjs(date).subtract(3, 'day').format("YYYY-MM-DD")
                        break;
                    case "近四天":
                        this.startDate = dayjs(date).subtract(4, 'day').format("YYYY-MM-DD")
                        break;
                    case "近五天":
                        this.startDate = dayjs(date).subtract(5, 'day').format("YYYY-MM-DD")
                        break;
                    case "近六天":
                        this.startDate = dayjs(date).subtract(6, 'day').format("YYYY-MM-DD")
                        break;
                    case "近七天":
                        this.startDate = dayjs(date).subtract(7, 'day').format("YYYY-MM-DD")
                        break;
                    case "近30天":
                        this.startDate = dayjs(date).subtract(30, 'day').format("YYYY-MM-DD")
                        break;
                }
                if (this.curDateGap == '任意间隔') {
                    this.enableCustomDateRange = true
                }
            },
            onSearchClickHandler() {
                let sWhere = ""
                if (this.startDate) {
                    sWhere += " and CONVERT(varchar(100),日期, 23) >= '" + this.startDate + "'";
                }
                if (this.endDate) {
                    sWhere += " and CONVERT(varchar(100),日期, 23) <= '" + this.endDate + "'";
                }
                if (this.HBillNo) {
                    sWhere += " and 单据号 like '%" + this.HBillNo + "%'";
                }
                this.get_DisplayPage(sWhere);
            },
            clear() {
                this.curDateGap = "近七天"
                this.enableCustomDateRange = false
                this.startDate = dayjs(new Date()).subtract(7, 'day').format('YYYY-MM-DD')
                this.endDate = dayjs(new Date()).format('YYYY-MM-DD')
                this.HBillNo = ''
            },
            async onResetClickHandler() {
                this.clear()
                await this.$nextTick()
                this.onSearchClickHandler()
            },
            get_DisplayPage(sWhere) {
                CommonUtils.doRequest2({
                    url: '/QC_TakeSampleCheckBill/get_QC_BackSampleCheckBillListPage',
                    data: {
                        "sWhere": sWhere,
                        "user": getUserInfo()["Czymc"],
                        "page": this.pageMeta.curPage,
                        "size": this.pageMeta.size
                    },
                    resFunction: (res) => {
                        let {
                            data,
                            Message,
                            count
                        } = res.data
                        console.log('res.data: ', res.data);
                        this.listData = data;
                        this.pageMeta.total = count
                        uni.stopPullDownRefresh()
                    }
                })
            },
            onPageChangeHandler() {
                this.onSearchClickHandler()
                this.goTop()
            }
        },
    }
</script>
<style lang="scss">
    .page-header {
        display: flex;
        box-sizing: border-box;
        padding: 20rpx;
        flex-direction: column;
        gap: 10rpx;
        font-size: 32rpx;
        .search-item {
            display: flex;
            flex-direction: row;
            gap: 10rpx;
            justify-content: center;
            align-items: center;
            .left {
                width: 4em;
            }
            .right {
                flex: 1;
                position: relative;
                border-radius: 22rpx;
                border: 1px solid #acacac;
                display: flex;
                padding: 4rpx 10rpx;
                picker {
                    width: 100%;
                }
            }
        }
        input {
            width: inherit;
            padding: 8rpx 20rpx;
            font-size: 30rpx;
        }
        .datetime-picker-inner {
            padding: 8rpx 20rpx;
            font-size: 30rpx;
            display: flex;
            align-items: center;
        }
        .font__enable {
            color: #000;
        }
        .font__disable {
            color: #cccccc;
        }
    }
    .button-groups {
        box-sizing: border-box;
        padding: 10rpx 0 0 0;
        display: flex;
        flex-direction: row;
        gap: 10rpx;
        justify-content: space-between;
        button {
            border-radius: 50rpx;
            width: 180rpx;
            height: 66rpx;
            line-height: 66rpx;
            font-size: 28rpx;
        }
        .btn-a {
            background-color: #acacac;
            color: #fff;
        }
        .btn-b {
            background-color: #41a863;
            color: #fff;
        }
        .btn-c {
            background-color: #3a78ff;
            color: #fff;
        }
    }
    .page-content {
        // height: 40vh;
        box-sizing: border-box;
        padding: 10rpx 0;
        .card-detail {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            line-height: 120%;
            .detail {
                // width: 50%;
                font-size: 26rpx;
                margin-bottom: 12rpx;
                color: #555;
                margin-right: 20rpx;
                text {
                    color: #999;
                    font-size: 26rpx;
                }
            }
        }
        .more {
            color: #888;
            font-size: 24rpx;
            display: flex;
            border-top: 1px solid #eee;
            padding-top: 20rpx;
            .part {
                width: 50%;
                text-align: center;
            }
        }
        .op {
            display: flex;
            justify-content: space-around;
            margin-top: 20rpx;
            button {
                padding: 0;
                width: 150rpx;
                font-size: 25rpx;
            }
            .op1 {
                border: 1px solid #41a863;
                color: #41a863;
            }
            .op2 {
                border: 1px solid #d98d00;
                color: #d98d00;
            }
            .op3 {
                border: 1px solid #3a78ff;
                color: #3a78ff;
            }
            .op4 {
                border: 1px solid #da0000;
                color: #da0000;
            }
            .op5 {
                border: 1px solid #888;
                color: #888;
            }
        }
    }
    .page-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 32rpx 40rpx;
    }
</style>