朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 73effd3cbe8466e5134d56cc8f081ee3d3bf043f 1 个父辈 52633242

出入库查询列表引用组件

内嵌 并排对比
正在显示 2 个修改的文件 包含 252 行增加 和 174 行删除
@@ -3,161 +3,44 @@ @@ -3,161 +3,44 @@
3 <el-card style="background-color: #F5F7FA"> 3 <el-card style="background-color: #F5F7FA">
4 <!-- 搜索区域--> 4 <!-- 搜索区域-->
5 <el-row :gutter="10" class="toolbar"> 5 <el-row :gutter="10" class="toolbar">
6 - <el-col :span="7">  
7 - <el-input v-model="queryInfo.waybill" prefix-icon="el-icon-search" size="small" style="width: 280px" 6 + <el-col :span="5">
  7 + <el-input v-model="queryInfo.waybill" prefix-icon="el-icon-search" size="small" style="width: 240px"
  8 + placeholder="主单号" clearable>
  9 + <template slot="prepend">主单号</template>
  10 + </el-input>
  11 + </el-col>
  12 + <el-col :span="5">
  13 + <el-input v-model="queryInfo.billfhl" prefix-icon="el-icon-search" size="small" style="width: 240px"
  14 + placeholder="分单号" clearable>
  15 + <template slot="prepend">分单号</template>
  16 + </el-input>
  17 + </el-col>
  18 + <el-col :span="5">
  19 + <div class="my-text-area">
  20 + <div class="el-input-group__prepend prepand">出入库类型</div>
  21 + <el-select v-model="queryInfo.ietype" placeholder="出入库类型" size="mini" style="width: 140px">
  22 + <el-option label="出入库类型-进" value="I"></el-option>
  23 + <el-option label="出入库类型-出" value="E"></el-option>
  24 + </el-select>
  25 + </div>
  26 +<!-- <el-input v-model="queryInfo.ietype" prefix-icon="el-icon-search" size="small" style="width: 240px"-->
  27 +<!-- placeholder="类型" clearable>-->
  28 +<!-- <template slot="prepend">类型</template>-->
  29 +<!-- </el-input>-->
  30 + </el-col>
  31 + <el-col :span="5">
  32 + <el-input v-model="queryInfo.custcode" prefix-icon="el-icon-search" size="small" style="width: 240px"
