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>
    <van-cell-group>
      <van-cell title="文件名称" :value="state.form.instTitle" />
      <van-cell title="文件类型" :value="state.form.instTitle" />
      <van-cell title="文件" :value="state.form.defName" />
    </van-cell-group> -->
    <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 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>