黔西南大屏

components/layout/AiDvTable/AiDvTable.vue

@@ -25,7 +25,13 @@
             flex: config[i].width ? 'inherit' : 1
           }">
           <i v-if="isShowIndex === '1' && i === 0">{{ index + 1 }}</i>
-          <span :title="column.v">{{ column.v }}</span>
+          <render-slot
+            v-if="config[i].render"
+            :render="config[i].render"
+            :row="item"
+            :column="column">
+          </render-slot>
+          <span v-else :title="column" @click="onClick(config[i], item)">{{ column }}</span>
         </div>
       </div>
     </div>
@@ -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 value.map(e => e[v])
-            return {
-              v: e[v]
-            }
-          })
         })
+      },
+
+      onClick (config, e) {
+        if (config.click && typeof config.click === 'function') {
+          return config.click.call(this, e)
+        }
       }
     }
   }

packages/bigscreen/dv/AppQxnEventDv.vue

@@ -325,16 +325,16 @@
           },
           {
             name: '联系TA',
-            v1: '12',
+            v1: '联系TA',
-            v2: '12',
+            v2: '联系TA',
-            v3: '123',
+            v3: '联系TA',
-            v4: '123',
+            v4: '联系TA',
-            v5: '123',
+            v5: '联系TA',
-            v6: '123',
+            v6: '联系TA',
-            v7: '2',
+            v7: '联系TA',
-            v8: '123',
+            v8: '联系TA',
-            v9: '123',
+            v9: '联系TA',
-            v10: '1234'
+            v10: '联系TA'
           }
         ],
         chartConfig1: {
@@ -618,77 +618,95 @@
         },
         eventTableData: [
           {
-            name: '姓名',
+            name: '时间',
-            v1: '宗梦瑞',
+            v1: '04/18',
-            v2: '宗梦瑞',
+            v2: '02/18',
-            v3: '宗梦瑞',
+            v3: '04/18',
-            v4: '宗梦瑞',
+            v4: '04/18',
-            v5: '宗梦瑞',
+            v5: '04/18',
-            v6: '宗梦瑞',
+            v6: '04/18',
-            v7: '宗梦瑞',
+            v7: '04/18',
-            v8: '宗梦瑞',
+            v8: '04/18',
-            v9: '宗梦瑞',
+            v9: '04/18',
-            v10: '宗梦瑞'
+            v10: '04/18'
           },
           {
-            name: '己办结',
+            name: '事件内容',
-            v1: '12',
+            v1: '咨询如何报考摩托车驾驶咨询如',
-            v2: '12',
+            v2: '咨询如何报考摩托车驾驶咨询如',
-            v3: '123',
+            v3: '咨询如何报考摩托车驾驶咨询如',
-            v4: '123',
+            v4: '咨询如何报考摩托车驾驶咨询如',
-            v5: '123',
+            v5: '咨询如何报考摩托车驾驶咨询如',
-            v6: '123',
+            v6: '咨询如何报考摩托车驾驶咨询如',
-            v7: '2',
+            v7: '咨询如何报考摩托车驾驶咨询如',
-            v8: '123',
+            v8: '咨询如何报考摩托车驾驶咨询如咨询如何报考摩托车驾驶咨询如',
-            v9: '123',
+            v9: '咨询如何报考摩托车驾驶咨询如',
-            v10: '1234'
+            v10: '咨询如何报考摩托车驾驶咨询如'
           },
           {
-            name: '办理中',
+            name: '状态',
-            v1: '12',
+            v1: '已办理',
-            v2: '12',
+            v2: '已办理',
-            v3: '123',
+            v3: '已办理',
-            v4: '123',
+            v4: '已办理',
-            v5: '123',
+            v5: '处理中',
-            v6: '123',
+            v6: '已拒绝',
-            v7: '2',
+            v7: '处理中',
-            v8: '123',
+            v8: '待处理',
-            v9: '123',
+            v9: '处理中',
-            v10: '1234'
+            v10: '处理中'
           },
           {
-            name: '上报数',
+            name: '查看',
-            v1: '12',
+            v1: '详情>>',
-            v2: '12',
+            v2: '详情>>',
-            v3: '123',
+            v3: '详情>>',
-            v4: '123',
+            v4: '详情>>',
-            v5: '123',
+            v5: '详情>>',
-            v6: '123',
+            v6: '详情>>',
-            v7: '2',
+            v7: '详情>>',
-            v8: '123',
+            v8: '详情>>',
-            v9: '123',
+            v9: '详情>>',
-            v10: '1234'
+            v10: '详情>>'
-          },
-          {
-            name: '联系TA',
-            v1: '12',
-            v2: '12',
-            v3: '123',
-            v4: '123',
-            v5: '123',
-            v6: '123',
-            v7: '2',
-            v8: '123',
-            v9: '123',
-            v10: '1234'
           }
-        ],
+        ]
       }
     },
 
     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)
+            }
           }
-        })
+        ]
       }
     },