feat(采购管理): 新增供应商名称字段并优化表单校验

refactor(出入库管理): 添加产品ID字段并调整默认单据类型

fix(备品配件): 修正库存数量输入类型为数字并移除调试日志

feat(文件上传): 支持后端文件格式转换并暴露清空方法

style(库存管理): 调整单据类型默认值及表单字段顺序

perf(采购计划): 优化供应商选择及文件上传处理逻辑
This commit is contained in:
re-JZzzz
2025-09-29 20:09:20 +08:00
parent 321c3fce49
commit 6ee935ccb6
7 changed files with 172 additions and 78 deletions

View File

@ -182,6 +182,10 @@ export interface CaigouPlanVO {
* 申请原因
*/
reason?: string;
/**
* 供应商名称
*/
gonyingshangName?: string;
}
@ -368,7 +372,10 @@ export interface CaigouPlanForm extends BaseEntity {
* 申请原因
*/
reason?: string;
/**
* 供应商名称
*/
gonyingshangName?: string;
}
export interface CaigouPlanQuery extends PageQuery {
@ -556,6 +563,10 @@ export interface CaigouPlanQuery extends PageQuery {
* 申请原因
*/
reason?: string;
/**
* 供应商名称
*/
gonyingshangName?: string;
}

View File

@ -55,6 +55,10 @@ export interface ChurukudanVO {
* 产品名称
*/
chanpinName?: string;
/**
* 产品id
*/
chanpinId?: string | number;
}
export interface ChurukudanForm extends BaseEntity {
@ -114,6 +118,11 @@ export interface ChurukudanForm extends BaseEntity {
* 产品名称
*/
chanpinName?: string;
/**
* 产品id
*/
chanpinId?: string | number;
}
export interface ChurukudanQuery extends PageQuery {
@ -158,6 +167,10 @@ export interface ChurukudanQuery extends PageQuery {
* 结束日期
*/
endDate?: string;
/**
* 产品id
*/
chanpinId?: string | number;
/**
* 日期范围参数
*/

View File

@ -1,5 +1,16 @@
<template>
<div class="upload-file">
<!-- 文件列表 -->
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li v-for="(file, index) in fileList" :key="file.uid" class="el-upload-list__item ele-upload-list__item-content">
<el-link :href="`${file.url}`" :underline="false" target="_blank">
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link>
<div class="ele-upload-list__item-content-action">
<el-button type="danger" v-if="!disabled" link @click="handleDelete(index)">删除</el-button>
</div>
</li>
</transition-group>
<el-upload
ref="fileUploadRef"
multiple
@ -37,17 +48,6 @@
</template>
的文件
</div>
<!-- 文件列表 -->
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li v-for="(file, index) in fileList" :key="file.uid" class="el-upload-list__item ele-upload-list__item-content">
<el-link :href="`${file.url}`" :underline="false" target="_blank">
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link>
<div class="ele-upload-list__item-content-action">
<el-button type="danger" v-if="!disabled" link @click="handleDelete(index)">删除</el-button>
</div>
</li>
</transition-group>
</div>
</template>
@ -55,7 +55,7 @@
import { propTypes } from '@/utils/propTypes';
import { delOss, listByIds } from '@/api/system/oss';
import { globalHeaders } from '@/utils/request';
import { ref } from 'vue';
const props = defineProps({
modelValue: {
type: [String, Object, Array],
@ -89,6 +89,16 @@ const showTip = computed(() => props.isShowTip && (props.fileType || props.fileS
const fileUploadRef = ref<ElUploadInstance>();
// 暴露方法给父组件
defineExpose({
// 清空所有文件
clearAllFiles: () => {
fileList.value = [];
emit('update:modelValue', '');
emit('update:fileList', []);
}
});
// 监听 fileType 变化,更新 fileAccept
const fileAccept = computed(() => props.fileType.map((type) => `.${type}`).join(','));
@ -100,18 +110,28 @@ watch(
let temp = 1;
// 首先将值转为数组
let list: any[] = [];
if (Array.isArray(val)) {
list = val;
// 如果是数组,检查第一个元素的格式
if (val.length > 0 && val[0].fileName && val[0].fileId && val[0].fileUrl) {
// 处理后端返回的格式 [{fileName,fileId,fileUrl}]
list = val.map(item => ({
name: item.fileName,
url: item.fileUrl,
ossId: item.fileId
}));
} else {
// 处理组件内部格式 [{name,url,ossId}]
list = val;
}
} else {
// 处理字符串格式逗号分隔的ossId
const res = await listByIds(val);
list = res.data.map((oss) => {
return {
name: oss.originalName,
url: oss.url,
ossId: oss.ossId
};
return { name: oss.originalName, url: oss.url, ossId: oss.ossId };
});
}
// 然后将数组转为对象数组
fileList.value = list.map((item) => {
item = { name: item.name, url: item.url, ossId: item.ossId };
@ -190,7 +210,15 @@ const handleDelete = (index: number) => {
const ossId = fileList.value[index].ossId;
delOss(ossId);
fileList.value.splice(index, 1);
emit('update:modelValue', listToString(fileList.value));
// 转换为后端需要的格式 [{fileName,fileId,fileUrl}]
const formattedList = fileList.value.map(file => ({
fileName: file.name,
fileId: file.ossId,
fileUrl: file.url
}));
emit('update:modelValue', formattedList);
};
// 上传结束处理
@ -199,7 +227,15 @@ const uploadedSuccessfully = () => {
fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value);
uploadList.value = [];
number.value = 0;
emit('update:modelValue', listToString(fileList.value));
// 转换为后端需要的格式 [{fileName,fileId,fileUrl}]
const formattedList = fileList.value.map(file => ({
fileName: file.name,
fileId: file.ossId,
fileUrl: file.url
}));
emit('update:modelValue', formattedList);
emit('update:fileList', fileList.value);
proxy?.$modal.closeLoading();
}

View File

@ -15,7 +15,7 @@
<!-- 供应商信息 -->
<el-card class="card" shadow="hover" style="margin-top: 20px">
<el-descriptions title="供应商信息" direction="vertical" :column="2" border size="large">
<el-descriptions-item label="供应商单位">{{ props.detailInfo.gonyingshangId }}</el-descriptions-item>
<el-descriptions-item label="供应商单位">{{ props.detailInfo.gonyingshangName }}</el-descriptions-item>
<el-descriptions-item label="出货时间">{{ props.detailInfo.chuhuoTime }}</el-descriptions-item>
</el-descriptions>
</el-card>

View File

@ -8,8 +8,8 @@
<div class="top">
<div class="title">单据列表</div>
<div class="button-actions">
<button :class="{ active: type === 'chuku' }" @click="changeType('chuku')">出库单</button>
<button :class="{ active: type === 'ruku' }" @click="changeType('ruku')">入库单</button>
<button :class="{ active: type === 'chuku' }" @click="changeType('chuku')">出库单</button>
</div>
</div>
<div class="content" style="height: 100%;flex: 1;">
@ -129,9 +129,6 @@
:value="dict.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="单据编号" prop="danjvNumber">
<el-input v-model="form.danjvNumber" placeholder="请输入单据编号" />
</el-form-item>
<!-- <el-form-item label="设备类型" prop="shebeiType">
<el-select v-model="form.shebeiType" placeholder="请选择设备类型">
<el-option v-for="dict in wz_device_type" :key="dict.value" :label="dict.label"
@ -140,7 +137,7 @@
</el-form-item> -->
<el-form-item label="产品名称" prop="chanpinName">
<el-select v-model="form.chanpinName" placeholder="请选择产品名称">
<el-option v-for="dict in chanpinName" :key="dict.value" :label="dict.label"
<el-option v-for="dict in chanpinSelect" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
</el-select>
</el-form-item>
@ -154,7 +151,7 @@
<el-input v-model="form.contactNumber" placeholder="请输入联系电话" />
</el-form-item>
<el-form-item label="总数量" prop="zonNumber">
<el-input v-model="form.zonNumber" placeholder="请输入总数量" />
<el-input v-model="form.zonNumber" placeholder="请输入总数量" type="number" min="0"/>
</el-form-item>
</el-form>
<template #footer>
@ -344,8 +341,8 @@ const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const total = ref(0);
// 单据类型切换变量 - 默认库单
const type = ref<string>('chuku');
// 单据类型切换变量 - 默认库单
const type = ref<string>('ruku');
/** 切换单据类型 */
const changeType = (newType: string) => {
@ -430,6 +427,7 @@ const initFormData: ChurukudanForm = {
updateTime: undefined,
auditStatus: undefined,
chanpinName: undefined,
chanpinId: undefined,
}
const data = reactive<PageData<ChurukudanForm, ChurukudanQuery>>({
form: { ...initFormData },
@ -444,13 +442,17 @@ const data = reactive<PageData<ChurukudanForm, ChurukudanQuery>>({
endDate: undefined,
auditStatus: undefined,
chanpinName: undefined,
danjvType: '1', // 默认显示出库单
chanpinId: undefined,
danjvType: '2', // 默认显示入库单
params: {
}
},
rules: {
shebeiType: [
{ required: true, message: "设备类型不能为空", trigger: "change" }
// shebeiType: [
// { required: true, message: "设备类型不能为空", trigger: "change" }
// ],
chanpinName: [
{ required: true, message: "产品名称不能为空", trigger: "change" }
],
jingshourenId: [
{ required: true, message: "经手人id不能为空", trigger: "blur" }
@ -464,18 +466,28 @@ const data = reactive<PageData<ChurukudanForm, ChurukudanQuery>>({
danjvType: [
{ required: true, message: "单据状态不能为空", trigger: "change" }
],
// 手机号码格式校验
contactNumber: [
{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码格式", trigger: "blur" }
]
}
});
const { queryParams, form, rules } = toRefs(data);
// 查询产品名称列表
const chanpinList = ref<any[]>([]);
const chanpinSelect = ref<any[]>([]);
// 查询产品名称列表
const getChanpinList = async () => {
try {
const res = await getChanpinLists({ projectId: userStore.selectedProject.id });
chanpinList.value = res.rows || [];
console.log('chanpinList.value', chanpinList.value);
chanpinList.value = res.data || [];
chanpinSelect.value = chanpinList.value.map(item => ({
label:item.caigouPlanName +'-'+item.chanpinName,
value: item.id
}));
console.log('chanpinSelect.value', chanpinSelect.value);
} catch (error) {
console.error('获取产品名称列表失败:', error);
proxy?.$modal.msgError("获取产品名称列表失败,请稍后重试");
@ -568,6 +580,7 @@ const submitForm = () => {
if (valid) {
buttonLoading.value = true;
try {
form.value.chanpinId = form.value.chanpinName
if (form.value.id) {
await updateChurukudan(form.value);
proxy?.$modal.msgSuccess("修改成功");

View File

@ -193,12 +193,9 @@
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="供应商单位">
<el-select v-model="form.danwei" placeholder="请选择">
<!-- <el-option v-for="option in supplierList" :key="option.value" :label="option.label"
:value="option.value" /> -->
<el-option label="供应商1" value="供应商1" />
<el-option label="供应商1" value="供应商1" />
<el-option label="供应商1" value="供应商1" />
<el-select v-model="form.gonyingshangId" placeholder="请选择">
<el-option v-for="option in supplierList" :key="option.id" :label="option.supplierName"
:value="option.id" />
</el-select>
</el-form-item>
</el-col>
@ -289,7 +286,7 @@
<div class="form-section">
<h3>附件上传</h3>
<!-- 附件 -->
<el-table :data="form.opsCaigouPlanFilesBos || []" border v-if="currentOperation === 'update'">
<!-- <el-table :data="form.opsCaigouPlanFilesBos || []" border v-if="currentOperation === 'update'">
<el-table-column prop="fileName" label="文件名" align="center" />
<el-table-column label="文件类型" align="center">
<template #default="scope">
@ -306,10 +303,10 @@
</el-button>
</template>
</el-table-column>
</el-table>
</el-table> -->
<file-upload ref="fileUploadRef" :isDrag="true" :file-list="form.opsCaigouPlanFilesBos"
:is-show-tip="false" @update:file-list="handleUpdateFileList"
<file-upload ref="fileUploadRef" :isDrag="true" v-model="form.opsCaigouPlanFilesBos"
:is-show-tip="false"
:file-type="['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf', 'png', 'jpg', 'jpeg']" />
</div>
</div>
@ -411,6 +408,8 @@ import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/
import { useRouter } from 'vue-router';
const router = useRouter();
import FileUpload from '@/components/FileUpload/index.vue';
// 导入用户store
import { useUserStore } from '@/store/modules/user';
@ -421,6 +420,8 @@ const caigouPlanList = ref<CaigouPlanVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const total = ref(0);
// 文件上传组件引用
const fileUploadRef = ref<InstanceType<typeof FileUpload>>();
// 标签页状态变量
const activeTab = ref('all');
@ -454,7 +455,7 @@ const initFormData: CaigouPlanForm = {
caigouType: undefined,
cangkuUrl: undefined,
hetonName: undefined,
gonyingshangId: 1,
gonyingshangId: undefined,
chuhuoTime: undefined,
fukuantiaojian: undefined,
fapiaoKjfs: undefined,
@ -492,7 +493,7 @@ const data = reactive<PageData<CaigouPlanForm, CaigouPlanQuery>>({
caigouType: undefined,
cangkuUrl: undefined,
hetonName: undefined,
gonyingshangId: 1,
gonyingshangId: undefined,
chuhuoTime: undefined,
fukuantiaojian: undefined,
fapiaoKjfs: undefined,
@ -535,7 +536,6 @@ const getYearlyAmount = async () => {
yearlyAmount.value.yujiJine = res.data.yujiJine;
}
} catch (error) {
console.error('获取年度金额失败:', error);
ElMessage({ message: '获取年度金额失败,请重试', type: 'error' });
}
}
@ -571,7 +571,6 @@ const getList = async () => {
caigouPlanList.value = filteredRes.rows;
} catch (error) {
console.error('获取采购计划列表失败:', error);
ElMessage({ message: '获取数据失败,请重试', type: 'error' });
} finally {
loading.value = false;
@ -580,8 +579,31 @@ const getList = async () => {
// 新增采购计划单提交函数
const addCaigouPlanSubmit = async () => {
buttonLoading.value = true; // 显示按钮加载状态
const submitData = JSON.parse(JSON.stringify(form.value));
// 转换文件列表格式为后端期望的格式:[{fileName, fileId, fileUrl}]
if (submitData.opsCaigouPlanFilesBos && submitData.opsCaigouPlanFilesBos.length > 0) {
submitData.opsCaigouPlanFilesBos = submitData.opsCaigouPlanFilesBos.map(file => ({
fileName: file.name,
fileId: file.ossId,
fileUrl: file.url
}));
}
const res = await addCaigouPlan(submitData);
try {
const res = await addCaigouPlan(form.value);
// 创建表单数据的深拷贝,避免直接修改原表单数据
const submitData = JSON.parse(JSON.stringify(form.value));
// 转换文件列表格式为后端期望的格式:[{fileName, fileId, fileUrl}]
if (submitData.opsCaigouPlanFilesBos && submitData.opsCaigouPlanFilesBos.length > 0) {
submitData.opsCaigouPlanFilesBos = submitData.opsCaigouPlanFilesBos.map(file => ({
fileName: file.name,
fileId: file.ossId,
fileUrl: file.url
}));
}
const res = await addCaigouPlan(submitData);
if (res.code === 200) {
ElMessage({ message: '采购申请单已成功提交,等待审批!', type: 'success' });
@ -613,7 +635,6 @@ const addCaigouPlanSubmit = async () => {
});
}
} catch (error) {
console.error('新增采购计划单失败:', error);
ElMessage({ message: '操作失败', type: 'error' });
} finally {
buttonLoading.value = false; // 无论成功失败,都关闭加载状态
@ -624,14 +645,13 @@ const addCaigouPlanSubmit = async () => {
const updateCaigouPlanSubmit = async () => {
buttonLoading.value = true; // 显示按钮加载状态
try {
console.log(form.value);
const res = await updateCaigouPlan(form.value);
// 创建表单数据的深拷贝,避免直接修改原表单数据
const submitData = JSON.parse(JSON.stringify(form.value));
const res = await updateCaigouPlan(submitData);
if (res.code === 200) {
ElMessage({ message: '采购申请单已成功更新!', type: 'success' });
// 刷新列表数据
getList();
// 关闭对话框并重置表单
resetNewProcurementForm();
isDialogVisible.value = false;
@ -643,7 +663,6 @@ const updateCaigouPlanSubmit = async () => {
});
}
} catch (error) {
console.error('更新采购计划单失败:', error);
ElMessage({ message: '操作失败', type: 'error' });
} finally {
buttonLoading.value = false; // 无论成功失败,都关闭加载状态
@ -658,7 +677,8 @@ const getSupplierLists = async () => {
const res = await getSupplierList({
projectId: userStore.selectedProject.id
});
supplierList.value = res.rows;
supplierList.value = res.data;
}
// 获取文件类型(后缀名)
@ -784,10 +804,14 @@ const handleUpdate = async (row) => {
delete form.value.opsCaigouPlanChanpinVos;
}
if (form.value.opsCaigouPlanFilesVos) {
form.value.opsCaigouPlanFilesBos = form.value.opsCaigouPlanFilesVos;
// 转换文件数据格式为FileUpload组件期望的格式
form.value.opsCaigouPlanFilesBos = form.value.opsCaigouPlanFilesVos.map(file => ({
ossId: file.fileId,
name: file.fileName,
url: file.fileUrl
}));
delete form.value.opsCaigouPlanFilesVos;
}
console.log(form.value);
// 确保产品列表和附件列表有默认值
if (!form.value.opsCaigouPlanChanpinBos || form.value.opsCaigouPlanChanpinBos.length === 0) {
form.value.opsCaigouPlanChanpinBos = [{
@ -809,7 +833,6 @@ const handleUpdate = async (row) => {
ElMessage({ message: res.msg || '获取采购计划详情失败', type: 'error' });
}
} catch (error) {
console.error('获取采购计划详情失败:', error);
ElMessage({ message: '获取采购计划详情失败', type: 'error' });
} finally {
buttonLoading.value = false;
@ -864,6 +887,9 @@ const resetNewProcurementForm = () => {
form.value.chuhuoTime = '';
form.value.fukuantiaojian = '';
form.value.fapiaoKjfs = '';
form.value.gonyingshangId = '';
form.value.gonyingshangName = '';
form.value.reason = '';
form.value.opsCaigouPlanChanpinBos = [{
chanpinName: '',
chanpinType: '',
@ -874,6 +900,10 @@ const resetNewProcurementForm = () => {
totalPrice: ''
}];
form.value.opsCaigouPlanFilesBos = [];
// 清空文件上传组件中的文件列表
if (fileUploadRef.value) {
fileUploadRef.value.clearAllFiles();
}
};
// 表单校验函数
@ -904,7 +934,7 @@ const validateForm = () => {
return false;
}
if (!form.value.danwei) {
if (!form.value.gonyingshangId) {
ElMessage({ message: '请选择供应商单位', type: 'error' });
return false;
}
@ -912,6 +942,12 @@ const validateForm = () => {
ElMessage({ message: '请填写申请原因', type: 'error' });
return false;
}
// 附件校验
if (!form.value.opsCaigouPlanFilesBos || form.value.opsCaigouPlanFilesBos.length === 0) {
ElMessage({ message: '请至少上传一个附件', type: 'error' });
return false;
}
// 产品信息校验
const hasValidProduct = form.value.opsCaigouPlanChanpinBos.some(product => {
return product.chanpinName &&
@ -996,7 +1032,6 @@ const submitAddProcurement = async () => {
} catch (error) {
// 处理用户取消或其他错误
if (error !== 'cancel') {
console.error('提交采购申请单时发生错误:', error);
ElMessage({ message: '提交过程中发生错误,请重试', type: 'error' });
}
}
@ -1032,20 +1067,12 @@ const submitUpdateProcurement = async () => {
} catch (error) {
// 处理用户取消或其他错误
if (error !== 'cancel') {
console.error('更新采购申请单时发生错误:', error);
ElMessage({ message: '更新过程中发生错误,请重试', type: 'error' });
}
}
}
// 处理文件上传完成后获取完整文件列表
const handleUpdateFileList = (fileList) => {
form.value.opsCaigouPlanFilesBos = fileList.map(file => ({
fileId: file.ossId,
fileName: file.name,
fileUrl: file.url,
}));
};
// 检查表单是否有内容
const hasFormContent = () => {
@ -1140,7 +1167,6 @@ const saveDraft = async () => {
// 关闭对话框
isDialogVisible.value = false;
} catch (error) {
console.error('保存草稿失败:', error);
ElMessage({ message: '草稿保存失败,请重试', type: 'error' });
} finally {
buttonLoading.value = false;

View File

@ -252,7 +252,7 @@
<el-input v-model="form.guigexinghao" placeholder="请输入规格型号" />
</el-form-item>
<el-form-item label="库存数量" prop="kucunCount">
<el-input v-model="form.kucunCount" placeholder="请输入库存数量" />
<el-input v-model="form.kucunCount" placeholder="请输入库存数量" type="number" min="0" />
</el-form-item>
<el-form-item label="库存状态" prop="kucunStatus">
<el-select v-model="form.kucunStatus" placeholder="请选择库存状态">
@ -511,7 +511,6 @@ const getList = async () => {
total.value = res.total;
} catch (error) {
proxy?.$modal.msgError('获取数据失败,请重试');
console.error('获取备品配件列表失败:', error);
} finally {
loading.value = false;
}
@ -555,7 +554,6 @@ const handleUpdate = async (row?: BeipinBeijianVO) => {
dialog.visible = true;
} catch (error) {
proxy?.$modal.msgError('获取数据失败,请重试');
console.error('获取备品配件详情失败:', error);
}
}
@ -572,7 +570,6 @@ const handleDetail = async (row?: BeipinBeijianVO) => {
detailDialogVisible.value = true;
} catch (error) {
proxy?.$modal.msgError('获取数据失败,请重试');
console.error('获取备品配件详情失败:', error);
}
}
@ -595,7 +592,6 @@ const submitForm = () => {
await getList();
} catch (error) {
proxy?.$modal.msgError('操作失败,请重试');
console.error('提交表单失败:', error);
} finally {
buttonLoading.value = false;
}
@ -620,7 +616,6 @@ const handleDelete = async (row?: BeipinBeijianVO) => {
// 如果是用户取消确认,则不显示错误信息
if (error !== 'cancel') {
proxy?.$modal.msgError('删除失败,请重试');
console.error('删除数据失败:', error);
}
} finally {
loading.value = false;