platformFront/src/components/admin/Renew.vue

<template>
	<div class="regiBox">
		<crumbs title="产品续费列表">
			<el-form :inline="true" class="demo-form-inline">
				<el-form-item label="申请时间：">
					<el-date-picker v-model="filter.time" size="mini" type="daterange"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="yyyy-MM-dd HH:mm:ss"
					 :default-time="['00:00:00', '23:59:59']"></el-date-picker>
				</el-form-item>
				<el-form-item label="机构名称：">
					<el-input size="mini" v-model="filter.orgName" placeholder="请输入机构名称" clearable></el-input>
					</el-select>
				</el-form-item>
				<el-form-item label="续费状态：">
					<el-select size="mini" v-model="filter.renewalsStatus" placeholder="续费状态" clearable >
						<el-option v-for="item in status" :label="item.name" :value="item.key"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button size="mini" @click="filterData">确认</el-button>
				</el-form-item>
			</el-form>
		</crumbs>
		<div class="contents">
			<el-table :data="list" border style="width: 100%">
				<el-table-column type="index" :index="indexMethod" label="编号" width="60">
				</el-table-column>
				<el-table-column prop="applyTime" label="申请时间"
								 :show-overflow-tooltip="true">
				</el-table-column>
				<el-table-column prop="renewalsNo" label="续费订单号" :show-overflow-tooltip="true">
				</el-table-column>
				<el-table-column prop="orgName" label="申请机构">
				</el-table-column>
				<el-table-column prop="linkman" label="申请人">
				</el-table-column>
				<el-table-column prop="username" label="手机号" width="120">
				</el-table-column>
				<el-table-column prop="productName" label="申请产品">
				</el-table-column>
				<el-table-column label="到期时间"
								 :show-overflow-tooltip="true"
								  width="100">
					<template slot-scope="scope">
						{{scope.row.endTime&&scope.row.endTime.substr(0,10)}}
					</template>
				</el-table-column>
				<el-table-column prop="renewalsStatusName" label="续费状态">
				</el-table-column>
				<el-table-column prop="id" label="操作" width="130">
					<template slot-scope="scope">
						<el-popover
								v-if="scope.row.renewalsStatus != '1'"
								placement="top-start"
								width="180"
								v-model="scope.row.visible"
								>
							<span class="closeDate" @click="scope.row.visible = !scope.row.visible">×</span>
							<el-form label-position="top" :inline="true">
								<!--<el-form-item label="服务开始时间">
									<el-date-picker size="mini" type="date"
													value-format="yyyy-MM-dd"
													placeholder="选择开始时间"
													v-model="startTime"
													style="width: 100%;"></el-date-picker>
								</el-form-item>-->
								<el-form-item label="服务结束时间">
									<el-date-picker size="mini" type="date"
													:picker-options="endPicker"
													value-format="yyyy-MM-dd"
													placeholder="选择结束时间"
													v-model="endTime"
													style="width: 100%;"></el-date-picker>
								</el-form-item>
								<div style="text-align: center">
									<el-button type="primary" size="mini" @click="reBuyProduct(scope.row)">确定续费</el-button>
								</div>
							</el-form>
							<el-button slot="reference" size="mini" class="pop-btn">续费</el-button>
						</el-popover>
						<span v-if="scope.row.renewalsStatus == '1'">续费</span>
						<span style="margin:0 3px;">|</span>
						<span v-if="scope.row.renewalsStatus == '1'">取消续费</span>
						<el-button type="text" size="small" v-if="scope.row.renewalsStatus != '1'" @click="closeBtn(scope.row.id)">取消续费</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination v-if="total>pageSize" :current-page.sync="currentPage" @current-change="currentChange" background
			 :page-size="pageSize" layout="total,prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import api from '@api/admin.js';
	import userApi from '@api/user.js';
	import utils from '@api/utils.js';


	export default {
		name: 'product-lines',
		data() {
			return {
				list: [],
				status: [],
				cacheData: {},
              	/*startTime:'',*/
			  	endTime:'',
				currentPage: 1,
				pageSize: 10,
				total: 0,
				username: null,
				endPicker:{
					disabledDate:(current)=>{   //今天之前不可选
                      const today = new Date(new Date(new Date().toLocaleDateString()).getTime());
					  return current<today;
					}
				},
				filter: {
					orderNum: '',
					orgName: '',
					username: '',
					orgName: '',
					renewalsStatus: '',
					time: '',
				}
			}
		},
		created() {
			this.queryUserInfo();
		  	const enums = JSON.parse(localStorage.getItem('productEnumsData'));
		  	this.status = enums&&enums.renewalsEnum;       //续费状态枚举
		},
		methods: {
          filterData(){
            this.currentPage = 1;
            this.queryUserInfo();
		  },
			queryUserInfo() { //续费列表数据获取
				const time = this.filter.time;
				const startTime = time&&time[0]||undefined;
				const endTime = time&&time[1]||undefined;
				const params = {
					'orgName': this.filter.orgName, // 机构名称
					'renewalsStatus': this.filter.renewalsStatus, // 续费状态
					'current': this.currentPage, //分页
					'size': this.pageSize, //条数
					'startTime': startTime,
					'endTime': endTime
				};
				api.renewalsInfos(params).then((res) => {
					if (res.data.code == '0') {
						const data = res.data.data;
						this.list = data.records.map((item) => {
							return {...item, visible: false}
						});
						this.total = data.total;
					}
				}).catch((error) => {
					console.log(error);
				});
			},
			indexMethod(index) {
				return ((this.currentPage - 1) * this.pageSize) + index + 1;
			},
			currentChange(next) {
				this.currentPage = next;
				if (this.cacheData[next]) { //如果已请求过该页数据，则使用缓存不重复请求
					this.list = this.cacheData[next];
				} else {
					this.queryUserInfo();
				}
			},
          	reBuyProduct(row) {  //确定续费
				const params = {
					'productId': row.productId,
					'endTime': this.endTime,
					'userId': row.userId,
					'renewalsNo': row.renewalsNo
				};
				if(!this.endTime){
                  this.$message({
					showClose: true,
                    message: '请先选择服务结束时间',
                    type: 'warning'
                  });
                  return ;
				}
				api.modifyOpeningTime(params).then((res) => {
					if (res.data.code == '0') {
						this.$message({
							showClose: true,
							message: '操作成功！',
							type: 'success'
						});
					  row.endTime = this.endTime;
                      row.renewalsStatus = '1';
                      row.renewalsStatusName = '已续费';
					}else{
                      this.$message({
						showClose: true,
                        message: res.data.msg,
                        type: 'warning'
                      });
					}
                  this.endTime = '';		//操作后清空状态
				}).catch((error) => {
                  this.$message({
					showClose: true,
                    message: "服务器正忙...",
                    type: 'error'
                  });
                  this.endTime = '';
				});
			},
			closeBtn(id) {
				const cloId = id;
				const params = {
					'id': cloId
				};
				this.$confirm('确定取消此产品的续费服务?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					cancelButtonClass:'cancelColor',
					type: 'warning'
				}).then(() => {
					api.deleteRenewalsInfos(params).then((res) => {
						if (res.data.code == '0') {
							this.$message({
								showClose: true,
								message: '取消成功！',
								type: 'success'
							});
						}else{
                          this.$message({
							showClose: true,
                            message: res.data.msg,
                            type: 'warning'
                          });
						}
                      this.queryUserInfo();
					}).catch((error) => {
                      this.$message({
						showClose: true,
                        message: "服务器正忙...",
                        type: 'warning'
                      });
					});
				}).catch(() => {
				});
			}
		}
	}
</script>

<style lang="less">
	.regiBox {
		.pop-btn{
			padding: 0 1px;
		}
		.el-dialog {
			width: 500px;
			margin-top: 255px !important;
		}
		.reGary{
			color: #ccc;
			cursor: auto;
		}
	}
    .cancelColor{
		color: #22ccc8 !important;
	}
	.el-message-box__btns button:nth-child(2) {
		color: #fff !important;
	}
	.el-input__prefix{
		left: 5px;
		right: auto;
	}
	.closeDate {
		position: absolute;
		top: 0px;
		right: 7px;
		cursor: pointer;
		font-size: 20px;
	}
</style>