补充自定义插件

app_Web/src/components/app-calendar-itemlayoutpanel/app-calendar-itemlayoutpanel.less

+.app-calendar-itemlayoutpanel{
+    display: flex;
+    .item-icon{
+        width: 40px;
+        height: 40px;
+        margin-right: 10px;
+        img{
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+        }
+    }
+    .item-text{
+        .title{
+            font-size: 18px;
+            font-weight: bold;
+        }
+        .srfdescription{
+            margin-top: 14px;
+            margin-bottom: 14px;
+        }
+        .date{
+            .start{
+                margin:0 6px;
+            }
+            .end{
+                margin:0 6px; 
+            }
+        }
+    }
+}

app_Web/src/components/app-calendar-itemlayoutpanel/app-calendar-itemlayoutpanel.vue

+<template>
+    <div class="app-calendar-itemlayoutpanel">
+        <div class="item-icon">            
+        </div>   
+        <div class="item-text">
+            <div class="title">{{inputData.title}}</div>
+            <div class="srfdescription">{{inputData.srfdescription}}</div>
+            <div class="date">
+                {{ $t('components.AppCalendarItemlayoutpanel.from') }}
+                <span class="start">{{inputData.start}}</span>
+                {{$t('components.AppCalendarItemlayoutpanel.to')}}
+                <span class="end">{{inputData.end}}</span>
+            </div>
+        </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 AppCalendarItemlayoutpanel extends Vue {
+
+    /**
+     * 面板数据对象
+     *
+     * @type {*}
+     * @memberof AppCalendarItemlayoutpanel
+     */
+    @Prop() public inputData?: any;
+}
+</script>
+
+<style lang="less">
+@import './app-calendar-itemlayoutpanel.less';
+</style>
\ No newline at end of file

app_Web/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

app_Web/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

app_Web/src/components/app-list-itemlayoutpanel/app-list-itemlayoutpanel.less

+.app-list-itemlayoutpanel{
+    padding: 0 0 0 20px;
+    // margin: 10px;
+    .srfmajortext{
+        font-size: 16px;
+        cursor: pointer;
+    }
+    .srfdescription{
+        margin-bottom: 10px;
+    }
+    .el-tag{
+        margin: 10px 6px 10px 0;
+        color: #000;
+        padding: 0 16px;
+        max-height: 24px;
+        line-height: 24px;
+        background-color: rgb(250, 250, 250)
+    }
+    .srfmajortext:hover{
+        color: #40a9ff;
+    }
+    .user-information{
+        display: flex;
+        .srficon{
+            width: 28px;
+            height: 28px;
+            margin-right: 6px;
+            >img{
+                width: 100%;
+                border-radius: 50%;
+                height: 100%;
+            }
+        }
+    }
+    .app-list-item-action{
+        margin-top:6px;
+        >a{
+            margin:0 20px 0 0 !important;
+        }
+    }
+}

app_Web/src/components/app-list-itemlayoutpanel/app-list-itemlayoutpanel.vue

+<template>
+    <div v-if="inputData" class="app-list-itemlayoutpanel">
+        <h4 class="srfmajortext">{{inputData.srfmajortext}}</h4>
+        <template v-for="(tagitem,index) of tagArr">
+            <el-tag v-if="tagArr" type="info" size="medium" :key="index">{{tagitem}}</el-tag>
+        </template>
+        <p class="srfdescription">{{inputData.srfdescription}}</p>
+        <div class="user-information">
+            <div class="srficon">
+                <img v-if="inputData.srficon" :src="inputData.srficon" />
+                <img v-else src="/assets/img/noimage.png" alt="">
+            </div>
+            <span class="srfdate">{{inputData.srfdate}}</span>
+        </div>
+        <div class="app-list-item-action">
+            <template v-for="(action,index) in Object.keys(actionModel)">
+                <a :key="index" style="display: inline-block;margin: 0 12px;" @click="uiAction(inputData, action, $event)">
+                    <i :class="actionModel[action].icon" style="margin-right:2px;"></i>
+                    <span>{{actionModel[action].caption}}</span>
+                </a>
+            </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 AppListItemlayoutpanel extends Vue { 
+
+    /**
+     * 传递数据
+     * 
+     * @type {any}
+     * @memberof AppListItemlayoutpanel
+     */
+    @Prop() public inputData: any;
+
+    /**
+     * 操作栏模型
+     * 
+     * @type {*}
+     * @memberof AppListItemlayoutpanel
+     */
+    @Prop() public actionModel:any;
+
+    /**
+     * 处理数据
+     * 
+     * @memberof AppListItemlayoutpanel
+     */
+    public tagArr:Array<any>=[];
+
+    /**
+     * 操作列界面行为
+     *
+     * @param {*} data
+     * @param {*} tag
+     * @param {*} $event
+     * @memberof AppListItemlayoutpanel
+     */
+	public uiAction(data: any, tag: any, $event: any) {
+        this.$emit('uiAction',data, tag, $event)
+    }
+
+    /**
+     * vue生命周期
+     * 
+     * @memberof AppListItemlayoutpanel
+     */
+    public created(){
+        if(this.inputData && this.inputData.srftag){
+            this.tagArr = this.inputData.srftag.split(',');
+        }
+    }
+}
+</script>
+
+<style lang='less'>
+@import './app-list-itemlayoutpanel.less';
+</style>
\ No newline at end of file

app_Web/src/locale/lanres/components/components_en_US.ts

@@ -389,5 +389,9 @@ export default {
       dayAgo: 'days ago',
       monthsAgo: 'months ago',
       yearsAgo: 'years ago'
-  }
+    },
+    AppCalendarItemlayoutpanel:{
+      from:'from',
+      to:'to'
+    }
 };
\ No newline at end of file

app_Web/src/locale/lanres/components/components_zh_CN.ts

@@ -390,5 +390,9 @@ export default {
       dayAgo: '天前',
       monthsAgo: '月前',
       yearsAgo: '年前'
+  },
+  AppCalendarItemlayoutpanel:{
+    from:'从',
+    to:'至'
   }
 };
\ No newline at end of file

app_Web/src/user-register.ts

+import AppListItemlayoutpanel from  './components/app-list-itemlayoutpanel/app-list-itemlayoutpanel.vue';
+import AppDataCard from  './components/app-data-card/app-data-card.vue';
+import AppCalendarItemlayoutpanel from  './components/app-calendar-itemlayoutpanel/app-calendar-itemlayoutpanel.vue';
 export const UserComponent = {
-    install(v: any, opt: any) {
 
+    install(v: any, opt: any) {
+        v.component('app-list-itemlayoutpanel', AppListItemlayoutpanel);
+        v.component('app-data-card', AppDataCard);
+        v.component('app-calendar-itemlayoutpanel', AppCalendarItemlayoutpanel);
     }
 };
\ No newline at end of file