承运单位管理界面

src/view/maint/transport.vue

@@ -0,0 +1,200 @@
+<template>
+	<div style="text-align: center;">
+		<div style="width:600px;float: left; margin-left: 10px;margin-bottom: 10px;">
+			<el-input v-model="query" size="small" placeholder="请输入运输商名称" style="width :300px;float: left;"></el-input>
+			<el-button type="info" size="small"  @click="search">查询</el-button>
+			<el-button type="primary" size="small" @click="handleAdd">新增</el-button>
+		</div>
+
+		<div style="padding-right: 30px;">
+			<el-table v-loading="loading" :data="tableData" border size="small">
+				<el-table-column prop="id" size="small" label="编号" width="60" v-if="isShow">
+				</el-table-column>
+				<el-table-column prop="name" size="small" label="运输商名称" width="250" show-overflow-tooltip>
+				</el-table-column>
+				<el-table-column label="操作" width="150">
+					<template slot-scope="scope">
+						<el-button size="small"  @click="handleEdit(scope.row)">编辑</el-button>
+						<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+		</div>
+
+		<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="transport" label-width="100px">
+				<el-form-item label="运输商编码" v-if="isShow">
+					<el-input v-model="transport.id"></el-input>
+				</el-form-item>
+				<el-form-item label="运输商名称">
+					<el-input v-model="transport.name"></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>
+	</div>
+</template>
+
+<script>
+	import axios from '@/axios'
+	export default {
+		components: {
+
+		},
+		data() {
+			return {
+				tableData: [],
+				currentPage: 1,
+				totalRows: 0,
+				pageSizes: [50, 100, 200,500],
+				pageSize: 50,
+				//查询条件
+				query: '',
+				//录入框
+				dialogVisible: false,
+				transport: {
+					id: '',
+					name: '',
+				},
+				isShow: false,
+				loading: true,
+			}
+		},
+		//界面渲染完毕调用   初始化表格参数
+		mounted() {
+			this.getTableData()
+		},
+		methods: {
+			// 获取table数据
+			getTableData() {
+				this.loading = true
+				var url = 'MaintTransport/query.do'
+				var param = {
+					page: this.currentPage,
+					rows: this.pageSize,
+					query: this.query
+				}
+				axios.get(url, param).then(response => {
+					if (response.data.code == 0) {
+						this.tableData = response.data.data.list
+						this.totalRows = response.data.data.total
+					} else {
+						this.$message({
+							type: 'error',
+							message: '保存失败' + response.data.msg,
+						});
+					}
+					this.loading = false
+				});
+			},
+			// 修改每页条数事件
+			handleSizeChange(val) {
+				console.log(`每页 ${val} 条`);
+				this.pageSize = val
+				this.getTableData()
+			},
+			// 修改当前页事件
+			handleCurrentChange(val) {
+				console.log(`当前页: ${val}`);
+				this.currentPage = val
+				this.getTableData()
+			},
+			//保存按钮事件
+			handleSave(row) {
+				var json = JSON.stringify(this.transport)
+				var url = 'MaintTransport/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();
+				});
+
+			},
+			//保存取消按钮事件   关闭编辑对话框
+			handleCancelSave(row) {
+				this.dialogVisible = false
+			},
+			// 新增按钮事件
+			handleAdd() {
+				this.dialogVisible = true
+				this.customer = {
+					id: '',
+					name: ''
+				}
+			},
+			// 编辑按钮事件
+			handleEdit(row) {
+				this.dialogVisible = true
+				this.transport = row
+			},
+
+			// 删除按钮事件
+			handleDelete(row) {
+				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+
+					var url = 'MaintTransport/remove.do'
+					var param = {
+						id: row.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: '已取消删除'
+					});
+				});
+			},
+			// 查询按钮事件
+			search() {
+				this.currentPage = 1
+				this.getTableData()
+			},
+
+			close(){
+					this.getTableData()
+			}
+		}
+	}
+</script>