| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <view class="content"> |
| | | <div :class="{ 'content_top': status }" class="content_search"> |
| | | <v-Search @searchInput="searchInput" @submit="submit" @reset="reset" :isShow="true" |
| | | placeholder="æç´¢å·¥åç¼ç /å·¥åºåç§°"> |
| | | <template v-slot:content> |
| | | <div class="Search_item"> |
| | | <div class="Search_item_label">è®¡åæ¥æ</div> |
| | | <div class="Search_item_content" @click="isOpenDate=true"> |
| | | <div class="Search_item_content_a" :style="form.startDate ? 'color: #000;' : ''"> |
| | | {{ form.startDate ? form.startDate : 'å¼å§æ¥æ'}} |
| | | </div> |
| | | <span>-</span> |
| | | <div class="Search_item_content_a" :style="form.endDate ? 'color: #000;' : ''"> |
| | | {{ form.endDate ? form.endDate : 'ç»ææ¥æ'}} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | </v-Search> |
| | | <div class="content_search_x"></div> |
| | | <v-LableSelection :TagList="tagList" :isShow="true" @change="clickTag"></v-LableSelection> |
| | | </div> |
| | | <div class="content_total">å
±{{page.total}}æ¡æ°æ®</div> |
| | | <div class="content_list"> |
| | | <scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="refreshing" |
| | | @scrolltolower="loadMore" @refresherrefresh="onRefresh" :style="{height: height}"> |
| | | <div class="content_list_item" v-for="(item, i) in list" :key="i" @click="jump(item)"> |
| | | <div class="content_list_item_top"> |
| | | <div class="content_list_item_top_left"> |
| | | <span v-if="item.mmodel">{{item.mmodel.name}} | {{item.procedureName}}</span> |
| | | <div class="content_list_item_top_left_tag" v-if="item.urgent">ä¼å
{{item.urgent}}</div> |
| | | <div class="content_list_item_top_left_tagW" v-if="item.paused === 1">å</div> |
| | | </div> |
| | | <div class="content_list_item_top_right"> |
| | | <span class="yellow" v-if="item.status === 0">å·²å建</span> |
| | | <span class="green" v-if="item.status === 1">已夿</span> |
| | | <span v-if="item.status === 2">å·²å®å·¥</span> |
| | | <span class="purple" v-if="item.status === 3">å·²æ£éª</span> |
| | | <span v-if="item.status === 4">å·²æ¥å·¥</span> |
| | | <span v-if="item.status === 5">å·²å
¥åº</span> |
| | | <span v-if="item.status === 6">已忶</span> |
| | | </div> |
| | | </div> |
| | | <span>å·¥åç¼ç : {{item.code}}</span> |
| | | <div class="content_list_item_content"> |
| | | <div class="content_list_item_content_item"> |
| | | <div class="content_list_item_content_item_label">ç©æç¼ç ï¼</div> |
| | | <div class="content_list_item_content_item_nr" v-if="item.mmodel">{{item.mmodel.code}} |
| | | </div> |
| | | </div> |
| | | <div class="content_list_item_content_item"> |
| | | <div class="content_list_item_content_item_label">计åå¼å·¥ï¼</div> |
| | | <div class="content_list_item_content_item_nr">{{item.planDate}}</div> |
| | | </div> |
| | | <div class="content_list_item_content_item"> |
| | | <div class="content_list_item_content_item_label">çäº§æ¹æ¬¡ï¼</div> |
| | | <div class="content_list_item_content_item_nr">{{item.batch}}</div> |
| | | </div> |
| | | <div class="content_list_item_content_item"> |
| | | <div class="content_list_item_content_item_label">è®¡åæ°éï¼</div> |
| | | <div class="content_list_item_content_item_nr" v-if="item.umodel"> |
| | | {{item.planNum}}{{item.umodel.name}} |
| | | </div> |
| | | </div> |
| | | <div class="content_list_item_content_item"> |
| | | <div class="content_list_item_content_item_label">ç产设å¤ï¼</div> |
| | | <div class="content_list_item_content_item_nr" v-if="item.pgmodel">{{item.pgmodel.name}} |
| | | </div> |
| | | </div> |
| | | <div class="content_list_item_content_item" v-if="item.status === 5"> |
| | | <div class="content_list_item_content_item_label">å®å·¥æ°éï¼</div> |
| | | <div class="content_list_item_content_item_nr">{{item.proNum}}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </scroll-view> |
| | | </div> |
| | | <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> |
| | | <van-list v-model:loading="loading" :finished="finished" finished-text="æ²¡ææ´å¤äº~" @load="onLoad"> |
| | | </van-list> |
| | | </van-pull-refresh> --> |
| | | |
| | | <l-calendar :lunar="false" v-model="isOpenDate" @change="onConfirm" :isRange="true" activeBgColor="#305ED5" |
| | | rangeColor="#305ED5" rangeBgColor="rgba(48, 80, 213, 0.1)"></l-calendar> |
| | | |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import vSearch from '@/components/Search.vue' |
| | | import vLableSelection from '@/components/LabelSelection.vue' |
| | | import { |
| | | gsdate |
| | | } from '@/util/utils' |
| | | import { |
| | | getList, |
| | | pageCount |
| | | } from '@/util/api/WorkOrderAPI' |
| | | export default { |
| | | components: { |
| | | vSearch, |
| | | vLableSelection |
| | | }, |
| | | data() { |
| | | return { |
| | | height: '', |
| | | status: true, |
| | | isOpenDate: false, |
| | | refreshing: false, |
| | | // tagList: [1,2,3], |
| | | tagList: [{ |
| | | id: [2,3,7], |
| | | name: 'ç产ä¸', |
| | | num: '' |
| | | }], |
| | | minDate: '2021-01-01', |
| | | maxDate: '', |
| | | form: { |
| | | startDate: '', |
| | | endDate: '', |
| | | mixParam: '', |
| | | statusList: [] |
| | | }, |
| | | list: [], |
| | | page: { |
| | | capacity: 10, |
| | | index: 1, |
| | | total: 0 |
| | | } |
| | | }; |
| | | }, |
| | | onLoad(opt) { |
| | | this.$nextTick(() => { |
| | | uni.createSelectorQuery().in(this).select('.content_search').boundingClientRect((rect) => { |
| | | this.height = `calc(100vh - ${rect.height + 80}px)` |
| | | }).exec() |
| | | }) |
| | | if (opt.type == '1') { |
| | | this.tagList = [{ |
| | | id: [0, 1], |
| | | name: 'å¾
ç产', |
| | | num: '' |
| | | }, |
| | | { |
| | | id: [2, 3, 7], |
| | | name: 'ç产ä¸', |
| | | num: '' |
| | | } |
| | | ] |
| | | } else { |
| | | this.tagList = [{ |
| | | id: [2, 3, 7], |
| | | name: 'ç产ä¸', |
| | | num: '' |
| | | }] |
| | | } |
| | | this.maxDate = gsdate(new Date(`${new Date().getFullYear() + 1}-12-30`)) |
| | | this.pageCounts() |
| | | this.loadData() |
| | | }, |
| | | methods: { |
| | | reset() { |
| | | this.form.startDate = '' |
| | | this.form.endDate = '' |
| | | this.search() |
| | | }, |
| | | searchInput(val) { |
| | | this.form.mixParam = val; |
| | | this.search() |
| | | }, |
| | | clickTag(v) { |
| | | this.form.statusList = v |
| | | this.search() |
| | | }, |
| | | submit() { |
| | | this.search() |
| | | }, |
| | | onConfirm(value) { |
| | | this.form.startDate = value.startDate |
| | | this.form.endDate = value.endDate |
| | | this.isOpenDate = false |
| | | }, |
| | | onRefresh() { |
| | | if (this.refreshing) return |
| | | this.refreshing = true; |
| | | this.search() |
| | | }, |
| | | loadMore() { |
| | | this.page.page += 1 |
| | | this.loadData() |
| | | }, |
| | | search() { |
| | | this.page.page = 1 |
| | | this.loadData() |
| | | }, |
| | | loadData() { |
| | | getList({ |
| | | ...this.page, |
| | | model: { |
| | | ...this.form, |
| | | statusList: this.form.statusList.length === 0 ? this.tagList[0].id : this.form.statusList |
| | | } |
| | | }) |
| | | .then(res => { |
| | | let { |
| | | data |
| | | } = res |
| | | if (data.page == 1) { |
| | | this.list = [] |
| | | } |
| | | this.list.push(...data.records) |
| | | this.page.total = data.total |
| | | this.page.page = data.page |
| | | }) |
| | | .catch(err => { |
| | | |
| | | }) |
| | | .finally(() => { |
| | | this.refreshing = false |
| | | }) |
| | | }, |
| | | pageCounts() { |
| | | pageCount({}).then(res => { |
| | | if (res.code === 200) { |
| | | this.tagList.forEach(item => { |
| | | if (item.name == 'å¾
ç产') { |
| | | item.num = res.data.startNum |
| | | } |
| | | if (item.name == 'ç产ä¸') { |
| | | item.num = res.data.ingNum |
| | | } |
| | | if (item.name == '已宿') { |
| | | item.num = res.data.endNum |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | jump(item) { |
| | | uni.$emit('workOrder', item) |
| | | uni.navigateBack() |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .content { |
| | | .content_code { |
| | | position: fixed; |
| | | right: 30rpx; |
| | | bottom: 100rpx; |
| | | |
| | | img { |
| | | width: 138rpx; |
| | | height: 138rpx; |
| | | } |
| | | } |
| | | |
| | | .content_top { |
| | | top: 0 !important; |
| | | } |
| | | |
| | | .content_search { |
| | | padding: 30rpx; |
| | | background: white; |
| | | position: sticky; |
| | | top: 88rpx; |
| | | z-index: 9; |
| | | |
| | | .Search_item { |
| | | margin-bottom: 40rpx; |
| | | |
| | | .Search_item_label { |
| | | font-size: 30rpx; |
| | | font-weight: 500; |
| | | color: #222222; |
| | | } |
| | | |
| | | .Search_item_content { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-top: 30rpx; |
| | | |
| | | .tag { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | align-items: center; |
| | | |
| | | .tag_active { |
| | | background: $nav-color !important; |
| | | color: #ffffff !important; |
| | | } |
| | | |
| | | .tag_item { |
| | | width: 156rpx; |
| | | height: 70rpx; |
| | | box-sizing: border-box; |
| | | background: #F2F2F2; |
| | | border-radius: 8rpx; |
| | | font-size: 26rpx; |
| | | font-weight: 400; |
| | | color: #333333; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | margin-right: 22rpx; |
| | | margin-bottom: 22rpx; |
| | | |
| | | &:nth-child(4n) { |
| | | margin-right: 0; |
| | | } |
| | | } |
| | | } |
| | | |
| | | span { |
| | | font-size: 26rpx; |
| | | font-weight: 400; |
| | | color: #333333; |
| | | } |
| | | |
| | | .Search_item_content_a { |
| | | width: 308rpx; |
| | | height: 70rpx; |
| | | background: #F7F7F7; |
| | | border-radius: 8rpx; |
| | | border: 1rpx solid #EEEEEE; |
| | | font-size: 26rpx; |
| | | font-weight: 400; |
| | | color: #B2B2B2; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .content_search_x { |
| | | height: 24rpx; |
| | | } |
| | | } |
| | | |
| | | .content_total { |
| | | padding: 24rpx 30rpx; |
| | | background: #F7F7F7; |
| | | font-size: 24rpx; |
| | | font-weight: 400; |
| | | color: #666666; |
| | | } |
| | | |
| | | .content_list { |
| | | width: 100%; |
| | | // height: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | .content_list_item { |
| | | padding: 30rpx; |
| | | display: flex; |
| | | flex-direction: column; |
| | | border-bottom: 1rpx solid #ececec; |
| | | background: white; |
| | | |
| | | span { |
| | | color: #5a5a5a; |
| | | margin-top: 15rpx; |
| | | } |
| | | |
| | | .content_list_item_top { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | |
| | | .content_list_item_top_left { |
| | | display: flex; |
| | | align-items: center; |
| | | width: 80%; |
| | | |
| | | span { |
| | | font-size: 32rpx; |
| | | font-weight: 500; |
| | | color: #333333; |
| | | overflow: hidden; |
| | | white-space: nowrap; |
| | | text-overflow: ellipsis; |
| | | -o-text-overflow: ellipsis; |
| | | } |
| | | |
| | | .content_list_item_top_left_tagW { |
| | | margin-top: 14rpx; |
| | | flex-shrink: 0; |
| | | box-sizing: border-box; |
| | | padding: 5rpx 10rpx; |
| | | background: $nav-stateColor5; |
| | | border-radius: 8rpx; |
| | | font-size: 22rpx; |
| | | font-weight: 400; |
| | | color: #FFFFFF; |
| | | margin-left: 16rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .content_list_item_top_left_tag { |
| | | margin-top: 14rpx; |
| | | flex-shrink: 0; |
| | | padding: 5rpx 10rpx; |
| | | background: $nav-stateColor4; |
| | | border-radius: 8rpx; |
| | | font-size: 22rpx; |
| | | font-weight: 400; |
| | | color: #FFFFFF; |
| | | margin-left: 16rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | } |
| | | |
| | | .content_list_item_top_right { |
| | | font-size: 26rpx; |
| | | font-weight: 400; |
| | | color: #666666; |
| | | flex-shrink: 0; |
| | | |
| | | .purple { |
| | | color: $nav-color !important; |
| | | } |
| | | |
| | | .green { |
| | | color: $nav-stateColor6 !important; |
| | | } |
| | | |
| | | .yellow { |
| | | color: $nav-stateColor1 !important; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .content_list_item_content { |
| | | padding: 24rpx 30rpx; |
| | | background: #F7F7F7; |
| | | border-radius: 16rpx; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | justify-content: space-between; |
| | | margin-top: 32rpx; |
| | | |
| | | .content_list_item_content_item { |
| | | width: 50%; |
| | | display: flex; |
| | | margin-top: 24rpx; |
| | | |
| | | &:nth-child(1) { |
| | | margin-top: 0 !important; |
| | | } |
| | | |
| | | &:nth-child(2) { |
| | | margin-top: 0 !important; |
| | | } |
| | | |
| | | .content_list_item_content_item_label { |
| | | font-size: 24rpx; |
| | | font-weight: 400; |
| | | color: #666666; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | .content_list_item_content_item_nr { |
| | | font-size: 24rpx; |
| | | font-weight: 400; |
| | | color: #222222; |
| | | margin-right: 10rpx; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |