vue3_YDHL/pages/prescriptionExecute/components/DetailList.vue

<template>
  <van-popup
    v-model:show="props.visibleDetail"
    closeable
    @close="props.close()"
    position="bottom"
    :style="{ height: '80%' }">
    <view
      class="content-wrap"
      style="margin-top: 80rpx">
      <view class="exe-item">
        <Detailtem :data="props.detailData" />
      </view>
      <view class="exe-item">
        <view class="exe-item-detli-top">
		  <uni-datetime-picker
		   class="exe-item-detli-time"
		    type="date"  
			:model-value="exeDate"
			@change="(e) => onConfirm(e)"  
		  	:hide-second="true"
		    :border="false"
		  />
          <view class="item-right-li priamry"> {{showNum}} </view>
        </view>
        <van-row class="table-item header">
          <van-col span="8">要求执行时间</van-col>
          <van-col span="7">执行时间</van-col>
          <van-col span="4">执行人</van-col>
          <van-col span="5">执行状态</van-col>
        </van-row>
		<view
		v-for="(item, index) in newExecInfos">
			<van-row class="table-item">
			  <van-col span="8">{{item?.execSttTime}}</van-col>
			  <van-col span="7">{{item?.execTime}}</van-col>
			  <van-col span="4">{{item?.execUserName}}</van-col>
			  <van-col span="5">{{item?.statusDesc}}</van-col>
			</van-row>
		</view>
      </view>
    </view>
  </van-popup>
</template>

<script setup>
  import { ref, watch, onMounted, nextTick } from 'vue';
  import { $http } from '../../../config/https';
  import Detailtem from './Detailtem.vue';
  const exeDate = ref(''); // 执行日期
  const showNum = ref('');
  const newExecInfos = ref([]);
  const props = defineProps({
    visibleDetail: {
      type: Boolean,
      default: false,
    },
    detailData: {
      type: String,
      default: '',
    },
    close: {
      type: Function,
      default: () => {},
    },
  });
  
  const formatDateTime = () => {
    const date = new Date();
    return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
  };
  
  //初始化
  const initData = () =>{
	$http.post('urlDeault',this, {
	    code: '04220027',
	    data: {
	      params: [{
			"ordID": props.detailData.ordID,
			"exeDate": exeDate.value
		  }]
	    },
	    success: function(res) {
	      if (+res.errorCode === 0) {
			newExecInfos.value = res.result;
			
			// 计算已执行数量和总数量，生成showNum
			const totalExecCount = Array.isArray(res.result) ? res.result.length : 0;
			const executedCount = Array.isArray(res.result) 
			    ? res.result.filter(exec => exec.statusDesc === '已执行').length 
			    : 0;
			showNum.value = `${executedCount}/${totalExecCount}`;
	      }
	    },
	});
  }
  
  // 确定选择日期
  const onConfirm = (value) => {
  	exeDate.value = value;
  	initData();
  };
  
  watch(
    () => props.detailData,
    (newVal) => {
		if(props.detailData && props.detailData?.ordID){
			let exeDateNow = formatDateTime();
			exeDate.value = exeDateNow;
			initData();
		}
    },
    { immediate: true, deep: true },
  );
</script>
<style scoped>
  @import url(../common.css);
  .table-item {
    padding: 20rpx;
    border-bottom: 2rpx solid #eee;
    font-size: 24rpx;
    color: #666;
  }
  .table-item.header {
    color: #333;
  }
  .table-item:last-child {
    border-bottom: none;
  }
</style>