593 lines
19 KiB
Vue
593 lines
19 KiB
Vue
<template>
|
|
<section class="AppMeetingChinaunion">
|
|
<ai-list v-if="showList">
|
|
<ai-title title="三会一课" isShowBottomBorder slot="title">
|
|
<template #rightBtn>
|
|
<ai-party :instance="instance" v-model="partyId" :topOrgId="topOrgId" :name.sync="partyOrgLabel"
|
|
style="display:inline-block" @origin="changeParty" customClicker
|
|
url="/app/partyOrganization/queryAllChildren">
|
|
<el-input size="small" v-model="partyOrgLabel" readonly placeholder="选择党组织">
|
|
<el-row slot="append" type="flex" class="partyPicker">
|
|
<i class="iconfont icondangyuan"/>
|
|
<div v-text="`切换党组织`"/>
|
|
</el-row>
|
|
</el-input>
|
|
</ai-party>
|
|
<el-button icon="iconfont iconNav_DataCenter" size="small" type="primary" @click="showStatistics()">会议统计
|
|
</el-button>
|
|
<!-- <el-button icon="iconfont iconSetting" size="small" type="primary" @click="toMeetSet()">设置</el-button> -->
|
|
</template>
|
|
</ai-title>
|
|
<template #content>
|
|
<ai-search-bar>
|
|
<template #left>
|
|
<el-select size="small" v-model="search.meetingClassification" placeholder="会议分类"
|
|
@change="$forceUpdate(),page.current=1,getAppThreeMeetingInfo()" clearable>
|
|
<el-option v-for="(op,j) in dict.getDict('meetingClassification')" :key="j" :label="op.dictName"
|
|
:value="op.dictValue"/>
|
|
</el-select>
|
|
<el-select size="small" v-model="search.postStatus" placeholder="发布状态"
|
|
@change="$forceUpdate(),page.current=1,getAppThreeMeetingInfo()" clearable>
|
|
<el-option v-for="(op,j) in dict.getDict('postStatus')" :key="j" :label="op.dictName"
|
|
:value="op.dictValue"/>
|
|
</el-select>
|
|
<ai-search label="学习日期">
|
|
<el-date-picker size="small" placeholder="请选择" type="daterange"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
style="width: 258px;"
|
|
value-format="yyyy-MM-dd"
|
|
v-model="stuTime"
|
|
@change="page.current=1,getAppThreeMeetingInfo()"/>
|
|
</ai-search>
|
|
</template>
|
|
<template #right>
|
|
<el-input size="small" v-model="search.meetingAgenda" placeholder="会议标题/创建人"
|
|
suffix-icon="iconfont iconSearch" v-throttle="() => {page.current = 1, getAppThreeMeetingInfo()}" clearable @clear="search.meetingAgenda = '', page.current=1,getAppThreeMeetingInfo()"/>
|
|
</template>
|
|
</ai-search-bar>
|
|
<ai-search-bar>
|
|
<template #left>
|
|
<el-button type="primary" icon="iconfont iconAdd" v-if="$permissions('app_appthreemeetinginfo_edit')"
|
|
@click="add">添加
|
|
</el-button>
|
|
<!-- <el-button icon="iconfont iconAdd" v-if="$permissions('app_appthreemeetinginfo_makeup')"
|
|
@click="supplement">补录
|
|
</el-button> -->
|
|
</template>
|
|
</ai-search-bar>
|
|
<el-table ref="multipleTable" :data="tableData" style="margin-top:16px;"
|
|
header-cell-class-name="table-header"
|
|
tooltip-effect="dark" row-class-name="table-row" cell-class-name="table-cell">
|
|
<el-table-column prop="meetingAgenda" label="会议名称" show-overflow-tooltip align="center">
|
|
<div slot-scope="{row}">
|
|
{{ row.meetingAgenda || "-" }}
|
|
</div>
|
|
</el-table-column>
|
|
<el-table-column prop="meetingClassification" label="会议分类" align="center" show-overflow-tooltip>
|
|
<div slot-scope="{row}" v-if="row.meetingClassification.length">
|
|
<span v-for="(i,index) in dict.getDict('meetingClassification')" :key="index">
|
|
<span v-for="(b,indexs) in row.meetingClassification" :key="indexs" v-if="i.dictValue == b">
|
|
{{ i.dictName }}
|
|
<span v-if="indexs < (row.meetingClassification.length - 1) ">,</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div v-else>-</div>
|
|
</el-table-column>
|
|
<el-table-column prop="organizationName" label="所属组织" align="center">
|
|
<template slot-scope="scope">
|
|
<el-tooltip effect="light" placement="top" content="请进入详情查看更多组织"
|
|
v-if="scope.row.organizationName.length > 1">
|
|
<span>{{ scope.row.organizationName[0] }}...</span>
|
|
</el-tooltip>
|
|
<span v-else>{{ scope.row.organizationName[0] || '-' }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="startTime" label="开始时间" align="center">
|
|
<div slot-scope="{row}"> {{ row.startTime || '-' }}</div>
|
|
</el-table-column>
|
|
<el-table-column prop="endTime" label="结束时间" align="center">
|
|
<div slot-scope="{row}">
|
|
{{ row.endTime || '-' }}
|
|
</div>
|
|
</el-table-column>
|
|
<el-table-column prop="createUserName" label="创建人" align="center">
|
|
<div slot-scope="{row}">
|
|
{{ row.createUserName || "-" }}
|
|
</div>
|
|
</el-table-column>
|
|
<el-table-column prop="postStatus" label="发布状态" align="center">
|
|
<div slot-scope="{row}" :style="{color:color[row.postStatus]}">
|
|
{{ dict.getLabel('postStatus', row.postStatus) || '-' }}
|
|
</div>
|
|
</el-table-column>
|
|
<el-table-column prop="operate" label="操作" align="center" width="160px" fixed="right">
|
|
<template slot-scope="{ row }">
|
|
<div class="table-options">
|
|
<el-button type="text" title="编辑" @click="gotoDetail(row)" v-if="row.postStatus=='0'">编辑</el-button>
|
|
<el-button type="text" title="详情" @click="gotoDetail(row)" v-else>详情</el-button>
|
|
<el-button type="text" title="删除" @click="delMeeting(row)">删除</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<div slot="empty" class="no-data" style="height:160px;"/>
|
|
</el-table>
|
|
<div class="pagination">
|
|
<el-pagination background
|
|
:current-page="page.current"
|
|
@current-change="handleCurrentChange"
|
|
@size-change="handleSizeChange"
|
|
layout="total,prev, pager, next,sizes, jumper"
|
|
:total="page.total"/>
|
|
</div>
|
|
</template>
|
|
</ai-list>
|
|
<div v-if="!$permissions('app_appthreemeetinginfo_detail')" class="no-permission"
|
|
style="display: flex;flex-direction:column;align-items: center;justify-content: center;height: calc(100% - 148px);font-size: 14px;">
|
|
<div style="height: 170px;"></div>
|
|
<p>暂无使用该应用的权限</p>
|
|
</div>
|
|
<el-dialog :visible.sync="dialogTableVisible" title="会议数据统计" width="520px" class="mask label-110"
|
|
:close-on-click-modal='false'>
|
|
<div class="content input-240">
|
|
<div class="flex">
|
|
<el-date-picker
|
|
v-model="searchYear"
|
|
type="year"
|
|
size="small"
|
|
style="width: 200px; margin-right: 10px;"
|
|
value-format="yyyy"
|
|
@change="getMeetStatistics"
|
|
placeholder="选择年份">
|
|
</el-date-picker>
|
|
<el-select style="width: 200px" v-model="searchMonth" placeholder="全部" size="small" clearable
|
|
class="timeSelect"
|
|
@change="getMeetStatistics">
|
|
<el-option v-for="(op,j) in dict.getDict('monthList')" :key="j" :label="op.dictName"
|
|
:value="op.dictValue"/>
|
|
</el-select>
|
|
</div>
|
|
<ul class="totalTitle">
|
|
<li v-for="(item,index) in totalTitleList" :key="index">
|
|
<span>{{ item.num }}</span>
|
|
<span>{{ item.title }}</span>
|
|
</li>
|
|
</ul>
|
|
<el-row type="flex" justify="space-between" style="margin-top: 40px;">
|
|
<el-col style="width: 160px;height: 160px;">
|
|
<pieChart :chart-data="pieChart" :colorList="colorList"></pieChart>
|
|
</el-col>
|
|
<el-col class="pieList">
|
|
<ul>
|
|
<li v-for="(item,index) in pieData.dataStatistics" :key="index">
|
|
<div class="colorWrap">
|
|
<div :style="{background:colorList[index]}"></div>
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
<span class="num">{{ item.v1 }}</span>
|
|
</li>
|
|
</ul>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="operation">
|
|
<el-button class="delete-btn" @click="dialogTableVisible = false" size="mini">关闭</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<appThreeMeetingUser :instance="instance" :dict="dict" v-if="showMeetingUser" :meetingId="meetingId"
|
|
:meetingStatus="meetingStatus"
|
|
:detail="detail"/>
|
|
<add :instance="instance" :dict="dict" :detail="detail" v-if="showAdd"/>
|
|
<meetingDetail :instance="instance" :dict="dict" :detail="detail" v-if="showDetail"/>
|
|
<meetingSet :instance="instance" :dict="dict" :partyId="partyId" :partyName="search.partyName"
|
|
v-if="showSet"/>
|
|
<supplement :instance="instance" :dict="dict" v-if="showSupplement"/>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from "vuex";
|
|
import moment from "dayjs";
|
|
import appThreeMeetingUser from "./components/appThreeMeetingUser";
|
|
import meetingSet from "./components/meetingSet";
|
|
import supplement from "./components/supplement";
|
|
import pieChart from "./components/pieChart";
|
|
import add from "./components/add";
|
|
import meetingDetail from "./components/meetingDetail";
|
|
|
|
export default {
|
|
name: "AppMeetingChinaunion",
|
|
label: "三会一课",
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
permissions: Function
|
|
},
|
|
components: {appThreeMeetingUser, meetingSet, supplement, pieChart, add, meetingDetail},
|
|
data() {
|
|
return {
|
|
searchTime: '',
|
|
tableData: [],
|
|
search: {
|
|
meetingAgenda: "",
|
|
meetingClassification: "",
|
|
postStatus: "",
|
|
partyName: "",
|
|
searchParamYM: '',
|
|
},
|
|
partyId: '',
|
|
page: {
|
|
current: 1,
|
|
size: 10,
|
|
total: 0,
|
|
},
|
|
detail: {},
|
|
showSet: false, //设置
|
|
showMeetingUser: false, //统计
|
|
showSupplement: false, //补录
|
|
showDetail: false, //详情
|
|
showAdd: false, //添加
|
|
showList: true, //列表
|
|
meetingId: "",//会议id
|
|
meetingStatus: '', //会议状态
|
|
partyType: '', //2表示支部可进支部党组织设置
|
|
dialogTableVisible: false,
|
|
topOrgId: '',
|
|
stuTime: "",
|
|
searchMonth: "",
|
|
searchYear: String(new Date().getFullYear()),
|
|
colorList: ["#FF4466", "#37A62B", "#4B87FE", "#FFAA44"],
|
|
totalTitleList: [],
|
|
pieData: {},
|
|
pieChart: [],
|
|
partyOrgLabel: ""
|
|
}
|
|
},
|
|
methods: {
|
|
add() {
|
|
this.detail = {};
|
|
this.showList = false;
|
|
this.showAdd = true;
|
|
},
|
|
supplement() {
|
|
this.showList = false;
|
|
this.showSupplement = true;
|
|
},
|
|
showStatistics() {
|
|
if (this.partyType != '2') {
|
|
return this.$message.error("所属组织不是支部党组织");
|
|
}
|
|
this.dialogTableVisible = true
|
|
this.getMeetStatistics();
|
|
},
|
|
/**
|
|
* 获取统计
|
|
* */
|
|
getMeetStatistics() {
|
|
this.instance.post(`/app/appthreemeetinginfo/statistics-branch-Per-month?month=${this.searchMonth}&year=${this.searchYear || ''}&partyOrgId=${this.partyId}`).then(res => {
|
|
if (res && res.data) {
|
|
const {type0, type1, type2, type3, total} = res.data;
|
|
let chartData = [];
|
|
this.totalTitleList = [
|
|
{title: "共计会议", num: total},
|
|
{title: "支部党员大会", num: type0},
|
|
{title: "支部委员会", num: type1},
|
|
{title: "党小组会", num: type2},
|
|
{title: "党课", num: type3}
|
|
]
|
|
res.data.dataStatistics.map(e => {
|
|
chartData.push({value: e.v1, name: e.name})
|
|
})
|
|
this.pieChart = chartData;
|
|
this.pieData = res.data;
|
|
}
|
|
})
|
|
},
|
|
/**
|
|
* 切换党组织
|
|
* @param e
|
|
*/
|
|
changeParty(e) {
|
|
if (!e.length) return
|
|
this.partyType = e[0].partyType
|
|
this.page.current = 1
|
|
this.search.partyName = e[0].name
|
|
this.getAppThreeMeetingInfo()
|
|
},
|
|
delMeeting(item) {
|
|
this.$confirm(`是否要删除会议?`, {
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.instance.post(`/app/appthreemeetinginfo/delete?ids=${item.id}`, null, {}).then(res => {
|
|
if (res && res.code == 0) {
|
|
this.$message.success("删除成功!")
|
|
this.getAppThreeMeetingInfo()
|
|
}
|
|
})
|
|
})
|
|
},
|
|
|
|
//分页
|
|
handleCurrentChange(val) {
|
|
this.page.current = val;
|
|
this.getAppThreeMeetingInfo();
|
|
},
|
|
//分页
|
|
handleSizeChange(val) {
|
|
this.page.size = val
|
|
this.page.current = 1
|
|
this.getAppThreeMeetingInfo()
|
|
},
|
|
|
|
//重置
|
|
resetSearch() {
|
|
this.page.current = 1
|
|
this.page.size = 10
|
|
this.searchTime = ''
|
|
this.stuTime = ""
|
|
this.search.meetingClassification = "";
|
|
this.search.postStatus = "";
|
|
this.search.meetingAgenda = "";
|
|
this.$nextTick(() => {
|
|
this.getAppThreeMeetingInfo()
|
|
})
|
|
},
|
|
//列表
|
|
getAppThreeMeetingInfo() {
|
|
const date = this.stuTime ? {
|
|
startTimeStart: this.stuTime[0],
|
|
startTimeEnd: this.stuTime[1]
|
|
} : {}
|
|
this.instance.post("/app/appthreemeetinginfo/list", null, {
|
|
params: {
|
|
...this.search,
|
|
...this.page,
|
|
...date,
|
|
organizationId: this.partyId,
|
|
}
|
|
}).then(res => {
|
|
if (res && res.code == 0) {
|
|
if (res.data.records.length) {
|
|
res.data.records.map((item) => {
|
|
item.organizationName = item.organizationName.split('/')
|
|
})
|
|
}
|
|
this.tableData = res.data.records;
|
|
this.page.total = res.data.total;
|
|
}
|
|
})
|
|
},
|
|
|
|
//返回
|
|
goBack() {
|
|
this.showSet = false;
|
|
this.showMeetingUser = false;
|
|
this.showSupplement = false;
|
|
this.showDetail = false;
|
|
this.showAdd = false;
|
|
this.showList = true;
|
|
this.getAppThreeMeetingInfo()
|
|
},
|
|
//跳转详请
|
|
gotoDetail(row) {
|
|
if (row.postStatus == '0') {
|
|
this.detail = row;
|
|
this.$nextTick(() => {
|
|
this.showSet = false;
|
|
this.showList = false;
|
|
this.showDetail = false;
|
|
this.showAdd = true;
|
|
})
|
|
} else {
|
|
this.detail = row;
|
|
|
|
this.$nextTick(() => {
|
|
this.showSet = false;
|
|
this.showList = false;
|
|
this.showDetail = true;
|
|
})
|
|
}
|
|
// this.detail = row;
|
|
// this.showList = false;
|
|
// this.showDetail = true;
|
|
},
|
|
/**
|
|
* 设置
|
|
* @returns {ElMessageComponent}
|
|
*/
|
|
toMeetSet() {
|
|
if (this.partyType != '2') {
|
|
return this.$message.error("所属组织不是支部党组织");
|
|
}
|
|
this.showList = false;
|
|
this.showDetail = false
|
|
this.showSet = true;
|
|
},
|
|
},
|
|
created() {
|
|
this.topOrgId = this.user.info.organizationId;
|
|
this.partyId = this.user.info.organizationId;
|
|
this.search.partyName = this.user.info.organizationName;
|
|
this.dict.load('meetingClassification', 'monthList', "meetingChangeYear", "postStatus").then(() => this.resetSearch());
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
color() {
|
|
return ["#A722FF", "#FF8822", "#2266FF", "#999999"]
|
|
},
|
|
},
|
|
filters: {
|
|
formatTime(time) {
|
|
return moment(time).format("YYYY-MM-DD HH:mm");
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.AppMeetingChinaunion {
|
|
height: 100%;
|
|
|
|
::v-deep .ai-partyorg {
|
|
.el-dialog__header, .el-dialog__footer {
|
|
line-height: 1 !important;
|
|
}
|
|
|
|
.el-input-group__append {
|
|
background: rgba(245, 245, 245, 1);
|
|
}
|
|
|
|
.el-input__inner {
|
|
direction: rtl;
|
|
}
|
|
|
|
.partyPicker {
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.pieList {
|
|
width: 215px !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-top: 30px;
|
|
|
|
ul {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
li {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
|
|
.colorWrap {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
div {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
span {
|
|
font-size: 14px;
|
|
color: #666666;
|
|
line-height: 20px;
|
|
margin-left: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.num {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
::v-deep .el-button [class*=iconfont] + span {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.timeSelect {
|
|
.el-input__inner {
|
|
width: 120px !important;
|
|
}
|
|
}
|
|
|
|
.operation {
|
|
overflow: hidden;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 64px;
|
|
line-height: 64px;
|
|
display: flex;
|
|
z-index: 1000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f3f6f9;
|
|
box-shadow: inset 0 1px 0 0 #eeeeee;
|
|
|
|
button {
|
|
width: 92px;
|
|
height: 32px;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.delete-btn {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
.mask {
|
|
.content {
|
|
padding-bottom: 100px;
|
|
}
|
|
|
|
.el-table {
|
|
border: 1px solid #D8E0E8;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
p {
|
|
line-height: 28px;
|
|
text-align: right;
|
|
width: 88px;
|
|
float: right;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.el-dialog__header {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.el-table thead.is-group th {
|
|
background: #fff;
|
|
}
|
|
|
|
.totalTitle {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 16px 0;
|
|
border-bottom: 1px solid rgb(238, 238, 238);
|
|
|
|
li {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
span:nth-child(1) {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #E03416;
|
|
line-height: 28px;
|
|
}
|
|
|
|
span:nth-child(2) {
|
|
font-size: 12px;
|
|
color: #666666;
|
|
line-height: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|
|
|
|
|