251 lines
17 KiB
PHP
251 lines
17 KiB
PHP
@extends('layouts.base')
|
|
@section('title', trans(''))
|
|
@section('content')
|
|
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
|
|
<style>
|
|
.all { background: #eff3f6;}
|
|
.el-table th.gutter{
|
|
display: table-cell!important;
|
|
}
|
|
|
|
.vue-main-form {
|
|
margin-bottom: 50px;
|
|
}
|
|
.vue-main-title-content {
|
|
border-bottom: 1px solid #f5f5f5;
|
|
padding-left: 20px;
|
|
}
|
|
.bill-context {
|
|
background: #eeeeee;
|
|
padding: 9px;
|
|
color: #6f6f6e;
|
|
border: 1px solid #DCDFE6;
|
|
}
|
|
</style>
|
|
<div class="all">
|
|
<div id="app" v-cloak>
|
|
<el-form ref="form" >
|
|
<div class="vue-main">
|
|
<div class="vue-main-form">
|
|
<div class="vue-main-title">
|
|
<div class="vue-main-title-content">标签模板编辑</div>
|
|
</div>
|
|
<div style="display: flex;align-items: center;margin-bottom:20px;padding-left: 20px;">
|
|
<span class="bill-context">单据宽度</span>
|
|
<el-input style="width: 30%;" v-model="serarch_form.width" @blur="blurPlatformDocumentWidth"></el-input>
|
|
<span class="bill-context">mm(毫米) 单据高度</span>
|
|
<el-input style="width: 30%;" v-model="serarch_form.height" @blur="blurPlatformDocumentHeight"></el-input>
|
|
<span class="bill-context">mm(毫米)</span>
|
|
</div>
|
|
<div style="display: flex;align-items: center;margin-bottom:20px;padding-left: 20px;"><span style="background: #f5f7fa;padding: 9px;color: #6f6f6e;border: 1px solid #DCDFE6;">供应商名称</span><el-input style="width: 30%;" v-model="serarch_form.supplier_name"></el-input> </div>
|
|
<div style="display: flex;align-items: center;margin-bottom:20px;padding-left: 20px;"><span style="background: #f5f7fa;padding: 9px;color: #6f6f6e;border: 1px solid #DCDFE6;">供应商电话</span><el-input style="width: 30%;" v-model="serarch_form.supplier_mobile"></el-input> </div>
|
|
<div style="display: flex;margin-bottom: 20px;padding-left: 20px;">
|
|
<span>备注</span>
|
|
<div id="dialogVisible-card" contenteditable="true" spellcheck="true" data-medium-editor-element="true" role="textbox" aria-multiline="true" style="height: 300px;border: 1px solid #dadada;width: 95%;margin-left: 20px;"></div>
|
|
</div>
|
|
<div style="display: flex;flex-direction: column;justify-content: center;align-items: start;margin-left:60px;">
|
|
<span style="color: #333333;margin: 1% 0;">模板展示</span>
|
|
<!-- <img src="{{resource_get('plugins/exhelper/assets/image/send.png')}}" alt="" style="height: 140mm;width: 93%;"> -->
|
|
|
|
<div id="platform-supplier-box" style="display: flex;justify-content: center;">
|
|
<div style="height: 500px;width: 1095px;display: flex;flex-direction: column;background-color: #f9fafc;" id="platformSupplier">
|
|
<div style="display: flex;padding: 18px 0;">
|
|
<div style="display: flex;flex-direction: column;justify-content: center;align-items: center;flex: 6;">
|
|
<div style="display: flex;width: 100%;font-size: 20px;font-weight: bold;">
|
|
<div style="flex: 2;margin-left: 20px;"><span style="height: 32px;padding:4px;"></span></div>
|
|
<div style="flex: 5;text-align: center;"><span style="border: solid 1px #d3d3d3;height: 32px;padding:4px 13px;">供应商名称</span></div>
|
|
</div>
|
|
<div style="display: flex;width: 100%;margin:3% 0">
|
|
<div style="flex: 2;text-align: center;"></div>
|
|
<div style="flex: 5;text-align: center;display: flex;justify-content: center;align-items: center;">电话: <span style=" width: 104px;height: 26px;border: solid 1px #9ba5bb;display: inline-block;"></span></div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex;justify-content: center;height: 80%;overflow: hidden;flex: 2;">
|
|
<div style="width: 60px;height: 60px;background-color: #eeeeee;border: solid 1px #9ba5bb;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width:100%;display: flex;">
|
|
<div style="flex: 5;display: flex;flex-direction: column;justify-content: space-around;padding-left: 2%;">
|
|
<div style="display: flex;align-items: center;margin-bottom:15px">
|
|
<div style="display: flex;align-items: center;"><span style="width: 70px;height: 26px;border: solid 1px #9ba5bb;display: inline-block;padding:2px 0 0 2px;"> 姓名</span></div>
|
|
<div style="margin: 0 75px;display: flex;align-items: center;">收货地址: <span style="width: 158px;height: 26px;border: solid 1px #9ba5bb;display: inline-block;"></span></div>
|
|
<div style="display: flex;align-items: center;">收货电话: <span style="width: 144px;height: 26px;border: solid 1px #9ba5bb;display: inline-block;"></span></div>
|
|
</div>
|
|
<div style="display: flex;align-items: center;">收货人: <span style="width: 221px;height: 26px;border: solid 1px #9ba5bb;display: inline-block;"></span></div>
|
|
</div>
|
|
<div style="flex: 2;display: flex;flex-direction: column;justify-content: space-around;">
|
|
<div style="display: flex;align-items: center;">日期: <span style="width: 80px;height: 26px;border: solid 1px #9ba5bb;display: inline-block;"></span></div>
|
|
<div style="display: flex;align-items: center;">订单号: <span style="width: 80px;height: 26px;border: solid 1px #9ba5bb;display: inline-block;"></span></div>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 0 2%;margin: 1% 0;">
|
|
<el-table
|
|
:data="tableData"
|
|
:span-method="arraySpanMethod"
|
|
border
|
|
:cell-style="{ borderColor:'#d3d3d3' }"
|
|
:header-cell-style="{borderColor:'#d3d3d3'}"
|
|
style="width: 100%;border:1px solid #d3d3d3">
|
|
<el-table-column prop="trade_name" label="商品名称" width="180" align="center">
|
|
<template slot-scope="scope" >
|
|
<div v-if="scope.$index == 1" style="display: flex;">备注: <span style=" width: 507px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
|
|
<div v-if="scope.$index == 0" style="display: flex;justify-content: center;"><span style="width: 87px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="specifications" label="规格" align="center">
|
|
<template slot-scope="scope" >
|
|
<div v-if="scope.$index == 0" style="display: flex;justify-content: center;"><span style="width: 87px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="quantity" label="数量" align="center">
|
|
<template slot-scope="scope" >
|
|
<div v-if="scope.$index == 0" style="display: flex;justify-content: center;"><span style="width: 87px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="company" label="单位" align="center">
|
|
<template slot-scope="scope" >
|
|
<div v-if="scope.$index == 0" style="display: flex;justify-content: center;"><span style="width: 87px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="unit_price" label="单价(元)" align="center">
|
|
<template slot-scope="scope" >
|
|
<div v-if="scope.$index == 0" style="display: flex;justify-content: center;"><span style="width: 87px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
|
|
<div v-if="scope.$index == 1" style="justify-content: start;display: flex;">本页小计: <span style=" width: 80px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
|
|
<div v-if="scope.$index == 2" style="display: flex">合计: <span style=" width: 110px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="subtotal" label="小计(元)" align="center">
|
|
<template slot="header" slot-scope="scope">
|
|
<div style="display: flex;justify-content: end;">小计(元)</div>
|
|
</template>
|
|
<template slot-scope="scope" >
|
|
<div style="display: flex;justify-content: center;"><span style="width: 87px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div style="height:100%;width:100%;">
|
|
<div style="padding-left: 2%;padding-right: 157px;display: flex;justify-content: space-between;">
|
|
<span>经手人: </span>
|
|
<span>件数: </span>
|
|
<span>司机: </span>
|
|
<span>本次收款: </span>
|
|
</div>
|
|
<div style="display: flex;margin: 12px 0 20px 0;">
|
|
<div style="flex: 4;display: flex;padding-left: 20px;align-items: center;display: flex;">
|
|
<span>注:</span>
|
|
<div style="width: 586px;height: 26px;border: solid 1px #9ba5bb;"></div>
|
|
</div>
|
|
<div style="flex: 1;align-items: center;display: flex;">打印时间: <span style="width: 96px;height: 26px;border: solid 1px #9ba5bb;display: inline-block"></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
<div class="vue-page" >
|
|
<el-row>
|
|
<el-col align="center">
|
|
<el-button type="primary" @click="save">保存</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
let templateInfo = {!! $templateInfo?:[] !!}
|
|
var vm = new Vue({
|
|
el: "#app",
|
|
delimiters: ['[[', ']]'],
|
|
data() {
|
|
return {
|
|
serarch_form:{
|
|
width:"",
|
|
height:"",
|
|
supplier_name:"",
|
|
supplier_mobile:""
|
|
},
|
|
tableData: [{
|
|
trade_name:"商品",
|
|
specifications:"规格",
|
|
quantity:10,
|
|
company:"芸众",
|
|
unit_price:143,
|
|
subtotal:205445
|
|
}, {
|
|
trade_name:"商品2",
|
|
specifications:"规格2",
|
|
quantity:10,
|
|
company:"芸众2",
|
|
unit_price:1043,
|
|
subtotal:212
|
|
}, {
|
|
trade_name:"商品3",
|
|
specifications:"规格3",
|
|
quantity:10,
|
|
company:"芸众3",
|
|
unit_price:1043,
|
|
subtotal:20345
|
|
}],
|
|
templateInfo:templateInfo
|
|
}
|
|
},
|
|
mounted () {
|
|
document.getElementById('dialogVisible-card').innerText = this.templateInfo.remark ?this.templateInfo.remark : ""
|
|
this.serarch_form.width = this.templateInfo.width
|
|
this.serarch_form.height = this.templateInfo.height
|
|
this.serarch_form.supplier_name = this.templateInfo.supplier_name
|
|
this.serarch_form.supplier_mobile = this.templateInfo.supplier_mobile
|
|
// console.log(this.templateInfo,'templateInfo');
|
|
},
|
|
methods: {
|
|
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
if (rowIndex == 1 || rowIndex == 2) {
|
|
if (columnIndex === 0) {
|
|
return [1, 4];
|
|
}
|
|
if (columnIndex === 4) {
|
|
return [1,2];
|
|
} else{
|
|
return [0, 0];
|
|
}
|
|
}
|
|
},
|
|
blurPlatformDocumentWidth(){
|
|
// this.$nextTick(() => {
|
|
// document.getElementById('platformSupplier').style.width= this.serarch_form.width ? this.serarch_form.width * 1 + 'mm' : 220 + 'mm';
|
|
// })
|
|
// console.log( document.getElementById('platform-supplier-box').innerHTML,12);
|
|
},
|
|
blurPlatformDocumentHeight(){
|
|
// this.$nextTick(() => {
|
|
// document.getElementById('platformSupplier').style.height= this.serarch_form.height ? this.serarch_form.height * 1 + 'mm' : 140 + 'mm';
|
|
// })
|
|
},
|
|
save(){
|
|
this.$http.post("{!! yzWebFullUrl('plugin.exhelper.admin.delivery.templateEdit') !!}",{
|
|
remark: document.getElementById('dialogVisible-card').innerText,
|
|
...this.serarch_form
|
|
}).then(response => {
|
|
return response.json()
|
|
}).then(({result,data,msg}) => {
|
|
console.log(result,data,msg,55);
|
|
if (result) {
|
|
this.$message.success(msg);
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
}), function (res) {
|
|
console.log(res);
|
|
};
|
|
}
|
|
},
|
|
});
|
|
|
|
|
|
</script>
|
|
@endsection
|
|
|