root/wuHanXinRui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init project

Browse Source
This commit is contained in:
ZHOUZ\Noble'lift
2022-06-27 09:50:26 +08:00
parent b3fcd339ea
commit b5da790c94
644 changed files with 94073 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
mes/qd/src/views/wms/test/1.txt Normal file
View File

323
mes/qd/src/views/wms/test/print/index.vue Normal file
View File

@@ -0,0 +1,323 @@
<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<div v-if="crud.props.searchToggle">
<!-- 搜索 -->
<el-form
:inline="true"
class="demo-form-inline"
label-position="right"
label-width="80px"
label-suffix=":"
>
<el-form-item label="年月">
<label slot="label">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月:</label>
<el-date-picker
v-model="query.plan_month"
type="month"
style="width: 250px"
size="mini"
class="filter-item"
value-format="yyyyMM"
placeholder="选择年月"
/>
</el-form-item>
<el-form-item label="部门">
<label slot="label">部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门:</label>
<el-select
v-model="query.plan_org_code"
clearable
size="mini"
placeholder="请选择"
class="filter-item"
style="width: 250px;"
@change="hand"
>
<el-option
v-for="item in deptList"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="物料编码">
<el-input
v-model="query.material_code"
clearable
size="mini"
placeholder="请输入物料编码"
style="width: 250px;"
class="filter-item"
@keyup.enter.native="crud.toQuery"
/>
</el-form-item>
<el-form-item label="生产方式">
<el-select
v-model="query.product_type_name"
clearable
size="mini"
placeholder="请选择"
class="filter-item"
style="width: 250px;"
@change="hand"
>
<el-option
v-for="item in dict.product_mode"
:label="item.label"
:value="item.value"
/>
</el-select>
<rrOperation/>
</el-form-item>
</el-form>
</div>
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
<crudOperation :permission="permission">
<el-button
slot="right"
class="filter-item"
type="success"
icon="el-icon-position"
size="mini"
@click="open"
>
棒料型配方Excel导入
</el-button>
<el-button
slot="right"
class="filter-item"
type="success"
icon="el-icon-position"
size="mini"
@click="open2"
>
矿用配方Excel导入
</el-button>
<el-button
slot="right"
class="filter-item"
type="success"
icon="el-icon-position"
size="mini"
@click="open3"
>
测试
</el-button>
<el-button
slot="right"
class="filter-item"
type="success"
icon="el-icon-position"
size="mini"
@click="send"
>
发送
</el-button>
<el-button
slot="right"
class="filter-item"
type="success"
icon="el-icon-position"
size="mini"
@click="close"
>
关闭
</el-button>
</crudOperation>
<!-- 文件上传弹出框-->
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<el-upload
ref="upload"
:limit="1"
:before-upload="beforeUpload"
:auto-upload="false"
:headers="headers"
:file-list="fileList"
:on-success="handleSuccess"
:on-error="handleError"
:on-exceed="handleExceed"
:action="nowAction"
>
<div class="eladmin-upload"><i class="el-icon-upload"/> 添加文件</div>
<div slot="tip" class="el-upload__tip">可上传任意格式文件，且不超过100M</div>
</el-upload>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="upload">确 定</el-button>
</span>
</el-dialog>
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" show-summary :data="crud.data" size="mini" style="width: 100%;"
@selection-change="crud.selectionChangeHandler">
<!-- <el-table-column type="selection" width="55" />-->
<el-table-column v-permission="['admin','productplanproc:edit','productplanproc:del']" fixed="right" label="操作"
width="120px" align="center">
<template slot-scope="scope">
<udOperation
:data="scope.row"
:permission="permission"
/>
</template>
</el-table-column>
<el-table-column v-if="false" prop="plan_id" label="计划标识"/>
<el-table-column v-if="false" prop="plan_code" label="计划编号"/>
<el-table-column prop="plan_org_name" label="申报单位名称"/>
<el-table-column prop="plan_month" label="年月度"/>
<el-table-column v-if="false" prop="material_id" label="物料标识"/>
<el-table-column prop="material_code" label="物料编码" min-width="120" show-overflow-tooltip/>
<el-table-column prop="product_type_name" label="生产方式"/>
<el-table-column prop="plan_finish_date" label="交货日期"/>
<el-table-column prop="plan_code" label="需求编码"/>
<el-table-column prop="input_optname" label="导入人"/>
<el-table-column prop="input_time" label="导入时间" width="150px"/>
</el-table>
<!--分页组件-->
<pagination/>
</div>
</div>
</template>
<script>
import crudProductplanproc from '@/api/wms/pcs/productplanproc'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import AddDialog from '@/views/wms/st/core/inbill/rawassist/AddDialog'
export default {
name: 'Productplanproc',
dicts: ['product_mode'],
components: { pagination, crudOperation, rrOperation, udOperation, AddDialog },
mixins: [presenter(), header(), crud()],
cruds() {
return CRUD({
title: '月需求计划',
url: 'api/productplanproc',
idField: 'plan_id',
sort: '',
crudMethod: { ...crudProductplanproc },
optShow: {
add: false,
edit: false,
del: false,
download: false,
reset: true
}
})
},
data() {
return {
permission: {},
headers: { 'Authorization': getToken() },
dialogVisible: false,
deptList: [],
fileList: [],
nowAction: '',
form: { name: '' },
rules: {}
}
},
computed: {
...mapGetters([
'baseApi',
'fileUploadApi'
])
},
created() {
crudProductplanproc.getDept().then(res => {
this.deptList = res
})
},
methods: {
hand(value) {
this.crud.toQuery()
},
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done()
})
.catch(_ => {
})
},
beforeUpload(file) {
let isLt2M = true
isLt2M = file.size / 1024 / 1024 < 100
if (!isLt2M) {
this.loading = false
this.$message.error('上传文件大小不能超过 100MB!')
}
this.form.name = file.name
return isLt2M
},
handleSuccess(response, file, fileList) {
this.crud.notify('导入成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
},
// 监听上传失败
handleError(e, file, fileList) {
debugger
const msg = JSON.parse(e.message)
this.$notify({
title: msg.message,
type: 'error',
duration: 2500
})
this.loading = false
},
open() {
const a = this.fileList
this.fileList = a.splice(0, 0)
this.nowAction = this.baseApi + '/api/productplanproc/pictures/1'
this.dialogVisible = true
},
open2() {
const a = this.fileList
this.fileList = a.splice(0, 0)
this.nowAction = this.baseApi + '/api/productplanproc/pictures/2'
this.dialogVisible = true
},
open3() {
request.start(true).then(connect => {
console.log(connect.url)
console.log(connect.id)
}).catch(err => {
console.log(err)
})
},
send() {
const message = {}
const lang = 'en-US'
con.send(JSON.stringify({ message, lang }))
},
close() {
con.terminate()
},
upload() {
this.$refs.upload.submit()
this.dialogVisible = false
},
handleExceed(files, fileList) {
this.$message.warning('当前限制只能选择 1 个文件')
}
}
}
</script>
<style scoped>
</style>

