jf-frock/src/views/ChipPrintScreen/ChipPrintScreen.vue

<template>
  <Modal v-model="fullscreenModal" fullscreen title="工装芯片打印">
    <div slot="header">
      <span style="font-size:0.5rem">工装芯片打印</span>
      <div class="fullscreen-title-btn">
        <Button
          @click="handleFullScreenClick"
          size="large"
          id="full_screen_btn"
          type="primary"
          style="margin-right:1rem"
        >
          {{ isFullScreen ? "退  出" : "全  屏" }}
        </Button>
        <Button
          @click="back"
          size="large"
          type="primary"
          style="margin-right:1rem"
        >
          打 印
        </Button>
        <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(ordernoObj)"
            size="large"
            type="primary"
          >
            项目选择
          </Button>
        </div>
        <div class="fullscreen-content-select-block">
          <Button @click="handleSelection(urlObj)" size="large" type="primary">
            图号选择
          </Button>
        </div>
        <div class="fullscreen-content-select-block">
          <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
              ? 'fullscreen-content-choose-block fullscreen-content-choose-block-choosen'
              : 'fullscreen-content-choose-block fullscreen-content-choose-block-unchoosen',
          ]"
          v-for="choose in contentData"
          :key="choose.row"
          @click="handleChooseBlockClick(choose)"
        >
          <div>
            <span>行号</span>
            <span>{{ choose.row }}</span>
          </div>
          <div>
            <span>部件名称</span>
            <span>{{ choose.part_title }}</span>
          </div>
          <div>
            <span>零部件名称</span>
            <span>{{ choose.detail_part_title }}</span>
          </div>
          <div>
            <span>毛料尺寸</span>
            <span>{{ choose.wool_size }}</span>
          </div>
          <div>
            <span>精裁尺寸</span>
            <span>{{ choose.measure_size }}</span>
          </div>
          <div>
            <span>未完成数量</span>
            <span>{{ choose.num }}</span>
          </div>
          <div>
            <span>未打印数量</span>
            <span>{{ choose.number }}</span>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer"></div>
    <Modal
      class="selection-modal"
      v-model="selectionModal"
      :title="currencySelectedObj.title"
      width="80%"
    >
      <div class="selection-modal-top">
        <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">
          返回
        </Button>
        <Button @click="back" type="primary">
          返回
        </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: {
    Swiper,
    SwiperSlide,
  },
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      isFullScreen: false,
      fullscreenModal: true,
      selectionModal: false,
      selectionRownolModal: false,
      selectionDetailModal: false,
      contentData: [
        {
          row: 1,
          part_title: "部件名称1",
          detail_part_title: "零部件名称1",
          wool_size: "1*2*3",
          measure_size: "11*22*33",
          num: 3,
          number: 3,
          isChoosed: true,
        },
        {
          row: 2,
          part_title: "部件名称1",
          detail_part_title: "零部件名称1",
          wool_size: "1*2*3",
          measure_size: "11*22*33",
          num: 3,
          isChoosed: false,
        },
        {
          row: 3,
          part_title: "部件名称1",
          detail_part_title: "零部件名称1",
          wool_size: "1*2*3",
          measure_size: "11*22*33",
          num: 3,
          isChoosed: false,
        },
        {
          row: 4,
          part_title: "部件名称1",
          detail_part_title: "零部件名称1",
          wool_size: "1*2*3",
          measure_size: "11*22*33",
          num: 3,
          isChoosed: false,
        },
        {
          row: 5,
          part_title: "部件名称1",
          detail_part_title: "零部件名称1",
          wool_size: "1*2*3",
          measure_size: "11*22*33",
          num: 3,
          isChoosed: false,
        },
        {
          row: 6,
          part_title: "部件名称1",
          detail_part_title: "零部件名称1",
          wool_size: "1*2*3",
          measure_size: "11*22*33",
          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,
        },
      ],
      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,
      },
      rownoObj: {},
      currencySelectedObj: {
        title: "订单编号/项目名称选择",
        list: [],
      },
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  methods: {
    back() {
      this.$router.go(-1);
    },
    handleSelection(obj) {
      this.currencySelectedObj = obj;
      this.selectionModal = true;
    },
    handleSelectionRowno() {},
    handleChooseBlockClick(row) {
      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概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.fullscreen-title-btn {
  position: absolute;
  right: 100px;
  top: 0.175rem;
}
.fullscreen-content {
  .fullscreen-content-select {
    display: flex;
    justify-content: space-around;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8eaec;
  }
  .fullscreen-content-choose {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .fullscreen-content-choose-block {
      width: 23%;
      border-radius: 5px;
      border: 1px solid #2d8cf0;
      margin: 5px 1%;
      padding: 1%;
      div {
        display: flex;
        justify-content: space-between;
      }
    }
    .fullscreen-content-choose-block-choosen {
      color: white;
      background-color: #2d8cf0;
    }
    .fullscreen-content-choose-block-unchoosen {
      color: #2d8cf0;
      background-color: white;
    }
  }
}
.selection-modal {
  .selection-modal-top {
    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>