添加打印服务

app/Http/Controllers/PrintPartController.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Components\AsyncResponse;
+use App\PrintPart;
+use Illuminate\Http\Request;
+
+class PrintPartController extends Controller
+{
+    use AsyncResponse;
+    public function index(Request $request)
+    {
+        $printParts = PrintPart::query()->paginate($request['paginate'] ?? 50);
+        return view('/maintenance/expressPrinting/part/index',compact('printParts'));
+    }
+
+    public function create(Request $request)
+    {
+        return view('/maintenance/expressPrinting/part/create');
+    }
+
+    public function storeApi(Request $request): \Illuminate\Http\RedirectResponse
+    {
+        PrintPart::query()->create($request->all());
+        $this->success('添加成功');
+    }
+}

app/Http/Controllers/PrintTemplateController.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Components\AsyncResponse;
+use App\PrintPart;
+use App\PrintTemplate;
+use Illuminate\Http\Request;
+
+class PrintTemplateController extends Controller
+{
+    use AsyncResponse;
+    public function index(Request $request)
+    {
+        $printParts = PrintPart::all();
+        return view('/maintenance/expressPrinting/template/index',compact('printParts'));
+    }
+
+
+    public function storeApi(Request $request)
+    {
+        $printTemplate = PrintTemplate::query()->create($request->all());
+        $this->success(['data' => $printTemplate]);
+    }
+
+    public function updateApi(Request $request)
+    {
+
+    }
+
+
+}

app/Http/Controllers/TestController.php

@@ -1568,4 +1568,5 @@ where (commodities.owner_id,commodity_barcodes.code) in (select commodities.owne
             app('LogService')->log(__CLASS__, __METHOD__,'Error clearCancelledOrder'.json_encode($order_nos).json_encode($wave_nos));
         }
     }
+
 }

app/PrintPart.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+use App\Traits\ModelLogChanging;
+
+class PrintPart extends Model
+{
+    use ModelLogChanging;
+
+    //
+    protected $fillable = ['name','value'];
+}

app/PrintTemplate.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+use App\Traits\ModelLogChanging;
+
+class PrintTemplate extends Model
+{
+    use ModelLogChanging;
+
+    protected $fillable = ['name','value'];
+}

app/Providers/AppServiceProvider.php

@@ -89,6 +89,8 @@ use App\Services\WaybillFinancialService;
 use App\Services\WeighExceptedService;
 use App\Services\OrderFreezeService;
 use App\Services\RegionService;
+use App\Services\PrintPartService;
+use App\Services\PrintTemplateService;
 use Illuminate\Queue\Events\JobFailed;
 use Illuminate\Support\Facades\Queue;
 use Illuminate\Support\Facades\Schema;
@@ -195,6 +197,8 @@ class AppServiceProvider extends ServiceProvider
         app()->singleton('OwnerStoragePriceModelService',OwnerStoragePriceModelService::class);
         app()->singleton('PackageService',PackageService::class);
         app()->singleton('PackageStatisticsService',PackageStatisticsService::class);
+        app()->singleton('PrintPartService',PrintPartService::class);
+        app()->singleton('PrintTemplateService',PrintTemplateService::class);
         app()->singleton('ProcessMethodService',ProcessMethodService::class);
         app()->singleton('ProcessService',ProcessService::class);
         app()->singleton('ProcessStatisticService',ProcessStatisticService::class);

app/Services/PrintPartService.php

@@ -0,0 +1,13 @@
+<?php 
+
+namespace App\Services;
+
+use App\Traits\ServiceAppAop;
+use App\PrintPart;
+
+class PrintPartService
+{
+    use ServiceAppAop;
+    protected $modelClass=PrintPart::class;
+
+}

app/Services/PrintTemplateService.php

@@ -0,0 +1,13 @@
+<?php 
+
+namespace App\Services;
+
+use App\Traits\ServiceAppAop;
+use App\PrintTemplate;
+
+class PrintTemplateService
+{
+    use ServiceAppAop;
+    protected $modelClass=PrintTemplate::class;
+
+}