8 placeholder="货物单号" clearable> 33 placeholder="货物单号" clearable>
9 - <template slot="prepend">货物单号</template> 34 + <template slot="prepend">客户代码</template>
10 </el-input> 35 </el-input>
11 </el-col> 36 </el-col>
12 - <el-col :span="6"> 37 + <el-col :span="4">
13 <el-button type="primary" icon="el-icon-search" size="small" @click="getList()"> 38 <el-button type="primary" icon="el-icon-search" size="small" @click="getList()">
14 查询 39 查询
15 </el-button> 40 </el-button>
16 <el-button type="success" icon="el-icon-edit" size="small" @click="applyAdd()">新增</el-button> 41 <el-button type="success" icon="el-icon-edit" size="small" @click="applyAdd()">新增</el-button>
17 </el-col> 42 </el-col>
18 </el-row> 43 </el-row>
19 - <!-- 列表区域-->  
20 - <el-row>  
21 - <template>  
22 - <el-table  
23 - :data="tableData"  
24 - border  
25 - :cell-style="{textAlign:'center'}"  
26 - style="border-radius: 10px 10px 0px 0px;line-height: 25px"  
27 - :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"  
28 - >  
29 - <el-table-column  
30 - fixed  
31 - prop="waybill"  
32 - label="货物单号"  
33 - width="120">  
34 - </el-table-column>  
35 - <el-table-column  
36 - prop="vol"  
37 - label="体积"  
38 - width="60">  
39 - </el-table-column>  
40 - <el-table-column  
41 - prop="weight"  
42 - label="重量"  
43 - width="60">  
44 - </el-table-column>  
45 - <el-table-column  
46 - prop="pcs"  
47 - label="件数"  
48 - width="60">  
49 - </el-table-column>  
50 - <el-table-column  
51 - prop="billweight"  
52 - label="计费重量"  
53 - width="70">  
54 - </el-table-column>  
55 - <el-table-column  
56 - prop="area"  
57 - label="库区"  
58 - width="60">  
59 - </el-table-column>  
60 - <el-table-column  
61 - prop="location"  
62 - label="库位"  
63 - width="60">  
64 - </el-table-column>  
65 - <el-table-column  
66 - prop="serialnumber"  
67 - label="流水号"  
68 - width="120">  
69 - </el-table-column>  
70 - <el-table-column  
71 - prop="station"  
72 - label="出入库场站"  
73 - width="100">  
74 - </el-table-column>  
75 - <el-table-column  
76 - prop="status"  
77 - label="状态"  
78 - width="80">  
79 - <template slot-scope="scope">  
80 - <span v-if="scope.row.status ==='0'">失败</span>  
81 - <span v-if="scope.row.status ==='1'">成功</span>  
82 - </template>  
83 - </el-table-column>  
84 - <el-table-column  
85 - prop="transcar"  
86 - label="运输车辆信息"  
87 - width="100">  
88 - </el-table-column>  
89 - <el-table-column  
90 - prop="transtype"  
91 - label="交易类型"  
92 - width="100">  
93 - </el-table-column>  
94 - <el-table-column  
95 - prop="custel"  
96 - label="客户联系电话"  
97 - width="140">  
98 - </el-table-column>  
99 - <el-table-column  
100 - prop="customer"  
101 - label="联系人姓名"  
102 - width="100">  
103 - </el-table-column>  
104 - <el-table-column  
105 - prop="customername"  
106 - label="客户名称"  
107 - width="80">  
108 - </el-table-column>  
109 - <el-table-column  
110 - prop="goodstype"  
111 - label="货物类型"  
112 - width="80">  
113 - </el-table-column>  
114 - <el-table-column  
115 - prop="house"  
116 - label="出入库仓库"  
117 - width="100">  
118 - </el-table-column>  
119 - <el-table-column  
120 - prop="ietype"  
121 - label="类型"  
122 - width="60">  
123 - <template slot-scope="scope">  
124 - <span v-if="scope.row.ietype ==='I'">进</span>  
125 - <span v-if="scope.row.ietype ==='E'">出</span>  
126 - </template>  
127 - </el-table-column>  
128 - <el-table-column  
129 - prop="opter"  
130 - label="出入库经办人"  
131 - width="100">  
132 - </el-table-column>  
133 - <el-table-column  
134 - prop="opttime"  
135 - label="出入库时间"  
136 - width="140">  
137 - </el-table-column>  
138 - <el-table-column  
139 - fixed="right"  
140 - label="操作"  
141 - width="160">  
142 - <template slot-scope="scope">  
143 - <el-button type="success" size="mini" @click="applyEdit(scope.row)">编辑</el-button>  
144 - <el-button type="danger" size="mini" @click="applyDel(scope.$index,scope.row)">删除</el-button>  
145 - </template>  
146 - </el-table-column>  
147 - </el-table>  
148 - </template>  
149 - </el-row>  
150 - <el-row style="margin-top: 10px" class="toolbar">  
151 - <el-pagination  
152 - @size-change="handleSizeChange"  
153 - @current-change="handleCurrentChange"  
154 - :current-page="queryInfo.pageNum"  
155 - :page-size="queryInfo.pageSize"  
156 - :page-sizes="[10, 50, 100, 500]"  
157 - layout="total, sizes, prev, pager, next, jumper"  
158 - :total="total">  
159 - </el-pagination>  
160 - </el-row>  
161 <el-row> 44 <el-row>
162 <el-dialog :title="dialogMap[dialogApply]" :visible.sync="apply_dialog.addDialog" width="80%" > 45 <el-dialog :title="dialogMap[dialogApply]" :visible.sync="apply_dialog.addDialog" width="80%" >
163 <el-form :model="addForm" :rules="rules" ref="addForm" style="margin-top: 40px"> 46 <el-form :model="addForm" :rules="rules" ref="addForm" style="margin-top: 40px">
@@ -356,26 +239,37 @@ @@ -356,26 +239,37 @@
356 </div> 239 </div>
357 </el-dialog> 240 </el-dialog>
358 </el-row> 241 </el-row>
  242 + <!-- 列表区域-->
  243 + <Tabulation
  244 + ref="tabulation"
  245 + :tabulationInfo="queryInfo"
  246 + ></Tabulation>
359 </el-card> 247 </el-card>
360 </el-row> 248 </el-row>
361 </template> 249 </template>
362 250
363 <script> 251 <script>
364 - import {selectInventroyrecords,delInventoryrecord,addInventoryrecord,ediInventroyrecord} from '../../api/consigner/station'; 252 + import {selectNewInventroyrecords,delInventoryrecord,addInventoryrecord,ediInventroyrecord} from '../../api/consigner/station';
  253 + import Tabulation from "./tabulation"
