springboot +html +vue153相亲网站设计与实现

博主介绍：专注于Java（springboot ssm 等开发框架） vue  .net  php phython node.js    uniapp 微信小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设，从业十五余年开发设计教学工作
☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟
我的博客空间发布了2000+毕设题目 方便大家学习使用
感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人
文末下方有源码获取地址

4.2 功能结构设计

图4.1即为设计的管理员功能结构，管理员权限操作的功能包括管理婚礼公司，管理婚礼公司预约信息，管理结婚案例，管理相亲信息，管理相亲留言，管理用户等。

图4.1 管理员功能结构

图4.2即为设计的用户功能结构，用户权限操作的功能包括预约婚礼公司，收藏婚礼公司，查看结婚案例以及相亲信息，对相亲信息进行留言等。

图4.2 用户功能结构

4.3 数据库设计

4.3.1 数据库概念设计

1. 图4.8即为上面介绍的实体中存在的联系。

图4.8 实体间关系E-R图

4.3.2 数据库物理设计

本小节主要任务即是根据上述内容进行数据存储结构的设计，实体的属性就用来表示字段名称，不同的字段表示的数据类型以及取值都不相同，以及该表各个字段是否能够保持空等进行说明，设计完成一张数据表的结构之后，在保存时同样要命名，尽量选择英文名称进行命名并保存，还不容易导致系统出错。接下来就对设计的表进行简单说明。

表4.1 婚礼公司表

字段	注释	类型	空
id (主键)	主键	int(11)	否
hunligongsi_name	婚礼公司名称	varchar(200)	是
hunligongsi_photo	婚礼公司照片	varchar(200)	是
hunligongsi_address	公司位置	varchar(200)	是
hunligongsi_guimo	公司规模	varchar(200)	是
hunligongsi_zijin	注册资金	varchar(200)	是
hunligongsi_content	公司介绍	text	是
create_time	创建时间	timestamp	是

表4.2 婚礼公司收藏表

字段	注释	类型	空
id (主键)	主键	int(11)	否
hunligongsi_id	婚礼公司	int(11)	是
yonghu_id	用户	int(11)	是
hunligongsi_collection_types	类型	int(11)	是
insert_time	收藏时间	timestamp	是
create_time	创建时间	timestamp	是

表4.3 婚礼公司预约表

字段	注释	类型	空
id (主键)	主键	int(11)	否
hunligongsi_order_uuid_number	预约唯一编号	varchar(200)	是
hunligongsi_id	婚礼公司	int(11)	是
yonghu_id	用户	int(11)	是
yuyue_time	预约时间	timestamp	是
insert_time	添加时间	timestamp	是
create_time	创建时间	timestamp	是

表4.4 结婚案例表

字段	注释	类型	空
id (主键)	主键	int(11)	否
hunligongsi_order_uuid_number	结婚案例编号	varchar(200)	是
jiehunanli_name	结婚案例名称	varchar(200)	是
jiehunanli_photo	结婚案例照片	varchar(200)	是
jiehunanli_content	结婚案例详情	text	是
insert_time	添加时间	timestamp	是
create_time	创建时间	timestamp	是

表4.5 结婚案例收藏表

字段	注释	类型	空
id (主键)	主键	int(11)	否
jiehunanli_id	结婚案例	int(11)	是
yonghu_id	用户	int(11)	是
jiehunanli_collection_types	类型	int(11)	是
insert_time	收藏时间	timestamp	是
create_time	创建时间	timestamp	是

表4.6 管理员表

字段	注释	类型	空
id (主键)	主键	bigint(20)	否
username	用户名	varchar(100)	否
password	密码	varchar(100)	否
role	角色	varchar(100)	是
addtime	新增时间	timestamp	否

表4.7 相亲表

字段	注释	类型	空
id (主键)	主键	int(11)	否
yonghu_id	用户	int(11)	是
xiangqin_name	姓名	varchar(200)	是
sex_types	性别	int(11)	是
xiangqin_photo	照片	varchar(200)	是
shuxiang	属相	varchar(200)	是
youwuzinv	有无子女	varchar(200)	是
xuexing	血型	varchar(200)	是
tizhong	体重(kg)	int(11)	是
zhiye	职业	varchar(200)	是
gongsixingzhi	公司性质	varchar(200)	是
yuexin	月薪	varchar(200)	是
geren_content	个人介绍	text	是
gongzuo_content	工作情况	text	是
jiating_content	家庭情况	text	是
zeou_content	择偶意向	text	是
insert_time	添加时间	timestamp	是
create_time	创建时间	timestamp	是

表4.8 相亲收藏表

字段	注释	类型	空
id (主键)	主键	int(11)	否
xiangqin_id	相亲	int(11)	是
yonghu_id	用户	int(11)	是
xiangqin_collection_types	类型	int(11)	是
insert_time	收藏时间	timestamp	是
create_time	创建时间	timestamp	是

表4.9 相亲留言表

字段	注释	类型	空
id (主键)	主键	int(11)	否
xiangqin_id	相亲	int(11)	是
yonghu_id	用户	int(11)	是
xiangqin_liuyan_text	留言内容	text	是
reply_text	回复内容	text	是
insert_time	留言时间	timestamp	是
update_time	回复时间	timestamp	是
create_time	创建时间	timestamp	是

表4.10 用户表

