401 lines
17 KiB
Vue
401 lines
17 KiB
Vue
<template>
|
|
<el-form
|
|
v-if="mode === 'edit'"
|
|
ref="formRef"
|
|
:model="modelValue"
|
|
label-width="120px"
|
|
>
|
|
<el-form-item label="材料名称" required>
|
|
<el-input :model-value="modelValue.name" @update:model-value="set('name', $event)" />
|
|
</el-form-item>
|
|
<el-form-item label="材料大类" required>
|
|
<el-select :model-value="modelValue.major_category" @update:model-value="set('major_category', $event)">
|
|
<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
|
|
:model-value="modelValue.material_category"
|
|
filterable
|
|
@update:model-value="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
|
|
:model-value="modelValue.material_subcategory"
|
|
filterable
|
|
clearable
|
|
@update:model-value="set('material_subcategory', $event)"
|
|
>
|
|
<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 :model-value="modelValue.stage" clearable @update:model-value="set('stage', $event)">
|
|
<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 :model-value="modelValue.importance_level" clearable @update:model-value="set('importance_level', $event)">
|
|
<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 :model-value="modelValue.landing_project" @update:model-value="set('landing_project', $event)" />
|
|
</el-form-item>
|
|
<el-form-item label="对接人">
|
|
<el-input :model-value="modelValue.contact_person" @update:model-value="set('contact_person', $event)" />
|
|
</el-form-item>
|
|
<el-form-item label="对接人联系方式">
|
|
<el-input :model-value="modelValue.contact_phone" @update:model-value="set('contact_phone', $event)" />
|
|
</el-form-item>
|
|
<el-form-item label="经办人">
|
|
<el-input :model-value="modelValue.handler" @update:model-value="set('handler', $event)" />
|
|
</el-form-item>
|
|
<el-form-item label="备注">
|
|
<el-input :model-value="modelValue.remark" @update:model-value="set('remark', $event)" />
|
|
</el-form-item>
|
|
<el-form-item label="规格型号">
|
|
<el-input :model-value="modelValue.spec" @update:model-value="set('spec', $event)" />
|
|
</el-form-item>
|
|
<el-form-item label="符合标准">
|
|
<el-input :model-value="modelValue.standard" @update:model-value="set('standard', $event)" />
|
|
</el-form-item>
|
|
<el-form-item label="应用场景">
|
|
<el-select :model-value="modelValue.application_scene" multiple @update:model-value="set('application_scene', $event)">
|
|
<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 :model-value="modelValue.application_desc" type="textarea" @update:model-value="set('application_desc', $event)" />
|
|
</el-form-item>
|
|
<el-form-item label="替代材料类型">
|
|
<el-select :model-value="modelValue.replace_type" clearable @update:model-value="set('replace_type', $event)">
|
|
<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 :model-value="modelValue.advantage" multiple @update:model-value="set('advantage', $event)">
|
|
<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 :model-value="modelValue.advantage_desc" type="textarea" @update:model-value="set('advantage_desc', $event)" />
|
|
</el-form-item>
|
|
<el-form-item label="成本对比(%)">
|
|
<el-input-number
|
|
:model-value="modelValue.cost_compare"
|
|
:min="-100"
|
|
:max="100"
|
|
@update:model-value="set('cost_compare', $event)"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="成本说明">
|
|
<el-input :model-value="modelValue.cost_desc" type="textarea" @update:model-value="set('cost_desc', $event)" />
|
|
</el-form-item>
|
|
<el-form-item label="案例">
|
|
<el-input :model-value="modelValue.cases" type="textarea" @update:model-value="set('cases', $event)" />
|
|
</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="modelValue.brochure_url" class="preview">
|
|
<img :src="modelValue.brochure_url" alt="预览" />
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="质量等级">
|
|
<el-select :model-value="modelValue.quality_level" clearable @update:model-value="set('quality_level', $event)">
|
|
<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 :model-value="modelValue.durability_level" clearable @update:model-value="set('durability_level', $event)">
|
|
<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 :model-value="modelValue.eco_level" clearable @update:model-value="set('eco_level', $event)">
|
|
<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 :model-value="modelValue.carbon_level" clearable @update:model-value="set('carbon_level', $event)">
|
|
<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 :model-value="modelValue.score_level" clearable @update:model-value="set('score_level', $event)">
|
|
<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 :model-value="modelValue.connection_method" @update:model-value="set('connection_method', $event)" />
|
|
</el-form-item>
|
|
<el-form-item label="施工工艺">
|
|
<el-input :model-value="modelValue.construction_method" @update:model-value="set('construction_method', $event)" />
|
|
</el-form-item>
|
|
<el-form-item label="限制条件">
|
|
<el-input :model-value="modelValue.limit_condition" type="textarea" @update:model-value="set('limit_condition', $event)" />
|
|
</el-form-item>
|
|
<el-form-item v-if="isAdmin" label="供应商">
|
|
<el-select :model-value="modelValue.factory" @update:model-value="set('factory', $event)">
|
|
<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
|
|
:model-value="modelValue.brand"
|
|
filterable
|
|
remote
|
|
:remote-method="searchBrandsForForm"
|
|
:loading="brandFormSearchLoading"
|
|
placeholder="请选择品牌"
|
|
@update:model-value="set('brand', $event)"
|
|
>
|
|
<el-option v-for="item in brandFormOptions" :key="item.id" :label="item.name" :value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<template v-else>
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item label="材料名称">{{ displayText(modelValue.name) }}</el-descriptions-item>
|
|
<el-descriptions-item label="材料大类">{{ displayText(modelValue.major_category_display) }}</el-descriptions-item>
|
|
<el-descriptions-item label="细分种类">{{ displayText(modelValue.material_category) }}</el-descriptions-item>
|
|
<el-descriptions-item label="材料子类">{{ displayText(modelValue.material_subcategory) }}</el-descriptions-item>
|
|
<el-descriptions-item label="阶段">{{ displayText(modelValue.stage_display) }}</el-descriptions-item>
|
|
<el-descriptions-item label="重要等级">{{ displayText(modelValue.importance_level_display) }}</el-descriptions-item>
|
|
<el-descriptions-item label="落地项目">{{ displayText(modelValue.landing_project) }}</el-descriptions-item>
|
|
<el-descriptions-item label="对接人">{{ displayText(modelValue.contact_person) }}</el-descriptions-item>
|
|
<el-descriptions-item label="对接人联系方式">{{ displayText(modelValue.contact_phone) }}</el-descriptions-item>
|
|
<el-descriptions-item label="经办人">{{ displayText(modelValue.handler) }}</el-descriptions-item>
|
|
<el-descriptions-item label="备注">{{ displayText(modelValue.remark) }}</el-descriptions-item>
|
|
<el-descriptions-item label="规格型号">{{ displayText(modelValue.spec) }}</el-descriptions-item>
|
|
<el-descriptions-item label="符合标准">{{ displayText(modelValue.standard) }}</el-descriptions-item>
|
|
<el-descriptions-item label="应用场景">{{ displayList(modelValue.application_scene_display) }}</el-descriptions-item>
|
|
<el-descriptions-item label="应用说明">{{ displayText(modelValue.application_desc) }}</el-descriptions-item>
|
|
<el-descriptions-item label="替代材料类型">{{ displayText(modelValue.replace_type_display) }}</el-descriptions-item>
|
|
<el-descriptions-item label="竞争优势">{{ displayList(modelValue.advantage_display) }}</el-descriptions-item>
|
|
<el-descriptions-item label="优势说明">{{ displayText(modelValue.advantage_desc) }}</el-descriptions-item>
|
|
<el-descriptions-item label="成本对比">{{ formatPercent(modelValue.cost_compare) }}</el-descriptions-item>
|
|
<el-descriptions-item label="成本说明">{{ displayText(modelValue.cost_desc) }}</el-descriptions-item>
|
|
<el-descriptions-item label="案例">{{ displayText(modelValue.cases) }}</el-descriptions-item>
|
|
<el-descriptions-item label="供应商">{{ displayText(modelValue.factory_name) }}</el-descriptions-item>
|
|
<el-descriptions-item label="品牌">{{ displayText(modelValue.brand_name) }}</el-descriptions-item>
|
|
<el-descriptions-item label="质量等级">{{ formatStarLevel(modelValue.quality_level) }}</el-descriptions-item>
|
|
<el-descriptions-item label="耐久等级">{{ formatStarLevel(modelValue.durability_level) }}</el-descriptions-item>
|
|
<el-descriptions-item label="环保等级">{{ formatStarLevel(modelValue.eco_level) }}</el-descriptions-item>
|
|
<el-descriptions-item label="低碳等级">{{ formatStarLevel(modelValue.carbon_level) }}</el-descriptions-item>
|
|
<el-descriptions-item label="总评分">{{ formatStarLevel(modelValue.score_level) }}</el-descriptions-item>
|
|
<el-descriptions-item label="连接方式">{{ displayText(modelValue.connection_method) }}</el-descriptions-item>
|
|
<el-descriptions-item label="施工工艺">{{ displayText(modelValue.construction_method) }}</el-descriptions-item>
|
|
<el-descriptions-item label="限制条件">{{ displayText(modelValue.limit_condition) }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
<div v-if="modelValue.brochure_url" class="brochure">
|
|
<div class="brochure-title">宣传页</div>
|
|
<img :src="modelValue.brochure_url" alt="宣传页" />
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, watch } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { useAuth } from '@/store/auth'
|
|
import { fetchMaterialChoices, uploadImage } from '@/api/material'
|
|
import { fetchCategories, fetchSubcategories } from '@/api/category'
|
|
import { fetchFactorySimple } from '@/api/factory'
|
|
import { fetchBrands } from '@/api/brand'
|
|
|
|
const props = defineProps({
|
|
modelValue: { type: Object, required: true },
|
|
mode: { type: String, default: 'edit' }
|
|
})
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const { isAdmin } = useAuth()
|
|
const formRef = ref(null)
|
|
const uploading = ref(false)
|
|
|
|
const majorOptions = ref([])
|
|
const stageOptions = ref([])
|
|
const importanceLevelOptions = ref([])
|
|
const replaceOptions = ref([])
|
|
const advantageOptions = ref([])
|
|
const sceneOptions = ref([])
|
|
const starOptions = ref([])
|
|
const categoryOptions = ref([])
|
|
const subcategoryOptions = ref([])
|
|
const factories = ref([])
|
|
const brandFormOptions = ref([])
|
|
const brandFormSearchLoading = ref(false)
|
|
|
|
const set = (key, value) => {
|
|
emit('update:modelValue', { ...props.modelValue, [key]: value })
|
|
}
|
|
|
|
const onCategoryChange = async (val) => {
|
|
emit('update:modelValue', {
|
|
...props.modelValue,
|
|
material_category: val,
|
|
material_subcategory: ''
|
|
})
|
|
if (!val) {
|
|
const data = await fetchSubcategories({})
|
|
subcategoryOptions.value = (data.results || data).map((item) => ({
|
|
id: item.id,
|
|
name: item.name,
|
|
value: item.value,
|
|
category: item.category
|
|
}))
|
|
return
|
|
}
|
|
const category = categoryOptions.value.find((item) => item.value === val)
|
|
if (category) {
|
|
const data = await fetchSubcategories({ category_id: category.id })
|
|
subcategoryOptions.value = (data.results || data).map((item) => ({
|
|
id: item.id,
|
|
name: item.name,
|
|
value: item.value,
|
|
category: item.category
|
|
}))
|
|
}
|
|
}
|
|
|
|
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 handleUpload = async (options) => {
|
|
uploading.value = true
|
|
try {
|
|
const result = await uploadImage(options.file)
|
|
emit('update:modelValue', {
|
|
...props.modelValue,
|
|
brochure: result.path,
|
|
brochure_url: result.url
|
|
})
|
|
ElMessage.success('图片上传成功')
|
|
} catch {
|
|
ElMessage.error('图片上传失败')
|
|
} finally {
|
|
uploading.value = false
|
|
}
|
|
}
|
|
|
|
const displayText = (value) => (value === null || value === undefined || value === '' ? '-' : value)
|
|
const displayList = (value) => (value?.length ? value.join('、') : '-')
|
|
const formatPercent = (value) => (value === null || value === undefined || value === '' ? '-' : `${value}%`)
|
|
const formatStarLevel = (value) => (value ? `${value}星` : '-')
|
|
|
|
onMounted(async () => {
|
|
if (props.mode !== 'edit') return
|
|
const [choices, categories, subs] = await Promise.all([
|
|
fetchMaterialChoices(),
|
|
fetchCategories(),
|
|
fetchSubcategories({})
|
|
])
|
|
majorOptions.value = choices.major_category
|
|
stageOptions.value = choices.stage
|
|
importanceLevelOptions.value = choices.importance_level
|
|
replaceOptions.value = choices.replace_type
|
|
advantageOptions.value = choices.advantage
|
|
sceneOptions.value = choices.application_scene
|
|
starOptions.value = choices.star_level
|
|
categoryOptions.value = (categories.results || categories).map((item) => ({
|
|
id: item.id,
|
|
name: item.name,
|
|
value: item.value
|
|
}))
|
|
subcategoryOptions.value = (subs.results || subs).map((item) => ({
|
|
id: item.id,
|
|
name: item.name,
|
|
value: item.value,
|
|
category: item.category
|
|
}))
|
|
factories.value = await fetchFactorySimple()
|
|
await searchBrandsForForm('')
|
|
ensureBrandInFormOptions(props.modelValue.brand, props.modelValue.brand_name)
|
|
if (props.modelValue.material_category) {
|
|
const category = categoryOptions.value.find((item) => item.value === props.modelValue.material_category)
|
|
if (category) {
|
|
const data = await fetchSubcategories({ category_id: category.id })
|
|
subcategoryOptions.value = (data.results || data).map((item) => ({
|
|
id: item.id,
|
|
name: item.name,
|
|
value: item.value,
|
|
category: item.category
|
|
}))
|
|
}
|
|
}
|
|
})
|
|
|
|
watch(
|
|
() => props.modelValue?.brand,
|
|
(val) => {
|
|
if (val) {
|
|
ensureBrandInFormOptions(val, props.modelValue?.brand_name)
|
|
}
|
|
}
|
|
)
|
|
|
|
const validate = () => formRef.value?.validate()
|
|
const clearValidate = () => formRef.value?.clearValidate()
|
|
|
|
defineExpose({ validate, clearValidate })
|
|
</script>
|
|
|
|
<style scoped>
|
|
.upload {
|
|
display: inline-block;
|
|
}
|
|
|
|
.preview {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.preview img {
|
|
max-width: 300px;
|
|
border-radius: 6px;
|
|
border: 1px solid #eee;
|
|
}
|
|
|
|
.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>
|