我的排班展示信息调整，班次组件打包警告、控制台报错问题处理

src/views/system/dashboard/components/util.js

@@ -873,7 +873,7 @@ export function buildComponent (name, column, preview, vm) {
                               <div class="event-header">
                                     <div>
                                         <div style="background:${event.extendedProps.bcolor};height:10px;width:10px;display:inline-block;">  </div>
-                                        ${titleStr} ${timeStr}
+                                        ${titleStr}
                                     </div>
                                     <div class="button-placeholder">
                                         ${ event.extendedProps.jieShuShiJian <= this.$common.getDateNow() ?

src/views/system/homepage/components/banciDialog.vue

@@ -30,7 +30,7 @@
                 </div>
                 <div>
                     <strong class="label">对应颜色：</strong>
-                    <div :style="{ background: banci.bcolor, height: '20px', width: '50px', display: 'inline-block' }"></div>
+                    <div :style="{ background: banci.bcolor, height: '20px', width: '50px', display: 'inline-block' }" />
                 </div>
                 <div>
                     <strong class="label">时间段：</strong>
@@ -42,7 +42,7 @@
                 <div class="position-row">
                     <strong class="label">岗位：</strong>
                     <ul class="position-list">
-                        <li class="el-tag el-tag--primary el-tag--small el-tag--light positionItem" v-for="(position, index) in banci.positions" :key="index">{{ position }}</li>
+                        <li v-for="(position, index) in banci.positions" :key="index" class="el-tag el-tag--primary el-tag--small el-tag--light positionItem">{{ position }}</li>
                     </ul>
                 </div>
                 <div>
@@ -52,10 +52,10 @@
                     <strong class="label">出勤情况：</strong>
                     <div class="dakaBox">
                         <div>
-                            <span>上班:</span> <span v-html="getAttendanceInfo(banci.attendance.da_ka_shi_jian_1_, banci.attendance.zhuang_tai_1_, banci.attendance.chi_dao_shi_chang)"></span>
+                            <span>上班:</span> <span v-html="getAttendanceInfo(banci.attendance, 1)" />
                             <button v-if="banci && banci.attendance && banci.attendance.zhuang_tai_1_!= '正常'" class="clock-btn"> 补卡 </button>
                         </div>
-                        <div><span>下班:</span> <span v-html="getAttendanceInfo(banci.attendance.da_ka_shi_jian_2_, banci.attendance.zhuang_tai_2_, 0)"></span> 
+                        <div><span>下班:</span> <span v-html="getAttendanceInfo(banci.attendance, 2)" />
                             <button v-if="banci && banci.attendance && banci.attendance.zhuang_tai_2_!= '正常'" class="clock-btn"> 补卡 </button>
                         </div>
                     </div>
@@ -69,12 +69,6 @@
 </template>
 <script>
 export default {
-    data () {
-        return {
-            dialogVisible: this.visible,
-            banci: this.banciInfo
-        }
-    },
     props: {
         visible: {
             type: Boolean,
@@ -86,6 +80,12 @@ export default {
             default: () => ({})
         }
     },
+    data () {
+        return {
+            dialogVisible: this.visible,
+            banci: this.banciInfo
+        }
+    },
     watch: {
         banciInfo (newVal) {
             // 当外部传入的班次对象变化时，更新内部展示的数据
@@ -102,15 +102,16 @@ export default {
         openDialog () {
             this.dialogVisible = true
         },
-        getAttendanceInfo (shijian, zhuangTai, chiDaoShiChang) {
-            if (shijian) {
-                if (zhuangTai === '正常') {
-                    return shijian + ' 正常'
-                } else {
-                    return `${shijian} <span style="color: red;">${zhuangTai}${chiDaoShiChang}分钟</span>`
-                }
+        getAttendanceInfo (data = {}, type = 1) {
+            const time = ['', 'da_ka_shi_jian_1_', 'da_ka_shi_jian_2_']
+            const status = ['', 'zhuang_tai_1_', 'zhuang_tai_2_']
+            const duration = ['', 'chi_dao_shi_chang', 0]
+
+            if (!data?.[time[type]]) {
+                return '未打卡'
             }
-            return '未打卡'
+
+            return data[status[type]] === '正常' ? `${data[time[type]]} 正常` : `${data[time[type]]} <span style="color: red;">${data[status[type]]}${data[duration[type]]}分钟</span>`
         },
         closeDialog () {
             this.$emit('closeBanciDialog', 'banci')
@@ -119,20 +120,20 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
- .containerDiv {
-      padding: 20px;
-      div {
-          margin-bottom: 5px;
-          display: flex;
-          align-items: center;
-          min-height: 30px;
-      }
-      .dakaBox{
+.containerDiv {
+    padding: 20px;
+    div {
+        margin-bottom: 5px;
+        display: flex;
+        align-items: center;
+        min-height: 30px;
+    }
+    .dakaBox{
         display: flex;
         flex-direction: column;
-        justify-content: start;
-        align-items: start;
-            .clock-btn {
+        justify-content: flex-start;
+        align-items: flex-start;
+        .clock-btn {
             border: none;
             color: white;
             background-color: #409EFF;
@@ -144,27 +145,26 @@ export default {
             &:hover {
                 opacity: 0.8;
             }
+        }
+    }
+    .label {
+        min-width: 80px;
+        margin-right: 10px;
+    }
+    .position-row {
+        display: flex;
+        align-items: center;
+        .position-list {
+            display: flex;
+            flex-wrap: wrap;
+            list-style: none;
+            padding-left: 0;
+            li {
+                margin-right: 10px;
+                margin-top: 10px;
             }
-
+        }
     }
-     .label {
-          min-width: 80px;
-          margin-right: 10px;
-      }
-     .position-row {
-          display: flex;
-          align-items: center;
-         .position-list {
-              display: flex;
-              flex-wrap: wrap;
-              list-style: none;
-              padding-left: 0;
-              li {
-                  margin-right: 10px;
-                  margin-top: 10px;
-              }
-          }
-      }
-  }
+}
 
 </style>