sftx-comm-control
说明
vue的业务组件库,对一些公共的业务组件抽离成单独的npm模块,业务系统公用。
关于测试
基于jest,在发布前会进行dom与快照的基本测试,开发组件的时候需要同时把单元测试完善。
安装、发布步骤
# 安装npm install# 发布npm run pub# 测试npm run test
业务工程使用说明
安装依赖
npm i sftx-comm-control -S
引用
import {Expression} from 'sftx-comm-control';
全局注册
Vue.use(Expression.name,Expression);
局部注册
const vueapp=new Vue({
el: '#app',
components: { Expression },
template: '<Expression/>'
})
目录
.
├── README.md
├── __tests__ # jest 测试程序目录
│ ├── Expression.test.js
│ ├── __snapshots__
│ │ └── Expression.test.js.snap
│ └── helpers
│ └── LocalStorageMock.js
├── lib # es5入口
│ └── index.js
├── package-lock.json
├── package.json
├── src # 代码目录
│ ├── assets
│ ├── components
│ │ ├── Expression.vue
│ │ ├── Tab.vue
│ │ └── Tabs.vue
│ └── index.js #es6+ 入口,程序主入口
├── webpack.base.js
└── webpack.config.js
组件
Expression表达式
引入使用
script直接引入方式 demo在test/express目录
- 引入script
<script src="sftx-comm-control/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 初始化
const ops=[{name:"交易金额",value:"txAmt"},{name:"开户金额",value:"opnAmt"}];
const exps=[{name:"加",value:"+"},{name:"减",value:"-"}];
function save(result){
alert('new result='+result);
//根据result做逻辑处理
//关闭窗口
}
function cancle(){
alert('new cancle');
//关闭窗口
}
var data='txAmt+1+3+txAmt+4^2';
var vm=sftxCommControl.ExpressionApp('#app',ops,'name','value',exps,save,cancle,data);
vm.data='txAmt+opnAmt';
第一个参数'#app'是标签的id,第二个标签'ops'是因子数组,第三个参数'name'是因子数组中显示在下拉框的值, value:因子的值,exps:自定义表达式,格式是[{name:' ',value: ' '}],save是点击保存的回调函数。cancle 是点击取消的回调函数,data是初始化组件的表达式。返回的是vm, 可以通过修改vm.data属性,动态改变表达式。
webpack方式引入
webpack方式就是引入的方式不一样,通过npm commonjs方式直接引用。其他参数、用法一样。
- 添加html标签
<div id="expressSetting" class="easyui-window" title="新增账户" style="width:600px;height:400px"
data-options="modal:true,closed:true">
<div id="expressApp" style="background: #f6f6f6">
</div>
- 添加引用
import {ExpressionApp} from 'sftx-comm-control';
- 初始化
let ops=[{filler:'交易金额',brf:'txAmt'},{name:'开户金额',value:'opnAmt'}];
let exps=[{name:'加',value:'+'},{name:'减',value:'-'}];
let save=(result)=>{
let model=window.txmodelbandaccount.txExecMapDefs.find(x=>{return x.brf===window.expressionVm.key;});
model.mapExp=result;
$('#expressSetting').window('close');
};
let cancle=()=>{
$('#expressSetting').window('close');
};
let expressVm =ExpressionApp('#expressApp',ops,'filter','brf',exps,save,cancle,'');
window.expressionVm = expressVm;
属性
属性名 | 描述 | 用法 |
---|---|---|
data | 表达式初始化值 | 在js里使用vm.data='txAmt+1'动态赋值 |
ops | 因子下拉赋值 | 在js里使用vm.ops=[{filler:'交易金额',brf:'txAmt'},{name:'开户金额',value:'opnAmt'}] 动态赋值 |
ExpressionApp(el,ops,opsText,opsValue,exps,save,cancle,data)函数是对Express构造过程的一个封装,会构造一个express的vue组件,并且把vm实例返回。 函数对应的参数如下
属性名 | 描述 | 例子 |
---|---|---|
el | 标签选择,将组件挂在哪个elemnent下面 | '#expressionid' |
ops | 因子数组 | [{name:'交易金额',value:'txAmt'},{name:'开户金额',value:'opnAmt'}] 动态赋值 |
opsText | 因子下拉框的显示内容,对应ops | 'name' |
opsValue | 因子下拉框的值,对应ops | 'value' |
exps | 重写的表达式 | [{name:'加',value:'+'},{name:'减',value:'-'}] |
save | 保存回调函数 | 函数,参数为表达式结果 |
cancle | 取消回调函数 | 函数 |
data | 动态修改界面的表达式 | 'txAmt+1' |