labsop_h5/src/view/todo/detail.vue

<!--
 * @Author: wanglj wanglijie@dashoo.cn
 * @Date: 2025-03-11 18:02:10
 * @LastEditors: wanglj wanglijie@dashoo.cn
 * @LastEditTime: 2025-04-16 14:02:44
 * @FilePath: \vant-demo-master\vant\vue3-ts\src\view\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <header>
      <h4 class="mb10">{{ state.form.startUserName }}发起的{{ state.form.defName }}</h4>
      <p>{{ state.form.startUserName }}发起于{{ state.form.startTime }}</p>
    </header>
    <h4>审批信息</h4>
    <van-cell-group>
      <van-cell title="审批名称" title-class="cell-title" :value="state.form.instTitle" />
      <van-cell title="审批编号" title-class="cell-title" :value="state.form.instTitle" />
      <van-cell title="审批类型" title-class="cell-title" :value="state.form.defName" />
      <van-cell title="申请人" title-class="cell-title" :value="state.form.startUserName" />
      <van-cell title="申请时间" title-class="cell-title" :value="state.form.startTime" />
    </van-cell-group>
    <h4>单据信息</h4>
    <InstrumentAppointment v-if="state.form.defCode === 'instrument_appointment'" :code="state.form.businessCode" />
    <PlatPlatformAppoint v-if="state.form.defCode === 'plat_platform_appoint'" :code="state.form.businessCode" />
    <platServiceCommission v-if="state.form.defCode === 'commission_create'" :code="state.form.businessCode" />
    <PlatCageApplications v-if="state.form.defCode === 'plat_cage_applications'" :code="state.form.businessCode" />
    <PlatCageReleaseApplications v-if="state.form.defCode === 'plat_cage_release_applications'"
      :code="state.form.businessCode" />
    <PlatPlatformRenewal v-if="state.form.defCode === 'plat_platform_renewal'" :code="state.form.businessCode" />
    <PlatAnimalTakewayApplications v-if="state.form.defCode === 'plat_animal_takeway_applications'"
      :code="state.form.businessCode"></PlatAnimalTakewayApplications>
    <PlatPlatformOutRoomAppoint v-if="state.form.defCode === 'plat_platform_out_room_appoint'"
      :code="state.form.businessCode" />
    <PlatformAnimalAppointmentEthics v-if="state.form.defCode === 'platform_animal_appointment_ethics'"
      :code="state.form.businessCode" />
    <h4>审批记录</h4>
    <FlowTable :id="state.form.id" :businessCode="state.form.businessCode" :defCode="state.form.defCode" />
    <h4 v-if="state.type === 'approval'">审批意见</h4>
    <van-form v-if="state.type === 'approval'" class="mb20" ref="formRef" required="auto">
      <van-cell-group>
        <van-field v-model="state.approvalForm.approveOpinion" label="审批意见" placeholder="请输入审批意见"
          :rules="[{ required: true, message: '请输入审批意见' }]" rows="3" type="textarea" />
        <van-field v-model="state.approvalForm.approveResult" label="审批结果" placeholder="请选择审批结果"
          :rules="[{ required: true, message: '请选择审批结果' }]">
          <template #input>
            <van-radio-group v-model="state.approvalForm.approveResult" direction="horizontal">
              <van-radio name="pass">通过</van-radio>
              <van-radio name="rejection">拒绝</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-cell-group>
    </van-form>
    <van-action-bar v-if="state.type === 'approval'" placeholder>
      <van-action-bar-icon icon="wap-home-o" text="首页" @click="onRouterPush('/home')" />
      <van-action-bar-icon icon="cluster-o" text="待办事项" @click="onRouterPush('/todo')" />
      <van-action-bar-button class="w100" type="primary" text="提交" @click="onSave" />
    </van-action-bar>
  </div>
</template>