字段	注释	类型	空
id (主键)	主键	int(11)	否
username	账户	varchar(200)	是
password	密码	varchar(200)	是
yonghu_name	用户姓名	varchar(200)	是
yonghu_phone	用户手机号	varchar(200)	是
yonghu_id_number	用户身份证号	varchar(200)	是
yonghu_photo	用户头像	varchar(200)	是
create_time	创建时间	timestamp	是

第5章 系统实现

编程人员在搭建的开发环境中，会让各种编程技术一起呈现出最终效果。本节就展示关键部分的页面效果。

5.1 管理员功能实现

5.1.1 婚礼公司管理

图5.1 即为编码实现的婚礼公司管理界面，婚礼公司信息包括婚礼公司名称，婚礼公司位置，婚礼公司规模，注册资金等信息，管理员修改婚礼公司信息，新增婚礼公司，删除婚礼公司等。

图5.1 婚礼公司管理界面

package com.controller;

import java.io.File;
import java.math.BigDecimal;
import java.net.URL;
import java.text.SimpleDateFormat;
import com.alibaba.fastjson.JSONObject;
import java.util.*;
import org.springframework.beans.BeanUtils;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import com.service.TokenService;
import com.utils.*;
import java.lang.reflect.InvocationTargetException;

import com.service.DictionaryService;
import org.apache.commons.lang3.StringUtils;
import com.annotation.IgnoreAuth;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.entity.*;
import com.entity.view.*;
import com.service.*;
import com.utils.PageUtils;
import com.utils.R;
import com.alibaba.fastjson.*;

/**
 * 婚礼公司收藏
 * 后端接口
 * @author
 * @email
*/
@RestController
@Controller
@RequestMapping("/hunligongsiCollection")
public class HunligongsiCollectionController {
    private static final Logger logger = LoggerFactory.getLogger(HunligongsiCollectionController.class);

    @Autowired
    private HunligongsiCollectionService hunligongsiCollectionService;


    @Autowired
    private TokenService tokenService;
    @Autowired
    private DictionaryService dictionaryService;

    //级联表service
    @Autowired
    private HunligongsiService hunligongsiService;
    @Autowired
    private YonghuService yonghuService;



