pay-customer/src/WORKORDER/show/index.vue

<template>
  <view class="work_page">
    <view class="show_card">
      <view class="card_header_type_status">
        <view class="work_item_header_left">
          <view class="btn_type">
            <hs-enum-tag
              :value="useModel?.dataShow?.value?.type"
              :Enums="HouseWorkOrdersTypeEnum"
            />
          </view>
          <view class="btn_type" v-if="useModel?.dataShow?.value?.location">
            <hs-enum-tag
              :value="useModel?.dataShow?.value?.location"
              :Enums="HouseWorkOrdersLocationEnum"
            />
          </view>
        </view>
        <view :class="`btn_status btn_status_${useModel?.dataShow?.value?.status}`">
          <hs-enum-tag
            :value="useModel?.dataShow?.value?.status"
            :Enums="HouseWorkOrdersStatusEnum"
          />
        </view>
      </view>
      <view class="card_header_huse_info">
        <text> {{ useModel?.dataShow?.value?.asset_house?.full_name }} </text>
        <text> {{ useModel?.dataShow?.value?.title }} </text>
      </view>
      <view class="card_header_content_info">
        {{ useModel?.dataShow?.value?.content }}
      </view>
      <view class="card_header_imgs">
        <view
          v-for="(k, idx) in useModel?.dataShow?.value?.attachments"
          :key="`img_${idx}`"
          class="item"
        >
          <image :src="k?.url" mode="aspectFill" />
        </view>
      </view>

      <view class="show_card_footer">
        <view class="work_item_cell">
          工单编号： <text>{{ useModel?.dataShow?.value?.code }}</text>
        </view>
        <view class="work_item_cell" v-if="useModel?.dataShow?.value?.expect_start_time">
          期望上门处理时间：
          <text>{{
            getTimeRangeDisplay(
              useModel?.dataShow?.value?.expect_start_time,
              useModel?.dataShow?.value?.expect_end_time
            )
          }}</text>
        </view>
        <view class="work_item_cell">
          提报时间：<text>{{ useModel?.dataShow?.value?.created_at }}</text>
        </view>
        <view class="work_item_cell" v-if="useModel?.dataShow?.value?.evaluation_score">
          客户评价：<hs-up-rate :valueModel="useModel?.dataShow?.value?.evaluation_score" />
        </view>
        <view class="work_item_cell" v-if="parseFloat(useModel?.dataShow?.value?.amount) > 0">
          支付金额：<text class="text_red">¥{{ useModel?.dataShow?.value?.amount }}元</text>
        </view>
      </view>
    </view>
    <MyProcessLogs />

    <view class="work_order_footer" v-if="useModel?.dataShow?.value?.status !== 'Closed'">
      <view
        class="btn"
        v-if="useModel?.dataShow?.value?.status === 'Pending'"
        @click="method?.handleClosed"
      >
        关闭工单
      </view>
      <view
        class="btn_close"
        v-if="useModel?.dataShow?.value?.status === 'Processing'"
        @click="method?.handleClosed"
      >
        <view class="icon_close"><up-icon name="file-text" size="28"></up-icon></view>
        <view> 关闭工单 </view>
      </view>
      <view
        class="btn_close"
        v-if="
          useModel?.dataShow?.value?.status === 'Completed' &&
          !useModel?.dataShow?.value?.evaluation_score
        "
        @click="method?.handleRework"
      >
        <view class="icon_close">
          <uni-icons type="undo-filled" color="#333" size="26"></uni-icons>
        </view>
        <view> 工单返工 </view>
      </view>
      <view
        class="btn handle_rework_btn"
        v-if="
          useModel?.dataShow?.value?.status === 'Completed' &&
          useModel?.dataShow?.value?.evaluation_score
        "
        @click="method?.handleRework"
      >
        工单返工
      </view>
      <view
        class="btn"
        v-if="
          useModel?.dataShow?.value?.status !== 'Pending' &&
          useModel?.dataShow?.value?.status !== 'Completed' &&
          useModel?.dataShow?.value?.status !== 'Closed'
        "
        @click="method?.handlePhoneCall"
      >
        联系处理人
      </view>
      <view
        class="btn"
        v-if="
          useModel?.dataShow?.value?.status === 'Pending' ||
          useModel?.dataShow?.value?.status === 'Processing'
        "
        @click="method?.hadnleUpdateTime"
        :style="getStyleBgInfo()"
      >
        修改处理时间
      </view>
      <view
        class="btn"
        v-if="useModel?.dataShow?.value?.status === 'PendingAcceptance'"
        @click="method?.handleAcceptance"
        :style="getStyleBgInfo()"
      >
        验收工单
      </view>
      <view
        class="btn"
        v-if="useModel?.dataShow?.value?.status === 'PendingPayment'"
        @click="method?.handleAcceptance"
        :style="getStyleBgInfo()"
      >
        支付费用
      </view>
      <view
        class="btn"
        v-if="
          useModel?.dataShow?.value?.status === 'Completed' &&
          !useModel?.dataShow?.value?.evaluation_score
        "
        :style="getStyleBgInfo()"
        @click="method?.handleAcceptance"
      >
        工单评价
      </view>
    </view>

    <hs-popup-evaluate
      :show="useModel?.showEvaluate?.value"
      mode="bottom"
      :closeable="true"
      :round="20"
      @onSubmit="method?.handlepopupClose"
      @onClose="useModel.showEvaluate.value = false"
    />
  </view>
</template>
<script setup lang="ts">
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import method from './method'
import useModel from './model'
import { getStyleBgInfo } from '@/common/libraries/getPageConfig'
import {
  HouseWorkOrdersTypeEnum,
  HouseWorkOrdersStatusEnum,
  HouseWorkOrdersLocationEnum
} from '@/gen/Enums'
import { getTimeRangeDisplay } from '@/common/libraries/day'
import { ref } from 'vue'
import MyProcessLogs from './components/ProcessLogs.vue'
onLoad(e => {
  method.getShow(e?.id)
  method?.getHouseWorkLogs(e?.id)
})

onShow(() => {
  if (useModel?.dataShow?.value?.id) {
    method?.getShow(useModel?.dataShow?.value?.id)
    method?.getHouseWorkLogs(useModel?.dataShow?.value?.id)
  }
})

onUnload(() => {
  useModel.dataShow.value = undefined
  useModel.logsData.value = []
})
</script>
<style lang="scss">
@import './style.scss';
</style>