[JavaScript知识库]HN前端框架

表格配置属性说明文档

目录

1、页面添加引用：

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

2、gridConfig表格配置说明：

该配置主要控制页面表格显示列。(页面需要显示哪些字段名)

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)
        }
      },
}]

3、queryConfig配置说明：

该配置主要控制表格查询条件显示（配置查询按钮）

4、formConfig配置说明：

该属性配置主要用于表单显示（比如增加，修改跳出来的表单需要显示的字段）。

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();
		ids.add("839e57d051fb308f2a969afa6f2552af");
		propertys.add("hotelName");
		mulPropertys.add("hotelName");
		ids.add("22fac8cd28f3cb580f4803ae0b2172b1");
		propertys.add("scenicName");
		mulPropertys.add("scenicName");
		ids.add("1a6760484add3f2c1fd8c7530fa98cda");
		propertys.add("diningName");
		mulPropertys.add("diningName");
		
		ids.add("007dace1b75518bcba54c19bb0581617");
		propertys.add("status");
		
    	//字典表
   		queryEntity.setIds(ids);
    	queryEntity.setPropertys(propertys);
  
    	queryEntity.setMulPropertys(mulPropertys);
    	queryEntity.setMulFields(mulFields);
    	queryEntity.setMulPropertysComing(true);
    
//一般用于查询文件 查询文件信息  和单文件图片查询 private FileEntity imageFileEntity;
queryEntity.setSingleFilePropertys(CollUtil.newArrayList("image"));
    
//多文件文件接受 接受使用 private List<FileEntity> imageList 
queryEntity.setFilePropertys(CollUtil.newArrayList("image"));
    
    
//前端使用tree时有字典表  使用下面代码查询字典表名称
queryEntity.setTreePropertys(CollUtil.newArrayList(new QueryTreeEntity("fountain", "45a3421d4263a23dc2eb3956bbe50a48")));
}

封装字典表 和查询字典表例子：

@ApiOperation(value = "获取评分标准下拉框列表")
	@GetMapping("scoringCriteria/{id}")
	public ResponseData<Map<String, Object>> dicts(@PathVariable("id") String id,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);
	}

5、gridTopBtnConfig配置说明：

该配置表示按钮紧随查询条件显示的所有按钮集中配置处，代码默认生成reset,export，自定义按钮的classify属性请不要占用该2个类型

6、gridOperaBtnConfig配置说明：

该配置表示按钮另起查询条件一行显示的所有按钮集中配置处，代码默认生成create(新建)，自定义按钮 的classify属性请不要占用该类型

7、gridBtnConfig配置说明：

该配置表示每一行表格的操作按钮，代码默认生成update(修改)，delete(删除),view(预览)，自定义按钮 的classify属性请不要占用该类型

8、formModel配置说明：

formModel表示表单的数据属性，格式如下

  formModel: {
     'id' : '',
     'name': '',
     'introduction': '',
     'remarks': '',
     'projectClassify': '',
 }

表示有哪些控件，这个地方需要保持一致

9、queryModel配置说明：

queryModel表示查询的数据属性，格式如下

 queryModel: {
     'name' : null,
     'projectClassify' : null,
 }

10、dialogConfig 配置说明：

dialogConfig主要用于控制页面整体属性

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="peopleList">
        <div style="display: flex;">
          <el-upload :action="uploadAction" :before-upload="beforeRepeatUpload" :headers="uploadHeader"
            :show-file-list="false" :data="configData.formNewModel" :on-error="updateError" :on-success="uploadSuccess"
            :multiple="false">
            <div style="display: flex;align-items: center;">
              <el-button size="small" type="text">导入</el-button>
              <div slot="tip" class="el-upload__tip" style="margin-top: 0px;margin-left: 10px;">
                只能上传xls,xlsx文件</div>

            </div>
          </el-upload>
          <el-button size="small" style="margin-left: 10px;" @click="downTemplate" type="text">模板下载
          </el-button>
        </div>
      </div>
      </FwForm>

//当菜单没有图标时UPDATE t_framework_sys_menu SET ICON=‘index’ where icon is null or icon=’’

弹窗 框架===>>

 <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>
     
     
<!-- 打开该弹窗 -->
 this.$refs.baseDialog.showDialog()  
       
<!-- 关该弹窗 -->   
that.$refs.baseDialog.hideDialog()
     
<!-- 弹窗提交按钮不显示 -->   
`dialogConfig` 属性加 isShowSumbit:false