init
This commit is contained in:
60
src/pages/common/404.vue
Normal file
60
src/pages/common/404.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="notFound" :style="{height: Height + 'px'}">
|
||||
<div class="notFound-box">
|
||||
<h5>404</h5>
|
||||
<p>您访问的页面不翼而飞了...</p>
|
||||
<div>
|
||||
<van-button round class="notFound-button" @click="$router.goBack()">返回上一级</van-button>
|
||||
<van-button round type="primary" class="notFound-button button-right" @click="$router.push('/')">返回登录页</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'notFound',
|
||||
data () {
|
||||
return {
|
||||
Height: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.Height = window.innerHeight
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.notFound{
|
||||
width: 100%;
|
||||
background: linear-gradient(to top, #6149f6, #4bb0ff);
|
||||
.notFound-box{
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
padding-top: 30vh;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
h5{
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
p{
|
||||
font-size: .4rem;
|
||||
line-height: .8rem;
|
||||
}
|
||||
div{
|
||||
line-height: 1rem;
|
||||
.notFound-button{
|
||||
font-size: .36rem;
|
||||
height: .8rem;
|
||||
line-height: .8rem;
|
||||
}
|
||||
.button-right{
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
140
src/pages/common/login.vue
Normal file
140
src/pages/common/login.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div class="login" :style="{height: Height + 'px'}">
|
||||
<div class="login-box">
|
||||
<!-- <img src="../../assets/img/logo.png" alt=""> -->
|
||||
<div class="login-tit">pda</div>
|
||||
<van-field
|
||||
class="login-input"
|
||||
:style="{background: 'rgba(255, 255, 255, .2)'}"
|
||||
v-model="userForm.mobile"
|
||||
input-align="center"
|
||||
placeholder="请输入账号"
|
||||
/>
|
||||
<van-field
|
||||
class="login-input1"
|
||||
:style="{background: 'rgba(255, 255, 255, .2)'}"
|
||||
v-model="userForm.password"
|
||||
type="password"
|
||||
input-align="center"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
<van-checkbox class="login-remPwd" v-model="remPwd" checked-color="#07c160">记住密码</van-checkbox>
|
||||
<van-button @click="toLogin" class="login-tologin iconfont">登 录</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Toast, Notify } from 'vant'
|
||||
import { postLogin } from '@/api/user'
|
||||
export default {
|
||||
name: 'login',
|
||||
data () {
|
||||
return {
|
||||
Height: null,
|
||||
remPwd: true,
|
||||
userForm: {
|
||||
mobile: '13588441519',
|
||||
password: '123abc.'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.Height = window.innerHeight
|
||||
let userPwdInfo = JSON.parse(window.localStorage.getItem('uesrPwdInfo'))
|
||||
if (userPwdInfo) {
|
||||
this.remPwd = JSON.parse(window.localStorage.getItem('uesrPwdInfo')).remPwd
|
||||
this.userForm.mobile = JSON.parse(window.localStorage.getItem('uesrPwdInfo')).mobile
|
||||
this.userForm.password = JSON.parse(window.localStorage.getItem('uesrPwdInfo')).password
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async toLogin () {
|
||||
if (this.userForm.mobile && this.userForm.password) {
|
||||
const result = await postLogin(this.userForm)
|
||||
console.log(result)
|
||||
if (result.success) {
|
||||
if (this.remPwd) {
|
||||
let uesrPwdInfo = {
|
||||
remPwd: this.remPwd,
|
||||
mobile: this.userForm.mobile,
|
||||
password: this.userForm.password
|
||||
}
|
||||
window.localStorage.setItem('uesrPwdInfo', JSON.stringify(uesrPwdInfo))
|
||||
} else {
|
||||
let uesrPwdInfo = {
|
||||
remPwd: false,
|
||||
mobile: null,
|
||||
password: null
|
||||
}
|
||||
window.localStorage.setItem('uesrPwdInfo', JSON.stringify(uesrPwdInfo))
|
||||
}
|
||||
window.sessionStorage.setItem('userInfo', JSON.stringify(result.data))
|
||||
this.$store.commit('user/updateUserInfo', result.data)
|
||||
Toast.success({
|
||||
message: '登录成功',
|
||||
onClose: () => {
|
||||
this.$router.push('/index')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
Notify({ type: 'danger', message: result.msg })
|
||||
}
|
||||
} else {
|
||||
Notify(({ type: 'warning', message: '请输入账号密码！' }))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login{
|
||||
width: 100%;
|
||||
background: linear-gradient(to top, #4969f6, #4bb0ff);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.login-box{
|
||||
width: 80%;
|
||||
height: 8rem;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
img{
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-left: calc(50% - 1rem)
|
||||
}
|
||||
.login-tit{
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: .8rem;
|
||||
margin-bottom: .8rem;
|
||||
font-size: .36rem;
|
||||
text-align: center;
|
||||
}
|
||||
.login-input{
|
||||
margin-bottom: .5rem;
|
||||
border-radius: .8rem;
|
||||
}
|
||||
.login-input1{
|
||||
border-radius: .8rem;
|
||||
}
|
||||
.login-tologin{
|
||||
background: #07c160;
|
||||
width: 100%;
|
||||
height: .8rem;
|
||||
line-height: .8rem;
|
||||
border: 0;
|
||||
border-radius: .1rem;
|
||||
font-size: .3rem;
|
||||
text-align: center;
|
||||
color: #fff
|
||||
}
|
||||
.login-remPwd{
|
||||
margin-top: .2rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
171
src/pages/eqInspection/cols.js
Normal file
171
src/pages/eqInspection/cols.js
Normal file
@@ -0,0 +1,171 @@
|
||||
const cols = [
|
||||
{
|
||||
title: '序号',
|
||||
key: 'index',
|
||||
align: 'center',
|
||||
width: 0
|
||||
},
|
||||
{
|
||||
title: '品名（品号）',
|
||||
key: 'productName',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '品名（料号）',
|
||||
key: 'partName',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '规格',
|
||||
key: 'specification',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '密度',
|
||||
key: 'density',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '门幅',
|
||||
key: 'larghezza',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '品号',
|
||||
key: 'productCode',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '料号',
|
||||
key: 'itemCode',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '分类',
|
||||
key: 'sort',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '克重',
|
||||
key: 'grammage',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '市场报价',
|
||||
key: 'marketPrice',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '加工方式',
|
||||
key: 'processingMode',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '一阶大类',
|
||||
key: 'firstLargeClass',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '添加时间',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '厂商编码',
|
||||
key: 'supplierCodename',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '品质',
|
||||
key: 'quality',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '等级',
|
||||
key: 'dominant',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '颜色',
|
||||
key: 'colorCode',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '原料',
|
||||
key: 'stockProduct',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '组织',
|
||||
key: 'tissue',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '仓库数量',
|
||||
key: 'wareNum',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '厂商库存',
|
||||
key: 'factureInventory',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '材料成本价',
|
||||
key: 'costPrice',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '描述信息',
|
||||
key: 'description',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '定做时间（天）',
|
||||
key: 'sustomMadeTime',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '是否现货',
|
||||
key: 'isSpot',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '是否开票',
|
||||
key: 'isBilling',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
key: 'remark',
|
||||
align: 'center',
|
||||
width: 120
|
||||
}
|
||||
]
|
||||
export default cols
|
||||
165
src/pages/eqInspection/eqInspection.vue
Normal file
165
src/pages/eqInspection/eqInspection.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div class="eqInspection">
|
||||
<!-- navbar -->
|
||||
<van-sticky :offset-top="0">
|
||||
<van-nav-bar
|
||||
title="PDA设备巡检记录"
|
||||
left-arrow
|
||||
sticky
|
||||
class="eq-header"
|
||||
@click-left="onClickLeft"
|
||||
/>
|
||||
<!-- @click-right="onClickRight" -->
|
||||
</van-sticky>
|
||||
<van-pull-refresh class="eq-main" v-model="isLoading" @refresh="onRefresh" ref="listMain">
|
||||
<!-- 信息列表主体 -->
|
||||
<water-fall @click.native="getMore" :isOver="isOver"></water-fall>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { list, eqList } from '@/api/eqInspection'
|
||||
|
||||
export default {
|
||||
name: 'eqInspection',
|
||||
data () {
|
||||
return {
|
||||
queryList: {
|
||||
current: 1,
|
||||
endTime: '',
|
||||
equipmentId: '',
|
||||
size: 10,
|
||||
startTime: ''
|
||||
},
|
||||
isLoading: false,
|
||||
isOver: true,
|
||||
dataList: [],
|
||||
eqList: [],
|
||||
dataOption: {}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getDataList()
|
||||
this.getEqList()
|
||||
document.querySelector('.eq-main').addEventListener('scroll', this.handleScroll, true)
|
||||
// // 给浏览器加入一个空的历史纪录
|
||||
// window.history.pushState(null, null, document.URL)
|
||||
// // 给window添加一个popstate事件，拦截返回键，执行this.onBrowserBack事件，addEventListener需要指向一个方法
|
||||
// window.addEventListener('popstate', this.onBrowserBack, false)
|
||||
},
|
||||
// destroyed () {
|
||||
// window.removeEventListener('popstate', this.onBrowserBack, false)
|
||||
// document.querySelector('.ol-main').removeEventListener('scroll', this.handleScroll, false)
|
||||
// },
|
||||
methods: {
|
||||
// 浏览器返回按钮监听
|
||||
// onBrowserBack () {
|
||||
// if (this.show || this.showItem || this.showTypeId || this.showTypeCode) {
|
||||
// this.show = false
|
||||
// this.showItem = false
|
||||
// this.showTypeId = false
|
||||
// this.showTypeCode = false
|
||||
// window.history.pushState(null, null, document.URL)
|
||||
// } else {
|
||||
// this.$router.goBack()
|
||||
// }
|
||||
// },
|
||||
// 滚动事件监听
|
||||
handleScroll () {
|
||||
let clientHeight = document.documentElement.clientHeight // 客户区大小
|
||||
let scrollHeight = document.querySelector('.eq-main').scrollHeight // 没用滚动条的情况下，元素内容的总高度
|
||||
let scrollTop = document.querySelector('.eq-main').scrollTop // 被隐藏在内容区域上方的像素数
|
||||
let headerHeight = document.querySelector('.eq-header').offsetHeight// header高度
|
||||
let listHeight = clientHeight - headerHeight // list高度
|
||||
if (scrollTop - (scrollHeight - listHeight) >= -80 && this.isFirstScroll) {
|
||||
this.isFirstScroll = false
|
||||
this.pageNum += 1
|
||||
if (this.isOver) {
|
||||
this.isOver = !this.isOver
|
||||
this.getDataList()
|
||||
setTimeout(() => {
|
||||
this.isFirstScroll = true
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
},
|
||||
// 瀑布流点击
|
||||
getMore () {
|
||||
if (this.isOver) {
|
||||
this.queryList.current += 1
|
||||
this.getDataList()
|
||||
}
|
||||
},
|
||||
// 获取信息列表
|
||||
async getDataList () {
|
||||
const result = await list(this.queryList)
|
||||
if (result.success) {
|
||||
this.dataList = result.data.records
|
||||
this.dataOption = result.data
|
||||
if (this.dataOption.total === this.queryList.current) {
|
||||
this.isOver = false
|
||||
} else {
|
||||
this.isOver = true
|
||||
}
|
||||
this.show = false
|
||||
} else {
|
||||
this.isOver = true
|
||||
}
|
||||
},
|
||||
// 获取设备列表
|
||||
async getEqList () {
|
||||
const result = await eqList({
|
||||
current: 1,
|
||||
size: 999
|
||||
})
|
||||
console.log(result)
|
||||
},
|
||||
// 分页器
|
||||
onChange (v) {
|
||||
this.getDataList()
|
||||
},
|
||||
// 返回上一页
|
||||
onClickLeft () {
|
||||
this.$router.goBack()
|
||||
},
|
||||
// 下拉刷新
|
||||
async onRefresh () {
|
||||
this.queryList.current = 1
|
||||
await this.getDataList()
|
||||
this.$toast.success('刷新成功')
|
||||
this.isLoading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.eqInspection {
|
||||
width: 100%;
|
||||
background: #f5f5f5;
|
||||
.eq-main {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
bottom: 0;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.eq-header {
|
||||
background: #4271FF;
|
||||
.van-icon {
|
||||
color: #fff;
|
||||
font-size: .5rem;
|
||||
}
|
||||
.van-nav-bar__content {
|
||||
height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
.van-nav-bar__title {
|
||||
color: #fff;
|
||||
font-size: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
110
src/pages/index/index.vue
Normal file
110
src/pages/index/index.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="index">
|
||||
<van-grid
|
||||
:style="{height: Height/4 + 'px'}"
|
||||
:column-num="2"
|
||||
v-for="(item, index) in arrList"
|
||||
:key="index">
|
||||
<van-grid-item
|
||||
v-for="(item1, index1) in item"
|
||||
:key="index1"
|
||||
:icon="item1.icon"
|
||||
:text="item1.text"
|
||||
@click="toRouter(item1.router,item1)"
|
||||
:class="item1.color ? 'index-blue' : ''"
|
||||
/>
|
||||
</van-grid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'vant'
|
||||
const arrList = [
|
||||
[
|
||||
{
|
||||
text: '设备巡检',
|
||||
icon: 'logistics',
|
||||
router: '/eqInspection',
|
||||
color: '#1989fa'
|
||||
},
|
||||
{
|
||||
text: '物料耗材',
|
||||
icon: 'points',
|
||||
router: '/material',
|
||||
color: '#1989fa'
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
text: '待开发',
|
||||
icon: 'qr-invalid',
|
||||
color: ''
|
||||
},
|
||||
{
|
||||
text: '待开发',
|
||||
icon: 'qr-invalid',
|
||||
color: ''
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
text: '待开发',
|
||||
icon: 'qr-invalid',
|
||||
color: ''
|
||||
},
|
||||
{
|
||||
text: '待开发',
|
||||
icon: 'qr-invalid',
|
||||
color: ''
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
text: '我的',
|
||||
icon: 'manager-o',
|
||||
color: ''
|
||||
},
|
||||
{
|
||||
text: '退出',
|
||||
icon: 'ellipsis',
|
||||
router: '/',
|
||||
color: ''
|
||||
}
|
||||
]
|
||||
]
|
||||
export default {
|
||||
name: 'login',
|
||||
data () {
|
||||
return {
|
||||
Height: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.Height = window.innerHeight
|
||||
},
|
||||
computed: {
|
||||
arrList () {
|
||||
return arrList
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toRouter (router, v) {
|
||||
if (router) {
|
||||
if (v.text === '退出') {
|
||||
this.$store.commit('user/updateUserInfo', null)
|
||||
window.sessionStorage.removeItem('userInfo')
|
||||
}
|
||||
this.$router.push(router)
|
||||
} else {
|
||||
Toast.fail('模块待开发,敬请期待')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.index{
|
||||
width: 100%
|
||||
}
|
||||
</style>
|
||||
171
src/pages/material/cols.js
Normal file
171
src/pages/material/cols.js
Normal file
@@ -0,0 +1,171 @@
|
||||
const cols = [
|
||||
{
|
||||
title: '序号',
|
||||
key: 'index',
|
||||
align: 'center',
|
||||
width: 0
|
||||
},
|
||||
{
|
||||
title: '品名（品号）',
|
||||
key: 'productName',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '品名（料号）',
|
||||
key: 'partName',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '规格',
|
||||
key: 'specification',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '密度',
|
||||
key: 'density',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '门幅',
|
||||
key: 'larghezza',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '品号',
|
||||
key: 'productCode',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '料号',
|
||||
key: 'itemCode',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '分类',
|
||||
key: 'sort',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '克重',
|
||||
key: 'grammage',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '市场报价',
|
||||
key: 'marketPrice',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '加工方式',
|
||||
key: 'processingMode',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '一阶大类',
|
||||
key: 'firstLargeClass',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '添加时间',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '厂商编码',
|
||||
key: 'supplierCodename',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '品质',
|
||||
key: 'quality',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '等级',
|
||||
key: 'dominant',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '颜色',
|
||||
key: 'colorCode',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '原料',
|
||||
key: 'stockProduct',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '组织',
|
||||
key: 'tissue',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '仓库数量',
|
||||
key: 'wareNum',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '厂商库存',
|
||||
key: 'factureInventory',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '材料成本价',
|
||||
key: 'costPrice',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '描述信息',
|
||||
key: 'description',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '定做时间（天）',
|
||||
key: 'sustomMadeTime',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '是否现货',
|
||||
key: 'isSpot',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '是否开票',
|
||||
key: 'isBilling',
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
key: 'remark',
|
||||
align: 'center',
|
||||
width: 120
|
||||
}
|
||||
]
|
||||
export default cols
|
||||
138
src/pages/material/material.vue
Normal file
138
src/pages/material/material.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div class="material">
|
||||
<!-- navbar -->
|
||||
<van-sticky :offset-top="0">
|
||||
<van-nav-bar
|
||||
title="物料耗材"
|
||||
left-arrow
|
||||
sticky
|
||||
class="material-header"
|
||||
@click-left="onClickLeft"
|
||||
/>
|
||||
<!-- @click-right="onClickRight" -->
|
||||
</van-sticky>
|
||||
<van-pull-refresh class="material-main" v-model="isLoading" @refresh="onRefresh" ref="listMain">
|
||||
<!-- 信息列表主体 -->
|
||||
<water-fall @click.native="getMore" :isOver="isOver"></water-fall>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { list } from '@/api/material'
|
||||
|
||||
export default {
|
||||
name: 'material',
|
||||
data () {
|
||||
return {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
isLoading: false,
|
||||
isOver: true,
|
||||
dataList: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getDataList()
|
||||
document.querySelector('.material-main').addEventListener('scroll', this.handleScroll, true)
|
||||
// // 给浏览器加入一个空的历史纪录
|
||||
// window.history.pushState(null, null, document.URL)
|
||||
// // 给window添加一个popstate事件，拦截返回键，执行this.onBrowserBack事件，addEventListener需要指向一个方法
|
||||
// window.addEventListener('popstate', this.onBrowserBack, false)
|
||||
},
|
||||
// destroyed () {
|
||||
// window.removeEventListener('popstate', this.onBrowserBack, false)
|
||||
// document.querySelector('.ol-main').removeEventListener('scroll', this.handleScroll, false)
|
||||
// },
|
||||
methods: {
|
||||
// 浏览器返回按钮监听
|
||||
// onBrowserBack () {
|
||||
// if (this.show || this.showItem || this.showTypeId || this.showTypeCode) {
|
||||
// this.show = false
|
||||
// this.showItem = false
|
||||
// this.showTypeId = false
|
||||
// this.showTypeCode = false
|
||||
// window.history.pushState(null, null, document.URL)
|
||||
// } else {
|
||||
// this.$router.goBack()
|
||||
// }
|
||||
// },
|
||||
// 滚动事件监听
|
||||
handleScroll () {
|
||||
let clientHeight = document.documentElement.clientHeight // 客户区大小
|
||||
let scrollHeight = document.querySelector('.material-main').scrollHeight // 没用滚动条的情况下，元素内容的总高度
|
||||
let scrollTop = document.querySelector('.material-main').scrollTop // 被隐藏在内容区域上方的像素数
|
||||
let headerHeight = document.querySelector('.material-header').offsetHeight// header高度
|
||||
let listHeight = clientHeight - headerHeight // list高度
|
||||
if (scrollTop - (scrollHeight - listHeight) >= -80 && this.isFirstScroll) {
|
||||
this.isFirstScroll = false
|
||||
this.pageNum += 1
|
||||
if (this.isOver) {
|
||||
this.isOver = !this.isOver
|
||||
this.getDataList()
|
||||
setTimeout(() => {
|
||||
this.isFirstScroll = true
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
},
|
||||
// 瀑布流点击
|
||||
getMore () {
|
||||
if (this.isOver) {
|
||||
this.pageNum += 1
|
||||
this.getDataList()
|
||||
}
|
||||
},
|
||||
// 获取信息列表
|
||||
async getDataList () {
|
||||
const result = await list({
|
||||
pageSize: this.pageSize,
|
||||
pageNum: this.pageNum
|
||||
})
|
||||
if (result.success) {
|
||||
this.dataList = result.data
|
||||
if (this.dataOption.isLastPage) {
|
||||
this.isOver = false
|
||||
} else {
|
||||
this.isOver = true
|
||||
}
|
||||
this.show = false
|
||||
} else {
|
||||
this.dataOption.firstPage = 1
|
||||
this.dataOption.lastPage = 1
|
||||
this.isOver = true
|
||||
}
|
||||
},
|
||||
// 分页器
|
||||
onChange (v) {
|
||||
this.getDataList()
|
||||
},
|
||||
// 返回上一页
|
||||
onClickLeft () {
|
||||
this.$router.goBack()
|
||||
},
|
||||
// 下拉刷新
|
||||
async onRefresh () {
|
||||
this.resetList()
|
||||
await this.getDataList()
|
||||
this.$toast.success('刷新成功')
|
||||
this.isLoading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.material{
|
||||
width: 100%;
|
||||
background: #f5f5f5;
|
||||
.material-main{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: .92rem;
|
||||
bottom: 0;
|
||||
overflow: scroll;
|
||||
line-height: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user