From 73fe9304a2fba120127ba0994ab9d8178f2d2139 Mon Sep 17 00:00:00 2001 From: xpz2018 <107107461@qq.com> Date: Fri, 11 Jun 2021 15:32:26 +0800 Subject: [PATCH] no message --- components/table/index.js | 138 ++++++++++++++++++++++ components/table/index.json | 3 + components/table/index.wxml | 22 ++++ components/table/index.wxss | 68 +++++++++++ components/tabs/index.js | 2 +- pages/message/card-list/index.wxml | 2 +- xtends/statics/purchase-report/index.js | 48 +++++++- xtends/statics/purchase-report/index.json | 1 + xtends/statics/purchase-report/index.wxml | 2 +- 9 files changed, 282 insertions(+), 4 deletions(-) create mode 100644 components/table/index.js create mode 100644 components/table/index.json create mode 100644 components/table/index.wxml create mode 100644 components/table/index.wxss diff --git a/components/table/index.js b/components/table/index.js new file mode 100644 index 0000000..0d008d5 --- /dev/null +++ b/components/table/index.js @@ -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) + } + }, +}) \ No newline at end of file diff --git a/components/table/index.json b/components/table/index.json new file mode 100644 index 0000000..467ce29 --- /dev/null +++ b/components/table/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} diff --git a/components/table/index.wxml b/components/table/index.wxml new file mode 100644 index 0000000..c263b1b --- /dev/null +++ b/components/table/index.wxml @@ -0,0 +1,22 @@ + + + {{item.title}} + + + + + + {{item[thead['key']]}} + + + + + + {{msg}} + + + + \ No newline at end of file diff --git a/components/table/index.wxss b/components/table/index.wxss new file mode 100644 index 0000000..bbfd2c7 --- /dev/null +++ b/components/table/index.wxss @@ -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; +} \ No newline at end of file diff --git a/components/tabs/index.js b/components/tabs/index.js index 2786b3b..dbc1f43 100644 --- a/components/tabs/index.js +++ b/components/tabs/index.js @@ -61,7 +61,7 @@ VantComponent({ }, border: { type: Boolean, - value: true + value: false }, ellipsis: { type: Boolean, diff --git a/pages/message/card-list/index.wxml b/pages/message/card-list/index.wxml index de0a52c..171f2e5 100644 --- a/pages/message/card-list/index.wxml +++ b/pages/message/card-list/index.wxml @@ -9,7 +9,7 @@ - {{loading? '正在加载' : '暂无消息'}} + {{loading? '正在加载' : '暂无数据'}} diff --git a/xtends/statics/purchase-report/index.js b/xtends/statics/purchase-report/index.js index 23c16aa..fec9be7 100644 --- a/xtends/statics/purchase-report/index.js +++ b/xtends/statics/purchase-report/index.js @@ -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 }) } }) \ No newline at end of file diff --git a/xtends/statics/purchase-report/index.json b/xtends/statics/purchase-report/index.json index 19bbcd2..4f92c26 100644 --- a/xtends/statics/purchase-report/index.json +++ b/xtends/statics/purchase-report/index.json @@ -1,5 +1,6 @@ { "usingComponents": { + "van-table": "/components/table/index", "notification": "/pages/message/notification/index" } } \ No newline at end of file diff --git a/xtends/statics/purchase-report/index.wxml b/xtends/statics/purchase-report/index.wxml index 16082fe..37c15b2 100644 --- a/xtends/statics/purchase-report/index.wxml +++ b/xtends/statics/purchase-report/index.wxml @@ -3,6 +3,6 @@ 采购报表 - +