337 lines
14 KiB
Plaintext
337 lines
14 KiB
Plaintext
@*
|
|
For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
|
|
*@
|
|
@{
|
|
}
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
<script src="http://lib.baomitu.com/qs/6.10.3/qs.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app" v-loading="loading">
|
|
<h3 style="text-align:center;">共赴宁波之春 报名结果</h3>
|
|
<el-form label-position="left" ref="form" :model="form" label-width="120px" style="margin-top:15px;">
|
|
<el-form-item label="姓名：" prop="name">
|
|
<el-input v-model="form.name"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="手机号码：" prop="phone">
|
|
<el-input v-model="form.phone"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="线路：" prop="line">
|
|
<el-radio-group v-model="form.line" size="small">
|
|
<el-radio-button label="慈溪" border></el-radio-button>
|
|
<el-radio-button label="奉化" border></el-radio-button>
|
|
<el-radio-button label="象山" border></el-radio-button>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="参加时间：" prop="date">
|
|
<el-radio-group v-model="form.date" size="small">
|
|
<el-radio-button label="2023-03-18" border></el-radio-button>
|
|
<el-radio-button label="2023-03-19" border></el-radio-button>
|
|
<el-radio-button label="2023-03-25" border></el-radio-button>
|
|
<el-radio-button label="2023-03-26" border></el-radio-button>
|
|
<el-radio-button label="2023-04-08" border></el-radio-button>
|
|
<el-radio-button label="2023-04-09" border></el-radio-button>
|
|
<el-radio-button label="2023-04-15" border></el-radio-button>
|
|
<el-radio-button label="2023-04-16" border></el-radio-button>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @@click.prevent="onSubmit('form')">查询</el-button>
|
|
<el-button @@click.prevent="reset('form')">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-table :data="tableData" style="width: 100%">
|
|
<el-table-column type="expand">
|
|
<template slot-scope="props">
|
|
<el-descriptions class="margin-top" title="" :column="2" border>
|
|
<el-descriptions-item :span="2">
|
|
<template slot="label">
|
|
@* <i class="el-icon-user"></i>*@
|
|
报名日期
|
|
</template>
|
|
{{ props.row.createdTime }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
@* <i class="el-icon-user"></i>*@
|
|
姓名
|
|
</template>
|
|
{{ props.row.name }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item labelStyle="width:90px;">
|
|
<template slot="label">
|
|
@* <i class="el-icon-user"></i>*@
|
|
手机号码
|
|
</template>
|
|
{{ props.row.phone }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
@* <i class="el-icon-mobile-phone"></i>*@
|
|
微信号码
|
|
</template>
|
|
{{ props.row.weixin_number }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
@* <i class="el-icon-location-outline"></i>*@
|
|
身份证号码
|
|
</template>
|
|
{{ props.row.cardno }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
@* <i class="el-icon-tickets"></i>*@
|
|
行业
|
|
</template>
|
|
@* <el-tag size="small">学校</el-tag>*@
|
|
{{ props.row.hangye }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template slot="label">
|
|
@*<i class="el-icon-office-building"></i>*@
|
|
所在地
|
|
</template>
|
|
{{ props.row.address }}
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="报名日期"><template slot-scope="props">{{ dateFormat("mm-dd", props.row.createdTime )}}</template></el-table-column>
|
|
<el-table-column label="姓名/手机号码"><template slot-scope="props">{{ props.row.name}}<br />{{ props.row.phone}}</template></el-table-column>
|
|
<el-table-column label="日期/线路"><template slot-scope="props">{{ props.row.date}} {{ props.row.line}}</template></el-table-column>
|
|
</el-table>
|
|
|
|
|
|
<h3 style="text-align:center;">
|
|
<el-button @@click="load_projects">刷新数据</el-button>
|
|
<el-button type="primary" @@click="export_excel" :loading="loading">导出Excel</el-button>
|
|
</h3>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data: function () {
|
|
return {
|
|
form: {
|
|
name: '',
|
|
phone: '',
|
|
weixin_number: '',
|
|
cardno: '',
|
|
hangye: '',
|
|
address: '',
|
|
date: '',
|
|
line: '',
|
|
code: '',
|
|
token: ''
|
|
//,remark: ''
|
|
},
|
|
tableData: [],
|
|
loading: false,
|
|
token: ''
|
|
}
|
|
},
|
|
created: function () {
|
|
this.check_login()
|
|
this.loading = true;
|
|
this.load_projects();
|
|
|
|
},
|
|
methods: {
|
|
onSubmit(formName) {
|
|
console.log('submit!');
|
|
let _this = this;
|
|
this.$refs[formName].validate((valid) => { // 为表单绑定验证功能
|
|
if (valid) {
|
|
//this.$alert("成功", "提示")
|
|
axios({
|
|
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
|
method: 'post',
|
|
url: '/gb/yjb/api/ningbozhichun/query',
|
|
data: _this.form,
|
|
responseType: "json",
|
|
headers: {
|
|
Authorization: 'Bearer ' + _this.token
|
|
}
|
|
}).then(async response => {
|
|
if (response.data?.data?.success == true) {
|
|
_this.tableData = response.data?.data?.result;
|
|
} else {
|
|
_this.$alert(`<div>` + response.data.message + `</div>`, '错误', {
|
|
confirmButtonText: '确定', dangerouslyUseHTMLString: true, center: true, closeOnClickModal: true
|
|
}).then(a => { }).catch(err => { console.log(err) });
|
|
}
|
|
_this.loading = false;
|
|
}).catch(async error => {
|
|
console.log(error)
|
|
_this.$message({
|
|
type: 'error',
|
|
message: error.message
|
|
})
|
|
_this.loading = false;
|
|
})
|
|
|
|
}
|
|
});
|
|
}, reset(formName) {
|
|
this.form = {}
|
|
},
|
|
export_excel() {
|
|
this.loading = true;
|
|
this.download('/gb/yjb/api/ningbozhichun/export_excel', this.dateFormat("YYYYmmddHHMMSS", new Date()) + "-共赴宁波之春.xlsx", this.loading_false);
|
|
},
|
|
check_login() {
|
|
this.token = window.sessionStorage.getItem('__TOKEN');
|
|
if (!this.token)
|
|
location = '/gb/yjb/manage/login'
|
|
},
|
|
|
|
load_projects() {
|
|
this.loading = true;
|
|
let _this = this;
|
|
axios({
|
|
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
|
method: 'post',
|
|
url: '/gb/yjb/api/ningbozhichun/GetPersonList',
|
|
data: {},
|
|
responseType: "json",
|
|
headers: {
|
|
Authorization: 'Bearer ' + _this.token
|
|
}
|
|
}).then(function (response) {
|
|
console.log(response)
|
|
_this.tableData = response.data.data
|
|
_this.loading = false;
|
|
}).catch(function (error) {
|
|
console.log(error)
|
|
_this.$message({
|
|
type: 'error',
|
|
message: error.message
|
|
})
|
|
_this.loading = false;
|
|
})
|
|
},
|
|
loading_false() { this.loading = false },
|
|
|
|
download(url, filename, callback) {
|
|
let _this = this;
|
|
axios({
|
|
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
|
method: 'post',
|
|
url: url,
|
|
data: {},
|
|
responseType: "blob",
|
|
headers: {
|
|
Authorization: 'Bearer ' + _this.token
|
|
}
|
|
}).then(function (response) {
|
|
console.log(response);
|
|
//解析文件充blod中解析
|
|
const url = window.URL.createObjectURL(
|
|
new Blob([response.data], { type: "application/vnd.ms-excel" })
|
|
);
|
|
const link = document.createElement("a");
|
|
link.style.display = "none";
|
|
link.href = url;
|
|
link.setAttribute("download", filename);
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
callback();
|
|
}).catch(function (error) {
|
|
callback();
|
|
console.log(error)
|
|
_this.$message({
|
|
type: 'error',
|
|
message: error.message
|
|
})
|
|
})
|
|
},
|
|
getMonthWeek(now) {
|
|
var a = now.getYear();
|
|
var b = now.getMonth() + 1;
|
|
var c = now.getDate();
|
|
/*
|
|
a = d = 当前日期
|
|
b = 6 - w = 当前周的还有几天过完(不算今天)
|
|
a + b 的和在除以7 就是当天是当前月份的第几周
|
|
*/
|
|
var date = new Date(a, parseInt(b) - 1, c), w = date.getDay(), d = date.getDate();
|
|
return Math.ceil(
|
|
(d + 6 - w) / 7
|
|
);
|
|
},
|
|
dateFormat(fmt, d) {
|
|
const date = new Date(d);
|
|
let ret;
|
|
const opt = {
|
|
"Y+": date.getFullYear().toString(), // 年
|
|
"m+": (date.getMonth() + 1).toString(), // 月
|
|
"d+": date.getDate().toString(), // 日
|
|
"H+": date.getHours().toString(), // 时
|
|
"M+": date.getMinutes().toString(), // 分
|
|
"S+": date.getSeconds().toString() // 秒
|
|
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
|
};
|
|
for (let k in opt) {
|
|
ret = new RegExp("(" + k + ")").exec(fmt);
|
|
if (ret) {
|
|
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
|
|
};
|
|
};
|
|
return fmt;
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<style scoped>
|
|
.buhuanhang {
|
|
white-space: nowrap;
|
|
width: 21%;
|
|
}
|
|
|
|
.text {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.item {
|
|
padding: 18px 0;
|
|
}
|
|
|
|
.box-card {
|
|
width: 98%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.el-card__body {
|
|
padding: 12px;
|
|
}
|
|
|
|
.el-card__body p {
|
|
margin: 0px;
|
|
margin-bottom: 5px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.el-radio.is-bordered {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.el-radio-button--small .el-radio-button__inner {
|
|
border-left: 1px solid #DCDFE6;
|
|
}
|
|
</style>
|
|
|
|
</html> |