You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
434 lines
13 KiB
434 lines
13 KiB
<template> |
|
<div class="page-content" |
|
style="padding: 24px"> |
|
<div class="tool"> |
|
<ul class="filter"> |
|
<li> |
|
<label>报名人员状态：</label> |
|
<el-select v-model="form.isDisable" |
|
clearable |
|
@change="initData"> |
|
<el-option v-for="(item, i) in isDisable" |
|
:key="i" |
|
:label="item.name" |
|
:value="item.id"></el-option> |
|
</el-select> |
|
</li> |
|
<li> |
|
<label>组织类型</label> |
|
<el-select v-model="form.platformId" |
|
clearable |
|
@change="initData"> |
|
<el-option v-for="(item, i) in platformId" |
|
:key="i" |
|
:label="item.name" |
|
:value="item.id"></el-option> |
|
</el-select> |
|
</li> |
|
<li> |
|
<label>签到情况：</label> |
|
<el-select v-model="form.signInStatus" |
|
clearable |
|
@change="initData"> |
|
<el-option v-for="(item, i) in signInStatus" |
|
:key="i" |
|
:label="item.name" |
|
:value="item.id"></el-option> |
|
</el-select> |
|
</li> |
|
<li> |
|
<label>搜索：</label> |
|
<el-input placeholder="请输入姓名、手机号进行查询" |
|
prefix-icon="el-icon-search" |
|
v-model="form.keyWord" |
|
clearable |
|
size="mini" |
|
style="width: 250px"></el-input> |
|
</li> |
|
</ul> |
|
<div> |
|
<el-button type="primary" |
|
@click="add">新增</el-button> |
|
<el-button @click="exportAll">批量导出</el-button> |
|
</div> |
|
</div> |
|
|
|
<el-table ref="table" |
|
:data="list" |
|
class="table" |
|
stripe |
|
header-align="center" |
|
@selection-change="handleSelectionChange" |
|
row-key="id" |
|
@sort-change="sortChange"> |
|
<el-table-column type="selection" |
|
width="80" |
|
align="center" |
|
:reserve-selection="true"></el-table-column> |
|
<el-table-column type="index" |
|
width="60" |
|
label="序号" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
{{ scope.$index + (page - 1) * pageSize + 1 }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="username" |
|
label="姓名"> |
|
</el-table-column> |
|
<el-table-column prop="organizationName" |
|
label="组织名称" |
|
sortable="custom"> |
|
</el-table-column> |
|
<el-table-column prop="platformId" |
|
label="组织类型"></el-table-column> |
|
<el-table-column prop="createTime" |
|
label="报名时间"> |
|
</el-table-column> |
|
<el-table-column prop="signInStatus" |
|
label="签到情况"></el-table-column> |
|
<el-table-column prop="phone" |
|
label="手机号"> |
|
</el-table-column> |
|
<el-table-column label="操作" |
|
align="center" |
|
width="320"> |
|
<template slot-scope="scope"> |
|
<el-button type="text" |
|
@click="edit(scope.row, true)">查看</el-button> |
|
<el-button type="text" |
|
@click="edit(scope.row, false)">编辑</el-button> |
|
<el-switch v-model="scope.row.isDisable" |
|
:active-text="scope.row.isDisable ? '关' : '开'" |
|
:active-value="0" |
|
:inactive-value="1" |
|
style="margin-left: 5px" |
|
@change="switchOff($event,scope.row,scope.$index)"></el-switch> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="pagination"> |
|
<el-pagination background |
|
layout="total, prev, pager, next" |
|
:total="total" |
|
@current-change="handleCurrentChange" |
|
:current-page="page"> |
|
</el-pagination> |
|
</div> |
|
|
|
<el-dialog :title="(memberForm.id ? '编辑' : '新增') + '报名人员'" |
|
:visible.sync="memberVisible" |
|
width="400px" |
|
class="dialog" |
|
:close-on-click-modal="false" |
|
@close="closeAdd"> |
|
<el-form ref="form" |
|
:model="memberForm" |
|
:rules="rules" |
|
label-width="80px" |
|
:disabled="disalbed" |
|
style='margin-right: 10px;'> |
|
<el-form-item prop="phone" |
|
label="手机号"> |
|
<el-input v-model="memberForm.phone" |
|
maxlength="11" |
|
placeholder="请输入手机号" |
|
@input="phoneChange"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="username" |
|
label="姓名"> |
|
<el-input v-model="memberForm.username" |
|
placeholder="请输入姓名"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="teamId" |
|
label="组织"> |
|
<el-select v-model="memberForm.teamId" |
|
filterable |
|
style="width: 100%"> |
|
<el-option v-for="(item, i) in orgs" |
|
:key="i" |
|
:label="item.organizationName" |
|
:value="item.teamId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item v-if="memberForm.id" |
|
prop="signInTime" |
|
label="签到时间"> |
|
<el-date-picker v-model="memberForm.signInTime" |
|
style="width: 100%" |
|
value-format="yyyy-MM-dd HH:mm:ss" |
|
type="datetime" |
|
placeholder="请选择"> |
|
</el-date-picker> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" |
|
class="dialog-footer"> |
|
<el-button @click="memberVisible = false">取消</el-button> |
|
<el-button v-if="!disalbed" |
|
type="primary" |
|
@click="submit">确定</el-button> |
|
</span> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import Util from "@/libs/util"; |
|
import axios from 'axios' |
|
import Setting from "@/setting"; |
|
export default { |
|
name: "matchSignup", |
|
data () { |
|
return { |
|
token: Util.local.get(Setting.tokenKey), |
|
id: this.$route.query.id, |
|
teamId: this.$route.query.teamId, |
|
form: { |
|
isDisable: '', |
|
platformId: '', |
|
signInStatus: '', |
|
keyWord: '', |
|
}, |
|
isDisable: [ |
|
{ |
|
id: '', |
|
name: '不限' |
|
}, |
|
{ |
|
id: 1, |
|
name: '已禁用' |
|
}, |
|
{ |
|
id: 0, |
|
name: '未禁用' |
|
}, |
|
], |
|
platformId: [ |
|
{ |
|
id: '', |
|
name: '不限' |
|
}, |
|
{ |
|
id: 7, |
|
name: '无组织' |
|
}, |
|
{ |
|
id: 6, |
|
name: '供应商' |
|
}, |
|
{ |
|
id: 5, |
|
name: '幼儿园' |
|
}, |
|
], |
|
signInStatus: [ |
|
{ |
|
id: '', |
|
name: '不限' |
|
}, |
|
{ |
|
id: 1, |
|
name: '已签到' |
|
}, |
|
{ |
|
id: 0, |
|
name: '待签到' |
|
}, |
|
{ |
|
id: 2, |
|
name: '未签到' |
|
}, |
|
], |
|
keyword: "", |
|
list: [], |
|
multipleSelection: [], |
|
page: 1, |
|
pageSize: 10, |
|
total: 0, |
|
|
|
memberVisible: false, |
|
memberForm: { |
|
accountId: '', |
|
identification: 1, |
|
signInTime: '', |
|
teamId: '', |
|
phone: '', |
|
username: '', |
|
}, |
|
rules: { |
|
phone: [ |
|
{ required: true, message: "请输入手机号", trigger: "blur" } |
|
], |
|
username: [ |
|
{ required: true, message: "请输入姓名", trigger: "blur" } |
|
], |
|
}, |
|
orgs: [], |
|
disalbed: false, |
|
timer: null, |
|
submiting: false |
|
}; |
|
}, |
|
watch: { |
|
'form.keyWord': function (val) { |
|
clearTimeout(this.searchTimer); |
|
this.searchTimer = setTimeout(() => { |
|
this.initData(); |
|
}, 500); |
|
} |
|
}, |
|
mounted () { |
|
this.initData() |
|
}, |
|
methods: { |
|
getData () { |
|
this.$post(this.api.queryRegistrationByCondition, { |
|
pageNum: this.page, |
|
pageSize: this.pageSize, |
|
competitionId: this.id, |
|
...this.form |
|
}).then(({ data }) => { |
|
this.list = data.records; |
|
this.total = data.total; |
|
}).catch(res => { }); |
|
}, |
|
initData () { |
|
this.page = 1 |
|
this.getData() |
|
}, |
|
handleSelectionChange (val) { |
|
this.multipleSelection = val; |
|
}, |
|
handleCurrentChange (val) { |
|
this.page = val; |
|
this.getData(); |
|
}, |
|
switchOff (val, row, index) { |
|
this.$put(`${this.api.disableRegistration}?competitionRegistrationId=${row.id}&isDisable=${val}`).then(res => { }).catch(err => { }); |
|
}, |
|
delData (row) { |
|
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
|
type: "warning" |
|
}) |
|
.then(() => { |
|
this.$post(`${this.api.delActivityApplicant}?id=${row.id}`).then(res => { |
|
Util.successMsg("删除成功"); |
|
this.getData(); |
|
}).catch(res => { }); |
|
}) |
|
.catch(() => { }); |
|
}, |
|
// 排序回调 |
|
sortChange (column) { |
|
// 1上2下 |
|
if (column.prop === 'school') this.schoolOrder = column.order ? column.order === 'ascending' ? 2 : 1 : '' |
|
if (column.prop === 'teamName') this.teamOrder = column.order ? column.order === 'ascending' ? 2 : 1 : '' |
|
this.getData() |
|
}, |
|
exportAll () { |
|
const data = this.multipleSelection |
|
if (data.length) { |
|
data.map((e, i) => e.id = i + 1) |
|
axios.post(this.api.exportDataInBatchesCom, data, { |
|
headers: { |
|
token: this.token |
|
}, |
|
responseType: 'blob' |
|
}).then((res) => { |
|
Util.downloadFileDirect(`报名人员.xls`, new Blob([res.data])) |
|
}).catch(res => { }) |
|
} else { |
|
axios.get(`${this.api.excelExportCom}?competitionId=${this.id}`, { |
|
headers: { |
|
token: this.token |
|
}, |
|
responseType: 'blob' |
|
}).then((res) => { |
|
Util.downloadFileDirect(`报名人员.xls`, new Blob([res.data])) |
|
}).catch(res => { }) |
|
} |
|
}, |
|
// 手机号变化后带出用户信息 |
|
phoneChange (val) { |
|
clearTimeout(this.timer) |
|
if (/^1[3456789]\d{9}$/.test(val)) { |
|
this.timer = setTimeout(async () => { |
|
const { data } = await this.$post(`${this.api.getOrganizationInformationByPhone}?phone=${val}`) |
|
const peoole = data.find(e => !e.organizationName) // 个人 |
|
const orgs = data.filter(e => e.platformId === '幼儿园' || e.platformId === '供应商') // 组织 |
|
orgs.forEach(e => { |
|
if (!e.organizationName) e.organizationName = e.userName |
|
}) |
|
this.orgs = orgs |
|
this.memberForm.username = peoole.userName |
|
this.memberForm.accountId = peoole.accountId |
|
// this.memberForm.username = org.organizationName |
|
}, 500) |
|
} |
|
}, |
|
// 编辑 |
|
async edit (row, disalbed) { |
|
// const res = await this.$post(`${this.api.detailsOfApplicants}?competitionId=${this.id}&accountId=${row.accountId}`) |
|
row.phone && this.phoneChange(row.phone) |
|
this.memberForm = { |
|
accountId: row.accountId, |
|
identification: 1, |
|
signInTime: row.signInStatus === '待签到' ? '' : new Date(), |
|
teamId: '', |
|
phone: row.phone, |
|
username: row.username, |
|
signInStatus: 1, |
|
id: row.id, |
|
} |
|
this.disalbed = disalbed |
|
this.memberVisible = true |
|
}, |
|
// 新增 |
|
add () { |
|
this.memberVisible = true |
|
}, |
|
// 关闭弹框回调 |
|
closeAdd () { |
|
this.memberForm = { |
|
accountId: '', |
|
identification: 1, |
|
signInTime: '', |
|
teamId: '', |
|
phone: '', |
|
username: '', |
|
signInStatus: 1, |
|
} |
|
}, |
|
// 新增人员 |
|
submit () { |
|
this.$refs.form.validate(async (valid) => { |
|
if (valid) { |
|
if (this.submiting) return false |
|
this.submiting = true |
|
const form = JSON.parse(JSON.stringify(this.memberForm)) |
|
form.competitionId = this.id |
|
if (!form.signInTime) form.signInTime = Util.formatDate('yyyy-MM-dd hh:mm:ss', new Date()) |
|
await this.$post(this.api[form.id ? 'editRegistrationInformation' : 'addNewApplicantsInTheBackground'], form) |
|
this.memberVisible = false |
|
this.submiting = false |
|
this.getData() |
|
} |
|
}) |
|
}, |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
/deep/.dia-form { |
|
.w-100 { |
|
width: 100%; |
|
} |
|
.tips { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
} |
|
</style> |