liukangdong
2025-01-24 dc2ed575ac5236f5100baac236254a434dcae8b9
admin/src/views/index.vue
@@ -30,15 +30,15 @@
      <div class="main_left_menu">
        <div class="main_left_menu_title">
          <span>常用功能</span>
          <div class="main_left_menu_title_edit">
          <div class="main_left_menu_title_edit" @click="$refs.commonFunctions.open('常用功能管理', list)">
            <img src="@/assets/indexIcon/ic_daibangongdan@2x.png" />
            <span>自定义功能</span>
          </div>
        </div>
        <div class="main_left_menu_list">
          <div class="list_item" v-for="(item, index) in menu" :key="index">
          <div class="list_item" v-for="(item, index) in list" :key="index">
            <div class="list_item_left">
              <img :src="item.icon" />
              <img :src="item.path" />
              <span>{{item.name}}</span>
            </div>
            <i class="el-icon-arrow-right"></i>
@@ -67,13 +67,33 @@
        </el-select>
      </div>
      <div class="main_right_date">
        <el-calendar v-model="value" :mark-data="markData"></el-calendar>
        <el-calendar v-model="value"></el-calendar>
      </div>
      <div class="main_right_rc">
        <div class="main_right_rc_title">当日日程(3)</div>
        <div class="main_right_rc_list">
          <div class="main_right_rc_list_row" v-for="(item, index) in 5" :key="index">
            <div class="top">
              <div class="top_left">
                <div class="top_left_dian"></div>
                <div class="top_left_title">盘点通知</div>
              </div>
              <div class="top_date">2024-12-13 12:53:12</div>
            </div>
            <div class="bottom">
              【盘点计划名称】将在【2024-12-1
            </div>
          </div>
        </div>
      </div>
    </div>
    <CommonFunctions ref="commonFunctions" />
  </div>
</template>
<script>
import CommonFunctions from '@/components/business/commonFunctions'
import { getYwQuickList } from '@/api/ywWorkDesk'
export default {
  data() {
    return {
@@ -89,25 +109,24 @@
        { name: '账单列表', icon: require('@/assets/indexIcon/ic_zhangdanliebiao@2x.png') },
        { name: '新增入库单', icon: require('@/assets/indexIcon/ic_xinzengruku@2x.png') },
        { name: '新增出库单', icon: require('@/assets/indexIcon/ic_xinzengchuku@2x.png') },
        { name: '资产清单', icon: require('@/assets/indexIcon/ic_zichan@2x.png') },
        { name: '物料清单', icon: require('@/assets/indexIcon/ic_zichan@2x.png') },
      ],
      options: [],
      value: '',
      markData: [
        {
          date: '2025-01-22', // 标记的日期
          // 自定义标记内容
          content: '<div style="color: red;">重要事件</div>'
        },
        {
          date: '2025-01-19',
          content: '生日'
        }
      ]
      list: [],
      value: new Date()
    }
  },
  components: { CommonFunctions },
  created () {
    this.getYwQuickLists()
  },
  methods: {
    getYwQuickLists() {
      getYwQuickList({})
        .then(res => {
          console.log(res)
          this.list = res
        })
    }
  }
}
</script>
@@ -115,12 +134,12 @@
<style lang="scss" scoped>
  .main {
    width: 100%;
    height: calc(100vh - 48px - 56px - 35px);
    /*height: calc(100vh - 48px - 56px - 35px);*/
    padding: 15px;
    box-sizing: border-box;
    background: #F4F7FC;
    display: flex;
    align-items: center;
    align-items: self-start;
    justify-content: space-between;
    .main_left {
      flex: 1;
@@ -199,6 +218,7 @@
            color: #222222;
          }
          .main_left_menu_title_edit {
            cursor: pointer;
            display: flex;
            align-items: center;
            img {
@@ -266,9 +286,68 @@
        color: #222222;
        margin-bottom: 12px;
      }
      .main_right_rc {
        width: 100%;
        display: flex;
        flex-direction: column;
        .main_right_rc_title {
          font-weight: 500;
          font-size: 16px;
          color: #222222;
          margin-bottom: 15px;
        }
        .main_right_rc_list {
          width: 100%;
          height: 300px;
          overflow-y: scroll;
          .main_right_rc_list_row {
            width: 100%;
            padding: 15px;
            box-sizing: border-box;
            background: #F4F7FC;
            border-radius: 2px;
            margin-bottom: 10px;
            .top {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .top_left {
                display: flex;
                align-items: center;
                .top_left_dian {
                  width: 10px;
                  height: 10px;
                  border-radius: 50%;
                  background: #FF9E00;
                  margin-right: 10px;
                }
                .top_left_title {
                  font-weight: 500;
                  font-size: 15px;
                  color: #222222;
                }
              }
              .top_date {
                font-weight: 400;
                font-size: 12px;
                color: #999999;
              }
            }
            .bottom {
              font-weight: 400;
              font-size: 13px;
              color: #666666;
              margin-top: 8px;
            }
          }
        }
      }
      .main_right_date {
        width: 100%;
        height: 300px;
        ::v-deep .el-calendar__header {
          display: none;
        }
        ::v-deep .el-calendar-table tr td:first-child{
          border: none;
        }
@@ -283,6 +362,21 @@
          align-items: center;
          justify-content: center;
        }
        ::v-deep thead th {
          height: 20px;
          border-bottom: 1px solid #DFE2E8;
        }
        ::v-deep.el-calendar-table .el-calendar-day{
          width: 100%;
          height: 50px;
          text-align: center;
        }
        ::v-deep .el-calendar-table td.is-selected {
          background: #3E80EF;
        }
        ::v-deep .el-calendar-table .el-calendar-day:hover {
          background: none;
        }
      }
    }
  }