新增数据视图面板自定义插件

src/components/app-data-card/app-data-card.less

+.app-data-card{
+    padding: 10px;
+    .data-item{
+        display: flex;
+        margin-bottom: 16px;
+        .item-text{
+            .srfmajortext{
+                font-size: 18px;
+                font-weight: bold;
+            }
+            .srfdescription{
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 1;
+                overflow: hidden;
+            }
+        }
+        .item-icon{
+            width: 50px;
+            height: 50px;
+            margin-right: 10px;
+            .single-card-img{
+                border-radius: 50%;
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+    .data-view-item-action{
+        width: 100%;
+        display: flex;
+        justify-content: space-around;
+        border-top: 1px solid #e2e2e2;
+        padding-top: 10px;
+        button{
+            width: 50%;
+            font-size: 15px;
+            border: none;
+            background-color: transparent;
+            border: none;
+        }
+    }
+    
+}
\ No newline at end of file

src/components/app-data-card/app-data-card.vue

+<template>
+    <div class="app-data-card">
+        <div class="data-item">
+            <div class="item-icon">
+                <img v-if="inputData.srficonpath" :src="inputData.srficonpath" class="single-card-img" />
+            <img v-else src="/assets/img/noimage.png" class="single-card-img" />
+            </div>   
+            <div class="item-text">
+                <div class="srfmajortext">{{inputData.srfmajortext}}</div>
+                <div class="srfdescription">{{inputData.srfdescription}}</div>
+            </div>
+        </div>      
+        <div class="data-view-item-action">
+            <template v-for="(action,index) in Object.keys(actionModel)">
+                <button type="info" :key="index" @click="uiAction(inputData, action, $event)">
+                    <i :class="actionModel[action].icon" style="margin-right:2px;"></i>
+                    <span>{{actionModel[action].caption}}</span>
+                </button>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator';
+import { Subject,Subscription } from 'rxjs';
+@Component({
+})
+export default class AppDataCard extends Vue {
+    /**
+     * 面板数据对象
+     *
+     * @type {*}
+     * @memberof AppDataCard
+     */
+    @Prop() public inputData?: any;
+
+     /**
+     * 操作栏模型
+     * 
+     * @type {*}
+     * @memberof AppDataCard
+     */
+    @Prop() public actionModel:any;
+
+    /**
+     * 操作列界面行为
+     *
+     * @param {*} data
+     * @param {*} tag
+     * @param {*} $event
+     * @memberof AppDataCard
+     */
+	public uiAction(data: any, tag: any, $event: any) {
+        this.$emit('uiAction',data, tag, $event)
+    }
+}
+</script>
+<style lang="less">
+    @import './app-data-card.less';
+</style>
\ No newline at end of file