MingJinWave_vue/src/view/maint/cargo.vue

<template>
    <div style="text-align: left;">
		<el-row>
			<el-select v-model="query.uperCustomer" filterable placeholder="请选择上游客户" clearable size="small" style="margin-left: 5px; width: 300px">
                <el-option v-for="item in optionsCust" :key="item.id" :label="item.name" :value="item.id" >
                </el-option>
            </el-select>
			<el-select v-model="query.Customer" filterable placeholder="请选择客户" clearable size="small" style="margin-left: 5px; width: 300px">
                <el-option v-for="item in optionsCust" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
			<el-button type="info" size="small" @click="search">查询</el-button>
			<el-button type="primary" size="small" @click="handleAdd">新增</el-button>
			<el-button type="danger" size="small"  @click="resetButton" :disabled="backAble">重置</el-button>
		</el-row>
    
		<el-table :data="tableData" border>
			<el-table-column prop="id" label="编号" width="60" v-if="isShow">
			</el-table-column>
			<el-table-column prop="uperCustomer.name" label="上游客户" width="400">
			</el-table-column>
			<el-table-column prop="customer.name" label="客户" width="400">
			</el-table-column>
			<el-table-column prop="sumWeight" label="可使用量" width="120">
			</el-table-column>
			<el-table-column prop="useWeight" label="已使用量" width="120">
			</el-table-column>

			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
					<!-- <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button> -->
				</template>
			</el-table-column>
			<el-table-column label="日志记录" width="120">
				<template slot-scope="scope">
					<el-button @click="handleViewRecord(scope.row)" type="text" size="small">查看使用量变动记录</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
		 :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRows">
		</el-pagination>


		<el-dialog title="转移数量修改" :visible.sync="dialogVisible" width="500px">
			<el-form :model="change" label-width="100px" ref="area">
				<el-form-item label="id" v-if="isShow">
					<el-input v-model="change.id"></el-input>
				</el-form-item>
				<el-form-item label="上游客户">
					<el-select v-model="change.uperCustomer" filterable placeholder="请选择" clearable style="margin-left: 5px; width: 300px">
                        <el-option v-for="item in optionsCust" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
				</el-form-item>
				<el-form-item label="客户">
					<el-select v-model="change.Customer" filterable placeholder="请选择"  clearable style="margin-left: 5px; width: 300px">
                        <el-option v-for="item in optionsCust" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
				</el-form-item>
				<el-form-item label="修改内容">
					<el-select v-model="change.sub" filterable placeholder="请选择" clearable style="margin-left: 5px; width: 300px">
                        <el-option v-for="item in optionsSub" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
				</el-form-item>
				<el-form-item label="重量(吨)" >
					<el-input v-model="change.weight" clearable style="margin-left: 5px; width: 300px"></el-input>
				</el-form-item>
				<el-form-item label="单号" >
					<el-input v-model="change.ordNo" clearable style="margin-left: 5px; width: 300px"></el-input>
				</el-form-item>
				<el-form-item label="备注" >
					<el-input v-model="change.remark" clearable style="margin-left: 5px; width: 300px"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="success" @click="handleSave">保存</el-button>
					<el-button @click="handleCancelSave">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog title="转移数量变动日志" :visible.sync="dialogVisibleRecord" width="1000px">
			<el-table :data="tableData2" border>
			<el-table-column prop="id" label="编号" width="60" v-if="isShow">
			</el-table-column>
			<el-table-column prop="uperCustomer.name" label="上游客户" width="400" v-if="isShow">
			</el-table-column>
			<el-table-column prop="customer.name" label="客户" width="400" v-if="isShow">
			</el-table-column>
			<el-table-column prop="modifyTime" label="修改时间" width="240">
			</el-table-column>
			<el-table-column prop="modifyUser.userName" label="修改人员" width="120">
			</el-table-column>
			<el-table-column prop="weight" label="修改重量" width="120">
			</el-table-column>
			<el-table-column prop="subStr" label="修改类型" width="120">
			</el-table-column>
			<el-table-column prop="changeFrom" label="修改来源" width="120">
			</el-table-column>
			<el-table-column prop="ordNo" label="单号" width="120">
			</el-table-column>
			<el-table-column prop="remark" label="备注" width="120">
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2" :current-page="currentPage2"
		 :page-sizes="pageSizes2" :page-size="pageSize2" layout="total, sizes, prev, pager, next, jumper" :total="totalRows2">
		</el-pagination>
		</el-dialog>
	</div>
</template>