database/factories/PrintPartFactory.php

@@ -0,0 +1,13 @@
+<?php
+
+/** @var \Illuminate\Database\Eloquent\Factory $factory */
+
+use App\PrintPart;
+use Faker\Generator as Faker;
+
+$factory->define(PrintPart::class, function (Faker $faker) {
+    return [
+        'name' => $faker->name,
+        'value' => $faker->name
+    ];
+});

database/factories/PrintTemplateFactory.php

@@ -0,0 +1,13 @@
+<?php
+
+/** @var \Illuminate\Database\Eloquent\Factory $factory */
+
+use App\PrintTemplate;
+use Faker\Generator as Faker;
+
+$factory->define(PrintTemplate::class, function (Faker $faker) {
+    return [
+        'name'=> $faker->name,
+        'value' => $faker->name(30)
+    ];
+});

database/migrations/2021_02_07_095609_create_print_parts_table.php

@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreatePrintPartsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('print_parts', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->text('value');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('print_parts');
+    }
+}

database/migrations/2021_02_07_095839_create_print_templates_table.php

@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreatePrintTemplatesTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('print_templates', function (Blueprint $table) {
+            $table->id();
+            $table->string('name')->index();
+            $table->text('value')->comment('组件id，坐标 等集合');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('print_templates');
+    }
+}

database/seeds/PrintPartSeeder.php

@@ -0,0 +1,18 @@
+<?php
+
+use Illuminate\Database\Seeder;
+use App\PrintPart;
+
+class PrintPartSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        $printParts = factory(PrintPart::class)->times(100)->make()->toArray();
+        PrintPart::query()->insert($printParts);
+    }
+}

database/seeds/PrintTemplateSeeder.php

@@ -0,0 +1,18 @@
+<?php
+
+use Illuminate\Database\Seeder;
+use App\PrintTemplate;
+
+class PrintTemplateSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        $printTemplate = factory(PrintTemplate::class)->times(100)->make()->toArray();
+        PrintTemplate::query()->insert($printTemplate);
+    }
+}

resources/views/maintenance/expressPrinting/menu.blade.php

@@ -0,0 +1,12 @@
+<div class="container-fluid nav3">
+    <div class="card" >
+        <ul class="nav nav-pills">
+            <li class="nav-item">
+                <a target="maintenance/expressPrinting/part" class="nav-link" href="{{url('/maintenance/expressPrinting/part')}}" :class="{active:isActive('part',3)}">组件</a>
+            </li>
+            <li class="nav-item">
+                <a target="maintenance/expressPrinting/template" class="nav-link" href="{{url('/maintenance/expressPrinting/template')}}" :class="{active:isActive('template',3)}">模板</a>
+            </li>
+        </ul>
+    </div>
+</div>

resources/views/maintenance/expressPrinting/part/_table.blade.php

@@ -0,0 +1,20 @@
+<div class="container-fluid">
+    <table class="table table-striped table-sm table-hover" id="print-part-table">
+        <tr class="text-center">
+            <td>序号</td>
+            <td>名称</td>
+            <td>内容</td>
+            <td>操作</td>
+        </tr>
+        <tr  class="text-center" v-for="(printPart,i) in printParts" :key="i">
+            <td>@{{ i+1 }}</td>
+            <td>@{{ printPart.name }}</td>
+            <td>@{{ printPart.value }}</td>
+            <td>
+                <button type="button" class="btn btn-sm btn-primary">编辑</button>
+                <button type="button" class="btn btn-sm btn-danger">删除</button>
+            </td>
+        </tr>
+    </table>
+    {{$printParts->links()}}
+</div>

resources/views/maintenance/expressPrinting/part/create.blade.php

