libo
/
ztb-saas-mini
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

no message

feature/v2.1
xpz2018 4 years ago
parent
bf71677b82
commit
73fe9304a2
9 changed files with 282 additions and 4 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 138
      components/table/index.js
  2. 3
      components/table/index.json
  3. 22
      components/table/index.wxml
  4. 68
      components/table/index.wxss
  5. 2
      components/tabs/index.js
  6. 2
      pages/message/card-list/index.wxml
  7. 48
      xtends/statics/purchase-report/index.js
  8. 1
      xtends/statics/purchase-report/index.json
  9. 2
      xtends/statics/purchase-report/index.wxml

138
components/table/index.js
View File

@ -0,0 +1,138 @@
/** slot action 固定按钮操作
* btnName 按钮名
* valueCallback 按钮返回值
按钮绑定事件 btnClick
tr绑定事件 onRowClick
valueCallback tr返回值
columns 数组 {
key: '',
title: '',
width: 200,
fixed: 'left', //设置fixed 必须设置width
align: 'center',
// 按钮默认 slot action
slot: 'action'
valueCallback: '',
btnName: ''
}
**/
Component({
options: {
multipleSlots: true,
},
// 自定义外部样式class th头部样式 tr样式 td样式
externalClasses: ['thead-row-class', 'tbody-tow-class', 'td-class'],
properties: {
// td 数组
data: {
type: Array,
value: []
},
// thead 数组
columns: {
type: Array,
value: []
},
// table 高度
height: {
type: String,
value: 'auto'
},
// table 宽度
width: {
type: Number || String,
value: 750
},
// 单元格的宽度
tdWidth: {
type: Number,
value: 35
},
// 固定表头 thead达到Header的位置时就应该被fixed了
offsetTop: {
type: Number,
value: 150
},
// 是否带有纵向边框
isBorder: {
type: Boolean,
value: true
},
// 是否带有斑马条纹
isStripe: {
type: Boolean,
value: true
},
// tr 返回值Key
valueCallback: {
type: String,
value: ''
},
// 无数据时信息
msg: {
type: String,
value: '暂无数据~'
},
// thead 固定
isFixed: {
type: Boolean,
value: true
},
},
data: {
scrolWidth: '100%',
marginTopValue: 0,
leftWidth: 0,
leftIndex: 0,
rightWidth: 0,
rightIndex: 0,
},
// 生命周期
lifetimes: {
// 组件实例进入页面节点树时调用
attached() {
const scrolWidth = this.properties.columns.reduce((total, item) => total + item.width, 0)
this.createSelectorQuery().selectAll(".thead .td").boundingClientRect((res) => {
if (!isNaN(scrolWidth)) {
this.properties.columns.map(item => {
item.width = item.width / scrolWidth * this.properties.width
})
} else {
this.properties.columns.map((item, index) => {
item.width = res[index].width
})
}
}).exec(res => {
let list = [], listLeft = [], listRight = [], leftWidth = 0, rightWidth = 0;
list = this.properties.columns.filter(item => !item.fixed)
listLeft = this.properties.columns.filter(item => item.fixed == 'left')
listLeft.map(item => {
leftWidth += item.width
})
listRight = this.properties.columns.filter(item => item.fixed == 'right')
listRight.map(item => {
rightWidth += item.width
})
this.setData({
columns: [...listLeft, ...list, ...listRight],
marginTopValue: res[0][0].height,
leftWidth: leftWidth,
rightWidth: rightWidth,
leftIndex: listLeft.length ? listLeft.length : 0,
rightIndex: listRight.length ? this.properties.columns.length - listRight.length - 1 : 0
})
})
},
},
methods: {
onRowClick(e) {
this.triggerEvent('rowClick', e.target.dataset)
},
onBtnClick(e) {
this.triggerEvent('btnClick', e.target.dataset)
}
},
})

3
components/table/index.json
View File

@ -0,0 +1,3 @@
{
"component": true
}

22
components/table/index.wxml
View File

