立项配置数据入库、审计日志数据入库、编辑页UI界面美化、设备管理内容补充、审计日志显示优化
This commit is contained in:
Cheng Zhou
@@ -1,13 +1,601 @@
|
||||
<template>
|
||||
<ModulePlaceholder
|
||||
:title="TEXT.modules.materialEquipment.title"
|
||||
:subtitle="TEXT.modules.materialEquipment.subtitle"
|
||||
:list-title="TEXT.modules.materialEquipment.listTitle"
|
||||
:empty-description="TEXT.modules.materialEquipment.emptyDescription"
|
||||
/>
|
||||
<div class="page">
|
||||
<div v-if="study.currentStudy" class="unified-shell">
|
||||
<section class="unified-section equipment-section">
|
||||
<div class="filter-row">
|
||||
<el-form :inline="true" :model="filters">
|
||||
<el-form-item label="设备名称">
|
||||
<el-input v-model="filters.name" clearable placeholder="请输入" class="name-filter" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="resetFilters">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button type="primary" @click="openCreate">新建</el-button>
|
||||
</div>
|
||||
|
||||
<el-table v-loading="loading" :data="rows" class="ctms-table" style="width: 100%" table-layout="fixed">
|
||||
<el-table-column prop="name" label="设备名称" />
|
||||
<el-table-column prop="specModel" label="规格型号" />
|
||||
<el-table-column prop="unit" label="单位" />
|
||||
<el-table-column prop="brand" label="品牌" />
|
||||
<el-table-column label="是否需要校准">
|
||||
<template #default="{ row }">
|
||||
{{ row.needCalibration ? "是" : "否" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" @click="openEdit(row)">编辑</el-button>
|
||||
<el-button link type="danger" @click="removeRow(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<StateEmpty v-if="!loading && rows.length === 0" description="暂无设备数据" />
|
||||
</section>
|
||||
</div>
|
||||
<StateEmpty v-else :description="TEXT.common.empty.selectProject" />
|
||||
|
||||
<el-drawer
|
||||
v-model="drawerVisible"
|
||||
direction="rtl"
|
||||
size="620px"
|
||||
:close-on-click-modal="false"
|
||||
:show-close="false"
|
||||
class="equipment-editor-drawer"
|
||||
>
|
||||
<template #header>
|
||||
<div class="editor-header">
|
||||
<div class="editor-title">{{ editingId ? "编辑设备" : "新建设备" }}</div>
|
||||
<div class="editor-subtitle">{{ editingId ? "修改设备基本信息与校准配置" : "添加新的设备记录到设备台账" }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="equipment-form">
|
||||
<!-- 基本信息分组 -->
|
||||
<div class="form-group">
|
||||
<div class="form-group-title">
|
||||
<span class="group-dot group-dot-basic"></span>
|
||||
基本信息
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<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="specModel">
|
||||
<el-input v-model="form.specModel" placeholder="请输入规格型号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="单位" prop="unit">
|
||||
<el-input v-model="form.unit" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="品牌" prop="brand">
|
||||
<el-input v-model="form.brand" placeholder="请输入品牌" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="产地" prop="origin">
|
||||
<el-input v-model="form.origin" placeholder="请输入产地" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 资质文件分组 -->
|
||||
<div class="form-group">
|
||||
<div class="form-group-title">
|
||||
<span class="group-dot group-dot-file"></span>
|
||||
资质文件
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<div class="upload-card">
|
||||
<div class="upload-card-label">生产许可证</div>
|
||||
<el-upload :auto-upload="false" :show-file-list="false" :on-change="onProductionPermitChange">
|
||||
<div v-if="!form.productionPermitFileName" class="upload-trigger">
|
||||
<span class="upload-icon">📄</span>
|
||||
<span class="upload-text">点击上传文件</span>
|
||||
</div>
|
||||
</el-upload>
|
||||
<div v-if="form.productionPermitFileName" class="upload-result">
|
||||
<span class="upload-result-icon">✅</span>
|
||||
<span class="upload-result-name">{{ form.productionPermitFileName }}</span>
|
||||
<el-button link type="danger" size="small" @click="form.productionPermitFileName = ''">移除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="upload-card">
|
||||
<div class="upload-card-label">技术指标</div>
|
||||
<el-upload :auto-upload="false" :show-file-list="false" :on-change="onTechIndexChange">
|
||||
<div v-if="!form.techIndexFileName" class="upload-trigger">
|
||||
<span class="upload-icon">📄</span>
|
||||
<span class="upload-text">点击上传文件</span>
|
||||
</div>
|
||||
</el-upload>
|
||||
<div v-if="form.techIndexFileName" class="upload-result">
|
||||
<span class="upload-result-icon">✅</span>
|
||||
<span class="upload-result-name">{{ form.techIndexFileName }}</span>
|
||||
<el-button link type="danger" size="small" @click="form.techIndexFileName = ''">移除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!-- 校准设置分组 -->
|
||||
<div class="form-group">
|
||||
<div class="form-group-title">
|
||||
<span class="group-dot group-dot-calibration"></span>
|
||||
校准设置
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否需要校准" prop="needCalibration">
|
||||
<el-select v-model="form.needCalibration" placeholder="请选择" class="full-width">
|
||||
<el-option label="是" :value="true" />
|
||||
<el-option label="否" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col v-if="form.needCalibration" :span="12">
|
||||
<el-form-item label="校准周期(天)" prop="calibrationCycleDays">
|
||||
<el-input-number v-model="form.calibrationCycleDays" :min="1" :precision="0" class="full-width" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-if="!form.needCalibration" class="calibration-hint">
|
||||
<span class="hint-icon">ℹ️</span>
|
||||
<span>该设备无需定期校准</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="drawerVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveForm">保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ModulePlaceholder from "../../components/ModulePlaceholder.vue";
|
||||
import { reactive, ref, watch } from "vue";
|
||||
import { ElMessage, ElMessageBox, type FormInstance, type FormRules, type UploadFile } from "element-plus";
|
||||
import {
|
||||
createMaterialEquipment,
|
||||
deleteMaterialEquipment,
|
||||
listMaterialEquipments,
|
||||
updateMaterialEquipment,
|
||||
} from "../../api/materialEquipments";
|
||||
import StateEmpty from "../../components/StateEmpty.vue";
|
||||
import { useStudyStore } from "../../store/study";
|
||||
import { TEXT } from "../../locales";
|
||||
|
||||
interface EquipmentRow {
|
||||
id: string;
|
||||
name: string;
|
||||
specModel: string;
|
||||
unit: string;
|
||||
brand: string;
|
||||
origin: string;
|
||||
productionPermitFileName: string;
|
||||
techIndexFileName: string;
|
||||
needCalibration: boolean;
|
||||
calibrationCycleDays: number | null;
|
||||
}
|
||||
|
||||
type FormModel = Omit<EquipmentRow, "id">;
|
||||
|
||||
const study = useStudyStore();
|
||||
const filters = reactive({ name: "" });
|
||||
const rows = ref<EquipmentRow[]>([]);
|
||||
const loading = ref(false);
|
||||
const drawerVisible = ref(false);
|
||||
const editingId = ref("");
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const defaultForm: FormModel = {
|
||||
name: "",
|
||||
specModel: "",
|
||||
unit: "",
|
||||
brand: "",
|
||||
origin: "",
|
||||
productionPermitFileName: "",
|
||||
techIndexFileName: "",
|
||||
needCalibration: true,
|
||||
calibrationCycleDays: 30,
|
||||
};
|
||||
|
||||
const form = reactive<FormModel>({ ...defaultForm });
|
||||
|
||||
const rules: FormRules<FormModel> = {
|
||||
name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
|
||||
specModel: [{ required: true, message: "请输入规格型号", trigger: "blur" }],
|
||||
brand: [{ required: true, message: "请输入品牌", trigger: "blur" }],
|
||||
needCalibration: [{ required: true, message: "请选择是否需要校准", trigger: "change" }],
|
||||
calibrationCycleDays: [
|
||||
{
|
||||
validator: (_rule, value, callback) => {
|
||||
if (form.needCalibration && (!value || value < 1)) {
|
||||
callback(new Error("请填写校准周期"));
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
},
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const loadRows = async () => {
|
||||
const studyId = study.currentStudy?.id;
|
||||
if (!studyId) {
|
||||
rows.value = [];
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = (await listMaterialEquipments(studyId, {
|
||||
name: filters.name.trim() || undefined,
|
||||
limit: 500,
|
||||
})) as any;
|
||||
const list = Array.isArray(data) ? data : data?.items || [];
|
||||
rows.value = list.map((item: any) => ({
|
||||
id: item.id,
|
||||
name: item.name || "",
|
||||
specModel: item.spec_model || "",
|
||||
unit: item.unit || "",
|
||||
brand: item.brand || "",
|
||||
origin: item.origin || "",
|
||||
productionPermitFileName: item.production_permit_file_name || "",
|
||||
techIndexFileName: item.tech_index_file_name || "",
|
||||
needCalibration: !!item.need_calibration,
|
||||
calibrationCycleDays: item.calibration_cycle_days ?? null,
|
||||
}));
|
||||
} catch (e: any) {
|
||||
rows.value = [];
|
||||
ElMessage.error(e?.response?.data?.detail || TEXT.common.messages.loadFailed);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
Object.assign(form, defaultForm);
|
||||
formRef.value?.clearValidate();
|
||||
};
|
||||
|
||||
const openCreate = () => {
|
||||
editingId.value = "";
|
||||
resetForm();
|
||||
drawerVisible.value = true;
|
||||
};
|
||||
|
||||
const openEdit = (row: EquipmentRow) => {
|
||||
editingId.value = row.id;
|
||||
Object.assign(form, {
|
||||
name: row.name,
|
||||
specModel: row.specModel,
|
||||
unit: row.unit,
|
||||
brand: row.brand,
|
||||
origin: row.origin,
|
||||
productionPermitFileName: row.productionPermitFileName,
|
||||
techIndexFileName: row.techIndexFileName,
|
||||
needCalibration: row.needCalibration,
|
||||
calibrationCycleDays: row.calibrationCycleDays,
|
||||
});
|
||||
formRef.value?.clearValidate();
|
||||
drawerVisible.value = true;
|
||||
};
|
||||
|
||||
const saveForm = async () => {
|
||||
const studyId = study.currentStudy?.id;
|
||||
if (!studyId) return;
|
||||
const ok = await formRef.value?.validate().catch(() => false);
|
||||
if (!ok) return;
|
||||
const payload = {
|
||||
name: form.name.trim(),
|
||||
spec_model: form.specModel.trim(),
|
||||
unit: form.unit.trim() || null,
|
||||
brand: form.brand.trim(),
|
||||
origin: form.origin.trim() || null,
|
||||
production_permit_file_name: form.productionPermitFileName || null,
|
||||
tech_index_file_name: form.techIndexFileName || null,
|
||||
need_calibration: !!form.needCalibration,
|
||||
calibration_cycle_days: form.needCalibration ? form.calibrationCycleDays : null,
|
||||
};
|
||||
try {
|
||||
if (editingId.value) {
|
||||
await updateMaterialEquipment(studyId, editingId.value, payload);
|
||||
} else {
|
||||
await createMaterialEquipment(studyId, payload);
|
||||
}
|
||||
await loadRows();
|
||||
drawerVisible.value = false;
|
||||
ElMessage.success("保存成功");
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.detail || TEXT.common.messages.saveFailed);
|
||||
}
|
||||
};
|
||||
|
||||
const removeRow = async (row: EquipmentRow) => {
|
||||
const studyId = study.currentStudy?.id;
|
||||
if (!studyId) return;
|
||||
const ok = await ElMessageBox.confirm("确认删除该条设备记录吗？", "提示", { type: "warning" }).catch(() => null);
|
||||
if (!ok) return;
|
||||
try {
|
||||
await deleteMaterialEquipment(studyId, row.id);
|
||||
await loadRows();
|
||||
ElMessage.success("删除成功");
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.detail || TEXT.common.messages.deleteFailed);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUploadChange = (file: UploadFile, field: "productionPermitFileName" | "techIndexFileName") => {
|
||||
form[field] = file.name;
|
||||
};
|
||||
|
||||
const onProductionPermitChange = (file: UploadFile) => {
|
||||
handleUploadChange(file, "productionPermitFileName");
|
||||
};
|
||||
|
||||
const onTechIndexChange = (file: UploadFile) => {
|
||||
handleUploadChange(file, "techIndexFileName");
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
loadRows();
|
||||
};
|
||||
|
||||
const resetFilters = () => {
|
||||
filters.name = "";
|
||||
loadRows();
|
||||
};
|
||||
|
||||
watch(
|
||||
() => study.currentStudy?.id,
|
||||
() => {
|
||||
filters.name = "";
|
||||
loadRows();
|
||||
drawerVisible.value = false;
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => form.needCalibration,
|
||||
(need) => {
|
||||
if (!need) form.calibrationCycleDays = null;
|
||||
if (need && !form.calibrationCycleDays) form.calibrationCycleDays = 30;
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.equipment-section {
|
||||
padding-top: 14px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.name-filter {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
/* ========== 抽屉头部 ========== */
|
||||
.editor-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.editor-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--ctms-text-main);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.editor-subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--ctms-text-secondary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ========== 表单整体 ========== */
|
||||
.equipment-form {
|
||||
padding: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
/* ========== 分组卡片 ========== */
|
||||
.form-group {
|
||||
border: 1px solid #e8eef6;
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px 8px;
|
||||
background: #fbfcfe;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.form-group:hover {
|
||||
border-color: #d0dced;
|
||||
}
|
||||
|
||||
.form-group + .form-group {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.form-group-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 14px;
|
||||
color: #1a3560;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.group-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 基本信息 - 蓝色 */
|
||||
.group-dot-basic {
|
||||
background: #3b82f6;
|
||||
}
|
||||
|
||||
/* 资质文件 - 琥珀色 */
|
||||
.group-dot-file {
|
||||
background: #f0ad2c;
|
||||
}
|
||||
|
||||
/* 校准设置 - 绿色 */
|
||||
.group-dot-calibration {
|
||||
background: #22c55e;
|
||||
}
|
||||
|
||||
/* ========== 上传卡片 ========== */
|
||||
.upload-card {
|
||||
border: 1px dashed #d0dced;
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px;
|
||||
background: #ffffff;
|
||||
transition: all 0.2s ease;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.upload-card:hover {
|
||||
border-color: var(--ctms-primary);
|
||||
background: #f8faff;
|
||||
}
|
||||
|
||||
.upload-card-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #4a6283;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.upload-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 13px;
|
||||
color: var(--ctms-text-secondary);
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.upload-trigger:hover .upload-text {
|
||||
color: var(--ctms-primary);
|
||||
}
|
||||
|
||||
.upload-result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.upload-result-icon {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.upload-result-name {
|
||||
font-size: 12px;
|
||||
color: var(--ctms-text-regular);
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ========== 校准提示 ========== */
|
||||
.calibration-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
background: #f0fdf4;
|
||||
border: 1px solid #bbf7d0;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: #166534;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.hint-icon {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ========== 表单元素细节 ========== */
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ========== 底部按钮 ========== */
|
||||
.drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* ========== 表单元素微调 ========== */
|
||||
.equipment-form :deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.equipment-form :deep(.el-form-item__label) {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #4a6283;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
/* ========== 表格居中 ========== */
|
||||
:deep(.ctms-table th.el-table__cell .cell),
|
||||
:deep(.ctms-table td.el-table__cell .cell) {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user