提交

MrShi

2025-04-23 c8b32b8bca79a116cfab70eb8c389907b664c9ca

 h5/pages/workOrder/workOrder.vue

@@ -1,19 +1,381 @@
<template>
   <view>
		
   <view class="report">
      <view class="report_search">
         <view class="report_search_row" @click="show = true">
            <text>{{type ? type : '类型'}}</text>
            <u-icon name="arrow-down-fill" color="#666666" size="13"></u-icon>
         </view>
         <view class="report_search_row" @click="show1 = true">
            <text>{{status ? status : '解决情况'}}</text>
            <u-icon name="arrow-down-fill" color="#666666" size="13"></u-icon>
         </view>
         <view class="report_search_row" @click="$refs.pengTree._show()" v-if="['3'].includes(typeId)">
            <text>{{localtionId ? locationName : '发生地点'}}</text>
            <u-icon name="arrow-down-fill" color="#666666" size="13"></u-icon>
         </view>
         <view class="report_search_row" @click="$refs.pengTree1._show()" v-if="['1'].includes(typeId)">
            <text>{{localtionId ? locationName : '位置'}}</text>
            <u-icon name="arrow-down-fill" color="#666666" size="13"></u-icon>
         </view>
      </view>
      <view class="report_list">
         <view class="report_list_row" v-for="(item, index) in list" :key="index" @click="jump(item)">
            <view class="report_list_row_icon">
               <image src="/static/tabbar/nav_gongdan_sel@2x.png" mode="widthFix"></image>
            </view>
            <view class="report_list_row_info" v-if="[0].includes(item.type)">
               <text>{{titleType(item.type)}}</text>
               <text>{{userType(item.memberType)}}-{{item.memberNames}} {{item.happenTime.substring(0, 16)}}/{{item.locationName}}/{{item.typeName}}</text>
               <text>{{item.submitDate.substring(0, 16)}}</text>
            </view>
            <view class="report_list_row_info" v-else-if="[3].includes(item.type)">
               <text>{{titleType(item.type)}}</text>
               <text>{{item.happenTime.substring(0, 16)}}/{{item.locationName}}/{{item.typeName}}</text>
               <text>{{item.submitDate.substring(0, 16)}}</text>
            </view>
            <view class="report_list_row_info1" v-else>
               <text>DCA</text>
               <text>{{item.typeName || '-'}}/{{item.categoryName || '-'}}</text>
               <text>符合：{{item.dcaYesNum}} 不符合：{{item.dcaNoNum}}</text>
               <text>{{item.createDate.substring(0, 16)}}</text>
            </view>
            <view class="report_list_row_dian success" v-if="[3,4,5].includes(item.status)"></view>
            <view class="report_list_row_dian error" v-else-if="[0,1,2].includes(item.status)"></view>
         </view>
      </view>
      <!-- 无数据 -->
      <u-loadmore :line="true" status="nomore" v-if="!search.next"></u-loadmore>
      <!-- 类型 -->
      <u-picker :show="show" keyName="label" immediateChange :columns="columns" @confirm="confirmType" @cancel="show = false"></u-picker>
      <!-- 解决情况 -->
      <u-picker :show="show1" keyName="label" immediateChange :columns="columns1" @confirm="confirmStatus" @cancel="show1 = false"></u-picker>
      <!-- 发生地点 -->
      <peng-tree
         ref="pengTree"
         :range="address"
         idKey="id"
         :selectParent="false"
         nameKey="name"
         :multiple="false"
         title="选择地点"
         @confirm="selectAddress"
         @cancel="$refs.pengTree._hide()">
      </peng-tree>
      <!-- 位置 -->
      <peng-tree
         ref="pengTree1"
         :range="address1"
         idKey="id"
         :selectParent="false"
         nameKey="name"
         :multiple="false"
         title="位置"
         @confirm="selectAddress1"
         @cancel="$refs.pengTree._hide()">
      </peng-tree>
   </view>
</template>

