摘
文设计实现基Web销售理系统前景介绍模块介绍系统设计系统测试简述系统业务设计实现
易销售系统属台理系统台理系统侧重点页面美观化业务流程易操作化易发布化系统美观化易操作化两方面进行文档理需求出发实现模块增删查改模块导入导出系统商机模块客户模块竞争手模块联系模块客户品牌模块项目流程模块构成项目流程分项目集采投标议标
系统项目进行特殊设计类似树结构节点控制始终展示项目基础信息节点信息展示动态信息发布实现项目高效理项目进
文第三章第二节简述项目系统界面交互原生代码divangularJs实现四级城市拉选择器等简析实现逻辑展示页面样式
关键词：销售 电商台 angularJs web
Abstract
This article designs and implements a Webbased sales management system from the introduction of prospects to the introduction of various modules to the design of the system and finally to the test of the system Briefly describe the system＇s business and design implementation
The easy sales system belongs to the background management system and the background management system has different emphases such as the appearance of the page the easy operation of the business process and the easy release This system is carried out from two aspects of aesthetics and ease of operation Starting from the requirements of document management each module has been added deleted checked and modified and individual modules have been imported and exported The system is composed of business opportunity module customer module competitor module contact module customer brand module and project flow module The project flow is divided into centralized procurement bidding and bidding of the project
The system carries out special design for the project such as using node control like tree structure always displaying basic information of the project displaying node information and publishing dynamic information so as to realize efficient management and followup of the project
The second chapter of the third chapter of this article briefly describes the system interface interaction of the project The native code and div and angularJs are used to implement the fourlevel city dropdown selector
Key words： sales ecommerce platform angularJs web
目 录
第1章 背景 1
11易销售背景 1
12易销售目 1
13相关技术介绍 1
131 JavaScript 1
132 UI框架 2
133 Java 2
第2章 易销售需求分析 3
21行性分析 3
211济分析 3
212流程线分析 3
213安全分析 3
22总体业务流程 3
第3章 易销售设计 5
31 API接口接入 5
311商机模块 5
312客户模块 5
313竞争手 6
314联系模块 7
315客户品牌模块 7
32模块构成 8
33例图 8
34流程图 9
35数库设计 12
36系统界面交互 19
361项目进程树交互 19
362动态信息交互 20
363城市四级查询 20
第4章 易销售实现 22
41 实现台 22
42商机模块 22
421商机理 22
422新增商机 23
423编辑商机 25
424商机详情 25
43客户模块 26
431客户理 26
432新增客户 27
433修改客户 29
434客户详情 30
44竞争手理模块 31
441竞争手列表 31
442新增竞争手 31
443编辑竞争手 32
444竞争手详情 32
45联系模块 33
451联系理列表 33
452编辑联系 33
453联系详情 34
46客户品牌模块 35
461客户品牌列表 35
462新增客户品牌 35
47项目模块 36
471项目页面架构 36
472项目创建 37
473项目进 38
474项目报价 38
475甲方确认开标确认 39
476设计清单 39
477合档 40
478项目理列表 40
第5章 系统测试 42
51功测试 42
第6章 结 43
参 考 文 献 44
致 谢 46
第1章 背景
11易销售背景
改革开发中国济发展迅速社会济发展第产业第三产业转型服务业行业片蓬勃景象销售产业尤突出外网络行业进十年火热起着网络发展更加喜欢网络浏览种信息网络交流日益频繁销售网络相互结合迸发更创想
相较销售文件保存信息量网络存储咨询更加更久更易维护纸张存储网络文档删存放百千年会缺损台时查方便快捷
12易销售目
支撑理求实现业务网络全面台化落销售理项理动作达支撑理求实现业务端端全面台化落销售理项理动作达销售理程数字化销售理施工理程缝接实现销售阶段生产阶段数统
13相关技术介绍
131 JavaScript
纯Js开发较繁重开发时需初阶段封装公工具类公样式达应效果需十千行代码Jquery开发便孕育生然技术会止步
发展现Js开发十分成熟集成框架流框架ReactVueAngularReact开发更适合款台开发Vue易学良文档断火热起Angular功较齐全框架良测试默认值系统采AngularJs开发AngularJs优点
（1） 采简单JavaScript编写减少TypeScript采障碍
（2） 优秀指令操作模板
（3） 强企业支持
132 UI框架
户交互页面样式求较高日常项目开发需组件般会出现复情况没必更高效编写代码采成熟UI框架成编码趋势系统采UI框架正BootStrap技术成熟UI框架现已更新迭代4版
开发需满足客户需求界面样式需编写BootStrap样式类进行调整者封装组件时编写组件达需求行编写组件锻炼组件兼容考虑全局控更学理解UI框架种样式崩塌原分析更帮助
133 Java
服务器开发语言中Java已拥难撼动位许IT公司阿里巴巴Java进行业务开发越越公司支持技术断成熟Java更广阔开发前景
Java门面象语言继承C语言种特性类设计线程接口抽象类线程枚举类类数组等更提高效率安全性
第2章 易销售需求分析
21行性分析
211济分析
项目投标竞争模式十分火热竞标项目更赚取更财富
投标程常常销售挂钩销售质东西卖出钱收回项目投标角度说营销集体招收劳动力通接受项目立项劳动力销售项目出项目成利润收回完成次销售程
易销售系统销售程进行考虑项目进项目费评估方案设计项目立项合实施项目合档程制定销售计划追求济效益高效化
212流程线分析
易销售流程线设计三条分集采投标议标
集采流程启动项目进甲方确认合审批合档
投标流程启动项目进项目报价开标确认设计清单合审批合档
议标流程启动甲方确认设计清单合审批合档
实现项目改造项目进提供业务审批流程
户通简单操作进行简单培训简单手
213安全分析
系统通设计控制权限表普通户登陆时会获取该表查询应权限信息放回前端进行控制实现实现钮户权限划分
22总体业务流程
总体业务包括商机理阶段项目推进阶段图21
图21 总体业务流程
第3章 易销售设计
31 API接口接入
311商机理模块
表11 商机理模块表
字段名称
字段描述
日志ID
系统动生成
创建ID
前登陆ID
创建
前登陆名称
创建时间
前系统时间
页面ID
新增商机页面ID
商机ID
商机ID
项目ID
项目ID
客户ID
客户ID
集采ID
集采ID
项目节点ID
项目节点ID
联系ID
联系ID
联系名称
相关联系
拜访
拜访ID拜访名称
消息标题
创建商机{商机名称}
消息容
{前登陆员名称}{系统时间}创建商机信息商机名称：{商机名称}
图片址
次服务器址
推送
推送
消息状态
未推送推送
312客户理模块
表12 客户理模块表
字段名称
字段描述
日志ID
系统动生成
创建ID
前登陆ID
创建
前登陆名称
创建时间
前系统时间
页面ID
新增客户页面ID
商机ID
商机ID
项目ID
项目ID
客户ID
客户ID
集采ID
集采ID
项目节点ID
项目节点ID
联系ID
联系ID
联系名称
消息标题
创建客户{客户名称}
消息容
{前登陆员名称}{系统时间}创建成功
图片址
次服务器址
推送
推送
消息状态
未推送推送
拜访
拜访ID拜访名称
313竞争手
表13 竞争手表
字段名称
否必填
字段描述
竞争手编号
Y
竞争手ID
竞争手名称
Y
竞争手名称
工商信息
统社会信代码
通企业信息查询接口查询返回字段存入表中
注册号
组织机构代码
企业名称
名
法定代表
公司类型
企业类型
注册资金
实缴资
企业状态
成立日期
吊销日期
发日期
营业期限
否IPO市
市公司代码
市类型
注册址
营范围
登记机关
更新日期
城市覆盖范围
存放竞争手数城市竞争手优势
竞争手简称
竞争手简称
联系址
联系址
操作
Y
修改数户
操作时间
Y
修改时间
314联系模块
表14 联系模块表
字段名称
否必填
字段描述
联系名称
模糊查询
联系手机号
精确查询
联系微信
精确查询
页数
数计算出
页面条数
默认10条
出参：
字段名称
字段描述
联系ID
联系ID
联系手机号
字符串
微信
微信名
邮箱
邮箱
现公司
现公司名称
现职位
职位
现职开始时间
新增时默认前
操作
修改数户
操作时间
修改时间
总页面数量
默认1
前页面条数
默认10条
315客户品牌模块
表15 客户品牌模块表
字段名称
否必填
字段描述
客户品牌名称
Y
客户品牌
品牌类型
Y
拉选择
总页面数量
默认1
前页面条数
默认10
出参：
字段名称
否必填
字段描述
客户品牌ID
Y
客户品牌ID
客户品牌名称
Y
30位字符
品牌类型
Y
数值型字典翻译
描述说明
备注
操作
Y
修改数户
操作时间
Y
修改时间
总页面数量
默认1
前页面条数
默认10
32模块构成
图31易销售系统模块构成
图31 模块构成
33例图
项目流程包括投标议标集采图32
图32 项目流程
项目流程模块关系图33
图33 模块关系图
34流程图
项目投标项目集采项目议标流程图图34图35图36
图34 项目投标 图35 项目集采
图36 项目议标
35数库设计
项目表
项目节点表
项目进表
甲方确认表
项目报价表
设计清单表
数库ER图图37图38图39图310
图37 商机表ER图
图38 客户表ER图
图39 项目表ER图
图310 项目流程ER图
36系统界面交互
361项目进程树交互
单项目应状态时会指针指示字体背景前阶段通进行阶段操作已通节点查通节点显示勾前处阶段显示波浪球
(1) 展示图311
图311 阶段展示
(2) 设计思路
该区域球状图标文字线条三角形构成通象属性值truefalse控制否显示容
新增时端生成节点树通节点树遍历渲染球状图标波浪球完成状态文字背景颜色者没线条灰置高亮三角形表示指针作表示前节点信息处阶段
暂存者该状态已完成退出编辑时默认展示前进行阶段果想查修改前面已完成节点点击节点
362动态信息交互
发布信息栏收起发布完信息展示方图312
图312 动态信息
考虑信息量滚动条会变长方信息发布时需做成收起发布消息版面节约高度展示发布消息
363城市四级查询
次选择前级时查找应级级信息展示需修改时点击tab栏点击查找容input框会相应改变图313
图313 城市四级查询
点击前：点击展示拉城市级选择器查询城市数开省级数
点击时：需选择时点击前级时动跳级前级赋值改变前级数
需修改时已选择城市改变省时清空已选城市展示应省城市已选中街道需更改省城市区需逻辑清应级数清空街道展示空
点击：指点值赋值关闭选择器
第4章 易销售实现
41 实现台
系统：window10
编辑器：Visual Studio Code IntelliJ IDEA 201824
程序语音：AngularJsjava
框架：heibinateBootstrap
42商机模块
421商机理
项目包含智化需求开工项目相商机需进行进时数集避免重复产项目等商机项目开工项目支持录入分期业态开工计划商机转成续销售项目时需关联期业态开工计划
（1）页面样式图41
图41 商机理页面
（2）业务说明
商机列表页面操作栏检索模块数列表模块组成
操作栏
相关操作钮
检索模块
提供：商机名称客户品牌城市商机源
城市：显示显示四级省市区街道拉列表进城市id检索城市数图42
图42 商机理城市查询
商机源：拉框显示：销售拓展外盘采集开工计划万盘开工计划
数列表
显示序号操作商机名称转化项目数转化项目总金额效项目数效项目总金额区域城市商机源客户品牌进进时间
操作：显示转销售项目钮点击钮显示该线建设期数列表图43
图43 转销售项目弹框
422商机新增
(1) 页面展示图44
图44 商机新增
(2) 业务说明
新增商机页面商机基础信息商机建设期数明细组成
商机基础信息
包含商机名称商机源城市商机进组织关联客户客户品牌商机进占面积建筑面积详细址商机品牌组成
商机进：选择弹窗显示员选择弹窗图45
图45 商机进选择弹框
商机建设期数明细
采列表方式显示显示字段：序号建设期数项目类型计划开工日期计划竣工日期备注说明操作列表允许手动输入字段值容
项目类型：允许选弹框选择图46
图46 商机建设期数明细选择器
423商机编辑
(1) 页面展示图47
图47 商机编辑
(2) 业务说明
编辑商机页面商机基础信息商机建设期数明细组成
商机基础信息包含：商机名称客户品牌关联客户商机源占面积建筑面积城市商机进商机进组织详细址商机品牌组成
商机建设期数明细采列表方式显示显示字段：序号建设期数业态计划开工日期计划竣工日期备注说明操作
424商机详情
(1) 页面样式图48
图48 商机详情页面
(2) 业务说明
页面商机基信息商机项目信息动态信息组成商机基础信息商机基础信息商机建设期数组成
操作：显示项目集采项目投标项目议标钮
43客户模块
431客户理
(1) 页面样式图49
图49 客户理页面
(2) 业务说明
客户理列表页面操作栏检索模块数列表模块组成
操作栏提供相关操作
检索模块
客户名称客户简称：模糊搜索检索包含关键字商机数
数列表
显示图中表格标题显示
新拜访时间：获取客户项目新记录信息时间允许点击
点击显示该客户拜访记录图410
图410 客户拜访记录弹框
拜访记录根时间晚早进行排序
432新增客户
(1) 页面样式图411
图411 新增客户页面
(2) 业务说明
新增客户页面企业基础信息企业工商信息企业联系信息三部分组成
客户名称输入框点击查询公司调企查查模糊查询接口获取20条企业信息采弹窗方式进行展示图432（2）
图412 企业信息弹窗
户选择中家企业调企查查精准搜索接口入参统信代码获取企业详情
统信代码：根户选择企业信息动带出支持手动输入
手动输入点击获取企业名称调企查查精准查询接口获取工商信息详情数进行回显
客户品牌：必填拉框选择拉框显示：获取客户品牌维护页面数图413
图413 客户品牌选择器
选择需录入占占说明图414
图414 占占说明样式
选择需录入
企业联系：
点击添加联系弹窗显示联系选择弹窗支持选图415
图415 添加联系选择器
选择联系企业联系列表中显示图416
图416 企业联系信息样式
列表需该职记录进行岗位设置
433修改客户
(1) 页面样式图417
图417 修改客户页面
(2) 业务说明
编辑客户页面企业基础信息企业工商信息企业联系信息三部分组成
企业联系：点击添加联系弹窗显示联系选择弹窗支持选
选择联系企业联系列表中显示
列表需职记录进行岗位设置
选择联系点击删联系选中联系进行删
已保存联系允许删允许离职操作
434客户详情
(1) 页面样式图418
图418 客户详情页面
(2) 业务说明
客户详情页面操作栏客户基信息客户项目信息动态信息组成
操作栏：查详细工商信息钮
查详细工商信息钮点击弹窗显示企业工商信息
动态信息显示该客户联系信息时间早晚进行排序显示
允许户进行动态消息发布
动态信息支持添加联系点击添加联系钮弹窗显示联系检索列表选择联系需进行二次确认提醒：
点击确认添加钮该联系履职信息中添加条职数条职数离职时间填写系统时间
点击新增联系钮进入新增联系弹窗图419
默认前添加公司
图419 新建联系弹框
44竞争手理模块
441竞争手理列表
(1) 页面展示图420
图420 竞争手理页面
(2) 业务说明
竞争手理列表页面操作栏检索模块数列表模块组成
操作栏提供相关操作
检索模块提供：竞争手名称竞争手简称
数列表显示序号竞争手名称竞争手简称关联项目数操作操作时间
442竞争手新增
(1) 页面展示图421
图421 竞争手新增
(2) 业务说明
新增竞争手页面竞争手基础信息竞争手工商信息两部分组成
企业基信息竞争手名称竞争手简称覆盖城市范围联系址组成
竞争手名称输入框失光标调企查查工商接口获取企业数
点击查询公司调企查查模糊查询接口返回20条数
统社会信代码：支持手动输入点击获取公司名称调企查查精确查询接口查询公司工商数
覆盖城市范围：显示全国行政区域二级城市进行选择
允许选择隔开
443竞争手编辑
(1) 页面展示图422
图422 竞争手编辑
(2) 业务说明
竞争手基础信息竞争手覆盖城市范围竞争手工商信息三部分组成
企业基信息竞争手名称客户品牌竞争手简称竞争手类型联系址组成
444竞争手详情
(1) 页面样式图423
图423 竞争手详情页面
(2) 业务说明
竞争手详情页面竞争手基信息竞争手项目明细组成
竞争手基信息显示相关信息
竞争手项目明细显示：序号项目名称业务类型否中标
覆盖城市范围竞争手品牌带出
45联系模块
451联系列表
(1) 页面展示图424
图424 联系页面
(2) 业务说明
客户理列表页面操作栏检索模块数列表模块组成
操作栏提供：搜索钮重置钮编辑钮删钮导出钮
数列表显示序号姓名电话微信邮箱现职公司现职位现职开始时间现职结束时间创建时间创建
姓名：允许点击点击跳转联系详情页面
452联系编辑
(1) 页面展示图425
图425 联系编辑页面
(2) 业务说明
编辑联系页面联系基础信息联系职范围两部分组成
联系基础信息姓名电话微信邮箱籍贯爱婚姻生育岗位角色组成
联系职范围：职信息显示允许操作
453联系详情
(1) 页面样式图426
图426 联系详情页面
(2) 业务说明
联系详情页面操作栏联系基信息联系项目信息组成
46客户品牌模块
461客户品牌理列表
(1) 页面展示图427
图427 客户品牌页面
(2) 业务说明
客户品牌理列表页面操作栏检索模块数列表模块组成
操作栏提供相关操作
检索模块提供模糊查询
462客户品牌理新增
(1) 页面展示图428
图428 客户品牌理新增页面
业务说明
客户品牌新增包括：客户品牌品牌类型品牌分类描述说明覆盖城市范围
覆盖城市范围：非必填品牌分类联动年份选择器添加城市钮表格构成点击添加城市时表格插入数年份应表格数
47项目模块
项目模块包括图429流程
图429 项目流程图
471项目页面架构
(1) 页面样式图430
图430 项目页面样式
(2) 说明
页面1’操作栏2’基础信息3’流程节点4’节点容展示框5’动态组成
操作栏种钮录入方便提供暂存数功
基础信息展示项目基础信息点击蓝色链接时跳转该容详细信息
流程节点展示该项目属阶段
节点容处基础信息时展示框选择容基础信息栏应数相应变化
动态项目启动会展示实现逻辑客户理模块动态
472项目流程录入
(1) 页面展示图431
图431 项目创建页面
(2) 业务说明
选择开启集采投标议标项目
操作栏
点击保存钮判断否已选择招采方式选择暂存容进入流程
点击进入阶段钮判断必填项未填提示户输入
点击两钮会生成节点树
473项目进阶段
(1) 页面展示图432
图432 项目进页面
(2) 业务说明
项目进显示：项目信息项目求三部分
项目信息显示：预计签约金额赢率预判甲方预算单方造价回标次数回标说明建筑楼层说明竞标单位家集采计划投标日期等
项目求显示：计税方式否属精装甲方目标方造价报价策略付款方式项目材料传网盘址
474项目报价阶段
(1) 页面展示图433
图433 项目报价页面
(2) 业务说明
页面显示：报价米报价设计费报价递交投标文件截止时间需求信息附件(温馨提示 允许传30M文件)
475甲方确认开标确认
(1) 页面样式图434
图434 开标确认页面
(2) 业务详情
页面显示：开标时间计划档日期竞标单位开标确认附件
476设计清单
(1) 页面样式图435
图436 设计清单页面
(2) 业务说明
页面显示：设计设计金额 计划设计开始日期计划设计完成日期前应收设计费例 前应收设计费预计收款日期清单完成时间 清单附件图纸材料
477合档
(1) 页面样式图437
图437 合档页面
(2) 业务说明
页面显示：项目名称部寄出盖章合日期合名称合文回收日期创建附件
478项目理列表
(1) 页面样式图438
图438 项目理页面
(2) 业务说明
页面操作栏检索栏列表栏组成
页面根前登陆户数权限获取项目数
操作栏显示：搜索重置编辑删导出
第5章 系统测试
51功测试
例编号
测试功模块
场景名称
预期结果
数
实际结果
DL001
商机模块详情
商机理列表查详情时商机建设期数明细没回显
正常显示
商机建设期数明细没展示
DL002
客户模块新增
客户理列表修改客户信息点击保存时校验问题
提示保存成功
客户名称：东莞市中万公司
统社会信代码：91441900MA5413BQ5
客户简称：中万
客户品牌：中万
提示请输入客户品牌
DL003
商机详情
商机理列表查详情报404
正常显示
商机理列表查详情报404
第6章 结
销售易系统觉优势：
1实现项目收集项目产出直观通xlsx文件查项目信息
2项目理集采投标议标基流程进行简单梳理提高项目工作效率定提高作
3降低项目理员培训成理员流失避免业务扩展员增加必须程中新员工新项目理熟悉成关键问题果新员工刚入职需投入老理员新员工双倍资
易销售系统设计angularJs致解然angularJs重量级开发次需网找应文件放丰富插件解echartjsxlsxqrcode等等插件js控制dom变化jQuery操作htmldom节点angularJs运象思想控制节点显示隐藏
js知识片森林路遇种分岔路找资料想通想放弃走越越深发现面路长印证书时方恨少
参 考 文 献
[1]张鑫旭 css世界[D]民邮电出版社201712
[2][美] 尼古拉斯·泽卡斯 高性JavaScript[D] 电子工业出版社201011
[3]探 JavaScript设计模式开发实践[D] 民邮电出版社20155
[4]新视角文化行 Div+CSS30网页布局实战入门精通（第2版）[D] 民邮电出版社20185
[5]徐阳丁峰 Head First HTMLCSS（第2版）[D] 中国电力出版社 2013
[6]Douglas Crockford JavaScript语言精粹[D] 电子工业出版社 2009
[7]广发证券互联网金融技术团队 揭秘Angular 2[D] 电子工业出版社 2017
[8]王芃 Angular零[D] 机械工业出版社 2017
[9]弗拉纳根 JavaScript权威指南[D] 机械工业出版社 2007
[10]郭家寶（BYVoid） Nodejs开发指南[D] 民邮电出版社 2012
[11][希] Lea Verou CSS揭秘[D] 民邮电出版社 2016
[12]Ilya Grigorik Web性权威指南[D] 民邮电出版社 2013
[13]张玮刘浩段红梅申昆玲基Web of Science童哮喘行动计划发展情况分析[J]中国生育健康杂志202031(1)2023
[14]姚海燕罗志宏米洁基Web of Science护理员信息素养文献计量分析[J]预防医学情报杂志202036(1)116121
[15]王志超马梦月基Web of Science数库视化分析碳化铁电催化剂[J]山东化工202049(2)6668
[16]周丹尹安春张秀杰基Web of Science肾脏病学领域护理研究视化分析[J]中国实护理杂志202036(4)315320
[17]沈世伟刘镜茹基Web of Science^TM海岛旅游者研究文献计量学分析[J]宁波学学报文科学版202033(1)92101
[18]黄金路傅瑶孟祥乐万丽丽霍炎卢进干润郭澄基Web of Science探讨全球阿德福韦酯相关低磷血症研究[J]中国药业202029(1)13
[19]李玲刘旭艳袁圆余雨枫基Web of Science数库关精神分裂症病病耻感研究文献计量学分析[J]循证护理20206(1)814
[20]崔佳峰国外教学领导力研究图景脉络题趋势基web of science文献关键词视化分析[J]现代教育丛2020(1)8696
[21]钟永林基Web云存储技术[J]信息记录材料2019(4)163164
[22]刘浩基web复杂表格实践[J]数字技术应201937(9)7171
[23]唐强戴康米承铁王乐关锴基Web兴趣选修理台[J]计算机技术发展201929(3)173177
[24]潘健徐志杰祝悦方力争基Web of Science处方精简研究文献计量学分析[J]中国全科医学202023(6)747754
文档香网(httpswwwxiangdangnet)户传
《香当网》用户分享的内容，不代表《香当网》观点或立场，请自行判断内容的真实性和可靠性！
该内容是文档的文本内容，更好的格式请下载文档
摘
文设计实现基Web销售理系统前景介绍模块介绍系统设计系统测试简述系统业务设计实现
易销售系统属台理系统台理系统侧重点页面美观化业务流程易操作化易发布化系统美观化易操作化两方面进行文档理需求出发实现模块增删查改模块导入导出系统商机模块客户模块竞争手模块联系模块客户品牌模块项目流程模块构成项目流程分项目集采投标议标
系统项目进行特殊设计类似树结构节点控制始终展示项目基础信息节点信息展示动态信息发布实现项目高效理项目进
文第三章第二节简述项目系统界面交互原生代码divangularJs实现四级城市拉选择器等简析实现逻辑展示页面样式
关键词：销售 电商台 angularJs web
Abstract
This article designs and implements a Webbased sales management system from the introduction of prospects to the introduction of various modules to the design of the system and finally to the test of the system Briefly describe the system＇s business and design implementation
The easy sales system belongs to the background management system and the background management system has different emphases such as the appearance of the page the easy operation of the business process and the easy release This system is carried out from two aspects of aesthetics and ease of operation Starting from the requirements of document management each module has been added deleted checked and modified and individual modules have been imported and exported The system is composed of business opportunity module customer module competitor module contact module customer brand module and project flow module The project flow is divided into centralized procurement bidding and bidding of the project
The system carries out special design for the project such as using node control like tree structure always displaying basic information of the project displaying node information and publishing dynamic information so as to realize efficient management and followup of the project
The second chapter of the third chapter of this article briefly describes the system interface interaction of the project The native code and div and angularJs are used to implement the fourlevel city dropdown selector
Key words： sales ecommerce platform angularJs web
目 录
第1章 背景 1
11易销售背景 1
12易销售目 1
13相关技术介绍 1
131 JavaScript 1
132 UI框架 2
133 Java 2
第2章 易销售需求分析 3
21行性分析 3
211济分析 3
212流程线分析 3
213安全分析 3
22总体业务流程 3
第3章 易销售设计 5
31 API接口接入 5
311商机模块 5
312客户模块 5
313竞争手 6
314联系模块 7
315客户品牌模块 7
32模块构成 8
33例图 8
34流程图 9
35数库设计 12
36系统界面交互 19
361项目进程树交互 19
362动态信息交互 20
363城市四级查询 20
第4章 易销售实现 22
41 实现台 22
42商机模块 22
421商机理 22
422新增商机 23
423编辑商机 25
424商机详情 25
43客户模块 26
431客户理 26
432新增客户 27
433修改客户 29
434客户详情 30
44竞争手理模块 31
441竞争手列表 31
442新增竞争手 31
443编辑竞争手 32
444竞争手详情 32
45联系模块 33
451联系理列表 33
452编辑联系 33
453联系详情 34
46客户品牌模块 35
461客户品牌列表 35
462新增客户品牌 35
47项目模块 36
471项目页面架构 36
472项目创建 37
473项目进 38
474项目报价 38
475甲方确认开标确认 39
476设计清单 39
477合档 40
478项目理列表 40
第5章 系统测试 42
51功测试 42
第6章 结 43
参 考 文 献 44
致 谢 46
第1章 背景
11易销售背景
改革开发中国济发展迅速社会济发展第产业第三产业转型服务业行业片蓬勃景象销售产业尤突出外网络行业进十年火热起着网络发展更加喜欢网络浏览种信息网络交流日益频繁销售网络相互结合迸发更创想
相较销售文件保存信息量网络存储咨询更加更久更易维护纸张存储网络文档删存放百千年会缺损台时查方便快捷
12易销售目
支撑理求实现业务网络全面台化落销售理项理动作达支撑理求实现业务端端全面台化落销售理项理动作达销售理程数字化销售理施工理程缝接实现销售阶段生产阶段数统
13相关技术介绍
131 JavaScript
纯Js开发较繁重开发时需初阶段封装公工具类公样式达应效果需十千行代码Jquery开发便孕育生然技术会止步
发展现Js开发十分成熟集成框架流框架ReactVueAngularReact开发更适合款台开发Vue易学良文档断火热起Angular功较齐全框架良测试默认值系统采AngularJs开发AngularJs优点
（1） 采简单JavaScript编写减少TypeScript采障碍
（2） 优秀指令操作模板
（3） 强企业支持
132 UI框架
户交互页面样式求较高日常项目开发需组件般会出现复情况没必更高效编写代码采成熟UI框架成编码趋势系统采UI框架正BootStrap技术成熟UI框架现已更新迭代4版
开发需满足客户需求界面样式需编写BootStrap样式类进行调整者封装组件时编写组件达需求行编写组件锻炼组件兼容考虑全局控更学理解UI框架种样式崩塌原分析更帮助
133 Java
服务器开发语言中Java已拥难撼动位许IT公司阿里巴巴Java进行业务开发越越公司支持技术断成熟Java更广阔开发前景
Java门面象语言继承C语言种特性类设计线程接口抽象类线程枚举类类数组等更提高效率安全性
第2章 易销售需求分析
21行性分析
211济分析
项目投标竞争模式十分火热竞标项目更赚取更财富
投标程常常销售挂钩销售质东西卖出钱收回项目投标角度说营销集体招收劳动力通接受项目立项劳动力销售项目出项目成利润收回完成次销售程
易销售系统销售程进行考虑项目进项目费评估方案设计项目立项合实施项目合档程制定销售计划追求济效益高效化
212流程线分析
易销售流程线设计三条分集采投标议标
集采流程启动项目进甲方确认合审批合档
投标流程启动项目进项目报价开标确认设计清单合审批合档
议标流程启动甲方确认设计清单合审批合档
实现项目改造项目进提供业务审批流程
户通简单操作进行简单培训简单手
213安全分析
系统通设计控制权限表普通户登陆时会获取该表查询应权限信息放回前端进行控制实现实现钮户权限划分
22总体业务流程
总体业务包括商机理阶段项目推进阶段图21
图21 总体业务流程
第3章 易销售设计
31 API接口接入
311商机理模块
表11 商机理模块表
字段名称
字段描述
日志ID
系统动生成
创建ID
前登陆ID
创建
前登陆名称
创建时间
前系统时间
页面ID
新增商机页面ID
商机ID
商机ID
项目ID
项目ID
客户ID
客户ID
集采ID
集采ID
项目节点ID
项目节点ID
联系ID
联系ID
联系名称
相关联系
拜访
拜访ID拜访名称
消息标题
创建商机{商机名称}
消息容
{前登陆员名称}{系统时间}创建商机信息商机名称：{商机名称}
图片址
次服务器址
推送
推送
消息状态
未推送推送
312客户理模块
表12 客户理模块表
字段名称
字段描述
日志ID
系统动生成
创建ID
前登陆ID
创建
前登陆名称
创建时间
前系统时间
页面ID
新增客户页面ID
商机ID
商机ID
项目ID
项目ID
客户ID
客户ID
集采ID
集采ID
项目节点ID
项目节点ID
联系ID
联系ID
联系名称
消息标题
创建客户{客户名称}
消息容
{前登陆员名称}{系统时间}创建成功
图片址
次服务器址
推送
推送
消息状态
未推送推送
拜访
拜访ID拜访名称
313竞争手
表13 竞争手表
字段名称
否必填
字段描述
竞争手编号
Y
竞争手ID
竞争手名称
Y
竞争手名称
工商信息
统社会信代码
通企业信息查询接口查询返回字段存入表中
注册号
组织机构代码
企业名称
名
法定代表
公司类型
企业类型
注册资金
实缴资
企业状态
成立日期
吊销日期
发日期
营业期限
否IPO市
市公司代码
市类型
注册址
营范围
登记机关
更新日期
城市覆盖范围
存放竞争手数城市竞争手优势
竞争手简称
竞争手简称
联系址
联系址
操作
Y
修改数户
操作时间
Y
修改时间
314联系模块
表14 联系模块表
字段名称
否必填
字段描述
联系名称
模糊查询
联系手机号
精确查询
联系微信
精确查询
页数
数计算出
页面条数
默认10条
出参：
字段名称
字段描述
联系ID
联系ID
联系手机号
字符串
微信
微信名
邮箱
邮箱
现公司
现公司名称
现职位
职位
现职开始时间
新增时默认前
操作
修改数户
操作时间
修改时间
总页面数量
默认1
前页面条数
默认10条
315客户品牌模块
表15 客户品牌模块表
字段名称
否必填
字段描述
客户品牌名称
Y
客户品牌
品牌类型
Y
拉选择
总页面数量
默认1
前页面条数
默认10
出参：
字段名称
否必填
字段描述
客户品牌ID
Y
客户品牌ID
客户品牌名称
Y
30位字符
品牌类型
Y
数值型字典翻译
描述说明
备注
操作
Y
修改数户
操作时间
Y
修改时间
总页面数量
默认1
前页面条数
默认10
32模块构成
图31易销售系统模块构成
图31 模块构成
33例图
项目流程包括投标议标集采图32
图32 项目流程
项目流程模块关系图33
图33 模块关系图
34流程图
项目投标项目集采项目议标流程图图34图35图36
图34 项目投标 图35 项目集采
图36 项目议标
35数库设计
项目表
项目节点表
项目进表
甲方确认表
项目报价表
设计清单表
数库ER图图37图38图39图310
图37 商机表ER图
图38 客户表ER图
图39 项目表ER图
图310 项目流程ER图
36系统界面交互
361项目进程树交互
单项目应状态时会指针指示字体背景前阶段通进行阶段操作已通节点查通节点显示勾前处阶段显示波浪球
(1) 展示图311
图311 阶段展示
(2) 设计思路
该区域球状图标文字线条三角形构成通象属性值truefalse控制否显示容
新增时端生成节点树通节点树遍历渲染球状图标波浪球完成状态文字背景颜色者没线条灰置高亮三角形表示指针作表示前节点信息处阶段
暂存者该状态已完成退出编辑时默认展示前进行阶段果想查修改前面已完成节点点击节点
362动态信息交互
发布信息栏收起发布完信息展示方图312
图312 动态信息
考虑信息量滚动条会变长方信息发布时需做成收起发布消息版面节约高度展示发布消息
363城市四级查询
次选择前级时查找应级级信息展示需修改时点击tab栏点击查找容input框会相应改变图313
图313 城市四级查询
点击前：点击展示拉城市级选择器查询城市数开省级数
点击时：需选择时点击前级时动跳级前级赋值改变前级数
需修改时已选择城市改变省时清空已选城市展示应省城市已选中街道需更改省城市区需逻辑清应级数清空街道展示空
点击：指点值赋值关闭选择器
第4章 易销售实现
41 实现台
系统：window10
编辑器：Visual Studio Code IntelliJ IDEA 201824
程序语音：AngularJsjava
框架：heibinateBootstrap
42商机模块
421商机理
项目包含智化需求开工项目相商机需进行进时数集避免重复产项目等商机项目开工项目支持录入分期业态开工计划商机转成续销售项目时需关联期业态开工计划
（1）页面样式图41
图41 商机理页面
（2）业务说明
商机列表页面操作栏检索模块数列表模块组成
操作栏
相关操作钮
检索模块
提供：商机名称客户品牌城市商机源
城市：显示显示四级省市区街道拉列表进城市id检索城市数图42
图42 商机理城市查询
商机源：拉框显示：销售拓展外盘采集开工计划万盘开工计划
数列表
显示序号操作商机名称转化项目数转化项目总金额效项目数效项目总金额区域城市商机源客户品牌进进时间
操作：显示转销售项目钮点击钮显示该线建设期数列表图43
图43 转销售项目弹框
422商机新增
(1) 页面展示图44
图44 商机新增
(2) 业务说明
新增商机页面商机基础信息商机建设期数明细组成
商机基础信息
包含商机名称商机源城市商机进组织关联客户客户品牌商机进占面积建筑面积详细址商机品牌组成
商机进：选择弹窗显示员选择弹窗图45
图45 商机进选择弹框
商机建设期数明细
采列表方式显示显示字段：序号建设期数项目类型计划开工日期计划竣工日期备注说明操作列表允许手动输入字段值容
项目类型：允许选弹框选择图46
图46 商机建设期数明细选择器
423商机编辑
(1) 页面展示图47
图47 商机编辑
(2) 业务说明
编辑商机页面商机基础信息商机建设期数明细组成
商机基础信息包含：商机名称客户品牌关联客户商机源占面积建筑面积城市商机进商机进组织详细址商机品牌组成
商机建设期数明细采列表方式显示显示字段：序号建设期数业态计划开工日期计划竣工日期备注说明操作
424商机详情
(1) 页面样式图48
图48 商机详情页面
(2) 业务说明
页面商机基信息商机项目信息动态信息组成商机基础信息商机基础信息商机建设期数组成
操作：显示项目集采项目投标项目议标钮
43客户模块
431客户理
(1) 页面样式图49
图49 客户理页面
(2) 业务说明
客户理列表页面操作栏检索模块数列表模块组成
操作栏提供相关操作
检索模块
客户名称客户简称：模糊搜索检索包含关键字商机数
数列表
显示图中表格标题显示
新拜访时间：获取客户项目新记录信息时间允许点击
点击显示该客户拜访记录图410
图410 客户拜访记录弹框
拜访记录根时间晚早进行排序
432新增客户
(1) 页面样式图411
图411 新增客户页面
(2) 业务说明
新增客户页面企业基础信息企业工商信息企业联系信息三部分组成
客户名称输入框点击查询公司调企查查模糊查询接口获取20条企业信息采弹窗方式进行展示图432（2）
图412 企业信息弹窗
户选择中家企业调企查查精准搜索接口入参统信代码获取企业详情
统信代码：根户选择企业信息动带出支持手动输入
手动输入点击获取企业名称调企查查精准查询接口获取工商信息详情数进行回显
客户品牌：必填拉框选择拉框显示：获取客户品牌维护页面数图413
图413 客户品牌选择器
选择需录入占占说明图414
图414 占占说明样式
选择需录入
企业联系：
点击添加联系弹窗显示联系选择弹窗支持选图415
图415 添加联系选择器
选择联系企业联系列表中显示图416
图416 企业联系信息样式
列表需该职记录进行岗位设置
433修改客户
(1) 页面样式图417
图417 修改客户页面
(2) 业务说明
编辑客户页面企业基础信息企业工商信息企业联系信息三部分组成
企业联系：点击添加联系弹窗显示联系选择弹窗支持选
选择联系企业联系列表中显示
列表需职记录进行岗位设置
选择联系点击删联系选中联系进行删
已保存联系允许删允许离职操作
434客户详情
(1) 页面样式图418
图418 客户详情页面
(2) 业务说明
客户详情页面操作栏客户基信息客户项目信息动态信息组成
操作栏：查详细工商信息钮
查详细工商信息钮点击弹窗显示企业工商信息
动态信息显示该客户联系信息时间早晚进行排序显示
允许户进行动态消息发布
动态信息支持添加联系点击添加联系钮弹窗显示联系检索列表选择联系需进行二次确认提醒：
点击确认添加钮该联系履职信息中添加条职数条职数离职时间填写系统时间
点击新增联系钮进入新增联系弹窗图419
默认前添加公司
图419 新建联系弹框
44竞争手理模块
441竞争手理列表
(1) 页面展示图420
图420 竞争手理页面
(2) 业务说明
竞争手理列表页面操作栏检索模块数列表模块组成
操作栏提供相关操作
检索模块提供：竞争手名称竞争手简称
数列表显示序号竞争手名称竞争手简称关联项目数操作操作时间
442竞争手新增
(1) 页面展示图421
图421 竞争手新增
(2) 业务说明
新增竞争手页面竞争手基础信息竞争手工商信息两部分组成
企业基信息竞争手名称竞争手简称覆盖城市范围联系址组成
竞争手名称输入框失光标调企查查工商接口获取企业数
点击查询公司调企查查模糊查询接口返回20条数
统社会信代码：支持手动输入点击获取公司名称调企查查精确查询接口查询公司工商数
覆盖城市范围：显示全国行政区域二级城市进行选择
允许选择隔开
443竞争手编辑
(1) 页面展示图422
图422 竞争手编辑
(2) 业务说明
竞争手基础信息竞争手覆盖城市范围竞争手工商信息三部分组成
企业基信息竞争手名称客户品牌竞争手简称竞争手类型联系址组成
444竞争手详情
(1) 页面样式图423
图423 竞争手详情页面
(2) 业务说明
竞争手详情页面竞争手基信息竞争手项目明细组成
竞争手基信息显示相关信息
竞争手项目明细显示：序号项目名称业务类型否中标
覆盖城市范围竞争手品牌带出
45联系模块
451联系列表
(1) 页面展示图424
图424 联系页面
(2) 业务说明
客户理列表页面操作栏检索模块数列表模块组成
操作栏提供：搜索钮重置钮编辑钮删钮导出钮
数列表显示序号姓名电话微信邮箱现职公司现职位现职开始时间现职结束时间创建时间创建
姓名：允许点击点击跳转联系详情页面
452联系编辑
(1) 页面展示图425
图425 联系编辑页面
(2) 业务说明
编辑联系页面联系基础信息联系职范围两部分组成
联系基础信息姓名电话微信邮箱籍贯爱婚姻生育岗位角色组成
联系职范围：职信息显示允许操作
453联系详情
(1) 页面样式图426
图426 联系详情页面
(2) 业务说明
联系详情页面操作栏联系基信息联系项目信息组成
46客户品牌模块
461客户品牌理列表
(1) 页面展示图427
图427 客户品牌页面
(2) 业务说明
客户品牌理列表页面操作栏检索模块数列表模块组成
操作栏提供相关操作
检索模块提供模糊查询
462客户品牌理新增
(1) 页面展示图428
图428 客户品牌理新增页面
业务说明
客户品牌新增包括：客户品牌品牌类型品牌分类描述说明覆盖城市范围
覆盖城市范围：非必填品牌分类联动年份选择器添加城市钮表格构成点击添加城市时表格插入数年份应表格数
47项目模块
项目模块包括图429流程
图429 项目流程图
471项目页面架构
(1) 页面样式图430
图430 项目页面样式
(2) 说明
页面1’操作栏2’基础信息3’流程节点4’节点容展示框5’动态组成
操作栏种钮录入方便提供暂存数功
基础信息展示项目基础信息点击蓝色链接时跳转该容详细信息
流程节点展示该项目属阶段
节点容处基础信息时展示框选择容基础信息栏应数相应变化
动态项目启动会展示实现逻辑客户理模块动态
472项目流程录入
(1) 页面展示图431
图431 项目创建页面
(2) 业务说明
选择开启集采投标议标项目
操作栏
点击保存钮判断否已选择招采方式选择暂存容进入流程
点击进入阶段钮判断必填项未填提示户输入
点击两钮会生成节点树
473项目进阶段
(1) 页面展示图432
图432 项目进页面
(2) 业务说明
项目进显示：项目信息项目求三部分
项目信息显示：预计签约金额赢率预判甲方预算单方造价回标次数回标说明建筑楼层说明竞标单位家集采计划投标日期等
项目求显示：计税方式否属精装甲方目标方造价报价策略付款方式项目材料传网盘址
474项目报价阶段
(1) 页面展示图433
图433 项目报价页面
(2) 业务说明
页面显示：报价米报价设计费报价递交投标文件截止时间需求信息附件(温馨提示 允许传30M文件)
475甲方确认开标确认
(1) 页面样式图434
图434 开标确认页面
(2) 业务详情
页面显示：开标时间计划档日期竞标单位开标确认附件
476设计清单
(1) 页面样式图435
图436 设计清单页面
(2) 业务说明
页面显示：设计设计金额 计划设计开始日期计划设计完成日期前应收设计费例 前应收设计费预计收款日期清单完成时间 清单附件图纸材料
477合档
(1) 页面样式图437
图437 合档页面
(2) 业务说明
页面显示：项目名称部寄出盖章合日期合名称合文回收日期创建附件
478项目理列表
(1) 页面样式图438
图438 项目理页面
(2) 业务说明
页面操作栏检索栏列表栏组成
页面根前登陆户数权限获取项目数
操作栏显示：搜索重置编辑删导出
第5章 系统测试
51功测试
例编号
测试功模块
场景名称
预期结果
数
实际结果
DL001
商机模块详情
商机理列表查详情时商机建设期数明细没回显
正常显示
商机建设期数明细没展示
DL002
客户模块新增
客户理列表修改客户信息点击保存时校验问题
提示保存成功
客户名称：东莞市中万公司
统社会信代码：91441900MA5413BQ5
客户简称：中万
客户品牌：中万
提示请输入客户品牌
DL003
商机详情
商机理列表查详情报404
正常显示
商机理列表查详情报404
第6章 结
销售易系统觉优势：
1实现项目收集项目产出直观通xlsx文件查项目信息
2项目理集采投标议标基流程进行简单梳理提高项目工作效率定提高作
3降低项目理员培训成理员流失避免业务扩展员增加必须程中新员工新项目理熟悉成关键问题果新员工刚入职需投入老理员新员工双倍资
易销售系统设计angularJs致解然angularJs重量级开发次需网找应文件放丰富插件解echartjsxlsxqrcode等等插件js控制dom变化jQuery操作htmldom节点angularJs运象思想控制节点显示隐藏
js知识片森林路遇种分岔路找资料想通想放弃走越越深发现面路长印证书时方恨少
参 考 文 献
[1]张鑫旭 css世界[D]民邮电出版社201712
[2][美] 尼古拉斯·泽卡斯 高性JavaScript[D] 电子工业出版社201011
[3]探 JavaScript设计模式开发实践[D] 民邮电出版社20155
[4]新视角文化行 Div+CSS30网页布局实战入门精通（第2版）[D] 民邮电出版社20185
[5]徐阳丁峰 Head First HTMLCSS（第2版）[D] 中国电力出版社 2013
[6]Douglas Crockford JavaScript语言精粹[D] 电子工业出版社 2009
[7]广发证券互联网金融技术团队 揭秘Angular 2[D] 电子工业出版社 2017
[8]王芃 Angular零[D] 机械工业出版社 2017
[9]弗拉纳根 JavaScript权威指南[D] 机械工业出版社 2007
[10]郭家寶（BYVoid） Nodejs开发指南[D] 民邮电出版社 2012
[11][希] Lea Verou CSS揭秘[D] 民邮电出版社 2016
[12]Ilya Grigorik Web性权威指南[D] 民邮电出版社 2013
[13]张玮刘浩段红梅申昆玲基Web of Science童哮喘行动计划发展情况分析[J]中国生育健康杂志202031(1)2023
[14]姚海燕罗志宏米洁基Web of Science护理员信息素养文献计量分析[J]预防医学情报杂志202036(1)116121
[15]王志超马梦月基Web of Science数库视化分析碳化铁电催化剂[J]山东化工202049(2)6668
[16]周丹尹安春张秀杰基Web of Science肾脏病学领域护理研究视化分析[J]中国实护理杂志202036(4)315320
[17]沈世伟刘镜茹基Web of Science^TM海岛旅游者研究文献计量学分析[J]宁波学学报文科学版202033(1)92101
[18]黄金路傅瑶孟祥乐万丽丽霍炎卢进干润郭澄基Web of Science探讨全球阿德福韦酯相关低磷血症研究[J]中国药业202029(1)13
[19]李玲刘旭艳袁圆余雨枫基Web of Science数库关精神分裂症病病耻感研究文献计量学分析[J]循证护理20206(1)814
[20]崔佳峰国外教学领导力研究图景脉络题趋势基web of science文献关键词视化分析[J]现代教育丛2020(1)8696
[21]钟永林基Web云存储技术[J]信息记录材料2019(4)163164
[22]刘浩基web复杂表格实践[J]数字技术应201937(9)7171
[23]唐强戴康米承铁王乐关锴基Web兴趣选修理台[J]计算机技术发展201929(3)173177
[24]潘健徐志杰祝悦方力争基Web of Science处方精简研究文献计量学分析[J]中国全科医学202023(6)747754
文档香网(httpswwwxiangdangnet)户传
《香当网》用户分享的内容，不代表《香当网》观点或立场，请自行判断内容的真实性和可靠性！
该内容是文档的文本内容，更好的格式请下载文档