365 254
366 export default { 255 export default {
367 - name: "inventroyrecord", 256 + components: {
  257 + Tabulation
  258 + },
368 data() { 259 data() {
369 return { 260 return {
370 queryInfo: { 261 queryInfo: {
371 waybill:'', 262 waybill:'',
  263 + billfhl:'',
  264 + ietype:'',
  265 + custcode:'',
372 // 当前页数 266 // 当前页数
373 pageNum: 1, 267 pageNum: 1,
374 // 每页大小 268 // 每页大小
375 pageSize: 10, 269 pageSize: 10,
376 }, 270 },
377 total: 0, 271 total: 0,
378 - tableData:[], 272 + // tableData:[],
379 dialogMap: { 273 dialogMap: {
380 update: '编辑', 274 update: '编辑',
381 create: '新增' 275 create: '新增'
@@ -463,31 +357,9 @@ @@ -463,31 +357,9 @@
463 this.zancundata.push(this.addForm); 357 this.zancundata.push(this.addForm);
464 console.log(this.zancundata) 358 console.log(this.zancundata)
465 }, 359 },
466 - handleSizeChange(val) {  
467 - this.queryInfo.pageSize = val  
468 - this.getList()  
469 - },  
470 - handleCurrentChange(val) {  
471 - this.queryInfo.pageNum = val  
472 - this.getList()  
473 - },  
474 getList() { 360 getList() {
475 - const _this = this  
476 - selectInventroyrecords(this.queryInfo).then((response) => {  
477 - const res = response.data  
478 - console.log(response.data)  
479 - if (res.code !== '200') {  
480 - return _this.$message.error('获取消息收发记录，失败！')  
481 - }  
482 - // 获取列表数据  
483 - _this.tableData = res.data.list  
484 - // 获取列表的总记录数  
485 - _this.total = res.data.total  
486 - _this.$message.success('获取消息收发记录，成功！')  
487 - }).catch(error => {  
488 - // 关闭加载  
489 - _this.$message.error(error.toString())  
490 - }) 361 + this.$refs.tabulation.getList(this.queryInfo)
  362 +
491 }, 363 },
492 // 添加对话框，打开事件 364 // 添加对话框，打开事件
493 applyAdd() { 365 applyAdd() {
@@ -596,7 +468,7 @@ @@ -596,7 +468,7 @@
596 }, 468 },
597 }, 469 },
598 mounted() { 470 mounted() {
599 - this.getList(); 471 + // this.getList();
600 // this.getYardList(); 472 // this.getYardList();
601 473
602 } 474 }
  1 +<template>
  2 + <div>
  3 + <!-- 列表区域-->
  4 + <el-row>
  5 + <template>
  6 + <el-table
  7 + :data="tableData"
  8 + border
  9 + :cell-style="{textAlign:'center'}"
  10 + style="border-radius: 10px 10px 0px 0px;line-height: 25px"
  11 + :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
  12 + >
  13 + <el-table-column
  14 + fixed
  15 + prop="waybill"
  16 + label="货物单号"
  17 + width="120">
  18 + </el-table-column>
  19 + <el-table-column
  20 + prop="vol"
  21 + label="体积"
  22 + width="60">
  23 + </el-table-column>
  24 + <el-table-column
  25 + prop="weight"
  26 + label="重量"
  27 + width="60">
  28 + </el-table-column>
  29 + <el-table-column
  30 + prop="pcs"
  31 + label="件数"
  32 + width="60">
  33 + </el-table-column>
  34 + <el-table-column
  35 + prop="billweight"
  36 + label="计费重量"
  37 + width="70">
  38 + </el-table-column>
  39 + <el-table-column
  40 + prop="area"
  41 + label="库区"
  42 + width="60">
  43 + </el-table-column>
  44 + <el-table-column
  45 + prop="location"
  46 + label="库位"
  47 + width="60">
  48 + </el-table-column>
  49 + <el-table-column
  50 + prop="serialnumber"
  51 + label="流水号"
  52 + width="160">
  53 + </el-table-column>
  54 + <el-table-column
  55 + prop="station"
  56 + label="出入库场站"
  57 + width="100">
  58 + </el-table-column>
  59 + <el-table-column
  60 + prop="status"
  61 + label="状态"
  62 + width="80">
  63 + <template slot-scope="scope">
  64 + <span v-if="scope.row.status ==='0'">失败</span>
  65 + <span v-if="scope.row.status ==='1'">成功</span>
  66 + </template>
  67 + </el-table-column>
  68 + <el-table-column
  69 + prop="transcar"
  70 + label="运输车辆信息"
  71 + width="100">
  72 + </el-table-column>
  73 + <el-table-column
  74 + prop="transtype"
  75 + label="交易类型"
  76 + width="100">
  77 + </el-table-column>
  78 + <el-table-column
  79 + prop="custel"
  80 + label="客户联系电话"
  81 + width="140">
  82 + </el-table-column>
  83 + <el-table-column
  84 + prop="customer"
  85 + label="联系人姓名"
  86 + width="100">
  87 + </el-table-column>
  88 + <el-table-column
  89 + prop="customername"
  90 + label="客户名称"
  91 + width="80">
  92 + </el-table-column>
  93 + <el-table-column
  94 + prop="goodstype"
  95 + label="货物类型"
  96 + width="80">
  97 + </el-table-column>
  98 + <el-table-column
  99 + prop="house"
  100 + label="出入库仓库"
  101 + width="100">
  102 + </el-table-column>
  103 + <el-table-column
  104 + prop="ietype"
  105 + label="类型"
  106 + width="60">
  107 + <template slot-scope="scope">
  108 + <span v-if="scope.row.ietype ==='I'">进</span>
  109 + <span v-if="scope.row.ietype ==='E'">出</span>
  110 + </template>
  111 + </el-table-column>
  112 + <el-table-column
  113 + prop="opter"
  114 + label="出入库经办人"
  115 + width="100">
  116 + </el-table-column>
  117 + <el-table-column
  118 + prop="opttime"
  119 + label="出入库时间"
  120 + width="140">
  121 + </el-table-column>
  122 + <el-table-column
  123 + fixed="right"
  124 + label="操作"
  125 + width="160">
  126 + <template slot-scope="scope">
  127 + <el-button type="success" size="mini" @click="applyEdit(scope.row)">编辑</el-button>
  128 + <el-button type="danger" size="mini" @click="applyDel(scope.$index,scope.row)">删除</el-button>
  129 + </template>
  130 + </el-table-column>
  131 + </el-table>
  132 + </template>
  133 + </el-row>
  134 + <el-row style="margin-top: 10px" class="toolbar">
  135 + <el-pagination
  136 + @size-change="handleSizeChange"
  137 + @current-change="handleCurrentChange"
  138 + :current-page="tabulationInfo.pageNum"
  139 + :page-size="tabulationInfo.pageSize"
  140 + :page-sizes="[10, 50, 100, 500]"
  141 + layout="total, sizes, prev, pager, next, jumper"
  142 + :total="total">
  143 + </el-pagination>
  144 + </el-row>
  145 + </div>
  146 +
  147 +</template>
  148 +
  149 +<script>
  150 + import {selectNewInventroyrecords} from "../../api/consigner/station";
  151 +
  152 + export default {
  153 + name: "Tabulation",
  154 + props: [
  155 + 'tabulationInfo'
  156 + ],
  157 + data(){
  158 + return {
  159 + tableData: [],
  160 + total: 0
  161 + }
  162 + },
  163 + methods:{
  164 + getList() {
  165 + const _this = this
  166 + selectNewInventroyrecords(this.tabulationInfo).then((response) => {
  167 + const res = response.data
  168 + console.log(response.data)
  169 + if (res.code !== '200') {
  170 + return _this.$message.error('获取消息收发记录，失败！')
  171 + }
  172 + // 获取列表数据
  173 + _this.tableData = res.data.list
  174 + // 获取列表的总记录数
  175 + _this.total = res.data.total
  176 + _this.$message.success('获取消息收发记录，成功！')
  177 + }).catch(error => {
  178 + // 关闭加载
  179 + _this.$message.error(error.toString())
  180 + })
  181 + },
  182 + handleSizeChange(val) {
  183 + this.tabulationInfo.pageSize = val
  184 + this.getList()
  185 + },
  186 + handleCurrentChange(val) {
  187 + this.tabulationInfo.pageNum = val
  188 + this.getList()
  189 + },
  190 +
  191 + },
  192 + mounted() {
  193 + this.getList();
  194 + },
  195 + watch:{
  196 + tabulationInfo(value){
  197 + console.log('from parent='+JSON.stringify(value))
  198 + }
  199 + }
  200 +
  201 + }
  202 +</script>
  203 +
  204 +<style scoped>
  205 +
  206 +</style>