<script>
   import { mapState } from 'vuex'
   import pengTree from '@/uni_modules/peng-tree/peng-tree/peng-tree.vue'
   export default {
      components: { pengTree },
      computed: {
         ...mapState(['userInfo'])
      },
      data() {
         return {
				
            show: false,
            show1: false,
            show2: false,
            type: '',
            typeId: '',
            status: '',
            statusId: '',
            locationName: '',
            localtionId: '',
            columns: [
               [
                  { label: '全部', id: '' },
                  { label: 'DCA', id: '1' },
                  { label: '跌绊滑风险上报', id: '3' },
                  { label: 'SHE事件上报', id: '0' }
               ]
            ],
            columns1: [
               [
                  { label: '全部', id: '' },
                  { label: '未解决', id: '0' },
                  { label: '已解决', id: '1' }
               ]
            ],
            search: {
               page: 1,
               next: true
            },
            list: [],
            address: [],
            address1: []
         };
      },
      onLoad() {
         this.getLocation()
         this.getLocation1()
      },
      onShow() {
         this.$nextTick(() => {
            this.$refs.pengTree._hide()
            this.$refs.pengTree1._hide()
         })
         this.show = false
         this.show1 = false
         this.search.page = 1
         this.search.next = true
         this.list = []
         this.getList()
      },
      onReachBottom() {
         this.getList()
      },
      methods: {
         // 选择发生地点
         selectAddress(e) {
            this.localtionId = e[0].id
            this.locationName = e[0].name
            this.search.page = 1
            this.search.next = true
            this.list = []
            this.getList()
            this.$refs.pengTree._hide()
         },
         // 位置
         selectAddress1(e) {
            this.localtionId = e[0].id
            this.locationName = e[0].name
            this.search.page = 1
            this.search.next = true
            this.list = []
            this.getList()
            this.$refs.pengTree1._hide()
         },
         // 获取发生地点树
         async getLocation() {
            let res = await this.$u.api.categoryTree({ categoryType: 2 })
            if (res.code === 200) {
               res.data.unshift({ name: '全部', id: '', childList: [] })
               this.address = res.data
            }
         },
         // 获取位置树
         async getLocation1() {
            let res = await this.$u.api.categoryTree({ categoryType: 3 })
            if (res.code === 200) {
               res.data.unshift({ name: '全部', id: '', childList: [] })
               this.address1 = res.data
            }
         },
         getList() {
            if (!this.search.next) return
            this.$u.api.page({
               capacity: 10,
               page: this.search.page,
               model: {
                  myWorkOrder: 1,
                  type: this.typeId,
                  dealStatus: this.statusId,
                  localtionId: this.localtionId
               }
            }).then(res => {
               if (res.code === 200) {
                  this.list = [...this.list, ...res.data.records]
                  if (this.list.length === res.data.total) {
                     this.search.next = false
                  }
                  this.search.page++
               }
            })
         },
         // 切换类型
         confirmType(e) {
            this.type = e.value[0].label
            this.typeId = e.value[0].id
				
            this.localtionId = ''
            this.locationName = ''
            this.status = ''
            this.statusId = ''
            this.search.page = 1
            this.search.next = true
            this.list = []
            this.getList()
            this.show = false
         },
         confirmStatus(e) {
            this.status = e.value[0].label
            this.statusId = e.value[0].id
            this.search.page = 1
            this.search.next = true
            this.list = []
            this.getList()
            this.show1 = false
         },
         // 跳转详情
         jump(item) {
            if (item.type === 0) {
               uni.navigateTo({
                  url: `/pages/details_she/details_she?id=${item.id}`
               })
            } else if (item.type === 3) {
               uni.navigateTo({
                  url: `/pages/workOrder_she/workOrder_she?id=${item.id}`
               })
            } else if (item.type === 1) {
               uni.navigateTo({
                  url: `/pages/details_dca/details_dca?id=${item.id}&isShow=true`
               })
            }
         },
         userType(type) {
            if (type === 0) {
               return '本人'
            } else if (type === 1) {
               return '同事'
            } else if (type === 2) {
               return '供应商'
            }
         },
         titleType(type) {
            if (type === 0) {
               return 'SHE事件上报'
            } else if (type === 3) {
               return '跌绊滑事件上报'
            }
         }
      }
   }
</script>

<style lang="scss">

   .report {
      width: 100%;
      .report_search {
         width: 100%;
         height: 100rpx;
         display: flex;
         align-items: center;
         padding: 0 30rpx;
         box-sizing: border-box;
         border-bottom: 1rpx solid #ececec;
         background-color: #ffffff;
         position: sticky;
         top: 0;
         left: 0;
         z-index: 9;
         .report_search_row {
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            text {
               font-size: 28rpx;
               color: #222222;
               margin-right: 8rpx;
            }
         }
      }
      .report_list {
         width: 100%;
         display: flex;
         flex-direction: column;
         .report_list_row {
            width: 100%;
            padding: 34rpx 36rpx;
            box-sizing: border-box;
            border-bottom: 1rpx solid #ececec;
            display: flex;
            align-items: center;
            &:last-child {
               border: none;
            }
            .report_list_row_dian {
               flex-shrink: 0;
               width: 16rpx;
               height: 16rpx;
               border-radius: 50%;
               margin-left: 30rpx;
            }
            .success {
               background-color: rgba(52,199,88,1);
            }
            .error {
               background-color: red;
            }
            .report_list_row_icon {
               flex-shrink: 0;
               width: 56rpx;
               height: 56rpx;
               margin-right: 20rpx;
               image {
                  width: 100%;
                  height: 100%;
               }
            }
            .report_list_row_info {
               flex: 1;
               display: flex;
               flex-direction: column;
               text {
                  &:nth-child(1) {
                     font-size: 28rpx;
                     color: #222222;
                     font-weight: 600;
                  }
                  &:nth-child(2) {
                     font-size: 24rpx;
                     color: #666666;
                     font-weight: 400;
                     margin: 6rpx 0;
                  }
                  &:nth-child(3) {
                     font-size: 24rpx;
                     color: #999999;
                     font-weight: 400;
                  }
               }
            }
            .report_list_row_info1 {
               flex: 1;
               display: flex;
               flex-direction: column;
               text {
                  &:nth-child(1) {
                     font-size: 28rpx;
                     color: #222222;
                     font-weight: 600;
                  }
                  &:nth-child(2) {
                     font-size: 24rpx;
                     color: #666666;
                     font-weight: 400;
                     margin-top: 6rpx;
                  }
                  &:nth-child(3) {
                     color: rgba(16,16,16,1);
                     font-size: 24rpx;
                     font-weight: 400;
                     margin-top: 6rpx;
                  }
                  &:nth-child(4) {
                     font-size: 24rpx;
                     color: #999999;
                     font-weight: 400;
                     margin-top: 6rpx;
                  }
               }
            }
         }
      }
   }
</style>