labsop_h5/src/view/todo/component/instrument_appointment.vue

<template>
  <div class="cert-dialog-container">
    <van-cell-group>
      <van-cell title="仪器名称" title-class="cell-title" :value="state.form.instName" />
      <van-cell title="所属平台" title-class="cell-title" :value="state.form.platformName" />
      <van-cell title="仪器类型" title-class="cell-title" :value="state.form.instClassDesc" />
      <van-cell title="计费方式" title-class="cell-title" :value="state.form.costType" />
      <van-cell title="预约人" title-class="cell-title" :value="state.form.userName" />
      <van-cell title="预约时间段" title-class="cell-title">
        <template #value>
          <div class="time-range">
            <div class="time-item">{{ state.form.startTime }}</div>
            <div class="time-connector">至</div>
            <div class="time-item">{{ state.form.endTime }}</div>
          </div>
        </template>
      </van-cell>
      <van-cell title="辅助上机" title-class="cell-title" :value="state.form.assistEnable ? '是' : '否'" />
      <van-cell title="备注" title-class="cell-title" :value="state.form.remark" />
    </van-cell-group>
  </div>
</template>

<script setup lang="ts" name="systemProDialog">
  import to from 'await-to-js'
  import { reactive, ref, onMounted } from 'vue'

  import { useUseAppointApi } from '/@/api/instr/inst/useAppoint'

  // 定义子组件向父组件传值/事件
  const emit = defineEmits(['refresh'])
  const props = defineProps({
    code: {
      type: String,
      default: '',
    },
  })

  const useAppointApi = useUseAppointApi()

  // 定义变量内容
  const certDialogFormRef = ref()
  const state = reactive({
    form: {
      instName: '',
      platformName: '',
      instClassDesc: '',
      costType: '',
      appointeeInstrumentName: '',
      userName: '',
      startTime: '',
      endTime: '',
      assistEnable: false,
      remark: '',
    },
  })

  const getDetail = async () => {
    const costTypeMap: Record<number, string> = {
      10: '按预约时间计费',
      20: '按使用时间计费',
      30: '按使用次数计费',
      40: '按阶梯计费',
      50: '按管数计费',
    }

    const [err, res]: ToResponse = await to(useAppointApi.getZunYiAppointEntityById({ id: Number(props.code) }))
    if (err) return
    state.form = {
      ...res?.data,
      costType: costTypeMap[res?.data?.costType],
    }
  }

  onMounted(() => {
    getDetail()
  })
</script>

<style scoped lang="scss">
  .add-record-title {
    display: flex;
    justify-content: space-between;
  }
  
  .time-range {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 8px;
  }
  
  .time-item {
    flex: 1;
    text-align: center;
    min-width: 0;
  }
  
  .time-connector {
    color: #969799;
    font-size: 12px;
    position: relative;
    padding: 0 4px;
  }
  
  .time-connector::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #ebedf0;
    transform: translateY(-50%);
  }
  
  .time-connector::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #ebedf0;
    transform: translateY(-50%);
  }
</style>