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="handlePrint"
          size="large"
          type="primary"
          style="margin-right: 1rem"
        >
          打 印
        </Button>
        <Button
          @click="handleOk"
          size="large"
          type="primary"
          style="margin-right: 1rem"
        >
          完 成
        </Button>
        <Button @click="goCheckPage" 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, 1)"
            size="large"
            type="primary"
            style="margin-right: 10px"
          >
            项目选择
          </Button>
          <div class="icon-wrapper" v-show="selectedInfo.order_no">
            <Icon
              class="icon-close"
              @click="handleCancelSelected('order_no')"
              size="24"
              type="md-close"
            />
            <div>
              <span>订单编号：</span>
              <span>{{ selectedInfo.order_no }}</span>
            </div>
            <div>
              <span>项目名称：</span>
              <span>{{ selectedInfo.residential_name }}</span>
            </div>
          </div>
        </div>
        <div class="fullscreen-content-select-block">
          <Button
            @click="handleSelection(urlObj, 2)"
            size="large"
            type="primary"
            style="margin-right: 10px"
          >
            图号选择
          </Button>
          <div style="display: flex; align-items: center">
            <div class="icon-wrapper">
              <div v-show="selectedInfo.url_number">
                <Icon
                  class="icon-close"
                  @click="handleCancelSelected('product_id')"
                  size="24"
                  type="md-close"
                />
                <span>图号：</span>
                <span>{{ selectedInfo.url_number }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="fullscreen-content-select-block">
          <Button
            @click="handleSelectionRowno(rownoObj)"
            size="large"
            type="primary"
            style="margin-right: 10px"
          >
            行号选择
          </Button>
          <div
            class="icon-wrapper"
            v-show="selectedInfo.rows.length != 0"
            style="display: flex; align-items: center"
          >
            <span>行号：</span>
            <div style="display: flex; justify-content: flex-start">
              <div v-for="(item, index) in selectedInfo.rows" :key="item.key">
                <div class="icon-wrapper" style="margin-right: 0.35rem">
                  <Icon
                    class="icon-close"
                    @click="handleCancelSelected(index, 1)"
                    size="24"
                    type="md-close"
                  />
                  <span style="display: inline-block"
                    >{{ item.start }}-{{ item.end }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="fullscreen-content-choose">
        <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 class="chip-tag" v-show="choose.type == 1">
            芯片
            <Icon
              size="20px"
              style="font-size: 1rem; transform: translate(-12%, -40%)"
              :color="choose.isChoosed ? '#2d8cf0' : 'white'"
              type="md-arrow-dropup"
            />
          </div>
          <div>
            <span>行号</span>
            <span>{{ choose.row_no }}</span>
          </div>
          <div>
            <span>部件</span>
            <span>{{ choose.part_title }}</span>
          </div>
          <div>
            <span>材料</span>
            <span>{{ choose.sub_part_title }}</span>
          </div>
          <div>
            <span>毛料尺寸</span>
            <span>{{ choose.wool_size }}</span>
          </div>
          <div>
            <span>精裁尺寸</span>
            <span>{{ choose.cut_size }}</span>
          </div>
          <div>
            <span>未完成数量</span>
            <span>
              {{ choose.un_complete }}(总数：{{
                choose.on_complete + choose.un_complete
              }})
            </span>
          </div>
          <div>
            <span>未打印数量</span>
            <span
              >{{ choose.un_print }}(总数：{{
                choose.on_print + choose.un_print
              }})</span
            >
          </div>
        </div>
      </div>
      <div class="fullscreen-content-page">
        <Page @on-change="changePage" :current="page_index" :total="total" />
      </div>
    </div>
    <div slot="footer"></div>
    <Modal
      class="selection-modal"
      v-model="selectionModal"
      :title="currencySelectedObj.title"
      width="80%"
    >
      <van-number-keyboard
        :show="show"
        @blur="show = false"
        @input="onInput"
        @delete="onDelete"
        z-index="99999"
      />
      <div class="selection-modal-top">
        <Input
          :placeholder="currencySelectedObj.title"
          v-model="currentSearchValue"
          @on-focus="show = true"
          @on-change="
            handleCurrentSearch(currencySelectedObj, currentSearchValue)
          "
          style="width: 80%"
        >
          <Icon
            @click="
              handleCurrentSearch(currencySelectedObj, currentSearchValue)
            "
            type="ios-search"
            slot="suffix"
          />
        </Input>
      </div>
      <div class="selection-modal-body">
        <div
          :class="[
            block.isCurrent
              ? 'selection-modal-body-block selection-modal-body-block-choosen'
              : 'selection-modal-body-block selection-modal-body-block-unchoosen',
          ]"
          v-for="(block, index) in currencySelectedObj.list"
          :key="index"
          @click="handleSelectionClick(currencySelectedObj, block)"
        >
          <div v-show="currencySelectedObj.type == 1">
            <span>订单编号：</span>
            <span>{{ block.order_no }}</span>
          </div>
          <div v-show="currencySelectedObj.type == 2">
            <span>{{ block.title }}</span>
          </div>
          <div v-show="currencySelectedObj.type == 1">
            <span>项目名称：</span>
            <span>{{ block.residential_name }}</span>
          </div>
        </div>
        <div
          style="font-size: 1rem"
          v-show="currencySelectedObj.list.length == 0"
        >
          暂无数据
        </div>
      </div>
      <div class="fullscreen-content-page">
        <Page
          @on-change="changeModalPage"
          :current="
            currencySelectedObj.type == 1
              ? modal_1_page_index
              : modal_2_page_index
          "
          :page-size="
            currencySelectedObj.type == 1
              ? modal_1_page_size
              : modal_2_page_size
          "
          :total="currencySelectedObj.type == 1 ? modal_1_total : modal_2_total"
        />
      </div>
      <div slot="footer">
        <Button
          @click="selectionModal = false"
          type="primary"
          style="margin-right: 10px"
        >
          返回
        </Button>
        <!-- <Button
          v-show="currencySelectedObj.type == 1"
          @click="handleSelectionComfirm(currencySelectedObj)"
          type="primary"
        >
          确认
        </Button> -->
      </div>
    </Modal>
    <Modal
      class="selection-modal"
      v-model="selectionDetailModal"
      :title="currencySelectedObj.title"
      width="80%"
    >
      <div class="selection-modal-body" v-if="currencySelectedObj.hasChild">
        <div
          :class="[
            block.isCurrent
              ? 'selection-modal-body-block-detail selection-modal-body-block-detail-choosen'
              : 'selection-modal-body-block-detail selection-modal-body-block-detail-unchoosen',
          ]"
          v-for="(block, index) in chooseDetailUrlNo.children"
          :key="index"
          @click="handleSelectionDetailClick(chooseDetailUrlNo, block)"
        >
          <div>
            <span>{{ block.url_number }}</span>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button
          @click="
            selectionDetailModal = false;
            selectionModal = true;
          "
          type="primary"
          style="margin-right: 10px"
        >
          返回
        </Button>
        <!-- <Button
          @click="handleSelectionComfirm(currencySelectedObj)"
          type="primary"
        >
          确认
        </Button> -->
      </div>
    </Modal>
    <Modal
      class="selection-rowno-modal"
      v-model="selectionRownolModal"
      title="行号选择"
      width="80%"
    >
      <div class="selection-rowno-modal-body">
        <van-number-keyboard
          :show="show2"
          @blur="show2 = false"
          @input="keyboardTap"
          @delete="keyboardDele"
          z-index="99999"
        />
        <div
          class="selection-rowno-modal-body-block"
          v-for="(block, index) in chooseLineNo"
          :key="index"
        >
          <span>行号区间：</span>
          <Input
            v-model="block.start"
            @on-focus="handleRowNoInput(block, 1)"
            clearable
            style="width: 20%; margin: 0 10px"
            size="large"
          />
          -
          <Input
            v-model="block.end"
            @on-focus="handleRowNoInput(block, 2)"
            clearable
            style="width: 20%; margin: 0 10px"
            size="large"
          />
          <Button
            @click="handleAddRow(block, index)"
            type="primary"
            size="large"
            v-show="index == 0"
            style="margin-right: 10px"
          >
            添加
          </Button>
          <Button
            @click="handleDeleRow(block, index)"
            type="primary"
            size="large"
            v-show="index != 0"
            style="margin-right: 10px"
          >
            删除
          </Button>
        </div>
      </div>
      <div slot="footer">
        <Button
          @click="selectionRownolModal = false"
          type="primary"
          style="margin-right: 10px"
        >
          返回
        </Button>
        <Button @click="handleRowNoComfirm(chooseLineNo)" type="primary">
          确认
        </Button>
      </div>
    </Modal>
    <Modal
      class="selection-print-modal"
      v-model="printModal"
      title="打印"
      width="60%"
    >
      <div class="selection-print-modal-body">
        <div class="selection-print-modal-body-top">
          <div>
            <span>行号：</span>
            <span>{{ selectedObj.row_no }}</span>
          </div>
          <div>
            <span>部件名称：</span>
            <span>{{ selectedObj.part_title }}</span>
          </div>
          <div>
            <span>数量：</span>
            <InputNumber
              :max="selectedObj.on_print + selectedObj.un_print"
              :min="0"
              size="large"
              @on-focus="handlePrintInput"
              v-model="selectedObj.print_num"
            ></InputNumber>
            <van-number-keyboard
              :show="show4"
              @blur="show4 = false"
              @input="keyboardPrintTap"
              @delete="keyboardPrintDele"
              z-index="99999"
            />
          </div>
        </div>
        <div class="selection-print-modal-body-info">
          {{
            selectedObj.isFinished
              ? "该部件芯片数量已全部打印，是否再次打印？请选择要打印的房间号："
              : "请确认打印数量是否正确！"
          }}
          <div>
            <Button
              v-show="selectedObj.isFinished"
              @click="handleSelectionRoom"
              type="primary"
            >
              选择房间号
            </Button>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button
          @click="printModal = false"
          type="primary"
          style="margin-right: 10px"
        >
          返回
        </Button>
        <Button @click="handlePrintComfirm(selectedObj)" type="primary">
          确认
        </Button>
      </div>
    </Modal>
    <Modal
      class="selection-print-modal"
      v-model="okModal"
      title="完成"
      width="60%"
    >
      <div class="selection-print-modal-body">
        <div class="selection-print-modal-body-top">
          <div>
            <span>行号：</span>
            <span>{{ selectedObj.row_no }}</span>
          </div>
          <div>
            <span>部件名称：</span>
            <span>{{ selectedObj.part_title }}</span>
          </div>
          <div>
            <span>数量：</span>
            <InputNumber
              :max="
                selectedObj.type == 1
                  ? selectedObj.on_print - selectedObj.on_complete
                  : selectedObj.un_complete
              "
              :min="0"
              size="large"
              @on-focus="handleOkInput"
              v-model="selectedObj.ok_num"
            ></InputNumber>
            <van-number-keyboard
              :show="show3"
              @blur="show3 = false"
              @input="keyboardOkTap"
              @delete="keyboardOkDele"
              z-index="99999"
            />
          </div>
        </div>
        <div class="selection-print-modal-body-info">
          请确认完成数量是否正确？
        </div>
      </div>
      <div slot="footer">
        <Button
          @click="okModal = false"
          type="primary"
          style="margin-right: 10px"
        >
          返回
        </Button>
        <Button @click="handleOkComfirm(selectedObj)" type="primary">
          确认
        </Button>
      </div>
    </Modal>
    <Modal
      class="selection-modal"
      v-model="roomModal"
      title="选择房间号"
      width="80%"
    >
      <div class="selection-modal-body">
        <div
          :class="[
            block.isCurrent
              ? 'selection-modal-body-block selection-modal-body-block-choosen'
              : 'selection-modal-body-block selection-modal-body-block-unchoosen',
          ]"
          v-for="(block, index) in modalRoomList"
          :key="index"
          @click="handleSelectedRoomClick(modalRoomList, block)"
        >
          <div>
            <span>{{ block.house }}</span>
          </div>
        </div>
      </div>
      <div class="fullscreen-content-page">
        <Page
          @on-change="changeRoomPage"
          :current="modal_room_page_index"
          :page-size="modal_room_page_size"
          :total="modal_room_total"
        />
      </div>
      <div slot="footer">
        <Button
          @click="handleRoomCancel"
          type="primary"
          style="margin-right: 10px"
        >
          返回
        </Button>
        <Button @click="handlePrintComfirm(selectedObj, 1)" type="primary">
          确认
        </Button>
      </div>
    </Modal>
  </Modal>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import $ from "jquery";
