Newer
Older
xc-metering-front / src / views / tested / MeasurementPlan / plan / components / detail.vue
liyaguang on 29 Aug 2023 4 KB feat(*): 添加设备审详情
<!-- 计量计划 详情页面 -->
<script lang="ts" setup name="PlanDetail">
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import baseInfo from './infoDetail.vue'
import ApprovalDialog from './ApprovalDialog.vue'
import { editBtn, submitBtn } from '@/utils/applyBtns'
import { cancelPlan, delPlan, editPlan, sendNotify, submitPlan } from '@/api/eqpt/measurementPlan/paln'
import { SCHEDULE } from '@/utils/scheduleDict'
const $route = useRoute()
const activeName = ref('基本信息')
const statusName = $route.query.statusName as string
const $router = useRouter()
const data = JSON.parse($route.query.row as string)
const close = () => {
  $router.back()
}
// 审批
const approvalDialogRef = ref()
const apply = (type: string) => {
  approvalDialogRef.value.initDialog(type, data.taskId, data.processId, data.id)
}
// 编辑
const editForm = () => {
  $router.push({
    path: '/plan/update',
    query: { ...$route.query },
  })
}
// 删除
const delForm = () => {
  ElMessageBox.confirm(
    '确认删除吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    delPlan(data.id).then((res) => {
      ElMessage.success('操作成功')
      close()
    })
  })
}
// 取消
const cancelForm = () => {
  ElMessageBox.confirm(
    '确认取消吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    cancelPlan({ id: data.id, processInstanceId: data.processId, comments: '' }).then((res) => {
      ElMessage.success('操作成功')
      close()
    })
  })
}
// 追加计划
const append = () => {
  $router.push({
    path: '/plan/update',
    query: { ...$route.query, append: 'true' },
  })
}
// 发送送检通知
const send = () => {
  sendNotify(data.id).then((res) => {
    ElMessage.success('发送成功')
  })
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <approval-dialog ref="approvalDialogRef" @on-success="() => { $router.back() }" />
    <detail-page title="计量计划-详情">
      <template #btns>
        <el-button v-if="statusName === '全部'" type="primary" @click="send">
          发送送检通知
        </el-button>
        <el-button v-if="statusName === '全部'" type="primary" @click="append">
          追加计划
        </el-button>
        <el-button v-if="statusName === '待审批'" type="primary" @click="apply('agree')">
          同意
        </el-button>
        <el-button v-if="statusName === '待审批'" type="primary" @click="apply('refuse')">
          拒绝
        </el-button>
        <el-button v-if="editBtn(statusName, 'detail')" type="primary" @click="editForm()">
          编辑
        </el-button>
        <el-button v-if="statusName === '已通过' || statusName === '全部'" type="primary">
          打印
        </el-button>
        <el-button v-if="statusName === '已取消' || statusName === '审批'" type="info" @click="delForm()">
          删除
        </el-button>
        <el-button v-if="statusName === '审批中'" type="info" @click="cancelForm()">
          取消
        </el-button>
        <el-button type="info" @click="$router.back()">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block-com>
      <el-radio-group v-model="activeName">
        <el-radio-button label="基本信息">
          基本信息
        </el-radio-button>
        <el-radio-button label="审批详情">
          审批详情
        </el-radio-button>
      </el-radio-group>
    </detail-block-com>
    <base-info v-if="activeName === '基本信息'" class="device-base-info" />
    <approval-record-table v-if="activeName === '审批详情'" :process-id="JSON.parse($route.query.row as string).processId" />
    <!-- <report-table v-if="activeName === '审批详情'" :data="[]" status="detail" /> -->
  </app-container>
</template>

<style lang="scss" scoped>
// 样式
.device-base-info {
  ::v-deep(.base-info-device) {
    .header {
      display: none;
    }

    display: none;
  }
}
</style>