表格配置屬性說明文檔

頁面添加引用：

import BaseTable from ‘@/components/BaseTable/index.vue

1、grid-edit-width 表格操作欄寬度

例如：grid-edit-width：250

2、gridOtherConfig

3、gridConfig表格配置說明：

該配置主要控制頁面表格顯示列。(頁面需要顯示哪些欄位名)

註：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配置說明：

該配置主要控製表格查詢條件顯示（配置查詢按鈕）

5、formConfig配置說明：

該屬性配置主要用於表單顯示（比如增加，修改跳出來的表單需要顯示的欄位）。

formConfig中Type詳解

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個類型

7、gridOperaBtnConfig配置說明：

該配置表示按鈕另起查詢條件一行顯示的所有按鈕集中配置處，代碼預設生成create(新建)，自定義按鈕 的classify屬性請不要占用該類型

8、gridBtnConfig配置說明：

該配置表示每一行表格的操作按鈕，代碼預設生成update(修改)，delete(刪除),view(預覽)，自定義按鈕 的classify屬性請不要占用該類型

### `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主要用於控制頁面整體屬性

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