🎉🎉欢迎来到我的CSDN主页!🎉🎉
🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚
🌟推荐给大家我的专栏《微信小程序开发实战》。🎯🎯
👉点击这里,就可以查看我的主页啦!👇👇
🎁如果感觉还不错的话请给我点赞吧!🎁🎁
💖期待你的加入,一起学习,一起进步!💖💖
前言
开会是企业中必不可少的一种沟通方式,可以让团队成员之间交流思想,协调工作进度,解决问题等。但是,过于频繁和冗长的会议可能会浪费时间和资源,影响工作效率。
在公司中,如果每个小事情都要开会,那么很容易造成员工的厌烦和不满。这样的会议可能会让人感到无聊、浪费时间,甚至失去动力。因此,企业应该合理安排会议,选择适当的时间和场合,避免不必要的会议,并确保会议的目的明确、内容简洁、效率高效,因此鄙人开发了一个数字化会议OA系统。
这篇文章主讲投票模块的实现,其中包括发布投票信息,用户选择所属会议的投票标题内容进行投票、投票的数据报表等实现。
一、投票模块页面搭建
【微信小程序】自定义组件布局会议OA其他页面(附源码)http://t.csdnimg.cn/lLeMU页面搭建与自定义组件的编写在这篇文章中提过,这里只做粗略的讲述。
1.顶部导航栏
我们可以根据自定义组件完成,首先在相应的json文件中引用自定义组件。
javascript
"usingComponents": {
"tabs": "/components/tabs/tabs"
}
随后在js文件中定义我们所需要展示的内容。
javascript
tabs: ['发起投票', '投票进行中', '已结束投票', '全部投票']
最后直接在wxml中应用即可。
html
<tabs tabList="{{tabs}}" bindtabsItemChange="tabsItemChange"></tabs>
效果展示:
2.定义内容切换事件
我们这里与会议管理有些不同,我们会议管理是点击不同的菜单显示不同的数据,但是这个的内容可就不是数据了,而是各不相同的组件,所以针对这个事情我们要做一个内容切换事件。
首先在我们的wxml中定义好每个菜单需要展示的内容并写好hidden样式
html
<view class="{{componentStatus[0] ? '' : 'hidden'}}">发起投票</view>
<view class="{{componentStatus[1] ? '' : 'hidden'}}">投票进行中</view>
<view class="{{componentStatus[2] ? '' : 'hidden'}}">已结束投票</view>
<view class="{{componentStatus[3] ? '' : 'hidden'}}">全部投票</view>
css
.hidden {
display: none;
}
在js中定义好属性与事件
javascript
componentStatus: [true,false, false, false]
javascript
tabsItemChange(e) {
let index = e.detail.index;
//全部的组件赋值为false
const lists = [false, false, false, false];
//将所点击的组件赋值为true
lists[index] = true;
this.setData({
componentStatus: lists // 更新 data 中的 componentStatus 属性值
});
}
效果展示:
温馨提示:
因为在写这篇博客之前,我就已经完成了功能,并且模块中的样式没有进行相应的标记,所以这里就放上我投票模块的所有样式,避免大家在进行编写的时候因为样式问题而导致效果出不来的情况。
wxss
css/* pages/vote/list/list.wxss */ .hidden { display: none; } .title-view { background-color: beige; font-weight: 700; padding-left: 7px; } .info-title { padding: 5px 5px 10px 5px; border-top: 1px solid rgb(129, 129, 127); } .info-text { height: 100px; padding: 5px 5px 10px 5px; border-top: 1px solid rgb(129, 129, 127); } .image { padding-left: 55px; display: flex; align-items: center; } .time { border-top: 1px solid rgb(129, 129, 127); padding: 5px 0px 5px 0px; display: flex; align-items: center; } .image-container { padding-left: 60px; } .info-sousuo { margin-left: 85px; padding-left: 20px; border-radius: 25px; border: 4px solid rgb(214, 214, 98); width: 250px; } /* pages/meeting/list/list.wxss */ .section{ color: #aaa; display: flex; justify-content: center; } .list-info { margin-top: 10px; color: #aaa; } .list-num { color: #e40909; font-weight: 700; } .join { padding: 0px 0px 0px 10px; color: #aaa; } .state { margin: 0px 6px 0px 6px; border: 1px solid #93b9ff; color: #93b9ff; } .list-tag { padding: 3px 0px 10px 0px; display: flex; align-items: center; } .list-title { display: flex; justify-content: space-between; color: #333; font-weight: 900; } .yyy{ display: flex; align-items: center; } .list-img{ height: 300rpx; width: 90%; border-radius: 50rpx; margin: 5px 5px 5px 20px; } .centered { display: flex; /* 设置为弹性容器 */ justify-content: center; /* 子元素水平方向居中对齐 */ } .video-img { width: 100px; height: 100px; } .list { border-bottom: 1px solid #6b6e74; padding: 10px; } .mobi-text { font-weight: 700; padding: 15px; } .mobi-icon { border-left: 5px solid #e40909; } .mobi-title { background-color: rgba(158, 158, 142, 0.678); margin: 10px 0px 10px 0px; } .swiper-item { height: 300rpx; width: 100%; border-radius: 10rpx; } .userinfo { display: flex; flex-direction: column; align-items: center; color: #aaa; } .userinfo-avatar { overflow: hidden; width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .usermotto { margin-top: 200px; } .filx{ display: flex; align-items: center; } .container { padding: 20px; } .modal-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; width: 80%; max-height: 80%; overflow-y: auto; padding: 20px; } .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } button { display: block; margin-top: 10px; } .content { margin-top: 10px; border: 1px solid #ccc; padding: 10px; } .right{ display: flex; align-items: center; }
二、发起投票
1.初始数据
首先最基本的就是要拿到数据,但是这个数据可不是乱拿的,我们先来看一下表数据。
我们要拿到state值为5的数据,只有该数据才是通过了审核并且还未结束的会议,所以能进行投票,明确了目标现在开始敲代码吧。
InfoMapper.xml
XML
<select id="votelist" resultMap="BaseResultMap" >
select
<include refid="Base_Column_List" />
from t_oa_meeting_info
where state=5
</select>
Controller代码
java
//创建投票的会议信息
@RequestMapping("/vote")
public Object votelist(Info info) {
List<Info> infoList = infoMapper.votelist(info);
Map<Object, Object> data = new HashMap<Object, Object>();
data.put("infoList",infoList);
return ResponseUtil.ok(data);
}
在config/api.js配置后端接口
javascript
// 以下是业务服务器API地址
// 本机开发API地址
var WxApiRoot = 'http://localhost:8080/wx/';
// 测试环境部署api地址
// var WxApiRoot = 'http://192.168.0.101:8070/demo/wx/';
// 线上平台api地址
//var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';
module.exports = {
IndexUrl: WxApiRoot + 'home/index', //首页数据接口
SwiperImgs: WxApiRoot+'swiperImgs', //轮播图
MettingInfos: WxApiRoot+'meeting/list', //会议信息
VoteInfos:WxApiRoot+'home/vote',//可发起投票会议信息
OptionInfos:WxApiRoot+'home/add',//发布投票信息
SelectOption:WxApiRoot+'home/selectOptions'//查看可进行投票信息
};
JS代码
引入后端接口配置文件
javascript
const api = require("../../config/api.js")
可发起投票会议信息的ajax
javascript
loadvoteInfos() {
util.request(api.VoteInfos).then(res => {
// console.log(res.data.infoList)
this.setData({
lists: res.data.infoList
})
})
}
在onLoad函数中调用该方法
WXML代码
html
<!-- 我创建的投票 -->
<view class="{{componentStatus[0] ? '' : 'hidden'}}">
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
<view>
<image bindtap="showModal" data-id="{{item}}" class="list-img" mode="scaleToFill" src="{{item.seatpic !=null? item.seatpic : '/static/persons/6.png'}}"></image>
</view>
<view class="centered">
<view class="list" data-id="{{item.id}}">
<view class="yyy">
<view class="list-title"><text>{{item.title}}</text></view>
<view class="join"><text class="list-num">{{tools.getNumber(item.canyuze,item.liexize,item.item.zhuchiren)}}</text>人报名</view>
</view>
<view class="list-info"><text>{{item.location}}</text>|<text>{{tools.formatDate(item.starttime)}}</text></view>
</view>
</view>
</block>
</view>
注意:将代码放入所需要展示内容的view中。
效果展示
2.模态框实现发布
这里我给大家捋一下我的思路,当我点击会议信息的时候就会弹出一个模态框,模态框的内容有显示该会议的标题、输入投票的标题、新增选项、删除选项、发布投票、取消发布等。我需要将我所点击的会议信息的标题传入模态框中,并且可以获取投票标题和选项内容的文本内容并进行保存,等我点击发布投票的时候就会将保存的内容传值给后端。
数据库展示
OptionMapper.xml
XML
<insert id="insertSelective" parameterType="com.zking.minoa.model.Option">
INSERT INTO t_oa_meeting_option
<trim prefix="(" suffix=")" suffixOverrides=",">
<if test="id != null">
id,
</if>
<if test="meetingId != null">
meetingId,
</if>
<if test="optionValue != null">
optionValue,
</if>
<if test="optionText != null">
optionText,
</if>
</trim>
<trim prefix="VALUES (" suffix=")" suffixOverrides=",">
<if test="id != null">
#{id, jdbcType=INTEGER},
</if>
<if test="meetingId != null">
#{meetingId, jdbcType=INTEGER},
</if>
<if test="optionValue != null">
#{optionValue, jdbcType=VARCHAR},
</if>
<if test="optionText != null">
#{optionText, jdbcType=VARCHAR},
</if>
</trim>
</insert>
Controller代码
java
//发布投票
@RequestMapping("/add")
public Object add(@RequestBody Map<String, Object> obj) {
System.out.println(obj);
//获取选项数组的长度来控制新增的次数
int optionsLength = ((List)obj.get("options")).size();
//循环添加投票数据
for (int i = 0; i < optionsLength; i++) {
//初始化option
Option option = new Option();
List<String> options = (List<String>) obj.get("options");
option.setmeetingId((Integer) obj.get("modalConId"));//会议id
String firstOption = options.get(i);
option.setoptionValue((String)obj.get("title"));//投票标题
option.setoptionText(firstOption);//选项内容
//调取添加的方法
int insert = optionMapper.insertSelective(option);
}
return ResponseUtil.ok();
}
这里需要注意是一个投票选项就是一条数据,所以我们要先拿到前端的选择数组的长度,从而进行遍历添加数据,同一批请求的投票标题与会议id肯定是一致的所以不用变动。
在config/api.js配置后端接口
java
OptionInfos:WxApiRoot+'home/add',//发布投票信息
JS代码
javascript
//投票标题的监听事件
bindTitle: function (e) {
this.setData({
title: e.detail.value
})
},
// 输入框输入事件,保存输入的内容到相应的选项
bindInput(e) {
console.log(e)
const { index } = e.currentTarget.dataset; // 获取当前选项的索引
const { value } = e.detail;
const { options } = this.data;
options[index] = value;
this.setData({
options: options
});
},
// 添加选项
addOption() {
const { options, optionCount } = this.data;
options.push('');
this.setData({
options: options,
optionCount: optionCount + 1
});
},
// 删除选项
deleteOption() {
const { options, optionCount } = this.data;
options.pop();
this.setData({
options: options,
optionCount: optionCount - 1
});
},
// 确认按钮点击事件
confirm() {
let modalConId = this.data.modalConId;//会议id
let title = this.data.title;//投票标题
let options = this.data.options;//选项内容
let data = {
modalConId: modalConId,
options: options,
title: title
};
// console.log(data)
util.request(api.OptionInfos, data, 'POST').then(res => {
// console.log(res)
this.setData({
modalVisible: false,
optionCount: 1
});
})
},
// 取消按钮点击事件
cancel() {
this.setData({
modalVisible: false,
optionCount: 1
});
}
事件中提到的变量在data中定义即可,这里就不做展示了
WXML代码
html
<!-- 模态框 -->
<view wx:if="{{modalVisible}}">
<view class="mask"></view>
<view class="modal-container">
<h1>{{modalContent}}</h1>
<view style="margin-top: 20px;" class="filx">
<l-button type="default" bindtap="addOption" style="padding: 0px 10px 0px 0px;">添加选项</l-button>
<l-button type="warning" bindtap="deleteOption" wx:if="{{optionCount > 1}}">删除选项</l-button>
</view>
<span style="margin-right: 30px;">投票标题:</span>
<input type="text" placeholder="请输入投票标题" bindinput="bindTitle" style="width: 300px;border: 3px solid rgb(7, 7, 7);" />
<view wx:for="{{options}}" wx:key="{{index}}">
<span style="margin-right: 30px;">选项{{index+1}}:</span>
<input type="text" value="{{item}}" bindinput="bindInput" data-index="{{index}}" style="width: 300px;border: 3px solid rgb(7, 7, 7);" />
</view>
<view class="filx" style="margin-top: 20px;">
<l-button bindtap="confirm" type="success" style="padding: 0px 10px 0px 0px;">发布投票</l-button>
<l-button bindtap="cancel" type="error">取消</l-button>
</view>
</view>
</view>
我这里还引用了小程序框架LinUI可以丰富我的页面,不懂的可以看官网哦!!
结合我们刚刚的页面数据再看看效果
三、用户投票
1.初始数据
OptionMapper.xml
XML
<select id="selecttoupiao" resultType="java.util.Map" parameterType="java.lang.String">
SELECT
id,
optionValue,
optionText,
title,
seatPic
FROM (
SELECT
t_oa_meeting_option.id,
t_oa_meeting_option.optionValue,
t_oa_meeting_option.optionText,
t_oa_meeting_info.title,
t_oa_meeting_info.seatPic,
ROW_NUMBER() OVER (PARTITION BY t_oa_meeting_option.optionValue ORDER BY t_oa_meeting_option.id) AS row_num
FROM
t_oa_meeting_option
JOIN t_oa_meeting_info ON t_oa_meeting_option.meetingId = t_oa_meeting_info.id
WHERE
t_oa_meeting_info.state = 5
) subquery
WHERE row_num = 1
<if test="title != null and title != ''">
AND title LIKE CONCAT('%', #{title}, '%')
</if>
</select>
Controller代码
java
//带模糊查询的会议信息
@RequestMapping("/selectOptions")
public Object selectOptions(String title) {
System.out.println(title);
List<Map> selecttoupiao = optionMapper.selecttoupiao(title);
Map<Object, Object> data = new HashMap<Object, Object>();
data.put("selecttoupiao", selecttoupiao);
return ResponseUtil.ok(data);
}
在config/api.js配置后端接口
java
SelectOption:WxApiRoot+'home/selectOptions'//查看可进行投票信息
在投票页面我使用了LinUI的滑动菜单和卡片布局。
利用好框架我们写起来就会简单许多只需要将数据进行绑定即可,但为了让用户有更好的体验,所以我加了一个搜索框,用户可进行模糊查询自己所需要投票的会议。
JS代码
javascript
//加载投票会议信息的ajax
loadoptinos() {
util.request(api.SelectOption).then(res => {
// console.log(res.data.selecttoupiao)
this.setData({
Options: res.data.selecttoupiao
})
})
},
// 监听搜索事件
onSearch: function(event) {
var title = event.detail.value;
let data = {
title: title
};
util.request(api.SelectOption,data).then(res => {
this.setData({
Options: res.data.selecttoupiao
})
})
}
WXML代码
javascript
<view style="height: 20px;"></view>
<view class="view-suo">
<input class="info-sousuo" type="text" placeholder="请输入会议标题进行搜索" bindconfirm="onSearch"/>
</view>
<block wx:for-items="{{Options}}" wx:for-item="item" wx:key="item.id">
<l-card type="cover" image="{{item.seatPic !=null? item.seatPic : '/static/persons/6.png'}}" title="{{item.title}}" style="margin-top: 10px;">
<l-slide-view height="120" width="650" slide-width="340">
<view slot="left" class="left">
<view class='left-con' style="margin-top: 30px;">
<text class='left-title'>投票标题:《{{item.optionValue}}》</text>
</view>
</view>
<view slot="right" class="right">
<view style="background-color:#9eb0fb;width: 100px;height: 100px;color: white;" >
<view style="margin: 20px 5px 5px 14px;">投票</view>
</view>
<view style="background-color: #728cf8;width: 100px;height: 100px;color: white;">
<view style="margin: 20px 5px 5px 14px;">报表</view>
</view>
<view style="background-color: #e45c6c;width: 100px;height: 100px;color: white;">
<view style="margin: 10px 5px 5px 14px;">结束会议</view>
</view>
</view>
</l-slide-view>
</l-card>
</block>
效果展示
2.模态框显示选项
投票数据表的字段非常简单,只需要拿到所选投票的id与投票人员的id即可
首先我们需要一个模态框作为载体来加载投票标题的投票选项
OptionMapper.xml
XML
<!--根据投票标题查询选项 -->
<select id="voting" resultType="java.util.Map" parameterType="java.lang.String" >
select *from t_oa_meeting_option where 1=1
<if test="optionValue != null and optionValue != '' ">
AND optionValue LIKE CONCAT('%', #{optionValue}, '%')
</if>
</select>
Controller代码
java
//根据投票标题查询选项
@RequestMapping("/voting")
public Object voting(String optionValue) {
List<Map> voting = optionMapper.voting(optionValue);
Map<Object, Object> data = new HashMap<Object, Object>();
data.put("voting", voting);
return ResponseUtil.ok(data);
}
在config/api.js配置后端接口
java
voting:WxApiRoot+'home/voting',//根据投票标题查询选项
JS代码
javascript
//打开投票模态框并向后端拿值
openModal: function (e) {
let optionValue = e.currentTarget.dataset.value;
// console.log('传递的值:', optionValue);
let data = {
optionValue: optionValue
};
util.request(api.voting, data).then(res => {
this.setData({
votes: res.data.voting,
showModal: true
})
})
},
//关闭投票模态框
closeModel(){
this.setData({
selectedOption:'',
showModal: false
})
},
//保存用户所选择的选项
radioChange: function (e) {
const value = e.detail.value;
this.setData({
selectedOption: value
});
}
WXML代码
html
<!-- 模态框 -->
<view wx:if="{{showModal}}" class="modal">
<view class="modal-content">
<!-- 单选框 -->
<radio-group bindchange="radioChange">
<label wx:for="{{votes}}" wx:key="{{index}}" class="radio-label">
<radio value="{{item.id}}" checked>{{item.optionText}}</radio>
</label>
</radio-group>
<!-- 按钮 -->
<view>
<button bindtap="confirmVote">确定</button>
<button bindtap="closeModel">取消</button>
</view>
</view>
</view>
这里有个小地方需要注意我在投票的view上绑定了**data-value="{{item.optionValue}}**也就是投票标题,当打开模态框的时候,就会带着这个投票标题找到相应的选项出来。
效果演示
3.确认投票
到这一步就可以说是非常简单了,我们只需要保存用户所选的是什么选项,并将值传到后端进行保存即可。
VoteMapper.xml
XML
<insert id="insertSelective" parameterType="com.zking.minoa.model.Vote" >
insert into t_oa_meeting_vote
<trim prefix="(" suffix=")" suffixOverrides="," >
<if test="id != null" >
id,
</if>
<if test="optionid != null" >
optionId,
</if>
<if test="personid != null" >
personId,
</if>
</trim>
<trim prefix="values (" suffix=")" suffixOverrides="," >
<if test="id != null" >
#{id,jdbcType=VARCHAR},
</if>
<if test="optionid != null" >
#{optionid,jdbcType=VARCHAR},
</if>
<if test="personid != null" >
#{personid,jdbcType=BIGINT},
</if>
</trim>
</insert>
Controller代码
java
//投票
@RequestMapping("/option")
public Object add(int optionId) {
System.out.println(optionId);
Vote vote=new Vote();
vote.setOptionid(optionId);
vote.setPersonid(7);
int i = voteMapper.insertSelective(vote);
return ResponseUtil.ok();
}
这里没有进行用户登录的操作所以人的id就先定死 。
在config/api.js配置后端接口
java
option:WxApiRoot+'home/option',//用户投票
JS代码
javascript
//用户投票
confirmVote: function () {
const optionId = this.data.selectedOption;
let data = {
optionId: optionId
};
util.request(api.option, data).then(res => {
console.log(res)
this.setData({
showModal: false
})
})
}
效果展示
四、整体效果演示
到这里我的分享就结束了,欢迎到评论区探讨交流!!
💖如果觉得有用的话还请点个赞吧 💖