| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <view class="content p30 bbox"> |
| | | <div class="content_search"> |
| | | <v-Search @searchInput="searchForm.mixParam" @submit="search" @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="searchForm.startDate ? 'color: #000;' : ''"> |
| | | {{ searchForm.startDate ? searchForm.startDate : 'å¼å§æ¥æ'}} |
| | | </div> |
| | | <span>-</span> |
| | | <div class="Search_item_content_a" :style="searchForm.endDate ? 'color: #000;' : ''"> |
| | | {{ searchForm.endDate ? searchForm.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 mt20">å
±{{page.total}}æ¡æ°æ®</div> |
| | | <view class="fx1"> |
| | | <scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" @scrolltolower="getLists" |
| | | @refresherrefresh="onRefresh"> |
| | | <div class="content_list"> |
| | | <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 class="f32" 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_tag backgreen" v-if="item.type === 0">æ£å¸¸</div> |
| | | <div class="content_list_item_top_left_tag backyellow" v-if="item.type === 2">è¿å·¥è¿ä¿®</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> |
| | | <span class="green" v-if="item.status === 7">è¿è¡ä¸</span> |
| | | </div> |
| | | </div> |
| | | <span class="f24">å·¥åç¼å·: {{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.code}} |
| | | </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> |
| | | </div> |
| | | </scroll-view> |
| | | </view> |
| | | |
| | | <!-- <u-calendar :show="isOpenDate" mode="range" @confirm="dateConfirm"></u-calendar> --> |
| | | <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 { |
| | | getList, |
| | | pageCount |
| | | } from '@/util/api/WorkOrderAPI.js' |
| | | import { gsdate } from '@/util/utils.js' |
| | | export default { |
| | | components: { |
| | | vSearch, |
| | | vLableSelection |
| | | }, |
| | | data() { |
| | | return { |
| | | isOpenDate: false, |
| | | tagList: [{ |
| | | id: [0, 1], |
| | | name: 'å¾
ç产', |
| | | num: '0' |
| | | }, |
| | | { |
| | | id: [2, 3, 7], |
| | | name: 'ç产ä¸', |
| | | num: '0' |
| | | }, |
| | | { |
| | | id: [4, 5, 6], |
| | | name: '已宿', |
| | | num: '0' |
| | | } |
| | | ], |
| | | triggered: false, |
| | | _freshing: false, |
| | | searchForm: { |
| | | mixParam: '', |
| | | startDate: '', |
| | | endDate: gsdate(new Date()), |
| | | statusList: [] |
| | | }, |
| | | page: { |
| | | total: 0, |
| | | capacity: 10, |
| | | page: 1 |
| | | }, |
| | | list: [], |
| | | } |
| | | }, |
| | | onLoad() { |
| | | this.pageCounts() |
| | | this.loadData() |
| | | }, |
| | | methods: { |
| | | reset() { |
| | | this.searchForm = { |
| | | mixParam: '', |
| | | startDate: '', |
| | | endDate: gsdate(new Date()), |
| | | statusList: [] |
| | | } |
| | | this.page.page = 1 |
| | | this.pageCounts() |
| | | this.loadData() |
| | | }, |
| | | loadData() { |
| | | |
| | | getList({ |
| | | ...this.page, |
| | | model: { |
| | | ...this.searchForm, |
| | | endDate: this.searchForm.endDate ? (this.searchForm.endDate + ' 23:59:59') : '', |
| | | statusList: this.searchForm.statusList.length === 0 ? this.tagList[0].id : this.searchForm |
| | | .statusList |
| | | } |
| | | }) |
| | | .then(res => { |
| | | let { |
| | | data |
| | | } = res |
| | | |
| | | if (data.page == 1) { |
| | | this.list = [] |
| | | } |
| | | this.page.total = data.total |
| | | this.page.page = data.page |
| | | this.list.push(...data.records) |
| | | this.triggered = false |
| | | }) |
| | | }, |
| | | pageCounts() { |
| | | pageCount({ |
| | | ...this.searchForm, |
| | | endDate: this.searchForm.endDate || '', |
| | | statusList: this.searchForm.statusList.length === 0 ? this.tagList[0].id : this.searchForm |
| | | .statusList |
| | | }).then(res => { |
| | | console.log(res); |
| | | if (res.code === 200) { |
| | | this.tagList[0].num = String(res.data.startNum) |
| | | this.tagList[1].num = String(res.data.ingNum) |
| | | this.tagList[2].num = String(res.data.endNum) |
| | | } |
| | | }) |
| | | }, |
| | | clickTag(v) { |
| | | this.searchForm.statusList = v |
| | | this.page.page = 1 |
| | | this.loadData() |
| | | }, |
| | | dateConfirm(v) { |
| | | this.isOpenDate = false |
| | | this.searchForm.startDate = v[0] |
| | | this.searchForm.endDate = v[v.length - 1] |
| | | }, |
| | | getLists() { |
| | | this.page.page += 1 |
| | | this.loadData() |
| | | }, |
| | | onRefresh() { |
| | | if (this.triggered) return |
| | | this.triggered = true; |
| | | this.page.page = 1 |
| | | this.loadData() |
| | | }, |
| | | search() { |
| | | this.page.page = 1 |
| | | this.loadData() |
| | | }, |
| | | jump(item) { |
| | | // uni.navigateTo({ |
| | | // url: `/pages_adjust/pages/OrderDetail/OrderDetail?id=${item.id}` |
| | | // }) |
| | | if (item.status === 4 || item.status === 6 || item.paused === 1) { |
| | | uni.navigateTo({ |
| | | url: `/pages_adjust/pages/OrderDetail/OrderDetail?id=${item.id}` |
| | | }) |
| | | } else { |
| | | uni.navigateTo({ |
| | | url: `/pages_adjust/pages/workOrderReporting/workOrderReporting?id=${item.id}` |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .content { |
| | | display: flex; |
| | | flex-direction: column; |
| | | height: 100vh; |
| | | .content_search { |
| | | background: white; |
| | | 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 { |
| | | background: white; |
| | | padding: 30rpx; |
| | | display: flex; |
| | | flex-direction: column; |
| | | border-bottom: 1rpx solid #ececec; |
| | | |
| | | 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: 25rpx; |
| | | |
| | | .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 { |
| | | flex: 1; |
| | | overflow: hidden; |
| | | white-space: nowrap; |
| | | text-overflow: ellipsis; |
| | | -o-text-overflow: ellipsis; |
| | | font-size: 24rpx; |
| | | font-weight: 400; |
| | | color: #222222; |
| | | margin-right: 10rpx; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |