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

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