莅临页面调整

src/view/data/visit.vue

@@ -7,21 +7,88 @@
 						<el-input placeholder="请输入姓名" v-model="searchInfo.username" type="text" style="width: 120px;"
 							clearable></el-input>
 					</el-form-item>
-		
+
 					<el-form-item label="职务" prop="post">
 						<el-input placeholder="请输入职务" v-model="searchInfo.post" type="text" style="width: 200px;"
 							clearable></el-input>
 					</el-form-item>
 					<el-form-item label="开始时间" prop="post">
-						<el-date-picker value-format="yyyy-MM-dd" type="date" style="width: 160px;" v-model="searchInfo.fromDate" />
+						<el-date-picker value-format="yyyy-MM-dd" type="date" style="width: 160px;"
+							v-model="searchInfo.fromDate" />
 					</el-form-item>
 					<el-form-item label="结束时间" prop="post">
-						<el-date-picker value-format="yyyy-MM-dd" type="date" style="width: 160px;"  v-model="searchInfo.toDate" />
+						<el-date-picker value-format="yyyy-MM-dd" type="date" style="width: 160px;"
+							v-model="searchInfo.toDate" />
+					</el-form-item>
+					
+					<el-form-item class="fr">
+						<el-button type="primary" @click="newVisit">添加莅临</el-button>
 					</el-form-item>
 				</el-row>
 			</el-form>
 		</div>
-		<el-table :data="tableData" border stripe>
+
+		<el-card v-for="(row, index) in tableData" :key="index" class="no-card" style="margin-top: 8px;">
+			<div slot="header" style="font-size: 16px;padding:0px;margin: 0px 0px 8px 0px">
+				<el-col :span="5">
+					<span>
+						领导姓名：
+						<span class="text-blue">{{ row.username }}</span>
+					</span>
+				</el-col>
+				<el-col :span="7">
+					<span>
+						职务:
+						<span class="text-blue"> {{row.post}}</span>
+					</span>
+				</el-col>
+				<el-col :span="7">
+					<span>
+						莅临时间:
+						<span class="text-blue"> {{row.fromDate}} 到 {{row.toDate}}</span>
+					</span>
+				</el-col>
+			</div>
+			
+			<div style="font-size: 20px;">
+				<span v-html="row.tripSummary"></span>
+			</div>
+
+			<div style="font-size: 18px;padding: 26px 0 16px 0px">
+				<el-col :span="5">
+					<span>
+						陪同情况:
+						<span class="text-blue"> {{row.accompany}}</span>
+					</span>
+				</el-col>
+				<el-col :span="7">
+					<span>
+						来文日期单位:
+						<span class="text-blue"> {{row.recvDate}}-{{row.organUnit}}</span>
+					</span>
+				</el-col>
+				<el-col :span="7">
+					<span>
+						拟办意见:
+						<span class="text-blue"> {{row.proposed||'--'}}</span>
+					</span>
+				</el-col>
+				<el-col :span="5" class="tr">
+					<el-button  type="primary" size="small" @click="initEdit(row)">编辑</el-button>
+					<el-popover placement="top" width="160" v-model="row._pass" >
+						<p>删除之后服务器不保存信息？本操作不可逆，您是否继续操作</p>
+						<div style="text-align: center; margin: 0 auto">
+							<el-button size="mini" type="text" @click="row._pass = false">取消</el-button>
+							<el-button type="primary" size="mini" @click="delVisitInfo(row)">确定</el-button>
+						</div>
+						<el-button type="danger" style="margin-left: 10px;" size="small" slot="reference">删除
+						</el-button>
+					</el-popover>
+				</el-col>
+			</div>
+		</el-card>
+
+		<!-- <el-table :data="tableData" border stripe>
 			<el-table-column prop="username" label="姓名" width="100" align="center">
 				<template slot-scope="{row}">
 					<el-input v-if="row.edit" class="edit-input" size="small" v-model="row.username" />
@@ -104,11 +171,47 @@
 			</el-table-column>
 
 		</el-table>
-
+ -->
 		<el-pagination :current-page="page" :page-size="size" :page-sizes="[10, 30, 50, 100, 1000]"
