#

whycq

2023-11-22 3913b3c5c8cde03f8c92d1c738d28c4a9bae7e55

 pages/business/goBusiness/goBusiness.vue

@@ -1,165 +1,251 @@
<template>
   <view>
      <view class="card">
         <!-- head -->
         <view class="card-head flex">
            <view class="card-head-title">基本信息</view>
         </view>
         <!-- body -->
         <view class="card-body flex-column">
            <view class="flex"><text style="color: red;">*</text>出差事由</view>
            <view class="flex">
               <view style="flex: 1;">
                  <input type="text" placeholder="请输入出差事由" :placeholder-style="placeholderStyle" v-model="form.businessTripReasons">
      <view class="status_bar">
         <!-- 这里是状态栏 -->
      </view>
      <uni-nav-bar left-icon="left" title="出差" @clickLeft="back" @clickRight="scan" :fixed="true" :border="false"
         rightWidth="160rpx" leftWidth="160rpx">
         <block slot="right">
            <view class="city">
               <view>
                  <text class="uni-nav-bar-text">{{user.username}}</text>
               </view>
               <uni-icons type="arrowdown" color="#333333" size="20" />
            </view>
         </block>
      </uni-nav-bar>
		
      <!-- 搜索框 -->
      <view class="search-bg">
         <u-search placeholder="输入" v-model="keyword" :clearabled="true" @custom="search()" @search="search()"></u-search>
      </view>

      <view class="main-box">
         <view class="box" v-for="item in list" @click="goDetl(item)">
            <view style="display: flex;">
               <view class="box-title" style="flex: 1;">{{item.userId$}}提交的出差申请</view>
               <view class="box-time">{{item.createTime$.substring(0,10)}}</view>
            </view>
            <view class="box-item">出差事由:{{item.businessTripReasons}}</view>
            <view class="box-item">出差天数:{{item.businessTripDays$}}</view>
            <view style="display: flex;">
               <view class="box-item" style="flex: 1;">同行人:{{item.businessPeers}}</view>
               <view class="box-settle" :style="item.bgcolor">{{item.settle$}}</view>
            </view>
         </view>
      </view>
      
      <view class="card">
         <!-- head -->
         <view class="card-head flex">
            <view class="card-head-title">行程信息</view>
         </view>
         <!-- body -->
         <view class="card-body flex-column">
            <view class="flex"><text style="color: red;">*</text>交通工具</view>
            <view class="flex">
               <view style="flex: 1;"><input type="text" placeholder="请选择交通工具" :placeholder-style="placeholderStyle"></view>
               <view ><uni-icons type="right" color="#000" ></uni-icons></view>
            </view>
				
         </view>
         <view class="card-body flex-column">
            <view class="flex"><text style="color: red;">*</text>单程往返</view>
            <view class="flex">
               <view style="flex: 1;"><input type="text" placeholder="请选择单程往返"></view>
               <view ><uni-icons type="right" color="#000" ></uni-icons></view>
            </view>
				
         </view>
         <view class="card-body flex-column">
            <view class="flex"><text style="color: red;">*</text>车牌号</view>
            <view class="flex">
               <view style="flex: 1;"><input type="text" placeholder="请输入车牌号"></view>
               <view ><uni-icons type="right" color="#000" ></uni-icons></view>
            </view>
				
         </view>
         <view class="card-body flex-column">
            <view class="flex"><text style="color: red;">*</text>行程明细及公里数</view>
            <view class="flex">
               <view style="flex: 1;"><input type="text" placeholder="请输入行程明细及公里数"></view>
               <view ><uni-icons type="right" color="#000" ></uni-icons></view>
            </view>
				
         </view>
         <view class="card-body flex-column">
            <view class="flex"><text style="color: red;">*</text>出发地</view>
            <view class="flex">
               <view style="flex: 1;"><input type="text" placeholder="请选择出发地"></view>
               <view ><uni-icons type="right" color="#000" ></uni-icons></view>
            </view>
				
         </view>
         <view class="card-body flex-column">
            <view class="flex"><text style="color: red;">*</text>出发地详细地址</view>
            <view class="flex">
               <view style="flex: 1;"><input type="text" placeholder="请输入出发地详细地址"></view>
               <view ><uni-icons type="right" color="#000" ></uni-icons></view>
            </view>
				
         </view>
         <view class="card-body flex-column">
            <view class="flex"><text style="color: red;">*</text>目的地</view>
            <view class="flex">
               <view style="flex: 1;"><input type="text" placeholder="请选择目的地"></view>
               <view ><uni-icons type="right" color="#000" ></uni-icons></view>
            </view>
				
         </view>
         <view class="card-body flex-column">
            <view class="flex"><text style="color: red;">*</text>目的地详细地址</view>
            <view class="flex">
               <view style="flex: 1;"><input type="text" placeholder="请输入目的地详细地址"></view>
               <view ><uni-icons type="right" color="#000" ></uni-icons></view>
            </view>
				
         </view>
      <u-empty v-if="true" icon="../../../static/image/emptyList.png" v-show="list.length <= 0" />
      <view class="fxbtn">
         <uni-icons type="plusempty" color="#fff" @click="add()" ></uni-icons>
      </view>
		
      <view class="card">
         <!-- head -->
         <view class="card-head flex">
            <view class="card-head-title">日期信息</view>
         </view>
         <!-- body -->
         <view class="card-body flex-column">
            <view class="flex"><text style="color: red;">*</text>出发日期</view>
            <view class="flex">
               <view style="flex: 1;"><input type="text" placeholder="请输入出发日期"></view>
               <!-- <view ><uni-icons type="right" color="#000" ></uni-icons></view> -->
            </view>
         </view>
         <view class="card-body flex-column">
            <view class="flex"><text style="color: red;">*</text>出发时辰</view>
            <view class="flex">
               <view style="flex: 1;"><input type="text" placeholder="请输入出发时辰"></view>
               <!-- <view ><uni-icons type="right" color="#000" ></uni-icons></view> -->
            </view>
         </view>
         <view class="card-body flex-column">
            <view class="flex"><text style="color: red;">*</text>结束日期</view>
            <view class="flex">
               <view style="flex: 1;"><input type="text" placeholder="请输入结束日期"></view>
               <!-- <view ><uni-icons type="right" color="#000" ></uni-icons></view> -->
            </view>
         </view>
         <view class="card-body flex-column">
            <view class="flex"><text style="color: red;">*</text>结束时辰</view>
            <view class="flex">
               <view style="flex: 1;"><input type="text" placeholder="请输入结束时辰"></view>
               <!-- <view ><uni-icons type="right" color="#000" ></uni-icons></view> -->
            </view>
         </view>
      </view>
      <view class="card">
         <!-- head -->
         <view class="card-head flex">
            <view class="card-head-title">其它信息</view>
         </view>
         <!-- body -->
         <view class="card-body flex-column">
            <view class="flex"><text style="color: red;">*</text>同行人</view>
            <view class="flex">
               <view style="flex: 1;"><input type="text" placeholder="请输入同行人"></view>
               <!-- <view ><uni-icons type="right" color="#000" ></uni-icons></view> -->
            </view>
         </view>
         <view class="card-body flex-column">
            <view class="flex"><text style="color: red;">*</text>备注</view>
            <view class="flex">
               <view style="flex: 1;"><input type="text" placeholder="请输入备注"></view>
               <!-- <view ><uni-icons type="right" color="#000" ></uni-icons></view> -->
            </view>
         </view>
      </view>

      <!-- 垫底 -->
      <view style="height: 120rpx;"></view>
   </view>