<script>
    import axios from '@/axios'
	import {
		mapState
	} from 'vuex'
	export default {
        data() {
            return {
                query: {
					uperCustomer: '',
					Customer: '',
                },
                options: [],
                tableData: [],
				tableData2: [],

                currentPage: 1,
				totalRows: 0,
				pageSizes: [50, 100, 200,500],
				pageSize: 50,

				currentPage2: 1,
				totalRows2: 0,
				pageSizes2: [50, 100, 200,500],
				pageSize2: 50,

                loading: true,
                isShow: false,
                dialogVisible: false,
				dialogVisibleRecord: false,

                change: {
                    id: '',
					uperCustomer: '',
					Customer: '',
                    sub: '',
                    weight: '',
					ordNo:'',
					remark:'',
                },
                optionsSub: [{
                    value: 'up',
                    label: '增加'}, 
                    {value: 'down',
                    label: '减少'
                }],
                optionsCust: [],

            }
        },
        //界面渲染完毕调用   初始化表格参数
		mounted() {
			this.getAllCustomer()
		},
        methods: {
            getAllCustomer() {
				var url = 'MaintCustomer/queryByUserId.do'
				var param = {}
				axios.get(url, param).then(response => {
					this.optionsCust = response.data.data
				});
			},
            handleAdd() {
				this.change.uperCustomer = ''
				this.change.Customer = ''
				this.change.sub = ''
				this.change.weight = ''
                this.dialogVisible=true;
				//this.$$refs.area.clearValidate();
            },
            handleCancelSave(row) {
				this.dialogVisible = false
			},
            getTableData() {
				var url = 'MaintCargo/queryAll.do'
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					uperCustomer: this.query.uperCustomer,
					Customer: this.query.Customer
				}
				axios.get(url, param).then(response => {
					console.log(response.data.data.list)

					if (response.data.code == 0) {
						this.tableData = response.data.data.list
						this.totalRows = response.data.data.total
						//this.drawWareLayout()
					} else {
						this.$message({
							type: 'error',
							message: '查询失败' + response.data.msg,
						});
					}
				});
			},
            search() {
				this.currentPage = 1
				this.getTableData()
			},
            handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getTableData()
			},
			handleSizeChange2(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getTableData2()
			},
			// 修改当前页事件
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val
				this.getTableData()
			},
			handleCurrentChange2(val) {
				console.log(`当前页: ${val}`);
				this.currentPage2 = val
				this.getTableData2()
			},
            handleSave() {
				var tempStack = this.change;
				var json = JSON.stringify(tempStack)
				var url = 'MaintCargo/save.do'
				var param = {
					json: json
				}
				axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						this.$message({
							type: 'success',
							message: '保存成功!',
						});
						this.getTableData()
						this.dialogVisible = false
					} else {
						this.$message({
							type: 'error',
							message: '保存失败!' + response.data.msg,
						});
					}
					// loading.close();
				});



			},

			// 删除按钮事件
			handleDelete(id) {
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					var url = 'MaintCargo/remove.do'
					var param = {
						id: id
					}
					axios.post(url, param).then(response => {
						if (response.data.code == 0) {
							this.$message({
								type: 'success',
								message: '删除成功!',
							});
							this.getTableData()
						} else {
							this.$message({
								type: 'error',
								message: '删除失败;' + response.data.msg
							});
						}
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 编辑按钮事件
			handleEdit(row) {
				var tempRow = row;
				//tempRow.ware.name = tempRow.ware.id;
				this.dialogVisible = true
				this.change.id = tempRow.id
				this.change.uperCustomer = tempRow.uperCustomer.id
				this.change.Customer = tempRow.customer.id
				this.change.sub = ''
				this.change.weight = ''
			},
			handleViewRecord(row){
				this.dialogVisibleRecord=true;
				var tempRow = row;
				
				this.getTableData2(tempRow.uperCustomer.id,tempRow.customer.id)
				
			},
			getTableData2(uperCustomer,Customer){
				var url = 'MaintCargo/queryRecord.do'
				var param = {
					page: this.currentPage2,
					rows: this.pageSize2,
					uperCustomer: uperCustomer,
					Customer: Customer
				}
				axios.get(url, param).then(response => {
					console.log(response.data.data.list)

					if (response.data.code == 0) {
						this.tableData2 = response.data.data.list
						this.totalRows2 = response.data.data.total
						//this.drawWareLayout()
					} else {
						this.$message({
							type: 'error',
							message: '查询失败' + response.data.msg,
						});
					}
				});
			},
			resetButton(){      //查询条件重置
				this.query.uperCustomer = '',
				this.query.Customer = ''
			},
        }
	}
</script>