baoshi-was/resources/views/store/receivingTasks/index.blade.php

@extends('layouts.app')
@section('title')开单入库-查询@endsection
@section('head')
    <link rel="stylesheet" href="{{ asset('css/element/index.css') }}">
@endsection


@section('content')
    <div id="list" class="container-fluid d-none">
        <div>
            <div id="form_div" style="min-width: 1220px;"></div>
            <div class="ml-3 form-inline" id="btn">
                @can('入库管理-开单入库-打印任务单')
                    <button type="button"
                            class="ml-2 btn btn-sm btn-outline-success "
                            @click="printReceivingTask">打印任务清单
                    </button>
                @endcan
            </div>
            <div>
                <table class="table table-sm table-striped table-hover table-bordered" id="table">
                    <tbody>
                    <tr v-for="(item,i) in receiving_tasks"
                        @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                        <td>
                            <input type="checkbox" class="checkItem" :value="item.id">
                        </td>
                        <td v-text="i+1"></td>
                        <td v-text="item.number"></td>
                        <td v-text="item.status"></td>
                        <td v-text="item.owner"></td>
                        <td>
                            <template v-for="(asn_no,i) in item.asn_nos">
                                <div>
                                    <span v-text="asn_no"></span>
                                </div>
                            </template>
                        </td>
                        <td v-text="item.created_at"></td>
                        <td v-text="item.warehouse"></td>
                        <td v-text="item.appointment_number"></td>
                        <td v-text="item.driving_license_no"></td>
                        <td v-text="item.receiving_type"></td>
                    </tr>
                    </tbody>
                </table>
                <div class="text-info h5 btn btn">{{$receivingTasks->count()}}/@{{ total }}</div>
                {{ $receivingTasks->withQueryString()->links() }}
            </div>
        </div>
        @include('store.receivingTasks._clodop_print')
    </div>
