qimall/addons/SmartForm/backend/views/renovation/info.php

	<?php
	
	use common\helpers\ComponentHelper;
	ComponentHelper::loadComponentView('com-export-dialog');
	?>
	<div class=" b_box" id="app" v-loading="loading">
		<div class="nav">详情</div>
		<div class="form_info_box">
			<div class="data_info_box">
				<div class="data_item_box">
					<div class="item_box" >
						<p>今日填写次数</p>
						<p>{{statistics.today_filling_times || 0}}</p>
					</div>
				</div>
				<div class="data_item_box">
					<div class="item_box" >
						<p>今日访问人次</p>
						<p>{{statistics.today_view_times || 0}}</p>
					</div>
				</div>
				<div class="data_item_box">
					<div class="item_box" >
						<p>今日填写人数</p>
						<p>{{statistics.today_filling_people || 0}}</p>
					</div>
				</div>
				<div class="data_item_box">
					<div class="item_box" >
						<p>今日填写率</p>
						<p>{{statistics.today_rate || '0%'}}</p>
					</div>
				</div>
				<div class="data_item_box">
					<div class="item_box" >
						<p>总填写次数</p>
						<p>{{statistics.filling_times || 0}}</p>
					</div>
				</div>
				<div class="data_item_box">
					<div class="item_box" > 
						<p>总访问人次</p>
						<p>{{statistics.view_times || 0}}</p>
					</div>
				</div>
				<div class="data_item_box">
					<div class="item_box" >
						<p>总填写人数</p>
						<p>{{statistics.filling_people || 0}}</p>
					</div>
				</div>
				<div class="data_item_box">
					<div class="item_box" >
						<p>总填写率</p>
						<p>{{statistics.all_rate || '0%'}}</p>
					</div>
				</div>
			</div>
			<div class="data_table_box">
				  <el-tabs v-model="activeName">
				    <el-tab-pane label="用户数据" name="user">
						<div class="search_data_box">
							<el-form :inline="true" :model="search_data" size="small">
								<el-form-item label="用户昵称">
									<el-input placeholder="输入页面关键词搜索" v-model='search_data.keyword' suffix-icon="el-icon-search" @change="changeName"></el-input>
								</el-form-item>
								<el-form-item label="提交时间" style="margin-left: 50px;">
									<el-date-picker style="margin-top: 1px;" size="small" @change="changeTime" v-model="datetime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
								</el-form-item>
							</el-form>
							<el-col :span="1.5">
								<el-button type="danger" size="mini" @click="exportInfo">导出表格</el-button>

							</el-col>
						</div>
						    <el-table
						      :data="tableData"
						      style="width: 100%">
							  <el-table-column label="填表人"  align="center" prop="nickname"> </el-table-column>
						      <el-table-column
						        :prop="'h.id'"
						        :label="h.label" align="center"
								v-for="(h,hi) in header" :key="hi"
								:width="h.smart_form_components_code == 'upload-photo' ? 200 : ''">
								<template slot-scope="{row}" >
								         <div class="data_pic_box" v-if="h.smart_form_components_code == 'upload-photo'">
								          <el-image v-for="(m,mi) in row[h.type]" :key="m" :preview-src-list="row[h.type]" :src="m" class="data_pic_img" ></el-image>
								         </div>
										 <p v-else>{{row[h.type]}}</p>
								        </template>
						      </el-table-column>
							  <el-table-column label="填表日期"  align="center" prop="created_at">
								  <template slot-scope="{row}" >
								           {{(new Date( row.created_at * 1000).getFullYear())+'-'+(new Date( row.created_at * 1000).getMonth()+1)+'-'+
										   (new Date( row.created_at * 1000).getDate())}}
								          </template>
								  </el-table-column>
							  	<el-table-column
							    label="操作"
								fixed="right"  align="center">
								<template slot-scope="{row}" >
								       <el-button type="text" size="mini" style="color: red;" @click="deleteInfo(row)">删除</el-button>
								        </template>
	
							  </el-table-column>
						    </el-table>
							<div style="text-align: right;margin: 20px 0;" ref="page">
							    <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
							</div>
					</el-tab-pane>
				  </el-tabs>
			</div>
		</div>
	</div>
	<script>
		new Vue({
			el:"#app",
			data(){
				return{
					
					activeName:'user',
					pageCount:0,
					datetime: [],
					search_data:{
						keyword:'',
						date_start:'',
						date_end:'',
						page:1,
						limit:10,
						template_id:null,
						diy_page_id:0
					},
					statistics:{},
				  tableData: [],
				  export_url:'',
				  exportList:{},
				  header:[],
				  loading:true,
				  
				}
			},
			created(){
				if(getQuery('template_id') ){
					this.search_data.template_id = getQuery('template_id')
					this.search_data.diy_page_id = getQuery('diy_page_id')
					this.getList()
				}
			},
			methods:{
				getList(){
					request({
					    params: {
					        r: 'smart-form/renovation/info',
					        ...this.search_data
					    },
					    method: 'GET',
					}).then(res=>{
						
						this.header = res.data.data.header
						this.tableData = res.data.data.list.list
						this.statistics = res.data.data.statistics
						this.pageCount = res.data.data.list.page_count; 
						this.loading = false
					})
				},
				exportInfo(){
					request({ 
					    params: {
					        r: 'smart-form/form/info'
					    },
						data:{
							template_id:this.search_data.template_id,
							flag:'EXPORT'
						},
					    method: 'post',
					}).then(res=>{
						this.$message.success('导出成功')
					})
				},
				changeName(){
					this.loading = true
					this.search_data.page = 1
					this.getList()
					// new Date().getDate()()
				},
				changeTime(e){
					if(e){
						this.search_data.date_start = e[0]
						this.search_data.date_end = e[1]
						this.search_data.page = 1
						this.loading = true
						this.getList()
					}
					else{
						this.search_data.page = 1
						this.loading = true
						this.getList()
					}

				},
				pagination(page){
					this.loading = true
					this.search_data.page = page
					this.getList()
				},
				deleteInfo(item){
					let that = this
					this.$confirm('是否确定删除?', '提示', {
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  type: 'warning'
					}).then(() => {
						request({
						    params: {
						        r: 'smart-form/form/delete-info'
						    },
							data:{
								id:item.id
							},
						    method: 'post',
						}).then(res=>{
							console.log(res)
							this.loading = true
							this.getList()
						})
					})
				}
			}
		})
	</script>
	<style scoped>
		.b_box{
			min-height: 100vh;
			    background: #f3f3f3;
		
		}
		.nav{
			background: #ffffff;
			border-radius: 5px;
			padding: 26px 24px;
			margin-bottom: 10px;
		}
		.form_info_box{
			padding: 25px;
			background: #fff;
			border-radius: 5px;
			box-sizing: border-box;
		}
		.data_info_box{
			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
		.data_item_box{
			width: 21%;
			height: 125px;
			margin-bottom: 10px;
		}
		.item_box{
			width: 255px;
			height: 100%;
			border: 1px solid #e5e5e5;
			padding: 10px;
			box-sizing: border-box;
			font-size: 14px;
		}
		.data_table_box{
			width: 100%;
			padding: 10px;
			box-sizing: border-box;
			border: 1px solid #e5e5e5;
			margin-top: 10px;
		}
		.search_data_box{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.data_pic_box{
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
		.data_pic_img{
			width: 48px;
			height: 47px;
			border-radius: 3px;
			margin-right: 10px;
			cursor: pointer;
		}
	</style>