809 lines
29 KiB
Vue
809 lines
29 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-card shadow="never">
|
||
<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>
|
||
|
||
<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-tooltip content="刷新" placement="top">
|
||
<el-button circle :icon="Refresh" @click="getList" />
|
||
</el-tooltip>
|
||
|
||
<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-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.commonName.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
|
||
v-loading="loading"
|
||
:data="tableData"
|
||
border
|
||
stripe
|
||
:size="tableSize"
|
||
style="width: 100%; margin-top: 15px"
|
||
>
|
||
<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="160" show-overflow-tooltip />
|
||
|
||
<el-table-column v-if="columns.commonName.visible" prop="commonName" label="俗名" min-width="140" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<span v-if="scope.row.commonName">{{ scope.row.commonName }}</span>
|
||
<span v-else style="color: #ccc;">-</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<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="140" align="center">
|
||
<template #default="{ row }">
|
||
<div style="display: flex; gap: 8px; justify-content: center;">
|
||
<div v-if="getImagesOnly(row.generalImage).length > 0" class="file-preview-cell">
|
||
<el-image
|
||
style="width: 32px; height: 32px; border-radius: 4px;"
|
||
:src="getImageUrl(getImagesOnly(row.generalImage)[0])"
|
||
:preview-src-list="getImagesOnly(row.generalImage).map(u => getImageUrl(u))"
|
||
preview-teleported
|
||
fit="cover"
|
||
/>
|
||
<span v-if="getImagesOnly(row.generalImage).length > 1" class="more-badge">+{{getImagesOnly(row.generalImage).length}}</span>
|
||
</div>
|
||
|
||
<el-popover v-if="row.generalManual && row.generalManual.length > 0" placement="top" trigger="hover" width="200">
|
||
<template #reference>
|
||
<el-button link type="primary" :icon="Document" />
|
||
</template>
|
||
<div style="display: flex; flex-direction: column; gap: 5px;">
|
||
<div v-for="(link, idx) in row.generalManual" :key="idx">
|
||
<el-link v-if="isExternalLink(link)" :href="link" target="_blank" type="primary" :underline="false">
|
||
说明书 {{idx+1}} <el-icon><Link /></el-icon>
|
||
</el-link>
|
||
<el-image v-else
|
||
style="width: 100px; height: 100px"
|
||
:src="getImageUrl(link)"
|
||
:preview-src-list="[getImageUrl(link)]"
|
||
fit="cover"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</el-popover>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<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"
|
||
:active-value="1"
|
||
:inactive-value="0"
|
||
:loading="scope.row.statusLoading"
|
||
@change="handleStatusChange(scope.row)"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<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>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div style="margin-top: 20px; text-align: right;">
|
||
<el-pagination
|
||
background
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total"
|
||
v-model:current-page="queryParams.pageNum"
|
||
v-model:page-size="queryParams.pageSize"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
@size-change="getList"
|
||
@current-change="getList"
|
||
/>
|
||
</div>
|
||
|
||
<el-dialog
|
||
v-model="dialog.visible"
|
||
:title="dialog.title"
|
||
width="700px"
|
||
append-to-body
|
||
@close="cancel"
|
||
>
|
||
<el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
|
||
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="名称" prop="name">
|
||
<el-input v-model="form.name" placeholder="内部名称" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="俗名" prop="commonName">
|
||
<el-input v-model="form.commonName" placeholder="标准名称" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<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="generalImage">
|
||
<div class="upload-container">
|
||
<el-upload
|
||
v-model:file-list="fileListImage"
|
||
action="#"
|
||
list-type="picture-card"
|
||
multiple
|
||
:http-request="(opts) => customUpload(opts, 'generalImage')"
|
||
:on-preview="handlePreviewPicture"
|
||
:on-remove="(file) => handleRemoveImage(file, 'generalImage')"
|
||
:before-upload="beforeAvatarUpload"
|
||
>
|
||
<el-icon><Plus /></el-icon>
|
||
</el-upload>
|
||
<div class="camera-card" @click="triggerCamera('generalImage')">
|
||
<el-icon><Camera /></el-icon><span class="text">拍照</span>
|
||
</div>
|
||
</div>
|
||
<el-input
|
||
v-model="imageExternalUrl"
|
||
placeholder="如有外部图片链接，请在此输入"
|
||
style="margin-top: 8px;"
|
||
clearable
|
||
>
|
||
<template #prefix><el-icon><Link /></el-icon></template>
|
||
</el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="说明书" prop="generalManual">
|
||
<div class="upload-container">
|
||
<el-upload
|
||
v-model:file-list="fileListManual"
|
||
action="#"
|
||
list-type="picture-card"
|
||
multiple
|
||
:http-request="(opts) => customUpload(opts, 'generalManual')"
|
||
:on-preview="handlePreviewPicture"
|
||
:on-remove="(file) => handleRemoveImage(file, 'generalManual')"
|
||
:before-upload="beforeAvatarUpload"
|
||
>
|
||
<el-icon><Plus /></el-icon>
|
||
</el-upload>
|
||
<div class="camera-card" @click="triggerCamera('generalManual')">
|
||
<el-icon><Camera /></el-icon><span class="text">拍照</span>
|
||
</div>
|
||
</div>
|
||
<el-input
|
||
v-model="manualExternalUrl"
|
||
placeholder="如有外部说明书链接，请在此输入"
|
||
style="margin-top: 8px;"
|
||
clearable
|
||
>
|
||
<template #prefix><el-icon><Link /></el-icon></template>
|
||
</el-input>
|
||
</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-dialog v-model="dialogVisibleImage" append-to-body width="50%">
|
||
<img style="width: 100%" :src="dialogImageUrl" alt="Preview Image" />
|
||
</el-dialog>
|
||
|
||
<input type="file" ref="cameraInputRef" accept="image/*" capture="environment" style="display: none" @change="handleCameraFile"/>
|
||
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||
import { Plus, Picture, Document, Refresh, Setting, Rank, Camera, Link } from '@element-plus/icons-vue';
|
||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||
import type { FormInstance, FormRules } from 'element-plus';
|
||
|
||
import {
|
||
listMaterialBase,
|
||
addMaterialBase,
|
||
updateMaterialBase,
|
||
delMaterialBase
|
||
} from '@/api/material_base';
|
||
import { uploadFile, deleteFile } from '@/api/common/upload'; // 假设通用上传接口在此
|
||
|
||
// --- 类型定义 ---
|
||
interface MaterialBaseVO {
|
||
id: number;
|
||
name: string;
|
||
commonName?: string;
|
||
category: string;
|
||
type: string;
|
||
spec: string;
|
||
unit: string;
|
||
visibilityLevel: number;
|
||
generalManual: string[]; // 修改为数组
|
||
generalImage: string[]; // 修改为数组
|
||
isEnabled: number;
|
||
statusLoading?: boolean;
|
||
}
|
||
|
||
interface QueryParams {
|
||
pageNum: number;
|
||
pageSize: number;
|
||
keyword: string;
|
||
category: string;
|
||
type: string;
|
||
isEnabled?: number;
|
||
}
|
||
|
||
// --- 响应式数据 ---
|
||
const loading = ref(false);
|
||
const total = ref(0);
|
||
const tableData = ref<MaterialBaseVO[]>([]);
|
||
const submitLoading = ref(false);
|
||
const tableSize = ref<'large' | 'default' | 'small'>('large');
|
||
|
||
// 文件上传相关
|
||
const fileListImage = ref<any[]>([]);
|
||
const fileListManual = ref<any[]>([]);
|
||
const imageExternalUrl = ref('');
|
||
const manualExternalUrl = ref('');
|
||
const dialogVisibleImage = ref(false);
|
||
const dialogImageUrl = ref('');
|
||
const cameraInputRef = ref<HTMLInputElement | null>(null);
|
||
const currentCameraField = ref<'generalImage' | 'generalManual'>('generalImage');
|
||
|
||
|
||
const columns = reactive({
|
||
id: { visible: true },
|
||
name: { visible: true },
|
||
commonName: { 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,
|
||
pageSize: 10,
|
||
keyword: '',
|
||
category: '',
|
||
type: '',
|
||
isEnabled: undefined
|
||
});
|
||
|
||
// --- 弹窗与表单相关 ---
|
||
const dialog = reactive({
|
||
visible: false,
|
||
title: ''
|
||
});
|
||
|
||
const formRef = ref<FormInstance>();
|
||
|
||
const initForm = {
|
||
id: undefined,
|
||
name: '',
|
||
commonName: '',
|
||
category: '',
|
||
type: '',
|
||
spec: '',
|
||
unit: '',
|
||
visibilityLevel: 0,
|
||
generalManual: [] as string[], // 初始化为数组
|
||
generalImage: [] as string[], // 初始化为数组
|
||
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);
|
||
};
|
||
|
||
const querySearchCategory = (queryString: string, cb: any) => {
|
||
const results = queryString
|
||
? categoryOptions.value.filter(item => item.toLowerCase().includes(queryString.toLowerCase()))
|
||
: categoryOptions.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;
|
||
listMaterialBase(queryParams)
|
||
.then((response: any) => {
|
||
if (response && response.data) {
|
||
tableData.value = response.data.items;
|
||
total.value = response.data.total;
|
||
extractDynamicOptions(tableData.value);
|
||
} else {
|
||
tableData.value = [];
|
||
total.value = 0;
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.error(err);
|
||
tableData.value = [];
|
||
})
|
||
.finally(() => {
|
||
loading.value = false;
|
||
});
|
||
};
|
||
|
||
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 = '';
|
||
queryParams.type = '';
|
||
queryParams.isEnabled = undefined;
|
||
handleQuery();
|
||
};
|
||
|
||
const handleSizeChange = (command: 'large' | 'default' | 'small') => {
|
||
tableSize.value = command;
|
||
};
|
||
|
||
const handleAdd = () => {
|
||
resetForm();
|
||
dialog.title = '新增基础信息';
|
||
dialog.visible = true;
|
||
};
|
||
|
||
const handleEdit = (row: MaterialBaseVO) => {
|
||
resetForm();
|
||
dialog.title = '编辑基础信息';
|
||
dialog.visible = true;
|
||
|
||
nextTick(() => {
|
||
// 基础字段赋值
|
||
Object.assign(form.value, row);
|
||
|
||
// 初始化文件列表
|
||
const images = row.generalImage || [];
|
||
const manuals = row.generalManual || [];
|
||
|
||
// 分离图片文件和外部链接
|
||
const imgFiles = images.filter(u => !isExternalLink(u));
|
||
const imgLinks = images.filter(u => isExternalLink(u));
|
||
|
||
const manualFiles = manuals.filter(u => !isExternalLink(u));
|
||
const manualLinks = manuals.filter(u => isExternalLink(u));
|
||
|
||
fileListImage.value = imgFiles.map(url => ({ name: url.split('/').pop(), url: getImageUrl(url) }));
|
||
imageExternalUrl.value = imgLinks.length > 0 ? imgLinks[0] : '';
|
||
|
||
fileListManual.value = manualFiles.map(url => ({ name: url.split('/').pop(), url: getImageUrl(url) }));
|
||
manualExternalUrl.value = manualLinks.length > 0 ? manualLinks[0] : '';
|
||
});
|
||
};
|
||
|
||
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 finalImageList = [...form.value.generalImage];
|
||
// 如果输入了外部链接且不在列表中，则加入
|
||
if (imageExternalUrl.value && !finalImageList.includes(imageExternalUrl.value)) {
|
||
finalImageList.push(imageExternalUrl.value);
|
||
}
|
||
// 过滤：只保留上传的(已经在customUpload处理) 和 外部链接
|
||
const cleanImages = finalImageList.filter(item => !isExternalLink(item)); // 这里的逻辑需要修正，应基于form.value.generalImage已经包含的内容
|
||
if (imageExternalUrl.value) cleanImages.push(imageExternalUrl.value);
|
||
|
||
|
||
const finalManualList = [...form.value.generalManual];
|
||
if (manualExternalUrl.value && !finalManualList.includes(manualExternalUrl.value)) {
|
||
finalManualList.push(manualExternalUrl.value);
|
||
}
|
||
const cleanManuals = finalManualList.filter(item => !isExternalLink(item));
|
||
if (manualExternalUrl.value) cleanManuals.push(manualExternalUrl.value);
|
||
|
||
const payload = {
|
||
...form.value,
|
||
generalImage: cleanImages,
|
||
generalManual: cleanManuals
|
||
};
|
||
|
||
const requestApi = form.value.id ? updateMaterialBase : addMaterialBase;
|
||
const actionText = form.value.id ? '修改' : '新增';
|
||
await requestApi(payload);
|
||
|
||
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};
|
||
fileListImage.value = [];
|
||
fileListManual.value = [];
|
||
imageExternalUrl.value = '';
|
||
manualExternalUrl.value = '';
|
||
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');
|
||
}
|
||
|
||
// --- 文件上传辅助函数 ---
|
||
|
||
const getImageUrl = (url: string) => { return !url ? '' : (url.startsWith('http') ? url : url) }
|
||
const isExternalLink = (str: string) => { return str && (str.startsWith('http://') || str.startsWith('https://')) && !str.includes('/api/v1/common/files') }
|
||
const getImagesOnly = (list: string[]) => { return !list ? [] : list.filter(item => !isExternalLink(item)) }
|
||
|
||
const beforeAvatarUpload = (rawFile: any) => {
|
||
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'application/pdf') {
|
||
// 允许PDF用于说明书
|
||
if (rawFile.type === 'application/pdf') return true;
|
||
ElMessage.error('支持 JPG/PNG/PDF');
|
||
return false
|
||
}
|
||
if (rawFile.size / 1024 / 1024 > 10) { ElMessage.error('文件不能超过 10MB'); return false }
|
||
return true
|
||
}
|
||
|
||
const customUpload = async (options: any, targetField: 'generalImage' | 'generalManual') => {
|
||
const { file, onSuccess, onError } = options
|
||
const formData = new FormData()
|
||
formData.append('file', file)
|
||
try {
|
||
const res: any = await uploadFile(formData)
|
||
if (res.code === 200) {
|
||
const newUrl = res.data.url
|
||
form.value[targetField].push(newUrl)
|
||
ElMessage.success('上传成功')
|
||
onSuccess(res)
|
||
} else {
|
||
ElMessage.error(res.msg || '上传失败');
|
||
onError(new Error(res.msg))
|
||
}
|
||
} catch (e) {
|
||
ElMessage.error('网络错误');
|
||
onError(e)
|
||
}
|
||
}
|
||
|
||
const handleRemoveImage = async (uploadFile: any, targetField: 'generalImage' | 'generalManual') => {
|
||
try {
|
||
const urlToRemove = form.value[targetField].find(u => getImageUrl(u) === uploadFile.url) || uploadFile.url
|
||
form.value[targetField] = form.value[targetField].filter(u => u !== urlToRemove)
|
||
if (!isExternalLink(urlToRemove)) {
|
||
const filename = urlToRemove.split('/').pop();
|
||
if (filename) await deleteFile(filename)
|
||
}
|
||
ElMessage.success('已删除')
|
||
} catch (e) { console.error(e) }
|
||
}
|
||
|
||
const handlePreviewPicture = (uploadFile: any) => {
|
||
dialogImageUrl.value = uploadFile.url!;
|
||
dialogVisibleImage.value = true
|
||
}
|
||
|
||
const triggerCamera = (field: 'generalImage' | 'generalManual') => {
|
||
currentCameraField.value = field;
|
||
if (cameraInputRef.value) cameraInputRef.value.click()
|
||
}
|
||
|
||
const handleCameraFile = async (event: Event) => {
|
||
const input = event.target as HTMLInputElement
|
||
if (input.files && input.files[0]) {
|
||
const file = input.files[0]
|
||
if (!beforeAvatarUpload(file)) { input.value = ''; return }
|
||
const formData = new FormData(); formData.append('file', file)
|
||
const loadingMsg = ElMessage.loading({ message: '照片上传中...', duration: 0 })
|
||
try {
|
||
const res: any = await uploadFile(formData)
|
||
if (res.code === 200) {
|
||
const newUrl = res.data.url;
|
||
const field = currentCameraField.value
|
||
form.value[field].push(newUrl)
|
||
if (field === 'generalImage') fileListImage.value.push({ name: newUrl.split('/').pop(), url: getImageUrl(newUrl) })
|
||
else fileListManual.value.push({ name: newUrl.split('/').pop(), url: getImageUrl(newUrl) })
|
||
ElMessage.success('拍照上传成功')
|
||
} else { ElMessage.error(res.msg || '上传失败') }
|
||
} catch (e) { ElMessage.error('网络错误，上传失败') } finally { loadingMsg.close(); input.value = '' }
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
getList();
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.app-container {
|
||
padding: 20px;
|
||
}
|
||
.filter-wrapper {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.filter-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.right-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.column-setting-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 上传相关样式 */
|
||
.upload-container { display: flex; flex-wrap: wrap; gap: 8px; }
|
||
:deep(.el-upload--picture-card) { width: 100px; height: 100px; line-height: 100px; }
|
||
:deep(.el-upload-list--picture-card .el-upload-list__item) { width: 100px; height: 100px; }
|
||
.camera-card { width: 100px; height: 100px; background-color: #fbfdff; border: 1px dashed #c0ccda; border-radius: 6px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s; color: #8c939d; }
|
||
.camera-card:hover { border-color: #409EFF; color: #409EFF; }
|
||
.camera-card .text { font-size: 12px; margin-top: 5px; }
|
||
.camera-card .el-icon { font-size: 24px; }
|
||
|
||
/* 表格缩略图样式 */
|
||
.file-preview-cell { display: flex; align-items: center; justify-content: center; position: relative; }
|
||
.more-badge { position: absolute; top: -5px; right: -5px; background: #909399; color: #fff; border-radius: 10px; padding: 0 4px; font-size: 10px; transform: scale(0.9); }
|
||
</style> |