海外erp前端规范及组件介绍

组件介绍"/>

海外erp前端规范及组件介绍

页面书写格式

@{ViewData["Title"] = "Privacy Policy";
}
@section Styles{<style>添加自定义样式</style>
}
<el-container><el-main>上半部分</el-main><el-main>下半部分</el-main>
</el-container>@section Scripts{<script>添加js</script>
}

操作框架页事件

1.在main.js中appEvent添加方法

var appEvent = {modal(isShow) {let mask = document.getElementsByClassName('modal-mask');for (let i = 0; i < mask.length; i++) {if (!isShow) {mask[i].style.display = 'flex';} else {mask[i].style.display = 'none';}}}
};

2.子iferam页面中调用方法

 parent.appEvent.modal();

调用公共js方法

公共方法

可在common中全局修改element-ui默认配置

//弹窗点击遮罩默认属性
ELEMENT.Dialog.props.closeOnClickModal.default = false;

jst-table更新日志

jst-table表格组件使用方法

<jst-table 
:tabledata="tableData" 
:tableconfig="tableConfig" 
:pageconfig="pageConfig" 
specialcol="selection,number,operate"
specialevent="keyboard,rowClickEdit"
@multi-select="multiSelect"
@edit-save="editSave"
@edit-row-save="editRowSave"
@press-key="pressKey" 
@lable-btn="lableBtn" 
@search-col="searchCol" 
@page-change="pageChange" ><!--如果设置了operate(含有操作列，则需要自定义以下代码)--><template slot="operate" slot-scope="data"><span class="cursorP F2263E5" @@click="editRow(data.rowdata)">编辑</span><span class="cursorP F32735 marL15" @@click="deleteRow(data.rowdata)">删除</span></template><!--如果tableconfig(列配置项添加了非内定模板)则对应需要添加一下代码，slot须与tableconfig中的template对应--><template slot="image" slot-scope="data"><!--data.celldata   单元格数据--><!--data.rowdata    行数据-->这里写自有样式</template><!--简单的计算列样例,此时slot的值要与tableconfig中的template对应（注意：数据库没有的列需要展示也需要配置到tableconfig中）--><template slot="cal" slot-scope="data"><span>{{Number(data.rowdata.bi.value)+ Number(data.rowdata.yu.value)}}</span></template>
</jst-table>

var vue= new Vue({el: '#app',components: {'jstTable': jstTable,}
}

attrConfig

属性配置

tabledata

表格数据(根据现有需求结合vue暂定表格数据格式)

colconfig

列配置设置

tableConfig

列配置

template

内置模板

图示：

pageconfig

分页配置

Events

操作事件

数据样板

tableData: [{id: '00001',date: {ouderNum: 20215719,content: '详',modal: 'tableDetails'},label: [{status: 'defult',name: '复制订单'},{status: 'icon',name: 'purple',color: '#E836FD'}],goods: [{id: 00000,name: '商品1',num: 100,imgurl: '!!1046707508.jpg_430x430q90.jpg',skus: [{id: 424225262622,status: '线上锁定',befor_amount: 0.01,num: 1,amount: 0.01,name: '测试用-【集单】测试商品请不要拍',imgurl: '!!1046707508.jpg_430x430q90.jpg',color: '白色',size: 'S',weight: 0,inventory: 0}]}],accountAndstore: ['113267147', '乐迪'],status: {status: 'paymented',name: '待付款',color: '#1642F3'},address1: {value: '上海市普陀区金沙江路 1518 弄',isShow: false},address2: '上海市普陀区金沙江路 1518 弄',zip: {value: 200333,isShow: false},
}]
tableConfig: [{prop: "date", //对应数据label: "内部订单号", //列名称width: '120', //列宽isShow:true,//是否显示fixed: true, //是否固定sortable: true, //是否排序isSearch: false, //是否下拉搜索template: "hover-modul", //ui模板(hover-modul,label,double,status,default,edit)
}]
``