-			:style="{ float: 'right', padding: '20px' }" :total="total"
-			@current-change="(page)=>{this.page= page}" @size-change="(size)=>{this.size= size}"
-			layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+			:style="{ float: 'right', padding: '20px' }" :total="total" @current-change="(page)=>{this.page= page}"
+			@size-change="(size)=>{this.size= size}" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+			
+		<el-dialog :visible.sync="addvisitDialog" top="20px" title="编辑莅临" center width="500px">
+		  <el-form :rules="rules" ref="addvisit" :model="form" label-width="80px" >
+		    <el-form-item label="姓名" prop="username">
+		      <el-input v-model="form.username" ></el-input>
+		    </el-form-item>
+		    <el-form-item label="职务"  prop="post">
+		      <el-input v-model="form.post" ></el-input>
+		    </el-form-item>
+			<el-form-item label="行程概要"  prop="tripSummary">
+			  <el-input v-model="form.tripSummary" type="textarea"></el-input>
+			</el-form-item>
+			<el-form-item label="陪同情况"  prop="accompany">
+			  <el-input v-model="form.accompany"></el-input>
+			</el-form-item>
+			<el-form-item label="机关单位"  prop="organUnit">
+			  <el-input v-model="form.organUnit"></el-input>
+			</el-form-item>
+			<el-form-item label="来文日期"  prop="recvDate">
+			  <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="form.recvDate" />
+			</el-form-item>
+			<el-form-item label="莅临时间"  prop="fromDate">
+			  <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="form.fromDate" />
+			</el-form-item>
+			<el-form-item label="回去时间"  prop="toDate">
+			  <el-date-picker value-format="yyyy-MM-dd" type="date" v-model="form.toDate" />
+			</el-form-item>
+			<el-form-item label="拟办意见"  prop="proposed">
+			  <el-input v-model="form.proposed"></el-input>
+			</el-form-item>
+		  </el-form>
+		  <div class="dialog-footer tc" slot="footer">
+		    <el-button @click="addvisitDialog=false">取 消</el-button>
+		    <el-button @click="confirmEdit(form)" type="primary">确 定</el-button>
+		  </div>
+		</el-dialog>	
+		
 	</div>
 </template>
 
@@ -128,11 +231,53 @@
 				page: 1,
 				size: 10,
 				total: 0,
+				addvisitDialog: false,
+				form:{
+					accompany: "",
+					id: 0,
+					fromDate: "",
+					organUnit: "",
+					post: "",
+					proposed: "",
+					recvDate: "",
+					toDate: "",
+					tripSummary: "",
+					username: ""
+				},
 				searchInfo: {
 					username: '',
 					post: '',
-					fromDate:'',
-					toDate:''
+					fromDate: '',
+					toDate: ''
+				},
+				rules: {
+				  username: [
+				    { required: true, message: "请输入姓名", trigger: "blur" }
+				  ],
+				  post: [
+				    { required: true, message: "请输入职务", trigger: "blur" }
+				  ],
+				  accompany: [
+				    { required: true, message: "请输入陪同情况", trigger: "blur" }
+				  ],
+				  recvDate: [
+				    { required: true, message: "请输入来文日期", trigger: "blur" }
+				  ],
+				  toDate: [
+				    { required: true, message: "请输入回去时间", trigger: "blur" }
+				  ],
+				  fromDate: [
+				    { required: true, message: "请输入莅临时间", trigger: "blur" }
+				  ],
+				  tripSummary: [
+				    { required: true, message: "请输入行程概要", trigger: "blur" }
+				  ],
+				  organUnit: [
+				    { required: true, message: "请输入来文单位", trigger: "blur" }
+				  ],
+				  proposed: [
+				    { required: true, message: "请输入拟办意见", trigger: "blur" }
+				  ]
 				}
 			};
 		},
@@ -154,27 +299,27 @@
 			}
 		},
 		methods: {
-			cancelEdit(row, index) {
-				row = Object.assign(row, row.temp);
-				row.edit = false;
-				delete(row["temp"]);
-			},
 			initEdit(row, index) {
-				let form = Object.assign({}, row);
-				row.edit = true;
-				row.temp = form;
+				this.form = Object.assign( this.form, row );
+				this.form.temp = row;
+				this.addvisitDialog = true;
+			},
+			newVisit(){
+				this.form = {};
+				this.addvisitDialog = true;
 			},
 			confirmEdit(row) {
-				let param = Object.assign({}, row);
-				delete param["temp"];
-				delete param["edit"];
-				editVisitInfo(param).then(res => {
-					if (res.code == 200) {
-						row.isFinish = 1;
-						row.edit = false;
-						this.$message.successMsg("编辑成功", 1);
-					}
-				});
+				let param = Object.assign({}, this.form);
+				this.$refs["addvisit"].validate((valid) => {
+					if (!valid) return;
+					editVisitInfo(param).then(res => {
+						if (res.code == 200) {
+							this.getTableData();
+							this.addvisitDialog = false;
+							this.$message.successMsg("编辑成功", 1);
+						}
+					});
+				})
 			},
 			delVisitInfo(row) {
 				let param = {id: row.id};
@@ -197,8 +342,15 @@
 	.el-tag--mini {
 		margin-left: 5px;
 	}
-
 	.warning {
 		color: #dc143c;
 	}
+	
+	.spanStyle{  
+      white-space: nowrap;  /*强制span不换行*/
+      display: inline-block;  /*将span当做块级元素对待*/
+      overflow: hidden;  /*超出宽度部分隐藏*/
+      text-overflow: ellipsis;  /*超出部分以点号代替*/
+      line-height: 0.9;  /*数字与之前的文字对齐*/
+	}
 </style>