模块管理
# 模块管理
# 模块思维
如果您想运营、实施本平台,必须建立起模块思维,我们通常讲的OA、办公系统、**系统都是一个统称,这个系统中是由很多个模块组成,常用模块有,用户模块、部门、菜单、公司他们都是独立的模块,又有数据相互关联。
# 模块分拆
当我们需要做一个学生管理系统时,不能直接做一个学生管理模块,需要去思考有多少信息:
一、确定需要存的数据,根据数据来设计:
1、姓名:只需要文本可以录入与显示
2、学号:最好是有前缀+流水号。示例2020(界)001号。
3、班级:可以下拉的班级
3.1、这样就又需要有一个班级模块:
3.2、班级模块需要存以下数据:年级、班名、班主任、地址(*室)
3.3、这时我们会发现,年级可以是做死的下拉项,班主任需要有一个老师管理模块。
4、出生年月:可以选择的日期。
当然数据越多需要拆分的模块也就会越多。
二、总结
当您需要一张数据表保存时,就为一个模块
# 数据库设计
# 创建模块(表)
系统管理》后台管理》模块管理
# 列(字段)管理
系统管理》后台管理》模块管理>“修改表单”
一、初始化:会默认创建固定不可少的列。
二、增加控件:跟据实际情况增加
*注意事项:
l SQL类型:请根据实际情况选择(增加有效,修改时不会改变数据库)
l 输入类型:主要用于查询使用,如果当前列需要下拉请选要“select 选择”并配置取数模块与取数ID
l 显示:列标题、字段:字段
l 必填:不会控制前台,当前台传值后,后台会进行检查是否为空,导入也会检查。
l 修改:如否:就算前台传值过来就不会进行修改。
l 查重:查询本公司是否已存在本项
l EXCE导入导出:控制是否可以导入
# 列样式
//注意前后台引号
//第一种直接跟据修改的模版查看
<b style="color:red">'+value+'</b>
//第二种是打开自己开发的页面
<a href="/list/FormShow.aspx?Mid='+Mid+'&id='+row.id+'" target="_blank" >'+value +'</a>
2
3
4
5
# 表单设计
# 上传控件
统一上传地址:/list/Ajax.ashx 数据类型:文本 请求体参数:1、method=FuJianShangChuan 2、FanHuiMing=字段名 上传成功返回结构体的图片地址:字段名 上传成功返回结构体的图片的姓名:字段名 单图使用“头像” 多图使用“缩略图”
# 下拉远程数据
数据字典:/list/Ajax.ashx?method=GetZiDian&selectsLX=dictionary&selectsID=调用码 定制下拉:/list/Ajax.ashx?method=GetZiDian&selectsLX=xiala&selectsID=调用码
树型下拉:/list/Ajax.ashx?method=gettreedata&selectsID=BuMen 远程数据 "remote": true, /list/Ajax.ashx?method=GetZiDian&selectsLX=xiala&selectsID=XiaoQuXinXi&key=
# 联动下拉数据
第一个设置:与下拉一至,外加“级联配置”增加第二个的名称 第二个:method=GetZiDian&selectsLX=xiala&selectsID=ZhiXingGuanLi&ChaXunLie=ZongXing&key= ChaXunLie : 当联动需要查询其他列时 key:所传的值 :第一个的名称
# 定制的组件
日期选择:WSdatetimePicker HTML:WSHTML (单纯显示值)
# 地图选点
//在值改变时
~(v)=>{ if(v.value.length==3){this.BiaoDanidata.JingDu=v.value[0];this.BiaoDanidata.WeiDu=v.value[1];}}~
2
# 事件方法
当控件发生以下事件时(单击\离开\值改变), 前后需带上~(前后不要有空格)。this.BiaoDanidata为当前数据,id=0就是新建
//加拼音
({value}) => { if(Th.BiaoDanidata.id==0){ Th.BiaoDanidata.appname=Th.pinyin.getFullChars(value); } }
//重新加载
({value}) => {
Th.BiaoDanijson.column[3].dicUrl=configJson.baseUrl+'/api/PingTai.ashx?method=GettableNameFieldList&tableName='+value+'&token='+Th.token;
Th.$refs.WSform.updateDic('txt');
}
//提交前
() => {
return new Promise(function(resolve, reject){
Th.$http({url: '/api/PingTai.ashx?method=GetdemoKaiFaJinDu',data: {},}).then((res) =>
{
resolve(true)
})
})
}
//调用父组件方法
Th.$emit('ontree');//更新数
//按钮完成审批
var ids = '';
for (var i = 0; i < THisd.selectlist.length; i++) {
if (i > 0) {
ids += ',';
}
ids += THisd.selectlist[i].id;
}
THisd.$http({
url: '/api/PingTai.ashx?method=ShenHePanDian',
data: {
ids: ids,
Mid: THisd.Mid,
Bid: item2.id,
},
}).then((res) => {
THisd.$message.success(res.Message) ;
THisd.GetData();
})
~()=>{ if(this.BiaoDanidata.id==0){
this.BiaoDanidata.diaoyongdaima=getpinyin(this.BiaoDanidata.diaoyongmingcheng)
}}~
~(v)=>{ console.log(v);}~
~(v)=>{ this.BiaoDanidata.dianhua=v.value;}~
//转大写的方法
~(v)=>{this.$message.success(getchinese(v.value));}~
//别的通知方式
~(v)=>{this.$notify({title:v.column.label,message:getchinese(v.value)});}~
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56