日报周报基本页面搭建

client/package.json

@@ -6,7 +6,7 @@
   "private": false,
   "scripts": {
     "i": "pnpm install",
-    "dev": "vite --mode base",
+    "dev": "vite --mode dev",
     "front": "vite --mode front",
     "ts:check": "vue-tsc --noEmit",
     "build:pro": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode pro",
@@ -54,6 +54,7 @@
     "lodash-es": "^4.17.21",
     "min-dash": "^4.1.1",
     "mitt": "^3.0.1",
+    "moment": "^2.29.4",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.6",
     "qrcode": "^1.5.3",
@@ -68,8 +69,7 @@
     "vue-types": "^5.1.1",
     "vuedraggable": "^4.1.0",
     "web-storage-cache": "^1.1.1",
-    "xml-js": "^1.6.11",
-    "moment": "^2.29.4"
+    "xml-js": "^1.6.11"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",
@@ -85,8 +85,8 @@
     "@types/qs": "^6.9.8",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
-    "@unocss/transformer-variant-group": "^0.56.1",
     "@unocss/eslint-config": "^0.56.1",
+    "@unocss/transformer-variant-group": "^0.56.1",
     "@vitejs/plugin-legacy": "^4.1.1",
     "@vitejs/plugin-vue": "^4.3.4",
     "@vitejs/plugin-vue-jsx": "^3.0.2",

client/src/views/OaSystem/components/OaCalendar/index.vue

@@ -46,7 +46,6 @@ const initDates = async () => {
       week: moment(currentM + '-' + days).day()
     })
   }
-  console.log(dateList)
 
   daysList.value = dateList
 }