@endsection
@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
    <script type="text/javascript" src="{{asset('js/element-ui.js') }}"></script>
    <script type="text/javascript" src="{{mix('js/lodop/LodopFuncs.js')}}"></script>

    <script type="text/javascript" src='http://localhost:18000/CLodopfuncs.js?name=CLODOPA'></script>

    <script>
        let vue = new Vue({
            el: "#list",
            data: {
                receiving_tasks: [],
                total: 0,
                selectTr: 0,
                owners: [
                        @foreach($owners as $owner)
                    {
                        name: '{{$owner->id}}', value: '{{$owner->name}}'
                    },
                    @endforeach
                ],
                warehouses: [
                        @foreach($warehouses as $warehouse)
                    {
                        name: '{{$warehouse->id}}', value: '{{$warehouse->name}}'
                    },
                    @endforeach
                ],
                receiving_task_print: {
                    number: null,
                    warehouse: null,
                    for_single_member: null,
                    driver_name: null,
                    driver_phone: null,
                    plate_number: null,
                    driving_license_no: null,
                    provide_list: null,
                    receiving_type: null,
                    owner: null,
                    appointment_number: null,
                },
                clodop: null,
                clodopPrintDialogVisible: false,
                printerList: [],
                print_setting: {
                    printer_index: 0,
                }
            },
            created() {
            },
            mounted() {
                let receiving_tasks = {!! $receivingTasks->toJson() !!}['data'];
                this.receiving_tasks = this.sortReceivingTasks(receiving_tasks);
                this.total = {!! $receivingTasks->toJson() !!}['total'];
                $("#list").removeClass('d-none');
                let data = [[
                    {name: 'created_at_start', type: 'dateTime', tip: '选择显示指定日期的起始时间', placeholder: ''},
                    {name: 'created_at_end', type: 'dateTime', tip: '选择显示指定日期的结束时间', placeholder: ''},
                    {name: 'number', type: 'input', tip: '任务号：如模糊搜索需要在条件前后输入%号，回车提交', placeholder: '任务号'},
                    {name: 'appointment_number', type: 'input', tip: '预约号：如模糊搜索需要在条件前后输入%号，回车提交', placeholder: '预约号'},
                ], [
                    {
                        name: 'owner_id',
                        type: 'select_multiple_select',
                        data: this.owners,
                        tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的货主'],
                        placeholder: ['货主', '定位或多选货主']
                    },
                    {
                        name: 'warehouse_id',
                        type: 'select_multiple_select',
                        data: this.warehouses,
                        tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的仓库'],
                        placeholder: ['仓库', '定位或多选仓库']
                    },
                ]];
                this.form = new query({
                    el: '#form_div',
                    condition: data,
                });
                this.form.init();

                let column = [
                    {name: 'id', value: '序号', neglect: true},
                    {name: 'number', value: '收货任务号'},
                    {name: 'status', value: '状态', neglect: true},
                    {name: 'owner', value: '货主', neglect: true},
                    {name: 'asn_nos', value: 'ASN单号', neglect: true},
                    {name: 'created_at', value: '投单时间'},
                    {name: 'warehouse', value: '仓库'},
                    {name: 'appointment_number', value: '预约号'},
                    {name: 'driving_license_no', value: '驾驶证号'},
                    {name: 'receiving_type', value: '收货类型'},
                ];
                let init = new Header({
                    el: "table",
                    name: "receiving_tasks",
                    column: column,
                    data: this.receiving_tasks,
                    restorationColumn: 'id',
                    fixedTop: ($('#form_div').height()) + ($('#btn').height()) + 1,
                });
                setTimeout(()=>{
                    init.init();
                },300);
            },
            methods: {
                waitingTempTip(message) {
                    window.tempTip.setIndex(2005);
                    window.tempTip.waitingTip(message);
                },
                successTempTip(message) {
                    window.tempTip.setDuration(1500);
                    window.tempTip.setIndex(2005);
                    window.tempTip.showSuccess(message);
                },
                errorTempTip(message) {
                    window.tempTip.setDuration(2000);
                    window.tempTip.setIndex(2005);
                    window.tempTip.show(message);
                },
                sortReceivingTasks(tasks) {
                    return tasks.map(e => this.sortReceivingTask(e));
                },
                sortReceivingTask(task) {
                    let asn_nos = this.sortAsnNos(task);
                    let driving_license_no = this.getDrivingLicenseNo(task);
                    let appointment_number = this.getAppointmentNumber(task);
                    let warehouse = this.getWarehouseName(task);
                    let owner = this.getOwnerName(task);
                    return {
                        id: task.id,
                        number: task.number,
                        status: task.status,
                        asn_nos: asn_nos,
                        created_at: task.created_at,
                        warehouse: warehouse,
                        for_single_member: task.for_single_member,
                        driver_name: task.driver_name,
                        driver_phone: task.driver_phone,
                        plate_number: task.plate_number,
                        provide_list: task.provide_list,
                        owner: owner,
                        appointment_number: appointment_number,
                        driving_license_no: driving_license_no,
                        receiving_type: task.receiving_type,
                    };
                },
                sortAsnNos(task) {
                    let items = task.items;
                    return items.map(e => e.asn_no);
                },
                getDrivingLicenseNo(task) {
                    let {delivery_appointment_car, driving_license_no} = task;
                    let license_plate_number = delivery_appointment_car ? delivery_appointment_car.license_plate_number : '';
                    return driving_license_no ? driving_license_no : license_plate_number;
                },
                getAppointmentNumber(task) {
                    let {delivery_appointment_car} = task;
                    return delivery_appointment_car ? delivery_appointment_car.appointment_number : '';
                },
                getWarehouseName(task) {
                    let {ware_house} = task;
                    return ware_house ? ware_house.name : '';
                },
                getOwnerName(task) {
                    let {owner} = task;
                    return owner ? owner.name : '';
                },
                printReceivingTask() {
                    let message = null;
                    if (checkData.length > 1) {
                        message = '进行单个任务打印';
                    } else if (checkData.length < 1) {
                        message = '请勾选收货任务';
                    }
                    if (message) {
                        this.errorTempTip(message);
                        return;
                    }
                    let id = checkData[0];
                    this.receiving_task_print = this.receiving_tasks.find(e => e.id.toString() === id);
                    this.printLodop();
                },
                printLodop() {
                    this.clodop = null;
                    try {
                        this.clodop = getLodop();
                        if ((this.clodop != null) && (typeof (this.clodop.VERSION) != "undefined")) {
                            this.showPrintDialog();
                        } else {
                            this.downloadClodopConfirm();
                        }
                    } catch (err) {
                        this.errorTempTip('getLodop error');
                    }
                },
                downloadClodopConfirm() {
                    this.$confirm('打印组件不存在，是否下载?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 下载
                        this.downloadLodop();
                    }).catch(() => {
                        // 取消下载
                    });
                },
                downloadLodop() {
                    let url = "{{mix('/js/lodop/CLodop_Setup_for_Win32NT.exe')}}"
                    window.open(url, '_target');
                },
                showPrintDialog() { //
                    this.getPrinterList();
                    this.clodopPrintDialogVisible = true;
                },
                getPrinterList() {  // 获取打印机列表
                    this.printerList = [];
                    let count = this.clodop.GET_PRINTER_COUNT();
                    for (let i = 0; i < count; i++) {
                        this.printerList.push({
                            name: this.clodop.GET_PRINTER_NAME(i),
                            value: i,
                        });
                    }
                },
                clodopPrint() {
                    let {
                        number,               // 收货任务号
                        warehouse,             // 仓库
                        for_single_member,    // 投单员
                        driver_name,          // 司机姓名
                        driver_phone,         // 司机电话
                        plate_number,          // 车号牌
                        driving_license_no,    // 驾驶证号
                        provide_list,         // 是否提供清单
                        receiving_type,       // 收货类型
                        owner,                // 货主
                        appointment_number, // 预约号
                    } = this.receiving_task_print;

                    this.clodop.PRINT_INITA(2, 0, 0, 0, "");
                    this.clodop.SET_PRINT_PAGESIZE(2, '76mm', '130mm');
                    this.clodop.ADD_PRINT_BARCODE(20, 70, 350, 50, "Code39", number);
                    this.clodop.SET_PRINT_STYLEA(0, "FontSize", 10);
                    this.clodop.ADD_PRINT_TEXT(100, 15, 100, 20, "收货任务号");
                    this.clodop.SET_PRINT_STYLEA(0, "FontSize", 10);
                    this.clodop.SET_PRINT_STYLEA(0, "Alignment", 2);
                    this.clodop.SET_PRINT_STYLEA(0, "Bold", 1);
                    this.clodop.ADD_PRINT_TEXT(130, 15, 100, 20, "仓库");
                    this.clodop.SET_PRINT_STYLEA(0, "FontSize", 10);
                    this.clodop.SET_PRINT_STYLEA(0, "Alignment", 2);
                    this.clodop.SET_PRINT_STYLEA(0, "Bold", 1);
                    this.clodop.ADD_PRINT_TEXT(160, 15, 100, 20, "司机姓名");
                    this.clodop.SET_PRINT_STYLEA(0, "FontSize", 10);
                    this.clodop.SET_PRINT_STYLEA(0, "Alignment", 2);
                    this.clodop.SET_PRINT_STYLEA(0, "Bold", 1);
                    this.clodop.ADD_PRINT_TEXT(190, 15, 100, 20, "车牌号");
                    this.clodop.SET_PRINT_STYLEA(0, "FontSize", 10);
                    this.clodop.SET_PRINT_STYLEA(0, "Alignment", 2);
                    this.clodop.SET_PRINT_STYLEA(0, "Bold", 1);
                    this.clodop.ADD_PRINT_TEXT(220, 15, 100, 20, "是否提供清单");
                    this.clodop.SET_PRINT_STYLEA(0, "FontSize", 10);
                    this.clodop.SET_PRINT_STYLEA(0, "Alignment", 2);
                    this.clodop.SET_PRINT_STYLEA(0, "Bold", 1);
                    this.clodop.ADD_PRINT_TEXT(250, 15, 100, 20, "货主");
                    this.clodop.SET_PRINT_STYLEA(0, "FontSize", 10);
                    this.clodop.SET_PRINT_STYLEA(0, "Alignment", 2);
                    this.clodop.SET_PRINT_STYLEA(0, "Bold", 1);
                    this.clodop.ADD_PRINT_TEXT(130, 245, 100, 20, "投单员");
                    this.clodop.SET_PRINT_STYLEA(0, "Alignment", 2);
                    this.clodop.SET_PRINT_STYLEA(0, "Bold", 1);
                    this.clodop.ADD_PRINT_TEXT(160, 245, 100, 20, "司机电话");
                    this.clodop.SET_PRINT_STYLEA(0, "Alignment", 2);
                    this.clodop.SET_PRINT_STYLEA(0, "Bold", 1);
                    this.clodop.ADD_PRINT_TEXT(190, 245, 100, 20, "驾驶证号");
                    this.clodop.SET_PRINT_STYLEA(0, "Alignment", 2);
                    this.clodop.SET_PRINT_STYLEA(0, "Bold", 1);
                    this.clodop.ADD_PRINT_TEXT(220, 245, 100, 20, "收货类型");
                    this.clodop.SET_PRINT_STYLEA(0, "Alignment", 2);
                    this.clodop.SET_PRINT_STYLEA(0, "Bold", 1);
                    this.clodop.ADD_PRINT_TEXT(250, 245, 100, 20, "预约号");
                    this.clodop.SET_PRINT_STYLEA(0, "Alignment", 2);
                    this.clodop.SET_PRINT_STYLEA(0, "Bold", 1);
                    this.clodop.ADD_PRINT_TEXT(100, 115, 250, 20, number); // number
                    this.clodop.SET_PRINT_STYLEA(0, "FontSize", 10);
                    this.clodop.SET_PRINT_STYLEA(0, "Alignment", 2);
                    this.clodop.SET_PRINT_STYLEA(0, "Bold", 1);
                    this.clodop.ADD_PRINT_TEXT(130, 115, 130, 20, warehouse);  // warehouse
                    this.clodop.ADD_PRINT_TEXT(160, 115, 100, 20, driver_name); //driver_name
                    this.clodop.ADD_PRINT_TEXT(190, 115, 130, 20, plate_number);  //plate_number
                    this.clodop.ADD_PRINT_TEXT(220, 115, 100, 20, provide_list); //provide_list
                    this.clodop.ADD_PRINT_TEXT(250, 115, 130, 20, owner);  // owner
                    this.clodop.ADD_PRINT_TEXT(130, 345, 100, 20, for_single_member);  // for_single_member
                    this.clodop.ADD_PRINT_TEXT(160, 345, 140, 20, driver_phone); // driver_phone
                    this.clodop.ADD_PRINT_TEXT(190, 345, 140, 20, driving_license_no); // driving_license_no
                    this.clodop.ADD_PRINT_TEXT(220, 345, 100, 20, receiving_type);  // receiving_type
                    this.clodop.ADD_PRINT_TEXT(250, 345, 140, 20, appointment_number); //appointment_number
                    this.clodop.PREVIEW();
                    this.clodopPrintDialogVisible = false;
                }
            },
        })
    </script>
@endsection