0.1.17 • Published 1 year ago
wis-components v0.1.17
wis-components
1.安装依赖
npm install
启动项目
npm run serve
打包并且推送到npm
npm run pushnpm
modal组件开发步骤
1.packages/config/modal-config.js 配置方法
OaExpenseAccount:{
api:'/api/oa/cost/account/selectPage',//分页接口
searchCompName: 'oa-expenseAccount-search',//查询组件
//筛选框配置查询条件
queryParams:{
companyCode:'',
accountCode:'',
accountName:'',
status:1, //默认查询条件
},
//table列配置
column: [
{
title: '科目代码', //表头
key: 'accountCode', //列展示字段
width:150 //列宽度
},
{
title: '科目名称',
key: 'accountName',
},
{
title: '公司代码',
key: 'companyCode',
width: 120
},
{
title: '状态',
key: 'statusView',
width: 100
},
]
},
2.packages/modal/search-header 内开发搜索组件
具体实现请阅读代码: 注意:
//搜索组件其实就是个表单,表单绑定的查询对象为formInfo,props必须要有formInfo
export default {
name: 'oa-costcenter-search', //搜索组件名
data() {
return {
}
},
props: {
formInfo: {}
}
}
3.搜索组件注册 详情阅读代码 packages/index.js
4.使用input-select组件唤起弹窗
<input-select placeholder="打开币种弹窗" v-model="FormData.name" :codeMap="codeMap" :model="FormData" :rowKey="rowKey" title="币种" componentName="OaCurrency"/>
//placeholder : 占位提示
//v-model: 双向绑定的字段
//codeMap: 对表单绑定的映射规则,比如{code:rowCode,name:rowName},意思是表格行数据的rowCode字段赋值给表单FormData的code,行数据rowName字段赋值给表单FormData的name,
//rowKey: 需要获取表格行数据的值字段,例如rowKey为 'name',表示需要获取表格行数据的name字段的值,赋给FormData.name
//title: 弹窗标题
//componentName: 弹窗类型(必填!!!)
*5. 使用js方法手动唤起弹窗
methods: {
openModal() {
let _self = this
this.$ModalActions({
title: _self.title, //弹窗标题
rowKey: 'currencyCode',//需要获取表格行数据的值字段,供双向绑定使用,如果该属性不存在,默认获取整行数据
model: _self.FormData,// 必填!! 绑定的表单
bindModelKey:'code', // 对表单属性进行双向绑定的key,
codeMap: { code: 'currencyCode', name: 'currencyName' },
//对表单绑定的映射规则,比如{code:currencyCode,name:currencyName},意思是表格行数据的currencyCode字段赋值给表单FormData的code,行数据currencyName字段赋值给表单FormData的name,
componentName: 'OaCurrency',//必填!!!弹窗类型
//setValue回调方法,选用,rowKey存在,输出对应value值,当rowKey不存在的时候,默认输出选中的整行数据,可以在此回调方法内进行操作
setValue(val) {
_self.FormData.code = val
}
})
}
}