@@ -0,0 +1,182 @@
+@extends('layouts.app')
+@section('title')组件创建@endsection
+
+@section('content')
+    <span class="nav">
+        @component('maintenance.menu')@endcomponent
+        @component('maintenance.expressPrinting.menu')@endcomponent
+        @component('maintenance.expressPrinting.part.menu')@endcomponent
+    </span>
+    <div class="container-fluid d-none" id="create-print-part">
+        <div class="row">
+            <div class="col-3">
+                <div class="card">
+                    <div class="card-header">
+                        基础设置
+                    </div>
+                    <div class="card-body">
+                        <div class="form-group">
+                            <label for="template-width">宽</label>
+                            <input type="number" id="template-width" v-model="template.width" class="form form-control">
+                        </div>
+                        <div class="form-group">
+                            <label for=template-height"">高</label>
+                            <input type="number" id="template-height" v-model="template.height" class="form form-control">
+                        </div>
+                        <div class="form-group">
+                            <label for="template-border">边框</label>
+                            <input type="number" id="template-border" v-model="template.border" class="form form-control">
+                        </div>
+                    </div>
+                    <div class="card-footer">
+                        <button type="button" class="btn btn-success" @click="show">保存当前模板</button>
+                    </div>
+                </div>
+            </div>
+            <div class="col-6 justify-content-center align-items-center flex-fill" >
+                {{-- 模板展示--}}
+                <div :style="getStyle()">
+                    <span>@{{ template.text }}</span>
+                </div>
+            </div>
+            <div class="col-3">
+                {{-- 属性 --}}
+                <div class="card">
+                    <div class="card-header">
+                        设置
+                    </div>
+                    <div class="card-body">
+                        <div class="form-group">
+                            <label for="template-type">组件类型</label>
+                            <input type="text" id="template-type" class="form-control" v-model="template.type">
+                        </div>
+                        <div class="form-group">
+                            <label for="template-text">内容</label>
+                            <textarea id="template-text" class="form-text form-control" cols="5" rows="5" v-model="template.text"></textarea>
+                        </div>
+                        <div class="form-group">
+                            <label for="template-text-align">文本对齐方式</label>
+                            <select name="" id="template-text-align" v-model="template.justify_content" class="form form-control">
+                                <option v-for="justifyContent in justifyContents" :value="justifyContent.value">@{{ justifyContent.name }}</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="template-text-align">文本垂直对齐</label>
+                            <select name="" id="template-text-align" v-model="template.align_items" class="form form-control">
+                                <option v-for="alignItem in alignItems" :value="alignItem.value">@{{  alignItem.name }}</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="template-font-size">字体大小</label>
+                            <input type="text" id="template-font-size" v-model="template.font_size" class="form form-control">
+                        </div>
+                        <div class="form-group">
+                            <label for="template-font-weight">字体宽</label>
+                            <select id="template-font-weight" v-model="template.font_weight" class="form-control">
+                                <option v-for="fontWeight in fontWeights" :value="fontWeight.value" >@{{ fontWeight.name }}</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="modal fade" id="saveModal" tabindex="-1"  aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="saveModalLabel">保存组件</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" >
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        <form>
+                            <div class="form-group">
+                                <label for="recipient-name" class="col-form-label">组件名称</label>
+                                <input type="text" id="recipient-name" class="form-control" v-model="printPart.name">
+                            </div>
+                        </form>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal" >关闭</button>
+                        <button type="button" class="btn btn-success" @click="create">保存</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
+
+@section('lastScript')
+    <script>
+        let vue = new Vue({
+            el:"#create-print-part",
+            data:{
+                printPart:{name:'',value:''},
+                template:{
+                    type:'',
+                    width:200,
+                    height:100,
+                    border:1,
+                    font_size:12,
+                    text:'',
+                    font_weight:'normal',   //normal lighter bold
+                    justify_content:'',     //文字水平对齐方式
+                    align_items:'center',         //文字垂直对齐
+                },
+                fontWeights:[
+                    {name:"正常",value:"normal"},
+                    {name:"细体",value:"lighter"},
+                    {name:"粗体",value:"bold"},
+                ],
+                justifyContents:[
+                    {name:"左对齐",value:""},
+                    {name:"居中",value:"center"},
+                    {name:"右对齐",value:"flex-end"},
+                ],
+                alignItems:[
+                    {name:"顶部",value:""},
+                    {name:"居中",value:"center"},
+                    {name:"底部",value:"flex-end"},
+                ]
+            },
+            mounted() {
+                $("#create-print-part").removeClass('d-none');
+            },
+            methods:{
+                show(){
+                    $('#saveModal').modal('show');
+                },
+                getStyle(){
+                    let style = {
+                        'display':'flex',
+                        'width':this.template.width+'px',
+                        'height':this.template.height+'px',
+                        'border-style':'solid',
+                        'border-width':this.template.border+'px',
+                        'font-size':this.template.font_size+'px',
+                        'font-weight':this.template.font_weight,
+                        'justify-content':this.template.justify_content,
+                        'align-items':this.template.align_items,
+                    };
+                    return style;
+                },
+                create(){
+                    tempTip.setDuration(3000);
+                    tempTip.setIndex(2000);
+                    let value = JSON.stringify(this.template);
+                    let data = {name:this.printPart.name,value:value};
+                    window.axios.post('{{url('apiLocal/maintenance/expressPrinting/part/create')}}',data).then(res=>{
+                        if(res.data.success){
+                            tempTip.showSuccess(res.data.data);
+                            return;
+                        }
+                        tempTip.show(res.data.message);
+                    }).catch(err=>{
+                        tempTip.show('网络异常:'+err);
+                    });
+                },
+            }
+        });
+    </script>
+@endsection