import "@vant/touch-emulator";
export default {
  name: "",
  components: {},
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      show: false,
      show2: false,
      show3: false,
      show4: false,
      isFullScreen: false,
      fullscreenModal: true,
      selectionModal: false,
      selectionRownolModal: false,
      selectionDetailModal: false,
      printModal: false,
      okModal: false,
      roomModal: false,
      contentData: [],
      selectedObj: {},
      ordernoObj: {
        title: "订单编号/项目名称选择",
        list: [],
        hasChild: false,
      },
      urlObj: {
        title: "图号选择",
        list: [],
        hasChild: true,
      },
      rownoObj: {},
      currencySelectedObj: {
        title: "订单编号/项目名称选择",
        type: 1,
        list: [],
      },
      selectedInfo: {
        order_no: "",
        residential_name: "",
        url_number: "",
        product_id: "",
        rows: [],
      },
      page_index: 1,
      page_size: 12,
      total: 0,
      currentSearchValue: "",
      modal_1_page_index: 1,
      modal_1_page_size: 6,
      modal_1_total: 0,
      modal_room_page_index: 1,
      modal_room_page_size: 9,
      modal_room_total: 0,
      modal_2_page_index: 1,
      modal_2_page_size: 60,
      modal_2_total: 0,
      chooseOrderNo: {},
      chooseUrlNo: {},
      chooseDetailUrlNo: {},
      chooseLineNo: [{ start: "", end: "" }],
      keyboardObj: {},
      keyboardVal: "",
      modalRoomList: [],
      modalRoomListSelected: [],
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.path == "/cms/ChipPrintScreen/ChipPrintScreenCheck") {
        vm.selectedInfo = JSON.parse(localStorage.getItem("printInfo"));
        vm.getChipDetail();
      }
    });
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  methods: {
    back() {
      this.$router.go(-1);
    },
    handleSelection(obj, type) {
      if (type == 2 && this.selectedInfo.order_no == "") {
        return this.$Message.warning("请先选择项目");
      }
      this.currentSearchValue = "";
      this.currencySelectedObj = obj;
      this.selectionModal = true;
      this.currencySelectedObj.type = type;
      if (this.currencySelectedObj.list.length == 0 || type == 2) {
        this.handleCurrentSearch(
          this.currencySelectedObj,
          this.currentSearchValue
        );
      }
    },
    handleSelectionRowno(row) {
      console.log(`row`, row);
      if (this.selectedInfo.rows.legth > 0) {
        this.chooseLineNo = JSON.parse(JSON.stringify(this.selectedInfo.rows));
      } else {
        this.chooseLineNo = [{ start: null, end: null }];
      }
      this.selectionRownolModal = true;
    },
    handleCancelSelected(v, type) {
      if (type) {
        this.selectedInfo.rows.splice(v, 1);
      } else if (v == "product_id") {
        this.selectedInfo.url_number = "";
        this.selectedInfo.product_id = "";
      } else {
        this.selectedInfo[v] = "";
      }
      if (v != "order_no") {
        this.getChipDetail();
      } else {
        this.selectedInfo.residential_name = "";
        this.selectedInfo.url_number = "";
        this.selectedInfo.product_id = "";
        this.selectedInfo.rows = [];
        this.contentData = [];
        this.total = 0;
      }
    },
    handleChooseBlockClick(row) {
      console.log(`row`, row);
      if (row.isChoosed) {
        row.isChoosed = false;
      } else {
        this.contentData.map((v) => {
          v.isChoosed = false;
        });
        row.isChoosed = true;
      }
      if (row.un_print == 0) {
        row.isFinished = true;
      }
      this.selectedObj = row;
    },
    goCheckPage() {
      localStorage.setItem("printInfo", JSON.stringify(this.selectedInfo));
      this.$router.push({
        path: "/cms/ChipPrintScreen/ChipPrintScreenCheck",
      });
    },
    handleSelectionClick(row, obj) {
      row.list.map((v) => (v.isCurrent = false));
      obj.isCurrent = true;
      if (row.hasChild) {
        // 行号
        this.selectionModal = false;
        this.selectionDetailModal = true;
        this.chooseDetailUrlNo = obj;
      } else {
        // 订单号
        this.chooseOrderNo = obj;
      }
      if (row.type == 1) {
        this.handleSelectionComfirm(this.currencySelectedObj);
      }
      this.$forceUpdate();
    },
    handleSelectedRoomClick(list, block) {
      if (block.isCurrent) {
        this.modalRoomListSelected = this.modalRoomListSelected.filter(
          (v) => v.id != block.id
        );
        block.isCurrent = !block.isCurrent;
      } else {
        if (this.modalRoomListSelected.length < this.selectedObj.print_num) {
          block.isCurrent = !block.isCurrent;
          this.modalRoomListSelected = this.modalRoomListSelected.concat(
            this.modalRoomList.filter((v) => v.isCurrent)
          );
        } else {
          this.$Message.warning("与打印数量不符，请重新选择");
        }
      }
      this.modalRoomListSelected = Array.from(
        new Set([...this.modalRoomListSelected])
      );
    },
    handleAddRow(row, index) {
      this.chooseLineNo.push({
        start: "",
        end: "",
      });
    },
    handleDeleRow(row, index) {
      this.chooseLineNo.splice(index, 1);
    },
    handleSelectionDetailClick(row, obj) {
      row.children.map((v) => (v.isCurrent = false));
      obj.isCurrent = true;
      this.chooseUrlNo = obj;
      this.handleSelectionComfirm(this.currencySelectedObj);
      this.$forceUpdate();
    },
    handleFullScreenClick() {
      this.isFullScreen = !this.isFullScreen;
      if (this.isFullScreen) {
        this.enterFullScreen();
      } else {
        this.exitFullScreen();
      }
    },
    handleSelectionRoom() {
      this.getModalRoomList();
      this.roomModal = true;
    },
    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}");
        }
      }
    },
    handleCurrentSearch(row, val) {
      //type  1项目选择   2图号选择
      let url =
        row.type == 1
          ? "/api/station_get_order"
          : "/api/station_get_url_number";
      this.axios({
        method: "post",
        url,
        data: {
          page_index:
            row.type == 1 ? this.modal_1_page_index : this.modal_2_page_index,
          page_size:
            row.type == 1 ? this.modal_1_page_size : this.modal_2_page_size,
          order_no: row.type == 1 ? val : this.selectedInfo.order_no,
          url_number: row.type == 1 ? "" : val,
        },
      }).then((res) => {
        if (res.code == 200) {
          if (row.type == 1) {
            row.list = res.data.data;
            this.modal_1_total = res.data.total;
          } else {
            row.list = [];
            this.modal_2_total = res.data.total;
            let length = Math.ceil(res.data.data.length / 10);
            for (let index = 0; index < length; index++) {
              row.list.push({
                //最后一位不一定刚好10个
                title:
                  length - index == 1
                    ? `${res.data.data[10 * index].url_number}~${
                        res.data.data[res.data.data.length - 1].url_number
                      }`
                    : `${res.data.data[10 * index].url_number}~${
                        res.data.data[10 * index + 10].url_number
                      }`,
                children: res.data.data.slice(10 * index, 10 * index + 10),
              });
            }
          }
        }
      });
    },
    //项目、图号确认
    handleSelectionComfirm(row) {
      console.log(`row`, row);
      // 这里需要把弹框关闭之后赋值到selectedInfo上
      // this.selectedInfo.order_no;
      // 1 项目选择  2图号选择
      if (row.type == 1) {
        this.selectedInfo.order_no = this.chooseOrderNo.order_no;
        this.selectedInfo.residential_name = this.chooseOrderNo.residential_name;
        this.selectionModal = false;
      } else if (row.type == 2) {
        this.selectedInfo.url_number = this.chooseUrlNo.url_number;
        this.selectedInfo.product_id = this.chooseUrlNo.product_id;
        this.selectionDetailModal = false;
        this.getChipDetail();
      }
      // order_no: "20211010",
      // residential_name: "2",
      // url_number: "3",
      // row_no: [],
    },
    // 获取具体详情
    getChipDetail() {
      this.axios({
        method: "post",
        url: "/api/station_get_order_product_pr",
        data: {
          order_no: this.selectedInfo.order_no,
          product_id: this.selectedInfo.product_id,
          rows: this.selectedInfo.rows,
          page_index: this.page_index,
          page_size: this.page_size,
        },
      }).then((res) => {
        if (res.code == 200) {
          console.log(`res`, res);
          res.data.data.map((v) => (v.isChoosed = false));
          this.contentData = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    handlePrint() {
      if (!this.selectedObj.isChoosed) {
        return this.$Message.warning("请选择数据");
      }
      if (this.selectedObj.type != 1) {
        return this.$Message.warning("该部件不含芯片，无需打印");
      }
      if (this.selectedObj.un_print == 0) {
        this.selectedObj.print_num = this.selectedObj.on_print;
      } else {
        this.selectedObj.print_num = this.selectedObj.un_print;
      }
      this.printModal = true;
    },
    handlePrintComfirm(row, type) {
      if (this.modalRoomListSelected.length != this.selectedObj.print_num) {
        return this.$Message.warning("与打印数量不符");
      }
      let ids = this.modalRoomListSelected.map((v) => {
        return v.id;
      });
      let data = type
        ? {
            order_no: this.selectedInfo.order_no,
            product_id: this.selectedInfo.product_id,
            rows: this.selectedInfo.rows,
            num: this.selectedObj.print_num,
            id: row.id,
            ids,
            type,
          }
        : {
            order_no: this.selectedInfo.order_no,
            product_id: this.selectedInfo.product_id,
            rows: this.selectedInfo.rows,
            num: this.selectedObj.print_num,
            id: row.id,
          };
      this.axios({
        method: "post",
        url: "/api/station_print",
        data,
      }).then((resp) => {
        if (resp.code == 200) {
          this.handlePrintChips(resp.data);
          this.printModal = false;
          this.roomModal = false;
        }
      });
    },
    handleOk() {
      if (!this.selectedObj.isChoosed) {
        return this.$Message.warning("请选择数据");
      }
      if (this.selectedObj.type == 1 && this.selectedObj.un_print == 0) {
        this.selectedObj.ok_num =
          this.selectedObj.on_print - this.selectedObj.on_complete;
        this.okModal = true;
      } else if (this.selectedObj.type != 1) {
        this.selectedObj.ok_num = this.selectedObj.un_complete;
        this.okModal = true;
      } else {
        return this.$Message.warning("部件存在未打印芯片，请先打印");
      }
    },
    handleRoomCancel() {
      this.modalRoomList.map((v) => {
        v.isCurrent = false;
      });
      this.modalRoomListSelected = [];
      this.roomModal = false;
    },
    handleOkComfirm(row) {
      this.axios({
        method: "post",
        url: "/api/station_complete",
        data: {
          order_no: this.selectedInfo.order_no,
          product_id: this.selectedInfo.product_id,
          rows: this.selectedInfo.rows,
          num: this.selectedObj.ok_num,
          id: row.id,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.okModal = false;
          this.getChipDetail();
        }
      });
    },
    //行号确认
    handleRowNoComfirm() {
      this.selectedInfo.rows = JSON.parse(JSON.stringify(this.chooseLineNo));
      this.selectionRownolModal = false;
      this.getChipDetail();
    },
    onInput(value) {
      this.currentSearchValue = this.currentSearchValue + "" + value;
      this.handleCurrentSearch(
        this.currencySelectedObj,
        this.currentSearchValue
      );
    },
    onDelete() {
      this.currentSearchValue = this.currentSearchValue.substring(
        0,
        this.currentSearchValue.length - 1
      );
      this.handleCurrentSearch(
        this.currencySelectedObj,
        this.currentSearchValue
      );
    },
    keyboardOkTap(value) {
      let max;
      if (this.selectedObj.type == 1) {
        max = this.selectedObj.on_print - this.selectedObj.on_complete;
      } else {
        max = this.selectedObj.un_complete;
      }
      this.selectedObj.ok_num =
        (this.selectedObj.ok_num ? this.selectedObj.ok_num : "") + "" + value;
      if (this.selectedObj.ok_num * 1 > max) {
        this.selectedObj.ok_num = max;
      }
      this.$forceUpdate();
    },
    keyboardOkDele() {
      this.selectedObj.ok_num = (this.selectedObj.ok_num + "").substring(
        0,
        this.selectedObj.ok_num.length - 1
      );
      this.$forceUpdate();
    },
    keyboardPrintTap(value) {
      let max = this.selectedObj.on_print + this.selectedObj.un_print;
      this.selectedObj.print_num =
        (this.selectedObj.print_num ? this.selectedObj.print_num : "") +
        "" +
        value;
      if (this.selectedObj.print_num * 1 > max) {
        this.selectedObj.print_num = max;
      }
      this.$forceUpdate();
    },
    keyboardPrintDele() {
      this.selectedObj.print_num = (this.selectedObj.print_num + "").substring(
        0,
        this.selectedObj.print_num.length - 1
      );
      this.$forceUpdate();
    },
    keyboardTap(value) {
      this.keyboardObj[this.keyboardVal] =
        (this.keyboardObj[this.keyboardVal]
          ? this.keyboardObj[this.keyboardVal]
          : "") +
        "" +
        value;
    },
    keyboardDele() {
      this.keyboardObj[this.keyboardVal] = this.keyboardObj[
        this.keyboardVal
      ].substring(0, this.keyboardObj[this.keyboardVal].length - 1);
    },
    handleRowNoInput(row, type) {
      if (type == 1) {
        this.keyboardVal = "start";
      } else {
        this.keyboardVal = "end";
      }
      this.keyboardObj = row;
      this.show2 = true;
    },
    handleOkInput() {
      this.show3 = true;
    },
    handlePrintInput() {
      this.show4 = true;
    },
    changePage(e) {
      this.page_index = e;
      this.getChipDetail();
    },
    changeModalPage(e) {
      this.currencySelectedObj.type == 1
        ? (this.modal_1_page_index = e)
        : (this.modal_2_page_index = e);
      this.handleCurrentSearch(
        this.currencySelectedObj,
        this.currentSearchValue
      );
    },
    changeRoomPage(e) {
      this.modal_room_page_index = e;
      this.getModalRoomList();
    },
    getModalRoomList() {
      this.axios({
        method: "post",
        url: "/api/station_get_print_house",
        data: {
          order_no: this.selectedInfo.order_no,
          product_id: this.selectedInfo.product_id,
          rows: this.selectedInfo.rows,
          page_index: this.modal_room_page_index,
          page_size: this.modal_room_page_size,
          id: this.selectedObj.id,
        },
      }).then((res) => {
        if (res.code == 200) {
          res.data.data.map((v) => {
            v.isCurrent = false;
            this.modalRoomListSelected &&
              this.modalRoomListSelected.map((w) => {
                if (w.id == v.id) {
                  v.isCurrent = true;
                }
              });
          });
          this.modalRoomList = res.data.data;
          this.modal_room_total = res.data.total;
        }
      });
    },
    handlePrintChips(contents) {
      this.axios.get("/api/get_print_url").then((res) => {
        let data = {};
        // let url = "http://192.168.0.145:888/postek/print"; //request_url
        let url = `http://${res.data.request_url}:888/postek/print`; //request_url
        data.reqParam = "1"; //这个一般不用改，如需改，查api
        let printparamsJsonArray = [];
        // let IP = "192.168.1.58";//print_url
        // let IP = "192.168.0.199"; //print_url
        let IP = res.data.print_url;
        let port = 9100;
        let IP_Port = IP + "," + port;
        printparamsJsonArray.push({ PTK_Connect_Timer: IP_Port + ",1" });
        printparamsJsonArray.push({ PTK_ClearBuffer: "" });
        printparamsJsonArray.push({ PTK_SetDirection: "B" });
        printparamsJsonArray.push({ PTK_SetPrintSpeed: "4" });
        printparamsJsonArray.push({ PTK_SetDarkness: "10" });
        printparamsJsonArray.push({
          PTK_SetLabelHeight: 624 + "," + 24 + ",0,false",
        });
        printparamsJsonArray.push({ PTK_SetLabelWidth: 1080 });
        console.log(`contents`, contents);
        contents.map((content) => {
          //贝斯特打印格式
          //上
          const printContent_l1 = `项目：${content.client_name}`;
          printparamsJsonArray.push({
            PTK_DrawText_TrueType:
              "100,40,60,0,微软雅黑,1,700,0,0,0," + printContent_l1,
          });
          const printContent_l1_2 = `区域：${
            content.house ? content.house + "-" : ""
          }${content.layer ? content.layer : ""}${
            content.position ? content.position : ""
          }`;
          printparamsJsonArray.push({
            PTK_DrawText_TrueType:
              "600,40,60,0,微软雅黑,1,700,0,0,0," + printContent_l1_2,
          });
          const printContent_l2 = `房号：${content.number_detail}`;
          printparamsJsonArray.push({
            PTK_DrawText_TrueType:
              "100,110,60,0,微软雅黑,1,700,0,0,0," + printContent_l2,
          });
          const printContent_l2_2 = `产品：${content.product_title}`;
          printparamsJsonArray.push({
            PTK_DrawText_TrueType:
              "600,110,60,0,微软雅黑,1,700,0,0,0," + printContent_l2_2,
          });
          const printContent_l3 = `图号：${content.url_number}`;
          printparamsJsonArray.push({
            PTK_DrawText_TrueType:
              "100,180,60,0,微软雅黑,1,700,0,0,0," + printContent_l3,
          });
          const printContent_l3_2 = `部件：${content.part_title}`;
          printparamsJsonArray.push({
            PTK_DrawText_TrueType:
              "600,180,60,0,微软雅黑,1,700,0,0,0," + printContent_l3_2,
          });
          const printContent_l4 = `木皮：${content.color_title}`;
          printparamsJsonArray.push({
            PTK_DrawText_TrueType:
              "100,320,60,0,微软雅黑,1,700,0,0,0," + printContent_l4,
          });
          const printContent_l4_2 = `尺寸：${content.measure}`;
          printparamsJsonArray.push({
            PTK_DrawText_TrueType:
              "100,250,60,0,微软雅黑,1,700,0,0,0," + printContent_l4_2,
          });
          //下
          printparamsJsonArray.push({
            PTK_DrawText_TrueType:
              "100,435,45,0,微软雅黑,1,700,0,0,0," + printContent_l1,
          });
          printparamsJsonArray.push({
            PTK_DrawText_TrueType:
              "600,435,45,0,微软雅黑,1,700,0,0,0," + printContent_l1_2,
          });
          printparamsJsonArray.push({
            PTK_DrawText_TrueType:
              "100,480,45,0,微软雅黑,1,700,0,0,0," + printContent_l2,
          });
          printparamsJsonArray.push({
            PTK_DrawText_TrueType:
              "600,480,45,0,微软雅黑,1,700,0,0,0," + printContent_l2_2,
          });
          printparamsJsonArray.push({
            PTK_DrawText_TrueType:
              "100,525,45,0,微软雅黑,1,700,0,0,0," + printContent_l3,
          });
          printparamsJsonArray.push({
            PTK_DrawText_TrueType:
              "600,525,45,0,微软雅黑,1,700,0,0,0," + printContent_l3_2,
          });
          printparamsJsonArray.push({
            PTK_DrawText_TrueType:
              "100,570,45,0,微软雅黑,1,700,0,0,0," + printContent_l4,
          });
          printparamsJsonArray.push({
            PTK_DrawText_TrueType:
              "600,570,45,0,微软雅黑,1,700,0,0,0," + printContent_l4_2,
          });
          // 17，35 420
          printparamsJsonArray.push({
            PTK_RWRFIDLabel:
              "1,0,0," + content.chip.length / 2 + ",1," + content.chip,
          });
          printparamsJsonArray.push({ PTK_PrintLabel: "1,1" });
        });
        // contents.map((content) => {
        //   //江山打印格式
        //   //上
        //   const printContent_l1 = `单号：${content.order_no}`;
        //   printparamsJsonArray.push({
        //     PTK_DrawText_TrueType:
        //       "100,40,60,0,微软雅黑,1,700,0,0,0," + printContent_l1,
        //   });
        //   const printContent_l1_2 = `型号：${content.product_title}`;
        //   printparamsJsonArray.push({
        //     PTK_DrawText_TrueType:
        //       "600,40,60,0,微软雅黑,1,700,0,0,0," + printContent_l1_2,
        //   });
        //   const printContent_l2 = `尺寸：${content.measure}`;
        //   printparamsJsonArray.push({
        //     PTK_DrawText_TrueType:
        //       "100,110,60,0,微软雅黑,1,700,0,0,0," + printContent_l2,
        //   });
        //   const printContent_l2_2 = `工艺：${content.process_title}`;
        //   printparamsJsonArray.push({
        //     PTK_DrawText_TrueType:
        //       "600,110,60,0,微软雅黑,1,700,0,0,0," + printContent_l2_2,
        //   });
        //   const printContent_l3 = `颜色：${content.color_title}`;
        //   printparamsJsonArray.push({
        //     PTK_DrawText_TrueType:
        //       "100,250,60,0,微软雅黑,1,700,0,0,0," + printContent_l3,
        //   });
        //   const printContent_l3_2 = `部件：${content.part_title}`;
        //   printparamsJsonArray.push({
        //     PTK_DrawText_TrueType:
        //       "100,180,60,0,微软雅黑,1,700,0,0,0," + printContent_l3_2,
        //   });
        //   //下
        //   printparamsJsonArray.push({
        //     PTK_DrawText_TrueType:
        //       "100,435,45,0,微软雅黑,1,700,0,0,0," + printContent_l1,
        //   });
        //   printparamsJsonArray.push({
        //     PTK_DrawText_TrueType:
        //       "600,435,45,0,微软雅黑,1,700,0,0,0," + printContent_l1_2,
        //   });
        //   printparamsJsonArray.push({
        //     PTK_DrawText_TrueType:
        //       "100,480,45,0,微软雅黑,1,700,0,0,0," + printContent_l2,
        //   });
        //   printparamsJsonArray.push({
        //     PTK_DrawText_TrueType:
        //       "600,480,45,0,微软雅黑,1,700,0,0,0," + printContent_l2_2,
        //   });
        //   printparamsJsonArray.push({
        //     PTK_DrawText_TrueType:
        //       "100,525,45,0,微软雅黑,1,700,0,0,0," + printContent_l3,
        //   });
        //   printparamsJsonArray.push({
        //     PTK_DrawText_TrueType:
        //       "600,525,45,0,微软雅黑,1,700,0,0,0," + printContent_l3_2,
        //   });
        //   printparamsJsonArray.push({
        //     PTK_RWRFIDLabel:
        //       "1,0,0," + content.chip.length / 2 + ",1," + content.chip,
        //   });
        //   printparamsJsonArray.push({ PTK_PrintLabel: "1,1" });
        // });
        printparamsJsonArray.push({ PTK_CloseConnect: "" });
        data.printparams = printparamsJsonArray;
        let sub_data = JSON.parse(JSON.stringify(data));
        sub_data.printparams = JSON.stringify(sub_data.printparams);
        let _this = this;
        $.ajax({
          type: "post",
          url,
          data: sub_data,
          dataType: "json",
          timeout: 5000,
          success: function(result) {
            if (result.retval == "0") {
              _this.$Message.success("发送成功");
              _this.getChipDetail();
            } else {
              _this.$Message.error("发送失败，返回结果：" + result.msg);
            }
          },
        });
      });
    },
  },
  // 监听属性 类似于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: 0.1rem;
    border-bottom: 1px solid #e8eaec;
    .fullscreen-content-select-block {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .fullscreen-content-select-block:nth-child(1) {
      width: 30%;
    }
    .fullscreen-content-select-block:nth-child(2) {
      width: 20%;
    }
    .fullscreen-content-select-block:nth-child(3) {
    }
  }
  .fullscreen-content-choose {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-top: 0.1rem;
    margin-bottom: 0.5rem;
    .fullscreen-content-choose-block {
      width: 25%;
      border-radius: 5px;
      border: 1px solid #2d8cf0;
      // margin: 0.1rem 1%;
      padding: 1%;
      position: relative;
      div {
        display: flex;
        justify-content: space-between;
      }
      .chip-tag {
        display: inline-block;
        position: absolute;
        width: 0.75rem;
        top: 0;
        left: 50%;
        background-color: #fadb14;
        color: black;
        height: 0.75rem;
        border-radius: 15%;
        text-align: center;
        padding-top: 0.15rem;
        transform: translate(-50%, -10%);
      }
    }
    .fullscreen-content-choose-block-choosen {
      color: white;
      background-color: #2d8cf0;
    }
    .fullscreen-content-choose-block-unchoosen {
      color: #2d8cf0;
      background-color: white;
    }
  }
}
.fullscreen-content-page {
  display: flex;
  justify-content: center;
}
.selection-modal {
  .selection-modal-top {
    display: flex;
    justify-content: center;
  }
  .selection-modal-body {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .selection-modal-body-block {
      cursor: pointer;
      width: 30%;
      margin: 1%;
      padding: 3% 1%;
      background-color: #e9ecef;
      div {
        display: flex;
        justify-content: center;
      }
    }
    .selection-modal-body-block-detail {
      cursor: pointer;
      width: 17%;
      margin: 1%;
      padding: 3% 1%;
      background-color: #e9ecef;
      div {
        display: flex;
        justify-content: center;
      }
    }
    .selection-modal-body-block-choosen,
    .selection-modal-body-block-detail-choosen {
      background-color: #fadb14;
    }
    .selection-modal-body-block-unchoosen,
    .selection-modal-body-block-detail-unchoosen {
      background-color: #e9ecef;
    }
  }
}
.selection-rowno-modal {
  .selection-rowno-modal-body {
    .selection-rowno-modal-body-block {
      margin: 0.5rem 0;
      text-align: center;
    }
  }
}
.selection-print-modal {
  .selection-print-modal-body {
    .selection-print-modal-body-top {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 0.5rem 0;
    }
    .selection-print-modal-body-info {
      padding-top: 16px;
      border-top: 1px solid #e8eaec;
      text-align: center;
    }
  }
}
.icon-wrapper {
  position: relative;
  font-size: 0.25rem;
}
.icon-close {
  position: absolute;
  right: -0.35rem;
  top: -0.2rem;
}
/deep/.ivu-page-item {
  display: inline-block;
  font-size: 0.5rem;
  height: 1rem;
  line-height: 1rem;
  width: 1rem;
}
/deep/.ivu-page-prev,
/deep/.ivu-page-next {
  display: inline-block;
  font-size: 0.5rem;
  height: 1rem;
  line-height: 1rem;
  width: 1rem;
  a {
    font-size: 0.5rem;
  }
}
/deep/.fullscreen-content-page {
  display: flex;
  justify-content: space-around;
}
</style>