init project
This commit is contained in:
tao
409
pages/work/index.vue
Normal file
409
pages/work/index.vue
Normal file
@@ -0,0 +1,409 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user