• 【微信小程序】数字化会议OA系统之投票模块（附源码）

    🎉🎉欢迎来到我的CSDN主页！🎉🎉

    🏅我是Java方文山，一个在CSDN分享笔记的博主。📚📚

    🌟推荐给大家我的专栏《微信小程序开发实战》。🎯🎯

    👉点击这里，就可以查看我的主页啦！👇👇

    Java方文山的个人主页

    🎁如果感觉还不错的话请给我点赞吧！🎁🎁

    💖期待你的加入，一起学习，一起进步！💖💖

    请添加图片描述

    前言

    开会是企业中必不可少的一种沟通方式，可以让团队成员之间交流思想，协调工作进度，解决问题等。但是，过于频繁和冗长的会议可能会浪费时间和资源，影响工作效率。

    在公司中，如果每个小事情都要开会，那么很容易造成员工的厌烦和不满。这样的会议可能会让人感到无聊、浪费时间，甚至失去动力。因此，企业应该合理安排会议，选择适当的时间和场合，避免不必要的会议，并确保会议的目的明确、内容简洁、效率高效，因此鄙人开发了一个数字化会议OA系统。

    这篇文章主讲投票模块的实现，其中包括发布投票信息，用户选择所属会议的投票标题内容进行投票、投票的数据报表等实现。

    一、投票模块页面搭建

    【微信小程序】自定义组件布局会议OA其他页面（附源码）icon-default.png?t=N7T8http://t.csdnimg.cn/lLeMU页面搭建与自定义组件的编写在这篇文章中提过，这里只做粗略的讲述。

    1.顶部导航栏

    我们可以根据自定义组件完成，首先在相应的json文件中引用自定义组件。

    1.   "usingComponents": {
    2.     "tabs": "/components/tabs/tabs"
    3.   }

     随后在js文件中定义我们所需要展示的内容。

      tabs: ['发起投票', '投票进行中', '已结束投票', '全部投票']

     最后直接在wxml中应用即可。

    <tabs tabList="{{tabs}}" bindtabsItemChange="tabsItemChange">tabs>

     效果展示：

     2.定义内容切换事件

    我们这里与会议管理有些不同，我们会议管理是点击不同的菜单显示不同的数据，但是这个的内容可就不是数据了，而是各不相同的组件，所以针对这个事情我们要做一个内容切换事件。

    首先在我们的wxml中定义好每个菜单需要展示的内容并写好hidden样式

    1.   <view class="{{componentStatus[0] ? '' : 'hidden'}}">发起投票view>
    2.   <view class="{{componentStatus[1] ? '' : 'hidden'}}">投票进行中view>
    3.   <view class="{{componentStatus[2] ? '' : 'hidden'}}">已结束投票view>
    4.   <view class="{{componentStatus[3] ? '' : 'hidden'}}">全部投票view>
    1. .hidden {
    2.   display: none;
    3. }

    在js中定义好属性与事件

     componentStatus: [true,false, false, false]
    1.   tabsItemChange(e) {
    2.     let index = e.detail.index;
    3.     //全部的组件赋值为false
    4.     const lists = [false, false, false, false];
    5.     //将所点击的组件赋值为true
    6.     lists[index] = true;
    7.     this.setData({
    8.       componentStatus: lists // 更新 data 中的 componentStatus 属性值
    9.     });
    10.   }

     效果展示：

     温馨提示：

    因为在写这篇博客之前，我就已经完成了功能，并且模块中的样式没有进行相应的标记，所以这里就放上我投票模块的所有样式,避免大家在进行编写的时候因为样式问题而导致效果出不来的情况。

    wxss

    1. /* pages/vote/list/list.wxss */
    2. .hidden {
    3.   display: none;
    4. }
    5.  
    6. .title-view {
    7.   background-color: beige;
    8.   font-weight: 700;
    9.   padding-left: 7px;
    10. }
    11.  
    12. .info-title {
    13.   padding: 5px 5px 10px 5px;
    14.   border-top: 1px solid rgb(129, 129, 127);
    15. }
    16.  
    17. .info-text {
    18.   height: 100px;
    19.   padding: 5px 5px 10px 5px;
    20.   border-top: 1px solid rgb(129, 129, 127);
    21. }
    22.  
    23. .image {
    24.   padding-left: 55px;
    25.   display: flex;
    26.   align-items: center;
    27. }
    28.  
    29. .time {
    30.   border-top: 1px solid rgb(129, 129, 127);
    31.   padding: 5px 0px 5px 0px;
    32.   display: flex;
    33.   align-items: center;
    34. }
    35.  
    36. .image-container {
    37.   padding-left: 60px;
    38. }
    39.  
    40. .info-sousuo {
    41.   margin-left: 85px;
    42.   padding-left: 20px;
    43.   border-radius: 25px;
    44.   border: 4px solid rgb(214, 214, 98);
    45.   width: 250px;
    46. }
    47.  
    48.  
    49. /* pages/meeting/list/list.wxss */
    50. .section{
    51.   color: #aaa;
    52.   display: flex;
    53.   justify-content: center;
    54. }
    55.  
    56. .list-info {
    57.   margin-top: 10px;
    58.   color: #aaa;
    59. }
    60.  
    61. .list-num {
    62.   color: #e40909;
    63.   font-weight: 700;
    64. }
    65.  
    66. .join {
    67.   padding: 0px 0px 0px 10px;
    68.   color: #aaa;
    69. }
    70.  
    71. .state {
    72.   margin: 0px 6px 0px 6px;
    73.   border: 1px solid #93b9ff;
    74.   color: #93b9ff;
    75. }
    76.  
    77. .list-tag {
    78.   padding: 3px 0px 10px 0px;
    79.   display: flex;
    80.   align-items: center;
    81. }
    82.  
    83. .list-title {
    84.   display: flex;
    85.   justify-content: space-between;
    86.   color: #333;
    87.   font-weight: 900;
    88.  
    89.  
    90. }
    91. .yyy{
    92.   display: flex;
    93.   align-items: center;
    94. }
    95. .list-img{
    96.   height: 300rpx;
    97.   width: 90%;
    98.   border-radius: 50rpx;
    99.   margin: 5px 5px 5px 20px;
    100. }
    101. .centered {
    102.   display: flex;  /* 设置为弹性容器 */
    103.   justify-content: center;  /* 子元素水平方向居中对齐 */
    104. }
    105.  
    106.  
    107. .video-img {
    108.   width: 100px;
    109.   height: 100px;
    110. }
    111.  
    112. .list {
    113.  
    114.   border-bottom: 1px solid #6b6e74;
    115.   padding: 10px;
    116. }
    117.  
    118. .mobi-text {
    119.   font-weight: 700;
    120.   padding: 15px;
    121. }
    122.  
    123. .mobi-icon {
    124.   border-left: 5px solid #e40909;
    125. }
    126.  
    127. .mobi-title {
    128.   background-color: rgba(158, 158, 142, 0.678);
    129.   margin: 10px 0px 10px 0px;
    130. }
    131.  
    132. .swiper-item {
    133.   height: 300rpx;
    134.   width: 100%;
    135.   border-radius: 10rpx;
    136. }
    137.  
    138. .userinfo {
    139.   display: flex;
    140.   flex-direction: column;
    141.   align-items: center;
    142.   color: #aaa;
    143. }
    144.  
    145. .userinfo-avatar {
    146.   overflow: hidden;
    147.   width: 128rpx;
    148.   height: 128rpx;
    149.   margin: 20rpx;
    150.   border-radius: 50%;
    151. }
    152.  
    153. .usermotto {
    154.   margin-top: 200px;
    155. }
    156.  
    157.  
    158. .filx{
    159.   display: flex;
    160.   align-items: center;
    161. }
    162. .container {
    163.   padding: 20px;
    164. }
    165.  
    166. .modal-container {
    167.   position: fixed;
    168.   top: 50%;
    169.   left: 50%;
    170.   transform: translate(-50%, -50%);
    171.   background-color: #fff;
    172.   width: 80%;
    173.   max-height: 80%;
    174.   overflow-y: auto;
    175.   padding: 20px;
    176. }
    177.  
    178. .mask {
    179.   position: fixed;
    180.   top: 0;
    181.   left: 0;
    182.   width: 100%;
    183.   height: 100%;
    184.   background-color: rgba(0, 0, 0, 0.5);
    185. }
    186.  
    187. button {
    188.   display: block;
    189.   margin-top: 10px;
    190. }
    191.  
    192. .content {
    193.   margin-top: 10px;
    194.   border: 1px solid #ccc;
    195.   padding: 10px;
    196. }
    197. .right{
    198.   display: flex;
    199.   align-items: center;
    200. }

    二、发起投票

    1.初始数据

    首先最基本的就是要拿到数据，但是这个数据可不是乱拿的，我们先来看一下表数据。

    我们要拿到state值为5的数据，只有该数据才是通过了审核并且还未结束的会议，所以能进行投票，明确了目标现在开始敲代码吧。

    InfoMapper.xml

    1.   <select id="votelist" resultMap="BaseResultMap"  >
    2.     select
    3.     <include refid="Base_Column_List" />
    4.     from t_oa_meeting_info
    5.     where state=5
    6.   select>

    Controller代码

    1. //创建投票的会议信息
    2.     @RequestMapping("/vote")
    3.     public Object votelist(Info info) {
    4.         List infoList = infoMapper.votelist(info);
    5.         Map data = new HashMap();
    6.         data.put("infoList",infoList);
    7.         return ResponseUtil.ok(data);
    8.     }

     在config/api.js配置后端接口

    1. // 以下是业务服务器API地址
    2.  // 本机开发API地址
    3.  var WxApiRoot = 'http://localhost:8080/wx/';
    4.  // 测试环境部署api地址
    5.  // var WxApiRoot = 'http://192.168.0.101:8070/demo/wx/';
    6.  // 线上平台api地址
    7.  //var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';
    8.  
    9.  module.exports = {
    10.    IndexUrl: WxApiRoot + 'home/index', //首页数据接口
    11.    SwiperImgs: WxApiRoot+'swiperImgs', //轮播图
    12.    MettingInfos: WxApiRoot+'meeting/list', //会议信息
    13.    VoteInfos:WxApiRoot+'home/vote',//可发起投票会议信息
    14.    OptionInfos:WxApiRoot+'home/add',//发布投票信息
    15.    SelectOption:WxApiRoot+'home/selectOptions'//查看可进行投票信息
    16.  };

     JS代码

    引入后端接口配置文件 

    const api = require("../../config/api.js")

     可发起投票会议信息的ajax

    1.   loadvoteInfos() {
    2.     util.request(api.VoteInfos).then(res => {
    3.       // console.log(res.data.infoList)
    4.       this.setData({
    5.         lists: res.data.infoList
    6.       })
    7.     })
    8.   }

     在onLoad函数中调用该方法

    WXML代码

    2. <view class="{{componentStatus[0] ? '' : 'hidden'}}">
    3.   <block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    4.     <view>
    5.       <image bindtap="showModal" data-id="{{item}}" class="list-img" mode="scaleToFill" src="{{item.seatpic !=null? item.seatpic : '/static/persons/6.png'}}">image>
    6.     view>
    7.     <view class="centered">
    8.       <view class="list" data-id="{{item.id}}">
    9.         <view class="yyy">
    10.           <view class="list-title"><text>{{item.title}}text>view>
    11.           <view class="join"><text class="list-num">{{tools.getNumber(item.canyuze,item.liexize,item.item.zhuchiren)}}text>人报名view>
    12.         view>
    13.         <view class="list-info"><text>{{item.location}}text>|<text>{{tools.formatDate(item.starttime)}}text>view>
    14.       view>
    15.     view>
    16.   block>
    17.  
    18. view>

     注意：将代码放入所需要展示内容的view中。

    效果展示

    2.模态框实现发布 

    这里我给大家捋一下我的思路，当我点击会议信息的时候就会弹出一个模态框，模态框的内容有显示该会议的标题、输入投票的标题、新增选项、删除选项、发布投票、取消发布等。我需要将我所点击的会议信息的标题传入模态框中，并且可以获取投票标题和选项内容的文本内容并进行保存，等我点击发布投票的时候就会将保存的内容传值给后端。

    数据库展示

    OptionMapper.xml

    1.   <insert id="insertSelective" parameterType="com.zking.minoa.model.Option">
    2.     INSERT INTO t_oa_meeting_option
    3.     <trim prefix="(" suffix=")" suffixOverrides=",">
    4.       <if test="id != null">
    5.         id,
    6.       if>
    7.       <if test="meetingId != null">
    8.         meetingId,
    9.       if>
    10.       <if test="optionValue != null">
    11.         optionValue,
    12.       if>
    13.       <if test="optionText != null">
    14.         optionText,
    15.       if>
    16.     trim>
    17.     <trim prefix="VALUES (" suffix=")" suffixOverrides=",">
    18.       <if test="id != null">
    19.         #{id, jdbcType=INTEGER},
    20.       if>
    21.       <if test="meetingId != null">
    22.         #{meetingId, jdbcType=INTEGER},
    23.       if>
    24.       <if test="optionValue != null">
    25.         #{optionValue, jdbcType=VARCHAR},
    26.       if>
    27.       <if test="optionText != null">
    28.         #{optionText, jdbcType=VARCHAR},
    29.       if>
    30.     trim>
    31.   insert>

    Controller代码

    1. //发布投票
    2.     @RequestMapping("/add")
    3.     public Object add(@RequestBody Map obj) {
    4.         System.out.println(obj);
    5.  
    6.         //获取选项数组的长度来控制新增的次数
    7.         int optionsLength = ((List)obj.get("options")).size();
    8.         //循环添加投票数据
    9.         for (int i = 0; i < optionsLength; i++) {
    10.             //初始化option
    11.             Option option = new Option();
    12.             List options = (List) obj.get("options");
    13.             option.setmeetingId((Integer) obj.get("modalConId"));//会议id
    14.             String firstOption = options.get(i);
    15.             option.setoptionValue((String)obj.get("title"));//投票标题
    16.             option.setoptionText(firstOption);//选项内容
    17.             //调取添加的方法
    18.             int insert = optionMapper.insertSelective(option);
    19.         }
    20.         return ResponseUtil.ok();
    21.     }

    这里需要注意是一个投票选项就是一条数据，所以我们要先拿到前端的选择数组的长度，从而进行遍历添加数据，同一批请求的投票标题与会议id肯定是一致的所以不用变动。

     在config/api.js配置后端接口

     OptionInfos:WxApiRoot+'home/add',//发布投票信息

    JS代码

    1. //投票标题的监听事件
    2.   bindTitle: function (e) {
    3.     this.setData({
    4.       title: e.detail.value
    5.     })
    6.   },
    7.   // 输入框输入事件，保存输入的内容到相应的选项
    8.   bindInput(e) {
    9.     console.log(e)
    10.     const { index } = e.currentTarget.dataset; // 获取当前选项的索引
    11.     const { value } = e.detail;
    12.     const { options } = this.data;
    13.     options[index] = value;
    14.  
    15.     this.setData({
    16.       options: options
    17.     });
    18.   },
    19.  
    20.   // 添加选项
    21.   addOption() {
    22.     const { options, optionCount } = this.data;
    23.     options.push('');
    24.     this.setData({
    25.       options: options,
    26.       optionCount: optionCount + 1
    27.     });
    28.   },
    29.  
    30.   // 删除选项
    31.   deleteOption() {
    32.     const { options, optionCount } = this.data;
    33.     options.pop();
    34.     this.setData({
    35.       options: options,
    36.       optionCount: optionCount - 1
    37.     });
    38.   }, 
    39.   // 确认按钮点击事件
    40.   confirm() {
    41.     let modalConId = this.data.modalConId;//会议id
    42.     let title = this.data.title;//投票标题
    43.     let options = this.data.options;//选项内容
    44.  
    45.     let data = {
    46.       modalConId: modalConId,
    47.       options: options,
    48.       title: title
    49.     };
    50.     // console.log(data)
    51.     util.request(api.OptionInfos, data, 'POST').then(res => {
    52.       // console.log(res)
    53.       this.setData({
    54.         modalVisible: false,
    55.         optionCount: 1
    56.       });
    57.     })
    58.  
    59.   },
    60.   // 取消按钮点击事件
    61.   cancel() {
    62.     this.setData({
    63.       modalVisible: false,
    64.       optionCount: 1
    65.     });
    66.   }

     事件中提到的变量在data中定义即可，这里就不做展示了

    WXML代码

    1.   
    2.   <view wx:if="{{modalVisible}}">
    3.     <view class="mask">view>
    4.     <view class="modal-container">
    5.       <h1>{{modalContent}}h1>
    6.       <view style="margin-top: 20px;" class="filx">
    7.         <l-button type="default" bindtap="addOption" style="padding: 0px 10px 0px 0px;">添加选项l-button>
    8.         <l-button type="warning" bindtap="deleteOption" wx:if="{{optionCount > 1}}">删除选项l-button>
    9.       view>
    10.         <span style="margin-right: 30px;">投票标题：span>
    11.       <input type="text" placeholder="请输入投票标题" bindinput="bindTitle" style="width: 300px;border: 3px solid rgb(7, 7, 7);" />
    12.  
    13.       <view wx:for="{{options}}" wx:key="{{index}}">
    14.         <span style="margin-right: 30px;">选项{{index+1}}：span>
    15.         <input type="text" value="{{item}}" bindinput="bindInput" data-index="{{index}}" style="width: 300px;border: 3px solid rgb(7, 7, 7);" />
    16.       view>
    17.  
    18.       <view class="filx" style="margin-top: 20px;">
    19.         <l-button bindtap="confirm" type="success" style="padding: 0px 10px 0px 0px;">发布投票l-button>
    20.         <l-button bindtap="cancel" type="error">取消l-button>
    21.       view>
    22.  
    23.     view>
    24.   view>

     我这里还引用了小程序框架LinUI可以丰富我的页面，不懂的可以看官网哦！！

    结合我们刚刚的页面数据再看看效果

    三、用户投票

    1.初始数据

    OptionMapper.xml

    1.  <select id="selecttoupiao" resultType="java.util.Map" parameterType="java.lang.String">
    2.     SELECT
    3.     id,
    4.     optionValue,
    5.     optionText,
    6.     title,
    7.     seatPic
    8.     FROM (
    9.     SELECT
    10.     t_oa_meeting_option.id,
    11.     t_oa_meeting_option.optionValue,
    12.     t_oa_meeting_option.optionText,
    13.     t_oa_meeting_info.title,
    14.     t_oa_meeting_info.seatPic,
    15.     ROW_NUMBER() OVER (PARTITION BY t_oa_meeting_option.optionValue ORDER BY t_oa_meeting_option.id) AS row_num
    16.     FROM
    17.     t_oa_meeting_option
    18.     JOIN t_oa_meeting_info ON t_oa_meeting_option.meetingId = t_oa_meeting_info.id
    19.     WHERE
    20.     t_oa_meeting_info.state = 5
    21.     ) subquery
    22.     WHERE row_num = 1
    23.     <if test="title != null and title != ''">
    24.       AND title LIKE CONCAT('%', #{title}, '%')
    25.     if>
    26.   select>

    Controller代码

    1.   //带模糊查询的会议信息
    2.     @RequestMapping("/selectOptions")
    3.     public Object selectOptions(String title) {
    4.         System.out.println(title);
    5.         List selecttoupiao = optionMapper.selecttoupiao(title);
    6.         Map data = new HashMap();
    7.         data.put("selecttoupiao", selecttoupiao);
    8.         return ResponseUtil.ok(data);
    9.     }

     在config/api.js配置后端接口

       SelectOption:WxApiRoot+'home/selectOptions'//查看可进行投票信息

    在投票页面我使用了LinUI的滑动菜单和卡片布局。

     利用好框架我们写起来就会简单许多只需要将数据进行绑定即可，但为了让用户有更好的体验，所以我加了一个搜索框，用户可进行模糊查询自己所需要投票的会议。

    JS代码

    1.    //加载投票会议信息的ajax
    2.    loadoptinos() {
    3.     util.request(api.SelectOption).then(res => {
    4.       // console.log(res.data.selecttoupiao)
    5.       this.setData({
    6.         Options: res.data.selecttoupiao
    7.       })
    8.     })
    9.   },
    10.  // 监听搜索事件
    11.    onSearch: function(event) {
    12.     var title = event.detail.value;
    13.     let data = {
    14.       title: title
    15.     };
    16.     util.request(api.SelectOption,data).then(res => {
    17.       this.setData({
    18.         Options: res.data.selecttoupiao
    19.       })
    20.     })
    21.   }

     WXML代码

    1. "height: 20px;">
    2.   <view class="view-suo"> 
    3.   <input class="info-sousuo" type="text" placeholder="请输入会议标题进行搜索" bindconfirm="onSearch"/>
    4.   view>
    5.  
    6.   <block wx:for-items="{{Options}}" wx:for-item="item" wx:key="item.id">
    7.   <l-card type="cover" image="{{item.seatPic !=null? item.seatPic : '/static/persons/6.png'}}" title="{{item.title}}" style="margin-top: 10px;">
    8.     <l-slide-view height="120" width="650" slide-width="340">
    9.       <view slot="left" class="left">
    10.         <view class='left-con' style="margin-top: 30px;">
    11.           <text class='left-title'>投票标题：《{{item.optionValue}}》text>
    12.         view>
    13.       view>
    14.       <view slot="right" class="right">
    15.         <view style="background-color:#9eb0fb;width: 100px;height: 100px;color: white;" >
    16.         <view style="margin: 20px 5px 5px 14px;">投票view>
    17.         view>
    18.         <view style="background-color: #728cf8;width: 100px;height: 100px;color: white;">
    19.           <view style="margin: 20px 5px 5px 14px;">报表view>
    20.         view>
    21.         <view style="background-color: #e45c6c;width: 100px;height: 100px;color: white;">
    22.           <view style="margin: 10px 5px 5px 14px;">结束会议view>
    23.         view>
    24.       view>
    25.     l-slide-view>
    26.   l-card>
    27. block>

     效果展示

    2.模态框显示选项

    投票数据表的字段非常简单，只需要拿到所选投票的id与投票人员的id即可

    首先我们需要一个模态框作为载体来加载投票标题的投票选项

    OptionMapper.xml

    1.   
    2.   <select id="voting" resultType="java.util.Map" parameterType="java.lang.String" >
    3.     select *from t_oa_meeting_option where 1=1
    4.     <if test="optionValue != null and optionValue != '' ">
    5.       AND optionValue LIKE CONCAT('%', #{optionValue}, '%')
    6.     if>
    7.   select>

     Controller代码

    1.    //根据投票标题查询选项
    2.     @RequestMapping("/voting")
    3.     public Object voting(String optionValue) {
    4.         List voting = optionMapper.voting(optionValue);
    5.         Map data = new HashMap();
    6.         data.put("voting", voting);
    7.         return ResponseUtil.ok(data);
    8.     }

     在config/api.js配置后端接口

      voting:WxApiRoot+'home/voting',//根据投票标题查询选项

    JS代码

    1.  //打开投票模态框并向后端拿值
    2.   openModal: function (e) {
    3.     let optionValue = e.currentTarget.dataset.value;
    4.     // console.log('传递的值：', optionValue);
    5.     let data = {
    6.       optionValue: optionValue
    7.     };
    8.     util.request(api.voting, data).then(res => {
    9.       this.setData({
    10.         votes: res.data.voting,
    11.         showModal: true
    12.       })
    13.     })
    14.   },
    15.   //关闭投票模态框
    16.   closeModel(){
    17.     this.setData({
    18.       selectedOption:'',
    19.       showModal: false
    20.     })
    21.   },
    22. //保存用户所选择的选项
    23.   radioChange: function (e) {
    24.     const value = e.detail.value;
    25.     this.setData({
    26.       selectedOption: value
    27.     });
    28.   }

    WXML代码

    2. <view wx:if="{{showModal}}" class="modal">
    3.   <view class="modal-content">
    4.     
    5.     <radio-group bindchange="radioChange">
    6.       <label wx:for="{{votes}}" wx:key="{{index}}" class="radio-label">
    7.         <radio value="{{item.id}}" checked>{{item.optionText}}radio>
    8.       label>
    9.     radio-group>
    10.     
    11.     <view>
    12.       <button bindtap="confirmVote">确定button>
    13.       <button bindtap="closeModel">取消button>
    14.     view>
    15.   view>
    16. view>

    这里有个小地方需要注意我在投票的view上绑定了data-value="{{item.optionValue}}也就是投票标题，当打开模态框的时候，就会带着这个投票标题找到相应的选项出来。

    效果演示

    3.确认投票

     到这一步就可以说是非常简单了，我们只需要保存用户所选的是什么选项，并将值传到后端进行保存即可。

    VoteMapper.xml

    1. <insert id="insertSelective" parameterType="com.zking.minoa.model.Vote" >
    2.     insert into t_oa_meeting_vote
    3.     <trim prefix="(" suffix=")" suffixOverrides="," >
    4.       <if test="id != null" >
    5.         id,
    6.       if>
    7.       <if test="optionid != null" >
    8.         optionId,
    9.       if>
    10.       <if test="personid != null" >
    11.         personId,
    12.       if>
    13.     trim>
    14.     <trim prefix="values (" suffix=")" suffixOverrides="," >
    15.       <if test="id != null" >
    16.         #{id,jdbcType=VARCHAR},
    17.       if>
    18.       <if test="optionid != null" >
    19.         #{optionid,jdbcType=VARCHAR},
    20.       if>
    21.       <if test="personid != null" >
    22.         #{personid,jdbcType=BIGINT},
    23.       if>
    24.     trim>
    25.   insert>

     Controller代码

    1.    //投票
    2.     @RequestMapping("/option")
    3.     public Object add(int optionId) {
    4.         System.out.println(optionId);
    5.         Vote vote=new Vote();
    6.         vote.setOptionid(optionId);
    7.         vote.setPersonid(7);
    8.         int i = voteMapper.insertSelective(vote);
    9.         return ResponseUtil.ok();
    10.     }

    这里没有进行用户登录的操作所以人的id就先定死 。

     在config/api.js配置后端接口

       option:WxApiRoot+'home/option',//用户投票

    JS代码

    1. //用户投票
    2.   confirmVote: function () {
    3.     const optionId = this.data.selectedOption;
    4.     let data = {
    5.       optionId: optionId
    6.     };
    7.     util.request(api.option, data).then(res => {
    8.       console.log(res)
    9.       this.setData({
    10.         showModal: false
    11.       })
    12.     })
    13.   }

    效果展示

    四、整体效果演示

     请添加图片描述​

    到这里我的分享就结束了，欢迎到评论区探讨交流！！

    💖如果觉得有用的话还请点个赞吧 💖

  • 相关阅读:
    远距离WiFi模组方案，实现移动设备之间高效通信，无人机远程图传应用
    八叉树的范围和射线检测
    读《凤凰架构》- RPC的历史与知识
    Kafka~基础原理与架构了解
    Vant组件库入门知识
    高性能mysql-查询性能优化
    【k8s 高级调度--亲和力/反亲和力】
    5原型模式
    linux批量修改多个文件的同一部分内容
    Linux环境安装mysql8.0
  • 原文地址：https://blog.csdn.net/weixin_74318097/article/details/134019145