|
|
@@ -1,193 +1,213 @@
|
|
|
<template>
|
|
|
- <div class="bg">
|
|
|
- <el-dialog
|
|
|
- width="30%"
|
|
|
- :modal-append-to-body='false'
|
|
|
- title="样品标签"
|
|
|
- @close="closeDialog"
|
|
|
- :before-close = "handleClose"
|
|
|
- :visible.sync="visible"> <!-- 表单是否显示 -->
|
|
|
- <div ref="qrcode" id="box">
|
|
|
-
|
|
|
- <button @click="printDemo">打印标签</button>
|
|
|
- <vue-easy-print tableShow ref="easyPrint" >
|
|
|
- <div v-for="(item1,index1) in list" :key="index1">
|
|
|
- <div v-for="(item2,index2) in parseInt(item1.num)" :key="index2">
|
|
|
- <div class="tagBox">
|
|
|
- <div class="lh">
|
|
|
- <div>样品名称:</div>
|
|
|
- <div>{{item1.name}}</div>
|
|
|
- </div>
|
|
|
- <div class="la">
|
|
|
- <div class="lh">
|
|
|
- <div>样品编号:</div>
|
|
|
- <div>{{item1.serial}}</div>
|
|
|
- </div>
|
|
|
- <div class="lh" style="margin-left: 15px">
|
|
|
- <div>收样时间:</div>
|
|
|
- <div></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="lh">
|
|
|
- <div>样品类型:</div>
|
|
|
- <div>{{item1.type}}</div>
|
|
|
- </div>
|
|
|
- <div class="lh">
|
|
|
- <div>存储条件:</div>
|
|
|
- <div>{{item1.condition}}</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="lh">
|
|
|
- <div>流转状态:</div>
|
|
|
- <div>▢待检,▢已检,▢留样</div>
|
|
|
- </div>
|
|
|
- <div class="lh">
|
|
|
- <div>样品数量:</div>
|
|
|
- <div>{{index2+1}}/{{item1.num}}支</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <vue-barcode :value="item1.serial" :width="2" :height="40"></vue-barcode>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="bg">
|
|
|
+ <el-dialog width="30%" :modal-append-to-body='false' title="样品标签" :visible.sync="visible">
|
|
|
+ <!-- 表单是否显示 -->
|
|
|
+ <div style="height:500px">
|
|
|
+ <div ref="qrcode" id="box">
|
|
|
+ <!-- <button @click="printDemo">打印标签</button> :page-break-inside=avoid -->
|
|
|
+ <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" style="page-break-after:always">
|
|
|
+ <div class="tagBox">
|
|
|
+ <div class="lh">
|
|
|
+ <div>样品名称:</div>
|
|
|
+ <div>{{ item1.name }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="la">
|
|
|
+ <div class="lh">
|
|
|
+ <div>样品编号:</div>
|
|
|
+ <div>{{ item1.serial }}</div>
|
|
|
</div>
|
|
|
+ <div class="lh" style="margin-left: 15px">
|
|
|
+ <div>收样时间:</div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="lh">
|
|
|
+ <div>样品类型:</div>
|
|
|
+ <div>{{ item1.type }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="lh">
|
|
|
+ <div>存储条件:</div>
|
|
|
+ <div>{{ item1.condition }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="lh">
|
|
|
+ <div>流转状态:</div>
|
|
|
+ <div>▢待检,▢已检,▢留样</div>
|
|
|
+ </div>
|
|
|
+ <div class="lh">
|
|
|
+ <div>样品数量:</div>
|
|
|
+ <div>{{ index2 + 1 }}/{{ item1.num }}支</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <vue-barcode :value="item1.serial" :width="2" :height="40"></vue-barcode>
|
|
|
</div>
|
|
|
- </vue-easy-print>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </vue-easy-print>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
|
|
|
+ <el-button type="primary" @click="printDemo">打印标签</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- // import html2canvas from "html2canvas";
|
|
|
- import VueBarcode from 'vue-barcode';
|
|
|
- import vueEasyPrint from "vue-easy-print";
|
|
|
- import repostCurd from '@/business/platform/form/utils/custom/joinCURD.js';
|
|
|
+import VueBarcode from 'vue-barcode';
|
|
|
+import vueEasyPrint from "vue-easy-print";
|
|
|
+import repostCurd from '@/business/platform/form/utils/custom/joinCURD.js';
|
|
|
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- VueBarcode,
|
|
|
- vueEasyPrint,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- value: '',
|
|
|
- id: '',
|
|
|
- list: [{
|
|
|
- name: 5,
|
|
|
- serial: 5,
|
|
|
- type: 5,
|
|
|
- num: 5,
|
|
|
- condition: 5
|
|
|
- }],
|
|
|
- visible: true
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getInit()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- printDemo(){
|
|
|
- this.$refs.easyPrint.print()
|
|
|
- },
|
|
|
- getInit() {
|
|
|
- console.log(1,this)
|
|
|
- this.getLook("1045277568393019392")
|
|
|
- console.log(2)
|
|
|
- },
|
|
|
- getLook(id) {
|
|
|
- console.log(id)
|
|
|
- let sql =`select * from t_lhypb where find_in_set(parent_id_,'${id}')`
|
|
|
- console.log(this)
|
|
|
- repostCurd("sql", sql).then(res => {
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ VueBarcode,
|
|
|
+ vueEasyPrint,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ obj: {
|
|
|
+ default: [],
|
|
|
+ type: Array
|
|
|
+ },
|
|
|
+ onePageRow:{
|
|
|
+ type:Number,
|
|
|
+ default:3
|
|
|
+ },
|
|
|
+ blankLines:{
|
|
|
+ type:Boolean,
|
|
|
+ default:true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ onePageRow: 1,
|
|
|
+ value: '',
|
|
|
+ id: '',
|
|
|
+ list: [{
|
|
|
+ name: 5,
|
|
|
+ serial: 5,
|
|
|
+ type: 5,
|
|
|
+ num: 5,
|
|
|
+ condition: 5
|
|
|
+ }],
|
|
|
+ visible: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getInit()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ printDemo() {
|
|
|
+ this.$refs.easyPrint.print()
|
|
|
+ },
|
|
|
+ getInit() {
|
|
|
+ console.log(this.obj)
|
|
|
+ var idStr = '';
|
|
|
+ this.obj.forEach(item=>{
|
|
|
+ idStr += item + ','
|
|
|
+ })
|
|
|
+ idStr = idStr.substring(0,idStr.length-1);
|
|
|
+ console.log(idStr)
|
|
|
+ this.getLook(idStr)
|
|
|
+ },
|
|
|
+ getLook(id) {
|
|
|
+ console.log(id)
|
|
|
+ let sql = `select * from t_lhypb where find_in_set(parent_id_,'${id}')`
|
|
|
+ console.log(sql)
|
|
|
+ repostCurd("sql", sql).then(res => {
|
|
|
// console.log(res)
|
|
|
- if (res.state === 200) {
|
|
|
- const data = res.variables.data
|
|
|
- console.log(data)
|
|
|
- let list = []
|
|
|
- data.forEach(item => {
|
|
|
- if (item.yang_pin_lei_xing != '' && parseInt(item.shu_liang_) > 0) {
|
|
|
- let obj = {
|
|
|
- name: item.yang_pin_ming_che,
|
|
|
- serial: item.yang_pin_bian_hao,
|
|
|
- type: item.yang_pin_lei_xing,
|
|
|
- num: item.shu_liang_,
|
|
|
- condition: item.yang_ben_yun_shu_
|
|
|
- }
|
|
|
- list.push(obj)
|
|
|
- }
|
|
|
- if (item.yang_pin_lei_er_ != '' && parseInt(item.shu_liang_er_) > 0) {
|
|
|
- let obj = {
|
|
|
- name: item.yang_pin_ming_che,
|
|
|
- serial: item.yang_pin_bian_hao,
|
|
|
- type: item.yang_pin_lei_er_,
|
|
|
- num: item.shu_liang_er_,
|
|
|
- condition: item.yang_pin_yun_shu_
|
|
|
- }
|
|
|
- list.push(obj)
|
|
|
- }
|
|
|
- if (item.yang_pin_lei_san_ != '' && parseInt(item.shu_liang_san_) > 0) {
|
|
|
- let obj = {
|
|
|
- name: item.yang_pin_ming_che,
|
|
|
- serial: item.yang_pin_bian_hao,
|
|
|
- type: item.yang_pin_lei_san_,
|
|
|
- num: item.shu_liang_san_,
|
|
|
- condition: item.yang_pin_yun_san
|
|
|
- }
|
|
|
- list.push(obj)
|
|
|
- }
|
|
|
- if (item.yang_pin_lei_si_ != '' && parseInt(item.shu_liang_si_) > 0) {
|
|
|
- let obj = {
|
|
|
- name: item.yang_pin_ming_che,
|
|
|
- serial: item.yang_pin_bian_hao,
|
|
|
- type: item.yang_pin_lei_si_,
|
|
|
- num: item.shu_liang_si_,
|
|
|
- condition: item.yang_pin_yun_si_
|
|
|
- }
|
|
|
- list.push(obj)
|
|
|
- }
|
|
|
+ if (res.state === 200) {
|
|
|
+ const data = res.variables.data
|
|
|
+ console.log(data)
|
|
|
+ let list = []
|
|
|
+ data.forEach(item => {
|
|
|
+ if (item.yang_pin_lei_xing != '' && parseInt(item.shu_liang_) > 0) {
|
|
|
+ let o = {
|
|
|
+ name: item.yang_pin_ming_che,
|
|
|
+ serial: item.yang_pin_bian_hao,
|
|
|
+ type: item.yang_pin_lei_xing,
|
|
|
+ num: item.shu_liang_,
|
|
|
+ condition: item.yang_ben_yun_shu_
|
|
|
+ }
|
|
|
+ list.push(o)
|
|
|
+ }
|
|
|
+ if (item.yang_pin_lei_er_ != '' && parseInt(item.shu_liang_er_) > 0) {
|
|
|
+ let o = {
|
|
|
+ name: item.yang_pin_ming_che,
|
|
|
+ serial: item.yang_pin_bian_hao,
|
|
|
+ type: item.yang_pin_lei_er_,
|
|
|
+ num: item.shu_liang_er_,
|
|
|
+ condition: item.yang_pin_yun_shu_
|
|
|
+ }
|
|
|
+ list.push(o)
|
|
|
+ }
|
|
|
+ if (item.yang_pin_lei_san_ != '' && parseInt(item.shu_liang_san_) > 0) {
|
|
|
+ let o = {
|
|
|
+ name: item.yang_pin_ming_che,
|
|
|
+ serial: item.yang_pin_bian_hao,
|
|
|
+ type: item.yang_pin_lei_san_,
|
|
|
+ num: item.shu_liang_san_,
|
|
|
+ condition: item.yang_pin_yun_san
|
|
|
+ }
|
|
|
+ list.push(o)
|
|
|
+ }
|
|
|
+ if (item.yang_pin_lei_si_ != '' && parseInt(item.shu_liang_si_) > 0) {
|
|
|
+ let o = {
|
|
|
+ name: item.yang_pin_ming_che,
|
|
|
+ serial: item.yang_pin_bian_hao,
|
|
|
+ type: item.yang_pin_lei_si_,
|
|
|
+ num: item.shu_liang_si_,
|
|
|
+ condition: item.yang_pin_yun_si_
|
|
|
+ }
|
|
|
+ list.push(o)
|
|
|
+ }
|
|
|
|
|
|
- })
|
|
|
- this.list = list
|
|
|
+ })
|
|
|
+ this.list = list
|
|
|
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .bg {
|
|
|
+.bg {
|
|
|
|
|
|
- // height: auto;
|
|
|
- }
|
|
|
+ // height: auto;
|
|
|
+}
|
|
|
|
|
|
- .tagBox {
|
|
|
- width: 300px;
|
|
|
- height: 180px;
|
|
|
- border: 1px solid #000000;
|
|
|
- padding: 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- flex-direction: column;
|
|
|
- margin: 20px auto;
|
|
|
- border-radius: 15px;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
+.tagBox {
|
|
|
+ width: 300px;
|
|
|
+ height: 180px;
|
|
|
+ border: 1px solid #000000;
|
|
|
+ padding: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ flex-direction: column;
|
|
|
+ margin: 20px auto;
|
|
|
+ border-radius: 15px;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
|
|
|
- .la {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
+.la {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
|
|
|
- .lh {
|
|
|
- // line-height: auto;
|
|
|
- font-size: 16px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+.lh {
|
|
|
+ // line-height: auto;
|
|
|
+ font-size: 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- }
|
|
|
+}
|
|
|
</style>
|