模块管理

模块思维

如果您想运营、实施本平台，必须建立起模块思维，我们通常讲的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>

表单设计

上传控件

统一上传地址：/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];}}~

事件方法

当控件发生以下事件时(单击\离开\值改变)， 前后需带上~(前后不要有空格)。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)});}~