1056 lines
30 KiB
Vue
1056 lines
30 KiB
Vue
<!-- 药库订货单 -->
|
||
<template>
|
||
<div class="medicine-container app-container">
|
||
<!-- 顶部按钮 -->
|
||
<el-row :gutter="20" class="mb8">
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="primary"
|
||
icon="Plus"
|
||
plain
|
||
@click="handleAdd"
|
||
:disabled="isAddDisabled"
|
||
v-hasPermi="['pharmacy-warehouse:stockIn-order:add']"
|
||
>
|
||
新增
|
||
</el-button>
|
||
</el-col>
|
||
<!-- <el-col :span="1.5">
|
||
<el-button
|
||
type="warning"
|
||
icon="Edit"
|
||
plain
|
||
@click="handleEdit"
|
||
:disabled="isEditDisabled"
|
||
v-hasPermi="['pharmacy-warehouse:stockIn-order:edit']"
|
||
>编辑</el-button
|
||
>
|
||
</el-col> -->
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="danger"
|
||
icon="Delete"
|
||
plain
|
||
@click="handleDelete"
|
||
:disabled="isDeleteDisabled"
|
||
v-hasPermi="['pharmacy-warehouse:stockIn-order:delete']"
|
||
>
|
||
删除
|
||
</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="danger"
|
||
icon="Close"
|
||
plain
|
||
@click="handleCancel"
|
||
:disabled="isCancelDisabled"
|
||
v-hasPermi="['pharmacy-warehouse:stockIn-order:cancel']"
|
||
>
|
||
取消
|
||
</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="success"
|
||
icon="Check"
|
||
plain
|
||
@click="handleAudit"
|
||
:disabled="isAuditDisabled"
|
||
v-hasPermi="['pharmacy-warehouse:stockIn-order:audit']"
|
||
>
|
||
审核
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<!-- 左侧搜索 -->
|
||
<el-col :span="4" style="border: 1px solid #ebeef5; height: calc(100vh - 200px)">
|
||
<el-row :gutter="10" style="margin-top: 10px">
|
||
<el-col :span="24">
|
||
<el-form ref="tableFormRef" :model="tableForm" style="width: 100%" :rules="rules">
|
||
<el-form-item label="库房：" label-width="100px">
|
||
<el-select
|
||
v-model="tableForm.locationId"
|
||
placeholder="请选择库房"
|
||
clearable
|
||
filterable
|
||
@change="handleLocationChange(tableForm.locationId)"
|
||
>
|
||
<el-option
|
||
v-for="item in cabinetListOptions"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-form
|
||
ref="queryParamsRef"
|
||
:model="queryParams"
|
||
style="width: 100%"
|
||
:rules="rules"
|
||
@submit.prevent
|
||
>
|
||
<el-form-item label="单据搜索" label-width="100px">
|
||
<el-input
|
||
v-model="queryParams.searchKey"
|
||
placeholder="请输入单据号"
|
||
@keyup.enter="getList"
|
||
clearable
|
||
>
|
||
<template #append>
|
||
<el-button icon="Search" @click="getList" />
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-scrollbar height="calc(100vh - 350px)" style="width: 100%">
|
||
<div class="order-list-container">
|
||
<!-- 有数据时显示列表 -->
|
||
<template v-if="orderList.length > 0">
|
||
<div
|
||
v-for="item in orderList"
|
||
:key="item.supplyBusNo"
|
||
:class="['order-item', { 'is-active': selectedOrder === item }]"
|
||
@click="handleOrderClick(item)"
|
||
>
|
||
<el-card class="order-card" shadow="hover">
|
||
<div class="order-header">
|
||
<div class="order-number">
|
||
<el-icon><Document /></el-icon>
|
||
<span class="number-text">{{ item.supplyBusNo }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="order-content">
|
||
<div class="info-item">
|
||
<el-icon class="info-icon"><User /></el-icon>
|
||
<span class="label">采购员：</span>
|
||
<span class="value">{{ item.applicantId_dictText }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<el-icon class="info-icon"><Shop /></el-icon>
|
||
<span class="label">供应商：</span>
|
||
<span class="value">{{ item.supplierId_dictText }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<el-icon class="info-icon"><User /></el-icon>
|
||
<span class="label">审核状态：</span>
|
||
<el-tag type="success" v-if="item.statusEnum_enumText === '同意'">
|
||
{{ item.statusEnum_enumText }}
|
||
</el-tag>
|
||
<el-tag type="danger" v-else>
|
||
{{ item.statusEnum_enumText }}
|
||
</el-tag>
|
||
</div>
|
||
<div class="info-item">
|
||
<el-icon class="info-icon"><Files /></el-icon>
|
||
<span class="label">单据类型：</span>
|
||
<span class="value">{{ item.typeEnum_enumText }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<el-icon class="info-icon"><Calendar /></el-icon>
|
||
<span class="label">单据日期：</span>
|
||
<span class="value">{{
|
||
parseTime(item.applyTime, '{y}-{m}-{d} {h}:{i}:{s}')
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 空状态显示 -->
|
||
<div v-else class="empty-state">
|
||
<el-empty description="暂无单据" :image-size="80">
|
||
<el-button type="primary" @click="handleAdd"> 新增单据 </el-button>
|
||
</el-empty>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
</el-row>
|
||
</el-col>
|
||
<!-- 右侧表格 -->
|
||
<el-col :span="20">
|
||
<el-row :gutter="10">
|
||
<el-col :span="24">
|
||
<orderTable
|
||
ref="orderTableRef"
|
||
:form="tableForm"
|
||
:table-data="tableData"
|
||
:audit-form="auditForm"
|
||
:table-data-total="tableDataTotal"
|
||
:is-add-or-edit-order="isAddOrEditOrder"
|
||
:supplier-option="supplierOption"
|
||
:supply-type-options="supplyTypeOptions"
|
||
:supply-status-options="supplyStatusOptions"
|
||
:supply-category-options="supplyCategoryOptions"
|
||
:practitioner-option="practitionerOption"
|
||
:packaging-condition-options="packagingConditionOptions"
|
||
:acceptance-resultory-options="acceptanceResultoryOptions"
|
||
:button-show="buttonShow"
|
||
@update:query-params="handleQueryParamsUpdate"
|
||
@update:form="handleFormUpdate"
|
||
@getList="getList"
|
||
@updateButtonState="handleUpdateButtonState"
|
||
>
|
||
</orderTable>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
import orderTable from './components/orderTable.vue';
|
||
import {
|
||
getInit,
|
||
getOrderList,
|
||
deleteOrder,
|
||
agreeApproval,
|
||
getOrderDetail,
|
||
} from './components/api';
|
||
import useUserStore from '@/store/modules/user';
|
||
import { parseTime } from '@/utils/his';
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
|
||
// 获取 pinia 中用户信息
|
||
const userInfo = useUserStore();
|
||
// 左侧查询参数
|
||
const queryParams = ref({
|
||
searchKey: '',
|
||
});
|
||
// 获取当前实例
|
||
const { proxy } = getCurrentInstance();
|
||
// 右侧表格查询参数 + 分页参数 + 添加查询参数
|
||
const tableForm = ref({
|
||
locationId: undefined,
|
||
busNo: undefined,
|
||
applyTime: undefined,
|
||
applicantId: undefined,
|
||
reason: undefined,
|
||
categoryEnum: undefined,
|
||
supplierId: undefined,
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
});
|
||
// 右侧表格数据
|
||
const tableData = ref([]);
|
||
// 右侧审核表单
|
||
const auditForm = ref({
|
||
approvalTime: undefined,
|
||
statusEnum: undefined,
|
||
statusEnum_enumText: undefined,
|
||
approverId: undefined,
|
||
});
|
||
// 订单编辑还是新增
|
||
const isAddOrEditOrder = ref({
|
||
isAddOrder: false,
|
||
isEditOrder: false,
|
||
});
|
||
// 仓库列表 cabinetList
|
||
const cabinetListOptions = ref([]);
|
||
// 查询经手人列表 practitionerOption
|
||
const practitionerOption = ref([]);
|
||
// 查询供应商列表 supplierOption
|
||
const supplierOption = ref([]);
|
||
// 审批状态 supplyStatusOptions
|
||
const supplyStatusOptions = ref([]);
|
||
// 单据类型 supplyTypeOptions
|
||
const supplyTypeOptions = ref([]);
|
||
// 单据分类 supplyCategoryOptions
|
||
const supplyCategoryOptions = ref([]);
|
||
// 包装情况 packagingConditionOptions
|
||
const packagingConditionOptions = ref([]);
|
||
// 验收结果 acceptanceResultoryOptions
|
||
const acceptanceResultoryOptions = ref([]);
|
||
// 订货单单据列表 orderList
|
||
const orderList = ref([]);
|
||
// 订货单单据列表总条数
|
||
const tableDataTotal = ref(0);
|
||
// 选中的单据ID
|
||
const selectedOrder = ref(null);
|
||
// 是否禁用新增按钮
|
||
const isAddDisabled = ref(false);
|
||
// 是否禁用编辑按钮
|
||
const isEditDisabled = ref(true);
|
||
// 是否禁用取消按钮
|
||
const isCancelDisabled = ref(true);
|
||
// 是否禁用删除按钮
|
||
const isDeleteDisabled = ref(true);
|
||
// 是否禁用审核按钮
|
||
const isAuditDisabled = ref(true);
|
||
// 按钮显示 buttonShow
|
||
const buttonShow = ref({
|
||
isAddShow: false,
|
||
isDeleteShow: false,
|
||
isSaveShow: false,
|
||
isEditShow: false,
|
||
});
|
||
const rules = ref({
|
||
locationId: [{ required: true, message: '请选择库房', trigger: 'blur' }],
|
||
});
|
||
|
||
// 初始化 获取下拉列表
|
||
const init = async () => {
|
||
const res = await getInit();
|
||
// 仓库列表 cabinetListOptions
|
||
cabinetListOptions.value = res.data.cabinetListOptions;
|
||
// 查询经手人列表 practitionerList
|
||
practitionerOption.value = res.data.practitionerOption;
|
||
// 查询供应商列表 supplierOption
|
||
supplierOption.value = res.data.supplierOption;
|
||
// 审批状态 supplyStatusOptions
|
||
supplyStatusOptions.value = res.data.supplyStatusOptions;
|
||
// 单据类型 supplyTypeOptions
|
||
supplyTypeOptions.value = res.data.supplyTypeOptions;
|
||
// 单据分类
|
||
supplyCategoryOptions.value = res.data.supplyCategoryOptions;
|
||
// 包装情况 packagingConditionOptions
|
||
packagingConditionOptions.value = res.data.packagingConditionOptions;
|
||
// 验收结果 acceptanceResultoryOptions
|
||
acceptanceResultoryOptions.value = res.data.acceptanceResultoryOptions;
|
||
};
|
||
|
||
// 获取订货单单据列表
|
||
const getList = async () => {
|
||
const res = await getOrderList(queryParams.value);
|
||
// 订货单单据列表 orderList
|
||
orderList.value = res.data.records;
|
||
};
|
||
|
||
// 新增按钮
|
||
const handleAdd = async () => {
|
||
// 清空当前表格数据 和 选中状态
|
||
resetFormAndTableData();
|
||
// 校验库房ID
|
||
if (!tableForm.value.locationId) {
|
||
proxy.$modal.msgWarning('新增单据前，请选择库房');
|
||
return;
|
||
}
|
||
|
||
// 右侧表单数据
|
||
tableForm.value = {
|
||
// 采购员
|
||
applicantId: userInfo.practitionerId,
|
||
// 单据日期
|
||
applyTime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
|
||
// 库房ID
|
||
locationId: tableForm.value.locationId,
|
||
// 开单人
|
||
practitionerId: undefined,
|
||
};
|
||
|
||
// 订单编辑还是新增
|
||
isAddOrEditOrder.value = {
|
||
isAddOrder: true,
|
||
isEditOrder: false,
|
||
};
|
||
|
||
// 延迟执行
|
||
nextTick(() => {
|
||
// 更新按钮状态为编辑模式
|
||
handleUpdateButtonState({
|
||
// 审核 按钮禁用
|
||
isAuditDisabled: true,
|
||
// 取消 按钮禁用
|
||
isCancelDisabled: false,
|
||
// 删除 按钮禁用
|
||
isDeleteDisabled: true,
|
||
// 添加 按钮禁用
|
||
isAddDisabled: true,
|
||
// 编辑 按钮禁用
|
||
isEditDisabled: true,
|
||
// 添加行 按钮显示
|
||
isAddShow: true,
|
||
// 删除行 按钮显示
|
||
isDeleteShow: false,
|
||
// 保存行 按钮显示
|
||
isSaveShow: false,
|
||
// 编辑行 按钮显示
|
||
isEditShow: false,
|
||
// 警戒订货 按钮显示
|
||
isOrderImport: true,
|
||
});
|
||
});
|
||
};
|
||
// 清空当前表格数据
|
||
const resetFormAndTableData = () => {
|
||
// 清空右侧表格数据
|
||
tableData.value = [];
|
||
// 清空审核表单数据
|
||
auditForm.value = {};
|
||
// 清空右侧表格数据总条数
|
||
tableDataTotal.value = 0;
|
||
};
|
||
|
||
// 编辑按钮
|
||
const handleEdit = async (order) => {
|
||
// 清空当前表格数据 和 选中状态
|
||
resetFormAndTableData();
|
||
|
||
if (!selectedOrder.value) {
|
||
proxy.$modal.msgError('请选择要编辑的单据');
|
||
return;
|
||
}
|
||
const res = await getOrderDetail({
|
||
busNo: selectedOrder.value.supplyBusNo,
|
||
pageNo: tableForm.value.pageNo,
|
||
pageSize: tableForm.value.pageSize,
|
||
});
|
||
// 构建编辑后的表单数据
|
||
buildEditForm(res.data.records);
|
||
// 更新表格数据总条数
|
||
tableDataTotal.value = res.data.total;
|
||
// 根据订单状态更新按钮状态
|
||
const isApproved = order.statusEnum_enumText === '同意' || order.statusEnum === 3;
|
||
if (isApproved) {
|
||
// 设置编辑状态
|
||
isAddOrEditOrder.value = {
|
||
isAddOrder: false,
|
||
isEditOrder: false,
|
||
};
|
||
// 更新按钮状态为初始状态
|
||
handleUpdateButtonState({
|
||
// 审核 按钮禁用
|
||
isAuditDisabled: true,
|
||
// 取消 按钮禁用
|
||
isCancelDisabled: true,
|
||
// 删除 按钮禁用
|
||
isDeleteDisabled: true,
|
||
// 添加 按钮禁用
|
||
isAddDisabled: false,
|
||
// 编辑 按钮禁用
|
||
isEditDisabled: true,
|
||
// 添加行 按钮显示
|
||
isAddShow: false,
|
||
// 删除行 按钮显示
|
||
isDeleteShow: false,
|
||
// 保存行 按钮显示
|
||
isSaveShow: false,
|
||
// 编辑行 按钮显示
|
||
isEditShow: false,
|
||
// 警戒订货 按钮显示
|
||
isOrderImport: false,
|
||
});
|
||
return;
|
||
}
|
||
// 设置编辑状态
|
||
isAddOrEditOrder.value = {
|
||
isAddOrder: false,
|
||
isEditOrder: true,
|
||
};
|
||
|
||
// 更新按钮状态
|
||
handleUpdateButtonState({
|
||
// 审核 按钮禁用
|
||
isAuditDisabled: isApproved,
|
||
// 取消 按钮禁用
|
||
isCancelDisabled: false,
|
||
// 删除 按钮禁用
|
||
isDeleteDisabled: isApproved,
|
||
// 添加 按钮禁用
|
||
isAddDisabled: false,
|
||
// 编辑 按钮禁用
|
||
isEditDisabled: true,
|
||
// 添加行 按钮显示
|
||
isAddShow: !isApproved,
|
||
// 删除行 按钮显示
|
||
isDeleteShow: !isApproved,
|
||
// 保存行 按钮显示
|
||
isSaveShow: !isApproved,
|
||
// 编辑行 按钮显示
|
||
isEditShow: !isApproved,
|
||
// 警戒订货 按钮显示
|
||
isOrderImport: !isApproved,
|
||
});
|
||
};
|
||
// 构建进货价和销售价
|
||
const buildPrice = (item) => {
|
||
// 判断当前单位是最大单位还是最小单位
|
||
const isMaxUnit = item.unitCode === item.maxUnitCode;
|
||
if (isMaxUnit) {
|
||
// 进货价
|
||
item.price = item.price;
|
||
item.priceMaxUnit = item.price;
|
||
item.priceMinUnit = item.price / parseInt(item.partPercent);
|
||
|
||
// 销售价
|
||
item.retailPrice = item.retailPrice;
|
||
item.retailPriceMaxUnit = item.retailPrice;
|
||
item.retailPriceMinUnit = item.retailPrice / parseInt(item.partPercent);
|
||
} else {
|
||
// 进货价
|
||
item.price = item.price;
|
||
item.priceMaxUnit = parseFloat((item.price * parseInt(item.partPercent)).toFixed(2));
|
||
item.priceMinUnit = item.price;
|
||
|
||
// 销售价
|
||
item.retailPrice = item.retailPrice;
|
||
item.retailPriceMaxUnit = parseFloat(
|
||
(item.retailPrice * parseInt(item.partPercent)).toFixed(2)
|
||
);
|
||
item.retailPriceMinUnit = item.retailPrice;
|
||
}
|
||
};
|
||
// 构建单位列表
|
||
const buildUnitList = (item) => {
|
||
// 表格单位列表
|
||
(item.unitList || []).forEach((unit) => {
|
||
// 判断当前单位是最大单位还是最小单位
|
||
const isMaxUnit = unit.value === item.maxUnitCode;
|
||
const isMinUnit = unit.value === item.minUnitCode;
|
||
|
||
// // 进货价（假）
|
||
unit.priceMask = item.price;
|
||
|
||
// 销售价（假）
|
||
unit.retailPriceMask = item.retailPrice;
|
||
|
||
// 进价金额（假）
|
||
unit.totalPriceMask = (parseFloat(item.price) * parseFloat(item.itemQuantity)).toFixed(2);
|
||
|
||
// 销售金额（假）
|
||
unit.totalRetailPriceMask = (
|
||
parseFloat(item.retailPrice) * parseFloat(item.itemQuantity)
|
||
).toFixed(2);
|
||
|
||
// 规格库存
|
||
unit.specificationInventoryOriginal = item.specificationInventory;
|
||
|
||
// 规格库存显示逻辑
|
||
if (isMaxUnit) {
|
||
// 最大单位：显示为 "X盒"
|
||
unit.specificationInventoryMax = Math.floor(
|
||
item.specificationInventory / parseInt(item.partPercent)
|
||
);
|
||
unit.specificationInventoryMaxUnit =
|
||
unit.specificationInventoryMax > 0 ? item.maxUnitCode_dictText : '';
|
||
unit.specificationInventoryMin = item.specificationInventory % parseInt(item.partPercent);
|
||
unit.specificationInventoryMinUnit =
|
||
unit.specificationInventoryMin > 0 ? item.minUnitCode_dictText : '';
|
||
|
||
// 批次库存
|
||
unit.batchInventoryMax = Math.floor(item.batchInventory / parseInt(item.partPercent));
|
||
unit.batchInventoryMaxUnit = unit.batchInventoryMax > 0 ? item.maxUnitCode_dictText : '';
|
||
unit.batchInventoryMin = item.batchInventory % parseInt(item.partPercent);
|
||
unit.batchInventoryMinUnit = unit.batchInventoryMin > 0 ? item.minUnitCode_dictText : '';
|
||
} else if (isMinUnit) {
|
||
// 最小单位：显示为 "X瓶"
|
||
unit.specificationInventoryMax = item.specificationInventory;
|
||
unit.specificationInventoryMaxUnit =
|
||
unit.specificationInventoryMax > 0 ? item.minUnitCode_dictText : '';
|
||
unit.specificationInventoryMin = 0;
|
||
unit.specificationInventoryMinUnit =
|
||
unit.specificationInventoryMin > 0 ? item.minUnitCode_dictText : '';
|
||
|
||
// 批次库存
|
||
unit.batchInventoryMax = item.batchInventory;
|
||
unit.batchInventoryMaxUnit = unit.batchInventoryMax > 0 ? item.minUnitCode_dictText : '';
|
||
unit.batchInventoryMin = 0;
|
||
unit.batchInventoryMinUnit = unit.batchInventoryMin > 0 ? item.minUnitCode_dictText : '';
|
||
} else {
|
||
// 其他单位：显示为 "X瓶"
|
||
unit.specificationInventoryMax = item.specificationInventory;
|
||
unit.specificationInventoryMaxUnit =
|
||
unit.specificationInventoryMax > 0 ? item.minUnitCode_dictText : '';
|
||
unit.specificationInventoryMin = 0;
|
||
unit.specificationInventoryMinUnit =
|
||
unit.specificationInventoryMin > 0 ? item.minUnitCode_dictText : '';
|
||
|
||
// 批次库存
|
||
unit.batchInventoryMax = item.batchInventory;
|
||
unit.batchInventoryMaxUnit = unit.batchInventoryMax > 0 ? item.minUnitCode_dictText : '';
|
||
unit.batchInventoryMin = 0;
|
||
unit.batchInventoryMinUnit = unit.batchInventoryMin > 0 ? item.minUnitCode_dictText : '';
|
||
}
|
||
});
|
||
};
|
||
// 构建编辑后的表单数据
|
||
const buildEditForm = (data) => {
|
||
// 构建表格数据
|
||
if (data.length > 0) {
|
||
// 表单数据
|
||
tableForm.value = {
|
||
// 单据号
|
||
busNo: data[0].busNo,
|
||
// 单据日期
|
||
applyTime: data[0].applyTime,
|
||
// 供应商
|
||
supplierId: data[0].supplierId,
|
||
// 供应商联系人
|
||
phone: data[0].phone,
|
||
// 采购员
|
||
applicantId: data[0].applicantId,
|
||
// 单据类型
|
||
categoryEnum: data[0].categoryEnum,
|
||
// 摘要
|
||
reason: data[0].reason,
|
||
// 仓库
|
||
locationId: data[0].purposeLocationId,
|
||
// 开单人
|
||
practitionerId: data[0].practitionerId,
|
||
// 发票号
|
||
invoiceNo: data[0].invoiceNo,
|
||
};
|
||
// 表格数据
|
||
data.forEach((item) => {
|
||
// 表格编辑状态
|
||
item.isEditing = false;
|
||
// 表格查看状态
|
||
item.isViewing = true;
|
||
// 判断当前单位是否是最大单位
|
||
buildPrice(item);
|
||
// 构建单位列表
|
||
buildUnitList(item);
|
||
});
|
||
// 更新表格数据
|
||
tableData.value = data;
|
||
|
||
// 审核表格数据
|
||
auditForm.value = {
|
||
// 审核时间
|
||
approvalTime: data[0].approvalTime,
|
||
// 审核状态
|
||
statusEnum: data[0].statusEnum,
|
||
// 审核状态文本
|
||
statusEnum_enumText: data[0].statusEnum_enumText,
|
||
// 审核人
|
||
approverId: data[0].approverId,
|
||
};
|
||
// 订单编辑还是新增
|
||
isAddOrEditOrder.value = {
|
||
isAddOrder: false,
|
||
isEditOrder: true,
|
||
};
|
||
}
|
||
};
|
||
// 取消按钮
|
||
const handleCancel = () => {
|
||
// 更新按钮状态为初始状态
|
||
handleUpdateButtonState({
|
||
// 审核 按钮禁用
|
||
isAuditDisabled: true,
|
||
// 取消 按钮禁用
|
||
isCancelDisabled: true,
|
||
// 删除 按钮禁用
|
||
isDeleteDisabled: true,
|
||
// 添加 按钮禁用
|
||
isAddDisabled: false,
|
||
// 编辑 按钮禁用
|
||
isEditDisabled: true,
|
||
// 添加行 按钮显示
|
||
isAddShow: false,
|
||
// 删除行 按钮显示
|
||
isDeleteShow: false,
|
||
// 保存行 按钮显示
|
||
isSaveShow: false,
|
||
// 编辑行 按钮显示
|
||
isEditShow: false,
|
||
// 警戒订货 按钮显示
|
||
isOrderImport: false,
|
||
});
|
||
|
||
// 清空表单
|
||
clearForm();
|
||
};
|
||
|
||
// 清空表单
|
||
const clearForm = () => {
|
||
// 清空表单数据
|
||
tableForm.value = {};
|
||
tableData.value = [];
|
||
// 清空右侧表格数据
|
||
proxy.$refs.orderTableRef.resetAllData();
|
||
// 重置订单状态
|
||
isAddOrEditOrder.value = {
|
||
isAddOrder: false,
|
||
isEditOrder: false,
|
||
};
|
||
};
|
||
// 删除按钮
|
||
const handleDelete = async () => {
|
||
if (!selectedOrder.value) {
|
||
proxy.$modal.msgError('请选择要删除的单据');
|
||
return;
|
||
}
|
||
|
||
// 校验是否可以删除（已审批的单据不能删除）
|
||
if (selectedOrder.value.statusEnum_enumText === '同意' || selectedOrder.value.statusEnum === 3) {
|
||
proxy.$modal.msgError('已审批的单据不能删除');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await proxy.$modal.confirm('确认删除该采购单吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
});
|
||
|
||
// 删除单据
|
||
await deleteOrder(selectedOrder.value.supplyBusNo);
|
||
proxy.$modal.msgSuccess('删除成功');
|
||
// 清空右侧表格数据
|
||
clearForm();
|
||
// 重新获取列表 库房ID
|
||
await getList(tableForm.value.locationId);
|
||
|
||
// 清空选中状态
|
||
selectedOrder.value = null;
|
||
// 更新按钮状态为初始状态
|
||
handleUpdateButtonState({
|
||
// 审核 按钮禁用
|
||
isAuditDisabled: true,
|
||
// 取消 按钮禁用
|
||
isCancelDisabled: true,
|
||
// 删除 按钮禁用
|
||
isDeleteDisabled: true,
|
||
// 添加 按钮禁用
|
||
isAddDisabled: false,
|
||
// 编辑 按钮禁用
|
||
isEditDisabled: true,
|
||
// 添加行 按钮显示
|
||
isAddShow: false,
|
||
// 删除行 按钮显示
|
||
isDeleteShow: false,
|
||
// 保存行 按钮显示
|
||
isSaveShow: false,
|
||
// 编辑行 按钮显示
|
||
isEditShow: false,
|
||
// 警戒订货 按钮显示
|
||
isOrderImport: false,
|
||
});
|
||
} catch (error) {
|
||
if (error !== 'cancel') {
|
||
proxy.$modal.msgError('删除失败');
|
||
console.error('删除失败:', error);
|
||
}
|
||
}
|
||
};
|
||
// 审核按钮
|
||
const handleAudit = async () => {
|
||
if (!selectedOrder.value) {
|
||
proxy.$modal.msgError('请选择要审核的单据');
|
||
return;
|
||
}
|
||
|
||
// 校验是否是已审批状态
|
||
if (selectedOrder.value.statusEnum_enumText === '同意' || selectedOrder.value.statusEnum === 3) {
|
||
proxy.$modal.msgError('该单据已审批，不能重复审批');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await proxy.$modal.confirm('确认同意该采购单吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
});
|
||
|
||
// 同意审批
|
||
await agreeApproval(selectedOrder.value.supplyBusNo);
|
||
proxy.$modal.msgSuccess('同意审批成功');
|
||
// 编辑
|
||
handleEdit(selectedOrder);
|
||
// 重新获取列表
|
||
await getList();
|
||
|
||
// 清空选中状态
|
||
selectedOrder.value = null;
|
||
// 更新按钮状态为初始状态
|
||
handleUpdateButtonState({
|
||
// 审核 按钮禁用
|
||
isAuditDisabled: true,
|
||
// 取消 按钮禁用
|
||
isCancelDisabled: true,
|
||
// 删除 按钮禁用
|
||
isDeleteDisabled: true,
|
||
// 添加 按钮禁用
|
||
isAddDisabled: false,
|
||
// 编辑 按钮禁用
|
||
isEditDisabled: true,
|
||
// 添加行 按钮显示
|
||
isAddShow: false,
|
||
// 删除行 按钮显示
|
||
isDeleteShow: false,
|
||
// 保存行 按钮显示
|
||
isSaveShow: false,
|
||
// 编辑行 按钮显示
|
||
isEditShow: false,
|
||
// 警戒订货 按钮显示
|
||
isOrderImport: false,
|
||
});
|
||
} catch (error) {
|
||
if (error !== 'cancel') {
|
||
proxy.$modal.msgError('同意审批失败');
|
||
console.error('同意审批失败:', error);
|
||
}
|
||
}
|
||
};
|
||
|
||
// 处理订单点击事件
|
||
const handleOrderClick = (order) => {
|
||
// 选中订单
|
||
selectedOrder.value = order;
|
||
// 编辑
|
||
handleEdit(order);
|
||
};
|
||
|
||
// 处理查询参数更新
|
||
const handleQueryParamsUpdate = (newParams) => {
|
||
// 更新右侧表格的分页参数
|
||
tableForm.value.pageNo = newParams.pageNo;
|
||
tableForm.value.pageSize = newParams.pageSize;
|
||
|
||
// 如果有选中的订单，重新获取订单详情
|
||
if (selectedOrder.value) {
|
||
handleEdit(selectedOrder.value);
|
||
}
|
||
};
|
||
//
|
||
// 处理库房变化
|
||
const handleLocationChange = (locationId) => {
|
||
queryParams.value.locationId = locationId;
|
||
// 重新获取列表
|
||
getList();
|
||
};
|
||
//
|
||
// 处理表单更新
|
||
const handleFormUpdate = (newForm) => {
|
||
tableForm.value = { ...tableForm.value, ...newForm };
|
||
};
|
||
|
||
// 处理按钮状态更新
|
||
const handleUpdateButtonState = (buttonState) => {
|
||
// 按钮禁用
|
||
// 审核 按钮禁用
|
||
isAuditDisabled.value = buttonState.isAuditDisabled;
|
||
// 取消 按钮禁用
|
||
isCancelDisabled.value = buttonState.isCancelDisabled;
|
||
// 删除 按钮禁用
|
||
isDeleteDisabled.value = buttonState.isDeleteDisabled;
|
||
// 添加 按钮禁用
|
||
isAddDisabled.value = buttonState.isAddDisabled;
|
||
// 编辑 按钮禁用
|
||
isEditDisabled.value = buttonState.isEditDisabled;
|
||
// 按钮显示
|
||
// 添加行 按钮显示
|
||
buttonShow.value.isAddShow = buttonState.isAddShow;
|
||
// 删除行 按钮显示
|
||
buttonShow.value.isDeleteShow = buttonState.isDeleteShow;
|
||
// 保存行 按钮显示
|
||
buttonShow.value.isSaveShow = buttonState.isSaveShow;
|
||
// 编辑行 按钮显示
|
||
buttonShow.value.isEditShow = buttonState.isEditShow;
|
||
// 警戒订货 按钮显示
|
||
buttonShow.value.isOrderImport = buttonState.isOrderImport;
|
||
};
|
||
// 监听路由变化
|
||
watch(
|
||
() => route.query,
|
||
async (newQuery) => {
|
||
//console.log('路由参数发生变化:', newQuery);
|
||
if (newQuery.busNo) {
|
||
queryParams.value.searchKey = newQuery.busNo;
|
||
await getList();
|
||
// 设置选中状态
|
||
selectedOrder.value = orderList.value.find((item) => item.supplyBusNo === newQuery.busNo);
|
||
// 编辑按钮
|
||
handleEdit(selectedOrder.value);
|
||
// 清空路由参数
|
||
// router.replace({ query: {} });
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
);
|
||
// 下拉列表初始化
|
||
init();
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.medicine-container :deep(.el-row) {
|
||
margin-bottom: 10px;
|
||
}
|
||
.medicine-container :deep(.el-row:last-child) {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
// 订单列表容器
|
||
.order-list-container {
|
||
width: 100%;
|
||
padding: 0;
|
||
}
|
||
|
||
// 订单列表项样式
|
||
.order-item {
|
||
width: 100%;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
margin: 4px 0;
|
||
|
||
&:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
|
||
.order-card {
|
||
border-color: #409eff;
|
||
}
|
||
}
|
||
|
||
&.is-active {
|
||
.order-card {
|
||
border-color: #409eff;
|
||
background: linear-gradient(135deg, #ecf5ff 0%, #f0f9ff 100%);
|
||
}
|
||
|
||
.order-number .number-text {
|
||
color: #409eff;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 订单卡片样式
|
||
.order-card {
|
||
border: 1px solid #e4e7ed;
|
||
border-radius: 6px;
|
||
transition: all 0.3s ease;
|
||
background: #fff;
|
||
overflow: hidden;
|
||
|
||
:deep(.el-card__body) {
|
||
padding: 12px;
|
||
}
|
||
}
|
||
|
||
// 订单头部样式
|
||
.order-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.order-number {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
min-width: 0;
|
||
flex: 1;
|
||
|
||
.el-icon {
|
||
color: #409eff;
|
||
font-size: 14px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.number-text {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.order-status {
|
||
flex-shrink: 0;
|
||
|
||
.el-tag {
|
||
border-radius: 10px;
|
||
font-weight: 500;
|
||
font-size: 11px;
|
||
padding: 2px 6px;
|
||
}
|
||
}
|
||
|
||
// 订单内容样式
|
||
.order-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 4px 0;
|
||
min-width: 0;
|
||
|
||
.info-icon {
|
||
color: #909399;
|
||
font-size: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.label {
|
||
color: #606266;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.value {
|
||
color: #303133;
|
||
font-size: 12px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
min-width: 0;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
// 空状态样式
|
||
.empty-state {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 200px;
|
||
color: #909399;
|
||
|
||
:deep(.el-empty__description) {
|
||
color: #909399;
|
||
font-size: 14px;
|
||
}
|
||
|
||
:deep(.el-button) {
|
||
margin-top: 16px;
|
||
}
|
||
}
|
||
|
||
// 响应式设计
|
||
@media (max-width: 768px) {
|
||
.order-header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 6px;
|
||
}
|
||
|
||
.info-item {
|
||
padding: 2px 0;
|
||
}
|
||
|
||
.empty-state {
|
||
height: 150px;
|
||
}
|
||
}
|
||
</style> |