db_fram_compont

基于iview的公共组件库,仅适用于本公司内部框架。

1.插件安装

npm install db_fram_compont

2.插件卸载

npm uninstall db_fram_compont

4.参照组件

* A.添加引用
import ReferSelectComponent from 'db_fram_compont/ReferSelect'  //选择参照组件
* B.注册组件
components: { ReferSelectComponent },
* C.添加页面标签
-------------------------------------------------------------------------
<ReferSelectComponent
	v-model="VFormObj.referData"
	:clearable="true"
	:multiple="true"
	width="60%"
	title="请选择参照数据"
	placeholder="请选择参照数据"
	idField="id"
	codeField="phone"
	nameField="name"
	extField="userName"
	:treeRequest="getReferTreeRequest"
	:tableRequest="getReferTableRequest"
	:tableConfig="referCompont.tableConfig"
	@onOk="referOk"
	@changeType="referChange"
></ReferSelectComponent>
v-model：双向绑定表单数据(必填)
clearable：是否可清除(仅单选时生效)
idField：对应表格数据中字段名称(id)不可为空，默认为id
codeField：对应表格数据中字段名称(code)可为空，默认为code
nameField：对应表格数据中字段名称(name)不可为空，默认为name
extField：对应表格数据中字段名称(ext)可为空，默认为空
treeRequest:左侧树数据接口(不配制时组件将不展示左侧树)
tableRequest:中部表格数据接口(必填)
tableConfig:中部表格列配制(必填)
onOk：组件确认事件(返回组件所有缓存数据)
changeType:组件数据变更事件(返回两个参数,当前选中数据及删除数据)
-------------------------------------------------------------------------

* D.v-model双向绑定数据源数据类型
-------------------------------------------------------------------------
@@@VFormObj.referData数据类型
/// <summary>
/// 参照数据
/// </summary>
public List<Db.Common.FramDto.DbRefer> ReferData{ get; set; }

@@@该对象可自定义，或可使用框架自带Db.Common.FramDto.DbRefer类，无论数据单选或多选均以集合输出
如自定义对象时，必需包函以下属性
/// <summary>
/// 框架参照数据对象
/// </summary>
public class DbRefer
{
	/// <summary>
	/// 数据主键
	/// </summary>
	public Guid Id { get; set; }
	/// <summary>
	/// 数据编号
	/// </summary>
	public string Code { get; set; }
	/// <summary>
	/// 数据名称
	/// </summary>
	public string Name { get; set; }
	/// <summary>
	/// 扩展字段
	/// </summary>
	public string Ext { get; set; }
}
-------------------------------------------------------------------------

* E.中部表格列配制
-------------------------------------------------------------------------
referCompont: {
	tableConfig: {
		columns: [
		{
			title: "姓名",
			key: "name",
		},
		{
			title: "帐号",
			key: "userName",
		},
		{
			title: "手机号",
			key: "phone",
		},
		],
	},
},
-------------------------------------------------------------------------

* E.组件表单校验
-------------------------------------------------------------------------
referData: [
	{ required: true, type: 'array',message: "参照不能为空！", trigger: "change" },
],
-------------------------------------------------------------------------

* F.获得左侧树数据
-------------------------------------------------------------------------
//获得参照左侧树数据接口
getReferTreeRequest() {
	return GetOrgTree({}); //API中的数据接口
},
如果需要返回异步操作可如下
//获得参照左侧树数据接口
getReferTreeRequest() {
	return new Promise((resolve, reject) => {
		GetOrgTree({}).then(res=>{
			//在此进行数据操作
			resolve(res);
		})
	})
},

@@@附录(GetOrgTree在API中的写法)
//部门树
export function GetOrgTree(params) {
    return request({
        url: SerHostUrl + '/api/Sys_Organize/GetTreeList',
        method: 'get',
        params
    });
},
-------------------------------------------------------------------------

* G.获得中部表格数据
-------------------------------------------------------------------------
//获得参照中间表格数据接口
getReferTableRequest(e) {
	let dto = { pageIndex: 1, pageSize: 10 };
	if (e) {
	dto.pageIndex = e.pageInfo.index;
	dto.pageSize = e.pageInfo.size;
	dto.orgId = e.selTreeNode.id;
	dto.keyWord = e.keyWord
	}
	return GetUserList(dto);//API中的数据接口
},

@@@附录(GetUserList在API中的写法)
//用户列表
export function GetUserList(data) {
    return request({
        url: SerHostUrl + '/api/Sys_User/GetList',
        method: 'post',
        data
    });
},
-------------------------------------------------------------------------

*H.组件确认事件
-------------------------------------------------------------------------
//参照选择组件
referOk(e) {
	console.log(e);
},
-------------------------------------------------------------------------

* I.组件数据变更事件(删除事件)
-------------------------------------------------------------------------
//参照数据变更事件
referChange(e){
	console.log(e);
},
-------------------------------------------------------------------------