crm12.6

src/views/ssbg/businessTrip/calendar.vue

@@ -1,8 +1,8 @@
 <script setup>
 import {ref} from 'vue'
-import { Sticky,Popup,Cascader } from 'vant';
+import { Sticky,Popup,Cascader  } from 'vant';
 import swiperCalendar from '../components/swiperCalendar.vue';
-import {apiSystemUsers} from '@/api/ssbg/api'
+import {apiSystemUsers,apiBusinessTripCalendar} from '@/api/ssbg/api'
 import moment from 'moment';
 import 'moment/dist/locale/zh-cn';
 import { useRoute } from 'vue-router';
@@ -23,9 +23,17 @@ const userFieldNames=ref({
 })
 let selectUserShow=ref(false)
 let selectUserValue=ref('')
+let lastSelectVal=''
 let userOpts=ref([])
 function onFinish(e){
-    console.log(e);
+
+    if(lastSelectVal!=selectUserValue.value){
+        lastSelectVal=e.value
+    }else{//点击的上次选中的人 则重置掉
+        selectUserValue.value=''
+        lastSelectVal=''
+    }
+    getInfo()
     selectUserShow.value=false
 }
 
@@ -56,6 +64,32 @@ function goToDay(){
 let selectDateVal=ref(moment().format('YYYY-MM-DD'))
 function datechangeHandle(e){
     selectDateVal.value=e
+    getInfo()
+}
+
+// 表单数据
+let listData=ref([])
+let loading=ref(false)
+function getInfo(){
+    loading.value=true
+    apiBusinessTripCalendar({
+        TripDate:selectDateVal.value,
+        AdminId:selectUserValue.value
+    }).then(res=>{
+        loading.value=false
+        if(res.code===200){
+            listData.value=res.data||[]
+        }
+    })
+}
+getInfo()
+
+// 显示详情
+let showDetail=ref(false)
+let detailInfo=ref(null)
+function handleShowDetail(item){
+    detailInfo.value=item
+    showDetail.value=true
 }
 
 </script>
@@ -68,14 +102,11 @@ function datechangeHandle(e){
             </div>
         </Sticky>
         <div class="top-date-box">{{moment(selectDateVal).format('MM/DD')}}({{moment(selectDateVal).format('ddd')}})</div>
+        <div class="empty-box" v-if="!loading&&listData.length==0">暂无数据</div>
         <div class="table-box">
-            <div class="item">
-                <div class="left">张三</div>
-                <div class="right">被及时（1缇娜）</div>
-            </div>
-            <div class="item">
-                <div class="left">张三</div>
-                <div class="right yellow-text">被及时（1缇娜）</div>
+            <div class="item" v-for="item in listData" :key="item.BusinessApplyId" @click="handleShowDetail(item)">
+                <div class="left">{{item.ApplyRealName}}({{item.GroupName}})</div>
+                <div :class="['right',item.Status=='待审批'?'yellow-text':'']">{{item.Province}}{{item.City}}（{{item.DayTotal}}天）</div>
             </div>
         </div>
         <div class="fix-bot-action">
@@ -111,6 +142,37 @@ function datechangeHandle(e){
             @finish="onFinish"
         />
     </Popup>
+
+    <!-- 详情 -->
+    <Popup 
+        v-model:show="showDetail" 
+        round 
+        position="center"
+    >
+        <div class="detail-wrap">
+            <div class="content">
+                <h2 class="title">出差详情</h2>
+                <div>{{moment(detailInfo.ArriveDate).format('MM.DD (ddd)')}}--{{moment(detailInfo.ReturnDate).format('MM.DD (ddd)')}}</div>
+                <div class="item-info">
+                    <span>申请人:</span>
+                    <span>{{detailInfo.ApplyRealName}}</span>
+                </div>
+                <div class="item-info">
+                    <span>目的地:</span>
+                    <span>{{detailInfo.Province}}{{detailInfo.City}}</span>
+                </div>
+                <div class="item-info">
+                    <span>出差事由:</span>
+                    <span>{{detailInfo.Reason}}</span>
+                </div>
+                <div class="item-info">
+                    <span>交通工具:</span>
+                    <span>{{detailInfo.Transportation}}</span>
+                </div>
+            </div>
+            <div class="btn" @click="showDetail=false">知道了</div>
+        </div>
+    </Popup>
 </template>
 
 <style lang="scss" scoped>
@@ -163,6 +225,11 @@ function datechangeHandle(e){
         }
     }
 
+    .empty-box{
+        text-align: center;
+        padding-top: 150px;
+    }
+
     .fix-bot-action{
         position: fixed;
         left: 0;
@@ -186,5 +253,38 @@ function datechangeHandle(e){
             }
         }
     }
+
+}
+.detail-wrap{
+    width: 85vw;
+    .content{
+        padding: 30px;
+        font-size: 32px;
+        .title{
+            font-size: 34px;
+            text-align: center;
+        }
+        .item-info{
+            margin-top: 10px;
+            display: flex;
+            span:first-child{
+                width: 150px;
+                flex-shrink: 0;
+                margin-right: 10px;
+                text-align: right;
+            }
+            span:last-child{
+                flex: 1;
+            }
+        }
+    }
+    .btn{
+        height: 82px;
+        border-top: 1px solid #F0F0F0;
+        color: #3385FF;
+        font-size: 32px;
+        text-align: center;
+        line-height: 80px;
+    }
 }
 </style>