784 lines
28 KiB
Vue
784 lines
28 KiB
Vue
<template>
|
|
<div class="list-page">
|
|
<div class="page-title">材料管理</div>
|
|
<div class="toolbar">
|
|
<el-input v-model="filters.name" placeholder="材料名称" style="width: 200px" />
|
|
<el-select v-model="filters.status" placeholder="状态" clearable style="width: 140px">
|
|
<el-option v-for="item in statusOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
|
|
</el-select>
|
|
<el-select v-model="filters.material_subcategory" placeholder="材料子类" clearable style="width: 180px">
|
|
<el-option v-for="item in filterSubcategoryOptions" :key="item.value" :label="item.name" :value="item.value" />
|
|
</el-select>
|
|
<el-select
|
|
v-model="filters.brand"
|
|
placeholder="品牌"
|
|
clearable
|
|
filterable
|
|
remote
|
|
:remote-method="searchBrands"
|
|
:loading="brandSearchLoading"
|
|
style="width: 180px"
|
|
>
|
|
<el-option v-for="item in brandFilterOptions" :key="item.id" :label="item.name" :value="item.id" />
|
|
</el-select>
|
|
<el-button @click="loadMaterials">查询</el-button>
|
|
<el-button v-if="isAdmin" :loading="importing" @click="importDialogVisible = true">
|
|
{{ importing ? '导入中...' : '导入数据' }}
|
|
</el-button>
|
|
<el-button :loading="exporting" @click="handleExportExcel">
|
|
{{ exporting ? '导出中...' : '导出' }}
|
|
</el-button>
|
|
<el-button type="primary" @click="openCreate">新增材料</el-button>
|
|
<div class="toolbar-spacer" />
|
|
</div>
|
|
|
|
<div class="table-wrap">
|
|
<el-table v-loading="tableLoading" :data="materials" border height="100%">
|
|
<el-table-column prop="name" label="材料名称" min-width="180" show-overflow-tooltip />
|
|
<el-table-column prop="major_category_display" label="材料大类" width="100" />
|
|
<el-table-column prop="material_category" label="细分种类" min-width="140" show-overflow-tooltip />
|
|
<el-table-column prop="material_subcategory" label="材料子类" min-width="140" show-overflow-tooltip />
|
|
<el-table-column prop="stage_display" label="阶段" width="130" show-overflow-tooltip />
|
|
<el-table-column prop="importance_level_display" label="重要等级" width="110" />
|
|
<el-table-column prop="landing_project" label="落地项目" min-width="140" show-overflow-tooltip />
|
|
<el-table-column prop="contact_person" label="对接人" width="100" show-overflow-tooltip />
|
|
<el-table-column prop="contact_phone" label="对接人联系方式" width="150" show-overflow-tooltip />
|
|
<el-table-column prop="handler" label="经办人" width="100" show-overflow-tooltip />
|
|
<el-table-column prop="remark" label="备注" min-width="160" show-overflow-tooltip />
|
|
<el-table-column prop="factory_short_name" label="供应商" min-width="140" show-overflow-tooltip />
|
|
<el-table-column prop="brand_name" label="品牌" min-width="140" show-overflow-tooltip />
|
|
<el-table-column prop="status_display" label="状态" width="100" />
|
|
<el-table-column label="操作" width="320" fixed="right">
|
|
<template #default="scope">
|
|
<div class="table-actions">
|
|
<el-button size="small" @click="goDetail(scope.row)">详情</el-button>
|
|
<el-button v-if="canEdit(scope.row)" size="small" @click="openEdit(scope.row)">编辑</el-button>
|
|
<el-button v-if="canSubmit(scope.row)" size="small" type="warning" @click="onSubmitAudit(scope.row)">提交审核</el-button>
|
|
<el-button v-if="canApprove(scope.row)" size="small" type="success" @click="onApprove(scope.row)">审核通过</el-button>
|
|
<el-button v-if="canApprove(scope.row)" size="small" type="danger" @click="onReject(scope.row)">审核拒绝</el-button>
|
|
<el-button v-if="canDelete(scope.row)" size="small" type="danger" @click="onDelete(scope.row)">删除</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="pagination">
|
|
<el-pagination
|
|
background
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:page-sizes="[10, 20, 50]"
|
|
:current-page="pagination.page"
|
|
:page-size="pagination.pageSize"
|
|
:total="pagination.total"
|
|
@current-change="onPageChange"
|
|
@size-change="onPageSizeChange"
|
|
/>
|
|
</div>
|
|
|
|
<el-drawer
|
|
v-model="dialogVisible"
|
|
:title="dialogTitle"
|
|
size="60%"
|
|
:close-on-click-modal="false"
|
|
:destroy-on-close="false"
|
|
class="material-drawer"
|
|
>
|
|
<el-form :model="form" label-width="110px">
|
|
<el-form-item label="材料名称" required>
|
|
<el-input v-model="form.name" />
|
|
</el-form-item>
|
|
<el-form-item label="材料大类" required>
|
|
<el-select v-model="form.major_category">
|
|
<el-option v-for="item in majorOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="细分种类" required>
|
|
<el-select v-model="form.material_category" filterable @change="onCategoryChange">
|
|
<el-option v-for="item in categoryOptions" :key="item.value" :label="item.name" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="材料子类">
|
|
<el-select v-model="form.material_subcategory" filterable clearable>
|
|
<el-option v-for="item in subcategoryOptions" :key="item.value" :label="item.name" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="阶段">
|
|
<el-select v-model="form.stage" clearable>
|
|
<el-option v-for="item in stageOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="重要等级">
|
|
<el-select v-model="form.importance_level" clearable>
|
|
<el-option v-for="item in importanceLevelOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="落地项目">
|
|
<el-input v-model="form.landing_project" />
|
|
</el-form-item>
|
|
<el-form-item label="对接人">
|
|
<el-input v-model="form.contact_person" />
|
|
</el-form-item>
|
|
<el-form-item label="对接人联系方式">
|
|
<el-input v-model="form.contact_phone" />
|
|
</el-form-item>
|
|
<el-form-item label="经办人">
|
|
<el-input v-model="form.handler" />
|
|
</el-form-item>
|
|
<el-form-item label="备注">
|
|
<el-input v-model="form.remark" />
|
|
</el-form-item>
|
|
<el-form-item label="规格型号">
|
|
<el-input v-model="form.spec" />
|
|
</el-form-item>
|
|
<el-form-item label="符合标准">
|
|
<el-input v-model="form.standard" />
|
|
</el-form-item>
|
|
<el-form-item label="应用场景">
|
|
<el-select v-model="form.application_scene" multiple>
|
|
<el-option v-for="item in sceneOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="应用说明">
|
|
<el-input v-model="form.application_desc" type="textarea" />
|
|
</el-form-item>
|
|
<el-form-item label="替代材料类型">
|
|
<el-select v-model="form.replace_type" clearable>
|
|
<el-option v-for="item in replaceOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="竞争优势">
|
|
<el-select v-model="form.advantage" multiple>
|
|
<el-option v-for="item in advantageOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="优势说明">
|
|
<el-input v-model="form.advantage_desc" type="textarea" />
|
|
</el-form-item>
|
|
<el-form-item label="成本对比(%)">
|
|
<el-input-number v-model="form.cost_compare" :min="-100" :max="100" />
|
|
</el-form-item>
|
|
<el-form-item label="成本说明">
|
|
<el-input v-model="form.cost_desc" type="textarea" />
|
|
</el-form-item>
|
|
<el-form-item label="案例">
|
|
<el-input v-model="form.cases" type="textarea" />
|
|
</el-form-item>
|
|
<el-form-item label="宣传页">
|
|
<el-upload
|
|
class="upload"
|
|
:auto-upload="true"
|
|
:show-file-list="false"
|
|
:http-request="handleUpload"
|
|
accept="image/*"
|
|
>
|
|
<el-button :loading="uploading">{{ uploading ? '上传中...' : '选择图片' }}</el-button>
|
|
</el-upload>
|
|
<div v-if="form.brochure_url" class="preview">
|
|
<img :src="form.brochure_url" alt="预览" />
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="质量等级">
|
|
<el-select v-model="form.quality_level" clearable>
|
|
<el-option v-for="item in starOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="耐久等级">
|
|
<el-select v-model="form.durability_level" clearable>
|
|
<el-option v-for="item in starOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="环保等级">
|
|
<el-select v-model="form.eco_level" clearable>
|
|
<el-option v-for="item in starOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="低碳等级">
|
|
<el-select v-model="form.carbon_level" clearable>
|
|
<el-option v-for="item in starOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="总评分">
|
|
<el-select v-model="form.score_level" clearable>
|
|
<el-option v-for="item in starOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="连接方式">
|
|
<el-input v-model="form.connection_method" />
|
|
</el-form-item>
|
|
<el-form-item label="施工工艺">
|
|
<el-input v-model="form.construction_method" />
|
|
</el-form-item>
|
|
<el-form-item label="限制条件">
|
|
<el-input v-model="form.limit_condition" type="textarea" />
|
|
</el-form-item>
|
|
<el-form-item label="供应商" v-if="isAdmin">
|
|
<el-select v-model="form.factory">
|
|
<el-option v-for="item in factories" :key="item.id" :label="item.short_name" :value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="品牌" required>
|
|
<el-select
|
|
v-model="form.brand"
|
|
filterable
|
|
remote
|
|
:remote-method="searchBrandsForForm"
|
|
:loading="brandFormSearchLoading"
|
|
placeholder="请选择品牌"
|
|
>
|
|
<el-option v-for="item in brandFormOptions" :key="item.id" :label="item.name" :value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="onSave">保存</el-button>
|
|
</template>
|
|
</el-drawer>
|
|
|
|
<el-drawer
|
|
v-model="detailVisible"
|
|
title="材料详情"
|
|
size="60%"
|
|
class="material-drawer"
|
|
>
|
|
<el-descriptions v-if="detailData" :column="1" border>
|
|
<el-descriptions-item label="材料名称">{{ displayText(detailData.name) }}</el-descriptions-item>
|
|
<el-descriptions-item label="材料大类">{{ displayText(detailData.major_category_display) }}</el-descriptions-item>
|
|
<el-descriptions-item label="细分种类">{{ displayText(detailData.material_category) }}</el-descriptions-item>
|
|
<el-descriptions-item label="材料子类">{{ displayText(detailData.material_subcategory) }}</el-descriptions-item>
|
|
<el-descriptions-item label="阶段">{{ displayText(detailData.stage_display) }}</el-descriptions-item>
|
|
<el-descriptions-item label="重要等级">{{ displayText(detailData.importance_level_display) }}</el-descriptions-item>
|
|
<el-descriptions-item label="落地项目">{{ displayText(detailData.landing_project) }}</el-descriptions-item>
|
|
<el-descriptions-item label="对接人">{{ displayText(detailData.contact_person) }}</el-descriptions-item>
|
|
<el-descriptions-item label="对接人联系方式">{{ displayText(detailData.contact_phone) }}</el-descriptions-item>
|
|
<el-descriptions-item label="经办人">{{ displayText(detailData.handler) }}</el-descriptions-item>
|
|
<el-descriptions-item label="备注">{{ displayText(detailData.remark) }}</el-descriptions-item>
|
|
<el-descriptions-item label="规格型号">{{ displayText(detailData.spec) }}</el-descriptions-item>
|
|
<el-descriptions-item label="符合标准">{{ displayText(detailData.standard) }}</el-descriptions-item>
|
|
<el-descriptions-item label="应用场景">{{ displayList(detailData.application_scene_display) }}</el-descriptions-item>
|
|
<el-descriptions-item label="应用说明">{{ displayText(detailData.application_desc) }}</el-descriptions-item>
|
|
<el-descriptions-item label="替代材料类型">{{ displayText(detailData.replace_type_display) }}</el-descriptions-item>
|
|
<el-descriptions-item label="竞争优势">{{ displayList(detailData.advantage_display) }}</el-descriptions-item>
|
|
<el-descriptions-item label="优势说明">{{ displayText(detailData.advantage_desc) }}</el-descriptions-item>
|
|
<el-descriptions-item label="成本对比">{{ formatPercent(detailData.cost_compare) }}</el-descriptions-item>
|
|
<el-descriptions-item label="成本说明">{{ displayText(detailData.cost_desc) }}</el-descriptions-item>
|
|
<el-descriptions-item label="案例">{{ displayText(detailData.cases) }}</el-descriptions-item>
|
|
<el-descriptions-item label="供应商">{{ displayText(detailData.factory_name) }}</el-descriptions-item>
|
|
<el-descriptions-item label="品牌">{{ displayText(detailData.brand_name) }}</el-descriptions-item>
|
|
<el-descriptions-item label="质量等级">{{ formatStarLevel(detailData.quality_level) }}</el-descriptions-item>
|
|
<el-descriptions-item label="耐久等级">{{ formatStarLevel(detailData.durability_level) }}</el-descriptions-item>
|
|
<el-descriptions-item label="环保等级">{{ formatStarLevel(detailData.eco_level) }}</el-descriptions-item>
|
|
<el-descriptions-item label="低碳等级">{{ formatStarLevel(detailData.carbon_level) }}</el-descriptions-item>
|
|
<el-descriptions-item label="总评分">{{ formatStarLevel(detailData.score_level) }}</el-descriptions-item>
|
|
<el-descriptions-item label="连接方式">{{ displayText(detailData.connection_method) }}</el-descriptions-item>
|
|
<el-descriptions-item label="施工工艺">{{ displayText(detailData.construction_method) }}</el-descriptions-item>
|
|
<el-descriptions-item label="限制条件">{{ displayText(detailData.limit_condition) }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
<div v-if="detailData?.brochure_url" class="brochure">
|
|
<div class="brochure-title">宣传页</div>
|
|
<img :src="detailData.brochure_url" alt="宣传页" />
|
|
</div>
|
|
</el-drawer>
|
|
|
|
<el-dialog v-model="importDialogVisible" title="导入材料" width="420px">
|
|
<div class="import-dialog">
|
|
<div class="import-dialog__text">请先下载模板，按模板填写后上传 `.xlsx` 文件。</div>
|
|
<div class="import-dialog__actions">
|
|
<a :href="templateDownloadUrl" download="材料导入模板.xlsx">
|
|
<el-button>模板下载</el-button>
|
|
</a>
|
|
<el-upload
|
|
:auto-upload="true"
|
|
:show-file-list="false"
|
|
:http-request="handleImportExcel"
|
|
accept=".xlsx"
|
|
>
|
|
<el-button type="primary" :loading="importing">{{ importing ? '导入中...' : '上传文件' }}</el-button>
|
|
</el-upload>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import { useAuth } from '@/store/auth'
|
|
import { fetchMaterials, fetchMaterialDetail, createMaterial, updateMaterial, deleteMaterial, submitMaterial, approveMaterial, rejectMaterial, fetchMaterialChoices, uploadImage, importMaterialsExcel, exportMaterialsExcel } from '@/api/material'
|
|
import { fetchCategories, fetchSubcategories } from '@/api/category'
|
|
import { fetchFactorySimple } from '@/api/factory'
|
|
import { fetchBrands } from '@/api/brand'
|
|
|
|
const { isAdmin } = useAuth()
|
|
const materials = ref([])
|
|
const tableLoading = ref(false)
|
|
const pagination = reactive({
|
|
page: 1,
|
|
pageSize: 20,
|
|
total: 0
|
|
})
|
|
const factories = ref([])
|
|
const dialogVisible = ref(false)
|
|
const detailVisible = ref(false)
|
|
const detailData = ref(null)
|
|
const importDialogVisible = ref(false)
|
|
const dialogTitle = ref('')
|
|
const isEdit = ref(false)
|
|
const currentId = ref(null)
|
|
const uploading = ref(false)
|
|
const importing = ref(false)
|
|
const exporting = ref(false)
|
|
// const apiBaseUrl = (import.meta.env.VITE_API_BASE_URL).replace(/\/api$/, "");
|
|
// const templateDownloadUrl = `${apiBaseUrl}/media/material_import_template.xlsx`
|
|
const templateDownloadUrl = `http://101.42.1.64:2260/media/material_import_template.xlsx`
|
|
const filters = reactive({
|
|
name: '',
|
|
status: '',
|
|
material_subcategory: '',
|
|
brand: ''
|
|
})
|
|
|
|
const brandFilterOptions = ref([])
|
|
const brandFormOptions = ref([])
|
|
const brandSearchLoading = ref(false)
|
|
const brandFormSearchLoading = ref(false)
|
|
|
|
const form = reactive({
|
|
name: '',
|
|
major_category: '',
|
|
material_category: '',
|
|
material_subcategory: '',
|
|
stage: '',
|
|
importance_level: '',
|
|
landing_project: '',
|
|
contact_person: '',
|
|
contact_phone: '',
|
|
handler: '',
|
|
remark: '',
|
|
spec: '',
|
|
standard: '',
|
|
application_scene: [],
|
|
application_desc: '',
|
|
replace_type: '',
|
|
advantage: [],
|
|
advantage_desc: '',
|
|
cost_compare: null,
|
|
cost_desc: '',
|
|
cases: '',
|
|
brochure: null,
|
|
brochure_url: '',
|
|
quality_level: null,
|
|
durability_level: null,
|
|
eco_level: null,
|
|
carbon_level: null,
|
|
score_level: null,
|
|
connection_method: '',
|
|
construction_method: '',
|
|
limit_condition: '',
|
|
factory: null,
|
|
brand: null
|
|
})
|
|
|
|
const majorOptions = ref([])
|
|
const stageOptions = ref([])
|
|
const importanceLevelOptions = ref([])
|
|
const replaceOptions = ref([])
|
|
const advantageOptions = ref([])
|
|
const sceneOptions = ref([])
|
|
const starOptions = ref([])
|
|
const statusOptions = ref([])
|
|
const categoryOptions = ref([])
|
|
const subcategoryOptions = ref([])
|
|
const filterSubcategoryOptions = ref([])
|
|
const allSubcategories = ref([])
|
|
|
|
const loadMaterials = async () => {
|
|
tableLoading.value = true
|
|
try {
|
|
const data = await fetchMaterials({
|
|
...filters,
|
|
page: pagination.page,
|
|
page_size: pagination.pageSize
|
|
})
|
|
materials.value = data.results || data
|
|
pagination.total = data.count || materials.value.length
|
|
} finally {
|
|
tableLoading.value = false
|
|
}
|
|
}
|
|
|
|
const loadChoices = async () => {
|
|
const data = await fetchMaterialChoices()
|
|
majorOptions.value = data.major_category
|
|
stageOptions.value = data.stage
|
|
importanceLevelOptions.value = data.importance_level
|
|
replaceOptions.value = data.replace_type
|
|
advantageOptions.value = data.advantage
|
|
sceneOptions.value = data.application_scene
|
|
starOptions.value = data.star_level
|
|
statusOptions.value = data.status
|
|
}
|
|
|
|
const loadCategories = async () => {
|
|
const data = await fetchCategories()
|
|
categoryOptions.value = (data.results || data).map((item) => ({
|
|
id: item.id,
|
|
name: item.name,
|
|
value: item.value
|
|
}))
|
|
}
|
|
|
|
const loadSubcategories = async (categoryId = '') => {
|
|
const data = await fetchSubcategories(categoryId ? { category_id: categoryId } : {})
|
|
allSubcategories.value = data.results || data
|
|
const mapped = allSubcategories.value.map((item) => ({
|
|
id: item.id,
|
|
name: item.name,
|
|
value: item.value,
|
|
category: item.category
|
|
}))
|
|
filterSubcategoryOptions.value = mapped
|
|
subcategoryOptions.value = mapped
|
|
}
|
|
|
|
const loadFactories = async () => {
|
|
factories.value = await fetchFactorySimple()
|
|
}
|
|
|
|
const resetForm = () => {
|
|
Object.assign(form, {
|
|
name: '',
|
|
major_category: '',
|
|
material_category: '',
|
|
material_subcategory: '',
|
|
stage: '',
|
|
importance_level: '',
|
|
landing_project: '',
|
|
contact_person: '',
|
|
contact_phone: '',
|
|
handler: '',
|
|
remark: '',
|
|
spec: '',
|
|
standard: '',
|
|
application_scene: [],
|
|
application_desc: '',
|
|
replace_type: '',
|
|
advantage: [],
|
|
advantage_desc: '',
|
|
cost_compare: null,
|
|
cost_desc: '',
|
|
cases: '',
|
|
brochure: null,
|
|
brochure_url: '',
|
|
quality_level: null,
|
|
durability_level: null,
|
|
eco_level: null,
|
|
carbon_level: null,
|
|
score_level: null,
|
|
connection_method: '',
|
|
construction_method: '',
|
|
limit_condition: '',
|
|
factory: null,
|
|
brand: null
|
|
})
|
|
}
|
|
|
|
const loadBrandFilterOptions = async () => {
|
|
const data = await fetchBrands({ page_size: 100 })
|
|
brandFilterOptions.value = data.results || data
|
|
}
|
|
|
|
const searchBrands = async (query) => {
|
|
brandSearchLoading.value = true
|
|
try {
|
|
const data = await fetchBrands({ page_size: 50, search: query || '' })
|
|
brandFilterOptions.value = data.results || data
|
|
} finally {
|
|
brandSearchLoading.value = false
|
|
}
|
|
}
|
|
|
|
const searchBrandsForForm = async (query) => {
|
|
brandFormSearchLoading.value = true
|
|
try {
|
|
const data = await fetchBrands({ page_size: 50, search: query || '' })
|
|
brandFormOptions.value = data.results || data
|
|
} finally {
|
|
brandFormSearchLoading.value = false
|
|
}
|
|
}
|
|
|
|
const ensureBrandInFormOptions = (brandId, brandName) => {
|
|
if (!brandId) return
|
|
if (!brandFormOptions.value.some((item) => item.id === brandId)) {
|
|
brandFormOptions.value = [{ id: brandId, name: brandName || '' }, ...brandFormOptions.value]
|
|
}
|
|
}
|
|
|
|
const onCategoryChange = async (val, resetSub = true) => {
|
|
if (!val) {
|
|
await loadSubcategories()
|
|
return
|
|
}
|
|
const category = categoryOptions.value.find((item) => item.value === val)
|
|
if (category) {
|
|
await loadSubcategories(category.id)
|
|
}
|
|
if (resetSub) {
|
|
form.material_subcategory = ''
|
|
}
|
|
}
|
|
|
|
const openCreate = async () => {
|
|
resetForm()
|
|
isEdit.value = false
|
|
dialogTitle.value = '新增材料'
|
|
await searchBrandsForForm('')
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
const openEdit = async (row) => {
|
|
resetForm()
|
|
isEdit.value = true
|
|
currentId.value = row.id
|
|
const item = await fetchMaterialDetail(row.id)
|
|
Object.assign(form, item)
|
|
form.application_scene = item.application_scene || []
|
|
form.advantage = item.advantage || []
|
|
form.brochure_url = item.brochure_url || ''
|
|
form.brand = item.brand || null
|
|
if (form.material_category) {
|
|
await onCategoryChange(form.material_category, false)
|
|
}
|
|
await searchBrandsForForm('')
|
|
ensureBrandInFormOptions(item.brand, item.brand_name)
|
|
dialogTitle.value = '编辑材料'
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
const handleUpload = async (options) => {
|
|
uploading.value = true
|
|
try {
|
|
const result = await uploadImage(options.file)
|
|
form.brochure = result.path
|
|
form.brochure_url = result.url
|
|
ElMessage.success('图片上传成功')
|
|
} catch {
|
|
ElMessage.error('图片上传失败')
|
|
} finally {
|
|
uploading.value = false
|
|
}
|
|
}
|
|
|
|
const onSave = async () => {
|
|
if (!form.brand) {
|
|
ElMessage.warning('请选择品牌')
|
|
return
|
|
}
|
|
try {
|
|
const payload = { ...form }
|
|
delete payload.brochure_url
|
|
delete payload.brand_name
|
|
if (!isAdmin.value) {
|
|
delete payload.factory
|
|
}
|
|
if (isEdit.value) {
|
|
await updateMaterial(currentId.value, payload)
|
|
} else {
|
|
await createMaterial(payload)
|
|
pagination.page = 1
|
|
}
|
|
ElMessage.success('保存成功')
|
|
dialogVisible.value = false
|
|
await loadMaterials()
|
|
} catch (error) {
|
|
ElMessage.error(error.response?.data?.detail || '保存失败')
|
|
}
|
|
}
|
|
|
|
const handleImportExcel = async (options) => {
|
|
importing.value = true
|
|
try {
|
|
const result = await importMaterialsExcel(options.file)
|
|
pagination.page = 1
|
|
await loadMaterials()
|
|
importDialogVisible.value = false
|
|
ElMessage.success(`导入完成：新增 ${result.created} 条，更新 ${result.updated} 条，跳过 ${result.skipped} 条，新建供应商 ${result.created_factory || 0} 条`)
|
|
} catch (error) {
|
|
ElMessage.error(error.response?.data?.detail || '导入失败')
|
|
} finally {
|
|
importing.value = false
|
|
}
|
|
}
|
|
|
|
const getDownloadFilename = (headers, fallback) => {
|
|
const disposition = headers?.['content-disposition'] || ''
|
|
const utf8Match = disposition.match(/filename\*=UTF-8''([^;]+)/i)
|
|
if (utf8Match?.[1]) {
|
|
return decodeURIComponent(utf8Match[1])
|
|
}
|
|
const asciiMatch = disposition.match(/filename="?([^"]+)"?/i)
|
|
if (asciiMatch?.[1]) {
|
|
return asciiMatch[1]
|
|
}
|
|
return fallback
|
|
}
|
|
|
|
const handleExportExcel = async () => {
|
|
exporting.value = true
|
|
try {
|
|
const response = await exportMaterialsExcel({ ...filters })
|
|
const blob = response.data instanceof Blob ? response.data : new Blob([response.data])
|
|
const filename = getDownloadFilename(response.headers, 'materials_export.xlsx')
|
|
const url = window.URL.createObjectURL(blob)
|
|
const link = document.createElement('a')
|
|
link.href = url
|
|
link.download = filename
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
document.body.removeChild(link)
|
|
window.URL.revokeObjectURL(url)
|
|
ElMessage.success('导出成功')
|
|
} catch (error) {
|
|
let detail = error.response?.data?.detail
|
|
if (error.response?.data instanceof Blob) {
|
|
const text = await error.response.data.text()
|
|
try {
|
|
detail = JSON.parse(text).detail || text
|
|
} catch {
|
|
detail = text
|
|
}
|
|
}
|
|
ElMessage.error(detail || '导出失败')
|
|
} finally {
|
|
exporting.value = false
|
|
}
|
|
}
|
|
|
|
const onDelete = (row) => {
|
|
ElMessageBox.confirm(`确认删除材料 ${row.name} 吗？`, '提示', { type: 'warning' })
|
|
.then(async () => {
|
|
await deleteMaterial(row.id)
|
|
ElMessage.success('删除成功')
|
|
loadMaterials()
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
|
|
const onSubmitAudit = async (row) => {
|
|
await submitMaterial(row.id)
|
|
ElMessage.success('已提交审核')
|
|
loadMaterials()
|
|
}
|
|
|
|
const onApprove = async (row) => {
|
|
await approveMaterial(row.id)
|
|
ElMessage.success('审核通过')
|
|
loadMaterials()
|
|
}
|
|
|
|
const onReject = async (row) => {
|
|
await rejectMaterial(row.id)
|
|
ElMessage.success('审核拒绝')
|
|
loadMaterials()
|
|
}
|
|
|
|
const canEdit = (row) => isAdmin.value || row.status === 'draft'
|
|
const canDelete = (row) => isAdmin.value || row.status === 'draft'
|
|
const canSubmit = (row) => !isAdmin.value && row.status === 'draft'
|
|
const canApprove = (row) => isAdmin.value && row.status === 'pending'
|
|
|
|
const goDetail = async (row) => {
|
|
try {
|
|
detailData.value = await fetchMaterialDetail(row.id)
|
|
detailVisible.value = true
|
|
} catch (error) {
|
|
ElMessage.error(error.response?.data?.detail || '加载详情失败')
|
|
}
|
|
}
|
|
|
|
const displayText = (value) => value || '-'
|
|
const displayList = (value) => (value?.length ? value.join('、') : '-')
|
|
const formatPercent = (value) => (value === null || value === undefined || value === '' ? '-' : `${value}%`)
|
|
const formatStarLevel = (value) => (value ? `${value}星` : '-')
|
|
|
|
const onPageChange = (page) => {
|
|
pagination.page = page
|
|
loadMaterials()
|
|
}
|
|
|
|
const onPageSizeChange = (size) => {
|
|
pagination.pageSize = size
|
|
pagination.page = 1
|
|
loadMaterials()
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadChoices()
|
|
loadCategories()
|
|
loadSubcategories()
|
|
loadFactories()
|
|
loadBrandFilterOptions()
|
|
loadMaterials()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.toolbar-spacer {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.import-dialog__text {
|
|
color: #606266;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.import-dialog__actions {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
}
|
|
|
|
.dialog-scroll :deep(.el-dialog__body) {
|
|
max-height: 60vh;
|
|
overflow: auto;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.material-drawer :deep(.el-drawer__body) {
|
|
padding: 20px 24px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.material-drawer :deep(.el-drawer__footer) {
|
|
padding: 12px 24px;
|
|
}
|
|
|
|
.brochure {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.brochure-title {
|
|
margin-bottom: 12px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.brochure img {
|
|
max-width: 100%;
|
|
border-radius: 8px;
|
|
border: 1px solid #eee;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.preview img {
|
|
width: 120px;
|
|
margin-top: 8px;
|
|
border-radius: 6px;
|
|
border: 1px solid #eee;
|
|
}
|
|
</style>
|