针对于采购页面进行优化逻辑
This commit is contained in:
@ -1,40 +1,97 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon style="margin-right: 5px"><Plus /></el-icon>新增基础信息
|
||||
</el-button>
|
||||
<div class="filter-wrapper">
|
||||
<div class="filter-container">
|
||||
<el-input
|
||||
v-model="queryParams.keyword"
|
||||
placeholder="请输入名称或规格 (支持模糊搜索)"
|
||||
style="width: 240px; margin-right: 10px;"
|
||||
clearable
|
||||
@input="handleInputSearch"
|
||||
/>
|
||||
|
||||
<el-select
|
||||
v-model="queryParams.category"
|
||||
placeholder="类别"
|
||||
clearable
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
style="width: 140px; margin-right: 10px;"
|
||||
@change="handleQuery"
|
||||
>
|
||||
<el-option v-for="item in categoryOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
|
||||
<el-select
|
||||
v-model="queryParams.type"
|
||||
placeholder="类型"
|
||||
clearable
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
style="width: 140px; margin-right: 10px;"
|
||||
@change="handleQuery"
|
||||
>
|
||||
<el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
|
||||
<el-select
|
||||
v-model="queryParams.isEnabled"
|
||||
placeholder="状态"
|
||||
clearable
|
||||
style="width: 100px; margin-right: 10px;"
|
||||
@change="handleQuery"
|
||||
>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="禁用" :value="0" />
|
||||
</el-select>
|
||||
|
||||
<el-button type="primary" plain @click="handleQuery">搜索</el-button>
|
||||
<el-button plain @click="resetQuery">重置</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="filter-container">
|
||||
<el-input
|
||||
v-model="queryParams.keyword"
|
||||
placeholder="请输入基础信息名称或规格"
|
||||
style="width: 220px; margin-right: 10px;"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
<div class="right-toolbar">
|
||||
<el-button type="primary" @click="handleAdd" style="margin-right: 10px">
|
||||
<el-icon style="margin-right: 5px"><Plus /></el-icon>新增
|
||||
</el-button>
|
||||
|
||||
<el-select v-model="queryParams.category" placeholder="基础信息类别" clearable style="width: 150px; margin-right: 10px;">
|
||||
<el-option label="采购件" value="PURCHASE" />
|
||||
<el-option label="自制件" value="SELF_MADE" />
|
||||
</el-select>
|
||||
<el-tooltip content="刷新" placement="top">
|
||||
<el-button circle :icon="Refresh" @click="getList" />
|
||||
</el-tooltip>
|
||||
|
||||
<el-select v-model="queryParams.type" placeholder="物料类型" clearable style="width: 150px; margin-right: 10px;">
|
||||
<el-option label="电子料" value="ELEC" />
|
||||
<el-option label="结构件" value="STRUCT" />
|
||||
</el-select>
|
||||
<el-dropdown trigger="click" @command="handleSizeChange">
|
||||
<el-button circle :icon="Rank" style="margin-left: 8px" title="表格密度" />
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="large">宽松 (默认)</el-dropdown-item>
|
||||
<el-dropdown-item command="default">中等</el-dropdown-item>
|
||||
<el-dropdown-item command="small">紧凑</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
||||
<el-select v-model="queryParams.isEnabled" placeholder="状态" clearable style="width: 100px; margin-right: 10px;">
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="禁用" :value="0" />
|
||||
</el-select>
|
||||
|
||||
<el-button type="primary" plain @click="handleQuery">搜索</el-button>
|
||||
<el-button plain @click="resetQuery">重置</el-button>
|
||||
<el-popover placement="bottom" :width="150" trigger="click">
|
||||
<template #reference>
|
||||
<el-button circle :icon="Setting" style="margin-left: 8px" title="列设置" />
|
||||
</template>
|
||||
<div class="column-setting-list">
|
||||
<div style="font-weight: bold; margin-bottom: 5px; border-bottom: 1px solid #eee; padding-bottom: 5px">
|
||||
列展示设置
|
||||
</div>
|
||||
<el-checkbox v-model="columns.id.visible" label="ID" />
|
||||
<el-checkbox v-model="columns.name.visible" label="名称" />
|
||||
<el-checkbox v-model="columns.category.visible" label="类别" />
|
||||
<el-checkbox v-model="columns.type.visible" label="类型" />
|
||||
<el-checkbox v-model="columns.spec.visible" label="规格型号" />
|
||||
<el-checkbox v-model="columns.unit.visible" label="单位" />
|
||||
<el-checkbox v-model="columns.visibilityLevel.visible" label="可见等级" />
|
||||
<el-checkbox v-model="columns.files.visible" label="资料" />
|
||||
<el-checkbox v-model="columns.isEnabled.visible" label="状态" />
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
@ -42,58 +99,29 @@
|
||||
:data="tableData"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%; margin-top: 20px"
|
||||
:size="tableSize"
|
||||
style="width: 100%; margin-top: 15px"
|
||||
>
|
||||
<el-table-column prop="id" label="ID" width="80" align="center" />
|
||||
|
||||
<el-table-column prop="name" label="基础信息名称" min-width="150" show-overflow-tooltip />
|
||||
|
||||
<el-table-column prop="category" label="类别" width="100" align="center">
|
||||
<el-table-column v-if="columns.id.visible" prop="id" label="ID" min-width="80" align="center" fixed="left" />
|
||||
<el-table-column v-if="columns.name.visible" prop="name" label="基础信息名称" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column v-if="columns.category.visible" prop="category" label="类别" min-width="120" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">{{ scope.row.category || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="columns.type.visible" prop="type" label="类型" min-width="120" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">{{ scope.row.type || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="columns.spec.visible" prop="spec" label="规格型号" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column v-if="columns.unit.visible" prop="unit" label="单位" min-width="80" align="center" />
|
||||
<el-table-column v-if="columns.visibilityLevel.visible" prop="visibilityLevel" label="可见等级" min-width="100" align="center">
|
||||
<template #default="scope">L{{ scope.row.visibilityLevel }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="columns.files.visible" label="资料" min-width="100" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.category === 'PURCHASE'">采购件</el-tag>
|
||||
<el-tag v-else-if="scope.row.category === 'SELF_MADE'" type="success">自制件</el-tag>
|
||||
<el-tag v-else type="info">{{ scope.row.category || '-' }}</el-tag>
|
||||
<el-button v-if="scope.row.generalImage" link type="primary" :icon="Picture" title="查看图片" @click="openLink(scope.row.generalImage)" />
|
||||
<el-button v-if="scope.row.generalManual" link type="primary" :icon="Document" title="查看说明书" @click="openLink(scope.row.generalManual)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="type" label="类型" width="100" align="center">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.type === 'ELEC'">电子料</span>
|
||||
<span v-else-if="scope.row.type === 'STRUCT'">结构件</span>
|
||||
<span v-else>{{ scope.row.type || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="spec" label="规格型号" min-width="150" show-overflow-tooltip />
|
||||
|
||||
<el-table-column prop="unit" label="单位" width="70" align="center" />
|
||||
|
||||
<el-table-column prop="visibilityLevel" label="可见等级" width="90" align="center">
|
||||
<template #default="scope">
|
||||
L{{ scope.row.visibilityLevel }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="资料" width="100" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-if="scope.row.generalImage"
|
||||
link type="primary"
|
||||
:icon="Picture"
|
||||
title="查看图片"
|
||||
@click="openLink(scope.row.generalImage)"
|
||||
/>
|
||||
<el-button
|
||||
v-if="scope.row.generalManual"
|
||||
link type="primary"
|
||||
:icon="Document"
|
||||
title="查看说明书"
|
||||
@click="openLink(scope.row.generalManual)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="isEnabled" label="是否启用" width="100" align="center">
|
||||
<el-table-column v-if="columns.isEnabled.visible" prop="isEnabled" label="是否启用" min-width="100" align="center">
|
||||
<template #default="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.isEnabled"
|
||||
@ -104,8 +132,7 @@
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="150" fixed="right" align="center">
|
||||
<el-table-column label="操作" min-width="150" fixed="right" align="center">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button link type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
|
||||
@ -116,7 +143,7 @@
|
||||
<div style="margin-top: 20px; text-align: right;">
|
||||
<el-pagination
|
||||
background
|
||||
layout="total, prev, pager, next, sizes"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
v-model:current-page="queryParams.pageNum"
|
||||
v-model:page-size="queryParams.pageSize"
|
||||
@ -126,20 +153,101 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-model="dialog.visible"
|
||||
:title="dialog.title"
|
||||
width="600px"
|
||||
append-to-body
|
||||
@close="cancel"
|
||||
>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
|
||||
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入基础信息名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="类别" prop="category">
|
||||
<el-autocomplete
|
||||
v-model="form.category"
|
||||
:fetch-suggestions="querySearchCategory"
|
||||
placeholder="可输入或选择"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-autocomplete
|
||||
v-model="form.type"
|
||||
:fetch-suggestions="querySearchType"
|
||||
placeholder="可输入或选择"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="规格型号" prop="spec">
|
||||
<el-input v-model="form.spec" placeholder="请输入规格型号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="计量单位" prop="unit">
|
||||
<el-input v-model="form.unit" placeholder="如: 个, 台, 米" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item label="可见等级" prop="visibilityLevel">
|
||||
<el-input-number v-model="form.visibilityLevel" :min="0" :max="9" label="等级" />
|
||||
<span style="margin-left: 10px; color: #999; font-size: 12px;">(0为最低，9为最高)</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="说明书链接" prop="generalManual">
|
||||
<el-input v-model="form.generalManual" placeholder="请输入说明书URL链接" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="产品图链接" prop="generalImage">
|
||||
<el-input v-model="form.generalImage" placeholder="请输入图片URL链接" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态" prop="isEnabled">
|
||||
<el-radio-group v-model="form.isEnabled">
|
||||
<el-radio :value="1">启用</el-radio>
|
||||
<el-radio :value="0">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { Plus, Picture, Document } from '@element-plus/icons-vue';
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
import { Plus, Picture, Document, Refresh, Setting, Rank } from '@element-plus/icons-vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import type { FormInstance, FormRules } from 'element-plus';
|
||||
|
||||
// 【关键修改】引入刚才定义的 API 文件
|
||||
import {
|
||||
listMaterialBase,
|
||||
delMaterialBase,
|
||||
updateMaterialBase
|
||||
addMaterialBase,
|
||||
updateMaterialBase,
|
||||
delMaterialBase
|
||||
} from '@/api/material_base';
|
||||
|
||||
// --- 类型定义 ---
|
||||
@ -153,8 +261,8 @@ interface MaterialBaseVO {
|
||||
visibilityLevel: number;
|
||||
generalManual?: string;
|
||||
generalImage?: string;
|
||||
isEnabled: number; // 1 or 0
|
||||
statusLoading?: boolean; // 辅助字段
|
||||
isEnabled: number;
|
||||
statusLoading?: boolean;
|
||||
}
|
||||
|
||||
interface QueryParams {
|
||||
@ -170,6 +278,23 @@ interface QueryParams {
|
||||
const loading = ref(false);
|
||||
const total = ref(0);
|
||||
const tableData = ref<MaterialBaseVO[]>([]);
|
||||
const submitLoading = ref(false);
|
||||
const tableSize = ref<'large' | 'default' | 'small'>('large');
|
||||
|
||||
const columns = reactive({
|
||||
id: { visible: true },
|
||||
name: { visible: true },
|
||||
category: { visible: true },
|
||||
type: { visible: true },
|
||||
spec: { visible: true },
|
||||
unit: { visible: true },
|
||||
visibilityLevel: { visible: true },
|
||||
files: { visible: true },
|
||||
isEnabled: { visible: true }
|
||||
});
|
||||
|
||||
const categoryOptions = ref<string[]>([]);
|
||||
const typeOptions = ref<string[]>([]);
|
||||
|
||||
const queryParams = reactive<QueryParams>({
|
||||
pageNum: 1,
|
||||
@ -180,18 +305,78 @@ const queryParams = reactive<QueryParams>({
|
||||
isEnabled: undefined
|
||||
});
|
||||
|
||||
// --- 弹窗与表单相关 ---
|
||||
const dialog = reactive({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const initForm = {
|
||||
id: undefined,
|
||||
name: '',
|
||||
category: '',
|
||||
type: '',
|
||||
spec: '',
|
||||
unit: '',
|
||||
visibilityLevel: 0,
|
||||
generalManual: '',
|
||||
generalImage: '',
|
||||
isEnabled: 1
|
||||
};
|
||||
|
||||
const form = ref({...initForm});
|
||||
|
||||
const rules = reactive<FormRules>({
|
||||
name: [{ required: true, message: '请输入基础信息名称', trigger: 'blur' }],
|
||||
category: [{ required: true, message: '请选择或输入类别', trigger: 'change' }],
|
||||
type: [{ required: true, message: '请选择或输入类型', trigger: 'change' }],
|
||||
spec: [{ required: true, message: '请输入规格型号', trigger: 'blur' }],
|
||||
unit: [{ required: true, message: '请输入单位', trigger: 'blur' }]
|
||||
});
|
||||
|
||||
// --- 业务逻辑方法 ---
|
||||
|
||||
// 获取数据
|
||||
const extractDynamicOptions = (items: MaterialBaseVO[]) => {
|
||||
if (!items || items.length === 0) return;
|
||||
const newCategories = new Set(categoryOptions.value);
|
||||
const newTypes = new Set(typeOptions.value);
|
||||
items.forEach(item => {
|
||||
if (item.category) newCategories.add(item.category);
|
||||
if (item.type) newTypes.add(item.type);
|
||||
});
|
||||
categoryOptions.value = Array.from(newCategories);
|
||||
typeOptions.value = Array.from(newTypes);
|
||||
};
|
||||
|
||||
// 【核心新增】Autocomplete 的建议查询方法
|
||||
// 格式化数据以适配 el-autocomplete 的回调参数格式 [{ value: 'abc' }]
|
||||
const querySearchCategory = (queryString: string, cb: any) => {
|
||||
const results = queryString
|
||||
? categoryOptions.value.filter(item => item.toLowerCase().includes(queryString.toLowerCase()))
|
||||
: categoryOptions.value;
|
||||
// el-autocomplete 默认只展示 value 属性
|
||||
const formattedResults = results.map(item => ({ value: item }));
|
||||
cb(formattedResults);
|
||||
};
|
||||
|
||||
const querySearchType = (queryString: string, cb: any) => {
|
||||
const results = queryString
|
||||
? typeOptions.value.filter(item => item.toLowerCase().includes(queryString.toLowerCase()))
|
||||
: typeOptions.value;
|
||||
const formattedResults = results.map(item => ({ value: item }));
|
||||
cb(formattedResults);
|
||||
};
|
||||
|
||||
const getList = () => {
|
||||
loading.value = true;
|
||||
// 调用 API 文件中的 listMaterialBase
|
||||
listMaterialBase(queryParams)
|
||||
.then((response: any) => {
|
||||
// 我们的 request.ts 已经处理了 code!=200，这里直接拿 data
|
||||
if (response && response.data) {
|
||||
tableData.value = response.data.items;
|
||||
total.value = response.data.total;
|
||||
extractDynamicOptions(tableData.value);
|
||||
} else {
|
||||
tableData.value = [];
|
||||
total.value = 0;
|
||||
@ -206,13 +391,20 @@ const getList = () => {
|
||||
});
|
||||
};
|
||||
|
||||
// 搜索
|
||||
let searchTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
const handleInputSearch = () => {
|
||||
if (searchTimer) clearTimeout(searchTimer);
|
||||
searchTimer = setTimeout(() => {
|
||||
queryParams.pageNum = 1;
|
||||
getList();
|
||||
}, 500);
|
||||
};
|
||||
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
// 重置
|
||||
const resetQuery = () => {
|
||||
queryParams.keyword = '';
|
||||
queryParams.category = '';
|
||||
@ -221,75 +413,111 @@ const resetQuery = () => {
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
// 新增
|
||||
const handleSizeChange = (command: 'large' | 'default' | 'small') => {
|
||||
tableSize.value = command;
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
ElMessage.info("请实现新增弹窗逻辑");
|
||||
// 逻辑：dialogVisible.value = true
|
||||
resetForm();
|
||||
dialog.title = '新增基础信息';
|
||||
dialog.visible = true;
|
||||
};
|
||||
|
||||
// 编辑
|
||||
const handleEdit = (row: MaterialBaseVO) => {
|
||||
console.log("点击编辑", row);
|
||||
ElMessage.info(`准备编辑 ID: ${row.id}`);
|
||||
// 逻辑：调用 getMaterialBase(row.id) 回显数据
|
||||
};
|
||||
|
||||
// 状态切换 (实时保存)
|
||||
const handleStatusChange = (row: MaterialBaseVO) => {
|
||||
row.statusLoading = true;
|
||||
const text = row.isEnabled === 1 ? "启用" : "停用";
|
||||
|
||||
const updateData = {
|
||||
id: row.id,
|
||||
isEnabled: row.isEnabled
|
||||
};
|
||||
|
||||
// 调用 API 文件中的 updateMaterialBase
|
||||
updateMaterialBase(updateData)
|
||||
.then(() => {
|
||||
ElMessage.success(`已${text} "${row.name}"`);
|
||||
})
|
||||
.catch(() => {
|
||||
// 失败回滚
|
||||
row.isEnabled = row.isEnabled === 1 ? 0 : 1;
|
||||
})
|
||||
.finally(() => {
|
||||
row.statusLoading = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 删除
|
||||
const handleDelete = (row: MaterialBaseVO) => {
|
||||
ElMessageBox.confirm(
|
||||
`是否确认删除名称为 "${row.name}" 的数据项? \n如果该物料已有库存记录，删除将会被拒绝。`,
|
||||
"警告",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}
|
||||
).then(() => {
|
||||
// 调用 API 文件中的 delMaterialBase
|
||||
delMaterialBase(row.id)
|
||||
.then(() => {
|
||||
ElMessage.success("删除成功");
|
||||
if (tableData.value.length === 1 && queryParams.pageNum > 1) {
|
||||
queryParams.pageNum--;
|
||||
}
|
||||
getList();
|
||||
});
|
||||
}).catch(() => {
|
||||
// 取消
|
||||
resetForm();
|
||||
dialog.title = '编辑基础信息';
|
||||
dialog.visible = true;
|
||||
nextTick(() => {
|
||||
Object.assign(form.value, row);
|
||||
});
|
||||
};
|
||||
|
||||
// 打开链接
|
||||
const checkDuplicate = async (name: string, spec: string): Promise<boolean> => {
|
||||
try {
|
||||
const nameRes: any = await listMaterialBase({ pageNum: 1, pageSize: 100, keyword: name });
|
||||
if (nameRes.data?.items?.some((item: MaterialBaseVO) => item.name === name)) {
|
||||
ElMessage.error(`添加失败：已存在名称为 "${name}" 的基础信息！`);
|
||||
return true;
|
||||
}
|
||||
const specRes: any = await listMaterialBase({ pageNum: 1, pageSize: 100, keyword: spec });
|
||||
if (specRes.data?.items?.some((item: MaterialBaseVO) => item.spec === spec)) {
|
||||
ElMessage.error(`添加失败：已存在规格/编号为 "${spec}" 的基础信息！`);
|
||||
return true;
|
||||
}
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const submitForm = async () => {
|
||||
if (!formRef.value) return;
|
||||
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
submitLoading.value = true;
|
||||
try {
|
||||
if (!form.value.id) {
|
||||
const isDuplicate = await checkDuplicate(form.value.name, form.value.spec);
|
||||
if (isDuplicate) {
|
||||
submitLoading.value = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
const requestApi = form.value.id ? updateMaterialBase : addMaterialBase;
|
||||
const actionText = form.value.id ? '修改' : '新增';
|
||||
await requestApi(form.value);
|
||||
ElMessage.success(`${actionText}成功`);
|
||||
dialog.visible = false;
|
||||
getList();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
submitLoading.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
dialog.visible = false;
|
||||
resetForm();
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
form.value = {...initForm};
|
||||
if (formRef.value) formRef.value.resetFields();
|
||||
};
|
||||
|
||||
const handleStatusChange = (row: MaterialBaseVO) => {
|
||||
row.statusLoading = true;
|
||||
const text = row.isEnabled === 1 ? "启用" : "停用";
|
||||
const updateData = { id: row.id, isEnabled: row.isEnabled };
|
||||
updateMaterialBase(updateData)
|
||||
.then(() => ElMessage.success(`已${text} "${row.name}"`))
|
||||
.catch(() => { row.isEnabled = row.isEnabled === 1 ? 0 : 1; })
|
||||
.finally(() => { row.statusLoading = false; });
|
||||
};
|
||||
|
||||
const handleDelete = (row: MaterialBaseVO) => {
|
||||
ElMessageBox.confirm(
|
||||
`是否确认删除名称为 "${row.name}" 的数据项?`,
|
||||
"警告",
|
||||
{ confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }
|
||||
).then(() => {
|
||||
delMaterialBase(row.id).then(() => {
|
||||
ElMessage.success("删除成功");
|
||||
if (tableData.value.length === 1 && queryParams.pageNum > 1) queryParams.pageNum--;
|
||||
getList();
|
||||
});
|
||||
}).catch(() => {});
|
||||
};
|
||||
|
||||
const openLink = (url: string) => {
|
||||
if (!url) return;
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
@ -299,15 +527,25 @@ onMounted(() => {
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
.card-header {
|
||||
.filter-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.filter-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
gap: 10px;
|
||||
}
|
||||
.right-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.column-setting-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user