resources/views/maintenance/expressPrinting/part/index.blade.php

@@ -0,0 +1,30 @@
+@extends('layouts.app')
+@section('title')组件@endsection
+
+@section('content')
+    <span id="nav2">
+        @component('maintenance.menu')@endcomponent
+        @component('maintenance.expressPrinting.menu')@endcomponent
+        @component('maintenance.expressPrinting.part.menu')@endcomponent
+    </span>
+    <div class="container-fluid d-none" id="print_part">
+        @include('maintenance.expressPrinting.part._table')
+    </div>
+@endsection
+
+@section('lastScript')
+    <script>
+        let vue = new Vue({
+            el:"#print_part",
+            data:{
+                printParts:{!! $printParts->toJson() !!}['data'],
+            },
+            mounted(){
+                $('#print_part').removeClass('d-none');
+            },
+            methods:{
+
+            }
+        });
+    </script>
+@endsection

resources/views/maintenance/expressPrinting/part/menu.blade.php

@@ -0,0 +1,12 @@
+<div class="container-fluid nav3">
+    <div class="card" >
+        <ul class="nav nav-pills">
+            <li class="nav-item">
+                <a target="maintenance/expressPrinting/part" class="nav-link" href="{{url('/maintenance/expressPrinting/part')}}" :class="{active:isActive('part',3)}">查询</a>
+            </li>
+            <li class="nav-item">
+                <a target="/maintenance/expressPrinting/part/create" class="nav-link" href="{{url('/maintenance/expressPrinting/part/create')}}" :class="{active:isActive('create',4)}">创建</a>
+            </li>
+        </ul>
+    </div>
+</div>

resources/views/maintenance/expressPrinting/template/_compile.blade.php

