|
|
@@ -0,0 +1,326 @@
|
|
|
+<template>
|
|
|
+ <div class="bg">
|
|
|
+ <el-dialog
|
|
|
+ width="21cm"
|
|
|
+ height="10cm"
|
|
|
+ :modal-append-to-body="true"
|
|
|
+ :append-to-body="true"
|
|
|
+ title="样品标识标签"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ @close="close"
|
|
|
+ >
|
|
|
+ <!-- 表单是否显示 -->
|
|
|
+ <div style="height: 500px">
|
|
|
+ <div ref="qrcode" id="box">
|
|
|
+ <vue-easy-print tableShow ref="easyPrint" :onePageRow="onePageRow">
|
|
|
+ <div v-for="(item1, index1) in list" :key="index1">
|
|
|
+ <div v-for="(item2, index2) in parseInt(item1.num)" :key="index2">
|
|
|
+ <div class="All" style="font-family: sans-serif">
|
|
|
+ <div class="tagBox">
|
|
|
+ <!-- 样品标识标题 -->
|
|
|
+ <div class="title">样品标识</div>
|
|
|
+ <!-- 表格布局 -->
|
|
|
+ <table class="info-table">
|
|
|
+ <tr>
|
|
|
+ <td class="label">样品名称：</td>
|
|
|
+ <td class="value">{{ item1.name || '/' }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="label">样品编号：</td>
|
|
|
+ <td class="value">{{ item1.code || '/' }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="label">保存条件：</td>
|
|
|
+ <td class="value">{{
|
|
|
+ item1.storageCondition || '/'
|
|
|
+ }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="label">检测状态：</td>
|
|
|
+ <td class="value value-no-padding">
|
|
|
+ <table class="option-table">
|
|
|
+ <tr>
|
|
|
+ <td
|
|
|
+ :class="{
|
|
|
+ 'option-checked': item1.testStatus === '待检'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ item1.testStatus === '待检' ? '☑' : '□'
|
|
|
+ }}待检
|
|
|
+ </td>
|
|
|
+ <td
|
|
|
+ :class="{
|
|
|
+ 'option-checked': item1.testStatus === '在检'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ item1.testStatus === '在检' ? '☑' : '□'
|
|
|
+ }}在检
|
|
|
+ </td>
|
|
|
+ <td
|
|
|
+ :class="{
|
|
|
+ 'option-checked': item1.testStatus === '检毕'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ item1.testStatus === '检毕' ? '☑' : '□'
|
|
|
+ }}检毕
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="label">样品类型：</td>
|
|
|
+ <td class="value value-no-padding">
|
|
|
+ <table class="option-table">
|
|
|
+ <tr>
|
|
|
+ <td
|
|
|
+ :class="{
|
|
|
+ 'option-checked': item1.sampleType === '检样'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ item1.sampleType === '检样' ? '☑' : '□'
|
|
|
+ }}检样
|
|
|
+ </td>
|
|
|
+ <td
|
|
|
+ :class="{
|
|
|
+ 'option-checked': item1.sampleType === '留样'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ item1.sampleType === '留样' ? '☑' : '□'
|
|
|
+ }}留样
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <!-- 条形码 -->
|
|
|
+ <div class="ewm">
|
|
|
+ <vue-barcode
|
|
|
+ :value="item1.code"
|
|
|
+ :width="1.5"
|
|
|
+ :height="15"
|
|
|
+ :margin="0"
|
|
|
+ :displayValue="false"
|
|
|
+ ></vue-barcode>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </vue-easy-print>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="printDemo">打印标签</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import VueBarcode from 'vue-barcode'
|
|
|
+import vueEasyPrint from 'vue-easy-print'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ VueBarcode,
|
|
|
+ vueEasyPrint
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ obj: {
|
|
|
+ default: [],
|
|
|
+ type: Array
|
|
|
+ },
|
|
|
+ onePageRow: {
|
|
|
+ type: Number,
|
|
|
+ default: 3
|
|
|
+ },
|
|
|
+ blankLines: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ scanVisible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogVisible: false,
|
|
|
+ value: '',
|
|
|
+ id: '',
|
|
|
+ list: [],
|
|
|
+ visible: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ obj() {
|
|
|
+ this.getInit()
|
|
|
+ },
|
|
|
+ scanVisible: {
|
|
|
+ handler(val) {
|
|
|
+ this.dialogVisible = val
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getInit()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ close() {
|
|
|
+ this.dialogVisible = false
|
|
|
+ // 必须通知父组件把 scanVisible 置为 false，否则再次打开时值未变无法重新挂载
|
|
|
+ this.$emit('scanOff', 'noRefresh')
|
|
|
+ },
|
|
|
+ printDemo() {
|
|
|
+ this.$refs.easyPrint.print()
|
|
|
+ },
|
|
|
+ getInit() {
|
|
|
+ let list = []
|
|
|
+ this.obj.forEach((item) => {
|
|
|
+ let o = {
|
|
|
+ name: item.yang_pin_ming_che || item.ming_cheng_,
|
|
|
+ code: item.yang_pin_bian_hao || item.bian_hao_,
|
|
|
+ storageCondition: item.yang_pin_zhuang_t || item.cun_chu_tiao_jian,
|
|
|
+ testStatus: item.jian_ce_zhuang_tai,
|
|
|
+ sampleType: item.yang_pin_lei_xing,
|
|
|
+ num: item.shu_liang_ || 1
|
|
|
+ }
|
|
|
+ list.push(o)
|
|
|
+ })
|
|
|
+ if (list.length == 0) {
|
|
|
+ this.$message({
|
|
|
+ message: '该样品信息有误，请联系开发人员！',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ this.close()
|
|
|
+ }
|
|
|
+ this.list = list
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 关闭*/
|
|
|
+ remRedar() {
|
|
|
+ this.close()
|
|
|
+ },
|
|
|
+ dateFormat() {
|
|
|
+ // 获取当前时间
|
|
|
+ var date = new Date()
|
|
|
+ var year = date.getFullYear()
|
|
|
+ var month =
|
|
|
+ date.getMonth() + 1 < 10
|
|
|
+ ? '0' + (date.getMonth() + 1)
|
|
|
+ : date.getMonth() + 1
|
|
|
+ var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
|
|
|
+ return year + '-' + month + '-' + day
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.bg {
|
|
|
+ // height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.tagBox {
|
|
|
+ width: 231px; // 300 240
|
|
|
+ position: relative;
|
|
|
+ border: 2px solid #000000;
|
|
|
+ padding: 2px;
|
|
|
+ display: inline-block;
|
|
|
+ margin: 10px 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.ewm {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.la {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.lh {
|
|
|
+ // line-height: auto;
|
|
|
+ font-size: 14px; //16
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000;
|
|
|
+ text-align: center;
|
|
|
+ padding: 4px 0;
|
|
|
+ // border-bottom: 1px solid #000;
|
|
|
+ margin-bottom: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-table td {
|
|
|
+ border: 1px solid #000;
|
|
|
+ padding: 3px 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-table .label {
|
|
|
+ font-weight: normal;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ width: 35%;
|
|
|
+}
|
|
|
+
|
|
|
+.info-table .value {
|
|
|
+ width: 65%;
|
|
|
+}
|
|
|
+
|
|
|
+.value-no-padding {
|
|
|
+ padding: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.option-table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+}
|
|
|
+
|
|
|
+.option-table td {
|
|
|
+ border: 1px solid #000;
|
|
|
+ // padding: 2px 4px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.option-table tr td:first-child {
|
|
|
+ border-left: none;
|
|
|
+}
|
|
|
+
|
|
|
+.option-table tr td:last-child {
|
|
|
+ border-right: none;
|
|
|
+}
|
|
|
+
|
|
|
+.option-table tr:first-child td {
|
|
|
+ border-top: none;
|
|
|
+}
|
|
|
+
|
|
|
+.option-table tr:last-child td {
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
+.option-checked {
|
|
|
+ background-color: #f0f0f0;
|
|
|
+}
|
|
|
+</style>
|
cyy