598
mes/qd/src/views/wms/test/print/index2.vue Normal file
View File

@@ -0,0 +1,598 @@
<template>
<div class="app-container">
<div class="head-container">
<div>
<div style="display: inline-block">空载具<div style="margin-left:5px;padding-top:5px;display: inline-block;background-color: #99a9bf;width: 20px;height: 20px;border-radius: 50%;line-height: 30px;text-align: center;"></div></div>
<div style="display: inline-block">空货位<div style="margin-left:5px;display: inline-block;background-color: red;width: 20px;height: 20px;border-radius: 50%"></div></div>
<div style="display: inline-block">有货<div style="margin-left:5px;display: inline-block;background-color: green;width: 20px;height: 20px;border-radius: 50%"></div></div>
</div>
<!-- 第一行-->
<el-row>
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0101-0'+count > 10 ? count: '0'+count +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0101-0'+count+'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
1排</br>{{ count }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0101-0'+count+'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0101-0'+count+'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
1排</br>{{ count }}列</br>1层
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">一排
</div>
</el-col>
</el-row>
<!-- 第二行-->
<el-row>
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0102-0'+count+'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0102-0'+count+'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
2排</br>{{ count }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row STYLE="margin-bottom: 20px;">
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount(('0101-'+(count > 10 ? count: '0'+count) +'-02'))"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0102-0'+count+'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
2排</br>{{ count }}列</br>1层
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">二排
</div>
</el-col>
</el-row>
<!-- 第三行-->
<el-row>
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0103-0'+count+'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0103-0'+count+'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
3排</br>{{ count }}列</br>2层
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0103-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0103-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
3排</br>{{ (count + 6) }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row>
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0103-0'+count+'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0103-0'+count+'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
3排</br>{{ count }}列</br>1层
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">三排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0103-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0103-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
3排</br>{{ (count + 6) }}列</br>1层
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第四行-->
<el-row>
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0104-0'+count+'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0104-0'+count+'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
4排</br>{{ count }}列</br>2层
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0104-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0104-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
4排</br>{{ (count + 6) }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0104-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0104-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
4排</br>{{ count }}列</br>1层
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">四排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0104-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0104-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
4排</br>{{ (count + 6) }}列</br>1层
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第五行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0105-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0105-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
5排</br>{{ count }}列</br>2层
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0105-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0105-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
5排</br>{{ (count + 12) }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0105-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0105-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
5排</br>{{ count }}列</br>1层
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">五排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0105-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0105-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
5排</br>{{ (count + 12) }}列</br>1层
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第六行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0106-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0106-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
6排</br>{{ count }}列</br>2层
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0106-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0106-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
6排</br>{{ (count + 12) }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0106-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0106-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
6排</br>{{ count }}列</br>1层
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">六排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0106-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0106-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
6排</br>{{ (count + 12) }}列</br>1层
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第七行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0107-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0107-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
7排</br>{{ count }}列</br>2层
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0107-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0107-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
7排</br>{{ (count + 12) }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0107-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0107-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
7排</br>{{ count }}列</br>1层
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">七排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0107-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0107-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
7排</br>{{ (count + 12) }}列</br>1层
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第八行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0108-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0108-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
8排</br>{{ count }}列</br>2层
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0108-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0108-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
8排</br>{{ (count + 12) }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0108-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0108-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
8排</br>{{ count }}列</br>1层
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">八排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0108-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0108-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
8排</br>{{ (count + 12) }}列</br>1层
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第九行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0109-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0109-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
9排</br>{{ count }}列</br>2层
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0109-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0109-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
9排</br>{{ (count + 12) }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0109-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0109-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
9排</br>{{ count }}列</br>1层
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">九排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0109-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0109-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
9排</br>{{ (count + 12) }}列</br>1层
</div>
</el-popover>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import crudProductRoute from '@/api/productprocessroute'
export default {
name: 'Test',
data() {
return {
arr: {
'0101-01-01': 'red',
'0101-01-02': 'green',
'0101-02-01': 'green',
'0101-02-02': 'green',
'0101-03-01': 'red',
'0101-03-02': 'green',
'0101-04-01': 'green',
'0101-04-02': 'red',
'0101-05-01': 'green',
'0101-05-02': 'red',
'0101-06-01': 'green',
'0101-06-02': 'green'
},
width: '2500',
div_width: '43',
div_height: '60',
row_color: '#0d3fad'
}
},
created() {
},
methods: {
divCount(data) {
const params = ['SP001', '091810', '钴粉', '500', '2022:06:10', '12', '完成']
let str = ''
str = '货位：' + data +
'<br/>载具：' + params[0]
+ '</br>' + '物料：' + params[1]
+ '<br>' + '名称：' + params[2]
+ '<br>' + '重量(kg)：' + params[3]
+ '</br>' + '入库时间：' + params[4]
+ '</br>' + '静置(h)：' + params[5]
+ '</br>' + '静置状态：' + params[6]
return str
}
}
}
</script>
<style>
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d5e6d3;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: red;
}
</style>

690
mes/qd/src/views/wms/test/print/index3.vue Normal file
View File

@@ -0,0 +1,690 @@
<template>
<div class="app-container">
<div class="head-container">
<div>
<div style="display: inline-block">空载具<div style="margin-left:5px;padding-top:5px;display: inline-block;background-color: #99a9bf;width: 20px;height: 20px;border-radius: 50%;line-height: 30px;text-align: center;"></div></div>
<div style="display: inline-block">空货位<div style="margin-left:5px;display: inline-block;background-color: red;width: 20px;height: 20px;border-radius: 50%"></div></div>
<div style="display: inline-block">有货<div style="margin-left:5px;display: inline-block;background-color: green;width: 20px;height: 20px;border-radius: 50%"></div></div>
</div>
<!-- 第一行-->
<el-row>
<el-col :span="5" :offset="5" style="padding-left: 6.7%">
<el-popover v-for="count in 4" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0201-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0201-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
1排</br>{{ count }}列</br>2层
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0201-'+((count+4) >= 10 ? (count+4) : '0'+(count+4)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0201-'+((count+4) >= 10 ? (count+4) : '0'+(count+4)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
1排</br>{{ (count+4) }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="5" :offset="5" style="padding-left: 6.7%">
<el-popover v-for="count in 4" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0201-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0201-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
1排</br>{{ count }}列</br>1层
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">一排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0201-'+((count+4) >= 10 ? (count+4) : '0'+(count+4)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0201-'+((count+4) >= 10 ? (count+4) : '0'+(count+4)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
1排</br>{{ (count+4) }}列</br>1层
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第二行-->
<el-row>
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0202-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0202-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
2排</br>{{ count }}列</br>2层
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0202-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0202-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
2排</br>{{ (count+6) }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0202-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0202-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
2排</br>{{ count }}列</br>1层
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">二排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0202-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0202-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
2排</br>{{ (count+6) }}列</br>1层
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第三行-->
<el-row>
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0203-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0203-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
3排</br>{{ count }}列</br>2层
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 8" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0203-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0203-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
3排</br>{{ (count+6) }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0203-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0203-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
3排</br>{{ count }}列</br>1层
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">三排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 8" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0203-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0203-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
3排</br>{{ (count+6) }}列</br>1层
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第四行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0204-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0204-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
4排</br>{{ count }}列</br>2层
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 8" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0204-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0204-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
4排</br>{{ (count+12) }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0204-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0204-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
4排</br>{{ count }}列</br>1层
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">四排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 8" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0204-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0204-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
4排</br>{{ (count+12) }}列</br>1层
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第五行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0205-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0205-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
5排</br>{{ count }}列</br>2层
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 8" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0205-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0205-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
5排</br>{{ (count+12) }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0205-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0205-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
5排</br>{{ count }}列</br>1层
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">五排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 8" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0205-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0205-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
5排</br>{{ (count+12) }}列</br>1层
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第六行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0206-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0206-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
6排</br>{{ count }}列</br>2层
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 8" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0206-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0206-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
6排</br>{{ (count+12) }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0206-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0206-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
6排</br>{{ count }}列</br>1层
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">六排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 8" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0206-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0206-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
6排</br>{{ (count+12) }}列</br>1层
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第七行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0207-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0207-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
7排</br>{{ count }}列</br>2层
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0207-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0207-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
7排</br>{{ (count+12) }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0207-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0207-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
7排</br>{{ count }}列</br>1层
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">七排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0207-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0207-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
7排</br>{{ (count+12) }}列</br>1层
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第八行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0208-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0208-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
8排</br>{{ count }}列</br>2层
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0208-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0208-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
8排</br>{{ (count+12) }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0208-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0208-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
8排</br>{{ count }}列</br>1层
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">八排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0208-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0208-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
8排</br>{{ (count+12) }}列</br>1层
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第九行-->
<el-row>
<el-col :span="12" :offset="12">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0209-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0209-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
9排</br>{{ (count) }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="2":offset="10" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">九排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0209-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0209-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
9排</br>{{ (count) }}列</br>1层
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第十行-->
<el-row>
<el-col :span="12" :offset="12">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0210-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0210-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
10排</br>{{ (count+12) }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="2":offset="10" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">十排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0210-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0210-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
10排</br>{{ (count) }}列</br>1层
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第十一行-->
<el-row>
<el-col :span="12" :offset="12">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0211-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0211-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
11排</br>{{ (count) }}列</br>2层
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="2":offset="10" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">十一排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0211-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0211-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
11排</br>{{ (count) }}列</br>1层
</div>
</el-popover>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import crudProductRoute from '@/api/productprocessroute'
export default {
name: 'Test',
data() {
return {
arr: {
'0201-01-01': 'red',
'0201-01-02': 'green',
'0201-02-01': 'green',
'0201-02-02': 'green',
'0201-03-01': 'red',
'0201-03-02': 'green',
'0201-04-01': 'green',
'0201-04-02': 'red',
'0201-05-01': 'green',
'0201-05-02': 'red',
'0201-06-01': 'green',
'0201-06-02': 'green'
},
width: '2500',
div_width: '43',
div_height: '60',
row_color: '#0d3fad'
}
},
created() {
},
methods: {
divCount(data) {
const params = ['SP001', '091810', '钴粉', '500', '2022:06:10', '12', '完成']
let str = ''
str = '货位：' + data +
'<br/>载具：' + params[0]
+ '</br>' + '物料：' + params[1]
+ '<br>' + '名称：' + params[2]
+ '<br>' + '重量(kg)：' + params[3]
+ '</br>' + '入库时间：' + params[4]
+ '</br>' + '静置(h)：' + params[5]
+ '</br>' + '静置状态：' + params[6]
return str
}
}
}
</script>
<style>
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d5e6d3;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: red;
}
</style>

37
mes/qd/src/views/wms/test/print/index4.vue Normal file
View File

@@ -0,0 +1,37 @@
<template>
<el-tabs v-model="activeName" style="padding-left: 8px;" @tab-click="tabClick">
<el-tab-pane label="库区1" name="first">
<Sect1 ref="sect1"/>
</el-tab-pane>
<el-tab-pane label="库区2" name="second">
<Sect2 ref="sect2"/>
</el-tab-pane>
</el-tabs>
</template>
<script>
import Sect1 from './index2'
import Sect2 from './index3'
export default {
name: 'Storage',
components: { Sect1, Sect2 },
data() {
return {
activeName: 'first'
}
},
methods: {
tabClick(name) {
// if (this.activeName === 'first') {
// this.$refs.local.crud.toQuery()
// } else {
// this.$refs.qiNiu.crud.toQuery()
// }
}
}
}
</script>
<style scoped>
</style>

314
mes/qd/src/views/wms/test/print1/demo.vue Normal file
View File

@@ -0,0 +1,314 @@
<template>
<div>
<div v-for="page in pages" :key="page">
<!-- 分页 -->
<div class="tab_company_out">
<h3>华为鸿麽有限公司</h3>
<div class="dan">进货单
<span>单据号：{{ tableData.id }}</span>
</div>
<p>
<span>客户：{{ tableData.store_name }}</span>
<time>{{ tableData.created_at }}</time>
</p>
<table cellpadding="0" cellspacing="0">
<tr>
<th width="5%">序号</th>
<th width="25%">商品名称</th>
<th width="5%">单位</th>
<th width="10%">规格</th>
<th width="5%">数量</th>
<th width="8%">单价</th>
<th width="8%">积分</th>
<th width="12%">总金额</th>
<th width="12%">总积分</th>
<th width="10%">说明</th>
</tr>
<!-- 每页显示onePageRow条数据 -->
<tr v-for="(row,index) in tableData.detail.slice((page-1)*onePageRow,page*onePageRow)" :key="index">
<td>{{ (page-1)*onePageRow + index + 1 }}</td>
<td>{{ row.name }}</td>
<td>{{ row.item_unit }}</td>
<td>{{ row.item_size }}</td>
<td>{{ row.item_quantity }}</td>
<td>{{ row.item_price }}</td>
<td>{{ row.pv }}</td>
<td>{{ row.item_total }}</td>
<td>{{ row.item_total_pv }}</td>
<td />
</tr>
<!-- 插入空白行 -->
<template v-if="blankLines===true && tableData.detail.slice((page-1)*onePageRow,page*onePageRow).length<5">
<tr v-for="d in (5-tableData.detail.slice((page-1)*onePageRow,page*onePageRow).length)" :key="`_${d}_`">
<td />
<td />
<td />
<td />
<td />
<td />
<td />
<td />
<td />
<td />
</tr>
</template>
<tr v-if="page==pages">
<td colspan="2">合计</td>
<td colspan="5">{{ chineseTotal }}</td>
<td id="total">{{ tableData.total_amount }}</td>
<td>{{ tableData.total_pv }}</td>
<td />
</tr>
<tr v-else>
<td colspan="2">合计</td>
<td colspan="5">(合计打印到最后一页)</td>
<td id="total" />
<td />
<td />
</tr>
<tr>
<td>备注</td>
<td colspan="9" />
</tr>
</table>
<ul class="lu">
<li>发货人：
<label>{{ tableData.delivery_user_name }}</label>
</li>
<li>出纳：
<label id="teller">{{ tableData.sale_user_name }}</label>
</li>
<li>制单：
<label id="single" />
</li>
<li>客户收货签字：
<label id="sign" />
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Demo',
// 制作打印模版组件时，props区域尽量保留。
props: {
// 接受的打印数据
tableData: {
type: Object,
default() {
return {
id: 998,
store_name: '测试店铺',
created_at: '2018-06-06 15:21:35',
total_amount: 35580,
total_pv: 23231,
detail: [
{
name: '商品A',
item_unit: '40ML',
item_size: '瓶',
item_quantity: 5,
item_price: 188,
pv: 150,
item_total: 5 * 188,
item_total_pv: 5 * 150
},
{
name: '商品A',
item_unit: '40ML',
item_size: '瓶',
item_quantity: 5,
item_price: 188,
pv: 150,
item_total: 5 * 188,
item_total_pv: 5 * 150
},
{
name: '商品A',
item_unit: '40ML',
item_size: '瓶',
item_quantity: 5,
item_price: 188,
pv: 150,
item_total: 5 * 188,
item_total_pv: 5 * 150
},
{
name: '商品A',
item_unit: '40ML',
item_size: '瓶',
item_quantity: 5,
item_price: 188,
pv: 150,
item_total: 5 * 188,
item_total_pv: 5 * 150
},
{
name: '商品A',
item_unit: '40ML',
item_size: '瓶',
item_quantity: 5,
item_price: 188,
pv: 150,
item_total: 5 * 188,
item_total_pv: 5 * 150
},
{
name: '商品A',
item_unit: '40ML',
item_size: '瓶',
item_quantity: 5,
item_price: 188,
pv: 150,
item_total: 5 * 188,
item_total_pv: 5 * 150
},
{
name: '商品A',
item_unit: '40ML',
item_size: '瓶',
item_quantity: 5,
item_price: 188,
pv: 150,
item_total: 5 * 188,
item_total_pv: 5 * 150
},
{
name: '商品A',
item_unit: '40ML',
item_size: '瓶',
item_quantity: 5,
item_price: 188,
pv: 150,
item_total: 5 * 188,
item_total_pv: 5 * 150
}
]
}
}
},
// 每页多少行
onePageRow: {
type: Number,
default: 5
},
// 是否插入空白行
blankLines: {
type: Boolean,
default: true
},
getChineseNumber: Function // 求数字的中文写法，从easyPrint组件传入
},
data() {
return {}
},
computed: {
pages() {
// 求当前数据能打印的页数
var pages_ = Math.ceil(this.tableData.detail.length / this.onePageRow) // 向上取整数
// return pages_ <= 0 ? 1 : pages_;
return 1
},
chineseTotal() {
// 计算中文合计，如果忘记传入
return this.getChineseNumber != null
? this.getChineseNumber(this.tableData.total_amount)
: '您还没有传入getChineseNumber'
}
},
methods: {
test() {
console.log('test')
}
}
}
</script>
<style scoped>
* {
padding: 0;
margin: 0;
list-style-type: none;
font-family: "微软雅黑";
font-size: 12px;
}
.tab_company_out {
text-align: center;
width: 100%;
margin: auto;
page-break-after: always;
}
h3 {
font-size: 14px;
}
.dan {
text-align: center;
position: relative;
}
.dan span {
position: absolute;
right: 0;
}
p {
overflow: hidden;
padding: 10px 0;
}
p span {
float: left;
}
p span ins {
text-decoration: underline;
}
p time {
float: right;
}
table {
width: 100%;
border: none;
border-bottom: 1px solid #000;
}
table tr td {
border: 1px solid #000;
border-bottom: none;
border-right: none;
height: 20px;
line-height: 20px;
}
table tr td:last-of-type,
table tr th:last-of-type {
border-right: 1px solid #000;
}
table tr th {
border-top: 1px solid #000;
border-left: 1px solid #000;
height: 22px;
line-height: 22px;
font-size: 12px;
}
table tr th:nth-child(2) {
width: 0;
}
.lu {
display: inline-block;
padding-top: 10px;
}
.lu li {
float: left;
text-align: left;
margin-right: 15px;
}
.lu li label {
width: 100px;
display: inline-block;
}
.lu li:last-of-type {
margin-right: 0;
}
@page{
size: auto A4 landscape;
margin: 3mm;
}
</style>

137
mes/qd/src/views/wms/test/print1/index.vue Normal file
View File

@@ -0,0 +1,137 @@
<template>
<div id="hello">
<button @click="printDemo">测试打印</button>
<vue-easy-print ref="easyPrint" table-show>
<template slot-scope="func">
<demo :get-chinese-number="func.getChineseNumber" />
</template>
</vue-easy-print>
</div>
</template>
<script>
import vueEasyPrint from 'vue-easy-print'
import demo from './demo'
export default {
name: 'HelloWorld',
components: {
vueEasyPrint,
demo
},
data() {
return {
tableData: {
id: 998,
store_name: '测试店铺',
created_at: '2018-06-06 15:21:35',
detail: [
{
name: '商品A',
item_unit: '40ML',
item_size: '瓶',
item_quantity: 5,
item_price: 188,
pv: 150,
item_total: 5 * 188,
item_total_pv: 5 * 150
},
{
name: '商品A',
item_unit: '40ML',
item_size: '瓶',
item_quantity: 5,
item_price: 188,
pv: 150,
item_total: 5 * 188,
item_total_pv: 5 * 150
},
{
name: '商品A',
item_unit: '40ML',
item_size: '瓶',
item_quantity: 5,
item_price: 188,
pv: 150,
item_total: 5 * 188,
item_total_pv: 5 * 150
},
{
name: '商品A',
item_unit: '40ML',
item_size: '瓶',
item_quantity: 5,
item_price: 188,
pv: 150,
item_total: 5 * 188,
item_total_pv: 5 * 150
},
{
name: '商品A',
item_unit: '40ML',
item_size: '瓶',
item_quantity: 5,
item_price: 188,
pv: 150,
item_total: 5 * 188,
item_total_pv: 5 * 150
},
{
name: '商品A',
item_unit: '40ML',
item_size: '瓶',
item_quantity: 5,
item_price: 188,
pv: 150,
item_total: 5 * 188,
item_total_pv: 5 * 150
},
{
name: '商品A',
item_unit: '40ML',
item_size: '瓶',
item_quantity: 5,
item_price: 188,
pv: 150,
item_total: 5 * 188,
item_total_pv: 5 * 150
},
{
name: '商品A',
item_unit: '40ML',
item_size: '瓶',
item_quantity: 5,
item_price: 188,
pv: 150,
item_total: 5 * 188,
item_total_pv: 5 * 150
}
]
}
}
},
methods: {
printDemo() {
this.$refs.easyPrint.print()
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

143
mes/qd/src/views/wms/test/print2/demo.vue Normal file
View File

@@ -0,0 +1,143 @@
<template>
<div>
<div class="tab_company_out">
<div style="margin-bottom:10px;">
<span style="font-size: 24px;text-align: center;">大标题</span>
</div>
<table>
<tr>
<th width="12%"></th>
<th width="15%"></th>
<th width="15%"></th>
<th width="15%"></th>
</tr>
<!-- 每页显示onePageRow条数据 -->
<tr v-for="(row,index) in tableData" :key="index">
<td align="center">{{row.date}}</td>
<td align="center">{{row.name}}</td>
<td align="center">{{row.name}}</td>
<td align="center">{{row.name}}</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: 'Demo',
props: {
// 接受的打印数据
tableData: {}
}
}
</script>
<style scoped>
* {
padding: 0;
margin: 0;
list-style-type: none;
font-family: "微软雅黑";
font-size: 12px;
}
.tab_company_out {
text-align: center;
width: 100%;
margin: auto;
page-break-after: always;
}
h3 {
font-size: 14px;
}
.dan {
text-align: center;
position: relative;
}
.dan span {
position: absolute;
right: 0;
}
p {
overflow: hidden;
padding: 10px 0;
}
p span {
float: left;
}
p span ins {
text-decoration: underline;
}
p time {
float: right;
}
table {
width: 100%;
border: none;
border-bottom: 1px solid #000;
}
table tr td {
border: 1px solid #000;
border-bottom: none;
border-right: none;
height: 20px;
line-height: 20px;
}
table tr td:last-of-type,
table tr th:last-of-type {
border-right: 1px solid #000;
}
table tr th {
border-top: 1px solid #000;
border-left: 1px solid #000;
height: 22px;
line-height: 22px;
font-size: 12px;
}
table th {
text-align: center;
}
table tr th:nth-child(2) {
width: 0;
}
.lu {
display: inline-block;
padding-top: 10px;
}
.lu li {
float: left;
text-align: left;
margin-right: 15px;
}
.lu li label {
width: 100px;
display: inline-block;
}
.lu li:last-of-type {
margin-right: 0;
}
</style>
<style scoped>
@page{
margin: 3mm;
}
</style>

80
mes/qd/src/views/wms/test/print2/index.vue Normal file
View File

@@ -0,0 +1,80 @@
<template>
<div class="app-container">
<el-button @click="printDemo">打印测试</el-button>
<vue-easy-print v-show="false" ref="easyPrint" :table-show="false" :space-row="true">
<demo :table-data="tableData" />
</vue-easy-print>
</div>
</template>
<script>
// https://www.icode9.com/content-4-906367.html#vue_jsbarcode_19
// https://juejin.cn/post/6882565127246184455
// https://www.npmjs.com/package/vue-easy-print
// https://github.com/bosscloud/vue-print
// https://jsfiddle.net/pcloth/p35vz97u/
import vueEasyPrint from 'vue-easy-print'
import demo from './demo'
export default {
components: {
vueEasyPrint,
demo
},
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}]
}
},
created() {
for (let i = 0; i < 100; i++) {
const a = {
date: '2016-05-03',
name: '张三'
}
this.tableData.push(a)
}
},
methods: {
printDemo() {
this.$refs.easyPrint.print()
}
}
}
</script>
<style scoped>
</style>

92
mes/qd/src/views/wms/test/print3/index.vue Normal file
View File

@@ -0,0 +1,92 @@
<template>
<div>
<button @click="qrcode">二维码生成</button>
<button @click="oneCode">一维码生成</button>
<button @click="create">生成</button>
<el-button @click="printDemo">打印测试</el-button>
<vue-easy-print v-show="false" ref="easyPrint" :table-show="false" :space-row="true">
<div style="font-size: 20px">
<el-row style="border: 1px solid red">
<el-col :span="6">
<div id="qrcode" class="grid-content bg-purple"/>
</el-col>
<el-col :span="18">
<el-row style="margin-top: 1%">
<el-col :span="3">桶号:</el-col>
<el-col :span="21">CP00001</el-col>
</el-row>
<el-row style="margin-top: 3%">
<el-col :span="3">重量：</el-col>
<el-col :span="21">50KG</el-col>
</el-row>
<el-row style="margin-top: 3%">
<el-col :span="3">日期</el-col>
<el-col :span="21">2021-11-01</el-col>
</el-row>
</el-col>
</el-row>
<el-row style="margin-top: 2%">
<el-col :span="3">编码:</el-col>
<el-col :span="21">JZ06-LY-C3-90</el-col>
</el-row>
<el-row style="margin-top: 2%">
<el-col :span="3">牌号：</el-col>
<el-col :span="21">JZ06</el-col>
</el-row>
<el-row style="margin-top: 2%">
<el-col :span="3">批次</el-col>
<el-col :span="21">FP2021001</el-col>
</el-row>
</div>
</vue-easy-print>
</div>
</template>
<script>
// http://localhost:8013/test/print
import QRCode from 'qrcodejs2' // 引入qrcode
import JsBarcode from 'jsbarcode'
import vueEasyPrint from 'vue-easy-print'
export default {
name: 'Test',
components: {
vueEasyPrint
},
mounted() {
this.qrcode()
},
methods: {
printDemo() {
this.$refs.easyPrint.print()
},
qrcode() {
// eslint-disable-next-line no-unused-vars
const qrcode1 = new QRCode('qrcode', {
width: 132,
height: 132,
text: 'https://www.baidu.com', // 二维码地址
colorDark: '#000',
colorLight: '#fff'
})
},
oneCode() {
JsBarcode('#barcode1', 'Hi!', {
fontSize: 40,
background: '#4b8b7f',
lineColor: '#ffffff',
margin: 40,
marginLeft: 80
})
},
create() {
this.oneCode()
this.qrcode()
}
}
}
</script>

51
mes/qd/src/views/wms/test/print3/index2.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<div>
<button @click="qrcode">二维码生成</button>
<button @click="oneCode">一维码生成</button>
<button @click="create">生成</button>
<div>
<div id="qrcode"/> <!-- 创建一个div，并设置id为qrcode -->
<svg id="barcode1"/>
</div>
</div>
</template>
<script>
// http://localhost:8013/test/print
import QRCode from 'qrcodejs2' // 引入qrcode
import JsBarcode from 'jsbarcode'
export default {
name: 'Test',
mounted() {
},
methods: {
qrcode() {
// eslint-disable-next-line no-unused-vars
const qrcode1 = new QRCode('qrcode', {
width: 132,
height: 132,
text: 'https://www.baidu.com', // 二维码地址
colorDark: '#000',
colorLight: '#fff'
})
},
oneCode() {
JsBarcode('#barcode1', 'Hi!', {
fontSize: 40,
background: '#4b8b7f',
lineColor: '#ffffff',
margin: 40,
marginLeft: 80
})
},
create() {
this.oneCode()
this.qrcode()
}
}
}
</script>

92
mes/qd/src/views/wms/test/print3/index3.vue Normal file
View File

@@ -0,0 +1,92 @@
<template>
<div>
<button @click="qrcode">二维码生成</button>
<button @click="oneCode">一维码生成</button>
<button @click="create">生成</button>
<el-button @click="printDemo">打印测试</el-button>
<vue-easy-print v-show="false" ref="easyPrint" :table-show="false" :space-row="true">
<div style="font-size: 20px">
<el-row style="border: 1px solid red">
<el-col :span="6">
<div id="qrcode" class="grid-content bg-purple"/>
</el-col>
<el-col :span="18">
<el-row style="margin-top: 1%">
<el-col :span="3">桶号:</el-col>
<el-col :span="21">CP00001</el-col>
</el-row>
<el-row style="margin-top: 3%">
<el-col :span="3">重量：</el-col>
<el-col :span="21">50KG</el-col>
</el-row>
<el-row style="margin-top: 3%">
<el-col :span="3">日期</el-col>
<el-col :span="21">2021-11-01</el-col>
</el-row>
</el-col>
</el-row>
<el-row style="margin-top: 2%">
<el-col :span="3">编码:</el-col>
<el-col :span="21">JZ06-LY-C3-90</el-col>
</el-row>
<el-row style="margin-top: 2%">
<el-col :span="3">牌号：</el-col>
<el-col :span="21">JZ06</el-col>
</el-row>
<el-row style="margin-top: 2%">
<el-col :span="3">批次</el-col>
<el-col :span="21">FP2021001</el-col>
</el-row>
</div>
</vue-easy-print>
</div>
</template>
<script>
// http://localhost:8013/test/print
import QRCode from 'qrcodejs2' // 引入qrcode
import JsBarcode from 'jsbarcode'
import vueEasyPrint from 'vue-easy-print'
export default {
name: 'Test',
components: {
vueEasyPrint
},
mounted() {
this.qrcode()
},
methods: {
printDemo() {
this.$refs.easyPrint.print()
},
qrcode() {
// eslint-disable-next-line no-unused-vars
const qrcode1 = new QRCode('qrcode', {
width: 132,
height: 132,
text: 'https://www.baidu.com', // 二维码地址
colorDark: '#000',
colorLight: '#fff'
})
},
oneCode() {
JsBarcode('#barcode1', 'Hi!', {
fontSize: 40,
background: '#4b8b7f',
lineColor: '#ffffff',
margin: 40,
marginLeft: 80
})
},
create() {
this.oneCode()
this.qrcode()
}
}
}
</script>