组件介绍"/>
海外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方法
公共方法
方法 | 说明 | 参数 |
---|---|---|
parent.appEvent.modal() | 打开或关闭遮罩 | 传参(非false)关闭,不传参打开 |
parent.appEvent.jumpUrl(url) | 页签中相互跳转 | 参数{id: ‘01054122’,name: ‘仓库信息’,isActive: true,path: ‘Wms/Warehouse/Manager’ } |
common.refreshIframe() | 刷新当前iframe | 传参(iframe的id),刷新指定iframe。不传参数刷新当前iframe |
common.playSound(status,path) | 调用提示音 | status:提示音类别(‘error’,‘success’,必填),path:自定义提示音路径 common.playSound(‘error’) common.playSound(‘自定义名称’,’/public/radio/success1.wav’) |
common.getUrlParam(name) | 获取url参数名称 | 参数必填(获取的参数名称),返回参数值 |
1mon.getDate(date,‘yyyy-mm-dd’) 2.{{date | getDate(‘yyyy-mm-dd’) }} 建议:若对于数据有处理可以在循环中使用第一种方法提取日期 若无处理可直接用2的vue模板语法 | 日期截取 | ’yyyy’:年 ’mm’: 月 ’dd’:日 ’h’:时 ’m’:分 ’s’:秒 ’yy-mm’:年-月’ mm-dd’:月-日’ yy-mm-dd’:年-月-日 ’h: m:s’:时:分:秒 |
1. common.add(val1,val2 ) 2.{{val1 | add(val2)}} (2.)为vue模板语法中使用 | 相加运算 | 加数(已规避浮点数问题) |
1. common.reduce(val1,val2) 2.{{val1| reduce(val2)}} (2.)为vue模板语法中使用 | 相减运算 | 减数与被减数(已规避浮点数问题;val1:被减数,val2:减数) |
1. common.toFixed(val,le) 2.{{val| toFixed(le)}} (2.)为vue模板语法中使用 | 四舍五入 取2位小数 | val:Number|String le:保留几位小数(默认为2位) |
common.getMax(arr) | 数组取最大 | Array |
common.getMin(arr) | 数组取最小 | Array |
common.sum(arr) | 数组求和 | Array |
common.getCopy(arr) | 数组深拷贝 | 任意 |
可在common中全局修改element-ui默认配置
//弹窗点击遮罩默认属性
ELEMENT.Dialog.props.closeOnClickModal.default = false;
jst-table更新日志
时间 | 废除 | 新增 |
---|---|---|
2020.02.12 | 无 | 新增specialevent(特殊事件)参数:disabledEdit(禁止所有edit模板不可编辑);详见attrConfig |
2020.01.10 | 废除keyboard(键盘操作) 废除字段type(配置选择列,序号列) 废除字段operate{操作列) | 新增specialcol(特殊列)详见attrConfig 新增specialevent(特殊事件)详见attrConfig 新增edit-row-save事件(单击行编辑状态)详见Events |
2020.03.02 | 无 | 新增input纯输入框模板详见template |
2020.03.03 | 无 | 新增列配置(详见colconfig)aline和headerAlign(列对齐和头部对齐方式),详见tableConfig 新增tableheight,分页是否不占高度,详见attrConfig |
2020.03.09 | 无 | 新增获取ref的方法get-ref,详见Events |
2020.04.14 | 无 | 新增选框选中行后数据更新,选框回选。reserverow: String(唯一属性的列名称) |
2020.04.22 | 废除size-change、current-change事件 废除pageconfig中的size字段 | 新增page-change事件(前两个废除事件的整合,无返回值) 新增pageconfig中的pageSize字段 |
2020.04.26 | 无 | 新增模板image(可鼠标移入查看大图) |
2020.05.07 | 无 | 新增列配置排序可拖动排序 新增表格数据排序sort-change详见Events |
2020.05.07 | 无 | 自定义表头详见tableConfig |
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 | 表格数据 | Object |
tableconfig | 表格列配置 | Object |
pageconfig | 分页配置 | Object |
height | 表格高度 | number |
specialcol | 特殊列配置(选框,序号,操作) | string(selection,number,operate) |
specialevent | 特殊事件(键盘操作,单击行编辑(若需双击单个修改不配置即可),禁止所有edit模板不可编辑) | string(keyboard,rowClickEdit,disabledEdit) |
tableheight | 分页是否占据高度 | Boolean(默认false) |
colconfig | 列配置设置功能(不加则无列配置设置) | Object |
tabledata
表格数据(根据现有需求结合vue暂定表格数据格式)
交互效果 | 原数据 | 现数据 |
---|---|---|
只控制显示 | address1:‘上海市普陀区金沙江路 1518 弄’ | address1: {value:‘上海市普陀区金沙江路 1518 弄’,isShow:false}, |
包含小按钮+弹出框 | ouderNum: 20215719 | ouderNum: {value: 20215719,content: ‘详’,modal: ‘tableDetails’}, |
显示不同样式 | status: ‘deliverying’, | status: {value: ‘deliverying’, name: ‘发货中’, color: ‘#F94406’}, |
colconfig
列配置设置
参数 | 说明 | 类型 | 可选值 |
---|---|---|---|
elementId | 对应表格id(为区分一个页面多个表格) | string | 选填(多个表格时必填) |
key | 区分某一页的列配置 | string | 必填(一般用路由) |
tableConfig
列配置
参数 | 说明 | 类型 | 可选值 |
---|---|---|---|
prop | 对应数据 | string | 必填 |
label | 对应数据列名称 | string | 必填 |
isShow | 该列是否显示 | boolean | 必填 |
fixed | 列固定 | boolean | 非必填 |
sortable | 列排序 | boolean | 非必填 |
isSearch | 列搜索 | boolean | 非必填 |
aline | 内容对齐方式 | string | 非必填(left/center/right) |
headerAlign | 表头对齐方式 (若不传参数,则使用aline对齐方式) | string | 非必填(left/center/right) |
template | 渲染模板 | string | 见templat模板介绍 |
header | 自定义表头 | string | 和template用法相同 返回值是对应的config |
template
内置模板
模板名 | 说明 | 所需数据 |
---|---|---|
default | 默认只展示 | String |
hover-modul | 鼠标移入出操作按钮(图示2) | Object ({ouderNum: 20215719,content: ‘详’,modal: ‘tableDetails’}) |
label | 标签模板(默认包含鼠标移入操作按钮,图示3) | Array [{status: ‘defult’,name: ‘复制订单’},{status: ‘icon’,name: ‘purple’,color: ‘#E836FD’}] |
double | 上下双行数据(图示4) | Array [‘12321312’,‘栗鼠’] |
status | 带图标+颜色(图示5) | Object {color: “#FF06A4”, status: “Delivering”, name: “发货中”, msg: “平台快递公司未映射”, describe: “描述”} |
edit | 双击修改当前单元格(图示6) | Object {value: ‘上海市普陀区金沙江路 1518 弄’,isShow: false,isDisabled:false}, |
input | 纯输入框(数据格式 name:value,若传递时对象则支持设置不可编辑) | String,Object({isDisabled:true,value:‘21’}) |
image | 图片模板(鼠标移入可查看大图)(图示7) | String |
图示:
pageconfig
分页配置
事件名 | 说明 | 参数 |
---|---|---|
total | 总条数 | number |
pageSize | 每页显示条 | number |
pageIndex | 当前页 | number |
sizes | 每页显示个数选择器的选项设置 | arr |
Events
操作事件
事件名 | 触发的事件 | 返回值 |
---|---|---|
row-click | 单击行时 | 选中行数据 |
multi-select | 多选框勾选时 | 选中行数据 |
edit-save | 输入框修改完成时(数据有修改才会触发) | 行Id,列名称,修改后的值 |
edit-row-save | 选中其他行或再次单击行时触发(数据有修改才会触发) | 修改后行数据 |
press-key | 键盘上下左右键选中 | 当前选中行数据 |
lable-btn | 小按钮“详”,“改”等点击事件 | 当前选中行数据,对应弹出框名称 |
search-col | 列搜索,点击搜索按钮时触发的事件 | 列名称,搜索内容 |
page-change | 分页选择每页/条,页面切换时触发 | 无 |
get-ref | 无 | 抛出ref |
sort-change | 点击列上的排序按钮时 | {列名,排序方向} |
数据样板
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)
}]
``
更多推荐
海外erp前端规范及组件介绍
发布评论