</template>

<script>
   import user from '@/pages/api/user/user.js'
   export default {
      data() {
         return {
				
            keyword: '',
            user: {
               username: '',
               id: 0,
               type: ''
            },
            falg: true,
            list: [{
                  businessTripReasons: '沟通立库事宜',
                  businessTransportation$: '交通工具',
                  businessStartAddr$: '出发地',
                  businessEndAddr$: '目的地',
                  businessStartTimeDay$: '出发日期',
                  businessEndTimeDay$: '结束日期',
                  businessDuration$: '出差时长',
                  businessTripDays$: '出差天数',
                  businessPeers: '同行人',
                  userId$: '申请人',
                  orderId: '跟踪项目',
                  updateTime$: '更新时间',
                  updateId$: '更新人员',
                  settle: 1,
                  settle$: '申请通过',
                  businessNotes: '出差备注',
                  createTime$: '2023-11-06 08:51:24',
                  bgcolor: 'color:#24ab59'
               },
            ]
         }
      },
      onShow() {
         let that = this
         uni.$on('isRefresh',function(data){
            that.user.username = data.title
            that.user.id = data.id
            that.user.type = data.key
            that.falg = false
         })
         setTimeout(()=> {
            this.getBusinessTrip()
         },50)
         if (this.falg) {
            this.getDetail()
         }
      },
      methods: {
			
         async getDetail() {
            let res = await user.getDetail()
            if (res.code === 200) {
               this.user.username = res.data.username
               this.user.id = res.data.id
            } else if (res.code === 403) {
               this.backLogin(res)
            }
         },
         goDetl(e) {
            uni.navigateTo({
               url: '/pages/business/goBusiness/goBusinessDetil',
               success: function(res) {
                  res.eventChannel.emit('busunessDetl', {
                     data: e
                  })
               }
            })
         },
         getBusinessTrip() {
            let _this = this
            let param = {curr:1,limit:16,dept_id: 0,user_id: 67}
            if (_this.user.type == 'user_id') {
               param = {curr:1,limit:16,user_id: _this.user.id}
            } else if(_this.user.type == 'dept_id') {
               param = {curr:1,limit:16,dept_id: _this.user.id}
            } else {
               param = {curr:1,limit:16}
            }
            uni.request({
               url: `${_this.baseUrl}/businessTrip/list/auth`,
               header: {
                  'token': uni.getStorageSync('token')
               },
               data: param,
               success(res) {
                  res = res.data
                  if (res.code === 200) {
                     for (let k of res.data.records) {
                        if (k.settle == 2) {
                           k['bgcolor'] = 'color: #12d489'
                        } else if (k.settle == 1) {
                           k['bgcolor'] = 'color: #ffbd67'
                        }
                     }
                     _this.list = res.data.records
                  }
                  // _this.list = 
               }
            })
         },
         // 出差申请
         add() {
            uni.navigateTo({
               url: '/pages/business/goBusiness/addgoBusiness',
               success: function(res) {
                  res.eventChannel.emit('goBusinessDel', {
                     data: 'add'
                  })
               }
            })
         },
         back() {
            uni.navigateBack({})
         },
         scan() {
            uni.navigateTo({
               url: '/pages/authority/authority'
            })
         },
      }
   }
