|
@@ -180,13 +180,20 @@
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
+ <print-preview ref="preView" />
|
|
|
|
|
|
- <CommonPrint :printId="printId" :printType="printType" v-if="isShowPrint" @backDetail="backDetail" />
|
|
|
|
|
|
+ <!-- <CommonPrint :printId="printId" :printType="printType" v-if="isShowPrint" @backDetail="backDetail" /> -->
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+ import { disAutoConnect, hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint'
|
|
|
|
+disAutoConnect();
|
|
|
|
+
|
|
|
|
+import panel from '../../apply/components/design/panel'
|
|
|
|
+import { getDetail, detailArr } from '../../apply/components/design/print-data'
|
|
|
|
+import printPreview from '../../apply/components/design/preview.vue'
|
|
import { getDeliverDetail } from "@/api/supply/deliver";
|
|
import { getDeliverDetail } from "@/api/supply/deliver";
|
|
import CommonPrint from "@/views/supply/deliver/components/common_print";
|
|
import CommonPrint from "@/views/supply/deliver/components/common_print";
|
|
|
|
|
|
@@ -195,7 +202,7 @@ export default {
|
|
componentName: 'DeliverDetail',
|
|
componentName: 'DeliverDetail',
|
|
props: ['listItem'],
|
|
props: ['listItem'],
|
|
components: {
|
|
components: {
|
|
- CommonPrint,
|
|
|
|
|
|
+ CommonPrint,printPreview
|
|
},
|
|
},
|
|
filters: {
|
|
filters: {
|
|
statusFilter(val) {
|
|
statusFilter(val) {
|
|
@@ -229,9 +236,60 @@ export default {
|
|
printType: 1,
|
|
printType: 1,
|
|
printId: '',
|
|
printId: '',
|
|
isShowPrint: false,
|
|
isShowPrint: false,
|
|
|
|
+ curPaper: {
|
|
|
|
+ type: 'A5',
|
|
|
|
+ width: 500,
|
|
|
|
+ height: 147.6
|
|
|
|
+ },
|
|
|
|
+ paperTypes: {
|
|
|
|
+ 'A3': {
|
|
|
|
+ width: 420,
|
|
|
|
+ height: 296.6
|
|
|
|
+ },
|
|
|
|
+ 'A4': {
|
|
|
|
+ width: 210,
|
|
|
|
+ height: 296.6
|
|
|
|
+ },
|
|
|
|
+ '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,
|
|
|
|
+ hiprintTemplate:'',
|
|
}
|
|
}
|
|
},
|
|
},
|
|
-
|
|
|
|
|
|
+ computed:{
|
|
|
|
+ curPaperType() {
|
|
|
|
+ let type = 'other'
|
|
|
|
+ let types = this.paperTypes
|
|
|
|
+ for (const key in types) {
|
|
|
|
+ let item = types[key]
|
|
|
|
+ let { width, height } = this.curPaper
|
|
|
|
+ if (item.width === width && item.height === height) {
|
|
|
|
+ type = key
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return type
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ activated(){
|
|
|
|
+ this.initPrint()
|
|
|
|
+ },
|
|
created() {
|
|
created() {
|
|
this.getDetail();
|
|
this.getDetail();
|
|
},
|
|
},
|
|
@@ -241,7 +299,40 @@ export default {
|
|
goBack() {
|
|
goBack() {
|
|
this.$emit('backListFormDetail');
|
|
this.$emit('backListFormDetail');
|
|
},
|
|
},
|
|
-
|
|
|
|
|
|
+ initPrint(){
|
|
|
|
+ hiprint.init({
|
|
|
|
+ providers: [new defaultElementTypeProvider()]
|
|
|
|
+ });
|
|
|
|
+ // 还原配置
|
|
|
|
+ hiprint.setConfig()
|
|
|
|
+ // 替换配置
|
|
|
|
+ hiprint.setConfig({
|
|
|
|
+ movingDistance: 2.5,
|
|
|
|
+ text: {
|
|
|
|
+ supportOptions: [
|
|
|
|
+ {
|
|
|
|
+ name: 'styler',
|
|
|
|
+ hidden: true
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: 'formatter',
|
|
|
|
+ hidden: true
|
|
|
|
+ },
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ // eslint-disable-next-line no-undef
|
|
|
|
+ hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
|
|
|
|
+ this.hiprintTemplate = new hiprint.PrintTemplate({
|
|
|
|
+ template: panel,
|
|
|
|
+ settingContainer: '#PrintElementOptionSetting',
|
|
|
|
+ paginationContainer: '.hiprint-printPagination'
|
|
|
|
+ });
|
|
|
|
+ this.hiprintTemplate.design('#hiprint-printTemplate');
|
|
|
|
+ // 获取当前放大比例, 当zoom时传true 才会有
|
|
|
|
+ // this.scaleValue = hiprintTemplate.editingPanel.scale || 1;
|
|
|
|
+ }
|
|
|
|
+,
|
|
// 获取详情
|
|
// 获取详情
|
|
getDetail() {
|
|
getDetail() {
|
|
getDeliverDetail({id: this.listItem.id}).then(res => {
|
|
getDeliverDetail({id: this.listItem.id}).then(res => {
|
|
@@ -259,14 +350,35 @@ export default {
|
|
// 点击打印
|
|
// 点击打印
|
|
toPrint() {
|
|
toPrint() {
|
|
this.printId = this.listItem.id;
|
|
this.printId = this.listItem.id;
|
|
- this.isShowPrint = true;
|
|
|
|
|
|
+ // this.isShowPrint = true;]
|
|
|
|
+ getDetail(this.listItem.id)
|
|
|
|
+ this.$refs.preView.show(this.hiprintTemplate, detailArr)
|
|
|
|
+
|
|
},
|
|
},
|
|
|
|
|
|
backDetail() {
|
|
backDetail() {
|
|
this.printId = '';
|
|
this.printId = '';
|
|
this.isShowPrint = false;
|
|
this.isShowPrint = false;
|
|
},
|
|
},
|
|
|
|
+/**
|
|
|
|
+ * 设置纸张大小
|
|
|
|
+ * @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 }
|
|
|
|
+ this.hiprintTemplate.setPaper(value.width, value.height)
|
|
|
|
+ } else {
|
|
|
|
+ this.curPaper = { type: 'other', width: value.width, height: value.height }
|
|
|
|
+ this.hiprintTemplate.setPaper(value.width, value.height)
|
|
|
|
|
|
|
|
+ }
|
|
|
|
+ } catch (error) {
|
|
|
|
+ this.$message.error(`操作失败: ${error}`)
|
|
|
|
+ }
|
|
|
|
+},
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|