client/src/views/OaSystem/reportCenter/components/OaCalendar.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="OaCalendar">
+    <div class="selectBox">
+      <el-icon class="icon1" @click="lastClick"><ArrowLeftBold /></el-icon>
+      <p>{{ moment(nowTime).format('YYYY年MM月') }}</p>
+      <el-icon class="icon1" @click="nextClick"><ArrowRightBold /></el-icon>
+    </div>
+    <div class="contentBox">
+      <div class="ulBox">
+        <ul>
+          <li
+            v-for="(item, index) in daysList"
+            :key="index"
+            :style="{ width: `calc(100% / ${daysList.length})` }"
+          >
+            <div class="topBox" :class="item.week == 0 || item.week == 6 ? 'topBoxPa' : 'topBox'">
+              <p>{{ item.d }}</p>
+            </div>
+            <div class="bomBox">
+              <img v-if="_iconList[item['state']]" :src="_iconList[item['state']]" />
+              <span v-else class="stop"></span>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="infoBox">
+        <span>已填写（天）</span>
+        <p>15</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import moment from 'moment'
+import { getAssetURL } from '@/utils/auth'
+
+const daysList: any = ref([])
+const nowTime: any = ref(moment().format('YYYY-MM'))
+
+const _iconList: Object = {
+  '1': getAssetURL('kq/1'),
+  '2': getAssetURL('kq/2'),
+  '3': getAssetURL('kq/3'),
+  '4': null
+}
+const initDates = async () => {
+  let curDays: any = moment(nowTime.value).daysInMonth() // 当前天数
+  let currentM: any = nowTime.value // 当前月
+  let dateList: any = []
+
+  for (let i = 0; i < curDays; i++) {
+    let days = i + 1
+    const dmStr: string = `${currentM}-${days}`
+    dateList.push({
+      d: days,
+      m: currentM,
+      dm: dmStr,
+      state: '1', //1 已填写 2 未填写 3 请假 4 节假日
+      week: moment(currentM + '-' + days).day()
+    })
+  }
+  daysList.value = dateList
+}
+
+const lastClick = () => {
+  let time: any = moment(nowTime.value).subtract(1, 'months').format('YYYY-MM')
+  nowTime.value = moment(time).format('YYYY-MM')
+  initDates()
+}
+const nextClick = () => {
+  let time: any = moment(nowTime.value).add(1, 'months').format('YYYY-MM')
+  nowTime.value = moment(time).format('YYYY-MM')
+  initDates()
+}
+onMounted(() => {
+  initDates()
+})
+</script>
+<style lang="scss" scoped>
+.OaCalendar {
+  width: 100%;
+  .selectBox {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    .icon1 {
+      cursor: pointer;
+    }
+    p {
+      font-weight: 600;
+      color: #2d333c;
+      margin: 0 10px;
+      user-select: none;
+      cursor: pointer;
+    }
+  }
+  .contentBox {
+    width: 100%;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 1px solid #dee0e3;
+
+    .ulBox {
+      width: calc(100% - 120px);
+      height: 100%;
+      ul {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      li {
+        height: 100%;
+        .topBox {
+          width: 100%;
+          height: 50%;
+          border: 1px solid #dee0e3;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-right: 0;
+          border-top: 0;
+          background-color: #f7f8fa;
+          cursor: pointer;
+          p {
+            color: #121518;
+            user-select: none;
+          }
+        }
+        .topBoxPa {
+          p {
+            color: #b9c3c9;
+          }
+        }
+        .topBox:hover {
+          p {
+            color: #1b80eb;
+          }
+        }
+
+        .bomBox {
+          width: 100%;
+          height: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          img {
+            user-select: none;
+          }
+        }
+      }
+      li:first-child {
+        .topBox {
+          border-left: 0;
+        }
+      }
+      li:last-child {
+        .topBox {
+          border-right: 0;
+        }
+      }
+    }
+    .infoBox {
+      width: 120px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      background-color: #edf0f4;
+      border-left: 1px solid #dee0e3;
+      span {
+        display: block;
+        width: 100%;
+        text-align: center;
+        font-size: 14px;
+      }
+      p {
+        width: 100%;
+        text-align: center;
+        font-size: 18px;
+      }
+    }
+  }
+}
+</style>

client/src/views/OaSystem/reportCenter/components/WeekCalendar.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="weeklyCenterBox">
+    <div class="selectBox">
+      <el-icon class="icon1" @click="lastClick"><ArrowLeftBold /></el-icon>
+      <p>{{ moment(nowTime).format('YYYY年MM月') }}</p>
+      <el-icon class="icon1" @click="nextClick"><ArrowRightBold /></el-icon>
+    </div>
+    <div class="contentBox">
+      <div class="ulBox"> </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import moment from 'moment'
+
+defineOptions({
+  name: 'WeekCalendar'
+})
+const daysList: any = ref([])
+const nowTime = ref<string>(moment().format('YYYY-MM'))
+
+interface IDay {
+  d: string
+  m: number
+  w: number
+}
+
+const dateList = ref<
+  Array<{
+    dm: string
+    d: number
+    w: number
+  }>
+>([])
+const initDates = async () => {
+  const momentDate: moment.Moment = moment(nowTime.value)
+  const currentM: string = nowTime.value // 当前月
+  const curDays: number = momentDate.daysInMonth() // 当前天数
+  for (let i = 0; i < curDays; i++) {
+    let dmStr = ''
+    if (i < 9) {
+      dmStr = `${currentM}-0${i + 1}`
+    } else {
+      dmStr = `${currentM}-${i + 1}`
+    }
+    dateList.value.push({
+      dm: dmStr,
+      d: i + 1,
+      w: moment(dmStr).day()
+    })
+  }
+  console.log(dateList.value)
+}
+
+const lastClick = () => {
+  let time: any = moment(nowTime.value).subtract(1, 'months').format('YYYY-MM')
+  nowTime.value = moment(time).format('YYYY-MM')
+  initDates()
+}
+const nextClick = () => {
+  let time: any = moment(nowTime.value).add(1, 'months').format('YYYY-MM')
+  nowTime.value = moment(time).format('YYYY-MM')
+  initDates()
+}
+onMounted(() => {
+  initDates()
+})
+</script>
+<style lang="scss" scoped>
+.weeklyCenterBox {
+  width: 100%;
+  .selectBox {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    .icon1 {
+      cursor: pointer;
+    }
+    p {
+      font-weight: 600;
+      color: #2d333c;
+      margin: 0 10px;
+      user-select: none;
+      cursor: pointer;
+    }
+  }
+  .contentBox {
+    width: 100%;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 1px solid #dee0e3;
+
+    .ulBox {
+    }
+  }
+}
+</style>

client/src/views/OaSystem/reportCenter/components/WorkHoursSelect.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="WorkHoursSelect">
+    <p class="title">{{ title || '工时选择(小时)' }}</p>
+    <div :style="{ height: height }">
+      <ul>
+        <li v-for="(item, index) in data * 24" :key="index" @click="handleClick(item)">
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'WorkHoursSelect' })
+defineProps({
+  data: {
+    type: Number,
+    default: 0
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  height: {
+    type: String,
+    default: '174px'
+  }
+})
+const emit = defineEmits<{
+  (e: 'select', val: number): void
+}>()
+const handleClick = (val: number): void => {
+  emit('select', val)
+}
+</script>
+
+<style lang="scss" scoped>
+.WorkHoursSelect {
+  border: 1px solid #dee0e3;
+  > .title {
+    padding: 10px;
+    text-align: center;
+    background-color: #f7f8fa;
+    color: #121518;
+  }
+  > div {
+    text-align: center;
+    overflow-y: auto;
+    > ul {
+      padding: 20px;
+      display: grid;
+      grid-template-columns: repeat(8, 38px);
+      gap: 10px;
+      justify-content: center; /* 水平居中 */
+      align-items: center; /* 垂直居中 */
+      > li {
+        text-align: center;
+        width: 38px;
+        height: 38px;
+        line-height: 38px;
+        background: #f7f8fa;
+        border-radius: 2px;
+        color: #2d333c;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

client/src/views/OaSystem/reportCenter/components/WorkProjectList.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="WorkHoursSelect">
+    <p class="title">{{ title || '工作项目（总耗时8小时）' }}</p>
+    <div :style="{ height: height }">
+      <ul>
+        <li v-for="(item, index) in dataList" :key="index" @click="handleClick(item)">
+          {{ item['name'] }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface IProject {
+  name: string
+}
+defineOptions({ name: 'WorkHoursSelect' })
+const emit = defineEmits<{
+  (e: 'select', val: IProject): void
+}>()
+defineProps({
+  data: {
+    type: Number,
+    default: 0
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  height: {
+    type: String,
+    default: '174px'
+  }
+})
+let dataList = ref<Array<IProject>>([])
+dataList.value.push({
+  name: '测试项目'
+})
+const handleClick = (val: IProject): void => {
+  emit('select', val)
+}
+</script>
+
+<style lang="scss" scoped>
+.WorkHoursSelect {
+  border: 1px solid #dee0e3;
+  > .title {
+    padding: 10px;
+    text-align: center;
+    background-color: #f7f8fa;
+    color: #121518;
+  }
+  > div {
+    text-align: center;
+    height: 174px;
+    > ul {
+      background-color: #fff;
+      > li {
+        text-align: left;
+        color: #2d333c;
+        padding: 10px 15px;
+        cursor: pointer;
+        &:hover {
+          background-color: #e3effd;
+        }
+      }
+    }
+  }
+}
+</style>

client/src/views/OaSystem/reportCenter/dailyCenter/dailyCenter.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="dailyCenterBox">
+    <div class="containerBox">
+      <h4 class="title">工作日志填报</h4>
+      <div class="calendarBox">
+        <OaCalendar />
+        <div class="exportBtn">
+          <button type="button"> <Icon class="mr-5px" icon="fa:external-link" />导出</button>
+        </div>
+      </div>
+      <div class="formBox">
+        <el-form ref="form" :model="formData" label-width="80px">
+          <el-row :gutter="24">
+            <el-col :span="8">
+              <el-form-item label="填写日期">
+                <el-date-picker
+                  type="date"
+                  placeholder="填写日期"
+                  v-model="formData.date"
+                  style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label="发给谁">
+                <el-date-picker
+                  type="date"
+                  placeholder="发给谁"
+                  v-model="formData.date"
+                  style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="本周工作">
+                <el-input type="textarea" rows="10" v-model="formData.date" style="width: 100%" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div class="footBox">
+        <div>
+          <div class="title">工作分配</div>
+          <div>
+            <WorkProjectList />
+          </div>
+          <div>
+            <WorkHoursSelect :data="1" @select="whSelectHandle" />
+          </div>
+        </div>
+        <div> <el-button type="primary">发送</el-button></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import OaCalendar from '../components/OaCalendar.vue'
+import WorkHoursSelect from '../components/WorkHoursSelect.vue'
+import WorkProjectList from '../components/WorkProjectList.vue'
+
+defineOptions({ name: 'DailyCenter' })
+
+const formData = ref({
+  date: ''
+})
+const whSelectHandle = (val: number): void => {
+  alert(val)
+}
+</script>
+
+<style lang="scss" scoped>
+.dailyCenterBox {
+  width: 100%;
+  height: 100%;
+  background-color: #f6f8fa;
+  overflow-y: auto;
+  > .containerBox {
+    min-height: 100%;
+    max-width: 1346px;
+    margin: auto;
+    min-width: 760px;
+    background-color: #fff;
+    padding: 30px;
+    > .title {
+      font-size: 20px;
+      margin-bottom: 20px;
+      color: #121518;
+    }
+    > .calendarBox {
+      position: relative;
+      > .exportBtn {
+        position: absolute;
+        right: 0px;
+        top: -3px;
+        > button {
+          background-color: #02afb5;
+          border: 0px;
+          padding: 6px 15px;
+          text-align: center;
+          color: #fff;
+          border-radius: 2px;
+          display: flex;
+          align-items: center;
+          > i {
+            display: inline-block;
+            margin-right: 2px;
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+    > .formBox {
+      padding: 15px 0px;
+    }
+    > .footBox {
+      > div {
+        &:first-child {
+          display: flex;
+          > div {
+            &.title {
+              width: 80px;
+              color: var(--el-text-color-regular);
+              font-size: 14px;
+            }
+            &:nth-child(2) {
+              flex: 2;
+              margin-right: 20px;
+            }
+          }
+        }
+        &:last-child {
+          text-align: right;
+          margin-top: 10px;
+        }
+      }
+    }
+  }
+}
+</style>

client/src/views/OaSystem/reportCenter/dailyCenter/dailyCenter2.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="dailyCenterBox">
+    <div class="containerBox">
+      <h4 class="title">工作日志填报</h4>
+      <div class="calendarBox">
+        <OaCalendar />
+        <div class="exportBtn">
+          <button type="button"> <Icon class="mr-5px" icon="fa:external-link" />导出</button>
+        </div>
+      </div>
+      <div class="formBox">
+        <el-form ref="form" :model="formData" label-width="80px">
+          <el-row :gutter="24">
+            <el-col :span="8">
+              <el-form-item label="填写日期">
+                <el-date-picker
+                  type="date"
+                  placeholder="填写日期"
+                  v-model="formData.date"
+                  style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label="发给谁">
+                <el-date-picker
+                  type="date"
+                  placeholder="发给谁"
+                  v-model="formData.date"
+                  style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="本周工作">
+                <el-input type="textarea" rows="8" v-model="formData.date" style="width: 100%" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div class="footBox">
+        <div class="title">工作分配</div>
+        <div>
+          <WorkProjectList height="auto" />
+        </div>
+      </div>
+      <div class="commonentBox">
+        <ul class="commonentList">
+          <li>
+            <div class="userImg">张三</div>
+            <div class="content">
+              <p>
+                <span>张三</span>
+                <span>2023-10-02</span>
+              </p>
+              <p class="desc">点赞</p>
+            </div>
+          </li>
+          <li>
+            <div class="userImg">张三</div>
+            <div class="content">
+              <p>
+                <span>张三</span>
+                <span>2023-10-02</span>
+              </p>
+              <p class="desc">点赞</p>
+            </div>
+          </li>
+        </ul>
+        <div class="commonent">
+          <ul>
+            <li>赞</li>
+            <li>写的太棒了！</li>
+          </ul>
+          <div class="formBox">
+            <div>
+              <el-input width="100%" />
+            </div>
+            <div>
+              <el-button type="primary">发送</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import OaCalendar from '../components/OaCalendar.vue'
+import WorkProjectList from '../components/WorkProjectList.vue'
+
+defineOptions({ name: 'DailyCenter' })
+
+const formData = ref({
+  date: ''
+})
+</script>
+
+<style lang="scss" scoped>
+.dailyCenterBox {
+  width: 100%;
+  height: 100%;
+  background-color: #f6f8fa;
+  overflow-y: auto;
+  > .containerBox {
+    min-height: 100%;
+    max-width: 1346px;
+    margin: auto;
+    min-width: 760px;
+    background-color: #fff;
+    padding: 30px;
+    > .title {
+      font-size: 20px;
+      margin-bottom: 20px;
+      color: #121518;
+    }
+    > .calendarBox {
+      position: relative;
+      > .exportBtn {
+        position: absolute;
+        right: 0px;
+        top: -3px;
+        > button {
+          background-color: #02afb5;
+          border: 0px;
+          padding: 6px 15px;
+          text-align: center;
+          color: #fff;
+          border-radius: 2px;
+          display: flex;
+          align-items: center;
+          > i {
+            display: inline-block;
+            margin-right: 2px;
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+    > .formBox {
+      padding: 0px 0px;
+      margin-top: 20px;
+    }
+    > .footBox {
+      display: flex;
+      > div {
+        &.title {
+          width: 80px;
+          color: var(--el-text-color-regular);
+          font-size: 14px;
+        }
+        &:nth-child(2) {
+          flex: 2;
+        }
+      }
+    }
+    > .commonentBox {
+      margin-top: 20px;
+      > ul {
+        border: 1px solid #eef2f9;
+        background-color: #f7f8fa;
+        > li {
+          display: flex;
+          align-items: center;
+          padding: 15px;
+          border-bottom: 1px solid #e3eaf5;
+          &:last-child {
+            border-bottom: 0px;
+          }
+          > .userImg {
+            font-size: 15px;
+            width: 50px;
+            height: 50px;
+            line-height: 50px;
+            text-align: center;
+            border-radius: 50%;
+            background-color: #5a99e3;
+            color: #fff;
+            margin-right: 10px;
+          }
+          > .content {
+            flex: 1;
+            > p {
+              padding: 2px 0px;
+              &:first-child {
+                font-size: 14px;
+                color: #8a94a4;
+                > span {
+                  display: inline-block;
+                  margin-right: 10px;
+                }
+              }
+              &.desc {
+                color: #121518;
+              }
+            }
+          }
+        }
+      }
+      > .commonent {
+        margin-top: 15px;
+        > ul {
+          > li {
+            display: inline-block;
+            padding: 3px 20px;
+            background: #f7f8fa;
+            border-radius: 20px;
+            opacity: 1;
+            border: 1px solid #edeeef;
+            margin-right: 10px;
+            font-size: 14px;
+            &:last-child {
+              margin-right: 0px;
+            }
+          }
+        }
+        > .formBox {
+          display: flex;
+          margin-top: 10px;
+          > div {
+            &:first-child {
+              flex: 1;
+            }
+            &:last-child {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

client/src/views/OaSystem/reportCenter/weeklyCenter/weeklyCenter.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="dailyCenterBox">
+    <div class="containerBox">
+      <h4 class="title">工作周报填报</h4>
+      <div class="calendarBox">
+        <WeekCalendar />
+        <div class="exportBtn">
+          <button type="button"> <Icon class="mr-5px" icon="fa:external-link" />导出</button>
+        </div>
+      </div>
+      <div class="formBox">
+        <el-form ref="form" :model="formData" label-width="80px">
+          <el-row :gutter="24">
+            <el-col :span="8">
+              <el-form-item label="填写日期">
+                <el-date-picker
+                  type="date"
+                  placeholder="填写日期"
+                  v-model="formData.date"
+                  style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label="发给谁">
+                <el-date-picker
+                  type="date"
+                  placeholder="发给谁"
+                  v-model="formData.date"
+                  style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="本周完成工作">
+                <el-input type="textarea" rows="10" v-model="formData.date" style="width: 100%" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div class="footBox">
+        <div>
+          <div class="title">工作分配</div>
+          <div>
+            <WorkProjectList />
+          </div>
+          <div>
+            <WorkHoursSelect :data="1" @select="whSelectHandle" />
+          </div>
+        </div>
+        <div> <el-button type="primary">发送</el-button></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import WeekCalendar from '../components/WeekCalendar.vue'
+import WorkHoursSelect from '../components/WorkHoursSelect.vue'
+import WorkProjectList from '../components/WorkProjectList.vue'
+
+defineOptions({ name: 'DailyCenter' })
+
+const formData = ref({
+  date: ''
+})
+const whSelectHandle = (val: number): void => {
+  alert(val)
+}
+</script>
+
+<style lang="scss" scoped>
+.dailyCenterBox {
+  width: 100%;
+  height: 100%;
+  background-color: #f6f8fa;
+  overflow-y: auto;
+  > .containerBox {
+    min-height: 100%;
+    max-width: 1346px;
+    margin: auto;
+    min-width: 760px;
+    background-color: #fff;
+    padding: 30px;
+    > .title {
+      font-size: 20px;
+      margin-bottom: 20px;
+      color: #121518;
+    }
+    > .calendarBox {
+      position: relative;
+      > .exportBtn {
+        position: absolute;
+        right: 0px;
+        top: -3px;
+        > button {
+          background-color: #02afb5;
+          border: 0px;
+          padding: 6px 15px;
+          text-align: center;
+          color: #fff;
+          border-radius: 2px;
+          display: flex;
+          align-items: center;
+          > i {
+            display: inline-block;
+            margin-right: 2px;
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+    > .formBox {
+      padding: 15px 0px;
+    }
+    > .footBox {
+      > div {
+        &:first-child {
+          display: flex;
+          > div {
+            &.title {
+              width: 80px;
+              color: var(--el-text-color-regular);
+              font-size: 14px;
+            }
+            &:nth-child(2) {
+              flex: 2;
+              margin-right: 20px;
+            }
+          }
+        }
+        &:last-child {
+          text-align: right;
+          margin-top: 10px;
+        }
+      }
+    }
+  }
+}
+</style>

client/src/views/OaSystem/reportCenter/weeklyCenter/weeklyCenter2.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="weeklyCenterBox">
+    <div class="containerBox">
+      <h4 class="title">工作周报填报</h4>
+      <div class="calendarBox">
+        <OaCalendar />
+        <div class="exportBtn">
+          <button type="button"> <Icon class="mr-5px" icon="fa:external-link" />导出</button>
+        </div>
+      </div>
+      <div class="formBox">
+        <el-form ref="form" :model="formData" label-width="80px">
+          <el-row :gutter="24">
+            <el-col :span="8">
+              <el-form-item label="填写日期">
+                <el-date-picker
+                  type="date"
+                  placeholder="填写日期"
+                  v-model="formData.date"
+                  style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label="发给谁">
+                <el-date-picker
+                  type="date"
+                  placeholder="发给谁"
+                  v-model="formData.date"
+                  style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="本周完成工作">
+                <el-input type="textarea" rows="8" v-model="formData.date" style="width: 100%" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div class="footBox">
+        <div class="title">工作分配</div>
+        <div>
+          <WorkProjectList height="auto" />
+        </div>
+      </div>
+      <div class="commonentBox">
+        <ul class="commonentList">
+          <li>
+            <div class="userImg">张三</div>
+            <div class="content">
+              <p>
+                <span>张三</span>
+                <span>2023-10-02</span>
+              </p>
+              <p class="desc">点赞</p>
+            </div>
+          </li>
+          <li>
+            <div class="userImg">张三</div>
+            <div class="content">
+              <p>
+                <span>张三</span>
+                <span>2023-10-02</span>
+              </p>
+              <p class="desc">点赞</p>
+            </div>
+          </li>
+        </ul>
+        <div class="commonent">
+          <ul>
+            <li>赞</li>
+            <li>写的太棒了！</li>
+          </ul>
+          <div class="formBox">
+            <div>
+              <el-input width="100%" />
+            </div>
+            <div>
+              <el-button type="primary">发送</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import OaCalendar from '../components/OaCalendar.vue'
+import WorkProjectList from '../components/WorkProjectList.vue'
+
+defineOptions({ name: 'WeeklyCenter' })
+
+const formData = ref({
+  date: ''
+})
+</script>
+
+<style lang="scss" scoped>
+.weeklyCenterBox {
+  width: 100%;
+  height: 100%;
+  background-color: #f6f8fa;
+  overflow-y: auto;
+  > .containerBox {
+    min-height: 100%;
+    max-width: 1346px;
+    margin: auto;
+    min-width: 760px;
+    background-color: #fff;
+    padding: 30px;
+    > .title {
+      font-size: 20px;
+      margin-bottom: 20px;
+      color: #121518;
+    }
+    > .calendarBox {
+      position: relative;
+      > .exportBtn {
+        position: absolute;
+        right: 0px;
+        top: -3px;
+        > button {
+          background-color: #02afb5;
+          border: 0px;
+          padding: 6px 15px;
+          text-align: center;
+          color: #fff;
+          border-radius: 2px;
+          display: flex;
+          align-items: center;
+          > i {
+            display: inline-block;
+            margin-right: 2px;
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+    > .formBox {
+      padding: 0px 0px;
+      margin-top: 20px;
+    }
+    > .footBox {
+      display: flex;
+      > div {
+        &.title {
+          width: 80px;
+          color: var(--el-text-color-regular);
+          font-size: 14px;
+        }
+        &:nth-child(2) {
+          flex: 2;
+        }
+      }
+    }
+    > .commonentBox {
+      margin-top: 20px;
+      > ul {
+        border: 1px solid #eef2f9;
+        background-color: #f7f8fa;
+        > li {
+          display: flex;
+          align-items: center;
+          padding: 15px;
+          border-bottom: 1px solid #e3eaf5;
+          &:last-child {
+            border-bottom: 0px;
+          }
+          > .userImg {
+            font-size: 15px;
+            width: 50px;
+            height: 50px;
+            line-height: 50px;
+            text-align: center;
+            border-radius: 50%;
+            background-color: #5a99e3;
+            color: #fff;
+            margin-right: 10px;
+          }
+          > .content {
+            flex: 1;
+            > p {
+              padding: 2px 0px;
+              &:first-child {
+                font-size: 14px;
+                color: #8a94a4;
+                > span {
+                  display: inline-block;
+                  margin-right: 10px;
+                }
+              }
+              &.desc {
+                color: #121518;
+              }
+            }
+          }
+        }
+      }
+      > .commonent {
+        margin-top: 15px;
+        > ul {
+          > li {
+            display: inline-block;
+            padding: 3px 20px;
+            background: #f7f8fa;
+            border-radius: 20px;
+            opacity: 1;
+            border: 1px solid #edeeef;
+            margin-right: 10px;
+            font-size: 14px;
+            &:last-child {
+              margin-right: 0px;
+            }
+          }
+        }
+        > .formBox {
+          display: flex;
+          margin-top: 10px;
+          > div {
+            &:first-child {
+              flex: 1;
+            }
+            &:last-child {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>