fengdong777
2 years ago
6 changed files with 660 additions and 20 deletions
@ -1,13 +1,339 @@ |
|||
<template> |
|||
<div>成品出库记录</div> |
|||
</template> |
|||
|
|||
<script> |
|||
<div class="app-container"> |
|||
<div v-show="viewState ==1"> |
|||
<button-bar ref="btnbar" view-title="成品出库记录" :btndisabled="btndisabled" @btnhandle="btnHandle" /> |
|||
<div class="main-content"> |
|||
<div class="searchcon"> |
|||
<el-button size="small" class="searchbtn" @click="clicksearchShow"> |
|||
{{ searchxianshitit }} |
|||
</el-button> |
|||
<div v-show="isSearchShow" class="search"> |
|||
<el-form ref="queryParams" :model="jmdListQuery" :inline="true" class="tab-header"> |
|||
<el-form-item label="合同编号"> |
|||
<el-input v-model="jmdListQuery.salesContractNumber" maxlength="20" placeholder="请输入合同编号" class="addinputw" |
|||
clearable /> |
|||
</el-form-item> |
|||
<el-form-item label="日期"> |
|||
<el-date-picker v-model="jmdListQuery.deliveryDate" type="date" :picker-options="pickerOptions" clearable value-format="yyyy-MM-dd" |
|||
placeholder="选择日期" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="btn" style="text-align: center;"> |
|||
<el-button type="primary" size="small" icon="el-icon-search" @click="dosearch">查询</el-button> |
|||
<el-button type="primary" size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<el-table v-loading="tableLoading1" :data="logList" border style="width: 100%"> |
|||
<el-table-column fixed width="80" type="index" label="序号" :index="indexMethod" align="center" /> |
|||
<el-table-column prop="salesContractNumber" label="销售合同号" width="150" align="center" /> |
|||
<el-table-column prop="contractSigningDate" label="签订日期" width="150" align="center" /> |
|||
<el-table-column prop="deliveryDate" label="出库时间" width="150" align="center" /> |
|||
<el-table-column prop="inforName" label="品牌名称" width="150" align="center" /> |
|||
<el-table-column prop="prodName" label="商品名称" width="150" align="center" /> |
|||
<el-table-column prop="typeName" label="商品类别名称" width="150" align="center" /> |
|||
<el-table-column prop="weight" label="净重" width="150" align="center" /> |
|||
<el-table-column prop="value" label="价值" width="150" align="center" /> |
|||
<el-table-column prop="amount" label="商品数量" width="150" align="center" /> |
|||
<!-- <el-table-column fixed="right" label="操作" width="100" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
type="primary" |
|||
size="mini" |
|||
@click="purchase(scope.row)" |
|||
> |
|||
查看详情 |
|||
</el-button> |
|||
</template>0 |
|||
</el-table-column> --> |
|||
</el-table> |
|||
</div> |
|||
<div class="pages"> |
|||
<!-- 翻页 --> |
|||
<pagination v-show="logListTotal > 0" :total="logListTotal" :page.sync="logListQuery.current" |
|||
:limit.sync="logListQuery.size" class="pagination" @pagination="loadLogList" /> |
|||
</div> |
|||
|
|||
</div> |
|||
<!-- <el-dialog |
|||
:title="dialogTitle + '详细信息'" |
|||
:visible.sync="editDialog" |
|||
width="60%" |
|||
> |
|||
<el-form ref="dataForm" :model="form" label-position="top" label-width="190px" class="formadd"> |
|||
<div class="title" style="display: flex;align-items: center;justify-content: space-between;height:40px"> |
|||
<div>原油信息</div> |
|||
</div> |
|||
<el-row> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">销售合同编号</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{form.contractNumber}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">签订时间</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{form.contractSigningDate}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">净重</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{form.weight}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">价值</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{form.value}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">发货车牌号</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{form.licensePlateNumber}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="4" class="trightb"> |
|||
<el-form-item class="trightb_item"> |
|||
<span slot="label">入库日期</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item class="trightb_item"> |
|||
<span>{{form.warehousingDate}}</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-form-item label="描述:" > |
|||
<el-popover placement="left" trigger="hover" :key="i" v-for="(item,i) in SrcList" style="margin-left: 20px;"> |
|||
<img :src="item.url" style="width: 600px;height: 600px"> |
|||
<img slot="reference" :src="item.url" style="width: 200px;height: 200px"> |
|||
</el-popover> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-dialog> --> |
|||
|
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from '@/api/oilTypeInAndOutBound/oilTypeInAndOutBound' |
|||
import Pagination from '@/components/pagination' |
|||
import { |
|||
parseTime |
|||
} from '@/utils/index' |
|||
import ButtonBar from '@/components/ButtonBar' |
|||
export default { |
|||
|
|||
components: { |
|||
ButtonBar, |
|||
Pagination, |
|||
}, |
|||
data() { |
|||
return { |
|||
viewState: 1, |
|||
tabActiveName: 'uplog', |
|||
index: "0", |
|||
isSearchShow: false, |
|||
searchxianshitit: '显示查询条件', |
|||
btndisabled: false, |
|||
tableLoading1: false, |
|||
tableLoading2: false, |
|||
dialogTitle:'', |
|||
editDialog:false, |
|||
form:{}, |
|||
SrcList:{}, |
|||
btnList: [ |
|||
{ |
|||
type: 'info', |
|||
size: 'small', |
|||
icon: 'cross', |
|||
btnKey: 'doClose', |
|||
btnLabel: '关闭' |
|||
} |
|||
], |
|||
logList: [], |
|||
logListQuery: { |
|||
current: 1, |
|||
size: 10 |
|||
}, |
|||
logListTotal: 1, |
|||
in112List: [], |
|||
in112ListQuery: { |
|||
current: 1, |
|||
size: 10 |
|||
}, |
|||
in112ListTotal: 1, |
|||
|
|||
jmdListQuery: { |
|||
salesContractNumber: "", |
|||
deliveryDate: "" |
|||
}, |
|||
pickerOptions:{ |
|||
disabledDate(time){ |
|||
return time.getTime()> Date.now();// 如果没有后面的-8.64e7就是不可以选择今天的 |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 初始化按钮 |
|||
this.$refs['btnbar'].setButtonList(this.btnList) |
|||
}, |
|||
created() { |
|||
// 初始化变量 |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
// 搜索条件效果 |
|||
clicksearchShow() { |
|||
this.isSearchShow = !this.isSearchShow |
|||
if (this.isSearchShow) { |
|||
this.searchxianshitit = '隐藏查询条件' |
|||
} else { |
|||
this.searchxianshitit = '显示查询条件' |
|||
} |
|||
}, |
|||
dosearch() { |
|||
this.loadLogList() |
|||
|
|||
}, |
|||
resetQuery() { |
|||
this.jmdListQuery = { |
|||
salesContractNumber: "", |
|||
deliveryDate: "" |
|||
} |
|||
this.loadLogList() |
|||
}, |
|||
// 右上角点击事件 |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case 'toAdd1': // 新增入库 |
|||
this.doAdd1() |
|||
break |
|||
case 'toAdd2': // 新增出库 |
|||
this.doAdd2() |
|||
break |
|||
case 'build': // 导出 |
|||
this.doBuild() |
|||
break |
|||
case 'doClose': // 关闭 |
|||
this.doClose() |
|||
break |
|||
default: |
|||
break |
|||
} |
|||
}, |
|||
init() { |
|||
this.loadLogList() |
|||
}, |
|||
purchase(row){ |
|||
this.dialogTitle = "数据"; |
|||
this.editDialog = true; |
|||
req.selectStorageBySid(row.sid).then((res)=>{ |
|||
this.form=res.data[0] |
|||
this.SrcList=res.data |
|||
}) |
|||
}, |
|||
handleOrder(tab, event) { |
|||
console.log("tab", tab) |
|||
// this.listQuery.status = tab.name; |
|||
// this.getList(); |
|||
// this.orderDatas(tab.name); |
|||
|
|||
this.index = tab.index |
|||
|
|||
switch (tab.index) { |
|||
// 入库 |
|||
case "0": |
|||
if (this.logList.length == 0) |
|||
this.loadLogList() |
|||
break; |
|||
// 出库 |
|||
case "1": |
|||
if (this.in112List.length == 0) |
|||
this.loadIn112List() |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
|
|||
}, |
|||
loadLogList() { |
|||
req.outboundListPage({ |
|||
current: this.logListQuery.current, |
|||
size: this.logListQuery.size, |
|||
params: this.jmdListQuery |
|||
}).then(response => { |
|||
if (response.code === '200' && response.data && response.data.total > 0) { |
|||
this.logList = response.data.records |
|||
this.logListTotal = response.data.total |
|||
this.logListQuery.current = response.data.current |
|||
this.logListQuery.size = response.data.size |
|||
} else { |
|||
this.logList = [] |
|||
this.logListTotal = 0 |
|||
} |
|||
}) |
|||
}, |
|||
// 序号 |
|||
indexMethod(index) { |
|||
var pagestart = (this.logListQuery.current - 1) * this.logListQuery.size |
|||
var pageindex = index + 1 + pagestart |
|||
return pageindex |
|||
}, |
|||
resetState() { |
|||
this.viewState = 1 |
|||
}, |
|||
doClose() { |
|||
this.$store.dispatch('tagsView/delView', this.$route) |
|||
this.$router.go(-1) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
</script> |
|||
<style scoped> |
|||
.wenjiantit { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
margin: 25px 0 10px 0; |
|||
} |
|||
|
|||
.forminfo { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
.listcon { |
|||
height: calc(100vh - 250px); |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
} |
|||
</style> |
|||
@ -1,13 +1,285 @@ |
|||
<template> |
|||
<div>成品出库登记</div> |
|||
<div> |
|||
|
|||
<div class="tab-header webtop"> |
|||
<!-- 标题 --> |
|||
<div>成品出库登记</div> |
|||
<!-- start 添加修改按钮 --> |
|||
<div> |
|||
<el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button> |
|||
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button> |
|||
</div> |
|||
<!-- end 添加修改按钮 --> |
|||
<!-- end 详情按钮 --> |
|||
</div> |
|||
|
|||
<div class="listconadd"> |
|||
|
|||
<el-card class="box-card"> |
|||
<div class="item"> |
|||
<span class="item_text">销售合同号：</span> |
|||
<el-input v-model="formobj.salesContractNumber" placeholder="" class="item_input" clearable /> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item_text">签订日期：</span> |
|||
<el-date-picker v-model="formobj.contractSigningDate" :picker-options="pickerOptions" type="date" format="yyyy-MM-dd" class="item_input" |
|||
value-format="yyyy-MM-dd" placeholder="请选择" /> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item_text">品牌名称:</span> |
|||
<el-select v-model="prodSid" filterable placeholder="请选择品牌名称" class="item_input" @change="getType" > |
|||
<el-option v-for="(item,i) in prodList" :key="i" :label="item.name" :value="item.sid" /> |
|||
</el-select> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item_text">商品名称:</span> |
|||
<el-select v-model="crudeSid" filterable placeholder="请选择商品名称" class="item_input" @change="getTank" > |
|||
<el-option v-for="(item,i) in crudeList" :key="i" :label="item.name" :value="item.sid" /> |
|||
</el-select> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item_text">商品类别名称:</span> |
|||
<el-select v-model="formobj.prodSid" filterable placeholder="请选择类别名称" class="item_input" @change="getList" > |
|||
<el-option v-for="(item,i) in ListList" :key="i" :label="item.name" :value="item.sid" /> |
|||
</el-select> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item_text">出库日期：</span> |
|||
<el-date-picker v-model="formobj.deliveryDate" type="date" :picker-options="pickerOptions" format="yyyy-MM-dd" class="item_input" |
|||
value-format="yyyy-MM-dd" placeholder="请选择" /> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item_text">净重：</span> |
|||
<el-input v-model="formobj.weight" placeholder="" class="item_input" clearable /> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item_text">价值：</span> |
|||
<el-input v-model="formobj.value" placeholder="" class="item_input" clearable /> |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<span class="item_text">备注：</span> |
|||
<el-input v-model="formobj.remarks" placeholder="" class="item_input" clearable /> |
|||
</div> |
|||
</el-card> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
import req from '@/api/baseInfo/becomeoil/index.js' |
|||
import req3 from '@/api/supplier/supplier' |
|||
import upload from '@/components/uploadFile/upload_yanchejianchaTuBiao' |
|||
export default { |
|||
components: { |
|||
upload |
|||
}, |
|||
data() { |
|||
return { |
|||
submitdisabled: false, |
|||
supplierLists: [], |
|||
supplierList: [], |
|||
crudeLists: [], |
|||
crudeList: [], |
|||
prodLists: [], |
|||
prodList: [], |
|||
ListLists: [], |
|||
ListList: [], |
|||
crudeSid: "", |
|||
prodSid:'', |
|||
formobj: { |
|||
salesContractNumber: "", |
|||
contractSigningDate: "", |
|||
deliveryDate: "", |
|||
weight: "", |
|||
value: "", |
|||
remarks: "", |
|||
prodSid:'' |
|||
}, |
|||
pickerOptions:{ |
|||
disabledDate(time){ |
|||
return time.getTime()> Date.now();// 如果没有后面的-8.64e7就是不可以选择今天的 |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
this.supplierInfoList() |
|||
this.last() |
|||
}, |
|||
methods: { |
|||
supplierInfoList() { |
|||
req3.supplierList().then((res) => { |
|||
if (res.success) { |
|||
this.supplierLists = res.data |
|||
for (var i = 0; i < this.supplierLists.length; i++) { |
|||
|
|||
let item = { |
|||
name: this.supplierLists[i].supplierName, |
|||
sid: this.supplierLists[i].sid, |
|||
|
|||
} |
|||
this.supplierList.push(item) |
|||
} |
|||
|
|||
} |
|||
}) |
|||
}, |
|||
last(){ |
|||
req.selectList().then((response) => { |
|||
if (response.success) { |
|||
this.prodLists = response.data |
|||
for (var i = 0; i < this.prodLists.length; i++) { |
|||
|
|||
let item = { |
|||
name: this.prodLists[i].name, |
|||
sid: this.prodLists[i].sid, |
|||
} |
|||
this.prodList.push(item) |
|||
}} |
|||
}) |
|||
}, |
|||
lastList(value){ |
|||
req.selectInformationType(value).then((response) => { |
|||
if (response.success) { |
|||
this.crudeLists = response.data |
|||
this.crudeList = [] |
|||
this.ListList = [] |
|||
for (var i = 0; i < this.crudeLists.length; i++) { |
|||
let item = { |
|||
name: this.crudeLists[i].name, |
|||
sid: this.crudeLists[i].sid, |
|||
|
|||
} |
|||
this.crudeList.push(item) |
|||
}} |
|||
}) |
|||
}, |
|||
handleList(value){ |
|||
req.selectProductType(value).then((response) => { |
|||
if (response.success) { |
|||
this.ListLists = response.data |
|||
this.ListList = [] |
|||
for (var i = 0; i < this.ListLists.length; i++) { |
|||
|
|||
} |
|||
let item = { |
|||
name: this.ListLists[i].name, |
|||
sid: this.ListLists[i].sid, |
|||
|
|||
} |
|||
this.ListList.push(item) |
|||
}} |
|||
}) |
|||
}, |
|||
saveOrUpdate() { |
|||
req3.save(this.formobj) |
|||
.then(resp => { |
|||
if (resp.success) { |
|||
this.$message({ |
|||
showClose: true, |
|||
type: 'success', |
|||
message: resp.msg |
|||
}) |
|||
this.formobj = { |
|||
salesContractNumber: "", |
|||
contractSigningDate: "", |
|||
deliveryDate: "", |
|||
weight: "", |
|||
value: "", |
|||
remarks: "", |
|||
prodSid:'' |
|||
} |
|||
this.crudeSid='' |
|||
this.prodSid='' |
|||
} else { |
|||
// 根据resp.code进行异常情况处理 |
|||
} |
|||
}) |
|||
.catch(() => {}) |
|||
|
|||
}, |
|||
handleReturn() { |
|||
this.$store.dispatch('tagsView/delView', this.$route) |
|||
this.$router.go(-1) |
|||
}, |
|||
getType(value) { |
|||
this.crudeSid='' |
|||
this.formobj.prodSid='' |
|||
this.lastList(value) |
|||
}, |
|||
getTank(value) { |
|||
this.formobj.prodSid='' |
|||
this.handleList(value) |
|||
}, |
|||
getList(value) { |
|||
this.formobj.prodSid = value |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.box-card { |
|||
margin-left: 60px; |
|||
margin-right: 60px; |
|||
min-width: 70%; |
|||
margin-top: 20px; |
|||
padding-bottom: 50px; |
|||
|
|||
.item { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
margin-top: 15px; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
|
|||
.item_text { |
|||
flex: 0.8; |
|||
font-size: 18px; |
|||
text-align: right; |
|||
} |
|||
|
|||
.item_input { |
|||
flex: 4; |
|||
font-size: 16px; |
|||
margin-left: 10px; |
|||
margin-right: 80px; |
|||
} |
|||
|
|||
.item_left_input { |
|||
width: 20%; |
|||
} |
|||
|
|||
.item_left_text { |
|||
height: 30px; |
|||
margin-left: 20px; |
|||
line-height: 30px; |
|||
color: #018AD2; |
|||
padding: 0px 15px; |
|||
border: 1.5px solid #018AD2; |
|||
border-radius: 5px; |
|||
|
|||
} |
|||
|
|||
.item_right { |
|||
flex: 1; |
|||
justify-items: center; |
|||
|
|||
.item_right_list_text { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.item_right_list_delect { |
|||
color: #5E94FF; |
|||
margin-left: 20px; |
|||
font-size: 16px; |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
|
|||
<style> |
|||
} |
|||
|
|||
</style> |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue