<template>
|
<default-header-page-layout ref="page" title="工件质量信息批量修改">
|
<view class="page-frame with-action-user-row" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
|
<!-- -->
|
<action-user-row />
|
<u-row justify="center" customStyle="margin-bottom: 10px;background-color:#fff;padding:20rpx 0;">
|
<u-col span="10">
|
<u-search @blur="getInfoAll()" @search="getInfoAll()" :showAction="false" placeholder="请输入工件ID/不合格原因" v-model="queryStr"></u-search>
|
</u-col>
|
</u-row>
|
<!-- tab选择框 -->
|
<tab :tabList="tabList" @toggleTab="toggleTab" ref="tabs"></tab>
|
<!-- 列表数据 -->
|
<view class="barList">
|
<u-swipe-action>
|
<u-swipe-action-item :options="options" v-for="(item, index) in filterList" :key="index"
|
:name="index" @click="actionClick" style="margin-bottom: 10rpx;background-color: #fff;">
|
<bar-list-item @changeCheck="changeCheck" :index="++index" :item="item"
|
@updateCheck="updateCheck" key="item.barCode"></bar-list-item>
|
</u-swipe-action-item>
|
</u-swipe-action>
|
</view>
|
<!-- 详情模态框 -->
|
<detail-modal :content="content" ref="modalRef"></detail-modal>
|
<!-- 状态选择 -->
|
<status-slect @updateData="getInfoAll" ref="selectRef"></status-slect>
|
</view>
|
<template v-slot:footer>
|
<view class="bottom-btns-row">
|
<view class="btn-frame left-btn-frame"><u-button text="返回" @click="goHome"></u-button></view>
|
<view class="btn-frame right-btn-frame"><u-button type="primary" text="确认修改" :disabled="updateDisabled"
|
@click="comfirmUpdate"></u-button>
|
</view>
|
</view>
|
</template>
|
</default-header-page-layout>
|
</template>
|
|
<script>
|
import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
|
import ActionUserRow from '@/components/ActionUserRow.vue'
|
import barListItem from './modules/barListItem.vue'
|
import detailModal from './modules/detailModal.vue'
|
import statusSlect from './modules/statusSelect.vue'
|
import Tab from './modules/Tab.vue'
|
import {
|
getBarInfoByQuery
|
} from '@/api/unBindAll/index.js'
|
import {
|
parseDic,
|
$alert,
|
$successInfo
|
} from '@/static/js/utils/index.js'
|
export default {
|
name: 'unBindAll',
|
components: {
|
DefaultHeaderPageLayout,
|
ActionUserRow,
|
barListItem,
|
detailModal,
|
statusSlect,
|
Tab
|
},
|
data() {
|
return {
|
pageBodyHeight: 0,
|
initInterVal: null,
|
options: [{
|
text: "详情",
|
style: {
|
background: '#F08202'
|
}
|
}],
|
queryStr:'',
|
barList: [],
|
content: {},
|
statusArr: [{
|
code: 1,
|
title: '合格'
|
},
|
{
|
code: 2,
|
title: '不合格'
|
}, {
|
code: 3,
|
title: '疑似'
|
}
|
],
|
tabList: [],
|
filterList: []
|
}
|
},
|
onLoad() {
|
this.getInfoAll()
|
},
|
computed: {
|
updateDisabled() {
|
const checkList = this.filterList.filter(item => item.check)
|
let result = []
|
checkList.forEach(item => {
|
if (result.indexOf((item.qualityState)) == -1) {
|
result.push(item.qualityState)
|
}
|
})
|
return checkList.length == 0 || result.length > 1
|
}
|
},
|
// onPullDownRefresh() {
|
// this.getInfoAll(() => {
|
// uni.showToast({
|
// title:'刷新成功'
|
// })
|
// uni.stopPullDownRefresh()
|
// })
|
// },
|
methods: {
|
changeCheck(item) {
|
item.check = !item.check
|
},
|
toggleTab(content) {
|
console.log(this.barList, 'barlist')
|
|
this.filterList = []
|
if (content.index == 0) {
|
this.filterList = [...this.barList]
|
} else {
|
this.filterList = [...this.barList].filter(item => item.qualityState == content.status)
|
}
|
console.log(this.filterList);
|
},
|
goHome() {
|
uni.redirectTo({
|
url: "/pages/home/index"
|
})
|
},
|
// 获取列表数据
|
getInfoAll(callback) {
|
const {queryStr}=this
|
getBarInfoByQuery({queryStr}).then(res => {
|
res.data.map(item => {
|
item.check = false
|
})
|
this.filterList = [...res.data];
|
this.$refs.tabs.setCurrent(0)
|
this.tabList = [{
|
name: '全部',
|
status: 0,
|
badge: {
|
value: res.data.length
|
}
|
},
|
{
|
name: '不合格',
|
status: 2,
|
badge: {
|
value: res.data.filter(item => item.qualityState == 2).length
|
}
|
},
|
{
|
name: '疑似',
|
status: 3,
|
badge: {
|
value: res.data.filter(item => item.qualityState == 3).length
|
}
|
}
|
]
|
this.barList = [...res.data];
|
console.log(this.filterList, 'this.barList');
|
callback && callback()
|
})
|
},
|
//详情
|
actionClick(opt) {
|
console.log(opt, 'opt');
|
this.content = this.filterList[opt.name]
|
this.$refs.modalRef.show = true;
|
},
|
// 更新选中状态
|
updateCheck(index) {
|
this.filterList[index - 1]['check'] = !this.filterList[index - 1]['check']
|
|
},
|
/* 页面初始化获取页面body高度的定时器 */
|
startInitInterval(callback) {
|
this.initInterVal = setInterval(() => {
|
if (this.pageBodyHeight) {
|
this.clearInitInterval()
|
callback && callback()
|
} else {
|
this.pageBodyHeight = this.$refs.page.getBodyHeight()
|
}
|
}, 200)
|
},
|
/* 清除定时器 */
|
clearInitInterval() {
|
try {
|
clearInterval(this.initInterVal)
|
this.initInterVal = null
|
} catch (e) {
|
//TODO handle the exception
|
}
|
},
|
//确认更新
|
comfirmUpdate() {
|
let checkArr = this.filterList.filter(item => item.check)
|
this.$refs.selectRef.showModal(checkArr, this.statusArr)
|
}
|
},
|
onReady() {
|
this.startInitInterval(() => {
|
/* 页面初始化后需要执行的代码在这边调用 */
|
})
|
},
|
onUnload() {
|
this.clearInitInterval()
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.bottom-btns-row {
|
display: flex;
|
padding: 10rpx 0;
|
background-color: #fff;
|
|
.btn-frame {
|
box-sizing: border-box;
|
}
|
|
.left-btn-frame {
|
width: 30%;
|
padding-left: 20rpx;
|
padding-right: 8rpx;
|
}
|
|
.right-btn-frame {
|
flex: 1;
|
padding-right: 20rpx;
|
padding-left: 8rpx;
|
}
|
|
.u-button {
|
border: 2px solid #F08202;
|
}
|
}
|
|
.barList {
|
background: #eee;
|
}
|
</style>
|
