antissoft / antissoft.shangten-admin

<template>
	<div class="container" style="margin:10px;">

		<el-form :inline="true" :model="model" class="demo-form-inline">
			<el-form-item label="用户ID">
				 <el-tooltip class="item" effect="dark" content="已预约的用户编号" placement="top-start">
					 <el-input v-model="model.UserId" placeholder="用户编号(已预约)"></el-input>
				    </el-tooltip>
			</el-form-item>
			<el-form-item>
				<el-button type="success" @click="SubmitCard">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit" style="float: right;">导出</el-button>
			</el-form-item>
		</el-form>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column prop="date" label="预约设置ID" width="180" v-if="false">
			<template slot-scope="scope">
				{{scope.row.ReservationId}}
			</template>
		</el-table-column>
		<el-table-column prop="date" label="用户ID" width="80">
			<template slot-scope="scope">
				{{scope.row.UserId}}
			</template>
		</el-table-column>
		<el-table-column prop="date" label="预约的车辆ID" width="180" v-if="false">
			<template slot-scope="scope">
				{{scope.row.CarId}}
			</template>
		</el-table-column>
		<el-table-column prop="date" label="用户微信名" width="180">
			<template slot-scope="scope">
				{{scope.row.UserName}}
			</template>
		</el-table-column>
		<el-table-column prop="date" label="手机号" width="120">
			<template slot-scope="scope">
				{{scope.row.UserPhone}}
			</template>
		</el-table-column>
		<el-table-column prop="date" label="状态" width="100">
			<template slot-scope="scope">
				<el-tag type="success">
					{{scope.row.State==0?'已预约':scope.row.State==1?'已取消':scope.row.State==2?'已完成':'未知'}}
				</el-tag>
			</template>
		</el-table-column>
		<el-table-column prop="date" label="车型" width="180">
			<template slot-scope="scope">
				{{scope.row.CarModel}}
			</template>
		</el-table-column>
		<el-table-column prop="date" label="颜色" width="80">
			<template slot-scope="scope">
				{{scope.row.CarColour}}
			</template>
		</el-table-column>
		<el-table-column prop="date" label="划痕" width="80">
			<template slot-scope="scope">
				{{scope.row.Scratch}}
			</template>
		</el-table-column>
		<el-table-column prop="date" label="腐蚀" width="80">
			<template slot-scope="scope">
				{{scope.row.Corrosion}}
			</template>
		</el-table-column>
		<el-table-column prop="date" label="破损" width="80">
			<template slot-scope="scope">
				{{scope.row.BeDamaged}}
			</template>
		</el-table-column>
		<el-table-column prop="date" label="飞漆" width="80">
			<template slot-scope="scope">
				{{scope.row.FlyingPaint}}
			</template>
		</el-table-column>
		<el-table-column prop="date" label="地址" width="280">
			<template slot-scope="scope">
				{{scope.row.Address}}
			</template>
		</el-table-column>
		<el-table-column prop="date" label="预约服务时间" width="180">
			<template slot-scope="scope">
				{{scope.row.MakeTime}}
			</template>
		</el-table-column>
		<el-table-column prop="date" label="添加时间" width="180" v-if="false">
			<template slot-scope="scope">
				{{scope.row.AddTime}}
			</template>
		</el-table-column>
		<el-table-column prop="date" label="修改时间" width="180" v-if="false">
			<template slot-scope="scope">
				{{scope.row.UpdateTime}}
			</template>
		</el-table-column>
		<el-table-column prop="date" label="备注">
			<template slot-scope="scope">
				{{scope.row.Remarks}}
			</template>
		</el-table-column>
		<el-table-column prop="date" label="编辑" width="180" v-if="false">
			<template slot-scope="scope">
				<el-button type="primary" @click="EidtRecord(scope.row)">编辑</el-button>
			</template>
		</el-table-column>
		<el-table-column prop="date" label="操作" width="220"  fixed="right">
			<template slot-scope="scope">
				<el-button type="danger" @click="DelInfo(scope.row.id)">删除</el-button>
				<el-button type="success" @click="Results(scope.row)" :disabled="scope.row.State==0?false:true">
					预约结算</el-button>
			</template>
		</el-table-column>
		<!-- 	<el-table-column prop="date" label="修改状态" width="180">
			<template slot-scope="scope">
				<el-button type="primary" @click="UpdateState(scope.row.id)">修改状态</el-button>
			</template>
		</el-table-column> -->
		<el-table-column prop="date" label="预约结算" width="180"  fixed="right" v-if="false">
			<template slot-scope="scope">
				<el-button type="success" @click="Results(scope.row)" :disabled="scope.row.State==0?false:true">
					预约结算</el-button>
			</template>
		</el-table-column>
	</el-table>
		<el-pagination background layout="prev, pager, next" :total="model.TotalCount" @current-change='Pages'
			style="text-align:center;margin-top: 10px;">
		</el-pagination>
		<el-dialog title="提示" width="50%" :visible.sync="dialogVisible">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="用户名">
					<el-input v-model="form.UserName"></el-input>
				</el-form-item>
				<el-form-item label="用户电话">
					<el-input v-model="form.UserPhone"></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="form.Address"></el-input>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="form.Remarks"></el-input>
				</el-form-item>
				<el-form-item label="车型">
					<el-input v-model="form.CarModel"></el-input>
				</el-form-item>
				<el-form-item label="颜色">
					<el-input v-model="form.CarColour"></el-input>
				</el-form-item>
				<el-form-item label="划痕">
					<el-radio-group v-model="form.Scratch">
						<el-radio label="良好">良好</el-radio>
						<el-radio label="一般">一般</el-radio>
						<el-radio label="中等">中等</el-radio>
						<el-radio label="严重">严重</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="腐蚀">
					<el-radio-group v-model="form.Corrosion">
						<el-radio label="良好">良好</el-radio>
						<el-radio label="一般">一般</el-radio>
						<el-radio label="中等">中等</el-radio>
						<el-radio label="严重">严重</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="破损">
					<el-radio-group v-model="form.BeDamaged">
						<el-radio label="良好">良好</el-radio>
						<el-radio label="一般">一般</el-radio>
						<el-radio label="中等">中等</el-radio>
						<el-radio label="严重">严重</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="飞漆">
					<el-radio-group v-model="form.FlyingPaint">
						<el-radio label="良好">良好</el-radio>
						<el-radio label="一般">一般</el-radio>
						<el-radio label="中等">中等</el-radio>
						<el-radio label="严重">严重</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="SubmitRecord">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		GetRecordById,
		DeleteRecord,
		UpdateRecord,
		Collection,
		deriveExcel,
		UpdateState
	} from '../../api/AppointmentRecord.js'
	import utils from '../../utils/utils.js'
	import {
		ReservationAreaList
	} from '../../api/ReservationArea.js'
	export default {
		data() {
			return {

				form: {
					"id": 0,
					"ReservationId": 0,
					"UserId": 0,
					"UserName": "",
					"UserPhone": "",
					"CarId": 0,
					"CarModel": "",
					"CarColour": "",
					"Scratch": "",
					"Corrosion": "",
					"BeDamaged": "",
					"FlyingPaint": "",
					"Address": "",
					"State": 0,
					"Remarks": "",
					"AddTime": "2022-01-05T07:38:12.364Z",
					"UpdateTime": "2022-01-05T07:38:12.364Z"
				},
				dialogVisible: false,
				tableData: [],
				models: {
					ids: 0
				},
				model: {
					"UserId": 0,
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 10,
					"Sort": [{
						"Field": "",
						"Type": 0
					}]
				},
				StateModel: {
					"id": 0,
					"state": 0
				}
			}
		},
		created() {
			this.ShowRecord()
		},
		methods: {
			//导出
			onSubmit() {
				deriveExcel(null).then(res => {
					console.log('导出数据', res)
					if (res.data.code == 200) {
						this.$message.success('导出成功')
						// 派发附件下载
						this.exportCostlistp(res.data.data)
					} else {
						this.$message.error('导出失败')
					}
				})

			},
			// 派发附件下载
			exportCostlistp(url) {
				let a = document.createElement("a");
				a.download = url;
				a.style.display = "none";
				a.href = url
				document.body.appendChild(a);
				a.click();
				URL.revokeObjectURL(a.href); // 释放URL 对象
				document.body.removeChild(a); // 删除 a 标签
			},
			// 完成预约线下收款
			Results(id) {
				Collection(id).then(res => {
					console.log('res', res)
					this.$message.success(res.data.message)
					this.ShowRecord()
				})
			},
			EidtRecord(item) {
				this.dialogVisible = true
				console.log('item', item)
				this.form.id = item.id
				this.form.ReservationId = item.ReservationId
				this.form.UserId = item.UserId
				this.form.CarId = item.CarId
				this.form.Remarks = item.Remarks
				this.form.Address = item.Address
				this.form.UserName = item.UserName
				this.form.UserPhone = item.UserPhone
				this.form.CarModel = item.CarModel
				this.form.CarColour = item.CarColour
				this.form.Scratch = item.Scratch
				this.form.Corrosion = item.Corrosion
				this.form.BeDamaged = item.BeDamaged
				this.form.FlyingPaint = item.FlyingPaint
			},
			SubmitRecord() {
				UpdateRecord(this.form).then(res => {
					console.log('resXiugai', res)
					if (res.data.code == 200) {
						this.$message.success('修改成功')
						this.dialogVisible = false
						this.ShowRecord()
					} else {
						this.$message.watch('修改失败')
					}
				})
			},
			ShowRecord() {
				GetRecordById(this.model).then(res => {
					console.log(res)
					if(res.data.data.total==0){
						this.$message.error('暂无数据')
						return
					}
					res.data.data.rows.forEach((item, index) => {
						item.AddTime = utils.formatTime(item.AddTime, "yyyy-MM-dd")
						item.UpdateTime = utils.formatTime(item.UpdateTime, "yyyy-MM-dd")
						item.MakeTime = utils.formatTime(item.MakeTime, "yyyy-MM-dd")
					})
					this.tableData = res.data.data.rows
					this.model.TotalCount = res.data.data.total
				})
			},
			// 状态查询预约情况
			SelectedState(e) {
				console.log('eee', e)
				this.model.State = parseInt(e)
				this.model.KeyWord = ''
				this.model.startdate = ''
				this.model.enddate = ''
				this.ShowRecord()
			},
			// 提交查询
			SubmitCard() {
				this.ShowRecord()
			},
			// 删除信息
			DelInfo(id) {
				this.models.ids = id
				console.log('数据ID', id)
				DeleteRecord(this.models).then(res => {
					console.log('删除后的数', res)
					if (res.data.code == 200) {
						this.$message.success('删除成功')
						this.ShowRecord()
					} else {
						this.$message.warn('删除失败')
					}
				})
			},
			Pages(e) {
				this.model.PageIndex = e
				this.ShowRecord()
			}

		}
	}
</script>

<style>
</style>