</script>

<style>
   .flex-row {
      display: flex;
   }

   .flex-col {
      display: flex;
      flex-direction: column;
   }

   .main-box {
      /* margin: 16rpx; */
      /* background-color: #FFF; */
      border-radius: 20rpx;
      padding: 8rpx;
   }

   .box {
      margin: 16rpx 8rpx;
      /* height: 200px; */
      box-shadow: 0 0 5px #dddddd;
      background-color: #FFF;
      padding: 16rpx 32rpx;
      position: relative;
      border-radius: 20rpx;
      font-size: 24rpx;
      color: #bdbdbd;
   }

   .box-flag {
      position: absolute;
      right: 0;
      top: 10rpx;
      background-color: #74B9E9;
      padding: 6rpx;
      font-size: 10rpx;
      color: #FFF;
   }

   .box-time {
      color: #bdbdbd;
   }

   .box-settle {
      font-size: 26rpx;
      /* font-weight: bold; */
   }

   .box-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #000;
   }

   .box-single-row {}
</style>




list: [
{
businessTripReasons: '沟通立库事宜',
businessTransportation$: '交通工具',
businessStartAddr$: '出发地',
businessEndAddr$: '目的地',
businessStartTimeDay$: '出发日期',
businessEndTimeDay$: '结束日期',
businessDuration$: '出差时长',
businessTripDays$: '出差天数',
businessPeers: '同行人',
userId$: '申请人',
orderId: '跟踪项目',
updateTime$: '更新时间',
updateId$: '更新人员',
settle$: '进度',
businessNotes: '出差备注',
},
]