From 4d7b5949c1c60ac19ed31c600a5452b04fba0dc5 Mon Sep 17 00:00:00 2001 From: yanran200730 Date: Tue, 25 Apr 2023 16:01:09 +0800 Subject: [PATCH] =?UTF-8?q?=E9=BB=94=E8=A5=BF=E5=8D=97=E5=A4=A7=E5=B1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/layout/AiDvTable/AiDvTable.vue | 42 ++++- packages/bigscreen/dv/AppQxnEventDv.vue | 202 ++++++++++++++-------- 2 files changed, 165 insertions(+), 79 deletions(-) diff --git a/components/layout/AiDvTable/AiDvTable.vue b/components/layout/AiDvTable/AiDvTable.vue index 2ae8775f..42d9853f 100644 --- a/components/layout/AiDvTable/AiDvTable.vue +++ b/components/layout/AiDvTable/AiDvTable.vue @@ -25,7 +25,13 @@ flex: config[i].width ? 'inherit' : 1 }"> {{ index + 1 }} - {{ column.v }} + + + {{ column }} @@ -36,6 +42,26 @@ export default { name: 'AiDvTable', + components: { + renderSlot: { + functional: true, + props: { + render: Function, + column: {type: [String, Number] }, + row: {type: [Array, Object] }, + }, + render: (h, data) => { + let params = { + row: data.props.row + } + if (data.props.column) { + params.column = data.props.column + } + return data.props.render(h, params) + } + } + }, + props: { data: { type: Array, @@ -68,7 +94,7 @@ }, size: { - type: 'String', + type: String, default: 'small' } }, @@ -114,12 +140,14 @@ }) this.body = bodyKey.map(v => { - return value.map(e => { - return { - v: e[v] - } - }) + return value.map(e => e[v]) }) + }, + + onClick (config, e) { + if (config.click && typeof config.click === 'function') { + return config.click.call(this, e) + } } } } diff --git a/packages/bigscreen/dv/AppQxnEventDv.vue b/packages/bigscreen/dv/AppQxnEventDv.vue index 32460487..94a9f6dd 100644 --- a/packages/bigscreen/dv/AppQxnEventDv.vue +++ b/packages/bigscreen/dv/AppQxnEventDv.vue @@ -325,16 +325,16 @@ }, { name: '联系TA', - v1: '12', - v2: '12', - v3: '123', - v4: '123', - v5: '123', - v6: '123', - v7: '2', - v8: '123', - v9: '123', - v10: '1234' + v1: '联系TA', + v2: '联系TA', + v3: '联系TA', + v4: '联系TA', + v5: '联系TA', + v6: '联系TA', + v7: '联系TA', + v8: '联系TA', + v9: '联系TA', + v10: '联系TA' } ], chartConfig1: { @@ -618,77 +618,95 @@ }, eventTableData: [ { - name: '姓名', - v1: '宗梦瑞', - v2: '宗梦瑞', - v3: '宗梦瑞', - v4: '宗梦瑞', - v5: '宗梦瑞', - v6: '宗梦瑞', - v7: '宗梦瑞', - v8: '宗梦瑞', - v9: '宗梦瑞', - v10: '宗梦瑞' + name: '时间', + v1: '04/18', + v2: '02/18', + v3: '04/18', + v4: '04/18', + v5: '04/18', + v6: '04/18', + v7: '04/18', + v8: '04/18', + v9: '04/18', + v10: '04/18' }, { - name: '己办结', - v1: '12', - v2: '12', - v3: '123', - v4: '123', - v5: '123', - v6: '123', - v7: '2', - v8: '123', - v9: '123', - v10: '1234' + name: '事件内容', + v1: '咨询如何报考摩托车驾驶咨询如', + v2: '咨询如何报考摩托车驾驶咨询如', + v3: '咨询如何报考摩托车驾驶咨询如', + v4: '咨询如何报考摩托车驾驶咨询如', + v5: '咨询如何报考摩托车驾驶咨询如', + v6: '咨询如何报考摩托车驾驶咨询如', + v7: '咨询如何报考摩托车驾驶咨询如', + v8: '咨询如何报考摩托车驾驶咨询如咨询如何报考摩托车驾驶咨询如', + v9: '咨询如何报考摩托车驾驶咨询如', + v10: '咨询如何报考摩托车驾驶咨询如' }, { - name: '办理中', - v1: '12', - v2: '12', - v3: '123', - v4: '123', - v5: '123', - v6: '123', - v7: '2', - v8: '123', - v9: '123', - v10: '1234' + name: '状态', + v1: '已办理', + v2: '已办理', + v3: '已办理', + v4: '已办理', + v5: '处理中', + v6: '已拒绝', + v7: '处理中', + v8: '待处理', + v9: '处理中', + v10: '处理中' }, { - name: '上报数', - v1: '12', - v2: '12', - v3: '123', - v4: '123', - v5: '123', - v6: '123', - v7: '2', - v8: '123', - v9: '123', - v10: '1234' - }, - { - name: '联系TA', - v1: '12', - v2: '12', - v3: '123', - v4: '123', - v5: '123', - v6: '123', - v7: '2', - v8: '123', - v9: '123', - v10: '1234' + name: '查看', + v1: '详情>>', + v2: '详情>>', + v3: '详情>>', + v4: '详情>>', + v5: '详情>>', + v6: '详情>>', + v7: '详情>>', + v8: '详情>>', + v9: '详情>>', + v10: '详情>>' } - ], + ] } }, computed: { tableConfig () { return this.tableData.map((v, index) => { + if (index === 4) { + return { + color: '#d0e1e8', + align: 'center', + width: '', + fontSize: '12px', + flex: '', + render: (h, params) => { + return h( + 'p', { + style: { + width: '52px', + height: '22px', + textAlign: 'center', + lineHeight: '22px', + color: '#D4F2FF', + cursor: 'pointer', + margin: '0 auto', + borderRadius: '4px', + backgroundImage: 'linear-gradient(175deg, #02bcee99 0%, #0144d899 100%)' + }, + on: { + click: e => { + console.log(params) + } + }, + }, params.column + ) + } + } + } return { color: '#d0e1e8', align: '', @@ -700,15 +718,55 @@ }, eventTableConfig () { - return this.eventTableData.map((v, index) => { - return { + return [ + { color: '#d0e1e8', align: '', - width: index === 0 ? '100' : '', + width: '', fontSize: '14px', flex: '' + }, + { + color: '#d0e1e8', + align: 'left', + width: '250', + fontSize: '14px', + flex: '' + }, + { + color: '#d0e1e8', + align: 'center', + width: '', + fontSize: '14px', + flex: '', + render: (h, params) => { + return h( + 'i', { + style: { + width: '52px', + height: '20px', + textAlgin: 'center', + lineHeight: '20px', + color: '#07B794', + margin: '0 auto', + borderRadius: '2px', + background: 'rgba(19, 246, 201, 0.14)', + } + }, params.column + ) + } + }, + { + color: '#00AAFF', + align: '', + width: '', + fontSize: '14px', + flex: '', + click: e => { + console.log(e) + } } - }) + ] } },