first commit
This commit is contained in:
244
src/views/materials/purchaseDoc/comm/logisticsDetail.vue
Normal file
244
src/views/materials/purchaseDoc/comm/logisticsDetail.vue
Normal file
@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<el-drawer v-model="drawer" :direction="direction" size="40%" :before-close="handleBeforeClose" title-class="drawer-title">
|
||||
<template #header>
|
||||
<span class="font-bold text-lg text-gray-800">物流信息</span>
|
||||
</template>
|
||||
<template #default>
|
||||
<!-- 物流头部信息 -->
|
||||
<div class="bg-white rounded-lg shadow-md p-5 mb-6">
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
||||
<!-- 左侧：快递基本信息 -->
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="w-14 h-14 rounded-md overflow-hidden border border-gray-100 flex items-center justify-center">
|
||||
<img
|
||||
:src="logisticsData?.result.logo"
|
||||
alt="快递公司Logo"
|
||||
class="w-full h-full object-contain"
|
||||
:onerror="`this.src='https://via.placeholder.com/48x48?text=暂无Logo'`"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-sm">
|
||||
<p class="text-gray-500">快递单号</p>
|
||||
<p class="font-medium text-gray-900">{{ logisticsData?.result.number }}</p>
|
||||
<p class="text-gray-500 mt-1">{{ logisticsData?.result.expName }} | 最新更新: {{ logisticsData?.result.updateTime }}</p>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<el-tag :type="getStatusType(logisticsData?.result.deliverystatus)" size="medium" class="px-4 py-1">
|
||||
{{ getStatusText(logisticsData?.result.deliverystatus) }}
|
||||
</el-tag>
|
||||
<p class="text-gray-500 text-sm mt-2 text-right">耗时: {{ logisticsData?.result.takeTime || '暂无数据' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快递员信息（有数据才显示） -->
|
||||
<div v-if="logisticsData?.result.courier" class="bg-blue-50 rounded-lg p-4 mb-6 border-l-4 border-blue-400">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="font-medium text-blue-800">配送信息</p>
|
||||
<a :href="`tel:${logisticsData?.result.courierPhone}`" class="text-blue-600 hover:text-blue-800 text-sm flex items-center gap-1">
|
||||
<el-icon class="el-icon-phone"></el-icon>
|
||||
联系快递员
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-8 gap-y-3 mt-3 text-gray-700">
|
||||
<div class="flex items-center gap-2">
|
||||
<el-icon class="el-icon-user text-gray-500"></el-icon>
|
||||
<span>快递员: {{ logisticsData?.result.courier }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<el-icon class="el-icon-phone-outline text-gray-500"></el-icon>
|
||||
<span>电话: {{ logisticsData?.result.courierPhone || '暂无' }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<el-icon class="el-icon-service text-gray-500"></el-icon>
|
||||
<span>客服: {{ logisticsData?.result.expPhone }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 物流轨迹列表 -->
|
||||
<div class="bg-white rounded-lg shadow-md p-5">
|
||||
<p class="font-medium text-gray-800 mb-4">物流轨迹（{{ logisticsData?.result.list.length || 0 }}条）</p>
|
||||
<div class="relative" style="border-left: 1px solid #d9d9d9; padding-left: 15px">
|
||||
<div v-for="(item, index) in logisticsData?.result.list" :key="index" class="flex mb-8 relative">
|
||||
<div class="flex flex-col items-center mr-6 z-10">
|
||||
<div
|
||||
:class="[
|
||||
'w-8 h-8 rounded-full flex items-center justify-center',
|
||||
index === 0 ? 'bg-blue-500 text-white' : 'bg-white border border-gray-300 text-gray-500'
|
||||
]"
|
||||
>
|
||||
<el-icon v-if="index === 0" class="el-icon-check text-xs"></el-icon>
|
||||
<span v-else class="text-xs">{{ index + 1 }}</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-2">{{ item.time }}</p>
|
||||
</div>
|
||||
<div class="flex-1 bg-gray-50 rounded-lg p-4 border border-gray-100 shadow-sm">
|
||||
<p class="text-gray-800">{{ item.status }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="close" :loading="cancelLoading" class="mr-3">关闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import type { DrawerProps } from 'element-plus';
|
||||
import { Phone, PhoneOutline, User, Service, Check } from '@element-plus/icons-vue';
|
||||
|
||||
// 抽屉方向
|
||||
const direction = ref<DrawerProps['direction']>('ltr');
|
||||
// 加载状态
|
||||
const cancelLoading = ref(false);
|
||||
const confirmLoading = ref(false);
|
||||
// 抽屉显隐
|
||||
const drawer = ref(false);
|
||||
// 物流数据（初始化为接口返回格式）
|
||||
const logisticsData = ref({
|
||||
status: '0',
|
||||
msg: 'ok',
|
||||
result: {
|
||||
number: '',
|
||||
type: '',
|
||||
list: [],
|
||||
deliverystatus: '0',
|
||||
issign: '0',
|
||||
expName: '',
|
||||
expSite: '',
|
||||
expPhone: '',
|
||||
courier: '',
|
||||
courierPhone: '',
|
||||
updateTime: '',
|
||||
takeTime: '',
|
||||
logo: ''
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 根据物流状态获取标签类型
|
||||
* @param status 物流状态码
|
||||
*/
|
||||
const getStatusType = (status?: string) => {
|
||||
switch (status) {
|
||||
case '0': // 揽件
|
||||
return 'info';
|
||||
case '1': // 在途中
|
||||
return 'warning';
|
||||
case '2': // 派件中
|
||||
return 'primary';
|
||||
case '3': // 已签收
|
||||
return 'success';
|
||||
case '4': // 派送失败
|
||||
case '5': // 疑难件
|
||||
return 'danger';
|
||||
case '6': // 退件签收
|
||||
return 'error';
|
||||
default:
|
||||
return 'default';
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据物流状态获取文本描述
|
||||
* @param status 物流状态码
|
||||
*/
|
||||
const getStatusText = (status?: string) => {
|
||||
const statusMap: Record<string, string> = {
|
||||
'0': '快递收件(揽件)',
|
||||
'1': '运输途中',
|
||||
'2': '正在派件',
|
||||
'3': '已签收',
|
||||
'4': '派送失败',
|
||||
'5': '疑难件',
|
||||
'6': '退件签收'
|
||||
};
|
||||
return statusMap[status || '0'] || '未知状态';
|
||||
};
|
||||
|
||||
/**
|
||||
* 打开抽屉并加载物流数据
|
||||
*/
|
||||
const open = (data) => {
|
||||
const mockData = {
|
||||
result: data
|
||||
};
|
||||
logisticsData.value = mockData;
|
||||
drawer.value = true;
|
||||
};
|
||||
/**
|
||||
* 关闭抽屉
|
||||
*/
|
||||
const close = () => {
|
||||
drawer.value = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* 抽屉关闭前钩子（可用于拦截关闭逻辑）
|
||||
*/
|
||||
const handleBeforeClose = (done: () => void) => {
|
||||
done(); // 直接关闭，如需确认可添加弹窗逻辑
|
||||
};
|
||||
|
||||
// 暴露加载状态控制方法
|
||||
const setCancelLoading = (loading: boolean) => {
|
||||
cancelLoading.value = loading;
|
||||
};
|
||||
const setConfirmLoading = (loading: boolean) => {
|
||||
confirmLoading.value = loading;
|
||||
};
|
||||
|
||||
// 暴露方法供父组件调用
|
||||
defineExpose({
|
||||
open,
|
||||
setCancelLoading,
|
||||
setConfirmLoading
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-title {
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
:deep(.el-drawer__body) {
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 160px);
|
||||
}
|
||||
|
||||
:deep(.el-tag) {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:deep(.el-drawer) {
|
||||
width: 95% !important;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.drawer-footer .el-button) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
569
src/views/materials/purchaseDoc/index.vue
Normal file
569
src/views/materials/purchaseDoc/index.vue
Normal file
@ -0,0 +1,569 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="100px">
|
||||
<el-form-item label="采购单编号" prop="docCode">
|
||||
<el-input v-model="queryParams.docCode" placeholder="请输入采购单编号" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备统称" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入设备统称" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="到货日期" prop="arrivalDate">
|
||||
<el-date-picker clearable v-model="queryParams.arrivalDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择到货日期" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</transition>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['cailiaoshebei:purchaseDoc:add']">新增</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
<el-table v-loading="loading" :data="purchaseDocList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="index" width="60" label="序号" align="center" />
|
||||
<el-table-column label="采购单编号" align="center" prop="docCode" width="150" />
|
||||
<el-table-column label="批次号" align="center" prop="mrpBaseId">
|
||||
<template #default="scope">
|
||||
{{ batchOptions.find((item) => item.id == scope.row.mrpBaseId)?.planCode }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="供应商" align="center" prop="supplier" />
|
||||
<el-table-column label="设备统称" align="center" prop="name" />
|
||||
<el-table-column label="到货日期" align="center" prop="arrivalDate" width="120">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.arrivalDate, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="收货地址" align="center" prop="receivingAddress" />
|
||||
<el-table-column label="联系人" align="center" prop="contacts" />
|
||||
<el-table-column label="物流单号" align="center" prop="remark" width="150">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['out:monthPlan:remove']">查看物流单</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="采购经办人" align="center" prop="purchasingAgent" width="90" />
|
||||
<el-table-column label="日期" align="center" prop="preparedDate" width="120">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.preparedDate, '{y}-{m}-{d}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="供应商返回" align="center" prop="feedbackUrl" width="130">
|
||||
<template #default="scope">
|
||||
<el-link :href="scope.row.feedbackUrl" target="_blank" type="primary" v-if="scope.row.feedbackUrl">回单</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="审核状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="wf_business_status" :value="scope.row.status"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" width="160">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-if="scope.row.status == 'draft' || scope.row.status == 'back'"
|
||||
icon="Finished"
|
||||
@click="handleAudit(scope.row)"
|
||||
v-hasPermi="['cailiaoshebei:purchaseDoc:edit']"
|
||||
>
|
||||
审核</el-button
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-if="scope.row.status != 'draft'"
|
||||
icon="view"
|
||||
@click="handleViewDetail(scope.row)"
|
||||
v-hasPermi="['cailiaoshebei:purchaseDoc:edit']"
|
||||
>
|
||||
查看</el-button
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-if="!scope.row.feedbackUrl && scope.row.status == 'finish'"
|
||||
icon="Upload"
|
||||
@click="handleUpload(scope.row)"
|
||||
v-hasPermi="['cailiaoshebei:purchaseDoc:edit']"
|
||||
>上传</el-button
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
icon="Edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-if="scope.row.status == 'draft'"
|
||||
v-hasPermi="['cailiaoshebei:purchaseDoc:edit']"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
v-if="scope.row.status == 'finish' && scope.row.feedbackUrl"
|
||||
icon="Share"
|
||||
@click="handleShare(scope.row)"
|
||||
v-hasPermi="['cailiaoshebei:purchaseDoc:remove']"
|
||||
>物流单分享</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
</el-card>
|
||||
<!-- 添加或修改物资-采购联系单对话框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>
|
||||
<el-form ref="purchaseDocFormRef" :model="form" :rules="rules" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="采购单编号" prop="docCode"> <el-input v-model="form.docCode" placeholder="请输入采购单编号" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="供应商" prop="supplier">
|
||||
<el-select v-model="form.supplier" value-key="id" placeholder="请选择供应商" clearable filterable @change="">
|
||||
<el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.name"> </el-option>
|
||||
</el-select> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="需求批次号" prop="mrpBaseId">
|
||||
<el-select v-model="form.mrpBaseId" value-key="id" placeholder="请选择需求批次号" filterable @change="getPlanList">
|
||||
<el-option v-for="item in batchOptions" :key="item.id" :label="item.planCode" :value="item.id"> </el-option>
|
||||
</el-select> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="需求计划" prop="planId">
|
||||
<el-select v-model="form.planId" value-key="id" placeholder="请选择需求计划" multiple filterable :disabled="!form.mrpBaseId">
|
||||
<el-option v-for="item in planList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
|
||||
</el-select> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="事由" prop="reason"> <el-input v-model="form.reason" placeholder="请输入事由" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="设备统称" prop="name"> <el-input v-model="form.name" placeholder="请输入设备统称" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="到货日期" prop="arrivalDate">
|
||||
<el-date-picker clearable v-model="form.arrivalDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择到货日期">
|
||||
</el-date-picker> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="负责人联系方式" prop="designDirectorTel">
|
||||
<el-input v-model="form.designDirectorTel" placeholder="请输入设计负责人联系方式" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="现场联系方式" prop="technicalDirectorTel">
|
||||
<el-input v-model="form.technicalDirectorTel" placeholder="请输入现场技术负责人联系方式" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="收货地址" prop="receivingAddress">
|
||||
<el-input v-model="form.receivingAddress" placeholder="请输入收货地址" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="联系人" prop="contacts"> <el-input v-model="form.contacts" placeholder="请输入联系人" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="项目负责人" prop="projectDirector">
|
||||
<el-input v-model="form.projectDirector" placeholder="请输入项目负责人" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="采购经办人" prop="purchasingAgent">
|
||||
<el-input v-model="form.purchasingAgent" placeholder="请输入采购经办人" /> </el-form-item
|
||||
></el-col>
|
||||
<!-- <el-col :span="12" :offset="0"
|
||||
><el-form-item label="日期" prop="preparedDate">
|
||||
<el-date-picker clearable v-model="form.preparedDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期">
|
||||
</el-date-picker> </el-form-item
|
||||
></el-col> -->
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-table v-loading="loading" :data="selectPlanList" v-if="form.id">
|
||||
<el-table-column label="物资名称" align="center" prop="name" />
|
||||
|
||||
<el-table-column label="质量标准" align="center" prop="qs" />
|
||||
<el-table-column label="规格型号" align="center" prop="specification" />
|
||||
<el-table-column label="计量单位" align="center" prop="unit" width="80" />
|
||||
<el-table-column label="需求数量" align="center" prop="demandQuantity" v-if="form.docType == 2">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.demandQuantity" placeholder="请输入" type="number" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="需求数量" align="center" prop="demandQuantity" v-else />
|
||||
<!-- <el-table-column label="需求到货时间" align="center" prop="arrivalTime" width="250" /> -->
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
</el-table>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-dialog title="上传文件" v-model="uploadDialogVisible" width="30%">
|
||||
<file-upload v-model="feedbackUrl" :file-type="['pdf']" :onUploadSuccess="handleSuccess" />
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="uploadDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="uploadFile">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 查看文件列表 -->
|
||||
<el-dialog title="物流单号" v-model="viewVisible" width="45%">
|
||||
<el-table v-if="fileList.length > 0" :data="fileList" style="width: 100%" border>
|
||||
<el-table-column label="单号" align="center" prop="ltn" />
|
||||
<el-table-column label="数量" align="center" prop="num" />
|
||||
<el-table-column label="物资名称" align="center" prop="name" />
|
||||
<el-table-column label="规格型号" align="center" prop="specification">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" icon="Finished" @click="getDetailList(scope.row.ltn)"> 查看物流信息</el-button></template
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div v-else class="empty-list text-center">暂无文件</div>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button type="primary" @click="viewVisible = false">关闭</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<logisticsDetail ref="logisticsDetailRef"></logisticsDetail>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="PurchaseDoc" lang="ts">
|
||||
import { getBatch, listBatch } from '@/api/materials/batchPlan';
|
||||
import { listPurchaseDoc, getPurchaseDoc, listLink, addPurchaseDoc, updatePurchaseDoc, logisticsDetial } from '@/api/materials/purchaseDoc';
|
||||
import { PurchaseDocVO, PurchaseDocQuery, PurchaseDocForm } from '@/api/materials/purchaseDoc/types';
|
||||
import { listContractor } from '@/api/project/contractor';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import logisticsDetail from './comm/logisticsDetail.vue';
|
||||
import type { DrawerProps } from 'element-plus';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { supply, wf_business_status } = toRefs<any>(proxy?.useDict('supply', 'wf_business_status'));
|
||||
// 获取用户 store
|
||||
const userStore = useUserStoreHook();
|
||||
// 从 store 中获取项目列表和当前选中的项目
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
const uploadDialogVisible = ref(false);
|
||||
const purchaseDocList = ref<PurchaseDocVO[]>([]);
|
||||
const buttonLoading = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref<Array<string | number>>([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const feedbackUrl = ref('');
|
||||
// 组件
|
||||
const logisticsDetailRef = ref<InstanceType<typeof logisticsDetail>>();
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const purchaseDocFormRef = ref<ElFormInstance>();
|
||||
const IP = 'http://192.168.110.151:7788';
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
const batchOptions = ref([]);
|
||||
const supplierOptions = ref([]);
|
||||
|
||||
const planList = ref([]);
|
||||
const initFormData: any = {
|
||||
id: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
|
||||
docCode: undefined,
|
||||
supplier: undefined,
|
||||
reason: undefined,
|
||||
name: undefined,
|
||||
arrivalDate: undefined,
|
||||
designDirectorTel: undefined,
|
||||
technicalDirectorTel: undefined,
|
||||
receivingAddress: undefined,
|
||||
contacts: undefined,
|
||||
associationList: [],
|
||||
projectDirector: undefined,
|
||||
purchasingAgent: undefined,
|
||||
preparedDate: undefined,
|
||||
feedbackUrl: undefined,
|
||||
signingUnit: undefined,
|
||||
signingPerson: undefined,
|
||||
signingDate: undefined,
|
||||
status: undefined
|
||||
};
|
||||
const data = reactive({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
projectId: currentProject.value?.id,
|
||||
|
||||
docCode: undefined,
|
||||
supplier: undefined,
|
||||
reason: undefined,
|
||||
name: undefined,
|
||||
arrivalDate: undefined,
|
||||
designDirectorTel: undefined,
|
||||
technicalDirectorTel: undefined,
|
||||
receivingAddress: undefined,
|
||||
contacts: undefined,
|
||||
projectDirector: undefined,
|
||||
purchasingAgent: undefined,
|
||||
preparedDate: undefined,
|
||||
feedbackUrl: undefined,
|
||||
signingUnit: undefined,
|
||||
signingPerson: undefined,
|
||||
signingDate: undefined,
|
||||
status: undefined,
|
||||
params: {}
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }],
|
||||
// 电话号码验证
|
||||
technicalDirectorTel: [
|
||||
{ required: true, message: '请输入电话', trigger: 'blur' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
||||
],
|
||||
designDirectorTel: [
|
||||
{ required: true, message: '请输入电话', trigger: 'blur' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询物资-采购联系单列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listPurchaseDoc(queryParams.value);
|
||||
purchaseDocList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
purchaseDocFormRef.value?.resetFields();
|
||||
form.value.projectId = currentProject.value?.id;
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
const fileList = ref([]);
|
||||
const viewVisible = ref(false);
|
||||
const handleView = async (row?: any) => {
|
||||
const res = await listLink({
|
||||
docId: row.id
|
||||
});
|
||||
fileList.value = res.rows;
|
||||
|
||||
viewVisible.value = true;
|
||||
};
|
||||
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: PurchaseDocVO[]) => {
|
||||
ids.value = selection.map((item) => item.id);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
};
|
||||
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
reset();
|
||||
dialog.visible = true;
|
||||
dialog.title = '添加物资-采购联系单';
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: PurchaseDocVO) => {
|
||||
reset();
|
||||
const _id = row?.id || ids.value[0];
|
||||
const res = await getPurchaseDoc(_id);
|
||||
Object.assign(form.value, res.data);
|
||||
getPlanList();
|
||||
form.value.planId = form.value.associationList?.map((item: any) => item.planId);
|
||||
|
||||
dialog.visible = true;
|
||||
dialog.title = '修改物资-采购联系单';
|
||||
};
|
||||
|
||||
const selectPlanList = computed(() => {
|
||||
if (!form.value.planId) return [];
|
||||
const result = planList.value.filter((item) => form.value.planId.includes(item.id));
|
||||
return result;
|
||||
});
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
purchaseDocFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
form.value.associationList = form.value.planId?.map((item: any) => ({
|
||||
planId: item
|
||||
}));
|
||||
|
||||
if (form.value.id) {
|
||||
await updatePurchaseDoc(form.value).finally(() => (buttonLoading.value = false));
|
||||
} else {
|
||||
await addPurchaseDoc(form.value).finally(() => (buttonLoading.value = false));
|
||||
}
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getPlanList = async () => {
|
||||
form.value.planId = '';
|
||||
const res = await getBatch({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
projectId: currentProject.value?.id,
|
||||
mrpBaseId: form.value.mrpBaseId
|
||||
});
|
||||
planList.value = res.rows;
|
||||
};
|
||||
|
||||
const getBatchList = async () => {
|
||||
const res = await listBatch({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
planCode: undefined,
|
||||
projectId: currentProject.value?.id
|
||||
});
|
||||
batchOptions.value = res.rows.filter((item) => item.status == 'finish');
|
||||
};
|
||||
|
||||
const getSupplierList = async () => {
|
||||
const res = await listContractor({
|
||||
projectId: currentProject.value?.id,
|
||||
pageNum: 1,
|
||||
contractorType: 4,
|
||||
pageSize: 10000
|
||||
});
|
||||
supplierOptions.value = res.rows;
|
||||
};
|
||||
|
||||
/** 分享按钮操作 */
|
||||
const handleShare = async (row?: PurchaseDocVO) => {
|
||||
const textarea = document.createElement('textarea');
|
||||
const data = JSON.stringify({
|
||||
docId: row.id,
|
||||
mrpBaseId: row.mrpBaseId,
|
||||
projectId: currentProject.value?.id,
|
||||
token: 'Bearer ' + getToken()
|
||||
});
|
||||
// 获取当前域名地址
|
||||
console.log(location);
|
||||
// textarea.value = IP + '/materials/purchaseDoc/uploadCode?data=' + data;
|
||||
textarea.value = location.host + '/materials/purchaseDoc/uploadCode?data=' + data;
|
||||
textarea.style.position = 'fixed';
|
||||
textarea.style.opacity = '0';
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
const success = document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
ElMessage[success ? 'success' : 'error'](success ? '复制成功！' : '复制失败');
|
||||
};
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleUpload = (row?: PurchaseDocVO) => {
|
||||
form.value.feedbackUrl = '';
|
||||
form.value.id = row.id;
|
||||
uploadDialogVisible.value = true;
|
||||
};
|
||||
|
||||
const uploadFile = async () => {
|
||||
if (!feedbackUrl.value) {
|
||||
proxy?.$modal.msgError('请上传文件');
|
||||
return;
|
||||
}
|
||||
await updatePurchaseDoc(form.value).finally(() => (buttonLoading.value = false));
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
uploadDialogVisible.value = false;
|
||||
|
||||
await getList();
|
||||
};
|
||||
|
||||
const handleSuccess = (list, res: any) => {
|
||||
form.value.feedbackUrl = res.data.url;
|
||||
};
|
||||
|
||||
/** 审核按钮操作 */
|
||||
const handleAudit = async (row?: PurchaseDocVO) => {
|
||||
proxy?.$tab.closePage(route);
|
||||
proxy?.$tab.openPage('/approval/purchaseDoc/indexEdit', '审核采购联系单', {
|
||||
id: row.id,
|
||||
type: 'update'
|
||||
});
|
||||
};
|
||||
/** 审核按钮操作 */
|
||||
const handleViewDetail = async (row?: PurchaseDocVO) => {
|
||||
proxy?.$tab.closePage(route);
|
||||
proxy?.$tab.openPage('/approval/purchaseDoc/indexEdit', '审核采购联系单', {
|
||||
id: row.id,
|
||||
type: 'view'
|
||||
});
|
||||
};
|
||||
const getDetailList = async (id) => {
|
||||
let res = await logisticsDetial(id);
|
||||
if (res.code == 200) {
|
||||
logisticsDetailRef.value.open(res.data);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
getSupplierList();
|
||||
getBatchList();
|
||||
});
|
||||
|
||||
//监听项目id刷新数据
|
||||
const listeningProject = watch(
|
||||
() => currentProject.value?.id,
|
||||
(nid, oid) => {
|
||||
queryParams.value.projectId = nid;
|
||||
form.value.projectId = nid;
|
||||
getList();
|
||||
getSupplierList();
|
||||
getBatchList();
|
||||
}
|
||||
);
|
||||
|
||||
onUnmounted(() => {
|
||||
listeningProject();
|
||||
});
|
||||
</script>
|
||||
439
src/views/materials/purchaseDoc/indexEdit.vue
Normal file
439
src/views/materials/purchaseDoc/indexEdit.vue
Normal file
@ -0,0 +1,439 @@
|
||||
<template>
|
||||
<div class="p-4 bg-gray-50">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- 顶部按钮区域 -->
|
||||
<el-card class="mb-4 rounded-lg shadow-sm bg-white border border-gray-100 transition-all hover:shadow-md">
|
||||
<approvalButton
|
||||
@submitForm="submitForm"
|
||||
@approvalVerifyOpen="approvalVerifyOpen"
|
||||
@handleApprovalRecord="handleApprovalRecord"
|
||||
:buttonLoading="buttonLoading"
|
||||
:id="form.id"
|
||||
:status="form.status"
|
||||
:pageType="routeParams.type"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<el-card class="rounded-lg shadow-sm bg-white border border-gray-100 transition-all hover:shadow-md overflow-hidden">
|
||||
<div class="p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-100">
|
||||
<h3 class="text-lg font-semibold text-gray-800">采购单信息</h3>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<el-form ref="leaveFormRef" disabled :model="form" label-width="100px" class="space-y-4">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="采购单编号" prop="docCode"> <el-input v-model="form.docCode" placeholder="请输入采购单编号" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="供应商" prop="supplier">
|
||||
<el-select v-model="form.supplier" value-key="id" placeholder="请选择供应商" clearable filterable @change="">
|
||||
<el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.name"> </el-option>
|
||||
</el-select> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="需求批次号" prop="mrpBaseId">
|
||||
<el-select v-model="form.mrpBaseId" value-key="id" placeholder="请选择需求批次号" filterable @change="getPlanList">
|
||||
<el-option v-for="item in batchOptions" :key="item.id" :label="item.planCode" :value="item.id"> </el-option>
|
||||
</el-select> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="需求计划" prop="planId">
|
||||
<el-select v-model="form.planId" value-key="id" placeholder="请选择需求计划" multiple filterable :disabled="!form.mrpBaseId">
|
||||
<el-option v-for="item in planList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
|
||||
</el-select> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="事由" prop="reason"> <el-input v-model="form.reason" placeholder="请输入事由" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="设备统称" prop="name"> <el-input v-model="form.name" placeholder="请输入设备统称" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="到货日期" prop="arrivalDate">
|
||||
<el-date-picker clearable v-model="form.arrivalDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择到货日期">
|
||||
</el-date-picker> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="负责人联系方式" prop="designDirectorTel">
|
||||
<el-input v-model="form.designDirectorTel" placeholder="请输入设计负责人联系方式" type="number" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="现场联系方式" prop="technicalDirectorTel">
|
||||
<el-input v-model="form.technicalDirectorTel" placeholder="请输入现场技术负责人联系方式" type="number" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="收货地址" prop="receivingAddress">
|
||||
<el-input v-model="form.receivingAddress" placeholder="请输入收货地址" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="联系人" prop="contacts"> <el-input v-model="form.contacts" placeholder="请输入联系人" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="项目负责人" prop="projectDirector">
|
||||
<el-input v-model="form.projectDirector" placeholder="请输入项目负责人" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="采购经办人" prop="purchasingAgent">
|
||||
<el-input v-model="form.purchasingAgent" placeholder="请输入采购经办人" /> </el-form-item
|
||||
></el-col>
|
||||
<el-col :span="12" :offset="0"
|
||||
><el-form-item label="日期" prop="preparedDate">
|
||||
<el-date-picker clearable v-model="form.preparedDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期">
|
||||
</el-date-picker> </el-form-item
|
||||
></el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
<!-- 提交组件 -->
|
||||
<submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
|
||||
<approvalRecord ref="approvalRecordRef"></approvalRecord>
|
||||
<!-- 流程选择对话框 -->
|
||||
<el-dialog
|
||||
draggable
|
||||
v-model="dialogVisible.visible"
|
||||
:title="dialogVisible.title"
|
||||
:before-close="handleClose"
|
||||
width="500"
|
||||
class="rounded-lg shadow-lg"
|
||||
>
|
||||
<div class="p-4">
|
||||
<p class="text-gray-600 mb-4">请选择要启动的流程：</p>
|
||||
<el-select v-model="flowCode" placeholder="请选择流程" style="width: 100%">
|
||||
<el-option v-for="item in flowCodeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer p-4 border-t border-gray-100 flex justify-end space-x-3">
|
||||
<el-button @click="handleClose" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
|
||||
>取消</el-button
|
||||
>
|
||||
<el-button type="primary" @click="submitFlow()" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
|
||||
>确认</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Leave" lang="ts">
|
||||
import { LeaveForm } from '@/api/workflow/leave/types';
|
||||
import { startWorkFlow } from '@/api/workflow/task';
|
||||
import SubmitVerify from '@/components/Process/submitVerify.vue';
|
||||
import ApprovalRecord from '@/components/Process/approvalRecord.vue';
|
||||
import ApprovalButton from '@/components/Process/approvalButton.vue';
|
||||
import { StartProcessBo } from '@/api/workflow/workflowCommon/types';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
import { getDrawing } from '@/api/design/drawing';
|
||||
import { updateDesignChange, getDesignChange } from '@/api/design/designChange';
|
||||
import { getPurchaseDoc } from '@/api/materials/purchaseDoc';
|
||||
import { getBatch } from '@/api/materials/batchPlan';
|
||||
|
||||
// 获取用户 store
|
||||
const userStore = useUserStoreHook();
|
||||
// 从 store 中获取项目列表和当前选中的项目
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
const buttonLoading = ref(false);
|
||||
const loading = ref(true);
|
||||
//路由参数
|
||||
const routeParams = ref<Record<string, any>>({});
|
||||
const flowCodeOptions = [
|
||||
{
|
||||
value: currentProject.value?.id + '_purchaseDoc',
|
||||
label: '采购单审批'
|
||||
}
|
||||
];
|
||||
|
||||
const flowCode = ref<string>('');
|
||||
const status = ref<string>('');
|
||||
const dialogVisible = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: '流程定义'
|
||||
});
|
||||
//提交组件
|
||||
const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
|
||||
//审批记录组件
|
||||
const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
|
||||
//按钮组件
|
||||
const approvalButtonRef = ref<InstanceType<typeof ApprovalButton>>();
|
||||
|
||||
const leaveFormRef = ref<ElFormInstance>();
|
||||
const dialog = reactive({
|
||||
visible: false,
|
||||
title: '',
|
||||
isEdit: false
|
||||
});
|
||||
const submitFormData = ref<StartProcessBo>({
|
||||
businessId: '',
|
||||
flowCode: '',
|
||||
variables: {}
|
||||
});
|
||||
const taskVariables = ref<Record<string, any>>({});
|
||||
|
||||
const initFormData = {
|
||||
id: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
|
||||
docCode: undefined,
|
||||
supplier: undefined,
|
||||
reason: undefined,
|
||||
name: undefined,
|
||||
arrivalDate: undefined,
|
||||
designDirectorTel: undefined,
|
||||
technicalDirectorTel: undefined,
|
||||
receivingAddress: undefined,
|
||||
contacts: undefined,
|
||||
associationList: [],
|
||||
|
||||
projectDirector: undefined,
|
||||
purchasingAgent: undefined,
|
||||
preparedDate: undefined,
|
||||
feedbackUrl: undefined,
|
||||
signingUnit: undefined,
|
||||
signingPerson: undefined,
|
||||
signingDate: undefined,
|
||||
status: undefined
|
||||
};
|
||||
const data = reactive({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
projectId: currentProject.value?.id,
|
||||
fileName: undefined,
|
||||
fileType: undefined,
|
||||
fileSuffix: undefined,
|
||||
fileStatus: undefined,
|
||||
originalName: undefined,
|
||||
newest: undefined,
|
||||
params: {}
|
||||
}
|
||||
});
|
||||
|
||||
const handleClose = () => {
|
||||
dialogVisible.visible = false;
|
||||
flowCode.value = '';
|
||||
buttonLoading.value = false;
|
||||
};
|
||||
const { form, rules } = toRefs(data);
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
leaveFormRef.value?.resetFields();
|
||||
};
|
||||
|
||||
/** 获取详情 */
|
||||
const getInfo = () => {
|
||||
loading.value = true;
|
||||
buttonLoading.value = false;
|
||||
nextTick(async () => {
|
||||
const res = await getPurchaseDoc(routeParams.value.id);
|
||||
Object.assign(form.value, res.data);
|
||||
getPlanList();
|
||||
form.value.planId = form.value.associationList?.map((item: any) => item.planId);
|
||||
loading.value = false;
|
||||
buttonLoading.value = false;
|
||||
});
|
||||
};
|
||||
const planList = ref([]);
|
||||
|
||||
const getPlanList = async () => {
|
||||
form.value.planId = '';
|
||||
const res = await getBatch({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
mrpBaseId: undefined,
|
||||
projectId: currentProject.value?.id,
|
||||
mrpBaseId: form.value.mrpBaseId
|
||||
});
|
||||
planList.value = res.rows;
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = (status1: string) => {
|
||||
status.value = status1;
|
||||
dialog.visible = false;
|
||||
submit(status.value, form.value);
|
||||
};
|
||||
|
||||
const submitFlow = async () => {
|
||||
handleStartWorkFlow(form.value);
|
||||
dialogVisible.visible = false;
|
||||
};
|
||||
//提交申请
|
||||
const handleStartWorkFlow = async (data: LeaveForm) => {
|
||||
try {
|
||||
submitFormData.value.flowCode = flowCode.value;
|
||||
submitFormData.value.businessId = data.id;
|
||||
//流程变量
|
||||
taskVariables.value = {
|
||||
// leave4/5 使用的流程变量
|
||||
userList: ['1', '3', '4']
|
||||
};
|
||||
submitFormData.value.variables = taskVariables.value;
|
||||
const resp = await startWorkFlow(submitFormData.value);
|
||||
if (submitVerifyRef.value) {
|
||||
buttonLoading.value = false;
|
||||
submitVerifyRef.value.openDialog(resp.data.taskId);
|
||||
}
|
||||
} finally {
|
||||
buttonLoading.value = false;
|
||||
}
|
||||
};
|
||||
//审批记录
|
||||
const handleApprovalRecord = () => {
|
||||
approvalRecordRef.value.init(form.value.id);
|
||||
};
|
||||
//提交回调
|
||||
const submitCallback = async () => {
|
||||
await proxy.$tab.closePage(proxy.$route);
|
||||
proxy.$router.go(-1);
|
||||
};
|
||||
//审批
|
||||
const approvalVerifyOpen = async () => {
|
||||
submitVerifyRef.value.openDialog(routeParams.value.taskId, true, routeParams.value.businessId);
|
||||
// submitVerifyRef.value.openDialog(routeParams.value.taskId);
|
||||
};
|
||||
// 图纸上传成功之后 开始提交
|
||||
const submit = async (status, data) => {
|
||||
form.value = data;
|
||||
if (status === 'draft') {
|
||||
buttonLoading.value = false;
|
||||
proxy?.$modal.msgSuccess('暂存成功');
|
||||
proxy.$tab.closePage(proxy.$route);
|
||||
proxy.$router.go(-1);
|
||||
} else {
|
||||
if ((form.value.status === 'draft' && (flowCode.value === '' || flowCode.value === null)) || routeParams.value.type === 'add') {
|
||||
flowCode.value = flowCodeOptions[0].value;
|
||||
dialogVisible.visible = true;
|
||||
return;
|
||||
}
|
||||
//说明启动过先随意穿个参数
|
||||
if (flowCode.value === '' || flowCode.value === null) {
|
||||
flowCode.value = 'xx';
|
||||
}
|
||||
console.log(data);
|
||||
await handleStartWorkFlow(data);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(async () => {
|
||||
routeParams.value = proxy.$route.query;
|
||||
reset();
|
||||
loading.value = false;
|
||||
if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') {
|
||||
getInfo();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
/* 全局样式 */
|
||||
:root {
|
||||
--primary: #409eff;
|
||||
--primary-light: #66b1ff;
|
||||
--primary-dark: #3a8ee6;
|
||||
--success: #67c23a;
|
||||
--warning: #e6a23c;
|
||||
--danger: #f56c6c;
|
||||
--info: #909399;
|
||||
}
|
||||
|
||||
/* 表单样式优化 */
|
||||
.el-form-item {
|
||||
.el-form-item__label {
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-input__inner,
|
||||
.el-select .el-input__inner {
|
||||
border-radius: 4px;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
box-shadow 0.2s;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--primary-light);
|
||||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
border-radius: 4px;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
box-shadow 0.2s;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--primary-light);
|
||||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮样式优化 */
|
||||
.el-button {
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&.is-primary {
|
||||
background-color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-light);
|
||||
border-color: var(--primary-light);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--primary-dark);
|
||||
border-color: var(--primary-dark);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-text {
|
||||
color: var(--primary);
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-light);
|
||||
background-color: rgba(64, 158, 255, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片样式优化 */
|
||||
.el-card {
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
/* transform: translateY(-2px); */
|
||||
}
|
||||
}
|
||||
|
||||
/* 对话框样式优化 */
|
||||
.el-dialog {
|
||||
.el-dialog__header {
|
||||
background-color: #f5f7fa;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 15px 20px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
188
src/views/materials/purchaseDoc/uploadCode.vue
Normal file
188
src/views/materials/purchaseDoc/uploadCode.vue
Normal file
@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<el-card shadow="always" :body-style="{ padding: '20px' }">
|
||||
<template #header>
|
||||
<div>
|
||||
<span>物流单号填写</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 表单引用，用于触发整体验证 -->
|
||||
<el-form :model="shareForm" label-width="80px" ref="formRef" :rules="formRules">
|
||||
<!-- 循环项添加prop属性，指定嵌套字段路径 -->
|
||||
<div v-for="(item, index) in shareForm.list" :key="index" class="row-wrap flex items-center">
|
||||
<el-row :gutter="20" class="w-full">
|
||||
<!-- 计划：必填 + 选择触发验证 -->
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-form-item label="计划" :prop="`list[${index}].planId`" :rules="[{ required: true, message: '请选择计划', trigger: 'change' }]">
|
||||
<el-select v-model="item.planId" placeholder="请选择">
|
||||
<el-option v-for="plan in planList" :key="plan.id" :label="plan.name" :value="plan.id.toString()" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 数量：必填 + 数字验证（大于0） -->
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-form-item label="数量" :prop="`list[${index}].num`">
|
||||
<el-input v-model.number="item.num" placeholder="请填写数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 物流单号：必填 + 非空验证 -->
|
||||
<el-col :xs="20" :sm="10" :lg="6">
|
||||
<el-form-item
|
||||
label="物流单号"
|
||||
:prop="`list[${index}].ltn`"
|
||||
:rules="[
|
||||
{ required: true, message: '请填写物流单号', trigger: 'blur' },
|
||||
{ min: 3, max: 50, message: '物流单号长度需在3-50字符之间', trigger: 'blur' }
|
||||
]"
|
||||
>
|
||||
<el-input v-model="item.ltn" placeholder="请填写物流单号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="4" :sm="2" :lg="2" class="flex items-center justify-center">
|
||||
<el-button type="danger" icon="Delete" size="small" @click="deleteRow(index)" :disabled="shareForm.list.length <= 1" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="addRow" icon="Plus">添加物流单</el-button>
|
||||
<el-button type="success" @click="onSubmit">提交</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getBatch } from '@/api/materials/batchPlan';
|
||||
import { uploadCode, ltnList } from '@/api/materials/purchaseDoc';
|
||||
import { removeToken } from '@/utils/auth';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { getCurrentInstance, onMounted, onUnmounted, ref } from 'vue';
|
||||
import type { ElForm } from 'element-plus';
|
||||
|
||||
const route = useRoute();
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
|
||||
// 表单引用，用于调用验证方法
|
||||
const formRef = ref<InstanceType<typeof ElForm>>(null);
|
||||
|
||||
const shareForm = ref({
|
||||
docId: '',
|
||||
supplier: '',
|
||||
mrpBaseId: '',
|
||||
projectId: '',
|
||||
token: '',
|
||||
list: [
|
||||
{
|
||||
planId: '',
|
||||
num: 0, // 初始化数量为0，避免undefined影响数字验证
|
||||
ltn: ''
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const formRules = ref({});
|
||||
|
||||
const planList = ref([]);
|
||||
const getPlanList = async () => {
|
||||
const res = await getBatch({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
projectId: shareForm.value.projectId,
|
||||
mrpBaseId: shareForm.value.mrpBaseId,
|
||||
token: shareForm.value.token
|
||||
});
|
||||
planList.value = res.rows;
|
||||
getOrder();
|
||||
};
|
||||
|
||||
const addRow = () => {
|
||||
shareForm.value.list.push({
|
||||
planId: '',
|
||||
num: 0, // 新增行初始化数量为0
|
||||
ltn: ''
|
||||
});
|
||||
};
|
||||
|
||||
const deleteRow = (index: number) => {
|
||||
proxy?.$modal
|
||||
.confirm('确定要删除这行数据吗？')
|
||||
.then(() => {
|
||||
shareForm.value.list.splice(index, 1);
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// 表单提交验证
|
||||
const onSubmit = async () => {
|
||||
// 先触发Element Plus表单的整体验证
|
||||
const formValid = await formRef.value?.validate().catch(() => false);
|
||||
if (!formValid) {
|
||||
proxy?.$modal.msgError('请完善所有必填项信息');
|
||||
return;
|
||||
}
|
||||
|
||||
// 再执行数据清洗和完整性校验（避免空行提交）
|
||||
const cleanedArr = shareForm.value.list.filter((item) => item.planId && item.num > 0 && item.ltn);
|
||||
if (cleanedArr.length === 0) {
|
||||
proxy?.$modal.msgError('至少需填写一条完整的物流单信息');
|
||||
return;
|
||||
}
|
||||
|
||||
// 提交前替换列表为清洗后的数据（排除空行）
|
||||
const submitData = {
|
||||
...shareForm.value,
|
||||
list: cleanedArr
|
||||
};
|
||||
|
||||
try {
|
||||
await uploadCode(submitData);
|
||||
proxy?.$modal.msgSuccess('上传成功');
|
||||
// getOrder();
|
||||
// 重置表单
|
||||
// shareForm.value.list = [{ planId: '', num: 0, ltn: '' }];
|
||||
} catch (error) {
|
||||
proxy?.$modal.msgError('上传失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
const getOrder = async () => {
|
||||
let res = await ltnList(shareForm.value);
|
||||
shareForm.value.list =
|
||||
res.rows.length > 0
|
||||
? res.rows.map((item) => ({
|
||||
planId: item.planId?.toString() || '', // 确保与下拉框value类型一致
|
||||
num: item.num || 0,
|
||||
ltn: item.ltn || ''
|
||||
}))
|
||||
: [{ planId: '', num: 0, ltn: '' }];
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
let data = JSON.parse(route.query.data as string);
|
||||
shareForm.value.docId = data.docId || '';
|
||||
shareForm.value.supplier = data.supplier || '';
|
||||
shareForm.value.mrpBaseId = data.mrpBaseId || '';
|
||||
shareForm.value.projectId = data.projectId || '';
|
||||
shareForm.value.token = data.token || '';
|
||||
getPlanList();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
removeToken();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.row-wrap {
|
||||
border-bottom: 1px dashed #dcdfe6;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user