初始化
This commit is contained in:
aixianling
232
packages/wechat/AppReportServe/components/ActiveAdd.vue
Normal file
232
packages/wechat/AppReportServe/components/ActiveAdd.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<ai-detail class="ActiveAdd">
|
||||
<!-- 返回按钮 -->
|
||||
<template #title>
|
||||
<ai-title title="发起活动" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
|
||||
</template>
|
||||
|
||||
<!-- 内容 -->
|
||||
<template #content>
|
||||
<el-form class="el-form" :model="formData" ref="ruleForm" :rules="formRules" label-width="100px" label-suffix="：" align-items="center">
|
||||
<ai-card title="活动信息">
|
||||
<div slot="content" class="ai-content">
|
||||
<!-- 发布地区 -->
|
||||
<el-form-item label="发布地区" prop="areaId" class="line">
|
||||
<ai-area-select always-show clearable :instance="instance" v-model="formData.areaId" :areaLevel="5" size="small" @fullname="(name) => (areaName = name)" :disabled-level="user.info.areaList.length"> </ai-area-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 标题 -->
|
||||
<el-form-item label="标题" prop="title" class="line">
|
||||
<el-input placeholder="请输入..." v-model="formData.title" show-word-limit maxlength="60" size="small" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div class="float">
|
||||
<!-- 活动时间 -->
|
||||
<el-form-item label="活动时间" prop="beginTime">
|
||||
<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formData.beginTime" type="datetime" placeholder="选择日期时间" size="small"> </el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 至 -->
|
||||
<el-form-item label="至" prop="endTime">
|
||||
<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formData.endTime" type="datetime" placeholder="选择日期" size="small"> </el-date-picker>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 活动地点 -->
|
||||
<el-form-item label="活动地点" prop="address" class="line">
|
||||
<el-input placeholder="请输入..." v-model="formData.address" show-word-limit maxlength="20" size="small" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 参与名额 -->
|
||||
<el-form-item label="参与名额" prop="total" class="width">
|
||||
<el-input placeholder="请输入..." v-model="formData.total" size="small" clearable oninput="value=value.replace(/[^\d]/g,'')"></el-input>
|
||||
<span class="text">"0"表示不限制活动报名人数</span>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 截止日期 -->
|
||||
<el-form-item label="截止日期" prop="stopSignupTime" class="line">
|
||||
<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formData.stopSignupTime" type="datetime" placeholder="选择日期" size="small"> </el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<div class="float">
|
||||
<!-- 联系人 -->
|
||||
<el-form-item label="联系人" prop="contactPerson" class="width">
|
||||
<el-input placeholder="请输入..." v-model="formData.contactPerson" size="small" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 联系电话 -->
|
||||
<el-form-item label="联系电话" prop="contactPhone" class="phonenumber">
|
||||
<el-input placeholder="联系电话..." v-model.number="formData.contactPhone" size="small" clearable></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 活动介绍 -->
|
||||
<el-form-item label="活动介绍" prop="content" class="line">
|
||||
<ai-editor v-model="formData.content" :instance="instance" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 略缩图 -->
|
||||
<el-form-item label="略缩图" prop="imgUrl" class="line">
|
||||
<ai-uploader :isShowTip="true" :instance="instance" v-model="formData.imgUrl" :limit="1" :cropOps="cropOps" is-crop>
|
||||
<template slot="tips">
|
||||
<p>最多上传1张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
|
||||
<p>图片比例：1.6：1</p>
|
||||
</template>
|
||||
</ai-uploader>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- / -->
|
||||
</ai-card>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<template #footer>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="confirm('ruleForm')">提交</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'ActiveAdd',
|
||||
components: {},
|
||||
props: { instance: Function, dict: Object, params: Object, disabledLevel: Number },
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
areaId: '',
|
||||
title: '',
|
||||
beginTime: '',
|
||||
endTime: '',
|
||||
address: '',
|
||||
stopSignupTime: '',
|
||||
total: '',
|
||||
contactPerson: '',
|
||||
contactPhone: '',
|
||||
content: '',
|
||||
imgUrl: [],
|
||||
},
|
||||
id: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
isEdit() {
|
||||
return !!this.params.id
|
||||
},
|
||||
|
||||
cropOps() {
|
||||
return {
|
||||
width: '336px',
|
||||
height: '210px',
|
||||
}
|
||||
},
|
||||
|
||||
formRules() {
|
||||
return {
|
||||
areaId: [
|
||||
{ required: true, message: '请选择发布地区', trigger: 'change' },
|
||||
{
|
||||
validator: (r, v, cb) => (/0{3}$/g.test(v) ? cb('请选择到村') : cb()),
|
||||
},
|
||||
],
|
||||
title: [{ required: true, message: '请输入标题', trigger: 'change' }],
|
||||
beginTime: [{ required: true, message: '请选择活动时间', trigger: 'change' }],
|
||||
endTime: [{ required: true, message: '请选择至', trigger: 'change' }],
|
||||
address: [{ required: true, message: '请输入活动地点', trigger: 'change' }],
|
||||
stopSignupTime: [{ required: true, message: '请选择截止日期', trigger: 'change' }],
|
||||
total: [{ required: true, message: '请输入参与名额', trigger: 'change' }],
|
||||
contactPerson: [{ required: true, message: '请输入联系人', trigger: 'change' }],
|
||||
contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'change' }],
|
||||
content: [{ required: true, message: '请输入活动介绍', trigger: 'change' }],
|
||||
imgUrl: [{ required: true, message: '请上传图片', trigger: 'change' }],
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
this.formData.areaId = this.user.info.areaId
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 确定新增
|
||||
confirm() {
|
||||
this.$refs['ruleForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.instance
|
||||
.post(`/app/apppartyreport/addOrUpdate`, {
|
||||
areaId: this.formData.areaId,
|
||||
title: this.formData.title,
|
||||
beginTime: this.formData.beginTime,
|
||||
endTime: this.formData.endTime,
|
||||
address: this.formData.address,
|
||||
|
||||
stopSignupTime: this.formData.stopSignupTime,
|
||||
total: this.formData.total,
|
||||
contactPerson: this.formData.contactPerson,
|
||||
contactPhone: this.formData.contactPhone,
|
||||
content: this.formData.content,
|
||||
imgUrl: this.formData.imgUrl[0].url,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('提交成功')
|
||||
setTimeout(() => {
|
||||
this.cancel(true)
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 返回按钮
|
||||
cancel(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: isRefresh ? true : false,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ActiveAdd {
|
||||
.el-form {
|
||||
.ai-card {
|
||||
.ai-content {
|
||||
.width {
|
||||
.text {
|
||||
margin-left: 50px;
|
||||
color: #adadad;
|
||||
}
|
||||
.el-form-item__content {
|
||||
.el-input {
|
||||
width: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.float {
|
||||
.width {
|
||||
.el-form-item__content {
|
||||
.el-input {
|
||||
width: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
.phonenumber {
|
||||
margin-left: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
391
packages/wechat/AppReportServe/components/ActiveDetail.vue
Normal file
391
packages/wechat/AppReportServe/components/ActiveDetail.vue
Normal file
@@ -0,0 +1,391 @@
|
||||
<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>
|
||||
247
packages/wechat/AppReportServe/components/ActiveEdit.vue
Normal file
247
packages/wechat/AppReportServe/components/ActiveEdit.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<ai-detail class="ActiveAdd">
|
||||
<!-- 返回按钮 -->
|
||||
<template #title>
|
||||
<ai-title title="发起活动" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
|
||||
</template>
|
||||
|
||||
<!-- 内容 -->
|
||||
<template #content>
|
||||
<el-form class="el-form" :model="formData" ref="ruleForm" :rules="formRules" label-width="100px" label-suffix="：" align-items="center">
|
||||
<ai-card title="活动信息">
|
||||
<div slot="content" class="ai-content">
|
||||
<!-- 发布地区 -->
|
||||
<el-form-item label="发布地区" prop="areaId" class="line">
|
||||
<ai-area-select always-show clearable :instance="instance" v-model="formData.areaId" :areaLevel="5" size="small" @fullname="(name) => (areaName = name)" :disabled-level="user.info.areaList.length"> </ai-area-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 标题 -->
|
||||
<el-form-item label="标题" prop="title" class="line">
|
||||
<el-input placeholder="请输入..." v-model="formData.title" show-word-limit maxlength="60" size="small" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div class="float">
|
||||
<!-- 活动时间 -->
|
||||
<el-form-item label="活动时间" prop="beginTime">
|
||||
<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formData.beginTime" type="datetime" placeholder="选择日期时间" size="small"> </el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 至 -->
|
||||
<el-form-item label="至" prop="endTime">
|
||||
<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formData.endTime" type="datetime" placeholder="选择日期" size="small"> </el-date-picker>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 活动地点 -->
|
||||
<el-form-item label="活动地点" prop="address" class="line">
|
||||
<el-input placeholder="请输入..." v-model="formData.address" show-word-limit maxlength="20" size="small" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 参与名额 -->
|
||||
<el-form-item label="参与名额" prop="total" class="width">
|
||||
<el-input placeholder="请输入..." v-model="formData.total" size="small" clearable></el-input>
|
||||
<span class="text">"0"表示不限制活动报名人数</span>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 截止日期 -->
|
||||
<el-form-item label="截止日期" prop="stopSignupTime" class="line">
|
||||
<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formData.stopSignupTime" type="datetime" placeholder="选择日期" size="small"> </el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<div class="float">
|
||||
<!-- 联系人 -->
|
||||
<el-form-item label="联系人" prop="contactPerson" class="width">
|
||||
<el-input placeholder="请输入..." v-model="formData.contactPerson" size="small" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 联系电话 -->
|
||||
<el-form-item label="联系电话" prop="contactPhone" class="phonenumber">
|
||||
<el-input placeholder="联系电话..." v-model="formData.contactPhone" size="small" clearable></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 活动介绍 -->
|
||||
<el-form-item label="活动介绍" prop="content" class="line">
|
||||
<ai-editor v-model="formData.content" :instance="instance" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 略缩图 -->
|
||||
<el-form-item label="略缩图" prop="imgUrl" class="line" v-if="isEdit != true">
|
||||
<ai-uploader :isShowTip="true" :instance="instance" v-model="formData.imgUrl" :limit="1" :cropOps="cropOps" is-crop>
|
||||
<template slot="tips">
|
||||
<p>最多上传1张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
|
||||
<p>图片比例：1.6：1</p>
|
||||
</template>
|
||||
</ai-uploader>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<!-- / -->
|
||||
</ai-card>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<template #footer>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="confirm('ruleForm')">提交</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'ActiveAdd',
|
||||
components: {},
|
||||
props: { instance: Function, dict: Object, params: Object, disabledLevel: Number },
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
areaId: '',
|
||||
title: '',
|
||||
beginTime: '',
|
||||
endTime: '',
|
||||
address: '',
|
||||
stopSignupTime: '',
|
||||
total: '',
|
||||
contactPerson: '',
|
||||
contactPhone: '',
|
||||
content: '',
|
||||
imgUrl: [],
|
||||
},
|
||||
id: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
isEdit() {
|
||||
return !!this.params.id
|
||||
},
|
||||
|
||||
cropOps() {
|
||||
return {
|
||||
width: '336px',
|
||||
height: '210px',
|
||||
}
|
||||
},
|
||||
|
||||
formRules() {
|
||||
return {
|
||||
areaId: [
|
||||
{ required: true, message: '请选择发布地区', trigger: 'change' },
|
||||
{
|
||||
validator: (r, v, cb) => (/0{3}$/g.test(v) ? cb('请选择到村') : cb()),
|
||||
},
|
||||
],
|
||||
title: [{ required: true, message: '请输入标题', trigger: 'change' }],
|
||||
beginTime: [{ required: true, message: '请选择活动时间', trigger: 'change' }],
|
||||
endTime: [{ required: true, message: '请选择至', trigger: 'change' }],
|
||||
address: [{ required: true, message: '请输入活动地点', trigger: 'change' }],
|
||||
stopSignupTime: [{ required: true, message: '请选择截止日期', trigger: 'change' }],
|
||||
total: [{ required: true, message: '请输入参与名额', trigger: 'change' }],
|
||||
contactPerson: [{ required: true, message: '请输入联系人', trigger: 'change' }],
|
||||
contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'change' }],
|
||||
content: [{ required: true, message: '请输入活动介绍', trigger: 'change' }],
|
||||
imgUrl: [{ required: true, message: '请上传图片', trigger: 'change' }],
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
this.formData.areaId = this.user.info.areaId
|
||||
|
||||
if (this.params && this.params.id) {
|
||||
this.id = this.params.id
|
||||
}
|
||||
|
||||
this.getEdit()
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
getEdit() {
|
||||
this.instance.post(`/app/apppartyreport/queryDetailById?id=${this.id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.formData = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 确定新增
|
||||
confirm() {
|
||||
this.$refs['ruleForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.instance
|
||||
.post(`/app/apppartyreport/addOrUpdate`, {
|
||||
areaId: this.formData.areaId,
|
||||
title: this.formData.title,
|
||||
beginTime: this.formData.beginTime,
|
||||
endTime: this.formData.endTime,
|
||||
address: this.formData.address,
|
||||
|
||||
stopSignupTime: this.formData.stopSignupTime,
|
||||
total: this.formData.total,
|
||||
contactPerson: this.formData.contactPerson,
|
||||
contactPhone: this.formData.contactPhone,
|
||||
content: this.formData.content,
|
||||
imgUrl: this.formData.imgUrl[0].url,
|
||||
id: this.id,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('提交成功')
|
||||
setTimeout(() => {
|
||||
this.cancel(true)
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 返回按钮
|
||||
cancel(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: isRefresh ? true : false,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ActiveAdd {
|
||||
.el-form {
|
||||
.ai-card {
|
||||
.ai-content {
|
||||
.width {
|
||||
.text {
|
||||
margin-left: 50px;
|
||||
color: #adadad;
|
||||
}
|
||||
.el-form-item__content {
|
||||
.el-input {
|
||||
width: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.float {
|
||||
.width {
|
||||
.el-form-item__content {
|
||||
.el-input {
|
||||
width: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
.phonenumber {
|
||||
margin-left: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
190
packages/wechat/AppReportServe/components/ActiveList.vue
Normal file
190
packages/wechat/AppReportServe/components/ActiveList.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<ai-list class="ActiveList" isTabs>
|
||||
<template #content>
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<el-button class="btn" type="primary" icon="iconfont iconAdd" size="small" @click="AddActive(id)">发起活动
|
||||
</el-button>
|
||||
<ai-select v-model="search.actionStatus" placeholder="活动状态" clearable @change=";(page.current = 1), getList()"
|
||||
:selectList="dict.getDict('partyReportActionStatus')"></ai-select>
|
||||
<ai-select v-model="search.signupStatus" placeholder="报名状态" clearable @change=";(page.current = 1), getList()"
|
||||
:selectList="dict.getDict('partyReportSignupStatus')"></ai-select>
|
||||
</template>
|
||||
|
||||
<template #right>
|
||||
<el-input v-model="search.title" size="small" placeholder="活动发布名称/发布地区" suffix-icon="iconfont iconSearch"
|
||||
clearable @change="page.current=1, getList()"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
|
||||
<ai-table class="ai-table" :tableData="tableData" :col-configs="colConfigs" :total="total"
|
||||
:current.sync="page.current" :size.sync="page.size" @getList="getList" :dict="dict">
|
||||
<el-table-column slot="signupStatus" label="报名状态">
|
||||
<template slot-scope="{ row }">
|
||||
<span style="color:green"
|
||||
v-if="row.signupStatus == 0">{{ dict.getLabel('partyReportSignupStatus', row.signupStatus) }}</span>
|
||||
|
||||
<span style="color:red"
|
||||
v-if="row.signupStatus == 1">{{ dict.getLabel('partyReportSignupStatus', row.signupStatus) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="actionStatus" label="活动状态">
|
||||
<template slot-scope="{ row }">
|
||||
<span style="color:#FDB27B"
|
||||
v-if="row.actionStatus == 0">{{ dict.getLabel('partyReportActionStatus', row.actionStatus) }}</span>
|
||||
|
||||
<span style="color:#588BFB"
|
||||
v-if="row.actionStatus == 1">{{ dict.getLabel('partyReportActionStatus', row.actionStatus) }}</span>
|
||||
|
||||
<span style="color:#B0B0B0"
|
||||
v-if="row.actionStatus == 2">{{ dict.getLabel('partyReportActionStatus', row.actionStatus) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column slot="options" label="操作" fixed="right" align="center" width="180">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" v-if="row.actionStatus!=2" @click="toEdit(row.id)">编辑</el-button>
|
||||
<el-button type="text" @click="DetailActive(row.id)">详情</el-button>
|
||||
<el-button type="text" @click="toDelete(row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'ActiveList',
|
||||
components: {},
|
||||
props: {instance: Function, dict: Object, params: Object},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
colConfigs: [
|
||||
{prop: 'title', label: '活动名称', width: '270'},
|
||||
{
|
||||
prop: 'areaName',
|
||||
label: '发布地区',
|
||||
width: '200',
|
||||
},
|
||||
{prop: 'beginTime', label: '活动时间', width: '300'},
|
||||
{prop: 'signupCount', label: '报名人数', align: 'center'},
|
||||
{
|
||||
slot: 'signupStatus',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
slot: 'actionStatus',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
slot: 'options',
|
||||
},
|
||||
],
|
||||
id: '',
|
||||
page: {
|
||||
size: 10,
|
||||
current: 1,
|
||||
},
|
||||
total: 0,
|
||||
search: {
|
||||
actionStatus: '',
|
||||
signupStatus: '',
|
||||
title: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
this.dict.load('partyReportActionStatus', 'partyReportSignupStatus').then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.instance
|
||||
.post(`/app/apppartyreport/list`, null, {
|
||||
params: {
|
||||
...this.page,
|
||||
...this.search,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
res.data.records.map((item) => {
|
||||
if (item.beginTime && item.endTime) {
|
||||
item.beginTime = item.beginTime + '至' + item.endTime
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 编辑
|
||||
toEdit(id) {
|
||||
this.$emit('change', {
|
||||
type: 'ActiveEdit',
|
||||
params: {
|
||||
id: id || '',
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
// 发起活动
|
||||
AddActive(id) {
|
||||
this.$emit('change', {
|
||||
type: 'ActiveAdd',
|
||||
params: {
|
||||
id: id || '',
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
// 详情
|
||||
DetailActive(id) {
|
||||
this.$emit('change', {
|
||||
type: 'ActiveDetail',
|
||||
params: {
|
||||
id,
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
// 删除
|
||||
toDelete(id) {
|
||||
this.$confirm('删除后不可恢复，确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/apppartyreport/delete?ids=${id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 重置
|
||||
reset() {
|
||||
Object.keys(this.search).forEach((e) => {
|
||||
this.search[e] = ''
|
||||
})
|
||||
this.getList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ActiveList {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
485
packages/wechat/AppReportServe/components/DataList.vue
Normal file
485
packages/wechat/AppReportServe/components/DataList.vue
Normal file
@@ -0,0 +1,485 @@
|
||||
<template>
|
||||
<section class="DataDetail">
|
||||
<ai-detail>
|
||||
<template #content>
|
||||
<ai-tree-menu title="应报到党组织名单" @search="(v) => $refs.gridTree.filter(v)" searchPlaceholder="请输入党组织...">
|
||||
<ai-party-tree :instance="instance" :root="user.info.organizationId" @node-click="handleSelectGrid" :filter-node-method="handleTreeFilter" ref="gridTree"></ai-party-tree>
|
||||
</ai-tree-menu>
|
||||
|
||||
<div class="echarts-content">
|
||||
<div class="mainPane">
|
||||
<!-- 近12个月党员活动参与情况统计 -->
|
||||
<el-row>
|
||||
<div class="cardPane">
|
||||
<ai-title title="近12个月党员活动参与情况统计" />
|
||||
<div id="numMonthsCountListChart" />
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<!-- 总体统计和学员报到类型比例统计 -->
|
||||
<div class="data-flex">
|
||||
<el-date-picker type="month" size="small" v-model="search.time" value-format="yyyy-MM" clearables @change="getList().then(() => getChartData())" />
|
||||
|
||||
<!-- 总体统计 -->
|
||||
<el-row class="card" type="flex">
|
||||
<el-row class="totals" type="flex">
|
||||
<div class="cards eventCountMap" v-for="v in eventCountMap" :key="v.key">
|
||||
<b class="name-cards">{{ v.name }}</b>
|
||||
<b class="count" v-if="v.v1 == 'NaN%'">0</b>
|
||||
<b class="count" v-else>
|
||||
<span v-if="v.name == '活动实际参与率'">
|
||||
{{ v.v1.toString().replace(/(?=(?!\b)(\d{3})+$)/g, ',') }}
|
||||
<span class="ren">%</span>
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ v.v1.toString().replace(/(?=(?!\b)(\d{3})+$)/g, ',') }}
|
||||
<span class="ren">人</span>
|
||||
</span>
|
||||
</b>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<!-- 学员报到类型比例 -->
|
||||
<el-row class="ceharts">
|
||||
<div>
|
||||
<ai-title title="学员报到类型比例" />
|
||||
<div id="typesofStudentReportsListChart" />
|
||||
</div>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 党员活动记录列表 -->
|
||||
<div class="table">
|
||||
<div class="records"><span class="record">党员活动记录</span></div>
|
||||
<div class="template">
|
||||
<div class="left">
|
||||
<el-date-picker placeholder="年/月" size="small" v-model="searchObj.time" value-format="yyyy-MM-01" type="month" clearables @change=";(page.current = 1), getInfoList().then(() => getChartData())" />
|
||||
|
||||
<ai-download :instance="instance" url="/app/apppartyreport/export-signup" :params="param" fileName="党员活动记录模板" />
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<el-input v-model="searchObj.name" size="small" placeholder="姓名" prefix-icon="iconfont iconSearch" clearable @change=";(page.current = 1), getInfoList()" />
|
||||
<el-button class="el-button" type="primary" icon="el-icon-search" size="small" @click=";(page.current = 1), getInfoList()">查询</el-button>
|
||||
<el-button class="el-button" icon="el-icon-refresh-right" @click="reset()">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" :current.sync="page.current" :size.sync="page.size" @getList="getInfoList" :dict="dict" @selection-change="(v) => (ids = v.map((e) => e.id))"> </ai-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'DataList',
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
chartOps() {
|
||||
if (!this.meta) return
|
||||
|
||||
// 近12个月党员活动参与情况统计
|
||||
let MonthsCount = this.meta['趋势分析'].map((e) => [e.time, e.count, e.total, e.active]),
|
||||
//
|
||||
// 学员报到类型比例
|
||||
reportsType = Object.keys(this.meta['类别分析']).map((e) => [e, this.meta['类别分析'][e] || 0])
|
||||
|
||||
return {
|
||||
// 近12个月党员活动参与情况统计
|
||||
numMonthsCountList: {
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { icon: 'rect', itemWidth: 8, itemHeight: 8 },
|
||||
color: ['#EC4461', '#38A4F8', '#02A499'],
|
||||
grid: {
|
||||
left: 82,
|
||||
right: 40,
|
||||
bottom: 80,
|
||||
top: 56,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: { lineStyle: { color: '#D8DDE8' } },
|
||||
axisTick: {
|
||||
//坐标轴刻度相关设置
|
||||
show: true, //是否显示坐标轴刻度。
|
||||
// inside: false, //坐标轴刻度是否朝内，默认朝外。
|
||||
length: 7, //坐标轴刻度的长度。
|
||||
},
|
||||
axisLabel: { color: '#666', margin: 19 },
|
||||
},
|
||||
yAxis: {
|
||||
name: '',
|
||||
nameTextStyle: {
|
||||
color: '#666',
|
||||
borderColor: '#000',
|
||||
padding: [0, 60, 0, 0],
|
||||
},
|
||||
type: 'value',
|
||||
axisLine: { show: true, lineStyle: { color: '#333', type: 'solid' } },
|
||||
min: 0,
|
||||
minInterval: 1,
|
||||
axisLabel: { color: '#666', margin: 19, show: true },
|
||||
splitLine: { show: true, lineStyle: { color: '#D8DDE8', type: 'solid' } },
|
||||
axisTick: {
|
||||
show: true,
|
||||
length: 7,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{ type: 'line', name: '本组织党员人数' },
|
||||
{ type: 'line', name: '报名活动人数' },
|
||||
{ type: 'line', name: '实际参与活动人数' },
|
||||
],
|
||||
dataset: {
|
||||
source: MonthsCount,
|
||||
},
|
||||
},
|
||||
|
||||
// 学员报到类型比例
|
||||
typesofStudentReportsList: {
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 370,
|
||||
y: 'center',
|
||||
itemGap: 12,
|
||||
itemWidth: 18,
|
||||
itemHeight: 12,
|
||||
tooltip: { show: true },
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: { color: '#666', width: 120, fontSize: 14, lineHeight: 22 },
|
||||
b: {
|
||||
fontWeight: 'bold',
|
||||
align: 'right',
|
||||
color: '#333',
|
||||
padding: [0, 50, 0, 0],
|
||||
fontSize: 14,
|
||||
width: 80,
|
||||
lineHeight: 22,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {},
|
||||
color: ['#FDA94F', '#4F8AFA', '#EC4461'],
|
||||
series: {
|
||||
name: '学员报到类型比例',
|
||||
center: [160, '50%'],
|
||||
radius: [40, 80],
|
||||
type: 'pie',
|
||||
minShowLabelAngle: 1,
|
||||
label: {
|
||||
normal: {
|
||||
position: 'inner',
|
||||
formatter: '{d}%',
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
itemStyle: { borderColor: '#fff', borderWidth: 0 },
|
||||
},
|
||||
dataset: {
|
||||
source: reportsType,
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
param() {
|
||||
let params = {}
|
||||
//导出搜索条件
|
||||
if (this.ids.length) {
|
||||
params = {
|
||||
...params,
|
||||
time: this.searchObj.time,
|
||||
}
|
||||
} else {
|
||||
params = {
|
||||
...params,
|
||||
time: this.searchObj.time,
|
||||
name: this.searchObj.name,
|
||||
partyOrgId: this.user.info.organizationId,
|
||||
}
|
||||
}
|
||||
return params
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
colConfigs: [
|
||||
{ prop: 'name', label: '姓名', align: 'center' },
|
||||
{
|
||||
prop: 'sex',
|
||||
label: '性别',
|
||||
dict: 'sex',
|
||||
align: 'center',
|
||||
},
|
||||
{ prop: 'partyOrg', label: '所属组织', align: 'center' },
|
||||
{ prop: 'signupCount', label: '报名次数', align: 'center' },
|
||||
{ prop: 'partakeCount', label: '参与次数', align: 'center' },
|
||||
],
|
||||
page: {
|
||||
size: 10,
|
||||
current: 1,
|
||||
},
|
||||
total: 0,
|
||||
searchObj: {
|
||||
name: '',
|
||||
time: '',
|
||||
},
|
||||
search: {
|
||||
time: '',
|
||||
},
|
||||
partyId: '', // 党组织id
|
||||
treeData: [],
|
||||
meta: {},
|
||||
charts: {
|
||||
numMonthsCountList: null, // 近12个月党员活动参与情况统计
|
||||
typesofStudentReportsList: null, // 学员报到类型比例
|
||||
},
|
||||
ids: [],
|
||||
eventCountMap: [
|
||||
{ name: '本组织党员人数', v1: 0 },
|
||||
{ name: '本月报名活动人数', v1: 0 },
|
||||
{ name: '实际参与活动人数', v1: 0 },
|
||||
{ name: '活动实际参与率', v1: 0 },
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
let partyOrgId = this.user.info.organizationId
|
||||
if (this.partyId) {
|
||||
partyOrgId = this.partyId
|
||||
}
|
||||
return this.instance
|
||||
.post('/app/apppartyreport/statistic', null, {
|
||||
params: {
|
||||
partyOrgId,
|
||||
time: this.search.time + '-01',
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res?.data) {
|
||||
this.meta = res.data
|
||||
|
||||
this.eventCountMap[0].v1 = this.meta['总体分析'].count.toString().replace(/(?=(?!\b)(\d{3})+$)/g, ',')
|
||||
this.eventCountMap[1].v1 = this.meta['总体分析'].total.toString().replace(/(?=(?!\b)(\d{3})+$)/g, ',')
|
||||
this.eventCountMap[2].v1 = this.meta['总体分析'].active.toString().replace(/(?=(?!\b)(\d{3})+$)/g, ',')
|
||||
|
||||
if (this.meta['总体分析'].active > 0) {
|
||||
this.eventCountMap[3].v1 = (this.meta['总体分析'].active / this.meta['总体分析'].total).toFixed(2) * 100
|
||||
} else {
|
||||
this.eventCountMap[3].v1 = 0
|
||||
}
|
||||
|
||||
window.console.log('100000001001011141000'.toString().replace(/(?=(?!\b)(\d{3})+$)/g, ','))
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getInfoList() {
|
||||
let partyOrgId = this.user.info.organizationId
|
||||
if (this.partyId) {
|
||||
partyOrgId = this.partyId
|
||||
}
|
||||
this.instance
|
||||
.post(`/app/apppartyreport/list-signup`, null, {
|
||||
params: {
|
||||
...this.page,
|
||||
name: this.searchObj.name,
|
||||
time: this.searchObj.time,
|
||||
partyOrgId,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
handleTreeFilter(v, data) {
|
||||
return data?.name.indexOf(v) > -1
|
||||
},
|
||||
|
||||
handleSelectGrid(data) {
|
||||
this.partyId = data?.id
|
||||
this.getList().then(() => this.getChartData())
|
||||
this.getInfoList()
|
||||
},
|
||||
|
||||
initEcharts() {
|
||||
Object.keys(this.charts).map((id) => {
|
||||
let ref = document.getElementById(id + 'Chart')
|
||||
if (ref) this.charts[id] = echarts.init(ref)
|
||||
})
|
||||
},
|
||||
|
||||
getChartData() {
|
||||
Object.keys(this.charts).map((e) => {
|
||||
this.charts[e]?.setOption(this.chartOps?.[e])
|
||||
})
|
||||
},
|
||||
|
||||
// 重置
|
||||
reset() {
|
||||
this.searchObj.name = ''
|
||||
this.getInfoList()
|
||||
},
|
||||
},
|
||||
created() {
|
||||
var date = new Date()
|
||||
var year = date.getFullYear()
|
||||
var mon = date.getMonth() + 1
|
||||
var month = mon < 10 ? '0' + mon : mon
|
||||
this.searchObj.time = year + '-' + month + '-01'
|
||||
this.search.time = year + '-' + month
|
||||
|
||||
this.handleSelectGrid(this.user.info.organizationId)
|
||||
|
||||
this.dict.load('sex').then(() => {})
|
||||
|
||||
this.getInfoList()
|
||||
},
|
||||
mounted() {
|
||||
this.initEcharts()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.DataDetail {
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
.ai-detail {
|
||||
::v-deep .ai-detail__content {
|
||||
.ai-detail__content--wrapper {
|
||||
min-width: 100%;
|
||||
display: flex;
|
||||
.AiTreeMenu {
|
||||
width: 16%;
|
||||
}
|
||||
.echarts-content {
|
||||
width: 83%;
|
||||
padding: 0 10px 0 0;
|
||||
margin-left: 10px;
|
||||
.mainPane {
|
||||
.el-row {
|
||||
width: 100%;
|
||||
gap: 16px;
|
||||
height: auto;
|
||||
.cardPane {
|
||||
flex: 1;
|
||||
padding: 0 10px 10px 10px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 4px 0 rgba(20, 16, 16, 0.05);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.data-flex {
|
||||
margin-top: 15px;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
.card {
|
||||
margin-top: 20px;
|
||||
.totals {
|
||||
width: 50%;
|
||||
flex-wrap: wrap;
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px 0 0 15px;
|
||||
width: 45%;
|
||||
background-color: #f9f9f9;
|
||||
.name-cards {
|
||||
font-size: 16px;
|
||||
}
|
||||
.count {
|
||||
line-height: 4;
|
||||
color: #2a6cfb;
|
||||
font-size: 22px;
|
||||
.ren {
|
||||
color: #9f9fa0;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ceharts {
|
||||
background-color: #f9f9f9;
|
||||
width: 50%;
|
||||
padding: 5px 0 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
padding: 0 10px 10px 10px;
|
||||
margin-top: 15px;
|
||||
background-color: #fff;
|
||||
.records {
|
||||
width: 140px;
|
||||
line-height: 40px;
|
||||
border-bottom: 2px solid #296bfb;
|
||||
.record {
|
||||
margin-left: 25px;
|
||||
color: #2c6dfb;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
.template {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left {
|
||||
display: flex;
|
||||
.ai-download {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
.el-input {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ai-table {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#numMonthsCountListChart {
|
||||
width: 100%;
|
||||
height: 290px;
|
||||
}
|
||||
|
||||
#typesofStudentReportsListChart {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user