ci-plus/src/identificationCard/read.md

ci组件库

## 依赖

"jsbarcode": "^3.11.6",

## 使用

```js
<el-dialog
  v-model="store.showTag"  //弹窗控制
  title="标签"
  destroy-on-close
  style="width: 580px; height: 630px; overflow: auto" // 弹窗大小
>
  <identification-card
    :list="printList"               // 循环渲染卡片的数据
    :cardName="'库存台账标识卡'"      // 卡片名称
    ref="goodsPrintRef"               // 控制打印的ref（可调用里面暴露的 打印方法）
    style="width: 100%; height: 500px"  // 设置标签的宽高
  ></identification-card>
</el-dialog>


// 点击按钮弹出标识卡调用的方法
function handlePrintAll() {
  if (multipleSelection.value.length < 1)
    return ElMessage.warning('请选择要操作的数据！')
  // multipleSelection.value 为要渲染的源数组对象
  // printList.value 为传递到组件的 实际数组对象
  multipleSelection.value.forEach((val) => {
    let obj = {
      serialNumber: val.center_data[0].b2b_batch_number, //'1001', // 条码文本
      qr_code_path: baseUrls + val.qr_code_path, // 二维码图片路径
      material_name: val.material_type, //'文件编号1',
      store_code: val.material_name, //'名称/类型1',
      customer_name: val.material_model, //'产品型号1',
      supplier_name: val.material_code, //'物料编号1',
      material_model: val.center_data[0].flow_lot_number
        ? val.center_data[0].flow_lot_number
        : '', //'批号1',
      card_code: val.card_code, //'标识卡号',
      material_code: val.center_data[0].value, //'规值1',
      location_name: val.center_data[0].supplier_name, //'供应商1',
      data: [
        {
          opt_time: setDate(val.opt_time), // 日期
          sr: val.record_type === 1 ? val.current_inventory : '', // 收入
          fc: val.record_type === 2 ? val.current_inventory : '', // 发出
          balance_count: val.balance_count, //结转
          remark: val.remark, // 签字/备注
        },
      ],
    }
    printList.value.push(obj)
  })


  setTimeout(function () {
    // goodsPrintRef.value.print()
    store.showTag = true
  }, 100)
}


```