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

<template>
  <div>
    <Modal v-model="fullscreenModal" fullscreen title="工位屏">
      <div slot="header">
        <span style="font-size: 0.5rem">工位屏</span>
        <div class="fullscreen-title-btn">
          <Button
            @click="handleWideScreenClick"
            size="large"
            id="full_screen_btn"
            type="primary"
            style="margin-right: 1rem"
          >
            {{ isWideScreen ? "完整模式" : "简单模式" }}
          </Button>
          <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
            style="margin-right: 1rem"
            @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',
              isWideScreen ? 'fullscreen-content-choose-block-wide' : '',
            ]"
            v-for="choose in contentData"
            :key="choose.row"
            @click="handleChooseBlockClick(choose)"
          >
            <div
              :class="[isWideScreen ? 'chip-tag-choosed' : 'chip-tag']"
              v-show="choose.type == 1"
            >
              芯片
              <Icon
                size="20px"
                :style="
                  isWideScreen
                    ? 'font-size: 1rem; transform: translate(0, -50%)'
                    : 'font-size: 1rem; transform: translate(0, -40%)'
                "
                style="font-size: 1rem; transform: translate(0, -40%)"
                :color="choose.isChoosed ? '#2d8cf0' : 'white'"
                type="md-arrow-dropup"
              />
            </div>
            <div v-show="!isWideScreen">
              <span>行号</span>
              <span>{{ choose.row_no }}</span>
            </div>
            <div v-show="!isWideScreen">
              <span>部件</span>
              <span>{{ choose.part_title }}</span>
            </div>
            <div v-show="!isWideScreen">
              <span>材料</span>
              <span>{{ choose.sub_part_title }}</span>
            </div>
            <div v-show="!isWideScreen">
              <span>毛料尺寸</span>
              <span>{{ choose.wool_size }}</span>
            </div>
            <div v-show="!isWideScreen">
              <span>精裁尺寸</span>
              <span>{{ choose.cut_size }}</span>
            </div>
            <div v-show="isWideScreen" class="wide-screen-rowno">
              <span
                :class="[
                  choose.isChoosed
                    ? 'wide-screen-rowno-span-choosed'
                    : 'wide-screen-rowno-span',
                ]"
                >{{ choose.row_no }}</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"
            :page-size="page_size"
            :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.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>
  </div>
</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: "订单编号/项目名称选择",
        currentSearchValue: "",
        list: [],
        hasChild: false,
      },
      urlObj: {
        title: "图号选择",
        currentSearchValue: "",
        list: [],
        hasChild: true,
      },
      rownoObj: {},
      currencySelectedObj: {
        title: "订单编号/项目名称选择",
        type: 1,
        list: [],
      },
      selectedInfo: {
        order_no: "",
        residential_name: "",
        url_number: "",
        product_id: "",
        rows: [],
      },
      page_index: 1,
      page_size: 6,
      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: [],
      isWideScreen: localStorage.getItem("isWideScreen") || false,
    };
  },
  // 生命周期 - 创建完成（可以访问当前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.currentSearchValue = obj.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;
        this.currentSearchValue = this.rownoObj.currentSearchValue;
        this.contentData = [];
        this.total = 0;
      } else {
        // 订单号
        this.chooseOrderNo = obj;
        this.currentSearchValue = this.ordernoObj.currentSearchValue;
      }
      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();
      }
    },
    handleWideScreenClick() {
      this.isWideScreen = !this.isWideScreen;
      localStorage.setItem("isWideScreen", this.isWideScreen);
      if (this.isWideScreen) {
        this.page_size = 12;
        this.enterWideScreen();
      } else {
        this.page_size = 6;
        this.exitWideScreen();
      }
      this.getChipDetail();
    },
    enterWideScreen() {},
    exitWideScreen() {},
    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 (
        type &&
        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) {
          // usb打印/ip打印
          this.axios.get("/api/get_print_local_url").then((res) => {
            console.log(res);
            if (res.code == 200) {
              if (res.data.state) {
                this.handlePrintChipsUsb(resp.data, res.data.type);
              } else {
                this.handlePrintChipsIp(resp.data, res.data.type);
              }
            }
          });
          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;
        }
      });
    },
    handlePrintChipsUsb(contents, type) {
      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
        printparamsJsonArray.push({ PTK_OpenUSBPort: 255 });
        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 });
        // 打印类型 1江山 2贝斯特
        if (type == 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" });
          });
        } else {
          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" });
          });
        }
        printparamsJsonArray.push({ PTK_CloseUSBPort: "" });
        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) {
            _this.getChipDetail();
            if (result.retval == "0") {
              _this.$Message.success("发送成功");
            } else {
              _this.$Message.error("发送失败，返回结果：" + result.msg);
            }
          },
          error: function() {
            _this.getChipDetail();
          },
        });
      });
    },
    handlePrintChipsIp(contents, type) {
      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);
        if (type == 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" });
          });
        } else {
          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" });
          });
        }
        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) {
            _this.getChipDetail();
            if (result.retval == "0") {
              _this.$Message.success("发送成功");
            } else {
              _this.$Message.error("发送失败，返回结果：" + result.msg);
            }
          },
          error: function() {
            _this.getChipDetail();
          },
        });
      });
    },
  },
  // 监听属性 类似于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 {
  font-size: 26px;
  font-family: "Microsoft YaHei", 微软雅黑;
  font-weight: bold;
  .fullscreen-content-select {
    display: flex;
    justify-content: flex-start;
    padding-bottom: 0.1rem;
    border-bottom: 1px solid #e8eaec;
    .fullscreen-content-select-block {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .fullscreen-content-select-block:nth-child(1) {
      width: 30%;
    }
    .fullscreen-content-select-block:nth-child(2) {
      width: 30%;
    }
    .fullscreen-content-select-block:nth-child(3) {
      width: 20%;
    }
  }
  .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: 33.33%;
      border-radius: 5px;
      border: 1px solid #2d8cf0;
      // margin: 0.1rem 1%;
      padding: 1%;
      position: relative;
      div {
        display: flex;
        justify-content: space-between;
        // margin-top: 5px;
      }
      .chip-tag {
        display: inline-block;
        position: absolute;
        width: 1rem;
        top: 0;
        left: 50%;
        font-size: 18px;
        background-color: #fadb14;
        color: black;
        height: 0.75rem;
        border-radius: 15%;
        text-align: center;
        padding-top: 0.15rem;
        transform: translate(-50%, -10%);
      }
      .chip-tag-choosed {
        display: inline-block;
        position: absolute;
        width: 1rem;
        top: 0;
        left: 15%;
        font-size: 18px;
        background-color: #fadb14;
        color: black;
        height: 0.75rem;
        border-radius: 15%;
        text-align: center;
        padding-top: 0.15rem;
        transform: translate(-10%, -10%) !important;
      }
    }
    .fullscreen-content-choose-block-wide {
      width: 24.5%;
    }
    .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/.ivu-modal-close {
  border: 1px solid black;
}
/deep/.fullscreen-content-page {
  display: flex;
  justify-content: space-around;
}
.wide-screen-rowno {
  display: flex;
  justify-content: center !important;
  span {
    display: inline-block;
    text-align: center;
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    border-radius: 50%;
    font-size: 1.5rem;
  }
  .wide-screen-rowno-span-choosed {
    color: #2d8cf0;
    background-color: white;
  }
  .wide-screen-rowno-span {
    color: white;
    background-color: #2d8cf0;
  }
}
</style>