页面书写格式
@{
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方法![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/de7cc01c2a2f5f77f87b2c06a0a54ea7.png)
公共方法
方法 | 说明 | 参数 |
---|---|---|
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参数名称 | 参数必填(获取的参数名称),返回参数值 |
1.common.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: 'https://img.alicdn.com/imgextra/i2/1046707508/TB2xwsghCtYBeNjSspkXXbU8VXa_!!1046707508.jpg_430x430q90.jpg',
skus: [{
id: 424225262622,
status: '线上锁定',
befor_amount: 0.01,
num: 1,
amount: 0.01,
name: '测试用-【集单】测试商品请不要拍',
imgurl: 'https://img.alicdn.com/imgextra/i2/1046707508/TB2xwsghCtYBeNjSspkXXbU8VXa_!!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)
}]
``