<script name="home" lang="ts" setup>
import to from 'await-to-js'
import { formatDate } from '/@/utils/formatTime'
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useExecutionApi } from '/@/api/execution'
import { useFlowApi } from '/@/api/execution/flow'
import { showNotify } from 'vant'
const FlowTable = defineAsyncComponent(() => import('/@/components/FlowTable.vue'))
const InstrumentAppointment = defineAsyncComponent(() => import('/@/view/todo/component/instrument_appointment.vue'))
const PlatPlatformAppoint = defineAsyncComponent(() => import('/@/view/todo/component/plat_platform_appoint.vue'))
const platServiceCommission = defineAsyncComponent(() => import('/@/view/todo/component/plat_service_commission.vue'))
const PlatCageApplications = defineAsyncComponent(() => import('/@/view/todo/component/plat_cage_applications.vue'))
const PlatCageReleaseApplications = defineAsyncComponent(() => import('/@/view/todo/component/plat_cage_release_applications.vue'))
const PlatPlatformRenewal = defineAsyncComponent(() => import('/@/view/todo/component/plat_platform_renewal.vue'))
const PlatAnimalTakewayApplications = defineAsyncComponent(() => import('/@/view/todo/component/plat_animal_takeway_applications.vue'))
const PlatPlatformOutRoomAppoint = defineAsyncComponent(() => import('/@/view/todo/component/plat_platform_out_room_appoint.vue'))
const PlatformAnimalAppointmentEthics = defineAsyncComponent(() => import('/@/view/todo/component/platform_animal_appointment_ethics.vue'))
const executionApi = useExecutionApi()
const flowApi = useFlowApi()
const router = useRouter()
const route = useRoute()
const apprList = ref<any[]>([])
const formRef = ref()
const state = reactive({
  type: 'approval',
  form: {
    id: 0,
    defId: 0,
    defCode: '',
    defName: '',
    instTitle: '',
    nodeId: '',
    candidate: '',
    taskId: 0,
    startTime: '',
    endTime: '',
    duration: 0,
    startUserId: 0,
    startUserName: '',
    isFinish: '',
    platformId: 0,
    remark: '',
    createdBy: 0,
    createdName: '',
    createdTime: '',
    updatedBy: 0,
    updatedName: '',
    updatedTime: '',
    formConfig: {},
    formData: {},
    processTask: [],
    businessCode: ''
  },
  approvalForm: {
    approveOpinion: '',
    approveResult: 'pass'
  }
})
const onClickRight = () => {
  router.go(-1)
}
// 审核方式翻译
const getNodeModel = (type: string, model: string) => {
  if (type === 'start') return ''
  if (model === '10') {
    return '会签'
  } else if (model === '20') {
    return '或签'
  }
}
// 详情工作流列表
const getFlowInstance = async () => {
  const [err, res]: ToResponse = await to(flowApi.getFlowInstance({ id: state.form.id, businessCode: state.form.businessCode, defCode: state.form.defCode }))
  if (err) return
  const arr = res?.data?.nodes || []
  apprList.value = arr
}
const init = async (id: number) => {
  const [err, res]: ToResponse = await to(executionApi.getInstanceById({ id }))
  if (err) return
  if (res?.data) {
    state.form = res.data
  }
}
const onRouterPush = (val: string, params?: any) => {
  router.push({
    path: val,
    query: { ...params }
  })
}
const onSave = async () => {
  const [errValid] = await to(formRef.value.validate())
  if (errValid) return
  const params = {
    taskId: state.form.taskId,
    result: state.approvalForm.approveResult,
    opinion: state.approvalForm.approveOpinion
  }
  const [err]: ToResponse = await to(executionApi.approve(params))
  if (err) return
  showNotify({
    type: 'success',
    message: '审批成功'
  })
  router.push({
    path: '/todo'
  })
}
onMounted(() => {
  const id = route.query.id ? +route.query.id : 0
  state.type = route.query.type.toString()
  init(id)
})
</script>

<style lang="scss" scoped>
.app-container {
  header {
    padding: 14px;
    background-color: #f9ffff;
    border-radius: 4px;
    margin-top: 10px;
  }

  >h4 {
    margin: 10px 0;
    height: 20px;
    line-height: 20px;

    &::before {
      display: inline-block;
      content: '';
      background-color: #3c78e3;
      width: 4px;
      height: 20px;
      margin-right: 4px;
      vertical-align: top;
    }
  }

  :deep(.flow-cell) {
    margin-left: 22px;
    display: flex;
    justify-content: space-between;
    color: #333;
  }

  :deep(.cell-title) {
    flex: 0 0 80px;
  }

  .van-action-bar {
    z-index: 2;
  }
}
</style>