nd_admin/src/view/data/visit.vue

<template>
	<div>
		<div class="search-term">
			<el-form :inline="true" :model="searchInfo" class="demo-form-inline" label-width="100">
				<el-row>
					<el-form-item label="姓名" prop="username">
						<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-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-form-item>
					
					<el-form-item class="fr">
						<el-button type="primary" @click="newVisit">添加莅临</el-button>
					</el-form-item>
				</el-row>
			</el-form>
		</div>

		<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" />
					<span v-else>{{row.username}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="post" label="职务" width="130">
				<template slot-scope="{row}">
					<el-input v-if="row.edit" class="edit-input" type="textarea" v-model="row.post" />
					<span v-else>{{row.post}}</span>
				</template>
			</el-table-column>

			<el-table-column prop="tripSummary" label="行程概要" width="160">
				<template slot-scope="{row}">
					<el-input v-if="row.edit" class="edit-input" type="textarea" v-model="row.tripSummary" />
					<span v-else>{{row.tripSummary}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="accompany" label="陪同情况" width="160">
				<template slot-scope="{row}">
					<el-input v-if="row.edit" class="edit-input" size="small" v-model="row.accompany" />
					<span v-else>{{row.accompany}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="organUnit" label="机关单位" width="100">
				<template slot-scope="{row}">
					<el-input v-if="row.edit" class="edit-input" size="small" v-model="row.organUnit" />
					<span v-else>{{row.organUnit}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="recvDate" label="来文日期" width="130">
				<template slot-scope="{row}">
					<el-date-picker v-if="row.edit" value-format="yyyy-MM-dd" type="date" 
						v-model="row.recvDate" />
					<span v-else>{{row.recvDate}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="fromDate" label="莅临时间" width="130" align="center">
				<template slot-scope="{row}">
					<el-date-picker v-if="row.edit" value-format="yyyy-MM-dd" type="date"
						v-model="row.fromDate" />
					<span v-else>{{row.fromDate}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="education" label="返程时间" width="130">
				<template slot-scope="{row}">
					<el-date-picker v-if="row.edit" value-format="yyyy-MM-dd" type="date" 
						v-model="row.toDate" />
					<span v-else>{{row.toDate}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="marks" label="拟办意见" min-width="80">
				<template slot-scope="{row}">
					<el-input v-if="row.edit" class="edit-input" size="small" v-model="row.proposed" />
					<span v-else style="color: red;">{{row.proposed}}</span>
				</template>
			</el-table-column>

			<el-table-column align="center" width="160" label="操作" class-name="small-padding fixed-width">
				<template slot-scope="{row, $index}">
					<el-button v-if="row.edit" type="success" size="small" @click="confirmEdit(row, $index)">提交
					</el-button>
					<el-button v-if="row.edit" class="cancel-btn" size="small" type="warning"
						@click="cancelEdit(row, $index)">取消</el-button>

					<el-button v-if="!row.edit" type="primary" size="small" @click="initEdit(row, $index)">编辑
					</el-button>

					<el-popover placement="top" width="160" v-model="row._pass" v-if="!row.edit">
						<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>
				</template>
			</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>
			
		<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>

<script>
	import infoList from "@/mixins/infoList";
	import {
		getVisitList,
		editVisitInfo,
		delVisitInfo
	} from "@/api/data.js";

	export default {
		name: "Api",
		data() {
			return {
				listApi: getVisitList,
				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: ''
				},
				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" }
				  ]
				}
			};
		},
		mixins: [infoList],
		watch: {
			searchInfo: {
				handler(new_value, old_value) {
					let {
						fromDate,
						toDate
					} = this.searchInfo;
					if (fromDate && toDate && fromDate > toDate) {
						return;
					}
					this.page = 1;
					this.getTableData();
				},
				deep: true,
			}
		},
		methods: {
			initEdit(row, index) {
				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({}, 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};
				let that = this;
				delVisitInfo(param).then((res) => {
					if (res.code == 200) {
						this.getTableData();
						that.$message.successMsg("删除成功", 2)
					}
				})
			}
		},
		created() {
			this.logId = +this.$route.query.logId || 0;
			this.getTableData(this.logId);
		},
	};
</script>
<style scoped lang="scss">
	.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>