开发个人业绩组件

code/web/task_schedule/src/components/CallerArchievementComponent.vue

@@ -11,10 +11,10 @@
     <div class="caller-archievment-wrapper">
         <table>
             <tr>
-                <td>坐席名称</td><td>{{ ui.callerName }}</td>
+                <td>坐席名称</td><td>{{ CallerName }}</td>
             </tr>
             <tr>
-                <td>车险保费</td><td>{{ ui.thisMonthPremium }}</td>
+                <td>车险保费</td><td>{{ PresentMonthPremium }}&nbsp;万元</td>
             </tr>
             <tr>
                 <td>车非渗透率</td><td>{{ ui.attachingRate }}</td>
@@ -26,7 +26,8 @@
     </div>
 </template>
 <script lang="ts">
-interface  CallerArchievementComponentUI
+import { computed } from "vue";
+interface CallerArchievementComponentUI
 {
     callerName: string,
     thisMonthPremium: number,
@@ -36,25 +37,43 @@ interface  CallerArchievementComponentUI
 
 export default {
     name: "CallerArchievementComponent",
-    props:{
+    props: {
+        callerName: {
+            type: String,
+            require: true,
+            default: (): string => "",
+        },
         thisMonthPremium: {
             type: Number,
             require: true,
-            default:()=>0,
+            default: (): number => 0,
         },
     },
-    setup()
+    setup( props )
     {
-        const ui:CallerArchievementComponentUI = {
+        const ui: CallerArchievementComponentUI = {
             callerName: "",
             thisMonthPremium: 0,
             attachingRate: "0.0",
             renewalRate: "0.0",
         };
 
-        return {ui,};
+        const PresentMonthPremium = computed((): string =>
+        {
+            return ( props.thisMonthPremium / 10000 ).toFixed( 2 );
+        });
+
+        const CallerName = computed((): string =>
+        {
+            return props.callerName;
+        });
+        return {
+            CallerName,
+            PresentMonthPremium,
+            ui,
+        };
     },
 };
 </script>
 <style scoped lang="scss">
-</style>
+</style>