@@ -0,0 +1,67 @@
+<div class="container-fluid">
+    <div class="card">
+        <form class="form">
+            <div class="card-header" v-show="selectProducePanel">
+                <span>背景版编辑</span>
+            </div>
+            <div class="card-body" v-show="selectProducePanel">
+                <div class="form-group m-0">
+                    <label for="producePanel-width" class="col-form-label">宽</label>
+                    <input type="text" id="producePanel-width" class="form-control form-control-sm" v-model="producePanel.width">
+                </div>
+                <div class="form-group m-0">
+                    <label for="producePanel-height" class="col-form-label">高</label>
+                    <input type="text" id="producePanel-height" class="form-control form-control-sm" v-model="producePanel.height">
+                </div>
+            </div>
+            <div class="card-header">
+                <span>编辑面板</span>
+            </div>
+            <div class="card-body" v-if="productionParts.editPart">
+                <div class="form-group m-0">
+                    <label for="compile-left" class="col-form-label">left</label>
+                    <input type="text" id="compile-left" class="form-control form-control-sm" v-model="productionParts.editPart.left">
+                </div>
+                <div class="form-group m-0">
+                    <label for="compile-top" class="col-form-label">top</label>
+                    <input type="text" id="compile-top" class="form-control form-control-sm" v-model="productionParts.editPart.top">
+                </div>
+                <div class="form-group m-0">
+                    <label for="compile-width" class="col-form-label">宽</label>
+                    <input type="text" id="compile-width" class="form-control form-control-sm" v-model="productionParts.editPart.width">
+                </div>
+                <div class="form-group m-0">
+                    <label for="compile-height" class="col-form-label text-sm-right">高</label>
+                    <input type="text" id="compile-height" class="form-control form-control-sm" v-model="productionParts.editPart.height">
+                </div>
+                <div class="form-group m-0" >
+                    <label for="compile-z-index" class="col-form-label text-sm-right">图层</label>
+                    <input type="text" id="compile-z-index" class="form-control form-control-sm" v-model="productionParts.editPart.style.z_index">
+                </div>
+                <div class="form-group m-0" v-if="productionParts.editPart.style">
+                    <label for="compile-justify-content" class="col-form-label text-sm-right">文本对齐方式</label>
+                    <select class="form-control-sm form-control" id="compile-justify-content" v-model="productionParts.editPart.style.justify_content">
+                        <option value="">左对齐</option>
+                        <option value="center">居中对齐</option>
+                        <option value="flex-end">右对齐</option>
+                    </select>
+                </div>
+                <div class="form-group m-0" v-if="productionParts.editPart.style">
+                    <label for="compile-text-align" class="col-form-label text-sm-right">文本对齐方式</label>
+                    <select class="form-control-sm form-control " id="compile-text-align" v-model="productionParts.editPart.style.align_items">
+                        <option value="">顶部</option>
+                        <option value="center">垂直居中</option>
+                        <option value="flex-end">顶部</option>
+                    </select>
+                </div>
+            </div>
+            <div class="card-footer" v-show="!selectProducePanel">
+                <button type="button" class="btn btn-outline-secondary" v-show="productionParts.editPart" @click="_removePartToProductionPanel()">删除</button>
+            </div>
+            <div class="card-footer">
+                <button type="button" class="btn btn-success"  @click="showSaveModal">保存当前打印模板</button>
+            </div>
+        </form>
+    </div>
+
+</div>

resources/views/maintenance/expressPrinting/template/_produce.blade.php

@@ -0,0 +1,37 @@
+<div class="position-relative border-1 row p-0 m-0 bg-white border" id="produce-panel" @click="editProducePanel" :style="{width:producePanel.width+'px',height:producePanel.height+'px'}" >  <!--position-relative--> <!--position-absolute-->
+    <div class="position-absolute print-part" draggable="true"
+         v-for="(item,i) in productionParts.printParts"
+         @click.stop.self="productionParts.editPart = item"
+         @dragstart="_dragstart(item,$event)"            {{--开始拖动元素时触发--}}
+         @dragend="_dragend(item,$event)"                {{-- 拖动结束 --}}
+         :style="getPrintPartDivStyle(item)"
+         :key="i">
+        <div :style="getPrintPartStyle(item)"  @click.stop.self="productionParts.editPart = item">
+            @{{ item.text }}
+        </div>
+    </div>
+</div>
+<div class="modal fade" id="saveModal" tabindex="-1"  aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="saveModalLabel">保存打印模板</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="productionParts.addPart.name = null">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form>
+                    <div class="form-group">
+                        <label for="recipient-name" class="col-form-label">模板名称</label>
+                        <input type="text" class="form-control" v-model="productionParts.addPart.name">
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="productionParts.addPart.name = null">关闭</button>
+                <button type="button" class="btn btn-success" @click="_savePrintTemplate">保存</button>
+            </div>
+        </div>
+    </div>
+</div>

resources/views/maintenance/expressPrinting/template/_select.blade.php

@@ -0,0 +1,11 @@
+<div class="container-fluid p-0"  id="select-panel" style="cursor: pointer; overflow-y: scroll;border-radius:5px;" >
+    <input type="text" class="form-control" placeholder="输入组件名称进行搜索" @change="_searchPrintPart($event)">
+    <ul class="list-group" >
+        <li class="list-group-item align-text-top hover"
+            v-for="(printPart,i) in filterPrintParts"
+            @dblclick="_addPartToProductionPanel(printPart)">
+            @{{ printPart.name }}
+            <span class="text-right float-right">添加</span>
+        </li>
+    </ul>
+</div>

resources/views/maintenance/expressPrinting/template/index.blade.php

@@ -0,0 +1,160 @@
+@extends('layouts.app')
+@section('title')模板@endsection
+
+@section('content')
+    <span id="nav2">
+        @component('maintenance.menu')@endcomponent
+        @component('maintenance.expressPrinting.menu')@endcomponent
+    </span>
+    <div class="container-fluid d-none row m-1" id="print-template">
+        <div class="col-lg-2 col-sm-3 p-0"  id="part_panel">
+            {{--  组件选择面板 --}}
+            @include('maintenance.expressPrinting.template._select')
+        </div>
+        <div class="col-lg-8 col-sm-6 p-0" id="production_panel">
+            {{--  模板制作面板 --}}
+            @include('maintenance.expressPrinting.template._produce')
+        </div>
+        <div class="col-lg-2 col-sm-3 p-0" id="compile_panel">
+            {{-- 模板编辑页面 --}}
+            @include('maintenance.expressPrinting.template._compile')
+        </div>
+    </div>
+@endsection
+
+@section('lastScript')
+    <script>
+        let vue = new Vue({
+            el:"#print-template",
+            data:{
+                printParts:{!! $printParts !!},
+                filterPrintParts:[],
+                producePanel:{},              // 背景版
+                selectProducePanel:false,              // 是否选中背景版
+                productionParts:{
+                    printParts:[],                  // 组件s
+                    editPart: null,                    // 编辑中的组件
+                    editIndex:{},                   // 编辑中组件的下标
+                    addPart:{},                     // 添加模板
+                },
+                partIsSelected:false,               // 表示模块被选中
+                selectPrintPart:{},                 // 选中模块
+                selectPrintPartPoint:{x:'',y:''},   // 选中模块时模块 point
+                mousePointStart:{x:'',y:''},        // 开始拖动时的 point
+                mousePointEnd:{x:'',y:''},          // 结束拖动时的 point
+                selectPrintPartOffset:{left:'',top:''},     // 选中时的left 和 top
+                z_index:10,
+            },
+            mounted(){
+                this.initProductionParts();
+                $('.navbar,.nav1,.nav2').hide();
+                $('.nav3').on('mouseenter', function () {
+                    $('.navbar,.nav1,.nav2').show();
+                });
+                $('.body').on('mouseenter', function () {
+                    $('.navbar,.nav1,.nav2').hide();
+                });
+                $("#print-template").removeClass('d-none');
+            },
+            methods:{
+                _addPartToProductionPanel(printPart){
+                    let _clone = JSON.parse(JSON.stringify(printPart));
+                    let print_part_style = JSON.parse(printPart.value);
+                    let item = {
+                        index:this.productionParts.printParts.length,
+                        printPart:_clone,
+                        left:'10',
+                        top:'20',
+                        width:print_part_style.width,
+                        height:print_part_style.height,
+                        text:print_part_style.text,
+                        z_index:this.z_index++,
+                        style:print_part_style
+                    };
+                    this.productionParts.printParts.push(item);
+                },
+                _alignContentToProductionPanel(){
+                    this.productionParts.printParts.splice(this.productionParts.editIndex,1);
+                    this.$forceUpdate();
+                },
+                _searchPrintPart(event){
+                    let value = $(event.target).val();
+                    this.filterPrintParts = this.printParts.filter(function(printPart){
+                        return printPart.name.includes(value);
+                    });
+                    if(value===null || value=== '') this.filterPrintParts = JSON.parse(JSON.stringify(this.printParts));
+                },
+                showSaveModal(){
+                    $('#saveModal').modal('show');
+                },
+                _savePrintTemplate(){
+                    tempTip.setDuration(3000);
+                    tempTip.setIndex(1999);
+                    window.axios.post("{{url('print/template/store')}}",this.productionParts.addPart).then(res=>{
+                        if(res.data.success){
+                            tempTip.showSuccess('保存成功!');
+                            return ;
+                        }
+                        tempTip.show(res.data.message);
+                    }).catch(err=>{
+                        tempTip.show(err);
+                    });
+                },
+                initProductionParts(){
+                    this.productionParts = {printParts:[], editPart:null, addPart:{}};
+                    this.filterPrintParts=JSON.parse(JSON.stringify(this.printParts));
+                    let height = (window.innerHeight-120)+'px';
+                    $("#production_panel,#part_panel,#compile_panel,#select-panel").css({height:height});
+                    let produce_panel = $("#produce-panel");
+                    produce_panel.css({height:height});
+                    let production_panel = $("#production_panel");
+                    this.producePanel = {
+                        width:parseInt(production_panel.width()),
+                        height:parseInt(production_panel.css('height')),
+                    };
+                },
+                getPrintPartStyle(item){
+                    let style =  item.style;
+                    style = {
+                         'display':'flex',
+                         'width':style.width+'px',
+                         'height':style.height+'px',
+                         'border-style':'solid',
+                         'border-width':style.border+'px',
+                         'font-size':style.font_size+'px',
+                         'font-weight':style.font_weight,
+                         'justify-content':style.justify_content,
+                         'align-items':style.align_items,
+                    };
+                    return style;
+                },
+                getPrintPartDivStyle(item){
+                    let div_style =  {
+                        'left':item.left+'px',
+                        'top':item.top+'px',
+                        'width':item.width+'px',
+                        'height':item.height+'px'
+                    };
+                    console.log(div_style);
+                    return div_style;
+                },
+                _dragstart(item,$event){
+                    {{--开始拖动元素时触发--}}
+                    this.selectPrintPartPoint  = {x:parseInt(item.left),y:parseInt(item.top)};
+                    this.mousePointStart = {x:$event.offsetX, y:$event.offsetY};
+                },
+                _dragend(item,$event){
+                    {{--结束拖动元素时触发--}}
+                    this.mousePointEnd =  {x:$event.offsetX, y:$event.offsetY};
+                    let left  = item.left - (this.mousePointStart.x - this.mousePointEnd.x);
+                    let top = item.top - (this.mousePointStart.y - this.mousePointEnd.y);
+                    item.left = left >0 ? left:0;
+                    item.top =  top > 0 ? top:0;
+                },
+                editProducePanel(){
+                    this.selectProducePanel =!this.selectProducePanel;
+                },
+            }
+        });
+    </script>
+@endsection

resources/views/maintenance/expressPrinting/template/print.blade.php

@@ -0,0 +1,30 @@
+@extends('layouts.app')
+@section('title')快递打印@endsection
+
+@section('content')
+    <span id="nav2">
+        @component('maintenance.menu')@endcomponent
+        @component('maintenance.expressPrinting.menu')@endcomponent
+    </span>
+    <div class="container-fluid d-none" id="part-template-print">
+
+    </div>
+@endsection
+
+@section('lastScript')
+    <script type="text/javascript" src="{{mix('js/utilities/barcode.js')}}"></script>
+    <script>
+        let vue = new Vue({
+            el:"#print_part",
+            data:{
+                printParts:{!! $printParts->toJson() !!}['data'],
+            },
+            mounted(){
+                $('#print_part').removeClass('d-none');
+            },
+            methods:{
+
+            }
+        });
+    </script>
+@endsection

resources/views/maintenance/menu.blade.php

@@ -119,6 +119,9 @@
                 <li class="nav-item">
                     <a class="nav-link text-muted" href="{{url('maintenance/configuration')}}" :class="{active:isActive('configuration',2)}">系统配置</a>
                 </li>@endcan
+                <li class="nav-item">
+                    <a class="nav-link text-muted" href="{{url('maintenance/expressPrinting/part')}}" :class="{active:isActive('expressPrinting',2)}">快递打印</a>
+                </li>
         </ul>
     </div>
 </div>

