409 lines
9.2 KiB
Vue
409 lines
9.2 KiB
Vue
<template>
|
||
|
||
<view class="work-container" style="">
|
||
|
||
<!-- <uni-nav-bar shadow right-icon="plusempty" @clickRight="rightClick" :fixed="true" :shadow="false"
|
||
:border="false" title="工作台" /> -->
|
||
<u-sticky>
|
||
<!-- <view style="display: flex; width: 100vw;position: absolute;z-index: 1;"> -->
|
||
<uni-search-bar style="width: 100%;position: absolute;top: 10px;" bgColor="#FFFFFF" placeholder="请输入搜索内容"
|
||
ref="searchBar" cancelButton="none" @focus="goSearchClick" />
|
||
<!-- </view> -->
|
||
</u-sticky>
|
||
<u-back-top :scroll-top="scrollTop" style="bottom: 100px;"></u-back-top>
|
||
<view class="uni-flex uni-column">
|
||
<view class="flex-item flex-item-V">
|
||
<image :src="src" mode="aspectFill" style="width: 100%;height: 200rpx;" />
|
||
</view>
|
||
</view>
|
||
|
||
<view v-for="(item, index) in datalist" :key="index">
|
||
<u-grid v-if="shouldShowGrid(item.data)" :border="false" col="4"
|
||
style="background-color: #fff;margin: 10px 0;border-radius: 3px;">
|
||
<uni-title type="h3" :title="item.name" style="margin: 10px 10px;width: 100%;flex: auto;"></uni-title>
|
||
<u-grid-item v-for="(data,dataIndex) in item.data" :key="dataIndex" @click="selectgrid(data)"
|
||
v-if="checkPermi([data.permission])">
|
||
<uni-icons v-if="data.icon.includes('icon')" class="uni-icons"
|
||
:style="{'background': data.color,'-webkit-background-clip': 'text','-webkit-text-fill-color': 'transparent',}"
|
||
custom-prefix="iconfont" :type="data.icon" color="transparent" size="30" />
|
||
<uni-icons v-else class="uni-icons" :type="data.icon"
|
||
:style="{'background': data.color,'-webkit-background-clip': 'text','-webkit-text-fill-color': 'transparent'}"
|
||
color="transparent" size="30" />
|
||
<text class="text">{{data.style.navigationBarTitleText}}</text>
|
||
</u-grid-item>
|
||
</u-grid>
|
||
</view>
|
||
<!-- <u-picker :show="showMenu" @close="Menuclose" @confirm="confirm" @cancel="cancel" :columns="columns"
|
||
:closeOnClickOverlay="true"></u-picker> -->
|
||
<u-action-sheet :actions="columns" @select="confirm" cancelText="取消" @close="cancel" title="请选择模式"
|
||
:show="showMenu" :closeOnClickOverlay="true"></u-action-sheet>
|
||
<u-action-sheet :actions="list" @select="selectTask" cancelText='取消' @close="close" :closeOnClickOverlay="true"
|
||
:closeOnClickAction="true" description='请选择任务' :show="show"></u-action-sheet>
|
||
<u-action-sheet :actions="invQuicklist" @select="selectTask" cancelText='取消' @close="invQuickclose"
|
||
:closeOnClickOverlay="true" :closeOnClickAction="true" description='请选择盘点类型'
|
||
:show="invQuickshow"></u-action-sheet>
|
||
|
||
<!-- <view>
|
||
<u-sticky>
|
||
<u-tabs
|
||
:current="currentTab"
|
||
:list="datalist"
|
||
@click="handleTabClick"
|
||
></u-tabs>
|
||
</u-sticky>
|
||
|
||
<view v-for="(item, index) in datalist" :key="index"> -->
|
||
<!-- 锚点内容 -->
|
||
<!-- <view :id="'section'+index" class="section">
|
||
<view class="grid-body" style="background-color: #fff;margin: 10px 0;border-radius: 3px;">
|
||
<uni-title type="h3" :title="item.name" style="margin-left: 10px;"></uni-title>
|
||
<uni-grid :column="4" :showBorder="false" @change="changeGrid10" :open="true" v-for="(data,dataIndex) in item.data">
|
||
<uni-grid-item :index="dataIndex+1" >
|
||
<view class="grid-item-box" style="">
|
||
<uni-icons class="uni-icons" custom-prefix="iconfont" :type="data.icon" :color="data.color" size="30"></uni-icons>
|
||
</view>
|
||
<text class="text">{{data.style.navigationBarTitleText}}</text>
|
||
</uni-grid-item>
|
||
</uni-grid>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
version
|
||
} from "vue"
|
||
import datalist from "./indexList.json"
|
||
import {
|
||
checkPermi,
|
||
checkRole
|
||
} from "@/utils/permission";
|
||
export default {
|
||
mounted() {
|
||
// #ifdef APP-PLUS
|
||
var version = plus.runtime.version;
|
||
// #endif
|
||
},
|
||
components: {},
|
||
data() {
|
||
return {
|
||
invQuickshow: false,
|
||
showMenu: false,
|
||
scrollTop: 0,
|
||
src: '/static/images/banner/mes_banner.jpg',
|
||
datalist: datalist,
|
||
show: false,
|
||
list: [{
|
||
name: '保养任务',
|
||
path: '/pages/tpm/maintainTask'
|
||
},
|
||
{
|
||
name: '点检任务',
|
||
path: '/pages/tpm/checkTask'
|
||
},
|
||
{
|
||
name: '维修任务',
|
||
path: '/pages/tpm/repairTask'
|
||
}
|
||
],
|
||
invQuicklist: [{
|
||
name: '快速盘点',
|
||
path: '/pages/wms/stock/addInvQuick?key=1'
|
||
},
|
||
{
|
||
name: '期初盘点',
|
||
path: '/pages/wms/stock/addInvQuick?key=2'
|
||
}
|
||
],
|
||
// 右边菜单内容
|
||
options: [{
|
||
value: 'update',
|
||
text: '选修'
|
||
},
|
||
{
|
||
value: 'forbit',
|
||
text: '禁止'
|
||
}
|
||
],
|
||
// columns: [
|
||
// ['常规功能', 'MES智能终端']
|
||
// ],
|
||
columns: [{
|
||
name: '常规功能',
|
||
path: '/pages/work/index'
|
||
},
|
||
{
|
||
name: 'MES智能终端',
|
||
path: '/pages/work/mesIT'
|
||
},
|
||
],
|
||
}
|
||
},
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop;
|
||
},
|
||
methods: {
|
||
shouldShowGrid(dataList) {
|
||
for (const data of dataList) {
|
||
if (this.checkPermi([data.permission])) {
|
||
return true; // 如果有一个u-grid-item可以显示，则显示u-grid
|
||
}
|
||
}
|
||
return false; // 如果没有一个u-grid-item可以显示，则不显示u-grid
|
||
},
|
||
checkPermi,
|
||
Menuclose() {
|
||
this.showMenu = false
|
||
},
|
||
confirm(e) {
|
||
console.log(e)
|
||
// if (e.value == '常规功能') {
|
||
// this.$tab.reLaunch('/pages/work/index');
|
||
// } else if (e.value == 'MES智能终端') {
|
||
// this.$tab.reLaunch('/pages/work/mesIT');
|
||
// }
|
||
this.$tab.reLaunch(e.path);
|
||
},
|
||
cancel() {
|
||
this.showMenu = false
|
||
},
|
||
onNavigationBarButtonTap(e) {
|
||
console.log(e)
|
||
this.showMenu = !this.showMenu;
|
||
},
|
||
rightClick() {
|
||
console.log('rightClick');
|
||
},
|
||
selectgrid(item) {
|
||
if (item) {
|
||
if (item.path) {
|
||
this.$tab.navigateTo(item.path);
|
||
} else if (item.style.navigationBarTitleText == '任务查看') {
|
||
this.show = true;
|
||
} else if (item.style.navigationBarTitleText == '新增快速盘点') {
|
||
this.invQuickshow = true;
|
||
}
|
||
}
|
||
},
|
||
goSearchClick() {
|
||
this.$tab.navigateTo("/pages/work/searchIndex/searchIndex");
|
||
},
|
||
selectTask(e) {
|
||
console.log(e);
|
||
this.$tab.navigateTo(e.path);
|
||
},
|
||
close() {
|
||
this.show = false;
|
||
},
|
||
invQuickclose() {
|
||
this.invQuickshow = false;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.menu {
|
||
position: fixed;
|
||
top: 44px;
|
||
right: 0;
|
||
width: 120px;
|
||
background-color: #fff;
|
||
border: 1px solid #ccc;
|
||
}
|
||
|
||
.wrap {
|
||
height: 200vh;
|
||
}
|
||
|
||
.work-container {
|
||
// background: white;
|
||
min-height: 50vh;
|
||
}
|
||
|
||
.tabs {
|
||
position: sticky;
|
||
z-index: 970;
|
||
top: 0px;
|
||
background-color: #fff;
|
||
width: 100vw;
|
||
|
||
.tabsStyle {
|
||
box-shadow: 0 2rpx 6rpx 0 rgba(153, 153, 153, 0.2);
|
||
|
||
::v-deep {
|
||
.u-tabs {
|
||
box-shadow: 0px 4px 6px 0 rgba(153, 153, 153, 0.2);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* #ifndef APP-NVUE */
|
||
page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
// background-color: #fff;
|
||
min-height: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
view {
|
||
// font-size: 20px;
|
||
line-height: inherit;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.text {
|
||
text-align: center;
|
||
// font-size: 30rpx;
|
||
margin-top: 10px;
|
||
// color: #fff;
|
||
position: relative;
|
||
bottom: 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.grid-item-box {
|
||
flex: 1;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
// padding: 15px 0;
|
||
margin: 10px 21px;
|
||
// background-color: #0F6C8E;
|
||
border-radius: 7px;
|
||
}
|
||
|
||
|
||
.uni-margin-wrap {
|
||
width: 690rpx;
|
||
width: 100%;
|
||
;
|
||
}
|
||
|
||
.swiper {
|
||
height: 300rpx;
|
||
}
|
||
|
||
.swiper-box {
|
||
height: 150px;
|
||
}
|
||
|
||
.swiper-item {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
height: 300rpx;
|
||
line-height: 300rpx;
|
||
}
|
||
|
||
@media screen and (min-width: 320px) {
|
||
.uni-swiper-dot-box {
|
||
width: 400px;
|
||
/* #ifndef APP-NVUE */
|
||
margin: 0 auto;
|
||
/* #endif */
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.image {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
//竖屏
|
||
@media screen and (min-width: 600px) and (orientation:portrait) {
|
||
.grid-item-box {
|
||
margin: 20px 40px;
|
||
}
|
||
|
||
.text {
|
||
bottom: 10px;
|
||
}
|
||
|
||
.uni-icons {
|
||
font-size: 50px !important;
|
||
}
|
||
}
|
||
|
||
//横屏
|
||
@media screen and (min-width: 600px) and (orientation:landscape) {
|
||
// .uni-swiper-dot-box {
|
||
// width: 400px;
|
||
// /* #ifndef APP-NVUE */
|
||
// margin: 0 auto;
|
||
// /* #endif */
|
||
// margin-top: 8px;
|
||
// }
|
||
|
||
.image {
|
||
width: 100%;
|
||
}
|
||
|
||
.grid-item-box {
|
||
margin: 50px 70px;
|
||
}
|
||
|
||
.text {
|
||
bottom: 10px;
|
||
font-size: 24px
|
||
}
|
||
|
||
.uni-icons {
|
||
font-size: 60px !important;
|
||
|
||
|
||
}
|
||
|
||
::v-deep .uni-btn-icon {
|
||
font-size: 60px !important;
|
||
}
|
||
|
||
::v-deep .uniui-search {
|
||
font-size: 40px
|
||
}
|
||
|
||
::v-deep .uni-h3 {
|
||
font-size: 24px;
|
||
}
|
||
|
||
::v-deep .uni-searchbar__box {
|
||
height: 50px;
|
||
}
|
||
|
||
|
||
::v-deep.uni-searchbar__text-placeholder {
|
||
font-size: 24px
|
||
}
|
||
|
||
::v-deep .u-action-sheet__header__title {
|
||
font-size: 24px
|
||
}
|
||
|
||
|
||
::v-deep .u-icon__icon .uicon-close {
|
||
font-size: 35px
|
||
}
|
||
|
||
::v-deep.u-action-sheet__item-wrap__item__name {
|
||
font-size: 24px
|
||
}
|
||
|
||
.u-action-sheet__cancel-text {
|
||
font-size: 24px
|
||
}
|
||
}
|
||
</style> |