Files
2026-09-20 15:46:34 +08:00

456 lines
21 KiB
HTML

<!--#
layout("/layouts/platform.html"){
#-->
<style>
.w-e-text-container {
height: 200px !important;
}
input[type="file"] {
display: none
}
.el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
width: 10%;
}
.el_tab {
margin-top: 6px;
}
.el-table-container {
padding-left: 0;
}
.el-table-container {
padding-top: 6px;
padding-right: 0px;
}
.el-tabs--card>.el-tabs__header .el-tabs__nav {
border: none;
}
.el-tabs__header {
margin: 0 0 6px;
background-color: white;
}
.el-tabs--card>.el-tabs__header .el-tabs__item {
border-bottom: none;
font-weight: bold;
font-size: 15px;
}
.el-descriptions-item__cell {
text-align: center !important;
}
</style>
<div id="app" v-cloak>
<guava>
<transition name="el-zoom-in-center">
<div v-show="v=='index'" style="width: 100%;height: 100%;padding-right: 10px">
<el-card shadow="never">
<div class="btn-group tool-button mt5">
<el-input placeholder="请输入内容" clearable v-model="pageForm.searchKeyword"
@keyup.enter.native="doSearch">
<el-select v-model="pageForm.searchName" slot="prepend" placeholder="查询类型"
style="width: 120px;">
<el-option label="协会名称" value="club.name"></el-option>
</el-select>
</el-input>
</div>
<div class="btn-group tool-button mt5">
<el-button type="primary" icon="el-icon-search" @click="doSearch"></el-button>
</div>
</el-card>
<el-tabs class="el-table-container el_tab" v-model="activeName" stretch @tab-click="handleClick" type="card">
<el-tab-pane :label="'可加入协会' + noJoinCount" name="false">
</el-tab-pane>
<el-tab-pane :label="'已加入协会' + hasJoinCount" name="true">
</el-tab-pane>
</el-tabs>
<el-row class="el-table-container" style="padding-top: 0">
<el-table :data="tableData" style="width: 100%" row-key="id" @sort-change="pageOrder">
<el-table-column align="center" header-align="center" label="序号" type="index">
<template scope="scope">
<span>{{scope.$index+(pageForm.pageNumber - 1) * pageForm.pageSize + 1}} </span>
</template>
</el-table-column>
<el-table-column align="center" header-align="center" label="协会名称" width="250px"
prop="name"></el-table-column>
<el-table-column align="center" sortable header-align="center" label="协会编码" width="100px"
show-overflow-tooltip
prop="code"></el-table-column>
<el-table-column align="center" sortable header-align="center" label="联系人" show-overflow-tooltip
prop="fzrname"></el-table-column>
<el-table-column align="center" header-align="center" label="联系人电话" show-overflow-tooltip
prop="fzr_mobile"></el-table-column>
<el-table-column align="center" sortable header-align="center" label="联系人单位" show-overflow-tooltip
prop="fzr_unit_name"></el-table-column>
<el-table-column align="center" sortable header-align="center" label="限定人数"
show-overflow-tooltip
prop="number"></el-table-column>
<el-table-column align="center" sortable header-align="center" label="当前人数"
show-overflow-tooltip
prop="cynum"></el-table-column>
<el-table-column align="center" header-align="center" label="在职人数" show-overflow-tooltip
prop="worknum"></el-table-column>
<el-table-column align="center" header-align="center" label="退休人数" show-overflow-tooltip
prop="outnum"></el-table-column>
<el-table-column align="center" v-if="activeName=='true'" header-align="center" label="入会状态" sortable>
<template slot-scope="scope">
<el-tag v-if="scope.row.status==1" type="primary">待协会审核</el-tag>
<el-tag v-if="scope.row.status==2" type="danger">协会拒绝</el-tag>
<el-tag v-if="scope.row.status==3" type="primary">待校工会审核</el-tag>
<el-tag v-if="scope.row.status==4" type="danger">校工会拒绝</el-tag>
<el-tag v-if="scope.row.status==5" type="success">审核通过</el-tag>
</template>
</el-table-column>
<el-table-column align="center" v-if="activeName=='true'" header-align="center" label="退会状态" sortable>
<template slot-scope="scope">
<el-tag type="primary" v-if="scope.row.exitstatus==1">待社团审核</el-tag>
<el-tag type="danger" v-if="scope.row.exitstatus==2">社团不通过</el-tag>
<el-tag type="primary" v-if="scope.row.exitstatus==3">待校工会审核</el-tag>
<el-tag type="danger" v-if="scope.row.exitstatus==4">校工会不通过</el-tag>
<el-tag type="success" v-if="scope.row.exitstatus==5">审核通过</el-tag>
<el-tag type="success" v-if="!scope.row.exitstatus">暂无</el-tag>
</template>
</el-table-column>
<el-table-column align="center" header-align="center" label="操作" fixed="right" width="250px">
<template slot-scope="scope">
<el-button size="mini" @click="openDetail(scope.row.id)">查看</el-button>
<el-button size="mini" v-if="activeName=='false'" type="primary" @click="doSubmit(scope.row)">
申请加入
</el-button>
<el-button size="mini" v-if="activeName=='true'&&scope.row.status==1" type="danger"
@click="doRevocation(scope.row.id)">
撤销加入申请
</el-button>
<el-button size="mini" v-if="activeName=='true' && scope.row.status==5 && !scope.row.exitstatus" type="primary" @click="exitClub(scope.row)">
申请退会
</el-button>
<el-button size="mini" v-if="activeName=='true' && scope.row.status!=1 && scope.row.exitstatus==1"
type="danger"
@click="cancelExitClub(scope.row.id)">
撤销退会申请
</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row class="el-pagination-container">
<el-pagination
@size-change="pageSizeChange"
@current-change="pageNumberChange"
:current-page="pageForm.pageNumber"
:page-sizes="[10, 20, 30, 50]"
:page-size="pageForm.pageSize"
layout="total, sizes, prev, pager, next"
:total="pageForm.totalCount">
</el-pagination>
</el-row>
</div>
</transition>
<transition name="el-zoom-in-center">
<div v-show="v=='view'" style="width: 100%;padding-right: 10px">
<el-card class="box-card v-box" shadow="never">
<div slot="header" class="clearfix">
<el-button icon="el-icon-back" type="text" @click="v='index'" style="font-size: 18px">返回
</el-button>
</div>
<div style="padding: 0 10%;height: calc(100vh - 150px);overflow: auto">
<vi-title title="协会信息"></vi-title>
<el-descriptions class="margin-top" title="" :column="3" border>
<el-descriptions-item span="3">
<template slot="label">协会名称</template>
<div v-html="detailData.name"></div>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">协会联系人</template>
{{detailData.fzrname}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">所在单位</template>
{{detailData.fzr_unit_name}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">联系人电话</template>
{{detailData.fzr_mobile}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">联系人邮箱</template>
{{detailData.fzr_email}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">成立时间</template>
{{detailData.create_time}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">会费标准</template>
{{detailData.dues_standard}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">介绍链接</template>
<span style="cursor: pointer; color: #236eb4"
@click="window.open(detailData.introduce_href.indexOf('http') !== -1 ? detailData.introduce_href : 'https://' + detailData.introduce_href)">{{detailData.introduce_href}}</span>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">限定人数</template>
{{detailData.number}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">当前人数</template>
{{detailData.cynum}}
</el-descriptions-item>
<el-descriptions-item span="3">
<template slot="label">协会介绍</template>
<div class="text-left" v-html="detailData.stjs"></div>
</el-descriptions-item>
<el-descriptions-item span="3">
<template slot="label">协会章程</template>
<div class="text-left" v-html="detailData.stzc"></div>
</el-descriptions-item>
</el-descriptions>
</div>
</el-card>
</div>
</transition>
</guava>
</div>
<script>
const vue = new Vue({
el: '#app',
data() {
return {
v: 'index',
detailData: {},
activeNames: [],
activeName: 'false',
addDialogVisible: false,
tabloading: false,
viewDialogVisible: false,
formData: {},
tableData: [],
pageForm: {
isjr: false,
searchName: "club.name",
searchKeyword: "",
pageNumber: 1,
pageSize: 10,
totalCount: 0,
pageOrderName: "",
pageOrderBy: ""
},
formRules: {
users: [{required: true, message: '必选', trigger: ['blur', 'change']}],
isjf: [{required: true, message: '必选', trigger: ['blur', 'change']}],
},
subDis: false,
hasJoinCount: 0,
noJoinCount: 0,
}
},
methods: {
exitClub(row) {
this.$confirm('您确定要申请退会吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
callback: async (a, b) => {
if ("confirm" === a) {//确认后再执行
const resp = await $.post('/platform/sys/club/sq/exitClub', {id: row.id})
if (resp.code === 0) {
await this.getCount()
this.pageData()
this.$message.success(resp.msg)
} else {
this.$message.warning(resp.msg)
}
}
}
});
},
cancelExitClub(id) {
this.$confirm('您确定要撤销申请吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
callback: async (a, b) => {
if ("confirm" === a) {//确认后再执行
const resp = await $.post('/platform/sys/club/sq/cancelExitClub', {id: id})
if (resp.code === 0) {
await this.getCount()
this.pageData()
this.$message.success(resp.msg)
} else {
this.$message.warning(resp.msg)
}
}
}
});
},
doRevocation(id) {
this.$confirm('是否撤销申请?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
callback: (a, b) => {
if ("confirm" === a) {//确认后再执行
$.post(base + "/platform/sys/club/sq/revocation", {id}, (data) => {
if (data.code === 0) {
this.$message({
message: '撤销申请成功!',
type: 'success'
});
this.pageData();
} else {
this.$message({
message: data.msg,
type: 'error'
});
}
}, "json");
}
}
});
},
async doSubmit(row) {
//当前人数+待审核人数
const num = row.cynum + row.approvalnum
if (num >= row.number) {
const str = '抱歉,该协会限定人数<span style="color: red">' + row.number + '</span>人,' +
'当前人数<span style="color: red">' + row.cynum + '</span>人,' +
'待审核人数<span style="color: red">' + row.approvalnum + '</span>人,名额不足!'
this.$alert(str, '提示', {
dangerouslyUseHTMLString: true,
type: 'warning'
});
return;
}
const {code, data} = await $.post('/platform/sys/club/sq/getInClubByCurUser')
let str = '您还没有参加协会'
if (data && data.length > 0) {
str = '您已经加入了'
data.forEach((item) => {
str += '【' + item.name + '】'
})
}
str += ',请确认是否申请加入【' + row.name + '】?'
this.$confirm(str, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
callback: (a, b) => {
if ("confirm" === a) {//确认后再执行
const id = row.id
$.post(base + "/platform/sys/club/sq/submit", {id}, (data) => {
if (data.code === 0) {
this.$message({
message: '提交申请成功!',
type: 'success'
});
this.pageData();
} else {
this.$message({
message: data.msg,
type: 'error'
});
}
}, "json");
}
}
});
},
openDetail(id) {
$.get(base + "/platform/sys/club/mange/findOne", {id}, (data) => {
if (data.code === 0) {
this.detailData = data.data
this.activeNames = ['1']
this.v = 'view'
this.viewDialogVisible = true
} else {
this.$message({
message: data.msg,
type: 'error'
});
}
}, "json");
},
handleClick(tab, event) {
this.pageForm.searchKeyword = ''
this.pageForm.isjr = tab.name
this.tableData = []
this.doSearch()
},
doSearch() {
this.tabKey = new Date().getTime()
this.pageForm.pageNumber = 1
this.pageData()
},
pageOrder(column) {//按字段排序
this.pageForm.pageOrderName = column.prop;
this.pageForm.pageOrderBy = column.order;
this.pageData();
},
pageNumberChange(val) {//页码更新操作
this.pageForm.pageNumber = val;
this.pageData();
},
pageSizeChange(val) {//分页大小更新操作
this.pageForm.pageSize = val;
this.pageData();
},
pageData() {//加载分页数据
sublime.showLoadingbar();//显示loading
this.tabloading = true
$.post(base + "/platform/sys/club/sq/pageData", this.pageForm, (data) => {
sublime.closeLoadingbar();//关闭loading
this.tabloading = false
if (data.code === 0) {
this.tableData = data.data.list;
this.pageForm.totalCount = data.data.totalCount;
} else {
this.$message({
message: data.msg,
type: 'error'
});
}
}, "json");
},
async getCount() {
const resp = await $.post('/platform/sys/club/sq/getCount')
this.hasJoinCount = resp.data.hasJoinCount
this.noJoinCount = resp.data.noJoinCount
}
},
async created() {
await this.getCount()
this.pageData();
}
})
</script>
<!--#
}
#-->