392 lines
12 KiB
Vue
392 lines
12 KiB
Vue
<template>
|
|
<ai-detail class="ActiveDetail">
|
|
<template #title>
|
|
<ai-title title="活动详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
|
|
</template>
|
|
|
|
<template #content>
|
|
<el-tabs v-model="activeName" tabPosition="left">
|
|
<el-tab-pane label="活动信息" name="active">
|
|
<div class="title">
|
|
<div class="hint">{{ formData.title }}</div>
|
|
<ai-wrapper label-width="60px" :columnsNumber="2">
|
|
<ai-info-item label="创建时间">
|
|
<span>{{ formData.createDate }}</span>
|
|
</ai-info-item>
|
|
|
|
<ai-info-item label="创建人">
|
|
<span>{{ formData.createUserName }}</span>
|
|
</ai-info-item>
|
|
|
|
<ai-info-item label="发布地区" style="width:100%">
|
|
<span>{{ formData.areaName }}</span>
|
|
</ai-info-item>
|
|
|
|
<ai-info-item label="报名状态">
|
|
<span style="color:green" v-if="formData.signupStatus == 0">{{ dict.getLabel('partyReportSignupStatus', formData.signupStatus) }}</span>
|
|
|
|
<span style="color:red" v-else>{{ dict.getLabel('partyReportSignupStatus', formData.signupStatus) }}</span>
|
|
</ai-info-item>
|
|
|
|
<ai-info-item label="活动状态">
|
|
<span style="color:#FDB27B" v-if="formData.actionStatus == 0">{{ dict.getLabel('partyReportActionStatus', formData.actionStatus) }}</span>
|
|
|
|
<span style="color:#588BFB" v-else-if="formData.actionStatus == 1">{{ dict.getLabel('partyReportActionStatus', formData.actionStatus) }}</span>
|
|
|
|
<span style="color:#B0B0B0" v-else>{{ dict.getLabel('partyReportActionStatus', formData.actionStatus) }}</span>
|
|
</ai-info-item>
|
|
|
|
<ai-info-item label="活动时间" style="width:100%">
|
|
<span>{{ formData.beginTime }}至{{ formData.endTime }}</span>
|
|
</ai-info-item>
|
|
|
|
<ai-info-item label="活动地点">
|
|
<span>{{ formData.address }}</span>
|
|
</ai-info-item>
|
|
|
|
<ai-info-item label="参与名额" style="width:100%">
|
|
<span v-if="formData.total == '0'">不限</span>
|
|
<span v-else>{{ formData.total }}</span>
|
|
</ai-info-item>
|
|
|
|
<ai-info-item label="截止时间">
|
|
<span>{{ formData.stopSignupTime }}</span>
|
|
</ai-info-item>
|
|
|
|
<ai-info-item label="报名人数">
|
|
<span>{{ formData.signupCount }}</span>
|
|
</ai-info-item>
|
|
|
|
<ai-info-item label="联系人">
|
|
<span>{{ formData.contactPerson }}</span>
|
|
</ai-info-item>
|
|
|
|
<ai-info-item label="联系电话">
|
|
<span>{{ formData.contactPhone }}</span>
|
|
</ai-info-item>
|
|
</ai-wrapper>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="hint">活动介绍</div>
|
|
<div class="presentation" v-html="formData.content"></div>
|
|
</div>
|
|
</el-tab-pane>
|
|
|
|
<el-tab-pane label="报名情况" name="apply">
|
|
<div class="hint">报名情况</div>
|
|
|
|
<div>
|
|
<div class="total">
|
|
共<span class="Number"> {{ totals.total }} </span>人报名
|
|
</div>
|
|
|
|
<ai-table class="ai-table" :tableData="formes" :col-configs="colConfiges" :total="total" :border="true" :current.sync="page.current" :size.sync="page.size" @getList="getInfoList" :dict="dict">
|
|
<el-table-column slot="signupTime" label="报名时间" align="center">
|
|
<template slot-scope="{ row }">{{ row.signupTime.substring(0, 10) }} </template>
|
|
</el-table-column>
|
|
|
|
<el-table-column slot="remark" label="报名备注" width="150px" align="center">
|
|
<template slot-scope="{ row }">
|
|
<el-tooltip>
|
|
<div slot="content" style="max-width: 850px;">{{ row.remark }}</div>
|
|
<div style=" overflow: hidden;text-overflow: ellipsis; white-space: nowrap;">
|
|
{{ row.remark }}
|
|
</div>
|
|
</el-tooltip>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column slot="partyName" label="报名人员资料" width="200px">
|
|
<template slot-scope="{ row }">
|
|
<span v-if="row.partyName">{{ row.partyName }}-{{ row.phone }} <br />{{ row.partyOrgName }}</span>
|
|
<span v-else>{{ row.residentName }}-{{ row.phone }}<br />{{ row.partyOrgName }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column slot="options" label="操作" fixed="right" width="100">
|
|
<template slot-scope="{ row }">
|
|
<el-button type="text" @click="check(row.id)" v-if="row.logStatus == 1">审核日志</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</ai-table>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
|
|
<ai-dialog title="查看活动日志" :visible.sync="dialogVisible" @onConfirm="report(forms.id)" @onCancel="onCancel" width="35%">
|
|
<ai-wrapper>
|
|
<div class="con">
|
|
<ai-info-item label="提交人">
|
|
<span v-if="forms.partyName">{{ forms.partyName }}</span>
|
|
<span v-else>{{ forms.residentName }}</span>
|
|
</ai-info-item>
|
|
|
|
<ai-info-item label="提交时间">
|
|
<span>{{ forms.submitTime }}</span>
|
|
</ai-info-item>
|
|
</div>
|
|
|
|
<ai-info-item label="活动总结">
|
|
<span>{{ forms.content }}</span>
|
|
</ai-info-item>
|
|
|
|
<ai-info-item label="活动照片" style="width:100%" class="photos">
|
|
<div v-viewer="{ movable: true }">
|
|
<img v-for="(item, i) in forms.files" :key="i" :src="item.accessUrl" style="width: 100px;height: 100px;margin-left: 5px;" />
|
|
</div>
|
|
</ai-info-item>
|
|
|
|
<ai-info-item label="审核结果">
|
|
<el-radio-group v-model="logStatus">
|
|
<el-radio :label="2">合格</el-radio>
|
|
<el-radio :label="3">不合格</el-radio>
|
|
</el-radio-group>
|
|
</ai-info-item>
|
|
</ai-wrapper>
|
|
</ai-dialog>
|
|
</template>
|
|
</ai-detail>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ActiveDetail',
|
|
components: {},
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
params: Object,
|
|
},
|
|
data() {
|
|
return {
|
|
logStatus: 2,
|
|
activeName: 'active',
|
|
formData: [],
|
|
form: [],
|
|
forms: {},
|
|
totalList: '',
|
|
dialogVisible: false,
|
|
id: '',
|
|
formes: [],
|
|
colConfiges: [
|
|
{ slot: 'signupTime', align: 'center' },
|
|
{
|
|
slot: 'partyName',
|
|
align: 'left',
|
|
},
|
|
{ prop: 'reportType', label: '活动报道类型', align: 'center', dict: 'partyReportSignupReportType' },
|
|
{ slot: 'remark', align: 'center' },
|
|
{
|
|
prop: 'status',
|
|
label: '报名状态',
|
|
align: 'center',
|
|
dict: 'partyReportPersonSignupStatus',
|
|
},
|
|
{
|
|
prop: 'logStatus',
|
|
label: '活动日志',
|
|
align: 'center',
|
|
dict: 'partyReportSignupLogStatus',
|
|
},
|
|
],
|
|
page: {
|
|
size: 10,
|
|
current: 1,
|
|
},
|
|
total: 0,
|
|
totals: [],
|
|
}
|
|
},
|
|
computed: {},
|
|
watch: {},
|
|
created() {
|
|
this.dict.load('partyReportSignupStatus', 'partyReportActionStatus', 'partyReportSignupReportType', 'partyReportPersonSignupStatus', 'partyReportSignupLogStatus').then(() => {})
|
|
|
|
if (this.params && this.params.id) {
|
|
this.id = this.params.id
|
|
this.getList()
|
|
this.getInfoList()
|
|
}
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
getList() {
|
|
this.instance.post(`/app/apppartyreport/queryDetailById?id=${this.id}`).then((res) => {
|
|
if (res.code == 0) {
|
|
this.formData = res.data
|
|
}
|
|
})
|
|
},
|
|
|
|
getInfoList() {
|
|
this.instance
|
|
.post(`/app/apppartyreport/signupInfoPage`, null, {
|
|
params: {
|
|
...this.page,
|
|
id: this.id,
|
|
},
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 0) {
|
|
this.formes = res.data.records
|
|
this.total = res.data.total
|
|
this.totals = res.data
|
|
if (this.formes) {
|
|
this.formes.map((item) => {
|
|
item.signupTime = item.signupTime.substring(0, 10)
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
check(id) {
|
|
this.instance.post(`/app/apppartyreport/log?id=${id}`).then((res) => {
|
|
if (res.code == 0) {
|
|
this.forms = res.data
|
|
this.dialogVisible = true
|
|
}
|
|
})
|
|
},
|
|
|
|
report(id) {
|
|
this.instance
|
|
.post(`/app/apppartyreport/log-check`, {
|
|
id,
|
|
logStatus: this.logStatus,
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 0) {
|
|
this.form = res.data
|
|
this.getInfoList()
|
|
this.dialogVisible = false
|
|
}
|
|
})
|
|
},
|
|
|
|
onCancel() {
|
|
this.dialogVisible = false
|
|
},
|
|
|
|
// 返回按钮
|
|
cancel(isRefresh) {
|
|
this.$emit('change', {
|
|
type: 'list',
|
|
isRefresh: isRefresh ? true : false,
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.ActiveDetail {
|
|
.el-tabs {
|
|
margin-top: 20px;
|
|
::v-deep.el-tabs__header {
|
|
.el-tabs__nav-wrap {
|
|
.el-tabs__nav {
|
|
border: 1px solid #d7d8db;
|
|
.el-tabs__item {
|
|
margin-right: 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
::v-deep.el-tabs__content {
|
|
margin-left: 50px;
|
|
.el-tab-pane:first-child {
|
|
margin-bottom: 100px;
|
|
.title {
|
|
background-color: #fff;
|
|
padding: 0 16px 16px 16px;
|
|
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
|
|
border-radius: 2px;
|
|
.hint {
|
|
height: 50px;
|
|
line-height: 50px;
|
|
color: #000;
|
|
border-bottom: 1px solid #d8dce3;
|
|
font-weight: 800;
|
|
}
|
|
.ai-wrapper {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
.content {
|
|
margin-top: 15px;
|
|
background-color: #fff;
|
|
padding: 0 16px 16px 16px;
|
|
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
|
|
border-radius: 2px;
|
|
.hint {
|
|
height: 50px;
|
|
line-height: 50px;
|
|
color: #000;
|
|
border-bottom: 1px solid #d8dce3;
|
|
font-weight: 800;
|
|
}
|
|
.presentation {
|
|
padding: 5px;
|
|
border-bottom: none;
|
|
line-height: 40px;
|
|
color: #000;
|
|
img {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-tab-pane:nth-child(2) {
|
|
background-color: #fff;
|
|
padding: 16px;
|
|
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
|
|
border-radius: 2px;
|
|
margin-bottom: 16px;
|
|
.total {
|
|
line-height: 30px;
|
|
font-size: 14px;
|
|
color: #adadad;
|
|
.Number {
|
|
color: #719ffc;
|
|
}
|
|
}
|
|
.ai-table {
|
|
.el-table {
|
|
.el-table__body-wrapper {
|
|
.el-table__body {
|
|
tr {
|
|
td:first-child {
|
|
.cell {
|
|
padding-left: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ai-dialog__wrapper {
|
|
::v-deep.el-dialog {
|
|
.el-dialog__body {
|
|
.ai-wrapper {
|
|
.con {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.ai-info-item {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|