heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/partpurchasecheck/detail.vue

<template>
  <el-card class="hl-card" style="position: relative">
    <template #header>
      <span>详情页</span>
    </template>
    <el-form ref="formRef" :model="formData"  label-width="160px" v-loading="formLoading">
      <!--  基础信息   -->
      <el-card class="hl-card-info">
        <template #header>
          <div class="hl-card-info-icona"></div><span class="hl-card-info-text">基础信息</span>
        </template>

        <el-row>
          <el-col :span="24">
            <el-row>

              <el-col :span="6">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="采购单号" prop="purchaseNo">
                      <el-input class="!w-300px" placeholder="系统自动生成" v-model="formData.purchaseNo" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>

      <!--  需求单信息   -->
      <el-card class="hl-card-info">
        <template #header>
          <div class="hl-card-info-icona"></div><span class="hl-card-info-text">采购单信息</span>
        </template>
        <el-row>
          <el-col>
            <el-card class="hl-incard">
              <el-table :data="formData.matBoomDOList" class="hl-table" v-loading="loading">
                <el-table-column type="index" label="序号" fixed align="center" min-width="60" />
                <el-table-column prop="projectName" min-width="200" label="项目名称" align="center"/>
                <el-table-column prop="projectName" min-width="200" label="子项目编码" align="center"/>
                <el-table-column prop="boomName" min-width="200" label="物料名称" align="center"/>
                <el-table-column prop="procedureName" min-width="120" label="工序" align="center"/>
                <el-table-column prop="composition" min-width="120" label="材质" align="center"/>
                <el-table-column prop="boomAmount" min-width="100" label="需求数量" align="center"/>
                <el-table-column prop="purchaseAmount" min-width="100" label="采购数量" align="center"/>
                <el-table-column prop="requireTime" min-width="200" label="需要完成日期" align="center" :formatter="dateFormatter1"/>
                <el-table-column prop="arriveTime" min-width="200" label="预计到货日期" align="center" :formatter="dateFormatter1"/>
                <el-table-column prop="supplierName" min-width="100" label="供应商" align="center"/>
                <el-table-column prop="description" min-width="200" label="技术要求" align="center"/>
                <el-table-column prop="theWeight" min-width="100" label="理论重量(吨)" align="center"/>
                <el-table-column prop="estimatedPrice" min-width="100" label="预估总价" align="center"/>
              </el-table>
              <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
                          @pagination="getList" />
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <div class="hl-footer text-center">
      <template v-if="formData.type === 'check'">
        <el-button @click="approve" size="large">批 准</el-button>
        <el-button @click="handleReject" size="large">驳 回</el-button>
        <el-button @click="cancel" size="large">取 消</el-button>
      </template>
      <template v-if="formData.type === 'detail'">
        <el-button @click="cancel" size="large">取 消</el-button>
      </template>
    </div>
  </el-card>

  <!-- 表单弹窗：物料列表 -->
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import * as MaterialPlanApi from '@/api/heli/materialplan'
import * as MaterialPlanDetailApi from '@/api/heli/materialplandetail'
import * as MaterialPlanBoomApi from '@/api/heli/materialplanboom'
import type { UploadUserFile } from 'element-plus'
import * as PlanApi from '@/api/heli/plan'
import * as PlanSubApi from '@/api/heli/plansub'
import * as ProjectOrderApi from '@/api/heli/projectorder'
import * as UserApi from '@/api/system/user'
import * as MaterialApi from '@/api/heli/material'
import { deleteFile, downloadFile, getFilePage } from '@/api/infra/file'
import download from '@/utils/download'
import { getAccessToken, getTenantId } from '@/utils/auth'
import {dateFormatter, dateFormatter1, formatDate} from '@/utils/formatTime'
import { useUserStore } from '@/store/modules/user'
import { useTagsViewStore } from '@/store/modules/tagsView'
import MaterialSelect from '@/views/heli/hlvuestyle/materialSelect.vue'
import booms from './boom.vue'
import * as PartPurchaseOrderApi from "@/api/heli/partpurchaseorder";
import { ElMessageBox } from 'element-plus'
import { ref } from 'vue'

const reload: any = inject('reload')
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { query } = useRoute()
const router = useRouter()
const tagsViewStore = useTagsViewStore()

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  id: undefined,
  purchaseNo: undefined,
  projectId: undefined,
  projectPlanId: undefined,
  projectPlanNo: undefined,
  projectCode: undefined,
  auditor: undefined,
  createTime: new Date(),
  status: undefined,
  description: undefined,
  boomItemDOList: [],
  boomItemRemoveList: [],
  matBoomDOList: [],
  matItemRemoveList: [],
  attachments: [],
  type: undefined,
})

const formRef = ref() // 表单 Ref
const subFormRef = ref() // 表单 Ref
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const subBoomFormLoading = ref(false)
const subBoomFormRef = ref()
const updateParams = reactive({
  id: query.id,
  reason: undefined
})



const approve = async () => {
  const checkParams = await PartPurchaseOrderApi.getPurchaseOrderMake(query.id)
  if (checkParams.status != 1){
    message.warning("该单据状态非待审核，请刷新界面！");
    return;
  }

  await PartPurchaseOrderApi.updatePurchaseOrderMake(formData.value.id)
  message.success("提交成功");
  getList();
}

const handleReject = async () => {
  const checkParams = await PartPurchaseOrderApi.getPurchaseOrderMake(query.id)
  if (checkParams.status != 1){
    message.warning("该单据状态非待审核，请刷新界面！");
    return;
  }

  try {
    const { value, action } = await ElMessageBox.prompt('请输入驳回原因', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern: /.+/, // 至少输入一个字符
      inputErrorMessage: '内容不能为空'
    })

    if (action === 'confirm') {
      reject(value) // 将输入内容传入 reject 方法
    }
  } catch (err) {
    // 用户点击取消或输入不合法时会进入这里
    console.log('操作取消或输入无效')
  }
}

// 假设这是你要调用的 reject 方法
const reject = async(reason) => {
  console.log('驳回原因:', reason)
  updateParams.reason  = reason
  // 这里可以执行提交驳回逻辑
  await PartPurchaseOrderApi.updatePurchaseOrderMakeNo(updateParams)
  message.success("已驳回");
  getList();
}

const cancel = async () => {
  router.push({ path: '/purchase/PartPurchaseCheck'}).then(() => {
    window.close();
  });
}

const closeForm = async () => {
  router.push({ path: '/purchase/management' })
  tagsViewStore.delVisitedView(router.currentRoute.value)
}
const userList = ref<UserApi.UserVO[]>([]) // 用户列表

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  purchaseOrderId: query.id
})
// 页面数据加载初始化
onMounted(async () => {
  // 获取物料需求计划信息
  formData.value = await PartPurchaseOrderApi.getPurchaseOrderMake(query.id)
  formData.value.type = query.type
  getList();
})
const getList = async () => {
  loading.value = true
  try {
    const data = await PartPurchaseOrderApi.getPartPage(queryParams)
    formData.value.matBoomDOList = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

</script>