156 lines
4.1 KiB
Vue
156 lines
4.1 KiB
Vue
<template>
|
|
<ai-list class="partyList">
|
|
<template slot="content">
|
|
<ai-search-bar>
|
|
<template #left>
|
|
<el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd()">发起活动</el-button>
|
|
<ai-select v-model="search.actionStatus" placeholder="请选择活动状态" :selectList="dict.getDict('partyReportActionStatus')"
|
|
@change="getListInit"></ai-select>
|
|
<ai-select v-model="search.signupStatus" placeholder="请选择报名状态" :selectList="dict.getDict('partyReportSignupStatus')"
|
|
@change="getListInit"></ai-select>
|
|
</template>
|
|
<template slot="right">
|
|
<el-input
|
|
v-model="search.title"
|
|
size="small"
|
|
placeholder="请输入活动名称或发布地区"
|
|
clearable
|
|
@change="search.current=1,getList()"
|
|
suffix-icon="iconfont iconSearch"/>
|
|
</template>
|
|
</ai-search-bar>
|
|
<ai-table
|
|
:dict="dict"
|
|
:tableData="tableData"
|
|
:col-configs="colConfigs"
|
|
:total="total"
|
|
v-loading="loading"
|
|
style="margin-top: 6px;"
|
|
:current.sync="search.current"
|
|
:size.sync="search.size"
|
|
@getList="getList">
|
|
<el-table-column slot="activeTime" width="220px" label="活动时间" align="center">
|
|
<template slot-scope="{ row }">
|
|
<div class="table-options">{{row.beginTime.substring(0, 10)}}至{{row.endTime.substring(0, 10)}}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column slot="options" width="180px" fixed="right" label="操作" align="center">
|
|
<template slot-scope="{ row }">
|
|
<div class="table-options">
|
|
<el-button type="text" @click="toDetail(row.id)">详情</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</ai-table>
|
|
</template>
|
|
</ai-list>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from 'vuex'
|
|
|
|
export default {
|
|
name: 'List',
|
|
|
|
props: {
|
|
instance: Function,
|
|
permissions: Function,
|
|
dict: Object,
|
|
selected: Object,
|
|
areaId: String
|
|
},
|
|
data() {
|
|
return {
|
|
search: {
|
|
current: 1,
|
|
size: 10,
|
|
title: '',
|
|
actionStatus: '',
|
|
signupStatus: ''
|
|
},
|
|
orgName: '',
|
|
loading: false,
|
|
total: 0,
|
|
colConfigs: [
|
|
{prop: 'title', label: '活动名称', align: 'center'},
|
|
{prop: 'areaName', label: '发布地区', align: 'center'},
|
|
{slot: 'activeTime'},
|
|
{prop: 'signupCount', label: '报名人数', align: 'center', width: 120},
|
|
{prop: 'signupStatus', label: '报名状态', align: 'center', dict: 'partyReportSignupStatus', width: 120},
|
|
{prop: 'actionStatus', label: '活动状态', align: 'center', dict: 'partyReportActionStatus', width: 120},
|
|
{slot: 'option'},
|
|
],
|
|
tableData: [],
|
|
ids: '',
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
},
|
|
created() {
|
|
this.dict.load('partyReportActionStatus', 'partyReportSignupStatus').then(() => {
|
|
this.getList()
|
|
})
|
|
|
|
},
|
|
methods: {
|
|
getListInit() {
|
|
this.current = 1
|
|
this.getList()
|
|
},
|
|
getList() {
|
|
this.instance.post(`/app/apppartyreport/list`, null, {
|
|
params: {...this.search, areaId: this.areaId}
|
|
}).then(res => {
|
|
this.loading = false
|
|
if (res?.data) {
|
|
this.tableData = res.data.records
|
|
this.total = res.data.total
|
|
}
|
|
}).catch(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
|
|
toDetail(id) {
|
|
this.$emit("showDetail", id)
|
|
},
|
|
toAdd() {
|
|
this.$emit("showDetail")
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.partyList {
|
|
.party-table__btns {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
:deep( .audit-0 ){
|
|
color: #FF8822 !important;
|
|
}
|
|
|
|
:deep( .audit-1 ){
|
|
color: #2EA222 !important;
|
|
}
|
|
|
|
:deep( .ai-list__content--right ){
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-left: 1px;
|
|
box-shadow: none;
|
|
|
|
.ai-list__content--right-wrapper {
|
|
width: 100%;
|
|
}
|
|
}
|
|
:deep( .is-current>.el-tree-node__content){
|
|
width: 100%!important;
|
|
padding-right: 16px!important;
|
|
}
|
|
}
|
|
</style>
|