框架 - -＞配置

最新推荐文章于 2024-06-26 11:10:17 发布

二价亚铁.

最新推荐文章于 2024-06-26 11:10:17 发布

阅读量682

点赞数 30

文章标签：架构前端

本文链接：https://blog.csdn.net/2201_75506216/article/details/139883222

版权

表格配置属性说明文档

页面添加引用：

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，daterange 日期范围（yyyy-MM-dd : yyyy-MM-dd）, month:月度，radio单选框,checkbox:复选框,textarea大文本，editor富文本,headerImage单图片,images多图片，files多文件上，openSelect根据查询选择获取数据，colorPicker选取颜色框，rate设置类似评论星数，switch开关按钮，slider进度条拉取，integer整数数字输入框，decimal带有小数的输入框，
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侦听操作内的函数会立刻被执行
    },

二价亚铁.

关注

30
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
框架 - -＞配置

label: '当事人',props: {},class: {},style: { `对表格字段样式进行操作`},on: { `对字段触发点击事件`},}]/*vue*/title="查看事件管理"-- 内容 -->">"><fw-header title="事件信息" style="margin-top: 11px;" />"><fw-form</fw-form></div></div></div> --></div>/*js*/name: '短信提醒',
复制链接

扫一扫