| | |
| | | <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> |
| | |
| | | </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 { |
| | |
| | | { 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> |
| | |
| | | <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; |
| | |
| | | color: #222222; |
| | | } |
| | | .main_left_menu_title_edit { |
| | | cursor: pointer; |
| | | display: flex; |
| | | align-items: center; |
| | | img { |
| | |
| | | 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; |
| | | } |
| | |
| | | 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; |
| | | } |
| | | } |
| | | } |
| | | } |