框架配置

来源:https://www.cnblogs.com/xw-01/p/18262200
-Advertisement-
Play Games

表格配置屬性說明文檔 頁面添加引用: import BaseTable from ‘@/components/BaseTable/index.vue 1、grid-edit-width 表格操作欄寬度 例如:grid-edit-width:250 2、gridOtherConfig 屬性 說明 示例 ...


表格配置屬性說明文檔

頁面添加引用:

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());

列表圖片展示

image


這裡簡單寫個示例 簡單實用後續自己理解探索

後端

@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偵聽操作內的函數會立刻被執行
    },

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 作為一名前端開發者,vscode想必大家應該都接觸過,就像大多數 IDE 一樣,VSCode 也有一個擴展和主題市場,包含了數以千計質量不同的插件。 作為一名熟練掌握各種前端開發工具安裝和卸載的大師兄來說,為大家安利好玩有用的工具插件是我義不容辭的責任,所以我精挑細選了九款必備的vscode插件 C ...
  • ‍ 寫在開頭 點贊 + 收藏 學會 需求背景 從第三方採購的vue2 + ElementUI實現的雲管平臺,乙方說2011年左右就開始有這個項目了(那時候有Vue了嗎,思考.jpg)。十幾年的項目,我何德何能可以擔此責任。裡面的代碼經過多人多年迭代可以用慘不忍睹來形容,吐槽歸吐槽 ...
  • 摘要:本文深入探討了Nuxt 3的組件開發與管理,從基礎概念、安裝配置、目錄結構、組件分類與開發實踐、生命周期與優化,到測試與維護策略。詳細介紹了Nuxt 3的核心特點,如伺服器端渲染(SSR)、靜態站點生成(SSG)以及與Vue生態系統的無縫集成。文章以Nuxt 3為基礎,指導開發者如何高效構建高... ...
  • 問題分析 當我們需要用摺疊面板的時候,往往會考慮element-ui的el-collaspe,然而大多數時候原生預設的樣式並無法拿來就用。我們往往會自定義組件的樣式,或者在預設的基礎上進行修改。最近在Vue項目中進行組件修改的時候,無意間某個文件自動設置成了scoped(應該是插件自動化生成的結構代 ...
  • 前言 眾所周知,在vue2的時候使用一個vue組件要麼全局註冊,要麼局部註冊。但是在setup語法糖中直接將組件import導入無需註冊就可以使用,你知道這是為什麼呢?註:本文中使用的vue版本為3.4.19。 關註公眾號:【前端歐陽】,給自己一個進階vue的機會 看個demo 我們先來看個簡單的d ...
  • CSS 屬性計算過程 你是否瞭解 CSS 的屬性計算過程呢? 有的同學可能會講,CSS屬性我倒是知道,例如: p{ color : red; } 上面的 CSS 代碼中,p 是元素選擇器,color 就是其中的一個 CSS 屬性。 但是要說 CSS 屬性的計算過程,還真的不是很清楚。 沒關係,通過此 ...
  • ‍ 寫在開頭 點贊 + 收藏 學會 前端常用的截圖保存的方法 利用 Blob 對象和 URL.createObjectURL:可以將截圖數據轉換為 Blob 對象,然後使用 URL.createObjectURL 方法生成一個臨時的 URL,將這個 URL 賦值給 <a> 標簽的 ...
  • 主要對面向過程編程與面向對象編程進行對比,介紹了軟體危機的背景,講解了面向對象編程設計思想的由來,對面向對象方法學:OOA-OOD-OOP進行簡單介紹。 ...
一周排行
    -Advertisement-
    Play Games
  • 通過WPF的按鈕、文本輸入框實現了一個簡單的SpinBox數字輸入用戶組件並可以通過數據綁定數值和步長。本文中介紹了通過Xaml代碼實現自定義組件的佈局,依賴屬性的定義和使用等知識點。 ...
  • 以前,我看到一個朋友在對一個系統做初始化的時候,通過一組魔幻般的按鍵,調出來一個隱藏的系統設置界面,這個界面在常規的菜單或者工具欄是看不到的,因為它是一個後臺設置的關鍵界面,不公開,同時避免常規用戶的誤操作,它是作為一個超級管理員的入口功能,這個是很不錯的思路。其實Winform做這樣的處理也是很容... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他的程式每次關閉時就會自動崩潰,一直找不到原因讓我幫忙看一下怎麼回事,這位朋友應該是第二次找我了,分析了下 dump 還是挺經典的,拿出來給大家分享一下吧。 二:WinDbg 分析 1. 為什麼會崩潰 找崩潰原因比較簡單,用 !analyze -v 命 ...
  • 在一些報表模塊中,需要我們根據用戶操作的名稱,來動態根據人員姓名,更新報表的簽名圖片,也就是電子手寫簽名效果,本篇隨筆介紹一下使用FastReport報表動態更新人員簽名圖片。 ...
  • 最新內容優先發佈於個人博客:小虎技術分享站,隨後逐步搬運到博客園。 創作不易,如果覺得有用請在Github上為博主點亮一顆小星星吧! 博主開始學習編程於11年前,年少時還只會使用cin 和cout ,給單片機點點燈。那時候,類似async/await 和future/promise 模型的認知還不是 ...
  • 之前在阿裡雲ECS 99元/年的活動實例上搭建了一個測試用的MINIO服務,以前都是直接當基礎設施來使用的,這次準備自己學一下S3相容API相關的對象存儲開發,因此有了這個小工具。目前僅包含上傳功能,後續計劃開發一個類似圖床的對象存儲應用。 ...
  • 目錄簡介快速入門安裝 NuGet 包實體類User資料庫類DbFactory增刪改查InsertSelectUpdateDelete總結 簡介 NPoco 是 PetaPoco 的一個分支,具有一些額外的功能,截至現在 github 星數 839。NPoco 中文資料沒多少,我是被博客園群友推薦的, ...
  • 前言 前面使用 Admin.Core 的代碼生成器生成了通用代碼生成器的基礎模塊 分組,模板,項目,項目模型,項目欄位的基礎功能,本篇繼續完善,實現最核心的模板生成功能,並提供生成預覽及代碼文件壓縮下載 準備 首先清楚幾個模塊的關係,如何使用,簡單畫一個流程圖 前面完成了基礎的模板組,模板管理,項目 ...
  • 假設需要實現一個圖標和文本結合的按鈕 ,普通做法是 直接重寫該按鈕的模板; 如果想作為通用的呢? 兩種做法: 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種:附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
  • 在C#中,委托是一種引用類型的數據類型,允許我們封裝方法的引用。通過使用委托,我們可以將方法作為參數傳遞給其他方法,或者將多個方法組合在一起,從而實現更靈活的編程模式。委托類似於函數指針,但提供了類型安全和垃圾回收等現代語言特性。 基本概念 定義委托 定義委托需要指定它所代表的方法的原型,包括返回類 ...