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

End