|
|
@@ -1,38 +1,76 @@
|
|
|
<template>
|
|
|
<Modal v-model="fullscreenModal" fullscreen title="工装芯片打印">
|
|
|
<div slot="header">
|
|
|
- <span style="font-size:20px">工装芯片打印</span>
|
|
|
+ <span style="font-size:0.5rem">工装芯片打印</span>
|
|
|
<div class="fullscreen-title-btn">
|
|
|
- <Button @click="back" type="primary" style="margin-right:10px">
|
|
|
- 打印
|
|
|
+ <Button
|
|
|
+ @click="handleFullScreenClick"
|
|
|
+ size="large"
|
|
|
+ id="full_screen_btn"
|
|
|
+ type="primary"
|
|
|
+ style="margin-right:1rem"
|
|
|
+ >
|
|
|
+ {{ isFullScreen ? "退 出" : "全 屏" }}
|
|
|
</Button>
|
|
|
- <Button @click="back" type="primary" style="margin-right:10px">
|
|
|
- 完成
|
|
|
+ <Button
|
|
|
+ @click="back"
|
|
|
+ size="large"
|
|
|
+ type="primary"
|
|
|
+ style="margin-right:1rem"
|
|
|
+ >
|
|
|
+ 打 印
|
|
|
</Button>
|
|
|
- <Button @click="back" type="primary">
|
|
|
- 查看
|
|
|
+ <Button
|
|
|
+ @click="back"
|
|
|
+ size="large"
|
|
|
+ type="primary"
|
|
|
+ style="margin-right:1rem"
|
|
|
+ >
|
|
|
+ 完 成
|
|
|
+ </Button>
|
|
|
+ <Button @click="back" size="large" type="primary">
|
|
|
+ 查 看
|
|
|
</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="fullscreen-content">
|
|
|
<div class="fullscreen-content-select">
|
|
|
<div class="fullscreen-content-select-block">
|
|
|
- <Button @click="handleSelection()" size="large" type="primary">
|
|
|
+ <Button
|
|
|
+ @click="handleSelection(ordernoObj)"
|
|
|
+ size="large"
|
|
|
+ type="primary"
|
|
|
+ >
|
|
|
项目选择
|
|
|
</Button>
|
|
|
</div>
|
|
|
<div class="fullscreen-content-select-block">
|
|
|
- <Button @click="selectionModal = true" size="large" type="primary">
|
|
|
+ <Button @click="handleSelection(urlObj)" size="large" type="primary">
|
|
|
图号选择
|
|
|
</Button>
|
|
|
</div>
|
|
|
<div class="fullscreen-content-select-block">
|
|
|
- <Button @click="selectionModal = true" size="large" type="primary">
|
|
|
+ <Button
|
|
|
+ @click="handleSelectionRowno(rownoObj)"
|
|
|
+ size="large"
|
|
|
+ type="primary"
|
|
|
+ >
|
|
|
行号选择
|
|
|
</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="fullscreen-content-choose">
|
|
|
+ <swiper
|
|
|
+ :slides-per-view="3"
|
|
|
+ :space-between="50"
|
|
|
+ @swiper="onSwiper"
|
|
|
+ @slideChange="onSlideChange"
|
|
|
+ >
|
|
|
+ <swiper-slide>Slide 1</swiper-slide>
|
|
|
+ <swiper-slide>Slide 2</swiper-slide>
|
|
|
+ <swiper-slide>Slide 3</swiper-slide>
|
|
|
+ ...
|
|
|
+ </swiper>
|
|
|
<div
|
|
|
:class="[
|
|
|
choose.isChoosed
|
|
|
@@ -64,9 +102,13 @@
|
|
|
<span>{{ choose.measure_size }}</span>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <span>数量</span>
|
|
|
+ <span>未完成数量</span>
|
|
|
<span>{{ choose.num }}</span>
|
|
|
</div>
|
|
|
+ <div>
|
|
|
+ <span>未打印数量</span>
|
|
|
+ <span>{{ choose.number }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -74,16 +116,30 @@
|
|
|
<Modal
|
|
|
class="selection-modal"
|
|
|
v-model="selectionModal"
|
|
|
- :title="currencyObj.title"
|
|
|
+ :title="currencySelectedObj.title"
|
|
|
width="80%"
|
|
|
>
|
|
|
<div class="selection-modal-top">
|
|
|
- <Input :placeholder="currencyObj.title" style="width: 80%">
|
|
|
+ <Input :placeholder="currencySelectedObj.title" style="width: 80%">
|
|
|
<Icon type="ios-search" slot="suffix" />
|
|
|
</Input>
|
|
|
</div>
|
|
|
<div class="selection-modal-body">
|
|
|
- 内容
|
|
|
+ <div
|
|
|
+ class="selection-modal-body-block"
|
|
|
+ v-for="block in currencySelectedObj.list"
|
|
|
+ :key="block.order_no"
|
|
|
+ @click="handleSelectionClick(currencySelectedObj)"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <span>订单编号：</span>
|
|
|
+ <span>{{ block.order_no }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>项目名称：</span>
|
|
|
+ <span>{{ block.project_name }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div slot="footer">
|
|
|
<Button @click="back" type="primary" style="margin-right:10px">
|
|
|
@@ -94,23 +150,46 @@
|
|
|
</Button>
|
|
|
</div>
|
|
|
</Modal>
|
|
|
+ <Modal
|
|
|
+ class="selection-rowno-modal"
|
|
|
+ v-model="selectionRownolModal"
|
|
|
+ title="行号选择"
|
|
|
+ width="80%"
|
|
|
+ >
|
|
|
+ <div class="selection-rowno-modal-body"></div>
|
|
|
+ <div slot="footer">
|
|
|
+ <Button @click="back" type="primary" style="margin-right:10px">
|
|
|
+ 返回
|
|
|
+ </Button>
|
|
|
+ <Button @click="back" type="primary">
|
|
|
+ 返回
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
</Modal>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
// 例如：import 《组件名称》 from '《组件路径》';
|
|
|
+import { Swiper, SwiperSlide } from "swiper/vue";
|
|
|
+import "swiper/css";
|
|
|
|
|
|
export default {
|
|
|
name: "",
|
|
|
- components: {},
|
|
|
+ components: {
|
|
|
+ Swiper,
|
|
|
+ SwiperSlide,
|
|
|
+ },
|
|
|
props: {},
|
|
|
// import引入的组件需要注入到对象中才能使用
|
|
|
data() {
|
|
|
// 这里存放数据
|
|
|
return {
|
|
|
+ isFullScreen: false,
|
|
|
fullscreenModal: true,
|
|
|
selectionModal: false,
|
|
|
+ selectionRownolModal: false,
|
|
|
selectionDetailModal: false,
|
|
|
contentData: [
|
|
|
{
|
|
|
@@ -120,6 +199,7 @@ export default {
|
|
|
wool_size: "1*2*3",
|
|
|
measure_size: "11*22*33",
|
|
|
num: 3,
|
|
|
+ number: 3,
|
|
|
isChoosed: true,
|
|
|
},
|
|
|
{
|
|
|
@@ -167,15 +247,118 @@ export default {
|
|
|
num: 3,
|
|
|
isChoosed: false,
|
|
|
},
|
|
|
+ {
|
|
|
+ row: 7,
|
|
|
+ part_title: "部件名称1",
|
|
|
+ detail_part_title: "零部件名称1",
|
|
|
+ wool_size: "1*2*3",
|
|
|
+ measure_size: "11*22*33",
|
|
|
+ num: 3,
|
|
|
+ isChoosed: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ row: 8,
|
|
|
+ part_title: "部件名称1",
|
|
|
+ detail_part_title: "零部件名称1",
|
|
|
+ wool_size: "1*2*3",
|
|
|
+ measure_size: "11*22*33",
|
|
|
+ num: 3,
|
|
|
+ isChoosed: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ row: 9,
|
|
|
+ part_title: "部件名称1",
|
|
|
+ detail_part_title: "零部件名称1",
|
|
|
+ wool_size: "1*2*3",
|
|
|
+ measure_size: "11*22*33",
|
|
|
+ num: 3,
|
|
|
+ isChoosed: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ row: 10,
|
|
|
+ part_title: "部件名称1",
|
|
|
+ detail_part_title: "零部件名称1",
|
|
|
+ wool_size: "1*2*3",
|
|
|
+ measure_size: "11*22*33",
|
|
|
+ num: 3,
|
|
|
+ isChoosed: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ row: 11,
|
|
|
+ part_title: "部件名称1",
|
|
|
+ detail_part_title: "零部件名称1",
|
|
|
+ wool_size: "1*2*3",
|
|
|
+ measure_size: "11*22*33",
|
|
|
+ num: 3,
|
|
|
+ isChoosed: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ row: 12,
|
|
|
+ part_title: "部件名称1",
|
|
|
+ detail_part_title: "零部件名称1",
|
|
|
+ wool_size: "1*2*3",
|
|
|
+ measure_size: "11*22*33",
|
|
|
+ num: 3,
|
|
|
+ isChoosed: false,
|
|
|
+ },
|
|
|
],
|
|
|
- selectedList: [],
|
|
|
+ selectedObj: [],
|
|
|
ordernoObj: {
|
|
|
title: "订单编号/项目名称选择",
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ order_no: "1231",
|
|
|
+ project_name: "321",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ order_no: "1232",
|
|
|
+ project_name: "321",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ order_no: "1233",
|
|
|
+ project_name: "321",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ order_no: "1234",
|
|
|
+ project_name: "321",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ order_no: "1235",
|
|
|
+ project_name: "321",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ hasChild: false,
|
|
|
+ },
|
|
|
+ urlObj: {
|
|
|
+ title: "图号选择",
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ order_no: "1",
|
|
|
+ project_name: "321",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ order_no: "2",
|
|
|
+ project_name: "321",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ order_no: "3",
|
|
|
+ project_name: "321",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ order_no: "4",
|
|
|
+ project_name: "321",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ order_no: "5",
|
|
|
+ project_name: "321",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ hasChild: true,
|
|
|
},
|
|
|
- linenoObj: {},
|
|
|
rownoObj: {},
|
|
|
- currencyObj: {
|
|
|
+ currencySelectedObj: {
|
|
|
title: "订单编号/项目名称选择",
|
|
|
+ list: [],
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
@@ -187,10 +370,75 @@ export default {
|
|
|
back() {
|
|
|
this.$router.go(-1);
|
|
|
},
|
|
|
- handleSelection() {},
|
|
|
+ handleSelection(obj) {
|
|
|
+ this.currencySelectedObj = obj;
|
|
|
+ this.selectionModal = true;
|
|
|
+ },
|
|
|
+ handleSelectionRowno() {},
|
|
|
handleChooseBlockClick(row) {
|
|
|
- row.isChoosed = !row.isChoosed;
|
|
|
- this.selectedList = this.contentData.filter((v) => v.isChoosed);
|
|
|
+ if (row.isChoosed) {
|
|
|
+ row.isChoosed = false;
|
|
|
+ } else {
|
|
|
+ this.contentData.map((v) => {
|
|
|
+ v.isChoosed = false;
|
|
|
+ });
|
|
|
+ row.isChoosed = true;
|
|
|
+ }
|
|
|
+ this.selectedObj = this.contentData.filter((v) => v.isChoosed);
|
|
|
+ },
|
|
|
+ handleSelectionClick(row) {
|
|
|
+ console.log("row :>> ", row);
|
|
|
+ if (row.hasChild) {
|
|
|
+ // 行号
|
|
|
+ this.selectionModal = false;
|
|
|
+ this.selectionDetailModal = true;
|
|
|
+ } else {
|
|
|
+ // 订单号
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleFullScreenClick() {
|
|
|
+ this.isFullScreen = !this.isFullScreen;
|
|
|
+ if (this.isFullScreen) {
|
|
|
+ this.enterFullScreen();
|
|
|
+ } else {
|
|
|
+ this.exitFullScreen();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ enterFullScreen() {
|
|
|
+ let el = document.documentElement;
|
|
|
+ let rfs =
|
|
|
+ el.requestFullScreen ||
|
|
|
+ el.webkitRequestFullScreen ||
|
|
|
+ el.mozRequestFullScreen ||
|
|
|
+ el.msRequestFullscreen;
|
|
|
+ if (rfs) {
|
|
|
+ rfs.call(el);
|
|
|
+ } else if (typeof window.ActiveXObject !== "undefined") {
|
|
|
+ // for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
|
|
|
+ let wscript = new ActiveXObject("WScript.Shell");
|
|
|
+ if (wscript != null) {
|
|
|
+ wscript.SendKeys("{F11}");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ exitFullScreen() {
|
|
|
+ let el = document;
|
|
|
+ let cfs =
|
|
|
+ el.cancelFullScreen ||
|
|
|
+ el.mozCancelFullScreen ||
|
|
|
+ el.msExitFullscreen ||
|
|
|
+ el.webkitExitFullscreen ||
|
|
|
+ el.exitFullscreen;
|
|
|
+ if (cfs) {
|
|
|
+ // typeof cfs != "undefined" && cfs
|
|
|
+ cfs.call(el);
|
|
|
+ } else if (typeof window.ActiveXObject !== "undefined") {
|
|
|
+ // for IE，这里和fullScreen相同，模拟按下F11键退出全屏
|
|
|
+ let wscript = new ActiveXObject("WScript.Shell");
|
|
|
+ if (wscript != null) {
|
|
|
+ wscript.SendKeys("{F11}");
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
// 监听属性 类似于data概念
|
|
|
@@ -225,10 +473,10 @@ export default {
|
|
|
justify-content: flex-start;
|
|
|
flex-wrap: wrap;
|
|
|
.fullscreen-content-choose-block {
|
|
|
- width: 18%;
|
|
|
+ width: 23%;
|
|
|
border-radius: 5px;
|
|
|
border: 1px solid #2d8cf0;
|
|
|
- margin: 1%;
|
|
|
+ margin: 5px 1%;
|
|
|
padding: 1%;
|
|
|
div {
|
|
|
display: flex;
|
|
|
@@ -250,5 +498,24 @@ export default {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
+ .selection-modal-body {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .selection-modal-body-block {
|
|
|
+ width: 30%;
|
|
|
+ margin: 1%;
|
|
|
+ padding: 3% 1%;
|
|
|
+ background-color: #e9ecef;
|
|
|
+ div {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.selection-rowno-modal {
|
|
|
+ .selection-rowno-modal-body {
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
Andy