框架配置
表格配置属性说明文档
页面添加引用：
import BaseTable from ‘@/components/BaseTable/index.vue
1、grid-edit-width 表格操作栏宽度
例如：grid-edit-width：250
2、gridOtherConfig
| 属性 | 说明 | 示例 |
|---|---|---|
| showCheckbox | 表格属性列表前的Checkbox | gridOtherConfig:{showCheckbox:true} 所选项值得获取 this.$refs.tableName.getMulitValue() 类型 (List) |
3、gridConfig表格配置说明：
该配置主要控制页面表格显示列。(页面需要显示哪些字段名)
| 属性 | 说明 | 示例 |
|---|---|---|
| label | 列显示名称（显示的列名） | 项目名称 |
| prop | 对象Bean属性名（列名对应的属性名） | name |
| align | 字段显示的位置（如字段要显示要居中显示还是居左居右）。字典表居中，数值居右，时间居中，图片居中字段比较多的话就居左 | align:'center' |
| isShow | 表示表格字段是否展示(默认为true)，false表示不展示 | isShow:'false' |
| width | 表示当前字段表格的所占的宽度 | width:10px |
| render | 具体看下面的例子 | |
| type | 如要显示图片type：'image'，type:'linkView' 表示的是可点击预览单元格，无需自行扩展点击事件，type:'linkEdit'表示的是可点击编辑单元格，无需自行扩展点击事件，type:'tag'，表示TAG标签单元格，tagType表示TAG颜色 eq 表视判断属性，属性有：success，info，warning，danger等，具体参考ELEMENTUI 的tag属性，普通点击事件：type:'link'，事件为，cellClickInfo(prop,data)，prop表示点击的属性，data表示行数据（在fw-table中 @cellClickInfo=”需要触发的事件名”） | type：'image',type:'linkView' |
| tagType | tagType表示TAG颜色，配合type:’tag’，使用 属性有：success，info，warning，danger等，具体参考ELEMENTUI 的tag属性 | tagType：'success' |
| link | ||
| fixed | 固定列表栏不滑动fixed: 'right', | fixed: 'right' |
| wrap | wrap:'hander'，手动控制换行，接受html中 格式;wrap:'auto',自动换行 ； 默认为不换行，省略号 |
wrap:'hander'，wrap:'auto' |
| eq | tag表示TAG颜色，配合type:'tag'，使用 eqType属性表示判断符 tagType属性有：success，info，warning，danger等，具体参考ELEMENTUI 的tag属性 type:null,//number表示数值，null或者string表示字符串；与tagType不同的是eq增加了根据字段去判断显示不同的颜色 | type:’tag’, eq:[{ eqType:’=’, tagType:null, value:'1', type:null,}, { eqType:'=', prop:'state', tagType:'info', value:'2', type:null },] |
注：eq中eqType表示为判断符号
render详解 表格中对字段 的样式及点击事件进行自定义操作
gridConfig: [{
label: '当事人',
prop: 'conpanyDisplay',
minWidth: '20%',
render: (h, params) => {
return h('el-button', {
props: {
type: 'text'
},
class: {
'custom-table-button': true
},
style: { `对表格字段样式进行操作`
color: params.row.urgentType == '1' ? '#FFBB00' : '#EA3737'
},
on: { `对字段触发点击事件`
click: (item) => {
that.viewnew(params.row)
}
}
}, params.row.conpanyDisplay)
}
},
}]
4、queryConfig配置说明：
该配置主要控制表格查询条件显示（配置查询按钮）
| 属性 | 说明 | 示例 |
|---|---|---|
| span | 默认24(想要一列显示两行就改成12，改成8就是一列显示三行) | |
| label | 查询控件显示说明（按钮显示名字，如按姓名查询则按钮的名字可以是：姓名） | 项目名称 |
| prop | 对象Bean属性名（按钮显示名字对应的字段名，如果按姓名查询就要对应姓名这个字段） | name |
| type | 控件显示类型，text:文本框,select下拉框，mul_select多选下拉框,tree下拉树， mul_tree多选下拉树,date 日期，datetime 日期时间，month:月度，dateRange：，radio单选框,checkbox:复选框,textarea大文本，editor富文本,headerImage头像图片,files多文件上 | type:'select',查询条件不要使用textarea,editor等无意义控件 |
| dataScource | 下拉框，下拉树等对应字典表配置ID，来源于代码生成处的字典表管理（当查询时需要字典表或者联表查询时需要这个属性,填写的内容为字典表关联的Id） | dataScource:'1d5e3da8d5466678470dd91 03aa0436b' |
| data | 下拉框，下拉树等默认数据，一般不用关注（当下拉框数据不是从数据库查询的，是死的时候才会填写内容） | |
| url | 下拉框，下拉树等来源URL，属于自定义属性，如果dataScource不为空，则不用url（用于复杂的联表查询，当字典表无法实现时我要手写查询代码，并且把controller地址填写上） | |
| placeholder | 查询控制显示说明如果这个为空就会选择label属性来显示控制说明 Placeholder：'请输入名称' | |
| clearable | 是否显示下拉框以及时间选择框里的小x图标，点击x可以清空输入框（如果为false就不显示） | Clearable：false |
5、formConfig配置说明：
该属性配置主要用于表单显示（比如增加，修改跳出来的表单需要显示的字段）。
| 属性 | 说明 | 示例 |
|---|---|---|
| span lg sm |
该属性主要用于每个控件所占列表，一行分为24个单元格，一行显示1个控件配置为24， 一行显示2个控件配置为12，以此类推 lg 表示1200=<分辨率<1920采用的列数 sm:表示小于1200分辨率采用的列数 span表示>=1920采用的列数， 如果没有配置lg、sm属性，则 span是全部分辨率采用的唯一属性标准 | span:8,lg:12,sm:24 |
| label | 表单每个控件显示的名字 name:'项目名称' | |
| prop | 对应的数据实体Bean属性名称 | prop:'projectName' |
| type | 控件显示类型：text:文本框,select下拉框，mul_select多选下拉框,tree下拉树， mul_tree多选下拉树,password密码框， date 日期，datetime 日期时间，time 时间（ HH:mm ）==> {(‘start’: ‘00:00’,’step’: ‘00:01’,’end’: ‘23:45’) 配置time属性开始、间隔和结束时间 realtime 时间( HH: mm :ss )} ，realtimerange 时间范围（HH: mm :ss - HH: mm :ss） 在formModl里面给相应的属性赋为null 后端接收为List |
|
| data | 下拉框，下拉树等默认数据，一般不用关注 | {“id”: “1”,label: “已通过”} |
| url | 下拉框，下拉树等来源URL，属于自定义属性 | |
| disabled | 是否可以填写内容（默认为false，若改成true则表示这个输入框禁止填写） | disabled:true |
| placeholder | 查询控制显示说明如果这个为空就会选择label属性来显示控制说明 | Placeholder：'请输入名称' |
| ready | ||
| tree | tree标签配置属性 | disableBranch:true禁用非叶子节点 customLabeltrue 表示自定义label,选中后默认显示从子向上所有节点名称 |
| labelPosition | form表单字段显示方向默认left | 如：labelPosition:'top' |
| disabledDate | 当type为date、daterange时禁止选择当天之前的日期 | 如：disabledDate:1 |
| showType | view一般使用在预览 功能为去除输入框 要把prop属性改为text | showType:'view' |
| cauBeginValue | 当type为daterange时控制默认开始时间 | cauEndValue:-7 |
| cauEndValue | 当type为daterange时控制默认结束时间 | cauEndValue:-1 |
| colClass | 表单中加下划线和背景色 | colClass: true |
| itemClass | 表单中标题背景色 | itemClass: true |
| fileSize | 表单中当type为headerImage单图片,images多图片，files多文件上文件上传时使用 作用为限制文件上传大小 单位为M | fileSize: 2 |
| accept | 表单中当type为headerImage单图片,images多图片，files多文件上文件上传时使用 作用：控制上传文件内省,格式为.doc,.docx等 | accept:'.doc,.docx' |
| limit | 表单中当type为images多图片，files多文件上文件上传时使用 作用：控制上传的数量 | limit:2 |
| tips | 作用：对应字段后展示提示文本 | tips:'图片推荐尺寸为232x227PX，大小在200KB以内' |
| mapType | 作用：选择地图类型 | mapType：'gdMag' 调用高德地图 一般与type：'openLocation' 配合使用 |
formConfig中Type详解
| 属性 | 说明 | 示例 |
|---|---|---|
| select | 下拉框 | |
| mul_select | 多选下拉框 | |
| password | 密码框 | |
| editor(editor2) | 富文本 | |
| text | 文本框 | |
| tree | 下拉树 | |
| mul_tree | 多选下拉树 | |
| date | 日期 | HH: mm :ss |
| datetime | 日期时间 | yyyy-MM-dd HH: mm :ss |
| time | 时间 | （ HH:mm ）==> {(‘start’: ‘00:00’,’step’: ‘00:01’,’end’: ‘23:45’) 配置time属性开始间隔和结束时间 realtime 时间( HH: mm :ss )} |
| realtimerange | 时间范围 | （HH: mm :ss - HH: mm :ss） 在formModl里面给相应的属性赋为null 后端接收为List<String> |
| daterange | 日期范围 | （yyyy-MM-dd : yyyy-MM-dd） |
| month | 月度 | MM |
| radio | 单选框 | |
| checkbox | 复选框 | |
| textarea | 大文本 | |
| headerImage | 单图片 | |
| images | 多图片 | |
| file | 单文件 | 注意： formModel中要添加对应字段且为String否则出现上传之后无法出现上传按钮的问题 |
| files | 多文件 | |
| openSelect | 根据查询选择获取数据 | |
| colorPicker | 选取颜色框 | |
| rate | 设置类似评论星数 | |
| switch | 开关按钮 | |
| slider | 进度条拉取 | 例如：控制音量 |
| integer | 整数数字输入框 | |
| decimal | 带有小数的输入框 | |
| openLocation | input后加点击调用地图页面并选择地址图视化 | 默认调用百度地图 优先使用高德地图type同级加mapType: ‘gdMap’, 属性 |
form更具字段显示隐藏 内根据（ pId:’sourceUserType’,）字段判断 值（ showByPValue:[‘1’],）是否显示
pId:'partyType',
isShow:false,
showByPValue:['1'],`
例如：
{
span: 24,
label: '单位/公民',
prop: 'sourceUserType',
type: 'radio',
rules: [{
required: true,
message: '请输入单位/公民',
trigger: 'change'
}, ],
data: [{
label: "单位",
id: 1,
},
{
label: "公民",
id: 2,
},
],
},
// citizen_name,citizen_sex,citizen_id,citizen_tel,citizen_site
{
span: 24,
label: '单位名称',
pId:'sourceUserType',
isShow:false,
showByPValue:['1'],
prop: 'companyId',
type: 'text',
max: 40,
rules: [{
required: true,
message: '请输入当事人单位名称',
trigger: 'blur'
}, ],
data: []
},
{
span: 24,
label: '联系电话',
prop: 'citizenTel',
type: 'text',
max: 18,
rules: [{
required: true,
message: '请输入联系电话',
trigger: 'blur'
}, ],
data: []
},
createQueryEntity方法的使用例子 和详解
protected QueryEntity createQueryEntity(){
QueryEntity queryEntity=new QueryEntity();
List<String> ids=CollUtil.newArrayList();
List<String> propertys=CollUtil.newArrayList();
List<String> mulFields=CollUtil.newArrayList();
List<String> mulPropertys=CollUtil.newArrayList();
//字典表id对应字段 单选字段
ids.add("839e57d051fb308f2a969afa6f2552af");
propertys.add("hotelName");
ids.add("22fac8cd28f3cb580f4803ae0b2172b1");
propertys.add("scenicName");
//字典表id
queryEntity.setIds(ids);
queryEntity.setPropertys(propertys);
// 多选字段属性
ids.add("1a6760484add3f2c1fd8c7530fa98cda");
propertys.add("diningName");
mulPropertys.add("diningName");
mulFields.add("diningName");
queryEntity.setMulPropertys(mulPropertys);
queryEntity.setMulFields(mulFields);
// 多文件
queryEntity.setMulPropertysComing(true);
//一般用于查询文件 查询文件信息 和单文件图片查询 private FileEntity imageFileEntity;
queryEntity.setSingleFilePropertys(CollUtil.newArrayList("image","travelTask"));
//多图片和多文件接收 接收使用 private List<FileEntity> imageList；
queryEntity.setFilePropertys(CollUtil.newArrayList("image"));
//前端使用tree时有字典表 使用下面代码查询字典表名称
queryEntity.setTreePropertys(CollUtil.newArrayList(new QueryTreeEntity("fountain", "45a3421d4263a23dc2eb3956bbe50a48")));
}
当是多选字端的话 修改和新增时处理逻辑为
@ApiOperation(value = "新增")
@PostMapping("")
public ResponseData<StandardScheme> addDto(@RequestBody StandardSchemeDto entityDto) {
List<String> mulProperty = CollUtil.newArrayList();
mulProperty.add("schemeTag");
StandardSchemeDto entity = beanVoUtil.changeList2Str(mulProperty,entityDto);
this.service.save(entity);
return ResponseData.success(entity);
}
封装字典表 和查询字典表详解：
@ApiOperation(value = "获取评分标准下拉框列表")
@GetMapping("scoringCriteria")
public ResponseData<Map<String, Object>> dicts(Integer index) {
QueryWrapper<ScoringCriteria> queryWrapper = new QueryWrapper<>();
if(StrUtil.isNotBlank(id)) {
queryWrapper.eq("check_type", id);
}
queryWrapper.orderByAsc("create_time");
List<ScoringCriteria> list = this.scoringCriteriaService.list(queryWrapper);
List<SelectNode> dictList = CollUtil.newArrayList();
if (CollUtil.isNotEmpty(list)) {
for (ScoringCriteria scoringCriteria : list) {
SelectNode selectNode = new SelectNode();
selectNode.setId(scoringCriteria.getId());
selectNode.setLabel(scoringCriteria.getScoringCriteria());
dictList.add(selectNode);
}
}
Map<String, Object> map = MapUtil.newHashMap();
map.put("index", index);
map.put("data", dictList);
return ResponseData.success(map);
}
@ApiOperation(value = "获取绿地名称")
@GetMapping("landInfo")
public ResponseData<List<BaseDict>> dictLandName(Integer index) {
List<BaseDict> dictList = baseDictService.selectByTableName("t_green_dict_deduction_money");
return ResponseData.success(dictList);
}
枚举类封装字典表
@GetMapping("companys")
public ResponseData<Map<String, Object>> companyList(Integer index) {
Map<String, Object> map = MapUtil.newHashMap();
map.put("index", index);
List<SelectNode> nodes = CollUtil.newArrayList();
for (VideoTypeEnums type : VideoTypeEnums.values()) {
nodes.add(new SelectNode(type.getCode(), type.getName()));
}
map.put("data", nodes);
return ResponseData.success(map);
}
openLocation属性的用法及后端对经纬度的处理
前端
formConfig中的配置
{
span: 12,
label: '地址',
prop: 'address',
type: 'openLocation',
mapConfig: {
provnice: 'provnice',
city: "city",
xian: "",
lnglat: "lnglat",
address: "address"
},
max: 40,
rules: [],
data: []
},
`formViewConfig中的配置-->预览大图`
{
span: 24,
label: '地址',
labelWidth: '1px',
prop: 'address',
type: 'openLocation',
colClass: true,
showType: 'view',
mapConfig: {
lnglat: 'lnglat',
address: 'address'
},
},
后端
/*entity*/
@ApiModelProperty(value = "地址")
private String address;
@ApiModelProperty(value = "经纬度")
private String lnglat;
@ApiModelProperty(value = "经度")
private String lng;
@ApiModelProperty(value = "纬度")
private String lat;
//小程序中的经纬度
@ApiModelProperty(value = "经度")
private String gcjLng;
@ApiModelProperty(value = "纬度")
private String gcjLat;
/*service*/
public void changeEntity(BeauResourceDto entityDto, boolean isBaiduLnglat) {
if (StrUtil.isNotBlank(entityDto.getLnglat())) {
List<String> lngLat = StrUtil.split(entityDto.getLnglat(), ',');
if (isBaiduLnglat) {
entityDto.setLng(lngLat.get(0));
entityDto.setLat(lngLat.get(1));
Point point = LocationTransfromUtil.bd09togcj02(Convert.toDouble(entityDto.getLng()),
Convert.toDouble(entityDto.getLat()));
entityDto.setGcjLng(Convert.toStr(point.getLng()));
entityDto.setGcjLat(Convert.toStr(point.getLat()));
} else {
entityDto.setGcjLng(lngLat.get(0));
entityDto.setGcjLat(lngLat.get(1));
Point point = LocationTransfromUtil.gcj02tobd09(Convert.toDouble(entityDto.getGcjLng()),
Convert.toDouble(entityDto.getGcjLat()));
entityDto.setLng(Convert.toStr(point.getLng()));
entityDto.setLat(Convert.toStr(point.getLat()));
}
entityDto.setLnglat(entityDto.getLng() + "," + entityDto.getLat());
}
}
6、gridTopBtnConfig配置说明：
该配置表示按钮紧随查询条件显示的所有按钮集中配置处，代码默认生成reset,export，自定义按钮的classify属性请不要占用该2个类型
| 属性 | 说明 | 示例 |
|---|---|---|
| name | 按钮名称 | 重置 |
| classify | 按钮类型，自定义按钮可@对应的classify属性名部署对应按钮事件（create：新建。reset:重置。export:导出） | 例如classify:'custom',父窗口通过@custom='方法名字'即可捕捉 |
| index | 待扩展使用 | |
| location | 待扩展使用(按钮存放的位置) | |
| roles | 按钮权限，待扩展使用 | |
| actionUrl | 按钮调用后端地址,reset和export无需关注，自定义根据自己需求使用 | |
| type | 按钮样式，自定义按钮样式为：primary，可配置项目有:success,info，warning，danger，text | |
| icon | 按钮图标：默认为el-icon-plus | |
| modelId |
7、gridOperaBtnConfig配置说明：
该配置表示按钮另起查询条件一行显示的所有按钮集中配置处，代码默认生成create(新建)，自定义按钮 的classify属性请不要占用该类型
| 属性 | 说明 | 示例 |
|---|---|---|
| name | 按钮名称 | 重置 |
| classify | 按钮类型，自定义按钮可@对应的classify属性名部署对应按钮事件（create：新建。reset:重置。export:导出） | 例如classify:'custom',父窗口通过@custom='方法名字'即可捕捉 |
| index | 待扩展使用 | |
| location | 待扩展使用 | |
| roles | 按钮权限，待扩展使用 | |
| actionUrl | 按钮调用后端地址,reset和export无需关注，自定义根据自己需求使用 | |
| type | 按钮样式，自定义按钮样式为：primary，可配置项目有:success,info，warning，danger，text | |
| icon | 按钮图标：默认为el-icon-plus | |
| modelId |
8、gridBtnConfig配置说明：
该配置表示每一行表格的操作按钮，代码默认生成update(修改)，delete(删除),view(预览)，自定义按钮 的classify属性请不要占用该类型
| 属性 | 说明 | 示例 |
|---|---|---|
| name | 按钮名称 | 重置 |
| classify | 按钮类型，自定义按钮可@对应的classify属性名部署对应按钮事件（update:修改，delete:删除，view:预览） | 例如classify:'custom',父窗口通过@custom='方法名字'即可捕捉,父窗口方法参 function 方法名称(id,row),id表示行主键，row表示操作行数据 |
| index | 待扩展使用 | |
| location | 待扩展使用 | |
| roles | 按钮权限，待扩展使用 | |
| actionUrl | 按钮调用后端地址,reset和export无需关注，自定义根据自己需求使用 | |
| type | 按钮样式，自定义按钮样式为：text，可配置项目有:success,info，warning | |
| icon | 按钮图标：默认为el-icon-plus | |
| modelId | ||
| permission | ||
| circle | 待扩展使用 |
### `notShow属性详解`
gridBtnConfig: [
{
'name': '拒绝',
'type': null,
'classify': 'refusenew',
'index': 2,
'location': 'grid',
'roles': [],
'actionUrl': '',
//动态控制按钮隐藏或显示
'extend': {
'notShow': [{
'prop': 'status=2,status=1,status=4,status=5,status=6'
}]
}
},
],
`单条数据导出自定义接口`
exportOne(item) {
let url = 'appointOrder/exportOne/' + item.id //要调用的接口
url += '?Authorization=' + this.$commonApi.getTokenInfo()
url += '&menuId=' + this.GetQueryString('menuId')
url += '&role=' + this.$commonApi.getRole()
url = window.getLocationUrl() + '/' + url
window.open(url)
},
GetQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
var r = window.location.search.substr(1).match(reg)
if (r != null) return unescape(r[2])
return null
},
9、formModel配置说明：
formModel表示表单的数据属性，格式如下
formModel: {
'id' : '',
'name': '',
'introduction': '',
'remarks': '',
'projectClassify': '',
}
/*表示有哪些控件，这个地方需要保持一致*/
10、queryModel配置说明：
queryModel表示查询的数据属性，格式如下=>一般用于默认搜索值
queryModel: {
'name' : null,
'projectClassify' : null,
}
11、dialogConfig 配置说明：
dialogConfig主要用于控制页面整体属性
| 属性 | 说明 | 示例 |
|---|---|---|
| width | 表示弹窗宽度，默认为50%，可自行调整 | width:80 |
| labelWidth | 表示弹窗的表示文本宽度，默认为80px，可自行调整 | labelWidth:'200' |
| submitName | 表示弹窗的提交按钮名称，默认为’提交’，可自行调整 | submitName:'确认' |
| submitMessage | 表示弹窗的提交提示信息，默认为：'确认提交吗？'',可自行调整 | |
| showRadio | 表示表格是否显示单选圆形按钮（为true表示显示出按钮）表示弹窗是否 | showRadio：true |
| showIconSetting | 是否显示图标 | showIconSetting：false |
| isGroup | 分组如果isGroup为true表示弹窗需要分组 | isGroup:true |
| buttons | 表示弹窗的扩展按钮（可以在弹窗里自定义添加按钮），父窗口可根@submitExtend='自定义方法'捕获按钮事件function 自定义方法(url,data){} | url:为后端请求地址type:按钮类型name:按钮名称message:点击按钮的提示信息 buttons: [{ ‘className’: ‘cutom-submit-button’, name: ‘短信提醒’,classify: ‘noteIn’,’extend’: {‘notShow’:[{‘prop’:’doResultState=1,doResultState=2,doResultState=5,doResultState=4,doResultState=7’ }]} }, |
| isShowSumbit | 可以在弹窗里不展示提交按钮 | isShowSumbit：true |
| notFit | 开启表格中列的自定义宽度 | notFit:true |
| tableStripe | 表格中是否有条纹 | tableStripe: false |
| tableBorder | 表格中是否有边框 | tableStripe: false |
| queryLabelWidth | 自定义搜索字段的宽度 | queryLabelWidth: '60' |
| editType | 弹窗成为页面 | editType: 'page' |
| showBack | 当editType: ‘page’时 页面有返回按钮 | showBack: true |
dialogConfig一般生成后默认添加此配置
dialogConfig: {
labelWidth: '135px',
tableStripe: false,
tableBorder: false
},
分组的使用
configData: [
{
groupName:"分组标题"，
/*自定义分组栏图标 不用可以不加*/
icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
data:[
]
}
]
dialogConfig: {
isGroup: true,
},
弹窗实现自定义底部butten添加
/*vue*/
<FwBaseDialog
ref="doViewFormDialog"
:form-data="configData.formEventViewModel"
:dialog-config="dialogConfig"
title="查看事件管理"
@noteIn="noteIn"
@sellIn="sellIn">
<div slot="customBody">
<!-- 内容 -->
<!-- <div style="display: flex;">
<div style="width: 64%;">
<fw-header title="事件信息" style="margin-top: 11px;" />
<div style="width: 95%;margin-left: 10px;">
<fw-form
:dialog-config="viewFormDialogConfig"
:form-config="configData.formEventViewConfig"
:form-data="configData.formEventViewModel">
</fw-form>
</div>
</div>
</div> -->
</div>
</FwBaseDialog>
/*js*/
dialogConfig: {
labelWidth: '120px',
tableStripe: false,
width: '60%',
tableBorder: false,
buttons: [{
'className': 'cutom-submit-button',
name: '短信提醒',
classify: 'noteIn',
'extend': {
'notShow': [{
'prop': 'doResultState=1,doResultState=2,doResultState=5,doResultState=4,doResultState=7'
}]
}
},
二级页
<fw-card v-if="showMain=='2'">
<div class="el-page-header" style=" padding: 20px 15px;border-bottom:1px solid rgb(227, 227, 227);">
<div class="el-page-header__left" @click="back"><i class="el-icon-back" />
</div>
<div class="el-page-header__content" style="flex: 1;">档案库详情</div>
</div>
<div style="margin-top: 10px;">
<!--加入自己要写的内容 -->
</div>
</fw-card>
---------js-------
通过showMain属性控制
back() {
this.showMain = '1'
}
FwFrom里面有个插槽，formConfig属性内配置的type改为custom,然后插槽的名字就是prop的名字，这个插槽你们可以自己随意扩展自己的属性
<FwForm ref="preDeclareInfo" @changeFormModel="changeRepeatFormModel" :dialog-config="configData.dialogConfig" :form-config="configData.formConfig"
:form-data="configData.formNewModel" title="重新提交" >
<div slot="customs">
<div style="display: flex;">
<!--加入自己要写的内容 -->
</div>
</div>
</FwForm>
配置文件
configData: [
{
span: 24,
label: '',
labelWidth:"1",
prop: 'customs',
type: 'custom',
}
]
弹窗 框架
<!-- 弹窗1.0 -->
<fw-base-dialog
ref="baseDialog"
:append-to-body="true"
:close-on-click-modal="false"
:visible.sync="discretionAdd"
title="权力事项库信息"
width="75%"
@submit="save">
<div slot="customBody">
<FwForm
ref="authority"
:dialog-config="configData.dialogConfig"
:form-config="configData.formConfig"
:form-data="formModel"
title="权力事项库" />
<div>
<fw-table
ref="causeDiscretion"
:form-data="causeConfigData.formModel"
:form-config="causeConfigData.formConfig"
:dialog-config="causeConfigData.dialogConfig"
:grid-config="causeConfigData.gridConfig"
:grid-data="causeDiscretionGridData"
:query-config="causeConfigData.queryConfig"
:grid-top-btn-config="causeConfigData.gridTopBtnConfig"
@submit="causeDiscretionSubmit"
:query-model="causeConfigData.queryModel"
:grid-opera-btn-config="causeConfigData.gridOperaBtnConfig"/>
</div>
</div>
fw-base-dialog>
<!-- 弹窗2.0 -->
<FwDialogForm
ref="baseDialog"
:config="formConfig"
:form-data="formModel"
:dialog-config="dialogConfig"
:title="菜单配置"
@submit="submitStyle" />
<!-- 打开该弹窗 -->
this.$refs.baseDialog.showDialog()
<!-- 关该弹窗 -->
that.$refs.baseDialog.hideDialog()
<!-- 刷新当前表格 -->
that.$refs.baseDialog.getData()
<!-- 弹窗提交按钮不显示 -->
`dialogConfig` 属性加 isShowSumbit:false
<!-- 重置config.js内的实体换原 -->
this.formsyncModel = Object.assign({}, DATA_CONFIG.formsyncModel),
弹窗二
<el-dialog :visible.sync="dialog" width="560px" :append-to-body="true" :close-on-click-modal="false"
:close-on-press-escape="false" class="custom-dialog-class">
<el-form ref="form" :model="updatePassModal" :rules="rules" size="small" label-width="88px">
<el-form-item label="原密码" prop="password">
<el-input v-model="updatePassModal.password" placeholder="请输入原密码" type="password" auto-complete="on"
style="width: 370px;" />
</el-form-item>
<el-form-item label="新密码" prop="relPassword">
<el-input v-model="updatePassModal.relPassword" placeholder="密码长度不能小于8,并且至少包含'大/小写字符,数字,特殊字符4种组合'"
type="password" auto-complete="on" style="width: 370px;" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" class="custom-button cutom-cancel-button" @click="dialog=false">取消</el-button>
<el-button type="primary" @click="updatePassSubmit" class="custom-button cutom-submit-button">确认
</el-button>
</div>
</el-dialog>
data() {
return {
dialog: false,
updatePassModal: {
id: '',
password: '',
relPassword: ''
},
rules: {
password: [{
required: true,
message: '请输入密码',
trigger: 'blur'
},
{
min: 8,
max: 16,
message: '长度在8-16个字符之间',
trigger: 'blur'
}
],
relPassword: [{
required: true,
message: '请输入密码',
trigger: 'blur'
}]
}
}
},
methods: {
deptConfig(item) {
this.dialog = true;
this.updatePassModal.id = item.id
this.updatePassModal.password = ''
this.updatePassModal.relPassword = ''
},
},
//当菜单没有图标时UPDATE t_framework_sys_menu SET ICON='index' where icon is null or icon=''
copy实体类： BeanUtil.copyProperties(beauVillage, vo);
获取当前操作的用户id： UserIdContext.get()
默认用户名密码 ： 1dfmSCW980@
单表单保存
<template>
<div>
<div style="display:flex;justify-content: center;">
<div style="width: 80%;">
<fw-card>
<fw-form
ref="opinion"
:dialog-config="configData.dialogConfig"
:form-config="configData.formConfig"
:form-data="configData.formModel"
:inline="true" />
<div style="text-align:center ;margin-top: 40px;">
<slot name="button">
<el-button :loading="loading" type="primary" style="margin-left:60px;width:80px;background-color: #00ada6; border: #00ada6;" @click="save">
{ { loading?'保存中':'保 存' } }
</el-button>
</slot>
</div>
</fw-card>
</div>
</div>
</div>
</template>
<script>
import {
DATA_CONFIG
} from './config/config.js'
import {
beauGeneralizeService
} from '@/api/scenic/beauGeneralize.js'
export default {
name: 'BeauGeneralizeList',
components: {
},
data() {
return {
testData: [],
configData: DATA_CONFIG,
beauGeneralizeService: beauGeneralizeService,
loading: false
}
},
mounted() {
this.getData()
},
methods: {
getData() {
this.beauGeneralizeService.all().then((res) => {
console.log('----', res)
if (res && res.length > 0) {
this.configData.formModel = res[0]
}
})
},
save() {
this.$refs.opinion.validateForm()
const that = this
that.$refs.opinion.submitForm(function(opinionInfoData) {
console.log('----', opinionInfoData)
that.loading = true
if (opinionInfoData.id) {
that.beauGeneralizeService.update(opinionInfoData.id, opinionInfoData).then(res => {
that.$notify.success('提交成功!')
that.loading = false
that.getData()
}).catch(error => {
that.loading = false
})
} else {
that.beauGeneralizeService.create(opinionInfoData).then(res => {
that.$notify.success('提交成功!')
that.loading = false
that.getData()
}).catch(error => {
that.loading = false
})
}
})
}
}
}
</script>
`显示容器显示文本行数，并将超出部分用...代替`
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 要显示的行数;
-webkit-box-orient: vertical;
`如果文案是英文字符或数字，可采用white-space 限制`
1. word-break:break-all;只对英文起作用，以字母作为换行依据
2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据
3. white-space:pre-wrap; 只对中文起作用，强制换行
4. white-space:nowrap; 强制不换行，都起作用
5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现
`修改或者新增`
submitForm() {
const that = this
that.$refs.preEditDeclareInfo.submitForm(function(preDeclareData) {
if (preDeclareData.id) {
that.preDeclareService.update(preDeclareData.id, preDeclareData).then(res => {
that.dialogEditVisibleup = false
that.$refs.mainTable.queryData()
})
} else {
preDeclareData.diningDataList = that.diningData
preDeclareData.hotelDataList = that.hotelData
console.log('结果======>', preDeclareData)
that.preDeclareService.create(preDeclareData).then(res => {
that.dialogEditVisible = false
that.$refs.mainTable.queryData()
})
}
})
},
导入功能
/**
*下载模板的接口
*/
@ApiOperation(value = "下载excel模板")
@ApiImplicitParam(name = "id", value = "ID", dataType = "String", paramType = "path", example = "1112", required = true)
@GetMapping("templateurl")
public ResponseData<String> getTemplateUrl() {
String viewPathString = env.getProperty("framework.config.viewpath");
String templateUrl = viewPathString + "excel/peopleTemplate.xls";
return ResponseData.success(templateUrl);
}
服务器上图片的引用
<template>
<view>
<cu-custom class="custom-red" :isBack="true" bgColor="common-cu-custom">
<block slot="backText">返回</block>
<block slot="content">景区导览</block>
</cu-custom>
<image :src="imageService+'dazhaxie/userWx.jpg'" style="width: 550rpx;" mode="widthFix">
</image>
<view style="height: 1490rpx;" :style="{background:'url('+imageService+'map/maps.jpg)',backgroundSize:'100% 100%',backgroundRepeat:'no-repeat'}">
</view>
</view>
</template>
<script>
import {
IMAGE_SERVICE
} from '@/api/common.js'
export default {
data() {
return {
imageService: IMAGE_SERVICE,
}
},
methods: {
}
}
</script>
/**
*根据上传得文件Id查询文件表的其他属性
*/
SysFjxxInfo sysFjxxInfo= sysFjxxInfoService.selectById(entityDto.getAudioFile());
列表图片展示
这里简单写个示例 简单实用后续自己理解探索
后端
@ApiOperation(value = "分页查询")
@GetMapping("list")
@PreAuthorize("hasPermission(null,'" + SecurityScenicConstants.BEAU_VILL_LIST + "')")
public ResponseData<PageResult<ImageCardEntity>> page(BeauVillageVo entity) {
QueryEntity queryEntity = this.createQueryEntity();
PageResult<BeauVillage> pageResult = super.page(queryWrapper).getData();
PageResult<BeauVillageVo> vos = beanVoUtil.changeBean2Vo(pageResult, BeauVillageVo.class, queryEntity);
PageResult<ImageCardEntity> newPageResult = ImageCardEntity.change(vos,
new ImageCardChangeEntity("id", "updateTime", "activityName", "activityTime", "activityPictureFileEntity"));
return ResponseData.success(newPageResult);
}
private QueryEntity createQueryEntity() {
QueryEntity queryEntity = new QueryEntity();
List<String> ids = CollUtil.newArrayList();
List<String> propertys = CollUtil.newArrayList();
List<String> mulFields = CollUtil.newArrayList();
// 多选字段属性
List<String> mulPropertys = CollUtil.newArrayList();
ids.add("e68ef2a53df13f5de3b419061009fa7e");
propertys.add("activityType");
queryEntity.setIds(ids);
queryEntity.setPropertys(propertys);
queryEntity.setMulPropertys(mulPropertys);
queryEntity.setSingleFilePropertys(CollUtil.newArrayList("activityPicture"));
queryEntity.setMulFields(mulFields);
return queryEntity;
}
前端
要使用包含 class=”meetingClass” 的dev包裹着分装好的 <fw-card><fw-image-card></fw-image-card></fw-card>
<style lang="scss" >
.meetingClass{
.bg-purple {
.image{
width: 286px;
height: 175px;
margin-top: 18px;
}
}
}
</style>
vue
<div class="meetingClass">
<fw-card>
<fw-image-card
ref="mainTable"
:api-service="beauVillageService"
:grid-config="configData.gridConfig"
:grid-btn-config="configData.gridBtnConfig"
:form-config="configData.formConfig"
:form-data="configData.formModel"
:grid-edit-width="200"
:form-view-config="configData.formViewConfig"
:grid-top-btn-config="configData.gridTopBtnConfig"
:is-async="true"
:query-config="configData.queryConfig"
:query-model="configData.queryModel"
:grid-opera-btn-config="configData.gridOperaBtnConfig"
:dialog-config="configData.dialogConfig"
form-title="村容村貌"
@view="viewZhip">
<div slot="name"/>
<div slot="address" slot-scope="data">
<div style="display: flex;margin-top: 10px;">
<div style="margin-top: 5px; flex: 1;color: #000000;font-size: 15px;font-weight: bold; margin-left: 15px;text-align: center;">
{ { data.data.name } }
</div>
</div>
<div style="text-align: center; margin-top: 10px;color: #666666;font-size: 15px;padding-bottom: 20px;">
{ { data.data.content } }
</div>
</div>
</fw-image-card>
关于框架封装request请求
框架封装有三种方式
默认自动生成的引用
import fwUtil from 'framework-util'
const carExtendsService = new fwUtil.ApiService.ApiService('carExtends');
export { carExtendsService }
//一般get传参要使用params接收值 地址显示所传参数
export function getCarInOutService(query) {
return custemRequest({
url: 'carCheck/carInOutNum/',
method: 'get',
params: query
})
}
//一般put传参用data接收值 地址不显示所传参数
export function getHouseUsertService(houseId,data) {
return custemRequest({
url: 'peopleInfo/updateHouse/'+houseId,
method: 'put',
data:data
})
}
里面包含增删改查的方法在vue页面引用厚可直接调用
=====================================================================
import request from '@/utils/request'
export function toAliPay(url, data) {
return request({
url: 'api/' + url,
data,
method: 'post'
})
}
生成文件后要更改的信息 （版本2.0.44-SNAPSHOT）
entity 里面Id用long类型要加注解@TableId(type = IdType.ASSIGN_ID)
例：@TableId(type = IdType.ASSIGN_ID)
private Long id;
后端限制长度和不能为null
@NotBlank(message = "房屋号不能为空")
@Size(message = "房屋号最大长度不能超过10", max = 10)
private String houseNum;
新建表的create_time和update_time要调整为create_data_time和update_date_time字段名称，而且要用datetime类型
@ApiModelProperty(value = "创建时间")
@TableField(fill = FieldFill.INSERT)
@JsonFormat(pattern="yyyy-MM-dd hh:mm:ss")
private Date createDateTime;
@ApiModelProperty(value = "创建人")
@TableField(fill = FieldFill.INSERT)
private String createMan;
@ApiModelProperty(value = "修改时间")
@TableField(fill = FieldFill.INSERT_UPDATE)
@JsonFormat(pattern="yyyy-MM-dd hh:mm:ss")
private Date updateDateTime;
@ApiModelProperty(value = "修改人")
@TableField(fill = FieldFill.INSERT_UPDATE)
private String updateMan;
关于三级菜单配置
新建一个index.vue
<template>
<div >
<router-view />
</div>
</template>
然后到系统管理=>>菜单管理找到对应要显示三级菜单的二级菜单的组件路径属性中填写该文件的地址即可如
plugins/platform/thirdMenu/index
changeFormModel
属性（每次表单输入填写时触发）
<FwForm
ref="opinion"
:dialog-config="dialogConfig"
:form-config="formConfig"
:form-data="formModel"
title="外呼任务配置"
@changeFormModel="changeFormModel" />
methods
changeFormModel(prop, fromModel) {
console.log('prop====>', prop)//字段名
console.log('fromModel====>', fromModel)
if (fromModel.startDate != '' && fromModel.endDate != '') {
if (fromModel.startDate > fromModel.endDate) {
fromModel.endDate = ''
}
}
if (fromModel.beginTime != '' && fromModel.overTime != '') {
if (fromModel.beginTime > fromModel.overTime) {
fromModel.overTime = ''
}
}
}
小程序对多图片的储存后端逻辑
生成UUID储存到当前表
String imageIdString = StrUtil.uuid();
entityDto.setPicture(imageIdString);
this.save(entityDto);
//在把多图片的各个id和当前存的图片id并对在一对多的图片表中
if (CollUtil.isNotEmpty(entityDto.getPictureImages())) {
for (String image : entityDto.getPictureImages()) {
SysFjxxMul saveSysFjxxMul = new SysFjxxMul();
saveSysFjxxMul.setFjId(image);
saveSysFjxxMul.setRecordId(imageIdString);
saveSysFjxxMul.setMainId(entityDto.getId());
this.sysFjxxMulService.save(saveSysFjxxMul);
}
}
## 接口对接(采集模块)
在自定义采集中，添加ICustomAuthImpl接口，如果需要实现自定义认证的接口，实现该采集接口，并同时配置方式为
#custom_start#完整对象名称#custom_end#即可实现
自定义数据源
在header同级别处添加配置处，同步添加
customData:"com.framework.dffd",类名为自身应用对的数据实现类的完整类型,如果分页，需实现接口ICustomPageData,默认起始页为1，如果不分页，需实现接口ICustomData接口即可"//数据来源
动态数据应用：{
"header":{
"deviceId":"$deviceId$"
}
}
自定义字典表
直接使用sql查询然后封装（也可用于统计）
String sqlEvent = "select count(0) as num from v_country_event_tousu where 1=1";
if (StrUtil.isNotBlank(roleSql)) {
sqlEvent += " and org_no " + roleSql;
}
JdbcTemplate jt = new JdbcTemplate(ds);
Map<String, Object> eventMap = jt.queryForMap(sqlEvent);
通过表名or通过实体逻辑查询
@GetMapping("yesOrNo")
public ResponseData<Map<String,Object>> getYesOrNoDict(Integer index){
List<BaseDict> baseList = baseDictService.selectByTableName("t_framework_dict_yesno");
List<SelectNode> nodes=CollUtil.newArrayList();
baseList.forEach(self->{
nodes.add(new SelectNode(self.getId(), self.getName()));
});
Map<String,Object> map=MapUtil.newHashMap();
map.put("index", index);
map.put("data", nodes);
return ResponseData.success(map);
}
@GetMapping("alubm")
public ResponseData<Map<String,Object>> getAlbumType(Integer index){
QueryWrapper<PartyTai> queryWrapper=new QueryWrapper<>();
queryWrapper.orderByAsc("px");
List<PartyTai> list= partyTaiService.list(queryWrapper);
List<SelectNode> nodes=CollUtil.newArrayList();
list.forEach(self->{
nodes.add(new SelectNode(self.getId(), self.getName()));
});
Map<String,Object> map=MapUtil.newHashMap();
map.put("index", index);
map.put("data", nodes);
return ResponseData.success(map);
}
VUE中watch的使用（监听属性变化触发）
watch: {
// 此处监听variable变量，当期有变化时执行
orgId(item1, item2) {
// item1为新值，item2为旧值
this.getMenu(this.orgId)
this.getRole(this.orgId)
},
loading(item1, item2) {
// item1为新值，item2为旧值
this.getMenu(this.orgId)
this.getRole(this.orgId)
},
immediate: true // watch侦听操作内的函数会立刻被执行
},