    /**
    * 后端列表
    */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params, HttpServletRequest request){
        logger.debug("page方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(false)
            return R.error(511,"永不会进入");
        else if("用户".equals(role))
            params.put("yonghuId",request.getSession().getAttribute("userId"));
        if(params.get("orderBy")==null || params.get("orderBy")==""){
            params.put("orderBy","id");
        }
        PageUtils page = hunligongsiCollectionService.queryPage(params);

        //字典表数据转换
        List<HunligongsiCollectionView> list =(List<HunligongsiCollectionView>)page.getList();
        for(HunligongsiCollectionView c:list){
            //修改对应字典表字段
            dictionaryService.dictionaryConvert(c, request);
        }
        return R.ok().put("data", page);
    }

    /**
    * 后端详情
    */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id, HttpServletRequest request){
        logger.debug("info方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
        HunligongsiCollectionEntity hunligongsiCollection = hunligongsiCollectionService.selectById(id);
        if(hunligongsiCollection !=null){
            //entity转view
            HunligongsiCollectionView view = new HunligongsiCollectionView();
            BeanUtils.copyProperties( hunligongsiCollection , view );//把实体数据重构到view中

                //级联表
                HunligongsiEntity hunligongsi = hunligongsiService.selectById(hunligongsiCollection.getHunligongsiId());
                if(hunligongsi != null){
                    BeanUtils.copyProperties( hunligongsi , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setHunligongsiId(hunligongsi.getId());
                }
                //级联表
                YonghuEntity yonghu = yonghuService.selectById(hunligongsiCollection.getYonghuId());
                if(yonghu != null){
                    BeanUtils.copyProperties( yonghu , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setYonghuId(yonghu.getId());
                }
            //修改对应字典表字段
            dictionaryService.dictionaryConvert(view, request);
            return R.ok().put("data", view);
        }else {
            return R.error(511,"查不到数据");
        }

    }

    /**
    * 后端保存
    */
    @RequestMapping("/save")
    public R save(@RequestBody HunligongsiCollectionEntity hunligongsiCollection, HttpServletRequest request){
        logger.debug("save方法:,,Controller:{},,hunligongsiCollection:{}",this.getClass().getName(),hunligongsiCollection.toString());

        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(false)
            return R.error(511,"永远不会进入");
        else if("用户".equals(role))
            hunligongsiCollection.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));

        Wrapper<HunligongsiCollectionEntity> queryWrapper = new EntityWrapper<HunligongsiCollectionEntity>()
            .eq("hunligongsi_id", hunligongsiCollection.getHunligongsiId())
            .eq("yonghu_id", hunligongsiCollection.getYonghuId())
            .eq("hunligongsi_collection_types", hunligongsiCollection.getHunligongsiCollectionTypes())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        HunligongsiCollectionEntity hunligongsiCollectionEntity = hunligongsiCollectionService.selectOne(queryWrapper);
        if(hunligongsiCollectionEntity==null){
            hunligongsiCollection.setInsertTime(new Date());
            hunligongsiCollection.setCreateTime(new Date());
            hunligongsiCollectionService.insert(hunligongsiCollection);
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }

    /**
    * 后端修改
    */
    @RequestMapping("/update")
    public R update(@RequestBody HunligongsiCollectionEntity hunligongsiCollection, HttpServletRequest request){
        logger.debug("update方法:,,Controller:{},,hunligongsiCollection:{}",this.getClass().getName(),hunligongsiCollection.toString());

        String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");
//        else if("用户".equals(role))
//            hunligongsiCollection.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
        //根据字段查询是否有相同数据
        Wrapper<HunligongsiCollectionEntity> queryWrapper = new EntityWrapper<HunligongsiCollectionEntity>()
            .notIn("id",hunligongsiCollection.getId())
            .andNew()
            .eq("hunligongsi_id", hunligongsiCollection.getHunligongsiId())
            .eq("yonghu_id", hunligongsiCollection.getYonghuId())
            .eq("hunligongsi_collection_types", hunligongsiCollection.getHunligongsiCollectionTypes())
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        HunligongsiCollectionEntity hunligongsiCollectionEntity = hunligongsiCollectionService.selectOne(queryWrapper);
        if(hunligongsiCollectionEntity==null){
            hunligongsiCollectionService.updateById(hunligongsiCollection);//根据id更新
            return R.ok();
        }else {
            return R.error(511,"表中有相同数据");
        }
    }

    /**
    * 删除
    */
    @RequestMapping("/delete")
    public R delete(@RequestBody Integer[] ids){
        logger.debug("delete:,,Controller:{},,ids:{}",this.getClass().getName(),ids.toString());
        hunligongsiCollectionService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }


    /**
     * 批量上传
     */
    @RequestMapping("/batchInsert")
    public R save( String fileName){
        logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
        try {
            List<HunligongsiCollectionEntity> hunligongsiCollectionList = new ArrayList<>();//上传的东西
            Map<String, List<String>> seachFields= new HashMap<>();//要查询的字段
            Date date = new Date();
            int lastIndexOf = fileName.lastIndexOf(".");
            if(lastIndexOf == -1){
                return R.error(511,"该文件没有后缀");
            }else{
                String suffix = fileName.substring(lastIndexOf);
                if(!".xls".equals(suffix)){
                    return R.error(511,"只支持后缀为xls的excel文件");
                }else{
                    URL resource = this.getClass().getClassLoader().getResource("static/upload/" + fileName);//获取文件路径
                    File file = new File(resource.getFile());
                    if(!file.exists()){
                        return R.error(511,"找不到上传文件，请联系管理员");
                    }else{
                        List<List<String>> dataList = PoiUtil.poiImport(file.getPath());//读取xls文件
                        dataList.remove(0);//删除第一行，因为第一行是提示
                        for(List<String> data:dataList){
                            //循环
                            HunligongsiCollectionEntity hunligongsiCollectionEntity = new HunligongsiCollectionEntity();
//                            hunligongsiCollectionEntity.setHunligongsiId(Integer.valueOf(data.get(0)));   //婚礼公司 要改的
//                            hunligongsiCollectionEntity.setYonghuId(Integer.valueOf(data.get(0)));   //用户 要改的
//                            hunligongsiCollectionEntity.setHunligongsiCollectionTypes(Integer.valueOf(data.get(0)));   //类型 要改的
//                            hunligongsiCollectionEntity.setInsertTime(date);//时间
//                            hunligongsiCollectionEntity.setCreateTime(date);//时间
                            hunligongsiCollectionList.add(hunligongsiCollectionEntity);


                            //把要查询是否重复的字段放入map中
                        }

                        //查询是否重复
                        hunligongsiCollectionService.insertBatch(hunligongsiCollectionList);
                        return R.ok();
                    }
                }
            }
        }catch (Exception e){
            return R.error(511,"批量插入数据异常，请联系管理员");
        }
    }





    /**
    * 前端列表
    */
    @IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params, HttpServletRequest request){
        logger.debug("list方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));

        // 没有指定排序字段就默认id倒序
        if(StringUtil.isEmpty(String.valueOf(params.get("orderBy")))){
            params.put("orderBy","id");
        }
        PageUtils page = hunligongsiCollectionService.queryPage(params);

        //字典表数据转换
        List<HunligongsiCollectionView> list =(List<HunligongsiCollectionView>)page.getList();
        for(HunligongsiCollectionView c:list)
            dictionaryService.dictionaryConvert(c, request); //修改对应字典表字段
        return R.ok().put("data", page);
    }

    /**
    * 前端详情
    */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id, HttpServletRequest request){
        logger.debug("detail方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
        HunligongsiCollectionEntity hunligongsiCollection = hunligongsiCollectionService.selectById(id);
            if(hunligongsiCollection !=null){


                //entity转view
                HunligongsiCollectionView view = new HunligongsiCollectionView();
                BeanUtils.copyProperties( hunligongsiCollection , view );//把实体数据重构到view中

                //级联表
                    HunligongsiEntity hunligongsi = hunligongsiService.selectById(hunligongsiCollection.getHunligongsiId());
                if(hunligongsi != null){
                    BeanUtils.copyProperties( hunligongsi , view ,new String[]{ "id", "createDate"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setHunligongsiId(hunligongsi.getId());
                }
                //级联表
                    YonghuEntity yonghu = yonghuService.selectById(hunligongsiCollection.getYonghuId());
                if(yonghu != null){
                    BeanUtils.copyProperties( yonghu , view ,new String[]{ "id", "createDate"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setYonghuId(yonghu.getId());
                }
                //修改对应字典表字段
                dictionaryService.dictionaryConvert(view, request);
                return R.ok().put("data", view);
            }else {
                return R.error(511,"查不到数据");
            }
    }


    /**
    * 前端保存
    */
    @RequestMapping("/add")
    public R add(@RequestBody HunligongsiCollectionEntity hunligongsiCollection, HttpServletRequest request){
        logger.debug("add方法:,,Controller:{},,hunligongsiCollection:{}",this.getClass().getName(),hunligongsiCollection.toString());
        Wrapper<HunligongsiCollectionEntity> queryWrapper = new EntityWrapper<HunligongsiCollectionEntity>()
            .eq("hunligongsi_id", hunligongsiCollection.getHunligongsiId())
            .eq("yonghu_id", hunligongsiCollection.getYonghuId())
            .eq("hunligongsi_collection_types", hunligongsiCollection.getHunligongsiCollectionTypes())
            ;
        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        HunligongsiCollectionEntity hunligongsiCollectionEntity = hunligongsiCollectionService.selectOne(queryWrapper);
        if(hunligongsiCollectionEntity==null){
            hunligongsiCollection.setInsertTime(new Date());
            hunligongsiCollection.setCreateTime(new Date());
        hunligongsiCollectionService.insert(hunligongsiCollection);
            return R.ok();
        }else {
            return R.error(511,"您已经收藏过了");
        }
    }


}

vue代码

<template>
    <div class="main-content">

        <!-- 条件查询 -->
        <div v-if="showFlag">
            <el-form :inline="true" :model="searchForm" class="form-content">
                <el-row :gutter="20" class="slt" :style="{justifyContent:contents.searchBoxPosition=='1'?'flex-start':contents.searchBoxPosition=='2'?'center':'flex-end'}">
                 
                     <el-form-item :label="contents.inputTitle == 1 ? '婚礼公司名称' : ''">
                         <el-input prefix-icon="el-icon-search" v-model="searchForm.hunligongsiName" placeholder="婚礼公司名称" clearable></el-input>
                     </el-form-item>
                                                


                    <el-form-item>
                        <el-button type="success" @click="search()">查询<i class="el-icon-search el-icon--right"/></el-button>
                    </el-form-item>
                </el-row>
                <el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
                    <el-form-item>
                        <el-button
                                v-if="isAuth('hunligongsi','新增')"
                                type="success"
                                icon="el-icon-plus"
                                @click="addOrUpdateHandler()"
                        >新增</el-button>
                        &nbsp;
                        <el-button
                                v-if="isAuth('hunligongsi','删除')"
                                :disabled="dataListSelections.length <= 0"
                                type="danger"
                                icon="el-icon-delete"
                                @click="deleteHandler()"
                        >删除</el-button>
                        &nbsp;
                        <el-button
                                v-if="isAuth('hunligongsi','报表')"
                                type="success"
                                icon="el-icon-pie-chart"
                                @click="chartDialog()"
                        >报表</el-button>
                        &nbsp;
                        <a style="text-decoration:none" class="el-button el-button--success"
                           v-if="isAuth('hunligongsi','导入导出')"
                           icon="el-icon-download"
                           href="http://localhost:8080/xiangqinwangzhan/upload/hunligongsiMuBan.xls"
                        >批量导入婚礼公司数据模板</a>
                        &nbsp;
                        <el-upload
                                v-if="isAuth('hunligongsi','导入导出')"
                                style="display: inline-block"
                                action="xiangqinwangzhan/file/upload"
                                :on-success="hunligongsiUploadSuccess"
                                :on-error="hunligongsiUploadError"
                                :show-file-list = false>
                            <el-button
                                    v-if="isAuth('hunligongsi','导入导出')"
                                    type="success"
                                    icon="el-icon-upload2"
                            >批量导入婚礼公司数据</el-button>
                        </el-upload>
                        &nbsp;
                        <!-- 导出excel -->
                        <download-excel v-if="isAuth('hunligongsi','导入导出')" style="display: inline-block" class = "export-excel-wrapper" :data = "dataList" :fields = "json_fields" name = "hunligongsi.xls">
                            <!-- 导出excel -->
                            <el-button
                                    type="success"
                                    icon="el-icon-download"
                            >导出</el-button>
                        </download-excel>
                        &nbsp;
                    </el-form-item>
                </el-row>
            </el-form>
            <div class="table-content">
                <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
                          :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
                          :border="contents.tableBorder"
                          :fit="contents.tableFit"
                          :stripe="contents.tableStripe"
                          :row-style="rowStyle"
                          :cell-style="cellStyle"
                          :style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
                          v-if="isAuth('hunligongsi','查看')"
                          :data="dataList"
                          v-loading="dataListLoading"
                          @selection-change="selectionChangeHandler">
                    <el-table-column  v-if="contents.tableSelection"
                                      type="selection"
                                      header-align="center"
                                      align="center"
                                      width="50">
                    </el-table-column>
                    <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />

                    <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
                                   prop="hunligongsiName"
                                   header-align="center"
                                   label="婚礼公司名称">
                        <template slot-scope="scope">
                            {{scope.row.hunligongsiName}}
                        </template>
                    </el-table-column>
                    <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="hunligongsiPhoto"
                                     header-align="center"
                                     width="200"
                                     label="婚礼公司照片">
                        <template slot-scope="scope">
                            <div v-if="scope.row.hunligongsiPhoto">
                                <img :src="scope.row.hunligongsiPhoto" width="100" height="100">
                            </div>
                            <div v-else>无图片</div>
                        </template>
                    </el-table-column>

                    <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
                                   prop="hunligongsiAddress"
                                   header-align="center"
                                   label="公司位置">
                        <template slot-scope="scope">
                            {{scope.row.hunligongsiAddress}}
                        </template>
                    </el-table-column>

                    <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
                                   prop="hunligongsiGuimo"
                                   header-align="center"
                                   label="公司规模">
                        <template slot-scope="scope">
                            {{scope.row.hunligongsiGuimo}}
                        </template>
                    </el-table-column>

                    <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
                                   prop="hunligongsiZijin"
                                   header-align="center"
                                   label="注册资金">
                        <template slot-scope="scope">
                            {{scope.row.hunligongsiZijin}}
                        </template>
                    </el-table-column>

                    <el-table-column width="300" :align="contents.tableAlign"
                                     header-align="center"
                                     label="操作">
                        <template slot-scope="scope">
                            <el-button v-if="isAuth('hunligongsi','查看')" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">详情</el-button>
                            <el-button v-if="isAuth('hunligongsi','修改')" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">修改</el-button>
                            <el-button v-if="isAuth('hunligongsi','删除')" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">删除</el-button>

                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        clsss="pages"
                        :layout="layouts"
                        @size-change="sizeChangeHandle"
                        @current-change="currentChangeHandle"
                        :current-page="pageIndex"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="Number(contents.pageEachNum)"
                        :total="totalPage"
                        :small="contents.pageStyle"
                        class="pagination-content"
                        :background="contents.pageBtnBG"
                        :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
                ></el-pagination>
            </div>
        </div>
        <!-- 添加/修改页面  将父组件的search方法传递给子组件-->
        <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>



        <el-dialog title="统计报表" :visible.sync="chartVisiable" width="800">
            <el-date-picker
                    v-model="echartsDate"
                    type="year"
                    placeholder="选择年">
            </el-date-picker>
            <el-button @click="chartDialog()">查询</el-button>
            <div id="statistic" style="width:100%;height:600px;"></div>
            <span slot="footer" class="dialog-footer">
				<el-button @click="chartVisiable = false">返回</el-button>
			</span>
        </el-dialog>

    </div>
</template>
<script>
    import AddOrUpdate from "./add-or-update";
    import styleJs from "../../../utils/style.js";
    export default {
        data() {
        return {
            searchForm: {
                key: ""
            },
            sessionTable : "",//登录账户所在表名
            role : "",//权限
            userId:"",//当前登录人的id
    //级联表下拉框搜索条件
    //当前表下拉框搜索条件
            form:{
                id : null,
                hunligongsiName : null,
                hunligongsiPhoto : null,
                hunligongsiAddress : null,
                hunligongsiGuimo : null,
                hunligongsiZijin : null,
                hunligongsiContent : null,
                createTime : null,
            },
            dataList: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListLoading: false,
            dataListSelections: [],
            showFlag: true,
            sfshVisiable: false,
            shForm: {},
            chartVisiable: false,
            echartsDate: new Date(),//echarts的时间查询字段
            addOrUpdateFlag:false,
            contents:null,
            layouts: '',

            //导出excel
            json_fields: {
                //级联表字段
                //本表字段
                     '婚礼公司名称': "hunligongsiName",
                     '婚礼公司照片': "hunligongsiPhoto",
                     '公司位置': "hunligongsiAddress",
                     '公司规模': "hunligongsiGuimo",
                     '注册资金': "hunligongsiZijin",
            },

            };
        },
        created() {
            this.contents = styleJs.listStyle();
            this.init();
            this.getDataList();
            this.contentStyleChange()
        },
        mounted() {
            //获取当前登录用户的信息
            this.sessionTable = this.$storage.get("sessionTable");
            this.role = this.$storage.get("role");
            this.userId = this.$storage.get("userId");

        },
        filters: {
            htmlfilter: function (val) {
                return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
            }
        },
        components: {
            AddOrUpdate,
        },
        computed: {
        },
        methods: {
            chartDialog() {
                let _this = this;
                let params = {
                    dateFormat :"%Y", //%Y-%m
                    riqi :_this.echartsDate.getFullYear(),
                    thisTable : {//当前表
                        tableName :"hunligongsi",//当前表表名,
                        sumColum : 'hunligongsi_number', //求和字段
                        date : 'insert_time',//分组日期字段
                        // string : 'hunligongsi_name',//分组字符串字段
                        // types : 'hunligongsi_types',//分组下拉框字段
                    },
                    // joinTable : {//级联表（可以不存在）
                    //     tableName :"yonghu",//级联表表名
                    //     // date : 'insert_time',//分组日期字段
                    //     string : 'yonghu_name',//分组字符串字段
                    //     // types : 'yonghu_types',//分组下拉框字段
                    // }
                }
                _this.chartVisiable = true;
                _this.$nextTick(() => {
                    var statistic = this.$echarts.init(document.getElementById("statistic"), 'macarons');
                    this.$http({
                        url: "barSum",
                        method: "get",
                        params: params
                    }).then(({data}) => {
                        if(data && data.code === 0){

                            //柱状图 求和 已成功使用
                            //start
                            let yAxisName = "数值";//根据查询数据具体改(单列要改,多列不改)
                            let xAxisName = "月份";
                            let series = [];//具体数据值
                            data.data.yAxis.forEach(function (item,index) {
                                let tempMap = {};
                                // tempMap.name= ["数值"];//根据查询数据具体改(单列要改,多列不改)
                                tempMap.name=data.data.legend[index];
                                tempMap.type='bar';
                                tempMap.data=item;
                                series.push(tempMap);

                            })

                            var option = {
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'cross',
                                        crossStyle: {
                                            color: '#999'
                                        }
                                    }
                                },
                                toolbox: {
                                    feature: {
                                        // dataView: { show: true, readOnly: false },  // 数据查看
                                        magicType: { show: true, type: ['line', 'bar'] },//切换图形展示方式
                                        // restore: { show: true }, // 刷新
                                        saveAsImage: { show: true }//保存
                                    }
                                },
                                legend: {
                                    data: data.data.legend//标题  可以点击导致某一列数据消失
                                },
                                xAxis: [
                                    {
                                        type: 'category',
                                        name: xAxisName,
                                        data: data.data.xAxis,
                                        axisPointer: {
                                            type: 'shadow'
                                        }
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value',//不能改
                                        name: yAxisName,//y轴单位
                                        axisLabel: {
                                            formatter: '{value}' // 后缀
                                        }
                                    }
                                ],
                                series:series//具体数据
                            };
                            // 使用刚指定的配置项和数据显示图表。
                            statistic.setOption(option,true);
                            //根据窗口的大小变动图表
                            window.onresize = function () {
                                statistic.resize();
                            };
                            //end
                        }else {
                            this.$message({
                                message: "报表未查询到数据",
                                type: "success",
                                duration: 1500,
                                onClose: () => {
                                    this.search();
                                }
                            });
                        }
                    });
                });
                ////饼状图
                //_this.chartVisiable = true;
                // this.$nextTick(()=>{
                //     var statistic = this.$echarts.init(document.getElementById("statistic"),'macarons');
                //     let params = {
                //         tableName: "hunligongsi",
                //         groupColumn: "hunligongsi_types",
                //     }
                //     this.$http({
                //         url: "newSelectGroupCount",
                //         method: "get",
                //         params: params
                //     }).then(({data}) => {
                //         if (data && data.code === 0) {
                //             let res = data.data;
                //             let xAxis = [];
                //             let yAxis = [];
                //             let pArray = []
                //             for(let i=0;i<res.length;i++){
                //                 xAxis.push(res[i].name);
                //                 yAxis.push(res[i].value);
                //                 pArray.push({
                //                     value: res[i].value,
                //                     name: res[i].name
                //                 })
                //                 var option = {};
                //                 option = {
                //                     title: {
                //                         text: '保险合同类型统计',
                //                         left: 'center'
                //                     },
                //                     tooltip: {
                //                         trigger: 'item',
                //                         formatter: '{b} : {c} ({d}%)'
                //                     },
                //                     series: [
                //                         {
                //                             type: 'pie',
                //                             radius: '55%',
                //                             center: ['50%', '60%'],
                //                             data: pArray,
                //                             emphasis: {
                //                                 itemStyle: {
                //                                     shadowBlur: 10,
                //                                     shadowOffsetX: 0,
                //                                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                //                                 }
                //                             }
                //                         }
                //                     ]
                //                 };
                //                 statistic.setOption(option);
                //                 window.onresize = function() {
                //                     statistic.resize();
                //                 };
                //             }
                //         }
                //     });
                // })
            },
            contentStyleChange() {
                this.contentSearchStyleChange()
                this.contentBtnAdAllStyleChange()
                this.contentSearchBtnStyleChange()
                this.contentTableBtnStyleChange()
                this.contentPageStyleChange()
            },
            contentSearchStyleChange() {
                this.$nextTick(() => {
                    document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el => {
                        let textAlign = 'left'
                        if(this.contents.inputFontPosition == 2)
                            textAlign = 'center'
                            if (this.contents.inputFontPosition == 3) textAlign = 'right'
                                el.style.textAlign = textAlign
                            el.style.height = this.contents.inputHeight
                            el.style.lineHeight = this.contents.inputHeight
                            el.style.color = this.contents.inputFontColor
                            el.style.fontSize = this.contents.inputFontSize
                            el.style.borderWidth = this.contents.inputBorderWidth
                            el.style.borderStyle = this.contents.inputBorderStyle
                            el.style.borderColor = this.contents.inputBorderColor
                            el.style.borderRadius = this.contents.inputBorderRadius
                            el.style.backgroundColor = this.contents.inputBgColor
                    })
                    if (this.contents.inputTitle) {
                        document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el => {
                            el.style.color = this.contents.inputTitleColor
                            el.style.fontSize = this.contents.inputTitleSize
                            el.style.lineHeight = this.contents.inputHeight
                        })
                    }
                    setTimeout(() => {
                        document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el => {
                            el.style.color = this.contents.inputIconColor
                            el.style.lineHeight = this.contents.inputHeight
                        })
                        document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el => {
                            el.style.color = this.contents.inputIconColor
                            el.style.lineHeight = this.contents.inputHeight
                        })
                        document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el => {
                            el.style.lineHeight = this.contents.inputHeight
                        })
                    }, 10 )
                })
            },
            // 搜索按钮
            contentSearchBtnStyleChange() {
                this.$nextTick(() => {
                    document.querySelectorAll('.form-content .slt .el-button--success').forEach(el => {
                        el.style.height = this.contents.searchBtnHeight
                        el.style.color = this.contents.searchBtnFontColor
                        el.style.fontSize = this.contents.searchBtnFontSize
                        el.style.borderWidth = this.contents.searchBtnBorderWidth
                        el.style.borderStyle = this.contents.searchBtnBorderStyle
                        el.style.borderColor = this.contents.searchBtnBorderColor
                        el.style.borderRadius = this.contents.searchBtnBorderRadius
                        el.style.backgroundColor = this.contents.searchBtnBgColor
                    })
                })
            },
            // 新增、批量删除
            contentBtnAdAllStyleChange() {
                this.$nextTick(() => {
                    document.querySelectorAll('.form-content .ad .el-button--success').forEach(el => {
                        el.style.height = this.contents.btnAdAllHeight
                        el.style.color = this.contents.btnAdAllAddFontColor
                        el.style.fontSize = this.contents.btnAdAllFontSize
                        el.style.borderWidth = this.contents.btnAdAllBorderWidth
                        el.style.borderStyle = this.contents.btnAdAllBorderStyle
                        el.style.borderColor = this.contents.btnAdAllBorderColor
                        el.style.borderRadius = this.contents.btnAdAllBorderRadius
                        el.style.backgroundColor = this.contents.btnAdAllAddBgColor
                    })
                    document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el => {
                        el.style.height = this.contents.btnAdAllHeight
                        el.style.color = this.contents.btnAdAllDelFontColor
                        el.style.fontSize = this.contents.btnAdAllFontSize
                        el.style.borderWidth = this.contents.btnAdAllBorderWidth
                        el.style.borderStyle = this.contents.btnAdAllBorderStyle
                        el.style.borderColor = this.contents.btnAdAllBorderColor
                        el.style.borderRadius = this.contents.btnAdAllBorderRadius
                        el.style.backgroundColor = this.contents.btnAdAllDelBgColor
                    })
                    document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el => {
                        el.style.height = this.contents.btnAdAllHeight
                        el.style.color = this.contents.btnAdAllWarnFontColor
                        el.style.fontSize = this.contents.btnAdAllFontSize
                        el.style.borderWidth = this.contents.btnAdAllBorderWidth
                        el.style.borderStyle = this.contents.btnAdAllBorderStyle
                        el.style.borderColor = this.contents.btnAdAllBorderColor
                        el.style.borderRadius = this.contents.btnAdAllBorderRadius
                        el.style.backgroundColor = this.contents.btnAdAllWarnBgColor
                    })
                })
            },
            // 表格
            rowStyle({row, rowIndex}) {
                if (rowIndex % 2 == 1) {
                    if (this.contents.tableStripe) {
                        return {color: this.contents.tableStripeFontColor}
                    }
                } else {
                    return ''
                }
            },
            cellStyle({row, rowIndex}) {
                if (rowIndex % 2 == 1) {
                    if (this.contents.tableStripe) {
                        return {backgroundColor: this.contents.tableStripeBgColor}
                    }
                } else {
                    return ''
                }
            },
            headerRowStyle({row, rowIndex}) {
                return {color: this.contents.tableHeaderFontColor}
            },
            headerCellStyle({row, rowIndex}) {
                return {backgroundColor: this.contents.tableHeaderBgColor}
            },
            // 表格按钮
            contentTableBtnStyleChange() {
                // this.$nextTick(()=>{
                //   setTimeout(()=>{
                //     document.querySelectorAll('.table-content .tables .el-table__body .el-button--success').forEach(el=>{
                //       el.style.height = this.contents.tableBtnHeight
                //       el.style.color = this.contents.tableBtnDetailFontColor
                //       el.style.fontSize = this.contents.tableBtnFontSize
                //       el.style.borderWidth = this.contents.tableBtnBorderWidth
                //       el.style.borderStyle = this.contents.tableBtnBorderStyle
                //       el.style.borderColor = this.contents.tableBtnBorderColor
                //       el.style.borderRadius = this.contents.tableBtnBorderRadius
                //       el.style.backgroundColor = this.contents.tableBtnDetailBgColor
                //     })
                //     document.querySelectorAll('.table-content .tables .el-table__body .el-button--primary').forEach(el=>{
                //       el.style.height = this.contents.tableBtnHeight
                //       el.style.color = this.contents.tableBtnEditFontColor
                //       el.style.fontSize = this.contents.tableBtnFontSize
                //       el.style.borderWidth = this.contents.tableBtnBorderWidth
                //       el.style.borderStyle = this.contents.tableBtnBorderStyle
                //       el.style.borderColor = this.contents.tableBtnBorderColor
                //       el.style.borderRadius = this.contents.tableBtnBorderRadius
                //       el.style.backgroundColor = this.contents.tableBtnEditBgColor
                //     })
                //     document.querySelectorAll('.table-content .tables .el-table__body .el-button--danger').forEach(el=>{
                //       el.style.height = this.contents.tableBtnHeight
                //       el.style.color = this.contents.tableBtnDelFontColor
                //       el.style.fontSize = this.contents.tableBtnFontSize
                //       el.style.borderWidth = this.contents.tableBtnBorderWidth
                //       el.style.borderStyle = this.contents.tableBtnBorderStyle
                //       el.style.borderColor = this.contents.tableBtnBorderColor
                //       el.style.borderRadius = this.contents.tableBtnBorderRadius
                //       el.style.backgroundColor = this.contents.tableBtnDelBgColor
                //     })

                //   }, 50)
                // })
            },
            // 分页
            contentPageStyleChange() {
                let arr = []
                if (this.contents.pageTotal) arr.push('total')
                if (this.contents.pageSizes) arr.push('sizes')
                if (this.contents.pagePrevNext) {
                    arr.push('prev')
                    if (this.contents.pagePager) arr.push('pager')
                    arr.push('next')
                }
                if (this.contents.pageJumper) arr.push('jumper')
                this.layouts = arr.join()
                this.contents.pageEachNum = 10
            },

            init() {
            },
            search() {
                this.pageIndex = 1;
                this.getDataList();
            },
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true;
                let params = {
                    page: this.pageIndex,
                    limit: this.pageSize,
                    sort: 'id',
                }

                 
                if (this.searchForm.hunligongsiName!= '' && this.searchForm.hunligongsiName!= undefined) {
                    params['hunligongsiName'] = '%' + this.searchForm.hunligongsiName + '%'
                }
                                                
                params['hunligongsiDelete'] = 1// 逻辑删除字段 1 未删除 2 删除


                this.$http({
                    url: "hunligongsi/page",
                    method: "get",
                    params: params
                }).then(({data}) => {
                    if(data && data.code === 0){
                        this.dataList = data.data.list;
                        this.totalPage = data.data.total;
                    }else{
                        this.dataList = [];
                        this.totalPage = 0;
                    }
                    this.dataListLoading = false;
                });

                //查询级联表搜索条件所有列表
                //查询当前表搜索条件所有列表
            },
            //每页数
            sizeChangeHandle(val) {
                this.pageSize = val;
                this.pageIndex = 1;
                this.getDataList();
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val;
                this.getDataList();
            },
            // 多选
            selectionChangeHandler(val) {
                this.dataListSelections = val;
            },
            // 添加/修改
            addOrUpdateHandler(id, type) {
                this.showFlag = false;
                this.addOrUpdateFlag = true;
                this.crossAddOrUpdateFlag = false;
                if (type != 'info') {
                    type = 'else';
                }
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id, type);
                });
            },
            // 下载
            download(file) {
                window.open(" ${file} ")
            },
            // 删除
            deleteHandler(id) {
                var ids = id ? [Number(id)] : this.dataListSelections.map(item => {
                    return Number(item.id);
                });

                this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.$http({
                        url: "hunligongsi/delete",
                        method: "post",
                        data: ids
                    }).then(({data}) => {
                        if(data && data.code === 0){
                            this.$message({
                                message: "操作成功",
                                type: "success",
                                duration: 1500,
                                onClose: () => {
                                    this.search();
                                }
                            });
                        }else{
                            this.$message.error(data.msg);
                        }
                    });
                });
            },
            // 导入功能上传文件成功后调用导入方法
            hunligongsiUploadSuccess(data){
                let _this = this;
                _this.$http({
                    url: "hunligongsi/batchInsert?fileName=" + data.file,
                    method: "get"
                }).then(({data}) => {
                    if(data && data.code === 0){
                        _this.$message({
                            message: "导入婚礼公司数据成功",
                            type: "success",
                            duration: 1500,
                            onClose: () => {
                                _this.search();
                            }
                        });
                    }else{
                        _this.$message.error(data.msg);
                    }
                });

            },
            // 导入功能上传文件失败后调用导入方法
            hunligongsiUploadError(data){
                this.$message.error('上传失败');
            },
        }
    };
