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"
		  	:hide-second="true"
		    :border="false"
		  />
          <view class="item-right-li priamry"> {{props.detailData.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 props.detailData.execInfos">
			<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 Detailtem from './Detailtem.vue';
  const exeDate = 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 = () =>{
  	  let exeDateNow = formatDateTime();
  	  exeDate.value = exeDateNow;
  	
  }
  
  watch(
    () => props.detailData,
    (newVal) => {
      // todo根据ID获取详情数据
	  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>