admin-vben5/apps/web-antd/src/views/property/greenPlantRentalManagement/conservationManagement/orderMaintain-detail.vue

<script setup lang="ts">
import type {conservationManagement} from '#/api/property/conservationManagement/model';
import {shallowRef} from 'vue';
import {useVbenModal} from '@vben/common-ui';
import {Descriptions, DescriptionsItem, Rate} from 'ant-design-vue';
import {orderMaintainInfo} from '#/api/property/conservationManagement';
import {renderDict} from "#/utils/render";

const [BasicModal, modalApi] = useVbenModal({
  onOpenChange: handleOpenChange,
  onClosed() {
    conservationManagementDetail.value = null;
  },
});

const conservationManagementDetail = shallowRef<null | conservationManagement>(null);

async function handleOpenChange(open: boolean) {
  if (!open) {
    return null;
  }
  modalApi.modalLoading(true);
  const {id} = modalApi.getData() as { id: number | string };
  const response = await orderMaintainInfo(id);
  conservationManagementDetail.value = response;
  modalApi.modalLoading(false);
}
</script>

<template>
  <BasicModal :footer="false" :fullscreen-button="false" title="养护管理信息" class="w-[70%]">
    <Descriptions v-if="conservationManagementDetail" size="small" :column="2" bordered :labelStyle="{width:'100px'}">
      <DescriptionsItem label="养护名称">
        {{ conservationManagementDetail.maintainName }}
      </DescriptionsItem>
      <DescriptionsItem label="服务地点">
        {{ conservationManagementDetail.roomName }}
      </DescriptionsItem>
      <DescriptionsItem label="服务类型" v-if="conservationManagementDetail.serveType!=null">
        <component
          :is="renderDict(conservationManagementDetail.serveType,'pro_service_type')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="养护周期" v-if="conservationManagementDetail.periodType!=null">
        1<component style="display: inline-block" :is="renderDict(conservationManagementDetail.periodType,'wy_time_unit')"/>{{ conservationManagementDetail.periodFrequency }}次
      </DescriptionsItem>
      <DescriptionsItem label="关联订单">
        {{ conservationManagementDetail.orderId }}
      </DescriptionsItem>
      <DescriptionsItem label="计划执行时间">
        {{ conservationManagementDetail.startTime }}
      </DescriptionsItem>
      <DescriptionsItem label="计划完成时间">
        {{ conservationManagementDetail.endTime }}
      </DescriptionsItem>
      <DescriptionsItem label="巡检结果" v-if="conservationManagementDetail.inspectResult!=null">
        <component
          :is="renderDict(conservationManagementDetail.inspectResult,'pro_inspection_results')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="处理措施">
        {{ conservationManagementDetail.measure }}
      </DescriptionsItem>
      <DescriptionsItem label="客户评分">
        <Rate :value="conservationManagementDetail.customerScore" disabled />
      </DescriptionsItem>
      <DescriptionsItem label="客户反馈">
        {{ conservationManagementDetail.customerAdvice }}
      </DescriptionsItem>
      <DescriptionsItem label="处理状态" v-if="conservationManagementDetail.state!=null">
        <component
          :is="renderDict(conservationManagementDetail.state,'pro_processing_status')"
        />
      </DescriptionsItem>
    </Descriptions>
  </BasicModal>
</template>