日历样式

src/views/wms/basicDataManage/supplierManage/receivedCalendar/index.vue

@@ -16,26 +16,32 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <!-- <Table
-      :columns="tableColumns"
-      :data="tableObject.tableList"
-      :loading="tableObject.loading"
-      :pagination="{
-        total: tableObject.total
-      }"
-      v-model:pageSize="tableObject.pageSize"
-      v-model:currentPage="tableObject.currentPage"
-      v-model:sort="tableObject.sort"
-    >
-      <template #code="{row}">
-        <el-button type="primary" link @click="openDetail(row, '代码', row.code)">
-          <span>{{ row.code }}</span>
-        </el-button>
+    <el-calendar>
+      <template #date-cell="{ data }">
+        <!-- <p :class="data.isSelected ? 'is-selected' : ''" >
+          {{ Number(data.day.split('-').slice(2).join('-')) }}
+          {{ data.isSelected ? '✔️' : '' }}
+        </p> -->
+        <!-- {{data}} -->
+        <div v-if="data.type == 'current-month'">
+          <div :class="data.isSelected ? 'is-selected' : ''" style="color:#aaa">
+            {{ Number(data.day.split('-').slice(2).join('-')) }}
+          </div>
+          <div class="sun">
+            <el-image style="width: 1.1vw; height: 1.1vw" src="/src/assets/svgs/sun.svg" />
+            <div class="text">白班</div>
+              <Icon class="mr-5px" icon="ep:delete" color="#409eff" size="14px" @click=""/>
+          </div>
+          <div class="sun">
+            <el-image style="width: 1.1vw; height: 1.1vw" src="/src/assets/svgs/moon.svg" />
+            <div class="text">夜班</div>
+              <Icon class="mr-5px" icon="ep:delete" color="#409eff" size="14px" />
+          </div>
+        </div>
+        <div v-if="data.type == 'prev-month'"></div>
+        <div v-if="data.type == 'next-month'"></div>
       </template>
-      <template #action="{ row }">
-        <ButtonBase :Butttondata="butttondata" @button-base-click="buttonTableClick($event,row)" />
-      </template>
-    </Table> -->
+    </el-calendar>
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
@@ -243,3 +249,16 @@ onMounted(async () => {
 })
 
 </script>
+<style lang="scss" scoped>
+.sun{
+  display: flex;
+  align-items: center;
+  margin-top:4px;
+  .text{
+    flex:1;
+    font-size: 13px;
+    color: #797979;
+    margin-left: 6px;
+  }
+}
+</style>