@@ -0,0 +1,138 @@ | |||
<!-- | |||
filename: index.vue | |||
author: liubin | |||
date: 2024-04-02 09:49:36 | |||
description: | |||
--> | |||
<template> | |||
<!-- 按钮切换 --> | |||
<div | |||
v-if="buttonMode" | |||
class="button-nav"> | |||
<button | |||
v-for="m in menus" | |||
:key="m" | |||
@click="currentMenu = m" | |||
:data-text="m" | |||
:class="[m === currentMenu ? 'active' : '']"></button> | |||
</div> | |||
<!-- 标签切换 --> | |||
<div | |||
v-else | |||
class="custom-tabs" | |||
style="height: 100%; width: 100%"> | |||
<el-tabs | |||
class="tag-nav" | |||
v-model="currentMenu" | |||
style="height: 100%"> | |||
<el-tab-pane | |||
v-for="(m, idx) in menus" | |||
:key="m" | |||
:label="idx == 0 ? `\u2002${m}\u2002` : `\u3000${m}\u3000`" | |||
:name="m"> | |||
<slot :name="`tab${idx + 1}`"></slot> | |||
</el-tab-pane> | |||
</el-tabs> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'ButtonNav', | |||
props: { | |||
menus: { | |||
type: Array, | |||
required: true, | |||
default: () => [], | |||
validator: (val) => { | |||
return val.length > 0; | |||
}, | |||
}, | |||
buttonMode: { | |||
type: Boolean, | |||
default: true, | |||
}, | |||
}, | |||
data() { | |||
return { | |||
currentMenu: '', | |||
}; | |||
}, | |||
created() { | |||
this.currentMenu = this.menus[0]; | |||
}, | |||
watch: { | |||
currentMenu(val) { | |||
this.$emit('change', val); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.button-nav { | |||
width: 100%; | |||
// padding: 12px 0; | |||
display: flex; | |||
gap: 12px; | |||
* { | |||
user-select: none; | |||
} | |||
button { | |||
cursor: pointer; | |||
appearance: none; | |||
outline: none; | |||
border: none; | |||
background: #fff; | |||
border-radius: 8px; | |||
padding: 20px; | |||
color: #888; | |||
letter-spacing: 2px; | |||
flex: 1; | |||
box-sizing: padding-box; | |||
position: relative; | |||
&::after { | |||
content: attr(data-text); | |||
position: absolute; | |||
top: 10px; | |||
left: 50%; | |||
font-size: 18px; | |||
font-weight: 500; | |||
transform: translate(-50%); | |||
} | |||
&.active { | |||
color: #111; | |||
border-bottom: 4px solid #0b58ff; | |||
} | |||
} | |||
} | |||
</style> | |||
<style scoped> | |||
.custom-tabs >>> .el-tabs__header { | |||
margin-bottom: 8px; | |||
display: inline-block; | |||
/* transform: translateY(-12px); */ | |||
} | |||
.custom-tabs >>> .el-tabs__item { | |||
padding-left: 0px !important; | |||
padding-right: 0px !important; | |||
line-height: 36px !important; | |||
height: 36px; | |||
} | |||
.custom-tabs >>> .el-tabs__content { | |||
height: calc(100% - 42px); | |||
} | |||
.custom-tabs >>> .el-tab-pane { | |||
box-sizing: border-box; | |||
height: 100%; | |||
padding: 20px; | |||
border: 10px solid #f002; | |||
} | |||
</style> |
@@ -1,19 +1,24 @@ | |||
<template> | |||
<el-drawer :visible.sync="drawer" :append-to-body="true" size="80%" > | |||
<small-title slot="title" :no-padding="true"> | |||
<!-- <template v-for="demo in demoList"> --> | |||
<!-- <el-button :key="demo.name" :type="demo.name === curDemo ? 'primary' : ' '" @click="curDemo = demo.name"> --> | |||
<!-- {{ $t('module.packingManage.printModelDesign') }} --> | |||
模板设计 | |||
<!-- </el-button> --> | |||
<!-- </template> --> | |||
</small-title> | |||
<el-card> | |||
<el-row style="margin-bottom: 10px"> | |||
<el-col :span="4"> | |||
<!-- 模板选择 --> | |||
<el-drawer | |||
:visible.sync="drawer" | |||
:append-to-body="true" | |||
size="80%"> | |||
<small-title | |||
slot="title" | |||
:no-padding="true"> | |||
<!-- <template v-for="demo in demoList"> --> | |||
<!-- <el-button :key="demo.name" :type="demo.name === curDemo ? 'primary' : ' '" @click="curDemo = demo.name"> --> | |||
<!-- {{ $t('module.packingManage.printModelDesign') }} --> | |||
模板设计 | |||
<!-- </el-button> --> | |||
<!-- </template> --> | |||
</small-title> | |||
<el-card> | |||
<el-row style="margin-bottom: 10px"> | |||
<!-- <el-col :span="4"> --> | |||
<!-- 模板选择 --> | |||
<!-- <el-select | |||
<!-- <el-select | |||
v-model="mode" | |||
filterable | |||
:default-value="0" | |||
@@ -25,393 +30,469 @@ | |||
{{ opt.name }} | |||
</el-option> | |||
</el-select> --> | |||
</el-col> | |||
<el-col :span="20"> | |||
<!-- 纸张设置 --> | |||
<el-button-group style="margin:0 10px"> | |||
<el-button v-for="(value,type) in paperTypes" :key="type" :type="curPaperType === type ? 'primary' : ' '" | |||
@click="setPaper(type,value)"> | |||
{{ type }} | |||
</el-button> | |||
</el-button-group> | |||
<el-input-number style="margin:0 10px" :value="scaleValue " :precision="2" :step="0.1" :min="scaleMin" | |||
:max="scaleMax" @change="changeScale" /> | |||
<el-popover v-model="paperPopVisible" placement="bottom" width="300" title="设置纸张宽高(mm)"> | |||
<div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px"> | |||
<el-input v-model="paperWidth" type="number" style=" width: 100px; text-align: center" place="宽(mm)" />~ | |||
<el-input v-model="paperHeight" type="number" style=" width: 100px; text-align: center" place="高(mm)" /> | |||
</div> | |||
<div> | |||
<el-button type="primary" style="width: 100%" size="mini" @click="otherPaper">确定</el-button> | |||
</div> | |||
<el-button slot="reference" type="primary" style="margin:0 10px">自定义宽高</el-button> | |||
</el-popover> | |||
<!-- </el-col> --> | |||
<el-col :span="24"> | |||
<!-- 纸张设置 --> | |||
<el-button-group style="margin: 0 10px"> | |||
<el-button | |||
v-for="(value, type) in paperTypes" | |||
:key="type" | |||
:type="curPaperType === type ? 'primary' : ' '" | |||
@click="setPaper(type, value)"> | |||
{{ type }} | |||
</el-button> | |||
</el-button-group> | |||
<el-input-number | |||
style="margin: 0 10px; width: 140px" | |||
:value="scaleValue" | |||
:precision="2" | |||
:step="0.1" | |||
:min="scaleMin" | |||
:max="scaleMax" | |||
@change="changeScale" /> | |||
<el-popover | |||
v-model="paperPopVisible" | |||
placement="bottom" | |||
width="300" | |||
title="设置纸张宽高(mm)"> | |||
<div | |||
style=" | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
margin-bottom: 10px; | |||
"> | |||
<el-input | |||
v-model="paperWidth" | |||
type="number" | |||
style="width: 100px; text-align: center" | |||
place="宽(mm)" /> | |||
~ | |||
<el-input | |||
v-model="paperHeight" | |||
type="number" | |||
style="width: 100px; text-align: center" | |||
place="高(mm)" /> | |||
</div> | |||
<div> | |||
<el-button | |||
type="primary" | |||
style="width: 100%" | |||
size="mini" | |||
@click="otherPaper"> | |||
确定 | |||
</el-button> | |||
</div> | |||
<el-button | |||
slot="reference" | |||
type="primary" | |||
style="margin: 0 10px"> | |||
自定义宽高 | |||
</el-button> | |||
</el-popover> | |||
<!-- <a-button-group>--> | |||
<!-- <template v-for="(value,type) in paperTypes">--> | |||
<!-- <a-button :type="curPaperType === type ? 'primary' : 'info'" @click="setPaper(type,value)" :key="type">--> | |||
<!-- {{ type }}--> | |||
<!-- </a-button>--> | |||
<!-- </template>--> | |||
<!-- <a-popover v-model="paperPopVisible" title="设置纸张宽高(mm)" trigger="click">--> | |||
<!-- <div slot="content">--> | |||
<!-- <a-input-group compact style="margin: 10px 10px">--> | |||
<!-- <a-input type="number" v-model="paperWidth" style=" width: 100px; text-align: center"--> | |||
<!-- placeholder="宽(mm)"/>--> | |||
<!-- <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"--> | |||
<!-- placeholder="~" disabled--> | |||
<!-- />--> | |||
<!-- <a-input type="number" v-model="paperHeight" style="width: 100px; text-align: center; border-left: 0"--> | |||
<!-- placeholder="高(mm)"/>--> | |||
<!-- </a-input-group>--> | |||
<!-- <a-button type="primary" style="width: 100%" @click="otherPaper">确定</a-button>--> | |||
<!-- </div>--> | |||
<!-- <a-button :type="'other'==curPaperType?'primary':''">自定义纸张</a-button>--> | |||
<!-- </a-popover>--> | |||
<!-- </a-button-group>--> | |||
<!-- <a-button-group>--> | |||
<!-- <template v-for="(value,type) in paperTypes">--> | |||
<!-- <a-button :type="curPaperType === type ? 'primary' : 'info'" @click="setPaper(type,value)" :key="type">--> | |||
<!-- {{ type }}--> | |||
<!-- </a-button>--> | |||
<!-- </template>--> | |||
<!-- <a-popover v-model="paperPopVisible" title="设置纸张宽高(mm)" trigger="click">--> | |||
<!-- <div slot="content">--> | |||
<!-- <a-input-group compact style="margin: 10px 10px">--> | |||
<!-- <a-input type="number" v-model="paperWidth" style=" width: 100px; text-align: center"--> | |||
<!-- placeholder="宽(mm)"/>--> | |||
<!-- <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"--> | |||
<!-- placeholder="~" disabled--> | |||
<!-- />--> | |||
<!-- <a-input type="number" v-model="paperHeight" style="width: 100px; text-align: center; border-left: 0"--> | |||
<!-- placeholder="高(mm)"/>--> | |||
<!-- </a-input-group>--> | |||
<!-- <a-button type="primary" style="width: 100%" @click="otherPaper">确定</a-button>--> | |||
<!-- </div>--> | |||
<!-- <a-button :type="'other'==curPaperType?'primary':''">自定义纸张</a-button>--> | |||
<!-- </a-popover>--> | |||
<!-- </a-button-group>--> | |||
<!-- 预览/打印 --> | |||
<el-button-group> | |||
<el-button type="primary" icon="redo" @click="rotatePaper()">旋转</el-button> | |||
<el-button type="primary" icon="el-icon-view" @click="preView"> | |||
预览 | |||
</el-button> | |||
<!-- <el-button type="primary" icon="el-icon-printer" @click="print"> | |||
<!-- 预览/打印 --> | |||
<el-button-group> | |||
<el-button | |||
type="primary" | |||
icon="redo" | |||
@click="rotatePaper()"> | |||
旋转 | |||
</el-button> | |||
<el-button | |||
type="primary" | |||
icon="el-icon-view" | |||
@click="preView"> | |||
预览 | |||
</el-button> | |||
<!-- <el-button type="primary" icon="el-icon-printer" @click="print"> | |||
直接打印 | |||
</el-button> --> | |||
<el-button type="primary" icon="el-icon-s-management" @click="save"> | |||
保存 | |||
</el-button> | |||
<el-button type="danger" icon="el-icon-delete" @click="clearPaper"> | |||
清空 | |||
</el-button> | |||
</el-button-group> | |||
<!-- 保存/清空 --> | |||
</el-col> | |||
</el-row> | |||
<el-row :gutter="24"> | |||
<el-col :span="4"> | |||
<el-card style="height: 100vh"> | |||
<el-row> | |||
<el-col :span="24" class="rect-printElement-types hiprintEpContainer" /> | |||
</el-row> | |||
</el-card> | |||
</el-col> | |||
<el-col :span="16"> | |||
<el-card class="card-design"> | |||
<div id="hiprint-printTemplate" class="hiprint-printTemplate" /> | |||
</el-card> | |||
</el-col> | |||
<el-col :span="4" class="params_setting_container"> | |||
<el-card> | |||
<el-row class="hinnn-layout-sider"> | |||
<div id="PrintElementOptionSetting" /> | |||
</el-row> | |||
</el-card> | |||
</el-col> | |||
</el-row> | |||
<!-- 预览 --> | |||
<print-preview ref="preView" /> | |||
</el-card> | |||
</el-drawer> | |||
<el-button | |||
type="primary" | |||
icon="el-icon-s-management" | |||
@click="save"> | |||
保存 | |||
</el-button> | |||
<el-button | |||
type="danger" | |||
icon="el-icon-delete" | |||
@click="clearPaper"> | |||
清空 | |||
</el-button> | |||
</el-button-group> | |||
<!-- 保存/清空 --> | |||
</el-col> | |||
</el-row> | |||
<el-row :gutter="24"> | |||
<el-col :span="4"> | |||
<el-card style="height: 100vh"> | |||
<el-row> | |||
<el-col | |||
:span="24" | |||
class="rect-printElement-types hiprintEpContainer" /> | |||
</el-row> | |||
</el-card> | |||
</el-col> | |||
<el-col :span="16"> | |||
<el-card class="card-design"> | |||
<div | |||
id="hiprint-printTemplate" | |||
class="hiprint-printTemplate" /> | |||
</el-card> | |||
</el-col> | |||
<el-col | |||
:span="4" | |||
class="params_setting_container"> | |||
<el-card> | |||
<el-row class="hinnn-layout-sider"> | |||
<div id="PrintElementOptionSetting" /> | |||
</el-row> | |||
</el-card> | |||
</el-col> | |||
</el-row> | |||
<!-- 预览 --> | |||
<print-preview ref="preView" /> | |||
</el-card> | |||
</el-drawer> | |||
</template> | |||
<script> | |||
import printPreview from './preview' | |||
import { MessageBox } from 'element-ui' | |||
import { hiprint } from 'vue-plugin-hiprint' | |||
import providers from './providers' | |||
import printPreview from './preview'; | |||
import { MessageBox } from 'element-ui'; | |||
import { hiprint } from 'vue-plugin-hiprint'; | |||
import providers from './providers'; | |||
// import printData from './print-data' | |||
import $ from 'jquery' | |||
import SmallTitle from './SmallTitle.vue' | |||
let hiprintTemplate = null | |||
import $ from 'jquery'; | |||
import SmallTitle from './SmallTitle.vue'; | |||
let hiprintTemplate = null; | |||
export default { | |||
name: 'PrintCustom', | |||
components: { printPreview, SmallTitle }, | |||
// props: { | |||
// modelData: { | |||
// type: String, | |||
// default: '' | |||
// } | |||
// }, | |||
data() { | |||
return { | |||
// paperPopVisible: false, | |||
// 模板选择 | |||
mode: 0, | |||
template: null, | |||
modeList: [], | |||
// 当前纸张 | |||
curPaper: { | |||
// type: 'other', | |||
// width: 220, | |||
// height: 80 | |||
}, | |||
printData:{}, | |||
drawer: false, | |||
// 纸张类型 | |||
paperTypes: { | |||
'A3': { | |||
width: 420, | |||
height: 296.6 | |||
}, | |||
'A4': { | |||
width: 210, | |||
height: 297 | |||
}, | |||
'A5': { | |||
width: 210, | |||
height: 147.6 | |||
}, | |||
'B3': { | |||
width: 500, | |||
height: 352.6 | |||
}, | |||
'B4': { | |||
width: 250, | |||
height: 352.6 | |||
}, | |||
'B5': { | |||
width: 250, | |||
height: 175.6 | |||
} | |||
}, | |||
scaleValue: 1, | |||
scaleMax: 5, | |||
scaleMin: 0.5, | |||
// 自定义纸张 | |||
paperPopVisible: false, | |||
paperWidth: '210', | |||
paperHeight: '297' | |||
} | |||
}, | |||
computed: { | |||
curPaperType() { | |||
let type = 'other' | |||
const types = this.paperTypes | |||
for (const key in types) { | |||
const item = types[key] | |||
const { width, height } = this.curPaper | |||
if (item.width === width && item.height === height) { | |||
type = key | |||
} | |||
} | |||
return type | |||
} | |||
}, | |||
created() { | |||
// $('.hiprintEpContainer').empty() | |||
}, | |||
destroyed () { | |||
$('.hiprintEpContainer').empty() | |||
console.log(11111) | |||
}, | |||
methods: { | |||
// handleClose() { | |||
// $('.hiprintEpContainer').empty() | |||
// }, | |||
closed() { | |||
$('.hiprintEpContainer').empty() | |||
$('.hiprint-printTemplate').empty() | |||
}, | |||
init(data) { | |||
this.drawer = true | |||
this.modelData = data | |||
this.modeList = providers.map((e) => { | |||
return { type: e.type, name: e.name, value: e.value } | |||
}) | |||
this.changeMode() | |||
}, | |||
changeMode() { | |||
// hiprintTemplate.clear() | |||
// console.log(this.modelData) | |||
this.$nextTick(() => { | |||
const { mode } = this | |||
const provider = providers[mode] | |||
hiprint.init({ | |||
providers: [provider.f] | |||
}) | |||
name: 'PrintCustom', | |||
components: { printPreview, SmallTitle }, | |||
// props: { | |||
// modelData: { | |||
// type: String, | |||
// default: '' | |||
// } | |||
// }, | |||
data() { | |||
return { | |||
// paperPopVisible: false, | |||
// 模板选择 | |||
mode: 0, | |||
template: null, | |||
modeList: [], | |||
// 当前纸张 | |||
curPaper: { | |||
// type: 'other', | |||
// width: 220, | |||
// height: 80 | |||
}, | |||
printData: {}, | |||
drawer: false, | |||
// 纸张类型 | |||
paperTypes: { | |||
A3: { | |||
width: 420, | |||
height: 296.6, | |||
}, | |||
A4: { | |||
width: 210, | |||
height: 297, | |||
}, | |||
A5: { | |||
width: 210, | |||
height: 147.6, | |||
}, | |||
A6: { | |||
width: 95, | |||
height: 125, | |||
}, | |||
B3: { | |||
width: 500, | |||
height: 352.6, | |||
}, | |||
B4: { | |||
width: 250, | |||
height: 352.6, | |||
}, | |||
B5: { | |||
width: 250, | |||
height: 175.6, | |||
}, | |||
}, | |||
scaleValue: 1, | |||
scaleMax: 5, | |||
scaleMin: 0.5, | |||
// 自定义纸张 | |||
paperPopVisible: false, | |||
paperWidth: '210', | |||
paperHeight: '297', | |||
}; | |||
}, | |||
computed: { | |||
curPaperType() { | |||
let type = 'other'; | |||
const types = this.paperTypes; | |||
for (const key in types) { | |||
const item = types[key]; | |||
const { width, height } = this.curPaper; | |||
if (item.width === width && item.height === height) { | |||
type = key; | |||
} | |||
} | |||
return type; | |||
}, | |||
}, | |||
created() { | |||
// $('.hiprintEpContainer').empty() | |||
}, | |||
destroyed() { | |||
$('.hiprintEpContainer').empty(); | |||
console.log(11111); | |||
}, | |||
methods: { | |||
// handleClose() { | |||
// $('.hiprintEpContainer').empty() | |||
// }, | |||
closed() { | |||
$('.hiprintEpContainer').empty(); | |||
$('.hiprint-printTemplate').empty(); | |||
}, | |||
init(data) { | |||
this.drawer = true; | |||
this.modelData = data; | |||
this.modeList = providers.map((e) => { | |||
return { type: e.type, name: e.name, value: e.value }; | |||
}); | |||
this.changeMode(); | |||
}, | |||
changeMode() { | |||
// hiprintTemplate.clear() | |||
// console.log(this.modelData) | |||
this.$nextTick(() => { | |||
const { mode } = this; | |||
const provider = providers[mode]; | |||
hiprint.init({ | |||
providers: [provider.f], | |||
}); | |||
// $('#hiprint-printTemplate').empty() | |||
// console.log(JSON.parse(this.modelData)) | |||
hiprint.setConfig() | |||
// 替换配置 | |||
hiprint.setConfig({ | |||
movingDistance: 2.5, | |||
text: { | |||
supportOptions: [ | |||
{ | |||
name: 'styler', | |||
hidden: true | |||
}, | |||
{ | |||
name: 'formatter', | |||
hidden: true | |||
} | |||
] | |||
} | |||
}) | |||
// $('#hiprint-printTemplate').empty() | |||
// console.log(JSON.parse(this.modelData)) | |||
hiprint.setConfig(); | |||
// 替换配置 | |||
hiprint.setConfig({ | |||
movingDistance: 2.5, | |||
text: { | |||
supportOptions: [ | |||
{ | |||
name: 'styler', | |||
hidden: true, | |||
}, | |||
{ | |||
name: 'formatter', | |||
hidden: true, | |||
}, | |||
], | |||
}, | |||
}); | |||
// console.log(this.modelData) | |||
// console.log($('#hiprint-printTemplate').empty()) | |||
// if () { | |||
// console.log(this.modelData); | |||
// $('.hiprintEpContainer').empty() | |||
// hiprint.PrintElementTypeManager.build('.hiprintEpContainer', provider.value) | |||
// $('.hiprint-printTemplate').empty() | |||
// hiprintTemplate = new hiprint.PrintTemplate({ | |||
// template: JSON.parse(this.modelData), | |||
// settingContainer: '#PrintElementOptionSetting', | |||
// paginationContainer: '.hiprint-printPagination' | |||
// }) | |||
// } else { | |||
$('.hiprintEpContainer').empty() | |||
console.log(this.modelData || {}); | |||
hiprint.PrintElementTypeManager.build('.hiprintEpContainer', provider.value) | |||
$('.hiprint-printTemplate').empty() | |||
// const templates = this.$ls.get('KEY_TEMPLATES', {}) | |||
const template = provider.value | |||
// console.log(template) | |||
if (this.modelData) { | |||
hiprintTemplate = new hiprint.PrintTemplate({ | |||
template: JSON.parse(this.modelData), | |||
settingContainer: '#PrintElementOptionSetting', | |||
paginationContainer: '.hiprint-printPagination' | |||
}) | |||
} else { | |||
hiprintTemplate = new hiprint.PrintTemplate({ | |||
template:{}, | |||
settingContainer: '#PrintElementOptionSetting', | |||
paginationContainer: '.hiprint-printPagination' | |||
}) | |||
} | |||
// } | |||
hiprintTemplate.design('#hiprint-printTemplate') | |||
// console.log(hiprintTemplate) | |||
console.log(hiprintTemplate); | |||
// hiprintTemplate.design('#hiprint-printTemplate', { grid: true }) | |||
// 获取当前放大比例, 当zoom时传true 才会有 | |||
this.scaleValue = hiprintTemplate.editingPanel.scale || 1 | |||
// this.scaleValue = hiprintTemplate.editingPanel.scale || 1 | |||
}) | |||
}, | |||
/** | |||
* 设置纸张大小 | |||
* @param type [A3, A4, A5, B3, B4, B5, other] | |||
* @param value {width,height} mm | |||
*/ | |||
setPaper(type, value) { | |||
try { | |||
if (Object.keys(this.paperTypes).includes(type)) { | |||
this.curPaper = { type: type, width: value.width, height: value.height } | |||
hiprintTemplate.setPaper(value.width, value.height) | |||
} else { | |||
this.curPaper = { type: 'other', width: value.width, height: value.height } | |||
hiprintTemplate.setPaper(value.width, value.height) | |||
} | |||
} catch (error) { | |||
this.$message.error(`操作失败: ${error}`) | |||
} | |||
}, | |||
changeScale(currentValue, oldValue) { | |||
let big = false | |||
currentValue <= oldValue ? big = false : big = true | |||
let scaleValue = this.scaleValue | |||
if (big) { | |||
scaleValue += 0.1 | |||
if (scaleValue > this.scaleMax) scaleValue = 5 | |||
} else { | |||
scaleValue -= 0.1 | |||
if (scaleValue < this.scaleMin) scaleValue = 0.5 | |||
} | |||
if (hiprintTemplate) { | |||
// scaleValue: 放大缩小值, false: 不保存(不传也一样), 如果传 true, 打印时也会放大 | |||
hiprintTemplate.zoom(scaleValue) | |||
this.scaleValue = scaleValue | |||
} | |||
}, | |||
clearPaper() { | |||
MessageBox.confirm('是否确认清空模板信息?', '警告', { | |||
confirmButtonText: '确定', | |||
cancelButtonText: '取消', | |||
type: 'warning' | |||
}).then(() => { | |||
try { | |||
hiprintTemplate.clear() | |||
} catch (error) { | |||
this.$message.error(`操作失败: ${error}`) | |||
} | |||
}).catch((err) => { | |||
console.log(err) | |||
}) | |||
}, | |||
otherPaper() { | |||
const value = {} | |||
value.width = this.paperWidth | |||
value.height = this.paperHeight | |||
this.paperPopVisible = false | |||
this.setPaper('other', value) | |||
}, | |||
rotatePaper() { | |||
if (hiprintTemplate) { | |||
hiprintTemplate.rotatePaper() | |||
} | |||
}, | |||
preView() { | |||
const { width } = this.curPaper | |||
this.$refs.preView.show(hiprintTemplate, this.printData, width) | |||
}, | |||
print() { | |||
// if (window.hiwebSocket.opened) { | |||
const printerList = hiprintTemplate.getPrinterList() | |||
console.log(printerList) | |||
hiprintTemplate.print2(this.printData, { printer: '', title: '预览打印' }) | |||
// return | |||
// } | |||
// this.$message.error('客户端未连接,无法直接打印') | |||
}, | |||
save() { | |||
// console.log(hiprintTemplate.getJson()) | |||
const { mode } = this | |||
const provider = providers[mode] | |||
// console.log(hiprintTemplate.getJson()) | |||
this.setTemplate({ | |||
name: provider.value, | |||
json: hiprintTemplate.getJson() | |||
}) | |||
}, | |||
setTemplate(payload) { | |||
// const templates = this.$ls.get('KEY_TEMPLATES', {}) | |||
// console.log(payload.json) | |||
// templates[payload.name] = payload.json | |||
// this.$ls.set('KEY_TEMPLATES', templates) | |||
this.$message.info('保存成功') | |||
// console.log(JSON.stringify(payload.json)) | |||
this.drawer = false | |||
this.$emit('saveData', payload.json) | |||
$('.hiprintEpContainer').empty() | |||
// this.$parent.$parent.getModelData(payload.json) | |||
} | |||
} | |||
} | |||
// console.log(this.modelData) | |||
// console.log($('#hiprint-printTemplate').empty()) | |||
// if () { | |||
// console.log(this.modelData); | |||
// $('.hiprintEpContainer').empty() | |||
// hiprint.PrintElementTypeManager.build('.hiprintEpContainer', provider.value) | |||
// $('.hiprint-printTemplate').empty() | |||
// hiprintTemplate = new hiprint.PrintTemplate({ | |||
// template: JSON.parse(this.modelData), | |||
// settingContainer: '#PrintElementOptionSetting', | |||
// paginationContainer: '.hiprint-printPagination' | |||
// }) | |||
// } else { | |||
$('.hiprintEpContainer').empty(); | |||
console.log(this.modelData || {}); | |||
hiprint.PrintElementTypeManager.build( | |||
'.hiprintEpContainer', | |||
provider.value | |||
); | |||
$('.hiprint-printTemplate').empty(); | |||
// const templates = this.$ls.get('KEY_TEMPLATES', {}) | |||
const template = provider.value; | |||
// console.log(template) | |||
if (this.modelData) { | |||
hiprintTemplate = new hiprint.PrintTemplate({ | |||
template: JSON.parse(this.modelData), | |||
settingContainer: '#PrintElementOptionSetting', | |||
paginationContainer: '.hiprint-printPagination', | |||
}); | |||
} else { | |||
hiprintTemplate = new hiprint.PrintTemplate({ | |||
template: {}, | |||
settingContainer: '#PrintElementOptionSetting', | |||
paginationContainer: '.hiprint-printPagination', | |||
}); | |||
} | |||
// } | |||
hiprintTemplate.design('#hiprint-printTemplate'); | |||
// console.log(hiprintTemplate) | |||
console.log(hiprintTemplate); | |||
// hiprintTemplate.design('#hiprint-printTemplate', { grid: true }) | |||
// 获取当前放大比例, 当zoom时传true 才会有 | |||
this.scaleValue = hiprintTemplate.editingPanel.scale || 1; | |||
// this.scaleValue = hiprintTemplate.editingPanel.scale || 1 | |||
}); | |||
}, | |||
/** | |||
* 设置纸张大小 | |||
* @param type [A3, A4, A5, B3, B4, B5, other] | |||
* @param value {width,height} mm | |||
*/ | |||
setPaper(type, value) { | |||
try { | |||
if (Object.keys(this.paperTypes).includes(type)) { | |||
this.curPaper = { | |||
type: type, | |||
width: value.width, | |||
height: value.height, | |||
}; | |||
hiprintTemplate.setPaper(value.width, value.height); | |||
} else { | |||
this.curPaper = { | |||
type: 'other', | |||
width: value.width, | |||
height: value.height, | |||
}; | |||
hiprintTemplate.setPaper(value.width, value.height); | |||
} | |||
} catch (error) { | |||
this.$message.error(`操作失败: ${error}`); | |||
} | |||
}, | |||
changeScale(currentValue, oldValue) { | |||
let big = false; | |||
currentValue <= oldValue ? (big = false) : (big = true); | |||
let scaleValue = this.scaleValue; | |||
if (big) { | |||
scaleValue += 0.1; | |||
if (scaleValue > this.scaleMax) scaleValue = 5; | |||
} else { | |||
scaleValue -= 0.1; | |||
if (scaleValue < this.scaleMin) scaleValue = 0.5; | |||
} | |||
if (hiprintTemplate) { | |||
// scaleValue: 放大缩小值, false: 不保存(不传也一样), 如果传 true, 打印时也会放大 | |||
hiprintTemplate.zoom(scaleValue); | |||
this.scaleValue = scaleValue; | |||
} | |||
}, | |||
clearPaper() { | |||
MessageBox.confirm('是否确认清空模板信息?', '警告', { | |||
confirmButtonText: '确定', | |||
cancelButtonText: '取消', | |||
type: 'warning', | |||
}) | |||
.then(() => { | |||
try { | |||
hiprintTemplate.clear(); | |||
} catch (error) { | |||
this.$message.error(`操作失败: ${error}`); | |||
} | |||
}) | |||
.catch((err) => { | |||
console.log(err); | |||
}); | |||
}, | |||
otherPaper() { | |||
const value = {}; | |||
value.width = this.paperWidth; | |||
value.height = this.paperHeight; | |||
this.paperPopVisible = false; | |||
this.setPaper('other', value); | |||
}, | |||
rotatePaper() { | |||
if (hiprintTemplate) { | |||
hiprintTemplate.rotatePaper(); | |||
} | |||
}, | |||
preView() { | |||
const { width } = this.curPaper; | |||
this.$refs.preView.show(hiprintTemplate, this.printData, width); | |||
}, | |||
print() { | |||
// if (window.hiwebSocket.opened) { | |||
const printerList = hiprintTemplate.getPrinterList(); | |||
console.log(printerList); | |||
hiprintTemplate.print2(this.printData, { | |||
printer: '', | |||
title: '预览打印', | |||
}); | |||
// return | |||
// } | |||
// this.$message.error('客户端未连接,无法直接打印') | |||
}, | |||
save() { | |||
// console.log(hiprintTemplate.getJson()) | |||
const { mode } = this; | |||
const provider = providers[mode]; | |||
// console.log(hiprintTemplate.getJson()) | |||
this.setTemplate({ | |||
name: provider.value, | |||
json: hiprintTemplate.getJson(), | |||
}); | |||
}, | |||
setTemplate(payload) { | |||
// const templates = this.$ls.get('KEY_TEMPLATES', {}) | |||
// console.log(payload.json) | |||
// templates[payload.name] = payload.json | |||
// this.$ls.set('KEY_TEMPLATES', templates) | |||
this.$message.info('保存成功'); | |||
// console.log(JSON.stringify(payload.json)) | |||
this.drawer = false; | |||
this.$emit('saveData', payload.json); | |||
$('.hiprintEpContainer').empty(); | |||
// this.$parent.$parent.getModelData(payload.json) | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
// build 拖拽 | |||
::v-deep .hiprint-printElement-type >li>ul>li>a { | |||
padding: 4px 4px; | |||
color: #1296db; | |||
line-height: 1; | |||
height: auto; | |||
text-overflow: ellipsis; | |||
::v-deep .hiprint-printElement-type > li > ul > li > a { | |||
padding: 4px 4px; | |||
color: #1296db; | |||
line-height: 1; | |||
height: auto; | |||
text-overflow: ellipsis; | |||
} | |||
// 设计容器 | |||
.card-design { | |||
// overflow: hidden; | |||
overflow-x: auto; | |||
overflow-y: auto; | |||
// overflow: hidden; | |||
overflow-x: auto; | |||
overflow-y: auto; | |||
} | |||
</style> |
@@ -0,0 +1,45 @@ | |||
<template> | |||
<div class="tableInner"> | |||
<el-input | |||
v-if="list.isEdit" | |||
type="number" | |||
v-model="list[itemProp]" | |||
@blur="changeInput" /> | |||
<span v-else>{{ list[itemProp] }}</span> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'InputArea', | |||
props: { | |||
injectData: { | |||
type: Object, | |||
default: () => ({}), | |||
}, | |||
itemProp: { | |||
type: String, | |||
}, | |||
}, | |||
data() { | |||
return { | |||
list: {}, | |||
}; | |||
}, | |||
mounted() { | |||
this.initData(); | |||
}, | |||
watch: { | |||
injectData() { | |||
this.initData(); | |||
}, | |||
}, | |||
methods: { | |||
initData() { | |||
this.list = this.injectData; | |||
}, | |||
changeInput() { | |||
this.$emit('emitData', this.list); | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -0,0 +1,226 @@ | |||
<template> | |||
<div class="other-msg-box"> | |||
<el-radio-group | |||
v-model="chooseMsg" | |||
@change="changeChoose"> | |||
<el-radio :label="1"> | |||
<div style="display: inline-block"> | |||
<el-form | |||
:inline="true" | |||
:model="printMsg1" | |||
class="demo-form-inline"> | |||
<el-form-item label="客户"> | |||
<el-select | |||
size="small" | |||
v-model="printMsg1.customerId" | |||
filterable | |||
placeholder="客户"> | |||
<el-option | |||
v-for="item in customerList" | |||
:key="item.id" | |||
:label="item.name" | |||
:value="item.id"></el-option> | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item label="封箱人员工号"> | |||
<el-input | |||
v-model="printMsg1.sealWorker" | |||
size="small" | |||
placeholder="封箱人员工号"></el-input> | |||
</el-form-item> | |||
<el-form-item label="打包人员工号"> | |||
<el-input | |||
v-model="printMsg1.packWorker" | |||
size="small" | |||
placeholder="打包人员工号"></el-input> | |||
</el-form-item> | |||
<el-form-item label="流程卡号"> | |||
<el-input | |||
v-model="printMsg1.processCard" | |||
size="small" | |||
style="width: 120px" | |||
placeholder="流程卡号"></el-input> | |||
</el-form-item> | |||
<el-form-item label="托盘规格"> | |||
<el-input | |||
v-model="printMsg1.pallet" | |||
size="small" | |||
style="width: 120px" | |||
placeholder="托盘规格"></el-input> | |||
</el-form-item> | |||
<el-form-item label="备注"> | |||
<el-input | |||
v-model="printMsg1.remark" | |||
size="small" | |||
placeholder="备注"></el-input> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
</el-radio> | |||
<el-radio :label="2"> | |||
<div style="display: inline-block"> | |||
<el-form | |||
:inline="true" | |||
:model="printMsg2" | |||
class="demo-form-inline"> | |||
<el-form-item label="客户"> | |||
<el-select | |||
size="small" | |||
v-model="printMsg2.customerId" | |||
filterable | |||
placeholder="客户"> | |||
<el-option | |||
v-for="item in customerList" | |||
:key="item.id" | |||
:label="item.name" | |||
:value="item.id"></el-option> | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item label="封箱人员工号"> | |||
<el-input | |||
v-model="printMsg2.sealWorker" | |||
size="small" | |||
placeholder="封箱人员工号"></el-input> | |||
</el-form-item> | |||
<el-form-item label="打包人员工号"> | |||
<el-input | |||
v-model="printMsg2.packWorker" | |||
size="small" | |||
placeholder="打包人员工号"></el-input> | |||
</el-form-item> | |||
<el-form-item label="流程卡号"> | |||
<el-input | |||
v-model="printMsg2.processCard" | |||
size="small" | |||
style="width: 120px" | |||
placeholder="流程卡号"></el-input> | |||
</el-form-item> | |||
<el-form-item label="托盘规格"> | |||
<el-input | |||
v-model="printMsg2.pallet" | |||
size="small" | |||
style="width: 120px" | |||
placeholder="托盘规格"></el-input> | |||
</el-form-item> | |||
<el-form-item label="备注"> | |||
<el-input | |||
v-model="printMsg2.remark" | |||
size="small" | |||
placeholder="备注"></el-input> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
</el-radio> | |||
<el-radio :label="3"> | |||
<div style="display: inline-block"> | |||
<el-form | |||
:inline="true" | |||
:model="printMsg3" | |||
class="demo-form-inline"> | |||
<el-form-item label="客户"> | |||
<el-select | |||
size="small" | |||
v-model="printMsg3.customerId" | |||
filterable | |||
placeholder="客户"> | |||
<el-option | |||
v-for="item in customerList" | |||
:key="item.id" | |||
:label="item.name" | |||
:value="item.id"></el-option> | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item label="封箱人员工号"> | |||
<el-input | |||
v-model="printMsg3.sealWorker" | |||
size="small" | |||
placeholder="封箱人员工号"></el-input> | |||
</el-form-item> | |||
<el-form-item label="打包人员工号"> | |||
<el-input | |||
v-model="printMsg3.packWorker" | |||
size="small" | |||
placeholder="打包人员工号"></el-input> | |||
</el-form-item> | |||
<el-form-item label="流程卡号"> | |||
<el-input | |||
v-model="printMsg3.processCard" | |||
size="small" | |||
style="width: 120px" | |||
placeholder="流程卡号"></el-input> | |||
</el-form-item> | |||
<el-form-item label="托盘规格"> | |||
<el-input | |||
v-model="printMsg3.pallet" | |||
size="small" | |||
style="width: 120px" | |||
placeholder="托盘规格"></el-input> | |||
</el-form-item> | |||
<el-form-item label="备注"> | |||
<el-input | |||
v-model="printMsg3.remark" | |||
size="small" | |||
placeholder="备注"></el-input> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
</el-radio> | |||
</el-radio-group> | |||
</div> | |||
</template> | |||
<script> | |||
import { getCustomerList } from '@/api/base/packingInfo'; | |||
export default { | |||
name: 'OtherMsg', | |||
props: { | |||
printMsg1: { | |||
type: Object, | |||
default: () => ({}), | |||
}, | |||
printMsg2: { | |||
type: Object, | |||
default: () => ({}), | |||
}, | |||
printMsg3: { | |||
type: Object, | |||
default: () => ({}), | |||
}, | |||
}, | |||
data() { | |||
return { | |||
chooseMsg: 1, | |||
customerList: [], | |||
}; | |||
}, | |||
mounted() { | |||
this.getCList(); | |||
}, | |||
methods: { | |||
getCList() { | |||
getCustomerList().then((res) => { | |||
console.log(res); | |||
console.log('customer'); | |||
this.customerList = res.data; | |||
}); | |||
}, | |||
changeChoose(val) { | |||
this.$emit('changeChoose', val); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.other-msg-box { | |||
.el-radio { | |||
display: block; | |||
line-height: 36px; | |||
.demo-form-inline { | |||
width: 100%; | |||
white-space: normal; | |||
} | |||
.el-form-item { | |||
margin-bottom: 0px; | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,182 @@ | |||
<template> | |||
<div class="show-box"> | |||
<!-- 搜索工作栏 --> | |||
<search-bar | |||
:formConfigs="formConfig" | |||
ref="searchBarForm" | |||
@headBtnClick="buttonClick2" /> | |||
<!-- 列表 --> | |||
<base-table | |||
:page="queryParams2.pageNo" | |||
:limit="queryParams2.pageSize" | |||
:table-props="tableProps" | |||
:table-data="list2"> | |||
<method-btn | |||
v-if="tableBtn2.length" | |||
slot="handleBtn" | |||
:width="240" | |||
label="操作" | |||
:method-list="tableBtn2" | |||
@clickBtn="handleClick2" /> | |||
</base-table> | |||
<pagination | |||
:page.sync="queryParams2.pageNo" | |||
:limit.sync="queryParams2.pageSize" | |||
:total="total2" | |||
@pagination="getList2" /> | |||
</div> | |||
</template> | |||
<script> | |||
import { parseTime } from '@/utils/ruoyi'; | |||
import { getPackingPage } from '@/api/base/packingInfo'; | |||
import { getCorePLList } from '@/api/base/coreProductionLine'; | |||
const tableProps = [ | |||
{ | |||
prop: 'packagingCode', | |||
label: '成品周转编号', | |||
minWidth: 180, | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'lineId', | |||
label: '产线', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'specifications', | |||
label: '规格', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'check', | |||
label: '判定', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'workStation', | |||
label: '工位号', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'num', | |||
label: '片数', | |||
}, | |||
{ | |||
prop: 'remark', | |||
label: '备注1', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'printStatus', | |||
label: '打印状态', | |||
filter: (val) => (val == 1 ? '未打印' : '已打印'), | |||
}, | |||
{ | |||
prop: 'createTime', | |||
label: '时间', | |||
filter: parseTime, | |||
minWidth: 160, | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'groupClass', | |||
label: '班次', | |||
showOverflowtooltip: true, | |||
}, | |||
]; | |||
export default { | |||
name: 'Printed', | |||
data() { | |||
return { | |||
formConfig: [ | |||
{ | |||
type: 'select', | |||
label: '产线', | |||
selectOptions: [], | |||
param: 'lineId', | |||
filterable: true, | |||
}, | |||
{ | |||
type: 'datePicker', | |||
label: '时间段', | |||
dateType: 'daterange', | |||
format: 'yyyy-MM-dd HH:mm:ss', | |||
valueFormat: 'yyyy-MM-dd HH:mm:ss', | |||
rangeSeparator: '-', | |||
startPlaceholder: '开始时间', | |||
endPlaceholder: '结束时间', | |||
param: 'timeVal', | |||
defaultSelect: [], | |||
width: 350, | |||
}, | |||
{ | |||
type: 'button', | |||
btnName: '查询', | |||
name: 'search', | |||
color: 'primary', | |||
}, | |||
], | |||
// 查询参数 | |||
queryParams2: { | |||
pageNo: 1, | |||
pageSize: 20, | |||
printStatus: '2', | |||
lineId: '', | |||
createTime: [], | |||
}, | |||
total2: 0, | |||
tableProps, | |||
list2: [], | |||
tableBtn2: [ | |||
this.$auth.hasPermi('base:order-group:update') | |||
? { | |||
type: 'reprint', | |||
btnName: '重打', | |||
} | |||
: undefined, | |||
this.$auth.hasPermi('base:order-group:query') | |||
? { | |||
type: 'detail', | |||
btnName: '详情', | |||
} | |||
: undefined, | |||
this.$auth.hasPermiAnd([ | |||
'base:order-group:update', | |||
'base:core-product:query', | |||
'base:core-customer:query', | |||
]) | |||
? { | |||
type: 'edit', | |||
btnName: '编辑', | |||
} | |||
: undefined, | |||
].filter((v) => v), | |||
}; | |||
}, | |||
mounted() { | |||
this.getLineList(); | |||
}, | |||
methods: { | |||
getLineList() { | |||
getCorePLList().then((res) => { | |||
console.log(res); | |||
this.formConfig[0].selectOptions = res.data; | |||
}); | |||
}, | |||
getList2() { | |||
getPackingPage({ ...this.queryParams2 }).then((res) => { | |||
console.log(res); | |||
this.list2 = res.data.records || []; | |||
this.total2 = res.data.total; | |||
}); | |||
}, | |||
buttonClick2(val) { | |||
console.log(val); | |||
this.queryParams2.lineId = val.lineId; | |||
this.queryParams2.createTime = val.timeVal; | |||
this.getList2(); | |||
}, | |||
handleClick2() {}, | |||
}, | |||
}; | |||
</script> |
@@ -0,0 +1,332 @@ | |||
<template> | |||
<div class="show-box"> | |||
<!-- 单选 --> | |||
<other-msg | |||
:printMsg1="printMsg1" | |||
:printMsg2="printMsg2" | |||
:printMsg3="printMsg3" | |||
@changeChoose="changeChoose" /> | |||
<!-- 搜索工作栏 --> | |||
<search-bar | |||
:formConfigs="formConfig" | |||
ref="searchBarForm" | |||
@headBtnClick="buttonClick" /> | |||
<!-- 列表 --> | |||
<base-table | |||
:page="queryParams.pageNo" | |||
:limit="queryParams.pageSize" | |||
:table-props="tableProps" | |||
:table-data="list" | |||
@emitFun="inputChange"> | |||
<method-btn | |||
v-if="tableBtn.length" | |||
slot="handleBtn" | |||
:width="260" | |||
label="操作" | |||
:method-list="tableBtn" | |||
@clickBtn="handleClick" /> | |||
</base-table> | |||
<pagination | |||
:page.sync="queryParams.pageNo" | |||
:limit.sync="queryParams.pageSize" | |||
:total="total" | |||
@pagination="getList" /> | |||
<!-- 预览 --> | |||
<print-preview ref="preView" /> | |||
</div> | |||
</template> | |||
<script> | |||
import { parseTime } from '@/utils/ruoyi'; | |||
import inputArea from './InputArea.vue'; | |||
const tableProps = [ | |||
{ | |||
prop: 'packagingCode', | |||
label: '成品周转编号', | |||
minWidth: 160, | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'lineId', | |||
label: '产线', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'specifications', | |||
label: '规格', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'check', | |||
label: '判定', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'workStation', | |||
label: '工位号', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'num', | |||
label: '片数', | |||
subcomponent: inputArea, | |||
minWidth: 120, | |||
}, | |||
{ | |||
prop: 'remark', | |||
label: '备注1', | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'printStatus', | |||
label: '打印状态', | |||
filter: (val) => (val == 1 ? '未打印' : '已打印'), | |||
}, | |||
{ | |||
prop: 'createTime', | |||
label: '时间', | |||
filter: parseTime, | |||
minWidth: 160, | |||
showOverflowtooltip: true, | |||
}, | |||
{ | |||
prop: 'groupClass', | |||
label: '班次', | |||
showOverflowtooltip: true, | |||
}, | |||
]; | |||
import OtherMsg from './OtherMsg'; | |||
import { getPackingPage, updatePacking } from '@/api/base/packingInfo'; | |||
import { getCorePLList } from '@/api/base/coreProductionLine'; | |||
import printPreview from './preview'; | |||
import printTemplate from '../print-template'; | |||
export default { | |||
name: 'UnPrint', | |||
components: { OtherMsg, printPreview }, | |||
data() { | |||
return { | |||
printMsg1: { | |||
customerId: '', | |||
sealWorker: '', | |||
packWorker: '', | |||
processCard: '', | |||
pallet: '', | |||
remark: '', | |||
}, | |||
printMsg2: { | |||
customerId: '', | |||
sealWorker: '', | |||
packWorker: '', | |||
processCard: '', | |||
pallet: '', | |||
remark: '', | |||
}, | |||
printMsg3: { | |||
customerId: '', | |||
sealWorker: '', | |||
packWorker: '', | |||
processCard: '', | |||
pallet: '', | |||
remark: '', | |||
}, | |||
chooseMsg: 1, //单选 | |||
formConfig: [ | |||
{ | |||
type: 'select', | |||
label: '产线', | |||
selectOptions: [], | |||
param: 'lineId', | |||
filterable: true, | |||
}, | |||
{ | |||
type: 'datePicker', | |||
label: '时间段', | |||
dateType: 'daterange', | |||
format: 'yyyy-MM-dd HH:mm:ss', | |||
valueFormat: 'yyyy-MM-dd HH:mm:ss', | |||
rangeSeparator: '-', | |||
startPlaceholder: '开始时间', | |||
endPlaceholder: '结束时间', | |||
param: 'timeVal', | |||
defaultSelect: [], | |||
width: 350, | |||
}, | |||
{ | |||
type: 'button', | |||
btnName: '查询', | |||
name: 'search', | |||
color: 'primary', | |||
}, | |||
], | |||
// 查询参数 | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 20, | |||
printStatus: '1', | |||
lineId: '', | |||
createTime: [], | |||
}, | |||
total: 0, | |||
tableProps, | |||
list: [], | |||
tableBtn: [ | |||
this.$auth.hasPermiAnd([ | |||
'base:order:query', | |||
'base:order-con-group-order:create', | |||
]) | |||
? { | |||
type: 'view', | |||
btnName: '预览', | |||
} | |||
: undefined, | |||
this.$auth.hasPermi('base:order-group:update') | |||
? { | |||
type: 'print', | |||
btnName: '打印', | |||
} | |||
: undefined, | |||
this.$auth.hasPermi('base:order-group:update') | |||
? { | |||
type: 'printed', | |||
btnName: '已打印', | |||
} | |||
: undefined, | |||
this.$auth.hasPermiAnd([ | |||
'base:order-group:update', | |||
'base:core-product:query', | |||
'base:core-customer:query', | |||
]) | |||
? { | |||
type: 'edit', | |||
btnName: '编辑', | |||
showParam: { | |||
type: '&', | |||
data: [ | |||
{ | |||
type: 'unequal', | |||
name: 'isEdit', | |||
value: true, | |||
}, | |||
], | |||
}, | |||
} | |||
: undefined, | |||
this.$auth.hasPermiAnd([ | |||
'base:order-group:update', | |||
'base:core-product:query', | |||
'base:core-customer:query', | |||
]) | |||
? { | |||
type: 'save', | |||
btnName: '保存', | |||
showParam: { | |||
type: '&', | |||
data: [ | |||
{ | |||
type: 'equal', | |||
name: 'isEdit', | |||
value: true, | |||
}, | |||
], | |||
}, | |||
} | |||
: undefined, | |||
this.$auth.hasPermi('base:order-group:query') | |||
? { | |||
type: 'delete', | |||
btnName: '删除', | |||
} | |||
: undefined, | |||
].filter((v) => v), | |||
printData: {}, | |||
}; | |||
}, | |||
mounted() { | |||
this.getLineList(); | |||
console.log(printTemplate); | |||
console.log('================printTemplate'); | |||
}, | |||
methods: { | |||
getLineList() { | |||
getCorePLList().then((res) => { | |||
this.formConfig[0].selectOptions = res.data; | |||
}); | |||
}, | |||
getList() { | |||
getPackingPage({ ...this.queryParams }).then((res) => { | |||
this.list = res.data.records || []; | |||
this.total = res.data.total; | |||
}); | |||
}, | |||
// 单选 | |||
changeChoose(val) { | |||
this.chooseMsg = val; | |||
}, | |||
buttonClick(val) { | |||
this.queryParams.lineId = val.lineId; | |||
this.queryParams.createTime = val.timeVal; | |||
this.getList(); | |||
}, | |||
handleClick(val) { | |||
console.log(val); | |||
switch (val.type) { | |||
case 'edit': | |||
this.editNum(val.data); | |||
break; | |||
case 'save': | |||
this.saveNum(val.data); | |||
break; | |||
case 'view': | |||
this.preView(); | |||
break; | |||
case 'print': | |||
this.printTemp(); | |||
break; | |||
default: | |||
} | |||
}, | |||
// 编辑 | |||
editNum(val) { | |||
let obj = this.list[val._pageIndex - 1]; | |||
obj.isEdit = true; | |||
this.$set(this.list, val._pageIndex - 1, obj); | |||
}, | |||
// 保存 | |||
saveNum(val) { | |||
// 调用修改接口 | |||
updatePacking({ id: val.id, num: val.num }).then(() => { | |||
this.getList(); | |||
}); | |||
}, | |||
// 输入框改变num | |||
inputChange(val) { | |||
this.list[val._pageIndex - 1][val.prop] = val[val.prop]; | |||
}, | |||
// 预览 | |||
preView() { | |||
var hiprintTemplate = new hiprint.PrintTemplate({ | |||
template: printTemplate, | |||
}); | |||
this.$refs.preView.show(hiprintTemplate); | |||
}, | |||
// 打印 | |||
printTemp() { | |||
console.log('11'); | |||
var printData = {}; | |||
let hiprintTemplate = this.$print( | |||
undefined, | |||
printTemplate, | |||
printData, | |||
{}, | |||
{ | |||
styleHandler: () => { | |||
let css = | |||
'<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">'; | |||
return css; | |||
}, | |||
} | |||
); | |||
console.log(hiprintTemplate); | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -0,0 +1,69 @@ | |||
<template> | |||
<el-form | |||
ref="unPrintEdit" | |||
:rules="rules" | |||
label-width="130px" | |||
:model="form"> | |||
<el-row :gutter="20"> | |||
<el-col :span="24"> | |||
<el-form-item | |||
label="成品周转编号" | |||
prop="packagingCode"> | |||
<el-input | |||
readonly | |||
v-model="form.packagingCode"></el-input> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="24"> | |||
<el-form-item | |||
label="片数" | |||
prop="num"> | |||
<el-input-number | |||
v-model="form.num" | |||
:min="0" | |||
:max="999999" | |||
style="width: 100%" | |||
label="片数"></el-input-number> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
</el-form> | |||
</template> | |||
<script> | |||
import { getPacking } from '@/api/base/packingInfo'; | |||
export default { | |||
name: 'UnPrintEdit', | |||
data() { | |||
return { | |||
form: { | |||
id: '', | |||
packagingCode: '', | |||
num: null, | |||
}, | |||
rules: { | |||
num: [{ required: true, message: '片数不能为空', trigger: 'blur' }], | |||
}, | |||
}; | |||
}, | |||
methods: { | |||
init(id) { | |||
console.log('init'); | |||
this.form.id = id; | |||
getPacking(id).then((res) => { | |||
console.log(res); | |||
}); | |||
}, | |||
submitForm() { | |||
this.$refs['unPrintEdit'].validate((valid) => { | |||
if (valid) { | |||
console.log('保存'); | |||
this.$emit('successSubmit'); | |||
} | |||
}); | |||
}, | |||
formClear() { | |||
this.$refs.unPrintEdit.resetFields(); | |||
}, | |||
}, | |||
}; | |||
</script> |
@@ -0,0 +1,100 @@ | |||
<template> | |||
<base-dialog | |||
dialogTitle="预览" | |||
:dialogVisible="visible" | |||
width="50%" | |||
@cancel="hideModal" | |||
:before-close="hideModal"> | |||
<!-- <div> | |||
<el-button | |||
:loading="waitShowPrinter" | |||
type="primary" | |||
icon="printer" | |||
@click.stop="print"> | |||
打印 | |||
</el-button> | |||
<el-button | |||
type="primary" | |||
icon="printer" | |||
@click.stop="toPdf"> | |||
</el-button> | |||
</div> --> | |||
<div id="preview_content" /> | |||
<template slot="footer"> | |||
<el-button | |||
key="close" | |||
@click="hideModal"> | |||
关闭 | |||
</el-button> | |||
</template> | |||
</base-dialog> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'PrintPreview', | |||
props: {}, | |||
data() { | |||
return { | |||
visible: false, | |||
spinning: true, | |||
waitShowPrinter: false, | |||
// 纸张宽 mm | |||
width: 0, | |||
// 模板 | |||
hiprintTemplate: {}, | |||
// 数据 | |||
printData: {}, | |||
}; | |||
}, | |||
computed: {}, | |||
watch: {}, | |||
created() {}, | |||
mounted() {}, | |||
methods: { | |||
hideModal() { | |||
this.visible = false; | |||
}, | |||
show(hiprintTemplate, printData, width = '210') { | |||
this.visible = true; | |||
this.spinning = true; | |||
this.width = width; | |||
this.hiprintTemplate = hiprintTemplate; | |||
this.printData = printData; | |||
console.log(hiprintTemplate); | |||
console.log(printData); | |||
setTimeout(() => { | |||
// eslint-disable-next-line no-undef | |||
$('#preview_content').html(hiprintTemplate.getHtml(printData)); | |||
this.spinning = false; | |||
}, 500); | |||
}, | |||
print() { | |||
this.waitShowPrinter = true; | |||
this.hiprintTemplate.print( | |||
this.printData, | |||
{}, | |||
{ | |||
callback: () => { | |||
console.log('callback'); | |||
this.waitShowPrinter = false; | |||
}, | |||
} | |||
); | |||
}, | |||
toPdf() { | |||
this.hiprintTemplate.toPdf({}, '打印预览'); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<!-- <style lang="less" scoped> | |||
/deep/ .ant-modal-body { | |||
padding: 0px; | |||
} | |||
/deep/ .ant-modal-content { | |||
margin-bottom: 24px; | |||
} | |||
</style> --> |
@@ -0,0 +1,47 @@ | |||
<template> | |||
<div class="packagingPrintLog-box"> | |||
<div style="width: 100%"> | |||
<ButtonNav | |||
:menus="['未打印', '已打印']" | |||
:button-mode="true" | |||
@change="currentMenu"></ButtonNav> | |||
</div> | |||
<!-- 未打印 --> | |||
<UnPrint v-if="activeMenu == '未打印'" /> | |||
<!-- 已打印 --> | |||
<Printed v-else /> | |||
</div> | |||
</template> | |||
<script> | |||
import ButtonNav from '@/components/ButtonNav'; | |||
import UnPrint from './components/UnPrint'; | |||
import Printed from './components/Printed'; | |||
export default { | |||
name: 'packagingPrintLog', | |||
components: { ButtonNav, UnPrint, Printed }, | |||
data() { | |||
return { | |||
activeMenu: '未打印', | |||
}; | |||
}, | |||
methods: { | |||
currentMenu(val) { | |||
console.log(val); | |||
this.activeMenu = val; | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.packagingPrintLog-box { | |||
min-height: calc(100vh - 120px - 8px); | |||
background-color: #f2f4f9; | |||
.show-box { | |||
min-height: calc(100vh - 128px - 52px); | |||
margin-top: 8px; | |||
padding: 16px; | |||
border-radius: 8px; | |||
background-color: #fff; | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,554 @@ | |||
export default { | |||
panels: [ | |||
{ | |||
index: 0, | |||
name: 1, | |||
height: 125, | |||
width: 95, | |||
paperHeader: 0, | |||
paperFooter: 354.33070866141736, | |||
printElements: [ | |||
{ | |||
options: { | |||
left: 5, | |||
top: 5, | |||
height: 30, | |||
width: 256.5, | |||
right: 262.2421875, | |||
bottom: 34.9921875, | |||
vCenter: 133.9921875, | |||
hCenter: 19.9921875, | |||
coordinateSync: false, | |||
widthHeightSync: false, | |||
borderColor: 'green', | |||
backgroundColor: 'green', | |||
}, | |||
printElementType: { title: '矩形', type: 'rect' }, | |||
}, | |||
{ | |||
options: { | |||
left: 35, | |||
top: 15, | |||
height: 20, | |||
width: 195, | |||
title: '厂内镀膜/钢化片周转标签', | |||
coordinateSync: false, | |||
widthHeightSync: false, | |||
fontSize: 16.5, | |||
color: '#ffffff', | |||
qrCodeLevel: 0, | |||
right: 232.9921875, | |||
bottom: 35.24609375, | |||
vCenter: 135.4921875, | |||
hCenter: 25.24609375, | |||
}, | |||
printElementType: { title: '文本', type: 'text' }, | |||
}, | |||
{ | |||
options: { left: 50, top: 35, height: 52.5, width: 9 }, | |||
printElementType: { title: '竖线', type: 'vline' }, | |||
}, | |||
{ | |||
options: { | |||
left: 5, | |||
top: 35, | |||
height: 309, | |||
width: 256.5, | |||
right: 261.4921875, | |||
bottom: 343.9921875, | |||
vCenter: 133.2421875, | |||
hCenter: 189.4921875, | |||
}, | |||
printElementType: { title: '矩形', type: 'rect' }, | |||
}, | |||
{ | |||
options: { | |||
left: 10, | |||
top: 42.5, | |||
height: 18, | |||
width: 36, | |||
title: '线别', | |||
coordinateSync: false, | |||
widthHeightSync: false, | |||
fontSize: 12, | |||
qrCodeLevel: 0, | |||
right: 45.99609375, | |||
bottom: 60.4921875, | |||
vCenter: 27.99609375, | |||
hCenter: 51.4921875, | |||
}, | |||
printElementType: { title: '文本', type: 'text' }, | |||
}, | |||
{ | |||
options: { | |||
left: 55, | |||
top: 42.5, | |||
height: 18, | |||
width: 200, | |||
title: '判定:良品/保留/再检', | |||
coordinateSync: false, | |||
widthHeightSync: false, | |||
fontSize: 12, | |||
qrCodeLevel: 0, | |||
right: 93.4921875, | |||
bottom: 59.25, | |||
vCenter: 75.4921875, | |||
hCenter: 50.25, | |||
}, | |||
printElementType: { title: '文本', type: 'text' }, | |||
}, | |||
{ | |||
options: { | |||
left: 5, | |||
top: 62.5, | |||
height: 9, | |||
width: 256.5, | |||
right: 259.9921875, | |||
bottom: 72.4921875, | |||
vCenter: 132.4921875, | |||
hCenter: 67.9921875, | |||
}, | |||
printElementType: { title: '横线', type: 'hline' }, | |||
}, | |||
{ | |||
options: { | |||
left: 55, | |||
top: 70, | |||
height: 18, | |||
width: 46, | |||
title: '备注:', | |||
coordinateSync: false, | |||
widthHeightSync: false, | |||
fontSize: 12, | |||
qrCodeLevel: 0, | |||
right: 91.2421875, | |||
bottom: 86.25, | |||
vCenter: 73.2421875, | |||
hCenter: 77.25, | |||
}, | |||
printElementType: { title: '文本', type: 'text' }, | |||
}, | |||
{ | |||
options: { | |||
left: 190, | |||
top: 87.5, | |||
height: 169.5, | |||
width: 9, | |||
right: 199.74609375, | |||
bottom: 255.75, | |||
vCenter: 195.24609375, | |||
hCenter: 171, | |||
}, | |||
printElementType: { title: '竖线', type: 'vline' }, | |||
}, | |||
{ | |||
options: { | |||
left: 5, | |||
top: 87.5, | |||
height: 9, | |||
width: 256.5, | |||
right: 260.7421875, | |||
bottom: 96.75, | |||
vCenter: 132.4921875, | |||
hCenter: 92.25, | |||
}, | |||
printElementType: { title: '横线', type: 'hline' }, | |||
}, | |||
{ | |||
options: { | |||
left: 77.5, | |||
top: 90, | |||
height: 15, | |||
width: 36, | |||
title: '规格', | |||
coordinateSync: false, | |||
widthHeightSync: false, | |||
fontSize: 12, | |||
qrCodeLevel: 0, | |||
right: 113.49609375, | |||
bottom: 105.4921875, | |||
vCenter: 95.49609375, | |||
hCenter: 97.9921875, | |||
}, | |||
printElementType: { title: '文本', type: 'text' }, | |||
}, | |||
{ | |||
options: { | |||
left: 207.5, | |||
top: 100, | |||
height: 18, | |||
width: 36, | |||
title: '用户', | |||
coordinateSync: false, | |||
widthHeightSync: false, | |||
fontSize: 12, | |||
qrCodeLevel: 0, | |||
right: 242.7421875, | |||
bottom: 116.25, | |||
vCenter: 224.7421875, | |||
hCenter: 107.25, | |||
}, | |||
printElementType: { title: '文本', type: 'text' }, | |||
}, | |||
{ | |||
options: { | |||
left: 25, | |||
top: 102.5, | |||
height: 15, | |||
width: 156, | |||
title: '长*宽*厚度(单位:mm)', | |||
coordinateSync: false, | |||
widthHeightSync: false, | |||
fontSize: 12, | |||
qrCodeLevel: 0, | |||
right: 179.25, | |||
bottom: 117.4921875, | |||
vCenter: 101.25, | |||
hCenter: 109.9921875, | |||
}, | |||
printElementType: { title: '文本', type: 'text' }, | |||
}, | |||
{ | |||
options: { | |||
left: 5, | |||
top: 117.5, | |||
height: 9, | |||
width: 256.5, | |||
right: 263.7421875, | |||
bottom: 125.7421875, | |||
vCenter: 135.4921875, | |||
hCenter: 121.2421875, | |||
}, | |||
printElementType: { title: '横线', type: 'hline' }, | |||
}, | |||
{ | |||
options: { | |||
left: 130, | |||
top: 145, | |||
height: 55.5, | |||
width: 9, | |||
right: 138.99609375, | |||
bottom: 199.5, | |||
vCenter: 134.49609375, | |||
hCenter: 171.75, | |||
}, | |||
printElementType: { title: '竖线', type: 'vline' }, | |||
}, | |||
{ | |||
options: { | |||
left: 5, | |||
top: 145, | |||
height: 9, | |||
width: 256.5, | |||
right: 260.25, | |||
bottom: 154.2421875, | |||
vCenter: 132, | |||
hCenter: 149.7421875, | |||
}, | |||
printElementType: { title: '横线', type: 'hline' }, | |||
}, | |||
{ | |||
options: { | |||
left: 45, | |||
top: 155, | |||
height: 18, | |||
width: 36, | |||
title: '编号', | |||
coordinateSync: false, | |||
widthHeightSync: false, | |||
fontSize: 12, | |||
qrCodeLevel: 0, | |||
right: 82.2421875, | |||
bottom: 171.75, | |||
vCenter: 64.2421875, | |||
hCenter: 162.75, | |||
}, | |||
printElementType: { title: '文本', type: 'text' }, | |||
}, | |||
{ | |||
options: { | |||
left: 135, | |||
top: 155, | |||
height: 18, | |||
width: 49.5, | |||
title: '工位号', | |||
coordinateSync: false, | |||
widthHeightSync: false, | |||
fontSize: 12, | |||
qrCodeLevel: 0, | |||
right: 186, | |||
bottom: 172.9921875, | |||
vCenter: 161.25, | |||
hCenter: 163.9921875, | |||
}, | |||
printElementType: { title: '文本', type: 'text' }, | |||
}, | |||
{ | |||
options: { | |||
left: 197.5, | |||
top: 155, | |||
height: 18, | |||
width: 60, | |||
title: '流程卡号', | |||
coordinateSync: false, | |||
widthHeightSync: false, | |||
fontSize: 12, | |||
qrCodeLevel: 0, | |||
right: 256.74609375, | |||
bottom: 143.7421875, | |||
vCenter: 226.74609375, | |||
hCenter: 134.7421875, | |||
}, | |||
printElementType: { title: '文本', type: 'text' }, | |||
}, | |||
{ | |||
options: { | |||
left: 5, | |||
top: 175, | |||
height: 9, | |||
width: 256.5, | |||
right: 259.2421875, | |||
bottom: 183.75, | |||
vCenter: 130.9921875, | |||
hCenter: 179.25, | |||
}, | |||
printElementType: { title: '横线', type: 'hline' }, | |||
}, | |||
{ | |||
options: { | |||
left: 50, | |||
top: 200, | |||
height: 58.5, | |||
width: 9, | |||
right: 58.9921875, | |||
bottom: 259.5, | |||
vCenter: 54.4921875, | |||
hCenter: 230.25, | |||
}, | |||
printElementType: { title: '竖线', type: 'vline' }, | |||
}, | |||
{ | |||
options: { | |||
left: 110, | |||
top: 200, | |||
height: 58.5, | |||
width: 9, | |||
right: 117.75, | |||
bottom: 256.9921875, | |||
vCenter: 113.25, | |||
hCenter: 227.7421875, | |||
}, | |||
printElementType: { title: '竖线', type: 'vline' }, | |||
}, | |||
{ | |||
options: { | |||
left: 5, | |||
top: 200, | |||
height: 9, | |||
width: 256.5, | |||
right: 262.9921875, | |||
bottom: 210.24609375, | |||
vCenter: 134.7421875, | |||
hCenter: 205.74609375, | |||
}, | |||
printElementType: { title: '横线', type: 'hline' }, | |||
}, | |||
{ | |||
options: { | |||
left: 10, | |||
top: 210, | |||
height: 18, | |||
width: 36, | |||
title: '日期', | |||
coordinateSync: false, | |||
widthHeightSync: false, | |||
fontSize: 12, | |||
qrCodeLevel: 0, | |||
right: 45.99609375, | |||
bottom: 228, | |||
vCenter: 27.99609375, | |||
hCenter: 219, | |||
}, | |||
printElementType: { title: '文本', type: 'text' }, | |||
}, | |||
{ | |||
options: { | |||
left: 67.5, | |||
top: 210, | |||
height: 18, | |||
width: 36, | |||
title: '班次', | |||
coordinateSync: false, | |||
widthHeightSync: false, | |||
fontSize: 12, | |||
qrCodeLevel: 0, | |||
right: 103.5, | |||
bottom: 228, | |||
vCenter: 85.5, | |||
hCenter: 219, | |||
}, | |||
printElementType: { title: '文本', type: 'text' }, | |||
}, | |||
{ | |||
options: { | |||
left: 207.5, | |||
top: 210, | |||
height: 18, | |||
width: 36, | |||
title: '片数', | |||
coordinateSync: false, | |||
widthHeightSync: false, | |||
fontSize: 12, | |||
qrCodeLevel: 0, | |||
right: 243.4921875, | |||
bottom: 228, | |||
vCenter: 225.4921875, | |||
hCenter: 219, | |||
}, | |||
printElementType: { title: '文本', type: 'text' }, | |||
}, | |||
{ | |||
options: { | |||
left: 5, | |||
top: 230, | |||
height: 9, | |||
width: 256.5, | |||
right: 261.4921875, | |||
bottom: 239.25, | |||
vCenter: 133.2421875, | |||
hCenter: 234.75, | |||
}, | |||
printElementType: { title: '横线', type: 'hline' }, | |||
}, | |||
{ | |||
options: { | |||
left: 5, | |||
top: 257.5, | |||
height: 9, | |||
width: 256.5, | |||
right: 261.4921875, | |||
bottom: 266.49609375, | |||
vCenter: 133.2421875, | |||
hCenter: 261.99609375, | |||
}, | |||
printElementType: { title: '横线', type: 'hline' }, | |||
}, | |||
{ | |||
options: { | |||
left: 10, | |||
top: 262.5, | |||
height: 18, | |||
width: 87, | |||
title: '封箱人员工号:', | |||
coordinateSync: false, | |||
widthHeightSync: false, | |||
fontSize: 12, | |||
qrCodeLevel: 0, | |||
right: 46.9921875, | |||
bottom: 279.24609375, | |||
vCenter: 28.9921875, | |||
hCenter: 270.24609375, | |||
}, | |||
printElementType: { title: '文本', type: 'text' }, | |||
}, | |||
{ | |||
options: { | |||
left: 5, | |||
top: 280, | |||
height: 9, | |||
width: 256.5, | |||
right: 262.2421875, | |||
bottom: 289.2421875, | |||
vCenter: 133.9921875, | |||
hCenter: 284.7421875, | |||
}, | |||
printElementType: { title: '横线', type: 'hline' }, | |||
}, | |||
{ | |||
options: { | |||
left: 10, | |||
top: 285, | |||
height: 18, | |||
width: 87, | |||
title: '打包人员工号:', | |||
coordinateSync: false, | |||
widthHeightSync: false, | |||
fontSize: 12, | |||
qrCodeLevel: 0, | |||
right: 96.4921875, | |||
bottom: 301.74609375, | |||
vCenter: 52.9921875, | |||
hCenter: 292.74609375, | |||
}, | |||
printElementType: { title: '文本', type: 'text' }, | |||
}, | |||
{ | |||
options: { | |||
left: 5, | |||
top: 300, | |||
height: 9, | |||
width: 256.5, | |||
right: 264.4921875, | |||
bottom: 308.49609375, | |||
vCenter: 136.2421875, | |||
hCenter: 303.99609375, | |||
}, | |||
printElementType: { title: '横线', type: 'hline' }, | |||
}, | |||
{ | |||
options: { | |||
left: 10, | |||
top: 305, | |||
height: 18, | |||
width: 247.5, | |||
title: '备注1:单层镀/双层镀/丝印打孔/打孔钢片', | |||
coordinateSync: false, | |||
widthHeightSync: false, | |||
fontSize: 12, | |||
qrCodeLevel: 0, | |||
right: 96.99609375, | |||
bottom: 322.9921875, | |||
vCenter: 53.49609375, | |||
hCenter: 313.9921875, | |||
}, | |||
printElementType: { title: '文本', type: 'text' }, | |||
}, | |||
{ | |||
options: { | |||
left: 5, | |||
top: 322.5, | |||
height: 9, | |||
width: 256.5, | |||
right: 262.2421875, | |||
bottom: 332.7421875, | |||
vCenter: 133.9921875, | |||
hCenter: 328.2421875, | |||
}, | |||
printElementType: { title: '横线', type: 'hline' }, | |||
}, | |||
{ | |||
options: { | |||
left: 10, | |||
top: 327.5, | |||
height: 18, | |||
width: 87, | |||
title: '备注2:', | |||
coordinateSync: false, | |||
widthHeightSync: false, | |||
fontSize: 12, | |||
qrCodeLevel: 0, | |||
right: 97.9921875, | |||
bottom: 343.74609375, | |||
vCenter: 54.4921875, | |||
hCenter: 334.74609375, | |||
}, | |||
printElementType: { title: '文本', type: 'text' }, | |||
}, | |||
], | |||
paperNumberLeft: 372.5, | |||
paperNumberTop: 337.5, | |||
paperNumberContinue: true, | |||
watermarkOptions: {}, | |||
}, | |||
] | |||
} |
@@ -6,138 +6,130 @@ | |||
* @Description: | |||
--> | |||
<template> | |||
<el-dialog class="baseDialog" :visible.sync="visible" :show-close="false" :wrapper-closable="false" width="30%" show-close="true"> | |||
<small-title slot="title" :no-padding="true"> | |||
{{ !dataForm.id ? '新增' : '编辑' }} | |||
</small-title> | |||
<el-dialog | |||
class="baseDialog" | |||
:visible.sync="visible" | |||
:show-close="true" | |||
:wrapper-closable="false" | |||
width="50%"> | |||
<small-title | |||
slot="title" | |||
:no-padding="true"> | |||
{{ !dataForm.id ? '新增' : '编辑' }} | |||
</small-title> | |||
<div class="content"> | |||
<div class="visual-part"> | |||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" | |||
@keyup.enter.native="dataFormSubmit"> | |||
<el-row :gutter="20"> | |||
<el-col :span="12"> | |||
<el-form-item label="模板名称" prop="name"> | |||
<el-input v-model="dataForm.name" clearable placeholder="请输入模板名称" /> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="标签类型" prop="typeId"> | |||
<el-select v-model="dataForm.typeId" style="width: 100%;" placeholder="请选择标签类型" clearable> | |||
<el-option v-for="dict in typeList" :key="dict.id" :label="dict.name" :value="dict.id" /> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row :gutter="20"> | |||
<el-col :span="12"> | |||
<el-form-item label="打印方式" prop="printModel"> | |||
<el-select v-model="dataForm.printModel" style="width: 100%;" placeholder="请选择打印方式" clearable> | |||
<el-option v-for="dict in printModelList" :key="dict.id" :label="dict.name" :value="dict.id" /> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="标签备注" prop="remark"> | |||
<el-input v-model="dataForm.remark" clearable placeholder="请输入标签备注" /> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row :gutter="20"> | |||
<el-col :span="12"> | |||
<el-form-item label="模板设计" prop="content"> | |||
<el-button icon="el-icon-edit" @click="btnClickDesign()">模板设计</el-button> | |||
</el-form-item> | |||
</el-col> | |||
<!-- <el-col :span="12"> | |||
<el-form-item label="单位平方数" prop="area"> | |||
<el-input v-model="dataForm.area" placeholder="请输入单位平方数" /> | |||
</el-form-item> | |||
</el-col> --> | |||
</el-row> | |||
<!-- <el-row :gutter="20"> | |||
<el-col :span="24"> | |||
<el-form-item label="完成单位产品用时" prop="processTime"> | |||
<el-input v-model="dataForm.processTime" placeholder="请输入完成单位产品用时" /> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> --> | |||
</el-form> | |||
<!-- <small-title | |||
style="margin: 16px 0; padding-left: 8px" | |||
:no-padding="true"> | |||
产品属性列表 | |||
</small-title> | |||
<div class="attr-list"> | |||
<base-table | |||
:table-props="tableProps" | |||
:page="listQuery.pageNo" | |||
:limit="listQuery.pageSize" | |||
:add-button-show="isdetail ? null : '添加属性'" | |||
@emitButtonClick="addNew()" | |||
:table-data="productAttributeList"> | |||
<method-btn | |||
v-if="!isdetail" | |||
slot="handleBtn" | |||
:width="120" | |||
label="操作" | |||
:method-list="tableBtn" | |||
@clickBtn="handleClick" /> | |||
</base-table> | |||
<pagination | |||
v-show="listQuery.total > 0" | |||
:total="listQuery.total" | |||
:page.sync="listQuery.pageNo" | |||
:limit.sync="listQuery.pageSize" | |||
:page-sizes="[5, 10, 15]" | |||
@pagination="getList" /> | |||
</div> --> | |||
</div> | |||
</div> | |||
<!-- <div style="position: absolute; bottom: 24px; right: 24px"> | |||
<el-button style="margin-right: 10px" @click="goback()">返回</el-button> | |||
<el-button v-if="isdetail" type="primary" @click="goEdit()"> | |||
编辑 | |||
<div class="content"> | |||
<div class="visual-part"> | |||
<el-form | |||
ref="dataForm" | |||
:model="dataForm" | |||
:rules="dataRule" | |||
label-width="100px" | |||
@keyup.enter.native="dataFormSubmit"> | |||
<el-row :gutter="20"> | |||
<el-col :span="24"> | |||
<el-form-item | |||
label="模板名称" | |||
prop="name"> | |||
<el-input | |||
v-model="dataForm.name" | |||
clearable | |||
placeholder="请输入模板名称" /> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="24"> | |||
<el-form-item | |||
label="标签类型" | |||
prop="typeId"> | |||
<el-select | |||
v-model="dataForm.typeId" | |||
style="width: 100%" | |||
placeholder="请选择标签类型" | |||
clearable> | |||
<el-option | |||
v-for="dict in typeList" | |||
:key="dict.id" | |||
:label="dict.name" | |||
:value="dict.id" /> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row :gutter="20"> | |||
<el-col :span="24"> | |||
<el-form-item | |||
label="打印方式" | |||
prop="printModel"> | |||
<el-select | |||
v-model="dataForm.printModel" | |||
style="width: 100%" | |||
placeholder="请选择打印方式" | |||
clearable> | |||
<el-option | |||
v-for="dict in printModelList" | |||
:key="dict.id" | |||
:label="dict.name" | |||
:value="dict.id" /> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="24"> | |||
<el-form-item | |||
label="标签备注" | |||
prop="remark"> | |||
<el-input | |||
v-model="dataForm.remark" | |||
clearable | |||
placeholder="请输入标签备注" /> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<el-row :gutter="20"> | |||
<el-col :span="24"> | |||
<el-form-item | |||
label="模板设计" | |||
prop="content"> | |||
<el-button | |||
icon="el-icon-edit" | |||
@click="btnClickDesign()"> | |||
模板设计 | |||
</el-button> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
</el-form> | |||
</div> | |||
</div> | |||
<template slot="footer"> | |||
<el-button | |||
style="" | |||
@click="goback()"> | |||
取消 | |||
</el-button> | |||
<span v-if="!isdetail"> | |||
<el-button type="primary" @click="dataFormSubmit()">保存</el-button> | |||
<el-button | |||
v-if="dataForm.id && !isdetail" | |||
type="primary" | |||
@click="addNew()"> | |||
添加属性 | |||
</el-button> | |||
</span> | |||
</div> --> | |||
<template slot="footer"> | |||
<el-button style="" @click="goback()">取消</el-button> | |||
<!-- <el-button v-if="isdetail" type="primary" @click="goEdit()"> | |||
编辑 | |||
</el-button> --> | |||
<el-button type="primary" @click="dataFormSubmit()">确定</el-button> | |||
</template> | |||
<print-model-design v-if="modelShow" ref="printModelDesign" @saveData="getModelData" /> | |||
</el-dialog> | |||
<el-button | |||
type="primary" | |||
@click="dataFormSubmit()"> | |||
确定 | |||
</el-button> | |||
</template> | |||
<print-model-design | |||
v-if="modelShow" | |||
ref="printModelDesign" | |||
@saveData="getModelData" /> | |||
</el-dialog> | |||
</template> | |||
<script> | |||
import { | |||
createPackingModel, | |||
updatePackingModel, | |||
getPackingModel, | |||
// getWorkOrderList, | |||
// getCode, | |||
// getCustomerList, | |||
getTypeList | |||
createPackingModel, | |||
updatePackingModel, | |||
getPackingModel, | |||
getTypeList, | |||
} from '@/api/base/printModel.js'; | |||
// import productAttrAdd from './attr-add'; | |||
import { parseTime } from '../mixins/code-filter'; | |||
import SmallTitle from './SmallTitle'; | |||
import printModelDesign from '../custom/index' | |||
import printModelDesign from '../custom/index'; | |||
const tableBtn = [ | |||
{ | |||
@@ -166,42 +158,42 @@ const tableProps = [ | |||
]; | |||
export default { | |||
components: { SmallTitle, printModelDesign }, | |||
components: { SmallTitle, printModelDesign }, | |||
data() { | |||
return { | |||
visible: false, | |||
addOrUpdateVisible: false, | |||
tableBtn, | |||
tableProps, | |||
modelShow:false, | |||
typeList:[], | |||
tableProps, | |||
modelShow: false, | |||
typeList: [], | |||
dataForm: { | |||
id: null, | |||
// name: '', // 产品名称 | |||
name: '', // 产品编码 | |||
name: '', // 产品编码 | |||
// area: 0, // 单位平方数(float only) | |||
typeId: null, // 产品类型id | |||
printModel: null, // 单位产品用时 (s) | |||
content: '', // 规格 | |||
remark: '', // 单位id | |||
}, | |||
printModelList: [ | |||
{ | |||
id: 1, | |||
name:'自动' | |||
}, | |||
{ | |||
id: 2, | |||
name: '手动' | |||
}, | |||
], | |||
typeId: null, // 产品类型id | |||
printModel: null, // 单位产品用时 (s) | |||
content: '', // 规格 | |||
remark: '', // 单位id | |||
}, | |||
printModelList: [ | |||
{ | |||
id: 1, | |||
name: '自动', | |||
}, | |||
{ | |||
id: 2, | |||
name: '手动', | |||
}, | |||
], | |||
listQuery: { | |||
pageSize: 10, | |||
pageNo: 1, | |||
total: 0, | |||
}, | |||
dataRule: { | |||
typeId: [ | |||
typeId: [ | |||
{ | |||
required: true, | |||
message: '打印类型不能为空', | |||
@@ -221,7 +213,7 @@ export default { | |||
trigger: 'blur', | |||
}, | |||
], | |||
printModel: [ | |||
printModel: [ | |||
{ | |||
required: true, | |||
message: '模板类型不能为空', | |||
@@ -229,11 +221,11 @@ export default { | |||
}, | |||
], | |||
content: [ | |||
{ | |||
required: true, | |||
message: '模板不能为空', | |||
trigger: 'blur', | |||
}, | |||
{ | |||
required: true, | |||
message: '模板不能为空', | |||
trigger: 'blur', | |||
}, | |||
], | |||
processTime: [ | |||
{ | |||
@@ -251,30 +243,30 @@ export default { | |||
}, | |||
// isdetail: false, | |||
}; | |||
}, | |||
methods: { | |||
getModelData(data) { | |||
console.log(data) | |||
this.content = JSON.stringify(data) | |||
this.dataForm.content = JSON.stringify(data) | |||
}, | |||
btnClickDesign() { | |||
console.log(11111) | |||
this.modelShow = true | |||
this.$nextTick(() => { | |||
this.$refs.printModelDesign.init(this.dataForm.content) | |||
console.log(this.dataForm.content) | |||
}) | |||
// this.$router.push({ | |||
// path: '/printModelDesign' | |||
// }) | |||
}, | |||
}, | |||
methods: { | |||
getModelData(data) { | |||
console.log(data); | |||
this.content = JSON.stringify(data); | |||
this.dataForm.content = JSON.stringify(data); | |||
}, | |||
btnClickDesign() { | |||
console.log(11111); | |||
this.modelShow = true; | |||
this.$nextTick(() => { | |||
this.$refs.printModelDesign.init(this.dataForm.content); | |||
console.log(this.dataForm.content); | |||
}); | |||
// this.$router.push({ | |||
// path: '/printModelDesign' | |||
// }) | |||
}, | |||
// initData() { | |||
// this.productAttributeList.splice(0); | |||
// this.listQuery.total = 0; | |||
// }, | |||
init(id) { | |||
this.getDict() | |||
init(id) { | |||
this.getDict(); | |||
// this.initData(); | |||
// this.isdetail = isdetail || false; | |||
this.dataForm.id = id || null; | |||
@@ -284,34 +276,34 @@ export default { | |||
this.$refs['dataForm'].resetFields(); | |||
if (this.dataForm.id) { | |||
// 获取产品详情 | |||
getPackingModel(id).then((response) => { | |||
getPackingModel(id).then((response) => { | |||
this.dataForm = response.data; | |||
}); | |||
// 获取产品的属性列表 | |||
// this.getList(); | |||
} else { | |||
// getCode().then((res) => { | |||
// this.dataForm.packagingCode = res.data; | |||
// this.dataForm.packagingCode = res.data; | |||
// }); | |||
} | |||
}); | |||
}, | |||
getDict() { | |||
// 获取产品的属性列表 | |||
// getCustomerList().then((response) => { | |||
// console.log(response); | |||
// this.customerList = response.data | |||
// // this.listQuery.total = response.data.total; | |||
// }) | |||
getTypeList().then((response) => { | |||
console.log(response); | |||
this.typeList = response.data | |||
// this.listQuery.total = response.data.total; | |||
}) | |||
// getWorkOrderList().then((response) => { | |||
// // console.log(response); | |||
// this.workOrderList = response.data | |||
// 获取产品的属性列表 | |||
// getCustomerList().then((response) => { | |||
// console.log(response); | |||
// this.customerList = response.data | |||
// // this.listQuery.total = response.data.total; | |||
// }) | |||
getTypeList().then((response) => { | |||
console.log(response); | |||
this.typeList = response.data; | |||
// this.listQuery.total = response.data.total; | |||
}); | |||
// getWorkOrderList().then((response) => { | |||
// // console.log(response); | |||
// this.workOrderList = response.data | |||
// // this.listQuery.total = response.data.total; | |||
// }) | |||
}, | |||
@@ -353,7 +345,7 @@ export default { | |||
if (valid) { | |||
// 修改的提交 | |||
if (this.dataForm.id) { | |||
updatePackingModel(this.dataForm).then((response) => { | |||
updatePackingModel(this.dataForm).then((response) => { | |||
this.$modal.msgSuccess('修改成功'); | |||
this.visible = false; | |||
this.$emit('refreshDataList'); | |||
@@ -361,7 +353,7 @@ export default { | |||
return; | |||
} | |||
// 添加的提交 | |||
createPackingModel(this.dataForm).then((response) => { | |||
createPackingModel(this.dataForm).then((response) => { | |||
this.$modal.msgSuccess('新增成功'); | |||
this.visible = false; | |||
this.$emit('refreshDataList'); | |||
@@ -439,35 +431,31 @@ export default { | |||
} | |||
</style> --> | |||
<style> | |||
.baseDialog .el-dialog__header { | |||
font-size: 16px; | |||
color: rgba(0, 0, 0, 0.85); | |||
font-weight: 500; | |||
padding: 13px 24px; | |||
border-bottom: 1px solid #e9e9e9; | |||
font-size: 16px; | |||
color: rgba(0, 0, 0, 0.85); | |||
font-weight: 500; | |||
padding: 13px 24px; | |||
border-bottom: 1px solid #e9e9e9; | |||
} | |||
.baseDialog .el-dialog__header .titleStyle::before{ | |||
content: ''; | |||
display: inline-block; | |||
width: 4px; | |||
height: 16px; | |||
background-color: #0B58FF; | |||
border-radius: 1px; | |||
margin-right: 8px; | |||
position: relative; | |||
top: 2px; | |||
.baseDialog .el-dialog__header .titleStyle::before { | |||
content: ''; | |||
display: inline-block; | |||
width: 4px; | |||
height: 16px; | |||
background-color: #0b58ff; | |||
border-radius: 1px; | |||
margin-right: 8px; | |||
position: relative; | |||
top: 2px; | |||
} | |||
.baseDialog .el-dialog__body { | |||
padding-left: 24px; | |||
padding-right: 24px; | |||
padding-left: 24px; | |||
padding-right: 24px; | |||
} | |||
.baseDialog .btnTextStyle { | |||
letter-spacing:6px; | |||
padding: 9px 10px 9px 16px; | |||
font-size: 14px; | |||
letter-spacing: 6px; | |||
padding: 9px 10px 9px 16px; | |||
font-size: 14px; | |||
} | |||
</style> |
@@ -6,106 +6,72 @@ | |||
* @Description: | |||
--> | |||
<template> | |||
<el-dialog class="baseDialog" :visible.sync="visible" :show-close="false" :wrapper-closable="false" width="40%" show-close="true"> | |||
<small-title slot="title" :no-padding="true"> | |||
{{ !dataForm.id ? '新增' : '编辑' }} | |||
</small-title> | |||
<div class="content"> | |||
<div class="visual-part"> | |||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="auto" | |||
@keyup.enter.native="dataFormSubmit"> | |||
<el-row :gutter="20"> | |||
<el-col :span="12"> | |||
<el-form-item label="名称" prop="name"> | |||
<el-input v-model="dataForm.name" clearable placeholder="名称" /> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="12"> | |||
<el-form-item label="类型描述" prop="description"> | |||
<el-input v-model="dataForm.description" clearable placeholder="类型描述" /> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
<!-- <el-row :gutter="20"> | |||
<el-col :span="24"> | |||
<el-form-item label="完成单位产品用时" prop="processTime"> | |||
<el-input v-model="dataForm.processTime" placeholder="请输入完成单位产品用时" /> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> --> | |||
</el-form> | |||
<!-- <small-title | |||
style="margin: 16px 0; padding-left: 8px" | |||
:no-padding="true"> | |||
产品属性列表 | |||
</small-title> | |||
<div class="attr-list"> | |||
<base-table | |||
:table-props="tableProps" | |||
:page="listQuery.pageNo" | |||
:limit="listQuery.pageSize" | |||
:add-button-show="isdetail ? null : '添加属性'" | |||
@emitButtonClick="addNew()" | |||
:table-data="productAttributeList"> | |||
<method-btn | |||
v-if="!isdetail" | |||
slot="handleBtn" | |||
:width="120" | |||
label="操作" | |||
:method-list="tableBtn" | |||
@clickBtn="handleClick" /> | |||
</base-table> | |||
<pagination | |||
v-show="listQuery.total > 0" | |||
:total="listQuery.total" | |||
:page.sync="listQuery.pageNo" | |||
:limit.sync="listQuery.pageSize" | |||
:page-sizes="[5, 10, 15]" | |||
@pagination="getList" /> | |||
</div> --> | |||
</div> | |||
</div> | |||
<!-- <div style="position: absolute; bottom: 24px; right: 24px"> | |||
<el-button style="margin-right: 10px" @click="goback()">返回</el-button> | |||
<el-button v-if="isdetail" type="primary" @click="goEdit()"> | |||
编辑 | |||
<el-dialog | |||
class="baseDialog" | |||
:visible.sync="visible" | |||
:show-close="true" | |||
:wrapper-closable="false" | |||
width="50%"> | |||
<small-title | |||
slot="title" | |||
:no-padding="true"> | |||
{{ !dataForm.id ? '新增' : '编辑' }} | |||
</small-title> | |||
<div class="content"> | |||
<div class="visual-part"> | |||
<el-form | |||
ref="dataForm" | |||
:model="dataForm" | |||
:rules="dataRule" | |||
label-width="auto" | |||
@keyup.enter.native="dataFormSubmit"> | |||
<el-row :gutter="20"> | |||
<el-col :span="24"> | |||
<el-form-item | |||
label="名称" | |||
prop="name"> | |||
<el-input | |||
v-model="dataForm.name" | |||
clearable | |||
placeholder="名称" /> | |||
</el-form-item> | |||
</el-col> | |||
<el-col :span="24"> | |||
<el-form-item | |||
label="类型描述" | |||
prop="description"> | |||
<el-input | |||
v-model="dataForm.description" | |||
clearable | |||
placeholder="类型描述" /> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
</el-form> | |||
</div> | |||
</div> | |||
<template slot="footer"> | |||
<el-button | |||
style="" | |||
@click="goback()"> | |||
取消 | |||
</el-button> | |||
<span v-if="!isdetail"> | |||
<el-button type="primary" @click="dataFormSubmit()">保存</el-button> | |||
<el-button | |||
v-if="dataForm.id && !isdetail" | |||
type="primary" | |||
@click="addNew()"> | |||
添加属性 | |||
</el-button> | |||
</span> | |||
</div> --> | |||
<template slot="footer"> | |||
<el-button style="" @click="goback()">取消</el-button> | |||
<!-- <el-button v-if="isdetail" type="primary" @click="goEdit()"> | |||
编辑 | |||
</el-button> --> | |||
<el-button type="primary" @click="dataFormSubmit()">确定</el-button> | |||
</template> | |||
</el-dialog> | |||
<el-button | |||
type="primary" | |||
@click="dataFormSubmit()"> | |||
确定 | |||
</el-button> | |||
</template> | |||
</el-dialog> | |||
</template> | |||
<script> | |||
import { | |||
createPackingType, | |||
updatePackingType, | |||
getPackingType, | |||
// getWorkOrderList, | |||
// getCode, | |||
// getCustomerList, | |||
// getModelList | |||
createPackingType, | |||
updatePackingType, | |||
getPackingType, | |||
} from '@/api/base/modelType.js'; | |||
// import productAttrAdd from './attr-add'; | |||
import { parseTime } from '../mixins/code-filter'; | |||
import SmallTitle from './SmallTitle'; | |||
@@ -142,20 +108,15 @@ export default { | |||
visible: false, | |||
addOrUpdateVisible: false, | |||
tableBtn, | |||
tableProps, | |||
customerList: [], | |||
modelList:[], | |||
workOrderList:[], | |||
tableProps, | |||
customerList: [], | |||
modelList: [], | |||
workOrderList: [], | |||
productAttributeList: [], | |||
dataForm: { | |||
id: null, | |||
// name: '', // 产品名称 | |||
name: '', // 产品编码 | |||
// area: 0, // 单位平方数(float only) | |||
description: null, // 产品类型id | |||
// workOrderId: null, // 单位产品用时 (s) | |||
// customerId: '', // 规格 | |||
// content: '', // 单位id | |||
name: '', // 产品编码 | |||
description: null, // 产品类型id | |||
}, | |||
listQuery: { | |||
pageSize: 10, | |||
@@ -171,18 +132,10 @@ export default { | |||
}, | |||
], | |||
}, | |||
// isdetail: false, | |||
}; | |||
}, | |||
}, | |||
methods: { | |||
// initData() { | |||
// this.productAttributeList.splice(0); | |||
// this.listQuery.total = 0; | |||
// }, | |||
init(id) { | |||
// this.getDict() | |||
// this.initData(); | |||
// this.isdetail = isdetail || false; | |||
init(id) { | |||
this.dataForm.id = id || null; | |||
this.visible = true; | |||
@@ -191,76 +144,20 @@ export default { | |||
if (this.dataForm.id) { | |||
// 获取产品详情 | |||
getPackingType(id).then((response) => { | |||
getPackingType(id).then((response) => { | |||
this.dataForm = response.data; | |||
}); | |||
// 获取产品的属性列表 | |||
// this.getList(); | |||
} else { | |||
// getCode().then((res) => { | |||
// this.dataForm.packagingCode = res.data; | |||
// }); | |||
} | |||
}); | |||
}, | |||
// getDict() { | |||
// // 获取产品的属性列表 | |||
// getCustomerList().then((response) => { | |||
// console.log(response); | |||
// this.customerList = response.data | |||
// // this.listQuery.total = response.data.total; | |||
// }) | |||
// getModelList().then((response) => { | |||
// console.log(response); | |||
// this.modelList = response.data | |||
// // this.listQuery.total = response.data.total; | |||
// }) | |||
// getWorkOrderList().then((response) => { | |||
// // console.log(response); | |||
// this.workOrderList = response.data | |||
// // this.listQuery.total = response.data.total; | |||
// }) | |||
// }, | |||
// handleClick(raw) { | |||
// if (raw.type === 'delete') { | |||
// this.$confirm( | |||
// `确定对${ | |||
// raw.data.name | |||
// ? '[名称=' + raw.data.name + ']' | |||
// : '[序号=' + raw.data._pageIndex + ']' | |||
// }进行删除操作?`, | |||
// '提示', | |||
// { | |||
// confirmButtonText: '确定', | |||
// cancelButtonText: '取消', | |||
// type: 'warning', | |||
// } | |||
// ) | |||
// .then(() => { | |||
// deleteProductAttr(raw.data.id).then(({ data }) => { | |||
// this.$message({ | |||
// message: '操作成功', | |||
// type: 'success', | |||
// duration: 1500, | |||
// onClose: () => { | |||
// this.getList(); | |||
// }, | |||
// }); | |||
// }); | |||
// }) | |||
// .catch(() => {}); | |||
// } else { | |||
// this.addNew(raw.data.id); | |||
// } | |||
// }, | |||
// 表单提交 | |||
dataFormSubmit() { | |||
this.$refs['dataForm'].validate((valid) => { | |||
if (valid) { | |||
// 修改的提交 | |||
if (this.dataForm.id) { | |||
updatePackingType(this.dataForm).then((response) => { | |||
updatePackingType(this.dataForm).then((response) => { | |||
this.$modal.msgSuccess('修改成功'); | |||
this.visible = false; | |||
this.$emit('refreshDataList'); | |||
@@ -268,7 +165,7 @@ export default { | |||
return; | |||
} | |||
// 添加的提交 | |||
createPackingType(this.dataForm).then((response) => { | |||
createPackingType(this.dataForm).then((response) => { | |||
this.$modal.msgSuccess('新增成功'); | |||
this.visible = false; | |||
this.$emit('refreshDataList'); | |||
@@ -294,88 +191,32 @@ export default { | |||
}, | |||
}; | |||
</script> | |||
<!-- <style scoped> | |||
.drawer >>> .el-drawer { | |||
border-radius: 8px 0 0 8px; | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
.drawer >>> .el-form-item__label { | |||
padding: 0; | |||
} | |||
.drawer >>> .el-drawer__header { | |||
margin: 0; | |||
padding: 32px 32px 24px; | |||
border-bottom: 1px solid #dcdfe6; | |||
} | |||
.drawer >>> .el-drawer__body { | |||
flex: 1; | |||
height: 1px; | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
.drawer >>> .content { | |||
padding: 30px 24px; | |||
flex: 1; | |||
display: flex; | |||
flex-direction: column; | |||
/* height: 100%; */ | |||
} | |||
.drawer >>> .visual-part { | |||
flex: 1 auto; | |||
max-height: 76vh; | |||
overflow: hidden; | |||
overflow-y: scroll; | |||
padding-right: 10px; /* 调整滚动条样式 */ | |||
} | |||
.drawer >>> .el-form, | |||
.drawer >>> .attr-list { | |||
padding: 0 16px; | |||
} | |||
.drawer-body__footer { | |||
display: flex; | |||
justify-content: flex-end; | |||
padding: 18px; | |||
} | |||
</style> --> | |||
<style> | |||
.baseDialog .el-dialog__header { | |||
font-size: 16px; | |||
color: rgba(0, 0, 0, 0.85); | |||
font-weight: 500; | |||
padding: 13px 24px; | |||
border-bottom: 1px solid #e9e9e9; | |||
font-size: 16px; | |||
color: rgba(0, 0, 0, 0.85); | |||
font-weight: 500; | |||
padding: 13px 24px; | |||
border-bottom: 1px solid #e9e9e9; | |||
} | |||
.baseDialog .el-dialog__header .titleStyle::before{ | |||
content: ''; | |||
display: inline-block; | |||
width: 4px; | |||
height: 16px; | |||
background-color: #0B58FF; | |||
border-radius: 1px; | |||
margin-right: 8px; | |||
position: relative; | |||
top: 2px; | |||
.baseDialog .el-dialog__header .titleStyle::before { | |||
content: ''; | |||
display: inline-block; | |||
width: 4px; | |||
height: 16px; | |||
background-color: #0b58ff; | |||
border-radius: 1px; | |||
margin-right: 8px; | |||
position: relative; | |||
top: 2px; | |||
} | |||
.baseDialog .el-dialog__body { | |||
padding-left: 24px; | |||
padding-right: 24px; | |||
padding-left: 24px; | |||
padding-right: 24px; | |||
} | |||
.baseDialog .btnTextStyle { | |||
letter-spacing:6px; | |||
padding: 9px 10px 9px 16px; | |||
font-size: 14px; | |||
letter-spacing: 6px; | |||
padding: 9px 10px 9px 16px; | |||
font-size: 14px; | |||
} | |||
</style> |
@@ -0,0 +1,85 @@ | |||
<template> | |||
<div class="app-container"> | |||
<div>开发中</div> | |||
<!-- 搜索工作栏 --> | |||
<!-- <search-bar | |||
:formConfigs="formConfig" | |||
ref="searchBarForm" | |||
@headBtnClick="buttonClick" /> | |||
<div class="report-box"> | |||
<div class="top-box"> | |||
<div class="left-top"> | |||
<base-table | |||
:table-props="tableProp1" | |||
:table-data="tableData" | |||
:span-method="spanMethod" | |||
:max-height="tableH" /> | |||
</div> | |||
<div class="right-top"></div> | |||
</div> | |||
<div class="bottom-box"> | |||
<div class="left-bottom"></div> | |||
<div class="right-bottom"></div> | |||
</div> | |||
</div> --> | |||
</div> | |||
</template> | |||
<script> | |||
const tableProp1 = [ | |||
{ | |||
prop: 'col1', | |||
label: '生产线', | |||
fixed: true, | |||
}, | |||
]; | |||
export default { | |||
name: 'productionDayR', | |||
data() { | |||
return { | |||
formConfig: [ | |||
{ | |||
type: 'datePicker', | |||
label: '日', | |||
dateType: 'date', | |||
format: 'yyyy-MM-dd', | |||
valueFormat: 'yyyy-MM-dd', | |||
placeholder: '日', | |||
param: 'searchTime', | |||
width: 150, | |||
}, | |||
{ | |||
type: 'button', | |||
btnName: '查询', | |||
name: 'search', | |||
color: 'primary', | |||
}, | |||
{ | |||
type: 'separate', | |||
}, | |||
{ | |||
type: this.$auth.hasPermi('base:group-classes:create') | |||
? 'button' | |||
: '', | |||
btnName: '导出', | |||
name: 'add', | |||
color: 'primary', | |||
plain: true, | |||
}, | |||
], | |||
}; | |||
}, | |||
mounted() {}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.report-box { | |||
.left-top, | |||
.right-top, | |||
.left-bottom, | |||
.right-bottom { | |||
display: inline-block; | |||
border: 1px solid red; | |||
} | |||
} | |||
</style> |