@ -0,0 +1,22 @@
<scroll-view scroll-x="true" enable-flex="true" class="table" style="width: 100%;">
<view class="thead {{isBorder ? 'thead-border' : ''}} thead-row-class" style="width: {{width}}rpx; position: {{isFixed ? 'fixed' : 'static'}}">
<view class="td" wx:for="{{columns}}" wx:key="index" style="width: {{item['width'] ? item['width'] : 200}}px; text-align: {{item.align ? item.align : 'center'}};">{{item.title}}</view>
</view>
<scroll-view scroll-y="true" class="tbody" style="width: {{width}}rpx; height: {{height ? height + 'rpx': 'auto'}};padding-top: {{marginTopValue}}px">
<block wx:for="{{data}}" wx:key="index" wx:if="{{data.length > 0}}">
<view class="tbody-tr {{ isStripe ? 'tbody-tr-stripe' : '' }} {{ isBorder ? 'tbody-tr-border' : ''}} tbody-tow-class">
<view wx:for-item="thead" wx:for-index="theadIndex" wx:key="theadIndex" wx:for="{{columns}}" class="td td-class"
style="width: {{columns[theadIndex].width}}px; text-align:{{columns[theadIndex].align ? columns[theadIndex].align : 'center'}}"
data-value="{{valueCallback ? item[valueCallback]: item}}" bindtap="onRowClick">
{{item[thead['key']]}}
<button wx:if="{{thead.slot}}" class='btn' plain="true" size='mini' data-value="{{item.valueCallback ? item[valueCallback]: item}}"
bindtap="onBtnClick">{{thead.btnName}}</button>
</view>
</view>
</block>
<block wx:if="{{data.length == 0}}">
<view class="no-data"> {{msg}} </view>
</block>
</scroll-view>
</scroll-view>
<slot></slot>

68
components/table/index.wxss
View File

@ -0,0 +1,68 @@
.table {
font-size: 28rpx;
background: #fff;
border-right:none;
overflow: hidden;
}
.thead{
display: flex;
border: 1px solid #ebeef5;
box-sizing: border-box;
z-index: 9;
}
.thead .td {
padding: 20rpx 10rpx;
font-weight: bold;
display: inline-block;
border-right: 1rpx solid #fff;
background: #fff;
}
.thead-border .td, .tbody-tr-border .td {
border-right: 1rpx solid #ebeef5;
}
.thead .td:last-child, .tbody-tr-border .td:last-child{
border-right: none;
}
.tbody {
box-sizing: border-box;
font-size: 28rpx;
color: #666;
border: 1px solid #ebeef5;
border-top: none;
}
.tbody-tr {
border-bottom: 1px solid #ebeef5;
display: flex;
}
.tbody-tr .td {
padding: 20rpx 10rpx;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
}
.tbody-tr-stripe {
background: #fff;
border-bottom: none;
}
.tbody-tr-stripe:nth-child(2n) .td{
background: #F6F6F6;
}
/* .tbody-tr .td text {
line-height: 0;
} */
.tbody-tr .td .btn {
font-size: 28rpx;
padding:0 5rpx;
color: #666;
width: 30px;
}
.td {
overflow: hidden;
word-break: break-all;
}
.no-data {
text-align: center;
padding: 40rpx;
color: #666;
}

2
components/tabs/index.js
View File

@ -61,7 +61,7 @@ VantComponent({
},
border: {
type: Boolean,
value: true
value: false
},
ellipsis: {
type: Boolean,

2
pages/message/card-list/index.wxml
View File

@ -9,7 +9,7 @@
<van-loading type="spinner" size="32" />
</view>
<image class="img-empty" src="/assets/image/list_empty.png" wx:else></image>
<view class="text-empty">{{loading? '正在加载' : '暂无消息'}}</view>
<view class="text-empty">{{loading? '正在加载' : '暂无数据'}}</view>
</view>
<view wx:for-item="pageItem" wx:for-index="pageIndex" wx:for="{{orderList}}" wx:key="pageIndex">
<van-swipe-cell wx:for="{{pageItem}}" wx:key="index" right-width="{{ 65 }}">

48
xtends/statics/purchase-report/index.js
View File

@ -1,15 +1,61 @@
import Scene from '../../../pages/index/scene'
const app = getApp()
Scene({
/**
* 页面的初始数据
*/
data: {
height: app.globalData.fragmentHeight,
columns: [
{ key: 'catname', title: '品类', width: 100, fixed: 'left', align: 'center' },
{ key: 'product_title', width: 80, fixed: 'left', title: '重量(公斤)' },
{ key: 'product_bar_code', title: '金额(元)', width: 80, },
{ key: 'quantity', width: 100, title: '均价(元/公斤)' }
],
data: [
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '187500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '87500.00', quantity: '2.500'},
{catname: '黄纸皮A级', product_bar_code: '35000.00', product_title: '187500.00', quantity: '2.500'},
],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({ height: app.globalData.fragmentHeight })
}
})

1
xtends/statics/purchase-report/index.json
View File

@ -1,5 +1,6 @@
{
"usingComponents": {
"van-table": "/components/table/index",
"notification": "/pages/message/notification/index"
}
}

2
xtends/statics/purchase-report/index.wxml
View File

@ -3,6 +3,6 @@
<view slot="content">采购报表</view>
</cu-custom>
<van-table columns="{{columns}}" height="{{height}}" data="{{data}}"></van-table>
<notification id="qn-notification"/>
Write Preview
Loading…
Cancel
Save