</script>
<style lang="scss" scoped>
.slt {
    margin: 0 !important;
    display: flex;
  }

  .ad {
    margin: 0 !important;
    display: flex;
  }

  .pages {
    & /deep/ el-pagination__sizes{
      & /deep/ el-input__inner {
        height: 22px;
        line-height: 22px;
      }
    }
  }


  .el-button+.el-button {
    margin:0;
  }

  .tables {
	& /deep/ .el-button--success {
		height: 30px;
		color: rgba(0, 0, 0, 1);
		font-size: 10px;
		border-width: 1px;
		border-style: none none solid none;
		border-color: #DCDFE6;
		border-radius: 0px;
		background-color: rgba(255, 255, 255, 1);
	}

	& /deep/ .el-button--primary {
		height: 30px;
		color: rgba(0, 0, 0, 1);
		font-size: 10px;
		border-width: 1px;
		border-style: none none solid none;
		border-color: #DCDFE6;
		border-radius: 0px;
		background-color: rgba(255, 255, 255, 1);
	}

	& /deep/ .el-button--danger {
		height: 30px;
		color: rgba(0, 0, 0, 1);
		font-size: 10px;
		border-width: 1px;
		border-style: none none solid none;
		border-color: #DCDFE6;
		border-radius: 0px;
		background-color: rgba(255, 255, 255, 1);
	}

    & /deep/ .el-button {
      margin: 4px;
    }
  }</style>

5.1.2 用户管理

图5.2 即为编码实现的用户管理界面，管理员在用户管理界面中可以为本界面显示的所有用户信息进行查询，修改，删除。

图5.2 用户管理界面

5.1.3 结婚案例管理

图5.3 即为编码实现的结婚案例管理界面，结婚案例信息包括结婚案例照片，结婚案例名称，结婚案例编号等信息，管理员对结婚案例信息进行增删改查管理。

图5.3 结婚案例管理界面

5.1.4 相亲管理

图5.4 即为编码实现的相亲管理界面，相亲信息包括用户姓名，血型，体重，职业，有无子女，属相，照片等信息，管理员可以修改相亲信息，新增相亲信息，查询相亲信息等。

图5.4 相亲管理界面

5.2 用户功能实现

5.2.1 婚礼公司

图5.5 即为编码实现的婚礼公司界面，用户在婚礼公司界面查看婚礼公司详情介绍，如果有需要，可以在婚礼公司界面预约婚礼公司。

图5.5 婚礼公司界面

大家点赞、收藏、关注、评论啦  其他的定制服务 商务合作  下方联系卡片↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 或者私信作者