resources/views/test.blade.php

@@ -0,0 +1,62 @@
+@extends('layouts.app')
+
+@section('content')
+    <div id="container" class="m-lg-auto position-relative border border-3 border-dark" style="width:500px;height:500px;cursor: pointer" onselectstart="return false">
+        <div id="abc" class="position-absolute border border-2 border-warning bg-warning" style="width:50px;height:50px">111</div>
+        <div id="abn" class="position-absolute border border-2 border-danger bg-danger" style="width:50px;height:50px;top:30px">111</div>
+    </div>
+    <div>
+        <button onclick="getCoordinate()">获取下位置</button>
+    </div>
+@endsection
+
+@section("lastScript")
+    <script>
+        //获取元素
+        var dv = document.getElementById('abn');
+        let x = 0;
+        let y = 0;
+        let l = 0;
+        let t = 0;
+        let isDown = false;
+        //鼠标按下事件
+        dv.onmousedown = function(e) {
+            //获取x坐标和y坐标
+            x = e.clientX;
+            y = e.clientY;
+
+            //获取左部和顶部的偏移量
+            l = dv.offsetLeft;
+            t = dv.offsetTop;
+            //开关打开
+            isDown = true;
+            //设置样式
+            dv.style.cursor = 'move';
+        }
+        //鼠标移动
+        window.onmousemove = function(e) {
+            if (isDown == false) {
+                return;
+            }
+            //获取x和y
+            let nx = e.clientX;
+            let ny = e.clientY;
+            //计算移动后的左偏移量和顶部的偏移量
+            let nl = nx - (x - l);
+            let nt = ny - (y - t);
+
+            dv.style.left = nl + 'px';
+            dv.style.top = nt + 'px';
+        }
+        //鼠标抬起事件
+        dv.onmouseup = function() {
+            isDown = false;
+        }
+        function getCoordinate() {
+            console.log(dv.offsetTop);
+            document.getElementById("abc").style.top = dv.offsetTop+"px";
+            /*console.log("宽".dv);
+            console.log("宽".dv.offsetY);*/
+        }
+    </script>
+@stop

routes/apiLocal.php

@@ -98,6 +98,12 @@ Route::group(['prefix'=>'maintenance'],function (){
     Route::group(['prefix'=>'owner'],function (){
         Route::post('getOwners','OwnerController@getOwners');
     });
+    Route::group(['prefix'=>'expressPrinting'],function (){
+        Route::group(['prefix'=>'part'],function(){
+            Route::post('create','PrintPartController@storeApi');
+        });
+    });
+
 });
 
 /** 控制台 */
@@ -138,4 +144,9 @@ Route::group(['prefix' => 'configuration'],function(){
     Route::delete('{id}','ConfigurationController@destroyApi');
 });
 
+/** 快递打印 */
+Route::group(['prefix' => 'print'],function (){
+    Route::post('template/store','PrintTemplateController@storeAi');
+});
+
 

routes/web.php

@@ -208,6 +208,12 @@ Route::group(['prefix'=>'maintenance'],function(){
     Route::get('supplier','SupplierController@index');
     /** 系统配置 */
     Route::get('configuration','ConfigurationController@index');
+    /** 快递打印 */
+    Route::group(['prefix'=>'expressPrinting'],function(){
+        Route::get('/part','PrintPartController@index');
+        Route::get('/part/create','PrintPartController@create');
+        Route::get('/template','PrintTemplateController@index');
+    });
 
     Route::get('syncRedisLogs','LogController@syncRedisLogs');
     Route::get('region', 'RegionController@index');