upright
/
duoji-frontend
mirror of https://gitlab.hzleaper.com:81/duoji/duoji-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

库存列表接口联调，盘点管理页面逻辑变动

Browse Source
merge-requests/1/head
张鑫 5 years ago
parent e6ccb6fe7d
commit 01a79f1429
7 changed files with 487 additions and 126 deletions
Show Stats Download Patch File Download Diff File

6
README.md
Unescape Escape View File

@ -1,4 +1,4 @@
## 垛机监控系统
# 垛机监控系统
### Project setup
@ -30,7 +30,9 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
#### 2、简介：
垛机监控系统是一款TOB的项目，由哲合科技有限公司承担研发，主要为甲方在仓储方面的出入库过程中，提供拍照取证，实时录像，盘点管理等功能。项目主要涵盖实时视频流、历史数据、盘点管理、巷道管理、球机管理、个人中心等。基于vue-cli3.x + Ant Design Vue搭建,rtsp视频流采用VLC插件结合Firefox火狐浏览器运行的方式播放，因VLC支持性问题需回退Firefox火狐浏览器版本至51版之前，详情请见 [VLC开发文档](https://wiki.videolan.org/Documentation:WebPlugin/#Introduction:_Building_Web_pages_with_Video)
#### 3、测试环境地址：暂无(详情请看下面注释) 测试环境账号：暂无(详情请看下面注释)
#### 3、测试环境地址：
暂无(详情请看下面注释) 测试环境账号：暂无(详情请看下面注释)
#### 4、项目打包命令：npm run build（环境未作区分，详情请看下面注释）
>注释：因项目采用直接打包给后端，后端再配置nginx的形式，接口统一走的ip地址代理，并非域名代理，需后端本地起服务内网访问，前端与其连接在同一宽带网段中即可请求接口。所以暂未区分开发环境dev、测试环境test、生产环境prod等，相应的也无测试环境地址和账号一说，直接ip地址访问（具体ip地址询问后端）

21
src/api/http/http-api.js
Unescape Escape View File

@ -106,6 +106,12 @@ export default {
name: '分类列表',
method: 'POST'
},
//盘点管理输入框搜索时联想用
getCategoryList: {
url: '/category/list',
name: '分类列表',
method: 'GET'
},
addCategory: {
url: '/category',
name: '新增分类',
@ -136,5 +142,20 @@ export default {
name: '导出所有巷道',
method: 'GET'
},
stockCheckCorrect: {
url: '/stock/checkCorrect',
name: '人工复核正确',
method: 'POST'
},
stockCheckByMan: {
url: '/stock/checkByMan',
name: '人工复核',
method: 'POST'
},
getStockpage: {
url: '/stock/page',
name: '库存列表',
method: 'POST'
},
}

143
src/views/checkManage/checkOperation.vue
Unescape Escape View File

@ -31,48 +31,70 @@
</a-select-option>
</a-select>
</div>
<div class="carousel-page">
<p class="carousel-page-title">工单号：{{checkObj.orderNum}}</p>
<div class="carousel-page-content">
<div class="img-box">
<img
src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1931813381,2486401072&fm=26&gp=0.jpg"
alt="">
<p>操作前照片</p>
</div>
<div class="img-box">
<img
src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3139679339,2066283298&fm=26&gp=0.jpg"
alt="">
<p>操作后照片</p>
</div>
</div>
<div class="carousel-page-footer">
<div class="info-box">
<p>系统登记品规：{{checkObj.category}}</p>
<p>系统登记数量：{{checkObj.count}}</p>
</div>
<div class="status" v-if="checkObj.status == 0">
未核对
</div>
<div class="status" v-if="checkObj.status == 1">
已核对：<span style="color: #1afa29;">核对正确</span>
</div>
<div class="status" v-if="checkObj.status == 2">
已核对：<span style="color: #d81e06;">核对错误</span>
</div>
<div class="status-btn">
<a-button class="btn" type="danger">核对错误</a-button>
<a-button class="btn" type="primary" style="background:#29c12b;border-color:#29c12b;">核对正确
</a-button>
</div>
</div>
</div>
<div v-for="(key,value) in checkList" :key="value">
<div v-if="checkObj.shelveId == value">
<!--{{value}}{{key}}-->
<div v-for="(columnItem,index) in key" :key="index">
<div class="carousel-page"
v-if="columnItem.row == checkObj.row && columnItem.column == checkObj.column">
<p class="carousel-page-title">工单号：{{checkObj.orderNum}}</p>
<div class="carousel-page-content">
<div class="img-box">
<img
src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1931813381,2486401072&fm=26&gp=0.jpg"
alt="">
<p>操作前照片</p>
</div>
<div class="img-box">
<img
src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3139679339,2066283298&fm=26&gp=0.jpg"
alt="">
<p>操作后照片</p>
</div>
</div>
<div class="carousel-page-footer">
<div class="info-box">
<p>系统登记品规：{{checkObj.category}}</p>
<p>系统登记数量：{{checkObj.count}}</p>
</div>
<div class="status" v-if="checkObj.status == 0">
未核对
</div>
<div class="status" v-if="checkObj.status == 1">
已核对：<span style="color: #d81e06;">核对错误</span>
</div>
<div class="status" v-if="checkObj.status == 2">
已核对：<span style="color: #1afa29;">核对正确</span>
</div>
<div class="status-btn" v-if="checkObj.status == 0">
<a-button class="btn"
type="danger"
@click="showModel(checkObj,index)"
>人工复核
</a-button>
<a-button class="btn"
type="primary"
style="background:#29c12b;border-color:#29c12b;"
@click="checkSure(checkObj.row,checkObj.column,checkObj.shelveId,index)"
>核对正确
</a-button>
</div>
<div class="status-btn" v-if="checkObj.status == 1 ||checkObj.status == 2">
<a-button class="btn"
type="danger"
@click="showModel(checkObj,index)"
>核对错误
</a-button>
<a-button class="btn"
type="primary"
style="background:#29c12b;border-color:#29c12b;"
@click="checkSure(checkObj.row,checkObj.column,checkObj.shelveId,index)"
>核对正确
</a-button>
</div>
</div>
</div>
<div class="bottom-btn"
v-if="columnItem.row == checkObj.row && columnItem.column == checkObj.column">
@ -84,9 +106,17 @@
</div>
</div>
</div>
<Model
:visible.sync="visible"
:modelData.sync="modelData"
:index="index"
@sure="submit"
@close="closeModel"
/>
</div>
</template>
<script>
import Model from "./model.vue"
export default {
data() {
return {
@ -97,7 +127,12 @@ export default {
id: 0,
selectName: '',
shelveId: '',
selectType: ''
selectType: '',
visible: false,
category: '',
count: 0,
modelData: {},
index: 0
}
},
created() {
@ -115,6 +150,9 @@ export default {
mounted() {
this.getStreetList()
},
components: {
Model
},
methods: {
//获取巷道列表
getStreetList(id) {
@ -220,7 +258,34 @@ export default {
this.getStockInfo(this.checkList[x][index].row, this.checkList[x][index].column, this.checkList[x][index].shelveId)
}
}
}
},
checkSure(row, column, shelveId, index) {
this.$api.httpApi.stockCheckCorrect({
data: {
row: Number(row),
column: Number(column),
shelveId: shelveId,
}
}).then(res => {
this.next(index)
}).catch(err => {
});
},
showModel(checkObj, index) {
this.visible = true
this.modelData = checkObj
this.index = index
},
submit(visible, index) {
this.visible = visible
console.log(index)
this.next(index)
},
closeModel(visible, data, index) {
this.visible = visible
this.modelData = data
},
}
}
</script>

114
src/views/checkManage/index.vue
Unescape Escape View File

@ -15,42 +15,46 @@
未盘点
</span>
</div>
<!--<div v-for="item in checkList" :key="item.id">-->
<!--{{item}}-->
<!--</div>-->
<div class="check-content" v-for="item in data" :key="item.id">
<div v-for="(key,value) in checkList" :key="value">
<div class="roadway-top" v-if="item.id == select && value == streetDetail.leftShelveId">
<happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
<div class="roadway-box">
<div class="line" v-for="(column,index) in item.leftColumn" :key="index">
<div v-for="(row,index) in item.leftRow" :key="index">
<div class="roadway-top" v-if="item.id == select ">
<happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
<div class="roadway-box">
<div class="line" v-for="(column,index) in item.leftColumn" :key="index">
<div v-for="(row,i) in item.leftRow" :key="i" class="el">
<!--渲染默认巷道框架规格 定位浮在 已有巷道上做对应-->
<span class="default">
{{row}}-{{column}}
</span>
<div v-for="(key,value) in checkList" :key="value">
<div v-for="(columnItem,val) in key" :key="val">
<div v-if="columnItem.row== row && columnItem.column ==column"
@click="tocheckOperation(columnItem,item)"
class="ele"
:style="{background:columnItem.status ==0?'#bfbfbf':columnItem.status == 1?'#1afa29':'#d81e06'}"
<div
v-if="columnItem.row== row && columnItem.column ==column && value == streetDetail.leftShelveId"
@click="tocheckOperation(columnItem,item)"
class="el"
:style="{background:columnItem.status ==0?'#bfbfbf':columnItem.status == 2?'#1afa29':'#d81e06'}"
>
{{columnItem.row}}-{{columnItem.column}}
</div>
</div>
</div>
</div>
</div>
</happy-scroll>
<a-radio-group v-model="size" style="margin:10px 0"
v-if="streetDetail.leftInsideShelveId && streetDetail.leftOutsideShelveId">
<a-radio-button value="leftOutsideShelveId">
>
外
</a-radio-button>
<a-radio-button value="leftInsideShelveId">
内
</a-radio-button>
</a-radio-group>
</div>
</div>
</happy-scroll>
<a-radio-group v-model="size" style="margin:10px 0"
v-if="streetDetail.leftInsideShelveId && streetDetail.leftOutsideShelveId">
<a-radio-button value="leftOutsideShelveId">
外
</a-radio-button>
<a-radio-button value="leftInsideShelveId">
内
</a-radio-button>
</a-radio-group>
</div>
</div>
<div class="center-box">
<a-select v-if="data[0]" :default-value="data[0].name" style="width: 180px"
@change="handleChange" class="select-roadway">
@ -63,17 +67,23 @@
</a-button>
</div>
<div class="check-content" v-for="item in data" :key="item.id">
<div v-for="(key,value) in checkList" :key="value">
<div class="roadway-buttom" v-if="item.id == select && value == streetDetail.rightShelveId">
<happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
<div class="roadway-box">
<div class="line" v-for="(column,index) in item.rightColumn" :key="index">
<div v-for="(row,index) in item.rightRow" :key="index">
<div class="roadway-buttom" v-if="item.id == select">
<happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
<div class="roadway-box">
<div class="line" v-for="(column,index) in item.rightColumn" :key="index">
<div v-for="(row,index) in item.rightRow" :key="index" class="el">
<!--渲染默认巷道框架规格 定位浮在 已有巷道上做对应-->
<span class="default">
{{row}}-{{column}}
</span>
<div v-for="(key,value) in checkList" :key="value">
<div v-for="(columnItem,val) in key" :key="val">
<div v-if="columnItem.row== row && columnItem.column ==column"
@click="tocheckOperation(columnItem,item)"
class="ele"
:style="{background:columnItem.status ==0?'#bfbfbf':columnItem.status == 1?'#1afa29':'#d81e06'}"
<div
v-if="columnItem.row== row && columnItem.column ==column && value == streetDetail.rightShelveId"
@click="tocheckOperation(columnItem,item)"
class="el"
:style="{background:columnItem.status ==0?'#bfbfbf':columnItem.status == 2?'#1afa29':'#d81e06'}"
>
{{columnItem.row}}-{{columnItem.column}}
</div>
@ -81,17 +91,17 @@
</div>
</div>
</div>
</happy-scroll>
<a-radio-group v-model="size2" style="margin:10px 0"
v-if="streetDetail.rightInsideShelveId && streetDetail.rightOutsideShelveId">
<a-radio-button value="rightOutsideShelveId">
外
</a-radio-button>
<a-radio-button value="rightInsideShelveId">
内
</a-radio-button>
</a-radio-group>
</div>
</div>
</happy-scroll>
<a-radio-group v-model="size2" style="margin:10px 0"
v-if="streetDetail.rightInsideShelveId && streetDetail.rightOutsideShelveId">
<a-radio-button value="rightOutsideShelveId">
外
</a-radio-button>
<a-radio-button value="rightInsideShelveId">
内
</a-radio-button>
</a-radio-group>
</div>
</div>
</div>
@ -227,7 +237,8 @@ export default {
.line {
display: flex;
transform: rotateX(180deg); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上
.ele {
.el {
width: 46px;
height: 25px;
margin: 1px 2px;
@ -235,6 +246,15 @@ export default {
border-radius: 4px;
cursor: pointer;
font-size: 14px;
position: relative;
.default {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
}

262
src/views/checkManage/model.vue
Unescape Escape View File

@ -0,0 +1,262 @@
<template>
<div v-if="isShow">
<a-modal
v-model="isShow"
title="复核调整"
:closable="closable"
@ok="handleOk"
@cancel="handleCancel"
ok-text="确认"
cancel-text="取消"
class="p-model"
>
<a-form
:form="form"
:wrapper-col="formItemAcrossLayout.wrapperCol"
>
<a-form-item label="品规"
:label-col="formItemAcrossLayout.labelCol"
>
<a-input
@input="onInput"
v-decorator="['category', {rules: [{ required: true, message: '请输入品规名称!' }] }]"
/>
<happy-scroll class="search-list" v-if="searchListShow">
<div v-for="(item,index) in searchList" :key="index" class="search-item"
@click="select(item.name)">
{{item.name}}
</div>
</happy-scroll>
</a-form-item>
<a-form-item label="数量"
:label-col="formItemAcrossLayout.labelCol"
>
<a-input
v-decorator="['count', {rules: [{ required: true, message: '请输入数量!' }] }]"
/>
</a-form-item>
</a-form>
</a-modal>
</div>
</template>
<script>
var formItemAcrossLayout = { //formItemAcrossLayout当表单内item横向排列时用
labelCol: {span: 8}, //lable长度
wrapperCol: {span: 14}, //input长度
};
var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排列时用
labelCol: {span: 4},
wrapperCol: {span: 8, offset: 4},
};
export default {
props: ['visible', 'modelData', 'index'],
watch: {
//监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
visible: function (newVal) {
this.isShow = newVal; //newVal即是visible
// newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
},
modelData: function (newVal) {
console.log(newVal)
this.mData = newVal
this.$nextTick(() => { //this.$nextTick解决不能在表单渲染之前赋值的报错问题
this.form.setFieldsValue({ //setFieldsValue 表示对form表单重新设置值
category: newVal.category,
count: newVal.count
})
})
},
index: function (newVal) {
this.i = newVal;
},
},
data() {
return {
isShow: false,
title: '',
closable: false,//取消model模态框右上角的X号
confirmLoading: false,
form: this.$form.createForm(this, {name: 'dynamic_rule'}),
formItemAcrossLayout,
formItemVerticalLayout,
category: '',
searchList: [],
searchListShow: false,
mData: {},
i: 0
};
},
mounted() {
console.log('mounted执行了')
},
methods: {
handleOk() {
this.confirmLoading = true;
setTimeout(() => {
this.form.validateFields((err, values) => {
console.log(values)
if (!err) {
this.$api.httpApi.stockCheckByMan({
data: {
...values,
column: this.mData.column,
row: this.mData.row,
shelveId: this.mData.shelveId,
}
}).then(res => {
if (res.code == 200) {
this.$emit('sure', false, this.i)
this.$message.success('复核成功');
}
}).catch(err => {
});
}
});
this.confirmLoading = false;
}, 500);
},
handleCancel() {
console.log('Clicked cancel button');
this.$emit('close', false, {})
},
onInput(value) {
console.log(this.form.getFieldValue('category'))
//获取具体输入框的值
var name = this.form.getFieldValue('category')
this.$api.httpApi.getCategoryList({
params: {
name: name,
}
}).then(res => {
if (res.code == 200) {
this.searchList = res.data
if (res.data.length > 0) {
this.searchListShow = true
}
}
}).catch(err => {
});
},
select(name) {
this.form.setFieldsValue({ //setFieldsValue 表示对form表单重新设置值
category: name,
})
this.searchListShow = false
}
},
};
</script>
<style lang="scss" scoped>
.p-model {
.across-layout {
display: flex;
}
.ant-divider-horizontal {
margin: 6px 0;
}
.search-list {
background: #ffffff;
width: 100%;
height: 200px;
box-shadow: 0 5px 10px #efefef;
position: absolute;
z-index: 999;
.search-item {
padding: 0 10px;
border-top: #fafafa solid 1px;
border-bottom: #fafafa solid 1px;
&:hover {
background: #fafafa;
}
}
}
}
.video-mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
#video-test {
}
.video-close {
position: absolute;
right: 20px;
top: 20px;
color: #ffffff;
font-size: 24px;
width: 32px;
height: 32px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
}
.operation-list {
position: absolute;
right: 200px;
bottom: 20px;
/*width: 150px;*/
/*border: solid 1px blue;*/
z-index: 10;
.operation-item {
img {
width: 42px;
}
span {
padding: 5px 10px;
background: rgba(0, 0, 0, 0.5);
font-size: 18px;
color: #ffffff;
}
}
}
.direction-list {
position: absolute;
right: 30px;
bottom: 20px;
width: 150px;
z-index: 10;
/*border: solid 1px blue;*/
.direction-item {
display: flex;
align-items: center;
justify-content: space-between;
img {
width: 42px;
}
}
}
img {
cursor: pointer;
}
}
</style>

9
src/views/productSpecManage/index.vue
Unescape Escape View File

@ -55,13 +55,8 @@ import Model from "./model.vue"
import {importCategoryExcelUrl} from "@/api/importExcel";
const columns = [
{
title: '序号',
// dataIndex: 'id',
customRender: (text, record, index) => {
return (
(record.pageNumber - 1) * 10 + index + 1
)
}
title: 'ID',
dataIndex: 'id',
},
{
title: '品类',

58
src/views/repertoryManage/index.vue
Unescape Escape View File

@ -22,6 +22,11 @@
:pagination="pagination"
@change="handleGetCameraIoList"
>
<span slot="actions" slot-scope="text">
<template>
<span>{{text.shelveId}} {{text.column}}列{{text.row}}行</span>
</template>
</span>
</a-table>
</div>
</template>
@ -31,33 +36,24 @@
import { importExcelUrl } from "@/api/importExcel";
const columns = [
{
title: '序号',
// dataIndex: 'id',
customRender: (text, record, index) => {
return (
(record.pageNumber - 1) * 10 + index + 1
)
}
},
{
title: '商品名',
dataIndex: 'name',
title: 'ID',
dataIndex: 'id',
},
{
title: '品规',
dataIndex: 'pro',
dataIndex: 'category',
},
{
title: '数量',
dataIndex: 'num',
dataIndex: 'count',
},
{
title: '货位',
dataIndex: 'pos',
scopedSlots: {customRender: 'actions'}
},
{
title: '导入时间',
dataIndex: 'updateTime',
dataIndex: 'exportTime',
},
];
export default {
@ -113,22 +109,22 @@ export default {
this.request();
},
request(){
// this.$api.httpApi.getCameraIoList({
// data: {
// page:this.pageNum,
// size:this.pageSize,
// }
// }).then(res => {
// const pagination = { ...this.pagination };
// pagination.total = res.data.total;
// this.data = res.data.list;
// this.pagination = pagination;
// res.data.list.forEach((value,index) => {
// value.pageNumber = this.pagination.current
// });
// }).catch(err => {
//
// });
this.$api.httpApi.getStockpage({
data: {
pageNum: this.pageNum,
pageSize: this.pageSize,
}
}).then(res => {
const pagination = {...this.pagination};
pagination.total = res.data.total;
this.data = res.data;
this.pagination = pagination;
res.data.list.forEach((value, index) => {
value.pageNumber = this.pagination.current
});
}).catch(err => {
});
},
},
components:{

Write Preview
Loading…
Cancel
Save