BLOG

后端模板1

后端模板组件 · FormPanel

前言

FormPanel是什么？

产品来源于抽象了公司的详情页
基于element-ui ，包含了详情页面的展示和编辑功能
有col-span 栅格化内嵌actButton 单层表单逻辑处理
此文档针对于FormPanel 的学习

1. FormPanel 组件的结构是什么样？

FormPanel 由 header || form || simpleTable 三个小组件构成【如上图】

Header 类似详情页的大标题以及基本操作按钮

header ：包含了title 和三种类型的按钮slot ;
– titleButtons 靠title 左侧的按钮，一般用于调用&跳转第三方的按钮
– actButton 多按钮泛指多种操作也包含保存
– saveBtn 保存按钮此按钮的意义是小保存在某个长的业务逻辑内的某一个小流程的小保存类似暂存

– Form类似表单的工厂，塞入JSON 得到基础表单

form 包含【this.schemaDt.type==='commonform’才渲染】
– hidden 隐藏的属性 colSpan决定是否占位
– warning ：红色星号
– text ：属性warnShow文本或输入框加星号
– number：
– select ：下拉框返回数据需要额外增加 “payType”:“3”,“payTypeList”: [{“value”: 1",“label”: “对公一般还款”}]
– radio ：单选框控件值来自 globDictData[‘selectCode’] globDictData.js：全局的单选复选数据集合
– checkbox ：多选框控件值来自 globDictData[‘selectCode’]
– area ：详情页的单纯展示字符串
– textarea ：多行文本框
– date：日期
– datetime：时间日期
– datetimeWarning：带星号的红色日期时间选择框
– homePhone：固定电话控件，默认展示两个输入框 5位-10位
– companyPhone：公司电话三段位 5-10-5位
– areaCity + prodParentSelect + childParentSelect：省市区级联
–无手机号的原因是因为所有用户登录都是用的手机号和身份证

SimpleTable 类似一个表单内有一个简单的表格展示数据使用率较小

simpleTable 【this.schemaDt.type==='simpleTable’才渲染】
– 此组件是HxTable的简单版本请先暂时跳过，由第二篇专门的介绍

2. 构成页面的数据长啥样？ — schemaData .json

此JSON 由于过长，做了部分缩减

	{"msg": "成功",
 		"code": "0000",
		"data": {
	    		"operationalInfo": {
						"isAnchor": true,
						"type": "commonform",
						"formTitle": "操作信息 -header",
						"titleButtons": [{"key": "gongshang","value": "titleButtons"}, {"key": "fayuan","value": "法院网"}],
						"actButton":[{"key":"indInfoVo","value":"保存actButton"}],
						"saveBtn": [{"key": "saveBtn","value": "保存saveBtn"}],
						"fields": [{
						"model": "payType",
						"orderNum": 1,
						"type": "select",
						"colSpan": 5,
						"disabled": true,
						"required": true,
						"label": "扣款方式",
						"labelPosition": "top"
						}, {
						"model": "inputDate",
						"orderNum": 2,
						"type": "text",
						"colSpan": 5,
						"disabled": true,
						"required": true,
						"label": "实际还款日",
						"labelPosition": "top"
						}, {
						"model": "payamountSubAmt",
						"orderNum": 3,
						"type": "text",
						"colSpan": 5,
						"disabled": true,
						"required": true,
						"label": "对公还款金额",
						"labelPosition": "top"
						}, {
						"model": "tranderName",
						"orderNum": 4,
						"type": "text",
						"colSpan": 5,
						"disabled": true,
						"required": true,
						"label": "交易方姓名",
						"labelPosition": "top"
						}, {
						"model": "tranderAccount",
						"orderNum": 5,
						"type": "text",
						"colSpan": 4,
						"disabled": true,
						"required": true,
						"label": "交易方账号",
						"labelPosition": "top"
						}, {
						"model": "tranderBankName",
						"orderNum": 6,
						"type": "text",
						"colSpan": 5,
						"disabled": true,
						"required": true,
						"label": "银行名称",
						"labelPosition": "top"
						}, {
						"model": "deductAmount",
						"orderNum": 7,
						"type": "text",
						"colSpan": 5,
						"disabled": true,
						"required": true,
						"label": "扣款总计",
						"labelPosition": "top"
						}, {
						"model": "voucherSerialNo",
						"orderNum": 8,
						"type": "text",
						"colSpan": 5,
						"disabled": true,
						"required": true,
						"label": "凭证流水号",
						"labelPosition": "top"
						}, {
						"model": "voucherAbstract",
						"orderNum": 9,
						"type": "text",
						"colSpan": 5,
						"disabled": true,
						"required": true,
						"label": "凭证摘要",
						"labelPosition": "top"
						}, {
						"model": "reduceReason",
						"orderNum": 12,
						"type": "select",
						"colSpan": 5,
						"disabled": true,
						"required": true,
						"label": "减免原因",
						"labelPosition": "top"
						}]
						}
		    		"accountInfo" : {		
					"isAnchor": false,
					"type": "simpleTable",
					"formTitle": "交易明细",
					"titleButtons": [],
					"actButton": [],
					"fields" :[
						{"prop":"loanSerialNo","label":"借据号"},
						{"prop":"applyDate","label":"交易日期"},
						{"prop":"accountDate","label":"记账日期"},
						{"prop":"deductType","label":"交易类型"},
						{"prop":"actualPayamt","label":"交易金额"},
						{"prop":"inputUser","label":"操作人"},
						{"prop":"inputDate","label":"操作日期"}
					]
				},`

3. 最简单的FormPanel，怎么写？

3.1 引入组件

import FormPanel from  "@/components/FormPanel/FormPanel"; // 组件
import schemaData from  "./json/schemaData.json"; // 组件的结构JSON

3.2 向组件插入数据

<form-panel  ref="saveAct"  class="navSection"
v-for="(key, value, index) in schemaDataAll"
:key="index"  :schemaData="key"
:modelData="modelDataAll[value]"
:formKey="value"></form-panel>

参数解释
schemaDataAll 是上面的JSON，
(key, value, index) == item ，itemName ，下标
modelData 是 schemaDataAll[itemName]
原因是多个formPanel 解析就不需要多次申明

// 类似
<form-panel  ref="saveAct"  class="navSection"	:key="index"  
schemaData="schemaData.operationalInfo"
:modelData="modelDataAll['operationalInfo']"
:formKey="value"></form-panel>
<form-panel  ref="saveAct"  class="navSection"	:key="index"  
schemaData="schemaData.indInfo"
:modelData="modelDataAll['indInfo']"
:formKey="value"></form-panel>

3.3 定义基础的公共参数的集合 store/modules/glabdatas.js

这部分JSON会在项目开始之初建立好，并且逐步完善
删减了部分，作用是填充多选的单选的值

    const hxconst = {
		state: {
				globDictData: {
				"car300EditFlag": true,
				"unitType": [{ "value": "01", "label": "政府机关" }, { "value": "02", "label": "事业单位" }, { "value": "03", "label": "国企" }, { "value": "04", "label": "外企" }, { "value": "05", "label": "合资" }, { "value": "06", "label": "民营" }, { "value": "07", "label": "私企" }, { "value": "08", "label": "个体" }],
				"industryType" : [{ "value": "01", "label": "政府机关" }, { "value": "02", "label": "军事机关" }, { "value": "03", "label": "教育、科研、设计机构" }, { "value": "04", "label": "传媒、文化体育" }, { "value": "05", "label": "高新技术" }, { "value": "06", "label": "建筑业" }, { "value": "07", "label": "制造业" }, { "value": "08", "label": "金融" }, { "value": "09", "label": "服务" }, { "value": "10", "label": "零售、商贸、企业" }, { "value": "11", "label": "公共事业" }, { "value": "12", "label": "医院" }],
				"supportOrChildNumber": [{ "value": "01", "label": "0人" }, { "value": "02", "label": "1人" }, { "value": "03", "label": "2人" }, { "value": "04", "label": "3人以上" }],
				"positionLevel": [{ "value": "01", "label": "普通职员" }, { "value": "02", "label": "中层管理" }, { "value": "03", "label": "高层管理" }],
				"education": [{ "value": "01", "label": "硕士及以上" }, { "value": "02", "label": "本科" }, { "value": "03", "label": "大专" }, { "value": "04", "label": "中专" }, { "value": "05", "label": "高中" }, { "value": "06", "label": "初中及以下" }],
				"liveType": [{ "value": "01", "label": "商业按揭" }, { "value": "02", "label": "公积金按揭" }, { "value": "03", "label": "商业/公积金组合按揭" }, { "value": "04", "label": "无按揭购房" }, { "value": "05", "label": "自建房" }, { "value": "06", "label": "租房" }, { "value": "07", "label": "与父母同住" }, { "value": "08", "label": "亲戚住房" }, { "value": "09", "label": "临时居住" }, { "value": "10", "label": "单位宿舍" }],
				"yesOrNo": [{ "value": "1", "label": "是" }, { "value": "0", "label": "否" }]  
				},
				mutations: {},
				actions: {},
				getters: {}
				 }
			}
export default hxconst

4. 那真实的实例页面代码是什么样？

<template>
<div>
<form-panel  ref="saveAct"  class="navSection"
v-for="(key, value, index) in schemaDataAll"
:key="index"  :schemaData="key"
:modelData="modelDataAll[value]"
:formKey="value"></form-panel>
</div>
</template>
<script>
import FormPanel from  "@/components/FormPanel/FormPanel"; // 引入组件
import shemaData from  "./json/schemaData.json"; // 引入组件构成的JSON
import cloneDeep from  'lodash/cloneDeep'; // 深拷贝对象
import tableLabel from  "./json/operationLable.js" //表格的构成
// 请求接口
import { detailCreated_SearchRequest , detailCreated_operationLable } from  '@/api/hello.js'
export  default {
components: { FormPanel },
data() {
return {
schemaDataAll: [],// 所有的form的schemaData
operationLable:[],
detailparams:cloneDeep(this.$route.params.contractNumberParams), //查询参数
tableLables: cloneDeep(tableLabel)
};
},
mounted() {
this.$nextTick(()=>{
this.initSchema() // 初始化页面结构
this.initData()   // 填充页面数据
})
},
methods: {
//获取样式
//也可以直接通过服务器控制
initSchema: function() {
const schemaJson = schemaData.data;
this.schemaDataAll = schemaJson;
},
//获取数据
initData: function() {
	// 详情信息 表单数据填充
	let _this = this
	detailCreated_SearchRequest(this.detailparams).then(res  =&gt; {
		if (res.code ==  "20000") {
			console.log('resdata',res.data);
			_this.modelDataAll = res.data
		} else {
			this.$message.error('网络繁忙,请稍后再试!')
		}
	})

	//操作列表 表格数据填充
	detailCreated_operationLable(this.operationLableParam).then(res  =&gt; {
		if ((res.code ==  "20000")) {
			this.operationLable = res.data
		}
		})
	},
	// Header 按钮操作方法
	titleButtonClick : function(e, key){
				window.open(key, '_blank')
	},
	//动作按钮功能
	measureClick: function(type, e, key){
		// console.log(type,e,key);
		this.$emit("calculte", key, e, type);
	},
	// 保存按钮功能 因为内部嵌套很多 暂存所以逻辑很复杂
	// 实际使用建议结合自身业务做删改
	onButtonClick : function(type, e, key){
	    // 1秒内禁止多次保存
		let nowSecond =  new Date().getTime() /  1000;
		let delta = (nowSecond - this.buttonClickTimeSecond);
		if(delta &gt;=0  &amp;&amp; delta &lt;=1){
			this.$info("onButtonClick: forbid double click in one second. return.");
				return;
			}
		this.buttonClickTimeSecond = nowSecond;
	/** 保存按钮 */
		if('commonform'  === this.formType){
			let flag =  true;
			const areaselRef = this.$refs['areaselform'];
			if(areaselRef) {
				if(areaselRef instanceof Array) {
					for(let i=0; i &lt; areaselRef.length; i++) {
						const areaselvalid = areaselRef[i].validate();
						if(!areaselvalid) {
							flag =  false;
						}
					}
				} else {
					const areaselvalid = areaselRef.validate();
						if(!areaselvalid) {
						flag =  false;
						}
				}
	}
	this.$refs[type].validate((valid) =&gt; {
		if (valid &amp;&amp; flag) {
			this.$emit("btnClick", key, e, this.modelDt)
		} else {
			//console.log('表单校验不通过!!');
		}
	});
	}else  if('contact'  === this.formType&amp;&amp;'phoneVeriDownload'!=key){ //联系人信息
		let myValid = this.$refs.contactInfo.validate();
			if(!myValid){
				this.$info("contact validate results false. return.");
				return;
		}
		const resDt = this.$refs.contactInfo.getValue()
		if(!resDt){
			this.$info("contact validate results false. return.");
			return;
		}
			this.$emit("btnClick", key, e, ((resDt &amp;&amp; resDt.length&gt;0) ? resDt:  null) )
		}else  if('remark'  === this.formType){ //备注
			const resDt = this.$refs.remarkInfoRef.getValue()
			this.$emit("btnClick", key, e, resDt)
		}else  if('professionInfo'  === this.formType){ //职业信息
			const resDt = this.$refs.professionInfo.getValue()
			this.$emit("btnClick", key, e, resDt)		  
		}else  if('simpleTable'===this.formType){
			this.$emit("btnClick", key, e, key)
		}else  if(key ==  'downloadPhoneList'){
			this.$refs.phoneVerificationRef.showDownloadList();
		}else  if(key ==  'phoneVeriDownload'){
			this.$emit("btnClick", key, e, type);
		}else{
			this.$emit("btnClick", key, e, type);
		}
	},
}
};
</script>

5. 结语

使用formPanel 组件

在你的页面
需要

引入填充单选多选的JSON字符串
引入页面构成的JSON字符串
引入formPanel 组件
引入axios请求接口
填充请求回来的数据
编写页面处理逻辑

以上
谢谢观看！

修改页面

Last Updated: 12/20/2021, 5:53:52 AM