<template>
  <div class="app-container">
    <el-form
      label-width="120px"
      :model="form"
      ref="ruleForm"
      :rules="rules"
      :show-message="false"
    >
      <!-- 基本信息 -->
      <div class="basic-details-title">
        <span class="border-span">基本信息</span>
      </div>
      <el-row>
        <el-col :span="8">
          <el-form-item label="条码类型" prop="dictBarCode">
            <DictSelection
              dictName="条码分类"
              :disabled="!!viewForm"
              clearable
              @itemChange="getStripcode"
              v-model="form.dictBarCode"
            ></DictSelection>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="绑定设备分类" prop="equCode">
            <selectTree
              ref="tree"
              class="form-input"
              style="width: 100%"
              :options="treeList"
              :initStr="selectTreeEquVal"
              :props="{
                value: 'code',
                label: 'name',
                children: 'children'
              }"
              @getValue="asstClick"
            />
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="状态" prop="status">
            <el-select
              class="form-input"
              size="small"
              style="width: 100%"
              clearable
              v-model="form.status"
              placeholder="请选择"
            >
              <el-option
                v-for="item in state"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 添加条码信息 -->
      <div class="basic-details-title">
        <span class="border-span">添加条码信息</span>
      </div>
      <div class="table">
        <el-table
          ref="singleTable"
          :data="barCodeList"
          border
          tooltip-effect="dark"
          style="width: 100%"
          class="el-table__body-wrapper"
          :header-cell-style="{ background: '#F0F3F3' }"
          :header-row-style="{ lineHeight: '0' }"
          @selection-change="handleSelectionChange"
          @select-all="selectAll"
          @select="handleSelectChange"
        >
          <el-table-column
            type="selection"
            :selectable="checkSelectable"
            width="55"
          ></el-table-column>
          <div slot="empty" class="list-font">
            <p>请选择条码类型</p>
          </div>
          <el-table-column type="index" width="80px" label="序号">
          </el-table-column>
          <el-table-column label="字段code值">
            <template slot-scope="scope">
              <span>{{ scope.row.modeCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="字段名称">
            <template slot-scope="scope">
              <span>{{ scope.row.modeName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="样例数据">
            <template slot-scope="scope">
              <span>{{ scope.row.sampleData }}</span>
            </template>
          </el-table-column>
          <el-table-column label="排序">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model.number="scope.row.sort"
                placeholder="请输入排序"
                :disabled="scope.row.isDisabled"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="分隔符">
            <template slot-scope="scope">
              <el-select
                size="small"
                style="width: 100%"
                v-model="scope.row.separator"
                :disabled="scope.row.isDisabled"
                placeholder="请选择分隔符"
              >
                <el-option
                  v-for="item in separatorList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="字体类型">
            <template slot-scope="scope">
              <el-select
                size="small"
                style="width: 100%"
                v-model="scope.row.codeType"
                :disabled="scope.row.isDisabled"
                clearable
                placeholder="请选择字体类型"
              >
                <el-option
                  v-for="item in codeTypeList"
                  :key="item.id"
                  :label="item.text"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="字体大小">
            <template slot-scope="scope">
              <el-select
                size="small"
                style="width: 100%"
                v-model="scope.row.codeIndex"
                :disabled="scope.row.isDisabled"
                clearable
                placeholder="请选择字体大小"
              >
                <el-option
                  v-for="item in codeIndexList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin: 15px 0">
        <span class="icon-title">条码规则：</span>
        <span>{{ form.bar_name }}</span>
      </div>
      <!-- 图示 -->
      <div class="basic-details-title">
        <span class="border-span">图示</span>
      </div>
      <!-- 条码模板设置 -->
      <div class="barIcon">
        <div style="margin: 10px 0">
          <span class="icon-title">条码模板设置：</span>
          <el-row style="margin: 10px 0">
            <el-col :span="8">
              <el-form-item label="条码摆放类型" prop="putType">
                <el-select
                  size="small"
                  style="width: 100%"
                  v-model="form.putType"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in transformType"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    @click.native="controlRotate(item)"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="条码尺寸" prop="sizeWide">
                <div class="barCodeSize">
                  <el-input
                    size="small"
                    type="number"
                    style="width: 40%"
                    v-model="form.sizeWide"
                    placeholder="宽度"
                  ></el-input
                  ><span> cm</span>
                  <span class="mult">*</span>
                  <el-input
                    size="small"
                    type="number"
                    style="width: 40%"
                    v-model="form.sizeLong"
                    placeholder="高度"
                  ></el-input
                  ><span> cm</span>
                </div>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="15">
              <el-form-item label="字体大小类型">
                <div class="barCodeSize">
                  <el-select
                    size="small"
                    style="width: 40%; margin-right: 10px"
                    v-model="codeIndex"
                    clearable
                    placeholder="请选择字体大小"
                  >
                    <el-option
                      v-for="item in codeIndexList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                      @click.native="getCodeSize(item.id)"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    size="small"
                    style="width: 40%; margin-right: 10px"
                    v-model="codeType"
                    clearable
                    placeholder="请选择字体类型"
                  >
                    <el-option
                      v-for="item in codeTypeList"
                      :key="item.id"
                      :label="item.text"
                      :value="item.text"
                      @click.native="getCodeType"
                    >
                    </el-option>
                  </el-select>
                  <el-input
                    size="small"
                    style="width: 20%"
                    type="number"
                    v-model="codeSize"
                    placeholder="字体大小"
                    @input="getCodeType"
                  ></el-input
                  ><span> px</span>
                </div>
              </el-form-item>
            </el-col> -->
          </el-row>
        </div>
        <!-- 条码编排设置  -->
        <div class="mapShow">
          <!-- 选项图示模板 -->
          <div class="staticMode">
            <div class="modelicon">
              <div class="modelicon-top">
                <div class="sel">
                  <div class="sel-top">
                    <el-select
                      class="el-select"
                      size="small"
                      clearable
                      v-model="form.stripcodeset.code1"
                      placeholder="code1"
                      @clear="clearStripCode('code1')"
                    >
                      <el-option
                        v-for="item in selectIconList"
                        :key="item.id"
                        :label="item.sampleData"
                        :value="item.sampleData"
                        @click.native="
                          handleSelectStripcodeset(
                            item,
                            0,
                            'fontSizeCode1',
                            'typefaceCode1'
                          )
                        "
                      >
                      </el-option>
                    </el-select>
                    <el-select
                      class="el-select"
                      size="small"
                      clearable
                      v-model="form.stripcodeset.code2"
                      placeholder="code2"
                      @clear="clearStripCode('code2')"
                    >
                      <el-option
                        v-for="item in selectIconList"
                        :key="item.id"
                        :label="item.sampleData"
                        :value="item.sampleData"
                        @click.native="
                          handleSelectStripcodeset(
                            item,
                            1,
                            'fontSizeCode2',
                            'typefaceCode2'
                          )
                        "
                      >
                      </el-option>
                    </el-select>
                    <el-select
                      class="el-select"
                      size="small"
                      clearable
                      v-model="form.stripcodeset.code3"
                      @clear="clearStripCode('code3')"
                      placeholder="code3"
                    >
                      <el-option
                        v-for="item in selectIconList"
                        :key="item.id"
                        :label="item.sampleData"
                        :value="item.sampleData"
                        @click.native="
                          handleSelectStripcodeset(
                            item,
                            2,
                            'fontSizeCode3',
                            'typefaceCode3'
                          )
                        "
                      >
                      </el-option>
                    </el-select>
                  </div>
                  <div class="sel-bottom">
                    <el-select
                      class="el-select"
                      size="small"
                      clearable
                      v-model="form.stripcodeset.code4"
                      @clear="clearStripCode('code4')"
                      placeholder="code4"
                    >
                      <el-option
                        v-for="item in selectIconList"
                        :key="item.id"
                        :label="item.sampleData"
                        :value="item.sampleData"
                        @click.native="
                          handleSelectStripcodeset(
                            item,
                            3,
                            'fontSizeCode4',
                            'typefaceCode4'
                          )
                        "
                      >
                      </el-option>
                    </el-select>
                    <el-select
                      class="el-select"
                      size="small"
                      clearable
                      v-model="form.stripcodeset.code5"
                      @clear="clearStripCode('code5')"
                      placeholder="code5"
                    >
                      <el-option
                        v-for="item in selectIconList"
                        :key="item.id"
                        :label="item.sampleData"
                        :value="item.sampleData"
                        @click.native="
                          handleSelectStripcodeset(
                            item,
                            4,
                            'fontSizeCode5',
                            'typefaceCode5'
                          )
                        "
                      >
                      </el-option>
                    </el-select>
                    <el-select
                      class="el-select"
                      size="small"
                      clearable
                      v-model="form.stripcodeset.code6"
                      @clear="clearStripCode('code6')"
                      placeholder="code6"
                    >
                      <el-option
                        v-for="item in selectIconList"
                        :key="item.id"
                        :label="item.sampleData"
                        :value="item.sampleData"
                        @click.native="
                          handleSelectStripcodeset(
                            item,
                            5,
                            'fontSizeCode6',
                            'typefaceCode6'
                          )
                        "
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <div class="logoImg">
                  <!-- <img src="@/assets/img/codeLogo.png" alt="" /> -->
                </div>
              </div>
              <div class="modelicon-bottom">
                <div class="left-con">
                  <div class="sel-box">
                    <el-select
                      class="el-select"
                      size="small"
                      clearable
                      v-model="form.stripcodeset.code7"
                      placeholder="code7"
                      @clear="clearStripCode('code7')"
                    >
                      <el-option
                        v-for="item in selectIconList"
                        :key="item.id"
                        :label="item.sampleData"
                        :value="item.sampleData"
                        @click.native="
                          handleSelectStripcodeset(
                            item,
                            6,
                            'fontSizeCode7',
                            'typefaceCode7'
                          )
                        "
                      >
                      </el-option>
                    </el-select>
                    <el-select
                      class="el-select"
                      size="small"
                      clearable
                      v-model="form.stripcodeset.code8"
                      @clear="clearStripCode('code8')"
                      placeholder="code8"
                    >
                      <el-option
                        v-for="item in selectIconList"
                        :key="item.id"
                        :label="item.sampleData"
                        :value="item.sampleData"
                        @click.native="
                          handleSelectStripcodeset(
                            item,
                            7,
                            'fontSizeCode8',
                            'typefaceCode8'
                          )
                        "
                      >
                      </el-option>
                    </el-select>
                  </div>
                  <div class="sel-box">
                    <el-select
                      class="el-select"
                      size="small"
                      clearable
                      v-model="form.stripcodeset.code9"
                      @clear="clearStripCode('code9')"
                      placeholder="code9"
                    >
                      <el-option
                        v-for="item in selectIconList"
                        :key="item.id"
                        :label="item.sampleData"
                        :value="item.sampleData"
                        @click.native="
                          handleSelectStripcodeset(
                            item,
                            8,
                            'fontSizeCode9',
                            'typefaceCode9'
                          )
                        "
                      >
                      </el-option>
                    </el-select>
                    <el-select
                      class="el-select"
                      size="small"
                      clearable
                      v-model="form.stripcodeset.code10"
                      @clear="clearStripCode('code10')"
                      placeholder="code10"
                    >
                      <el-option
                        v-for="item in selectIconList"
                        :key="item.id"
                        :label="item.sampleData"
                        :value="item.sampleData"
                        @click.native="
                          handleSelectStripcodeset(
                            item,
                            9,
                            'fontSizeCode10',
                            'typefaceCode10'
                          )
                        "
                      >
                      </el-option>
                    </el-select>
                  </div>
                  <div class="sel-box">
                    <el-select
                      class="el-select"
                      size="small"
                      clearable
                      v-model="form.stripcodeset.code11"
                      @clear="clearStripCode('code11')"
                      placeholder="code11"
                    >
                      <el-option
                        v-for="item in selectIconList"
                        :key="item.id"
                        :label="item.sampleData"
                        :value="item.sampleData"
                        @click.native="
                          handleSelectStripcodeset(
                            item,
                            10,
                            'fontSizeCode11',
                            'typefaceCode11'
                          )
                        "
                      >
                      </el-option>
                    </el-select>
                    <el-select
                      class="el-select"
                      size="small"
                      clearable
                      v-model="form.stripcodeset.code12"
                      @clear="clearStripCode('code12')"
                      placeholder="code12"
                    >
                      <el-option
                        v-for="item in selectIconList"
                        :key="item.id"
                        :label="item.sampleData"
                        :value="item.sampleData"
                        @click.native="
                          handleSelectStripcodeset(
                            item,
                            11,
                            'fontSizeCode12',
                            'typefaceCode12'
                          )
                        "
                      >
                      </el-option>
                    </el-select>
                  </div>
                  <div class="sel-box">
                    <el-select
                      class="el-select"
                      size="small"
                      clearable
                      v-model="form.stripcodeset.code13"
                      @clear="clearStripCode('code13')"
                      placeholder="code13"
                    >
                      <el-option
                        v-for="item in selectIconList"
                        :key="item.id"
                        :label="item.sampleData"
                        :value="item.sampleData"
                        @click.native="
                          handleSelectStripcodeset(
                            item,
                            12,
                            'fontSizeCode13',
                            'typefaceCode13'
                          )
                        "
                      >
                      </el-option>
                    </el-select>
                    <el-select
                      class="el-select"
                      size="small"
                      clearable
                      v-model="form.stripcodeset.code14"
                      @clear="clearStripCode('code14')"
                      placeholder="code14"
                    >
                      <el-option
                        v-for="item in selectIconList"
                        :key="item.id"
                        :label="item.sampleData"
                        :value="item.sampleData"
                        @click.native="
                          handleSelectStripcodeset(
                            item,
                            13,
                            'fontSizeCode14',
                            'typefaceCode14'
                          )
                        "
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <div class="vue-qr">
                  <vue-qr
                    :text="(form && form.qrCode) || ''"
                    class="vueQrSize"
                  ></vue-qr>
                </div>
              </div>
            </div>
          </div>
          <!-- 动态图示模板 -->
          <div class="activeMode" v-if="horizontalBool">
            <div
              ref="print-content"
              :class="horizontalBool == true ? 'crosswise' : 'lengthways'"
              :style="
                horizontalBool == true
                  ? 'width:' +
                    horWidth +
                    'cm;' +
                    'height:' +
                    horHeight +
                    'cm;' +
                    'border: 2px black solid;'
                  : 'width:' +
                    verWidth +
                    'cm;' +
                    'height:' +
                    verHeight +
                    'cm;' +
                    'border: 2px black solid;'
              "
            >
              <div class="active-top" v-show="horizontalBool == true">
                <div class="span-con">
                  <div class="con-top">
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode1 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode1
                      "
                      >{{ form.stripcodeset.code1 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode2 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode2
                      "
                      >{{ form.stripcodeset.code2 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode3 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode3
                      "
                      >{{ form.stripcodeset.code3 }}</span
                    >
                  </div>
                  <div class="con-bottom">
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode4 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode4
                      "
                      >{{ form.stripcodeset.code4 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode5 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode5
                      "
                      >{{ form.stripcodeset.code5 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode6 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode6
                      "
                      >{{ form.stripcodeset.code6 }}</span
                    >
                  </div>
                </div>
                <div class="logoImg">
                  <!-- <img src="@/assets/img/codeLogo.png" alt="" /> -->
                </div>
              </div>
              <div class="active-bottom" v-show="horizontalBool == true">
                <div class="left-con">
                  <div class="span-box">
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode7 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode7
                      "
                      >{{ form.stripcodeset.code7 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode8 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode8
                      "
                      >{{ form.stripcodeset.code8 }}</span
                    >
                  </div>
                  <div class="span-box">
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode9 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode9
                      "
                      >{{ form.stripcodeset.code9 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode10 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode10
                      "
                      >{{ form.stripcodeset.code10 }}</span
                    >
                  </div>
                  <div class="span-box">
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode11 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode11
                      "
                      >{{ form.stripcodeset.code11 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode12 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode12
                      "
                      >{{ form.stripcodeset.code12 }}</span
                    >
                  </div>
                  <div class="span-box">
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode13 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode13
                      "
                      >{{ form.stripcodeset.code13 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode14 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode14
                      "
                      >{{ form.stripcodeset.code14 }}</span
                    >
                  </div>
                </div>
                <div class="vue-qr">
                  <vue-qr
                    :logoSrc="configMode.imagePath"
                    :text="(form && form.qrCode) || ''"
                    class="vueQrSize"
                  ></vue-qr>
                </div>
              </div>
              <div v-show="horizontalBool == false" class="vertical-top1">
                <div class="top-img">
                  <div class="top-span">
                    <p
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode1 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode1
                      "
                    >
                      {{ form.stripcodeset.code1 }}
                    </p>
                    <p
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode2 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode2
                      "
                    >
                      {{ form.stripcodeset.code2 }}
                    </p>
                  </div>
                  <div class="logoImg">
                    <!-- <img src="@/assets/img/codeLogo.png" alt="" /> -->
                  </div>
                </div>
                <div class="bottom-span">
                  <div class="top">
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode3 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode3
                      "
                      >{{ form.stripcodeset.code3 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode4 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode4
                      "
                      >{{ form.stripcodeset.code4 }}</span
                    >
                  </div>
                  <div class="bottom">
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode5 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode5
                      "
                      >{{ form.stripcodeset.code5 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode6 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode6
                      "
                      >{{ form.stripcodeset.code6 }}</span
                    >
                  </div>
                </div>
              </div>
              <div v-show="horizontalBool == false" class="vertical-bottom1">
                <div class="bot-top">
                  <div class="bot-con">
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode7 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode7
                      "
                      >{{ form.stripcodeset.code7 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode8 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode8
                      "
                      >{{ form.stripcodeset.code8 }}</span
                    >
                  </div>
                  <div class="bot-con">
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode9 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode9
                      "
                      >{{ form.stripcodeset.code9 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode10 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode10
                      "
                      >{{ form.stripcodeset.code10 }}</span
                    >
                  </div>
                  <div class="bot-con">
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode11 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode11
                      "
                      >{{ form.stripcodeset.code11 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode12 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode12
                      "
                      >{{ form.stripcodeset.code12 }}</span
                    >
                  </div>
                </div>
                <div class="bot-bottom">
                  <div class="qr-span">
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode13 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode13
                      "
                      >{{ form.stripcodeset.code13 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode14 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode14
                      "
                      >{{ form.stripcodeset.code14 }}</span
                    >
                  </div>
                  <div class="vue-qr">
                    <vue-qr
                      :logoSrc="configMode.imagePath"
                      :text="(form && form.qrCode) || ''"
                      class="vueQrSize"
                    ></vue-qr>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="activeMode" v-else>
            <div
              ref="print-content"
              class="lengthways"
              :style="
                'width:' +
                verWidth +
                'cm;' +
                'height:' +
                verHeight +
                'cm;' +
                'border: 2px black solid;'
              "
            >
              <div class="vertical-top1">
                <div class="top-img">
                  <div class="top-span">
                    <p
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode1 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode1
                      "
                    >
                      {{ form.stripcodeset.code1 }}
                    </p>
                    <p
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode2 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode2
                      "
                    >
                      {{ form.stripcodeset.code2 }}
                    </p>
                  </div>
                  <div class="logoImg">
                    <!-- <img src="@/assets/img/codeLogo.png" alt="" /> -->
                  </div>
                </div>
                <div class="bottom-span">
                  <div class="top">
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode3 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode3
                      "
                      >{{ form.stripcodeset.code3 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode4 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode4
                      "
                      >{{ form.stripcodeset.code4 }}</span
                    >
                  </div>
                  <div class="bottom">
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode5 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode5
                      "
                      >{{ form.stripcodeset.code5 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode6 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode6
                      "
                      >{{ form.stripcodeset.code6 }}</span
                    >
                  </div>
                </div>
              </div>
              <div class="vertical-bottom1">
                <div class="bot-top">
                  <div class="vue-qr">
                    <vue-qr
                      :logoSrc="configMode.imagePath"
                      :text="(form && form.qrCode) || ''"
                      class="vueQrSize"
                    ></vue-qr>
                  </div>
                </div>
                <div class="bot-bottom">
                  <div class="bot-con">
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode7 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode7
                      "
                      >{{ form.stripcodeset.code7 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode8 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode8
                      "
                      >{{ form.stripcodeset.code8 }}</span
                    >
                  </div>
                  <div class="bot-con">
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode9 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode9
                      "
                      >{{ form.stripcodeset.code9 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode10 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode10
                      "
                      >{{ form.stripcodeset.code10 }}</span
                    >
                  </div>
                  <div class="bot-con">
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode11 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode11
                      "
                      >{{ form.stripcodeset.code11 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode12 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode12
                      "
                      >{{ form.stripcodeset.code12 }}</span
                    >
                  </div>
                  <div class="bot-con">
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode13 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode13
                      "
                      >{{ form.stripcodeset.code13 }}</span
                    >
                    <span
                      :style="
                        'font-size:' +
                        form.stripcodeset.fontSizeCode14 +
                        'cm;font-family:' +
                        form.stripcodeset.typefaceCode14
                      "
                      >{{ form.stripcodeset.code14 }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 保存按钮 -->
      <div class="page-footer-btn">
        <el-button type="primary" size="small" @click="keep">保存</el-button>
        <el-button size="small" @click="$router.go(-1)">返回</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  import common from '@/api/common';
  import barCode from '@/api/main/barCode';
  // import config from '@/api/feature/config'
  import selectTree from '@/components/selectTree';
  import VueQr from 'vue-qr';
  import codeLogo from '@/assets/img/codeLogo.png';
  import { deepClone } from '@/utils/index';
  import { mapSetArray } from '@/utils/common';
  export default {
    components: { selectTree, VueQr },
    props: {
      viewForm: {
        type: Object,
        default: () => {
          return null;
        }
      }
    },

    data() {
      return {
        form: {
          bar_code: '', //条码规则code拼接
          bar_name: '', //条码规则name拼接
          qrCode: '000', //条码规则数据拼接
          stripcodeset: {
            code1: '',
            code2: '',
            code3: '',
            code4: '',
            code5: '',
            code6: '',
            code7: '',
            code8: '',
            code9: '',
            code10: '',
            code11: '',
            code12: '',
            code13: '',
            code14: '',
            fontSizeCode1: '',
            fontSizeCode2: '',
            fontSizeCode3: '',
            fontSizeCode4: '',
            fontSizeCode5: '',
            fontSizeCode6: '',
            fontSizeCode7: '',
            fontSizeCode8: '',
            fontSizeCode9: '',
            fontSizeCode10: '',
            fontSizeCode11: '',
            fontSizeCode12: '',
            fontSizeCode13: '',
            fontSizeCode14: '',
            typefaceCode1: '',
            typefaceCode2: '',
            typefaceCode3: '',
            typefaceCode4: '',
            typefaceCode5: '',
            typefaceCode6: '',
            typefaceCode7: '',
            typefaceCode8: '',
            typefaceCode9: '',
            typefaceCode10: '',
            typefaceCode11: '',
            typefaceCode12: '',
            typefaceCode13: '',
            typefaceCode14: ''
          },
          // equCode: '', //设备分类code
          // equName: '', //设备分类name
          id: 0,
          putType: 1, //条码摆放类型
          sizeLong: '10', //条码尺寸长
          sizeWide: '15', //条码尺寸宽
          status: null, //状态
          dictBarCode: '', //条码类型code
          dictBarName: '', //条码类型name
          useModeList: [] //条码信息模板数据: code1-code14
        },
        stripcodeList: [], // 条码信息列表数据
        // treeList: [],
        state: [
          { id: 1, name: '生效' },
          { id: 0, name: '失效' }
        ], //状态
        //摆放类型
        transformType: [
          { id: 1, name: '横向摆放' },
          { id: 2, name: '纵向摆放' }
        ],
        //条码列表信息
        barCodeList: [],
        //分割符选择列表
        separatorList: [{ name: '/' }, { name: '#' }],
        horWidth: 10, //横向条码宽高
        horHeight: 15,
        verWidth: 100, //纵向条码宽高
        verHeight: 150,
        //字体大小类型
        codeIndex: '',
        codeIndexList: [
          { id: 0.3, name: '小' },
          { id: 0.5, name: '中' },
          { id: 0.8, name: '大' }
        ],
        fontSizeObj: {
          小: 0.3,
          中: 0.5,
          大: 0.8
        },
        codeType: '',
        codeTypeList: [
          { id: 1, text: '宋体' },
          { id: 2, text: '微软雅黑' },
          { id: 3, text: 'Arial' }
        ],
        codeSize: 0.5,
        //摆放类型
        horizontalBool: true,
        //图示模板选择列表数据
        selectIconList: [],
        //条码参数
        configMode: {
          //imagePath: codeLogo
          imagePath: ''
        },
        //必填规则
        rules: {
          dictBarCode: [{ required: true, trigger: 'change' }],
          // equCode: [{ required: true, trigger: 'change' }],
          status: [{ required: true, trigger: 'change' }],
          putType: [{ required: true, trigger: 'change' }],
          sizeWide: [{ required: true, trigger: 'blur' }]
        },
        //编辑绑定设备分类初始值
        selectTreeEquVal: ''
      };
    },

    mounted() {
      /**
       * 新增
       */
      if (!this.viewForm) {
        this.getInit();
        // this.getTreeList()
        return;
      }
      /**
       * 编辑
       */
      this.$nextTick(async () => {
        console.log('详情数据：', this.viewForm);
        this.form = { ...this.viewForm, stripcodeset: this.form.stripcodeset };
        this.horizontalBool = this.viewForm.putType === 1 ? true : false;
        // this.selectTreeEquVal = this.viewForm.equName
        const params = {
          dictCode: this.viewForm.dictBarCode,
          dictValue: this.viewForm.dictBarName
        };
        await this.getStripcode(params); // 获取当前条码类型下所有数据列表
        let arr = mapSetArray(this.viewForm.useModeList, 'modeCode');
        arr = arr.filter((item) => item.modeCode !== '');
        // console.log('去重后的条码列表数据：', arr);

        // 将回显的数据通过 modeCode 字段一一对应回显到条码信息表格
        arr.map((item) => {
          for (let i = 0; i < this.barCodeList.length; i++) {
            if (item.modeCode === this.barCodeList[i].modeCode) {
              this.$set(this.barCodeList[i], 'sort', item.sort);
              this.$set(this.barCodeList[i], 'separator', item.separ);
              this.$set(this.barCodeList[i], 'codeType', item.fontType);
              this.$set(this.barCodeList[i], 'codeIndex', item.fontSize);
            }
          }
        });
        // console.log('条码信息表格：', this.barCodeList)
        this.barCodeList.forEach((item) => {
          let flag =
            item.sort && item.separator && item.codeIndex && item.codeType;
          if (flag) {
            this.$refs.singleTable.toggleRowSelection(item);
          }
        });

        const fontTypeObj = { 1: '宋体', 2: '微软雅黑', 3: 'Arial' };
        const useModeList = this.viewForm.useModeList;
        // 回显条码模板14个下拉数据
        this.$set(this.form, 'stripcodeset', {
          code1: useModeList[0].sampleData,
          code2: useModeList[1].sampleData,
          code3: useModeList[2].sampleData,
          code4: useModeList[3].sampleData,
          code5: useModeList[4].sampleData,
          code6: useModeList[5].sampleData,
          code7: useModeList[6].sampleData,
          code8: useModeList[7].sampleData,
          code9: useModeList[8].sampleData,
          code10: useModeList[9].sampleData,
          code11: useModeList[10].sampleData,
          code12: useModeList[11].sampleData,
          code13: useModeList[12].sampleData,
          code14: useModeList[13].sampleData,
          fontSizeCode1: useModeList[0].fontSize,
          fontSizeCode2: useModeList[1].fontSize,
          fontSizeCode3: useModeList[2].fontSize,
          fontSizeCode4: useModeList[3].fontSize,
          fontSizeCode5: useModeList[4].fontSize,
          fontSizeCode6: useModeList[5].fontSize,
          fontSizeCode7: useModeList[6].fontSize,
          fontSizeCode8: useModeList[7].fontSize,
          fontSizeCode9: useModeList[8].fontSize,
          fontSizeCode10: useModeList[9].fontSize,
          fontSizeCode11: useModeList[10].fontSize,
          fontSizeCode12: useModeList[11].fontSize,
          fontSizeCode13: useModeList[12].fontSize,
          fontSizeCode14: useModeList[13].fontSize,
          typefaceCode1: fontTypeObj[useModeList[0].fontType],
          typefaceCode2: fontTypeObj[useModeList[1].fontType],
          typefaceCode3: fontTypeObj[useModeList[2].fontType],
          typefaceCode4: fontTypeObj[useModeList[3].fontType],
          typefaceCode5: fontTypeObj[useModeList[4].fontType],
          typefaceCode6: fontTypeObj[useModeList[5].fontType],
          typefaceCode7: fontTypeObj[useModeList[6].fontType],
          typefaceCode8: fontTypeObj[useModeList[7].fontType],
          typefaceCode9: fontTypeObj[useModeList[8].fontType],
          typefaceCode10: fontTypeObj[useModeList[9].fontType],
          typefaceCode11: fontTypeObj[useModeList[10].fontType],
          typefaceCode12: fontTypeObj[useModeList[11].fontType],
          typefaceCode13: fontTypeObj[useModeList[12].fontType],
          typefaceCode14: fontTypeObj[useModeList[13].fontType]
        });
      });
    },

    watch: {
      form: {
        handler(newVal) {
          //横向
          this.horWidth = newVal.sizeWide;
          this.horHeight = newVal.sizeLong;
          //纵向
          this.verWidth = newVal.sizeWide;
          this.verHeight = newVal.sizeLong;
          // this.horWidth = newVal.sizeWide * 25
          // this.horHeight = newVal.sizeLong * 25
          // //纵向
          // this.verWidth = newVal.sizeWide * 40
          // this.verHeight = newVal.sizeLong * 40
        },
        immediate: true,
        deep: true
      }
      // codeSize: {
      //   handler(newVal, oldVal) {
      //     console.log(newVal);
      //   },
      //   immediate: true,
      // },
    },

    methods: {
      //查询子项列表信息
      async getInit() {
        // let muster = await common.getSource({
        //   code: 'strip_type,connector'
        // })
        // let res = await barCode.getDictionary({
        //   code: 'typeface'
        // })
        // console.log('分隔符\条码类型:', muster);
        //分隔符
        // this.separatorList = muster.data.connector
        //条码类型
        //字体类型
        // this.codeTypeList = res.data;
        // console.log('字体类型:', res);
      },
      // 树形结构数据
      // getTreeList () {
      //   config.tree().then(res => {
      //     this.treeList = res.data
      //   })
      // },
      //选择条码类型获取条码信息列表
      async getStripcode(val) {
        let res = await barCode.getBarModeList(val.dictCode);
        this.form.dictBarCode = val.dictCode;
        this.form.dictBarName = val.dictValue;
        // console.log(res)
        if (res.code == 0) {
          let arr = res.data;
          arr.forEach((item) => {
            item.isDisabled = false;
            item.separ = '';
          });
          this.barCodeList = arr;
          // console.log('条码信息表格：', this.barCodeList);
          //选择后清除操作的数据
          this.form.bar_name = '';
          this.form.bar_code = '';
          this.form.qrCode = '';
          this.form.stripcodeset.code1 = '';
          this.form.stripcodeset.code2 = '';
          this.form.stripcodeset.code3 = '';
          this.form.stripcodeset.code4 = '';
          this.form.stripcodeset.code5 = '';
          this.form.stripcodeset.code6 = '';
          this.form.stripcodeset.code7 = '';
          this.form.stripcodeset.code8 = '';
          this.form.stripcodeset.code9 = '';
          this.form.stripcodeset.code10 = '';
          this.form.stripcodeset.code11 = '';
          this.form.stripcodeset.code12 = '';
          this.form.stripcodeset.code13 = '';
          this.form.stripcodeset.code14 = '';
          this.selectIconList = [];
          if (!this.viewForm) {
            for (let i = 0; i < 14; i++) {
              this.form.useModeList.push({
                barAvg: 'code' + (i + 1), // code1 - code14位置编码
                fontSize: '', // 字体大小
                fontType: '', // 字体类型
                modeCode: '', // 模型code
                modeName: '', // 模型name
                sampleData: '', // 样例数据
                separ: '', // 分隔符
                sort: null // 顺序
              });
            }
          }
        }
      },
      //设备分类树
      // asstClick (data) {
      //   if (data == null) {
      //     this.form.equCode = ''
      //     this.form.equName = ''
      //   } else {
      //     this.form.equCode = data.code
      //     this.form.equName = data.name
      //   }
      // },
      // 列表单个选择
      handleSelectChange(selection, row) {
        console.log(selection, row);
        if (!selection.find((i) => i.id === row.id)) {
          //  未选中
          // this.selectIconList.find()
          for (let index = 1; index < 15; index++) {
            console.log(this.form.stripcodeset[`code${index}`]);
            if (this.form.stripcodeset[`code${index}`] === row.sampleData) {
              this.clearStripCode(`code${index}`);
              this.form.stripcodeset[`code${index}`] = '';
            }
          }
        }
      },
      //列表选择
      handleSelectionChange(val) {
        //整理提交的条码信息列表数组
        this.subInfoList(val);
        if (val.length != 0) {
          //按照排序从小到大排序选择的数组得到一个新的数组ArrAay（选择排序）
          var array = val;
          for (var i = 0; i < array.length; i++) {
            var min, flagArr;
            min = i;
            for (var j = i + 1; j < array.length; j++) {
              if (array[j].sort < array[min].sort) {
                min = j;
              }
            }
            flagArr = array[i];
            array[i] = array[min];
            array[min] = flagArr;
          }
          // console.log('-----array------', array);
          //条码模板子选项列表
          let modeSelectList = [];
          //条码规则
          let nameStr = ''; //名称拼接
          let codeStr = ''; //code拼接
          let connectorStr = ''; //数据拼接,用于生成二维码
          /**
           * 条码模板下拉数据 Start
           */
          array.forEach((item, index) => {
            let obj = {
              id: index,
              modeCode: item.modeCode,
              modeName: item.modeName,
              sampleData: item.sampleData,
              codeIndex: item.codeIndex,
              codeType: item.codeType,
              separ: item.separator,
              sort: item.sort
            };
            modeSelectList.push(obj);
            nameStr += item.modeName;
            nameStr += item.separator;
            codeStr += item.modeCode;
            codeStr += item.separator;
            connectorStr += item.sampleData;
            connectorStr += item.separator;
          });
          //去除最后拼接的分隔符
          this.form.bar_name = nameStr.slice(0, -1);
          this.form.bar_code = codeStr.slice(0, -1);
          this.form.qrCode = connectorStr.slice(0, -1);
          this.selectIconList = modeSelectList;
          console.log('-----selectIconList------', this.selectIconList);
          /**
           * 条码模板下拉数据 End
           */
        }
      },
      //处理提交的条码信息列表数组
      subInfoList(arr) {
        // console.log('----barCodeList----', this.barCodeList);
        let barCodeArr = this.barCodeList;
        let newArr = [];
        //取消选中则取消禁用，处理：取出未选中的列表(差集)，修改isDisabled等于false
        var subArr2 = barCodeArr;
        var chajiArr = [...subArr2];
        // console.log('-----subArr2-----', subArr2);
        for (let i = 0; i < arr.length; i++) {
          let flag = false;
          for (let j = 0; j < chajiArr.length; j++) {
            // console.log(arr[i].modeCode)
            // console.log(subArr2[j].modeCode)
            if (
              subArr2[j].modeCode == arr[i].modeCode &&
              subArr2[j].modeName == arr[i].modeName
            ) {
              flag = true;
            }
          }
          if (flag) {
            chajiArr.splice(
              chajiArr.findIndex(
                (chajiItem) => chajiItem.modeCode == arr[i].modeCode
              ),
              1
            );
          }
        }
        // console.log(arr)
        // console.log(chajiArr)
        // console.log(barCodeArr);
        if (arr.length != 0) {
          //选择的列表长度大于0，则考虑将选中的那一行禁用input，若没选中，取消禁用
          //有个小问题，这里不能将barCode外层封装，这是我没想到的
          arr.forEach((selVal) => {
            barCodeArr.forEach((listVal) => {
              if (selVal.modeCode == listVal.modeCode) {
                listVal.isDisabled = true;
              }
            });
          });
          chajiArr.forEach((chajiVal) => {
            barCodeArr.forEach((listVal) => {
              if (chajiVal.modeCode == listVal.modeCode) {
                listVal.isDisabled = false;
              }
            });
          });
        } else {
          barCodeArr.forEach((listVal) => {
            listVal.isDisabled = false;
          });
        }

        // console.log('-----barCodeArr----', barCodeArr);
        barCodeArr.forEach((item) => {
          let obj = {
            barAvg: '', // 条码内区域位置
            modeCode: item.modeCode, // 模型code
            modeName: item.modeName, // 模型name
            fontSize: item.codeIndex, // 字体大小
            fontType: item.codeType, // 字体类型(1:宋体;2:微软雅黑;3:Arial)
            sampleData: item.sampleData, // 样例数据
            separ: item.separator, // 分隔符
            sort: item.sort, // 顺序
            id: item.id,
            state: false
          };
          //整理好的新数组
          newArr.push(obj);
        });
        //列表中被选中的数据改变state状态值
        newArr.forEach((val) => {
          arr.forEach((e) => {
            if (val.modeCode == e.modeCode) {
              val.state = true;
            }
          });
        });
        // console.log('-------newArr-------', newArr)
        this.stripcodeList = newArr;
      },
      //多选限制,排序和分隔符为空不能选择
      checkSelectable(row, index) {
        let flag1 = true;
        // console.log(row);
        if (
          row.sort == '' ||
          row.separator == '' ||
          !row.codeType ||
          !row.codeIndex
        ) {
          flag1 = false;
        } else {
          flag1 = true;
        }
        return flag1;
      },
      //全选限制
      selectAll(val) {
        console.log(val);
        if (val.length === 0) {
          for (let index = 1; index < 15; index++) {
            this.clearStripCode(`code${index}`);
            this.form.stripcodeset[`code${index}`] = '';
          }
        }
        let selectAllBool = false;
        for (let i = 0; i < this.barCodeList.length; i++) {
          if (
            this.barCodeList[i].sort != '' &&
            this.barCodeList[i].separator != '' &&
            this.barCodeList[i].codeType &&
            this.barCodeList[i].codeIndex
          ) {
            selectAllBool = true;
            break;
          }
        }
        if (selectAllBool == false) {
          this.$message.warning('请将排序和分隔符填写完整！');
          this.$refs.singleTable.clearSelection();
        }
      },
      //点击选择摆放类型列表，控制条码摆放类型
      controlRotate(val) {
        // console.log(val)
        if (val.name == '横向摆放') {
          this.horizontalBool = true;
          this.form.sizeWide = 15;
          this.form.sizeLong = 10;
        } else {
          this.horizontalBool = false;
          this.form.sizeWide = 32;
          this.form.sizeLong = 55;
        }
      },

      /**
       * 条码模板下拉改变
       * @param { 下拉数据 option } item
       * @param { 第1-14个序号 } index
       * @param { 字体大小 } size
       * @param { 字体类型 } face
       */
      handleSelectStripcodeset(item, index, size, face) {
        console.log(item);
        const codeIndexObj = { 1: 0.3, 2: 0.5, 3: 0.8 };
        const codeTypeObj = { 1: '宋体', 2: '微软雅黑', 3: 'Arial' };
        this.$set(this.form.stripcodeset, size, item.codeIndex);
        this.$set(this.form.stripcodeset, face, codeTypeObj[item.codeType]);
        this.$forceUpdate();
        // this.form.stripcodeset[size] = codeIndexObj[item.codeIndex]
        // this.form.stripcodeset[face] = item.codeType
        this.form.useModeList[index].fontSize = item.codeIndex;
        this.form.useModeList[index].fontType = item.codeType;
        this.form.useModeList[index].modeCode = item.modeCode;
        this.form.useModeList[index].modeName = item.modeName;
        this.form.useModeList[index].sampleData = item.sampleData;
        this.form.useModeList[index].separ = item.separ;
        this.form.useModeList[index].sort = item.sort;
        console.log('-----useModeList-------', this.form.useModeList);
      },
      // 模板删除
      clearStripCode(code) {
        const obj = this.form.useModeList.find((i) => i.barAvg === code);

        if (obj) {
          obj.modeCode = '';
          obj.modeName = '';
          obj.sampleData = '';
        }
      },
      //点击字体code
      getCodeSize(row, val) {
        console.log(row, val);
        // switch (val) {
        //   case 1:
        //     this.form.stripcodeset.fontSizeCode1 = this.codeSize
        //     this.form.stripcodeset.typefaceCode1 = this.codeType
        //     break
        //   case 2:
        //     this.form.stripcodeset.fontSizeCode2 = this.codeSize
        //     this.form.stripcodeset.typefaceCode2 = this.codeType
        //     break
        //   case 3:
        //     this.form.stripcodeset.fontSizeCode3 = this.codeSize
        //     this.form.stripcodeset.typefaceCode3 = this.codeType
        //     break
        //   case 4:
        //     this.form.stripcodeset.fontSizeCode4 = this.codeSize
        //     this.form.stripcodeset.typefaceCode4 = this.codeType
        //     break
        //   case 5:
        //     this.form.stripcodeset.fontSizeCode5 = this.codeSize
        //     this.form.stripcodeset.typefaceCode5 = this.codeType
        //     break
        //   case 6:
        //     this.form.stripcodeset.fontSizeCode6 = this.codeSize
        //     this.form.stripcodeset.typefaceCode6 = this.codeType
        //     break
        //   case 7:
        //     this.form.stripcodeset.fontSizeCode7 = this.codeSize
        //     this.form.stripcodeset.typefaceCode7 = this.codeType
        //     break
        //   case 8:
        //     this.form.stripcodeset.fontSizeCode8 = this.codeSize
        //     this.form.stripcodeset.typefaceCode8 = this.codeType
        //     break
        //   case 9:
        //     this.form.stripcodeset.fontSizeCode9 = this.codeSize
        //     this.form.stripcodeset.typefaceCode9 = this.codeType
        //     break
        //   case 10:
        //     this.form.stripcodeset.fontSizeCode10 = this.codeSize
        //     this.form.stripcodeset.typefaceCode10 = this.codeType
        //     break
        //   case 11:
        //     this.form.stripcodeset.fontSizeCode11 = this.codeSize
        //     this.form.stripcodeset.typefaceCode11 = this.codeType
        //     break
        //   case 12:
        //     this.form.stripcodeset.fontSizeCode12 = this.codeSize
        //     this.form.stripcodeset.typefaceCode12 = this.codeType
        //     break
        //   case 13:
        //     this.form.stripcodeset.fontSizeCode13 = this.codeSize
        //     this.form.stripcodeset.typefaceCode13 = this.codeType
        //     break
        //   case 14:
        //     this.form.stripcodeset.fontSizeCode14 = this.codeSize
        //     this.form.stripcodeset.typefaceCode14 = this.codeType
        //     break
        // }
      },
      //字体类型，大小实时变化
      getCodeType() {
        this.getCodeSize(this.codeIndex);
      },
      //保存
      async keep() {
        console.log(this.form);
        try {
          await this.$refs.ruleForm.validate();
        } catch (error) {
          this.$message.error({
            message: '请完善必填信息'
          });
          return;
        }
        if (this.stripcodeList.length != 0) {
          let form = deepClone(this.form);
          if (this.viewForm) {
            console.log(form);
            this.$emit('edit', form);
          } else {
            delete form.id;
            delete form.bar_code;
            delete form.bar_name;
            delete form.qrCode;
            delete form.stripcodeset;
            console.log('保存参数：', form);
            let res = barCode.saveBarcode(form);
            if (res.success == true) {
              this.$message.success('添加成功');
              this.$router.go(-1);
            }
          }
        } else {
          this.$message.warning('请选择需要添加的条码规则信息！');
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  .basic-details-title {
    margin-bottom: 12px;
    margin-top: 20px;
    border-bottom: 1px solid #157a2c;
    padding-bottom: 8px;
    display: flex;
    justify-content: space-between;
  }
  .basic-details-title .border-span {
    height: 18px;
    font-size: 16px;
    border-left: 4px solid #157a2c;
    padding-left: 8px;

    font-weight: 500;
  }
  .icon-title {
    margin-left: 10px;
  }
  .barIcon {
    .barCodeSize {
      display: flex;
      span {
        display: inline-block;
        width: 30px;
        margin: 0 5px;
      }
      .mult {
        display: inline-block;
        width: 10px;
        margin-left: -5px;
      }
    }
    .mapShow {
      width: 100%;
      display: flex;
      margin: 20px 0;
      .staticMode {
        width: 42%;
        height: 300px;
        display: flex;
        align-items: center;
        .modelicon {
          border: 2px black solid;
          height: 300px;
          margin: 0;
          padding: 0;
          .modelicon-top {
            width: 100%;
            height: 40%;
            display: flex;
            border-bottom: 2px black solid;
            .sel {
              width: 80%;
              padding: 5px;
              .sel-top,
              .sel-bottom {
                display: flex;
                .el-select {
                  margin: 10px 5px;
                  width: 30%;
                }
              }
            }
            .logoImg {
              width: 20%;
              height: 70%;
              margin: 10px;
              text-align: right;
              img {
                width: 80%;
                height: 80%;
              }
            }
          }
          .modelicon-bottom {
            height: 60%;
            display: flex;
            justify-content: space-between;
            .left-con {
              width: 70%;
              height: 100%;
              display: flex;
              flex-wrap: wrap;
              .sel-box {
                margin: 5px;
                display: flex;
                justify-content: space-between;
                .el-select {
                  margin: 0 5px;
                  width: 50%;
                }
              }
            }
            .vue-qr {
              width: 30%;
              height: 100%;
              border-left: 2px black solid;
              .vueQrSize {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }

      .activeMode {
        width: 58%;
        margin-left: 20px;
        display: flex;
        justify-content: center;
        // align-items: center;
        padding: 20px;
        border: 1px black dashed;
        overflow: auto;
        .active-top {
          width: 100%;
          height: 40%;
          display: flex;
          border-bottom: 2px black solid;
          .span-con {
            width: 80%;
            height: 100%;
            padding: 5px 10px;
            .con-top,
            .con-bottom {
              width: 100%;
              height: 50%;
              display: flex;
              justify-content: space-between;
              span {
                display: inline-block;
                font-weight: bold;
                margin-top: 10px;
              }
            }
          }
          .logoImg {
            width: 20%;
            height: 70%;
            margin: 10px;
            text-align: right;
            img {
              width: 100%;
              height: 80%;
            }
          }
        }
        .active-bottom {
          height: 60%;
          display: flex;
          justify-content: space-between;
          .left-con {
            padding: 5px;
            width: 70%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            .span-box {
              margin-top: 10px;
              width: 100%;
              display: flex;
              justify-content: space-between;
              span {
                font-weight: bold;
                display: inline-block;
                margin: 0 5px;
              }
            }
          }
          .vue-qr {
            width: 40%;
            height: 100%;
            border-left: 2px black solid;
            .vueQrSize {
              width: 100%;
              height: 100%;
            }
          }
        }
        .vertical-top1 {
          width: 100%;
          height: 40%;
          border-bottom: 2px black solid;
          .top-img {
            width: 100%;
            height: 50%;
            padding: 10px;
            display: flex;
            .top-span {
              width: 70%;
              height: 100%;
              margin-top: 10px;
              p {
                font-weight: bold;
                height: 50%;
                line-height: 50%;
              }
            }
            .logoImg {
              width: 30%;
              height: 80%;
              text-align: right;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .bottom-span {
            padding: 10px;
            width: 100%;
            height: 50%;
            .top,
            .bottom {
              width: 100%;
              height: 50%;
              margin-top: 2%;
              display: flex;
              justify-content: space-between;
              span {
                font-weight: bold;
                display: inline-block;
                height: 50%;
                line-height: 50%;
              }
            }
          }
        }
        .vertical-bottom1 {
          width: 100%;
          height: 60%;
          .bot-top {
            width: 100%;
            height: 55%;
            padding: 10px;
            display: flex;
            flex-wrap: wrap;
            .bot-con {
              width: 100%;
              display: flex;
              justify-content: space-between;
              margin-top: 5%;
              span {
                font-weight: bold;
              }
            }
          }
          .bot-bottom {
            width: 100%;
            height: 45%;
            display: flex;
            .qr-span {
              width: 60%;
              height: 100%;
              padding: 10px;
              span {
                font-weight: bold;
                display: inline-block;
                width: 100%;
                height: 50%;
                line-height: 50%;
              }
            }
            .vue-qr {
              width: 50%;
              height: 100%;
              border-left: 2px black solid;
              border-top: 2px black solid;
              .vueQrSize {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
        // .vertical-top2 {
        //   width: 100%;
        //   height: 30%;
        //   border-bottom: 2px black solid;
        // }
        // .vertical-bottom2 {
        //   .vue-qr {
        //     width: 100%;
        //     text-align: center;
        //     .vueQrSize {
        //       width: 60%;
        //       height: 100%;
        //     }
        //   }
        // }
      }
    }
    .lengthways {
      .vue-qr {
        width: 65% !important;
        display: block;
        margin: 0 auto;
        img {
          width: 100%;
        }
      }
      .bottom-span,
      .top-img {
        padding: 0 10px !important;

        span {
          line-height: 1 !important;
        }
      }

      .vertical-top1 {
        height: 30% !important;
      }

      .vertical-bottom1 {
        display: flex;
        flex-direction: column;
        height: 70% !important;
        .bot-top {
          height: auto !important;
        }

        .bot-bottom {
          width: auto !important;
          height: auto !important;
          flex: 1;
          flex-wrap: wrap;

          .bot-con {
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            padding: 0 10px;
          }
        }
      }
    }

    .crosswise,
    .lengthways {
      transition: all 0.5s;
    }
  }
</style>

<!-- 这个页面有个小bug，在取chajiArr差集那一块，祝下位兄弟好运 -->
