java_project
/
logpm_page
4
1
Fork 0
Code Issues Pull Requests Activity
Browse Source

货架二维码结合模板生成

dev-warehouse
kilo 2 years ago
parent
ede8c6209a
commit
23cc8ecf3a
3 changed files with 210 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 19
      src/api/basicdata/basicdataGoodsShelf.js
  2. 21
      src/option/basicdata/basicdataGoodsShelf.js
  3. 204
      src/views/basicdata/warehouse/goodsShelf/basicdataGoodsShelf.vue

19
src/api/basicdata/basicdataGoodsShelf.js
Unescape View File

@ -47,4 +47,23 @@ export const update = (row) => {
data: row
})
}
export const getTemplate = (row) => {
return request({
url: '/api/logpm-basicdata/goodsShelf/getTemplate',
method: 'post',
responseType: 'blob',
data: row
})
}
export const getQRCodeImg = (qrCode) => {
return request({
url: '/api/logpm-basicdata/goodsShelf/getQRCodeImg',
method: 'get',
responseType: 'blob',
params:{
qrCode
}
})
}

21
src/option/basicdata/basicdataGoodsShelf.js
Unescape View File

@ -102,11 +102,18 @@ export default {
display: false,
hide: true,
},
{
label: "列数",
prop: "rowNum",
},
{
label: "层数",
prop: "storeyNum",
},
{
label: "货架状态",
prop: "goodsShelfStatus",
},
{
label: "启用状态",
@ -116,6 +123,16 @@ export default {
// label: "货位名称",
// prop: "goodsAllcationId",
// },
{
label: "二维码",
prop: "qrCode",
display: false,
hide: true,
},
// {
// label: "二维码图片",
// prop: "qrCodeUrl",
// },
{
label: "备注",
prop: "remarks",

204
src/views/basicdata/warehouse/goodsShelf/basicdataGoodsShelf.vue
Unescape View File

@ -47,6 +47,8 @@
<div class="avue-crud__left">
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新 增</el-button>
<el-button type="danger" icon="el-icon-delete" @click="handleDelete" plain>删 除</el-button>
<el-button type="danger" icon="el-icon-delete" @click="aaa" plain>导出二维码</el-button>
<el-button type="danger" icon="el-icon-delete" @click="bbb" plain>查看二维码</el-button>
</div>
<!-- 头部右侧按钮模块 -->
<div class="avue-crud__right">
@ -65,16 +67,41 @@
:border="option.border">
<el-table-column type="selection" v-if="option.selection" width="55" align="center"></el-table-column>
<el-table-column type="expand" v-if="option.expand" align="center"></el-table-column>
<el-table-column v-if="option.index" label="序号" type="index" width="80px" align="center">
</el-table-column>
<template v-for="(item,index) in option.column">
<el-table-column v-if="option.index" label="序号" type="index" width="80px" align="center"></el-table-column>
<template v-for="(item,index) in option.column" >
<!-- table字段 -->
<el-table-column v-if="item.hide!==true"
<el-table-column v-if="item.hide!==true "
:prop="item.prop"
:label="item.label"
:width="item.width"
:key="index">
<!-- {{data}}-->
<!-- {{a}}-->
<!-- {{data[index].qrCodeUrl}}-->
<!-- {{data[0].qrCodeUrl}}-->
<!-- <span>{{data}}</span>-->
<template #default="{row,$index}" v-if="item.prop === 'qrCodeUrl'">
<!-- <el-link target="_blank" @click="downloadLink(row)">{{row.fileName}}</el-link>-->
<el-image :src="row.qrCodeUrl" width="40" height="40" class="head_pic"/>
</template>
</el-table-column>
<!-- <el-table-column v-if="item.prop==='qrCodeUrl'"-->
<!-- :prop="item.prop"-->
<!-- :label="item.label"-->
<!-- :width="item.width"-->
<!-- :key="index">-->
<!--&lt;!&ndash; <img :src="data[index].qrCodeUrl" width="40" height="40" class="head_pic"/>&ndash;&gt;-->
<!--&lt;!&ndash; {{data}}&ndash;&gt;-->
<!--&lt;!&ndash; {{data[index].qrCodeUrl}}&ndash;&gt;-->
<!--&lt;!&ndash; {{data[0].qrCodeUrl}}&ndash;&gt;-->
<!--&lt;!&ndash; aaa:{{index}}&ndash;&gt;-->
<!--&lt;!&ndash; {{item}}&ndash;&gt;-->
<!-- </el-table-column>-->
</template>
<!-- 操作栏模块 -->
<el-table-column prop="menu" label="操作" :width="220" align="center">
@ -152,11 +179,6 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注:" prop="remarks" label-width="100px">
<el-input v-model="form.remarks" placeholder="请输入备注" style="width: 88%;"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="货架状态:" prop="goodsShelfStatus" label-width="100px" >
<!-- <el-input v-model="form.areaStatus" placeholder="请输入货区状态；1-启用，2-禁用"/>-->
@ -171,13 +193,37 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="货区:" prop="goodsAreaInfo" v-if="isShowgoodsArea" label-width="100px">
<el-cascader :options="optioner" style="width: 88%" v-model="form.goodsAreaInfo" :show-all-levels="false">
<el-form-item label="备 注:" prop="remarks" label-width="100px">
<el-input v-model="form.remarks" placeholder="请输入备注" style="width: 88%;"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="列 数:" prop="rowNum" label-width="100px">
<el-input v-model="form.rowNum" placeholder="请输入货架层数" style="width: 88%;"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="层 数:" prop="storeyNum" label-width="100px">
<el-input v-model="form.storeyNum" placeholder="请输入货架列数" style="width: 88%;"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="货 区:" prop="goodsAreaInfo" v-if="isShowgoodsArea" label-width="100px">
<el-cascader :options="optioner" clearable style="width: 88%" v-model="form.goodsAreaInfo" :show-all-levels="false">
</el-cascader>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="二维码图片:" prop="isShowQRCode" v-if="isShowQRCode" label-width="100px">
<!-- <span>{{form.qrCodeUrl}}</span>-->
<!-- <span>{{this.form.qrCodeUrl}}</span>-->
<el-image width="10" height="10" w-full :src="form.qrCodeUrl" alt="Preview Image"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 表单按钮 -->
<template #footer>
<span v-if="!view" class="dialog-footer">
@ -186,16 +232,57 @@
</span>
</template>
</el-dialog>
<el-dialog >
<!-- {{this.data.qrCodeUrl}}-->
<!-- <img w-full :src="this.data.qrCodeUrl" alt="Preview Image" />-->
</el-dialog>
<!-- -->
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
v-model="dialogVisible">
<div >
<div v-for="(item,index) in qrCodeObj" class="pdf-dom">
<el-divider></el-divider>
<el-row>
<el-col :span="24" >
<el-image width="10" height="10" w-full :key="index" :src="item " alt="Preview Image"/>
</el-col>
</el-row>
<!-- <center>-->
<!-- <span>-->
<!-- <strong>货架名称:{{qrCodeObj.goodsShelfName[index]}}</strong>-->
<!-- </span>-->
<!-- <br/>-->
<!-- <span>-->
<!-- <strong>货架二维码:{{qrCodeObj.qrCode[index]}}</strong>-->
<!-- </span>-->
<!-- </center>-->
</div>
</div>
<span slot="footer" class="dialog-footer">
<!-- <el-button type="primary" @click="ddd">导 出</el-button>-->
<el-button type="primary" @click="ccc">打 印</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</span>
</el-dialog>
</div>
</basic-container>
</template>
<script>
import { getList, getDetail, add, update, remove } from "@/api/basicdata/basicdataGoodsShelf";
import { getList, getDetail, add, update, remove,getQRCodeImg,getTemplate } from "@/api/basicdata/basicdataGoodsShelf";
import option from "@/option/basicdata/basicdataGoodsShelf";
import { mapGetters } from "vuex";
import {getNodeList} from "@/api/basicdata/basicdataGoodsArea";
import { getDictionaryBiz } from '@/api/system/dict';
import { htmlToPdf } from '@/utils/htmlToPdf';
export default {
data () {
return {
@ -222,6 +309,7 @@ export default {
// 表单数据
form: {},
isShowgoodsArea:false,
isShowQRCode:false,
// 选择行
selectionList: [],
// 表单配置
@ -238,6 +326,8 @@ export default {
goodsAreaList: [],
//级联选择器列表数据
optioner: [],
qrCodeObj:[],
dialogVisible:false,
validatorRules: {
goodsAreaInfo: [
{ required: true, message: '请选择货区!', trigger: 'change' }
@ -259,6 +349,7 @@ export default {
this.onLoad(this.page);
},
mounted () {
@ -304,20 +395,21 @@ export default {
this.onLoad(this.page);
},
handleSubmit () {
// console.log("this.form",this.form);
//表单校验添加租户编码
this.$refs.form.validate(valid=>{
if (valid) {
if (!this.form.id) {
if (this.form.goodsAreaInfo.length===2){
console.log(this.form.goodsAreaInfo.length);
if (this.form.goodsAreaInfo.length===1){
this.$message({
type:'warning',
message:'请先为该仓库添加货区!!!'
});
return ;
}else {
this.form.warehouseId = this.form.goodsAreaInfo[0];
this.form.goodsAreaId = this.form.goodsAreaInfo[1];
}
// this.form.goodsAreaInfo = null;
console.log(">>>>>",this.form);
console.log(">>>>>",this.form.goodsAreaInfo);
add(this.form).then(() => {
this.box = false;
this.onLoad(this.page);
@ -350,6 +442,7 @@ export default {
this.form = {}
this.box = true
this.isShowgoodsArea=true;
this.isShowQRCode = false;
this.$refs['form'].resetFields();
},
@ -357,6 +450,7 @@ export default {
this.title = '编辑'
this.box = true
this.isShowgoodsArea=false;
this.isShowQRCode = false;
getDetail(row.id).then(res => {
console.log(">>>>>>>>>>>",row);
res.data.data.goodsShelfStatus = res.data.data.goodsShelfStatus.toString();
@ -368,27 +462,34 @@ export default {
a.push(res.data.data.goodsAreaId)
}
this.form.goodsAreaInfo=a;
// this.form.goodsAreaInfo.push(res.data.data.warehouseId)
// this.form.goodsAreaInfo.push(res.data.data.goodsAreaId)
//TODO 这里还需要对二维码图片进行控制显示
});
},
handleView (row) {
async handleView (row) {
this.title = '查看'
this.view = true;
this.box = true;
this.isShowgoodsArea=true;
getDetail(row.id).then(res => {
this.isShowQRCode = true;
await getDetail(row.id).then(async res => {
res.data.data.goodsShelfStatus = res.data.data.goodsShelfStatus.toString()
res.data.data.enableStatus = res.data.data.enableStatus.toString()
this.form = res.data.data;
//解析货架的仓库/货区信息
let a=[];
if (!!res.data.data.goodsAreaId&&!!res.data.data.warehouseId){
a.push(res.data.data.warehouseId)
a.push(res.data.data.goodsAreaId)
}
this.form.goodsAreaInfo=a;
//完成二维码的表单展示
//获取二维码
await getQRCodeImg(row.qrCode).then(res=>{
let url = window.URL.createObjectURL(res.data);
this.form.qrCodeUrl = url;
})
});
},
handleDelete () {
if (this.selectionList.length === 0) {
@ -412,6 +513,40 @@ export default {
});
});
},
aaa(){
if (this.selectionList.length === 0) {
this.$message.warning("请选择至少一条数据");
return;
}
},
//结合模板生成二维码
bbb(params = {}){
if (this.selectionList.length === 0) {
this.$message.warning("请选择至少一条数据");
return;
}
this.dialogVisible = true;
this.qrCodeObj=[];
let obj={};
this.selectionList.forEach((item,index)=>{
if (item.qrCode){
params.goodsshelfName = item.goodsShelfName;
params.qrCode = item.qrCode;
params.storeyNum = item.storeyNum;
params.rowNum = item.rowNum;
getTemplate(params).then(res=>{
let url = window.URL.createObjectURL(res.data); // 获取返回参数中的需要的值data
this.qrCodeObj.push(url);
})
}
})
},
ccc(){
htmlToPdf('pdf-dom', '报告');
},
rowDel (row) {
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
@ -451,7 +586,7 @@ export default {
this.page.pageSize = pageSize;
this.onLoad(this.page);
},
onLoad (page, params = {}) {
async onLoad (page, params = {}) {
this.loading = true;
let ids = {};
if (!!this.query.goodsAreaInfo){
@ -468,10 +603,13 @@ export default {
}else {
console.log('error!!');
}
Object.assign(this.query,ids)
}
getList(page.currentPage, page.pageSize, Object.assign(params, ids)).then(res => {
let res=await getList(page.currentPage, page.pageSize, Object.assign(params, this.query ))
const data = res.data.data;
data.records.forEach(item=>{
console.log(">>>>>",data);
await data.records.forEach((item,index)=>{
this.enableStatusData.forEach(enableStatus=>{
if (item.enableStatus === enableStatus.sort){
item.enableStatus = enableStatus.dictValue;
@ -482,15 +620,17 @@ export default {
item.goodsShelfStatus = goodsShelfStatus.dictValue;
}
})
})
this.page.total = data.total;
this.data = data.records;
this.loading = false;
this.selectionClear();
this.page.total = data.total;
this.data = data.records;
this.loading = false;
this.selectionClear();
});
},
},
};
</script>

Write Preview
Loading…
Cancel
Save