|
@@ -50,7 +50,7 @@
|
|
|
:src="item.image"
|
|
|
fit="cover"
|
|
|
class="item-image"
|
|
|
- @click="viewDetail(item)">
|
|
|
+ @click="handlePictureCardPreview({url: item.image})">
|
|
|
<div slot="error" class="image-slot">
|
|
|
<i class="el-icon-picture-outline"></i>
|
|
|
</div>
|
|
@@ -92,15 +92,17 @@
|
|
|
<span class="label"><i class="el-icon-money"></i> 价格</span>
|
|
|
<span class="value price">¥{{ item.price }}</span>
|
|
|
</div>
|
|
|
- <div class="info-item" v-if="item.config_options && item.config_options.length > 0">
|
|
|
- <span class="label"><i class="el-icon-setting"></i> 配置项</span>
|
|
|
- <div class="value config-values">
|
|
|
- <div v-for="option in item.config_options" :key="option.id" class="config-item">
|
|
|
- <el-tag size="mini">{{ option.name }}:</el-tag>
|
|
|
- <el-tag size="mini" type="info" style="margin-left: 5px">{{ option.value }}</el-tag>
|
|
|
- <el-tag v-if="option.material_code" size="mini" type="warning" style="margin-left:2px;">({{ option.material_code }})</el-tag>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="config-section" v-if="item.config_options && item.config_options.length > 0">
|
|
|
+ <div class="config-header">
|
|
|
+ <span class="label"><i class="el-icon-setting"></i> 配置项</span>
|
|
|
+ </div>
|
|
|
+ <div class="config-values">
|
|
|
+ <div v-for="option in item.config_options" :key="option.id" class="config-item">
|
|
|
+ <el-tag size="mini">{{ option.name }}:</el-tag>
|
|
|
+ <el-tag size="mini" type="info" style="margin-left: 5px">{{ option.value }}</el-tag>
|
|
|
+ <el-tag v-if="option.material_code" size="mini" type="warning" style="margin-left:2px;">({{ option.material_code }})</el-tag>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -362,7 +364,7 @@
|
|
|
:src="item.image"
|
|
|
fit="cover"
|
|
|
class="item-image"
|
|
|
- @click="viewDetail(item)">
|
|
|
+ @click="handlePictureCardPreview({url: item.image})">
|
|
|
<div slot="error" class="image-slot">
|
|
|
<i class="el-icon-picture-outline"></i>
|
|
|
</div>
|
|
@@ -404,15 +406,17 @@
|
|
|
<span class="label"><i class="el-icon-money"></i> 价格</span>
|
|
|
<span class="value price">¥{{ item.price }}</span>
|
|
|
</div>
|
|
|
- <div class="info-item" v-if="item.config_options && item.config_options.length > 0">
|
|
|
- <span class="label"><i class="el-icon-setting"></i> 配置项</span>
|
|
|
- <div class="value config-values">
|
|
|
- <div v-for="option in item.config_options" :key="option.id" class="config-item">
|
|
|
- <el-tag size="mini">{{ option.name }}:</el-tag>
|
|
|
- <el-tag size="mini" type="info" style="margin-left: 5px">{{ option.value }}</el-tag>
|
|
|
- <el-tag v-if="option.material_code" size="mini" type="warning" style="margin-left:2px;">({{ option.material_code }})</el-tag>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="config-section" v-if="item.config_options && item.config_options.length > 0">
|
|
|
+ <div class="config-header">
|
|
|
+ <span class="label"><i class="el-icon-setting"></i> 配置项</span>
|
|
|
+ </div>
|
|
|
+ <div class="config-values">
|
|
|
+ <div v-for="option in item.config_options" :key="option.id" class="config-item">
|
|
|
+ <el-tag size="mini">{{ option.name }}:</el-tag>
|
|
|
+ <el-tag size="mini" type="info" style="margin-left: 5px">{{ option.value }}</el-tag>
|
|
|
+ <el-tag v-if="option.material_code" size="mini" type="warning" style="margin-left:2px;">({{ option.material_code }})</el-tag>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -682,11 +686,20 @@
|
|
|
<el-table-column label="配置项" min-width="200" show-overflow-tooltip>
|
|
|
<template slot-scope="scope">
|
|
|
<div v-if="scope.row.config_options && scope.row.config_options.length > 0">
|
|
|
- <div v-for="option in scope.row.config_options" :key="option.id" class="config-item-row">
|
|
|
+ <div v-for="(option, index) in scope.row.config_options" :key="option.id" class="config-item-row" v-show="index < 3 || scope.row.configExpanded">
|
|
|
<el-tag size="mini">{{ option.name }}:</el-tag>
|
|
|
<el-tag size="mini" type="info" style="margin-left: 5px">{{ option.value }}</el-tag>
|
|
|
<el-tag v-if="option.material_code" size="mini" type="warning" style="margin-left:2px;">({{ option.material_code }})</el-tag>
|
|
|
</div>
|
|
|
+ <div v-if="scope.row.config_options.length > 3" class="config-toggle">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="mini"
|
|
|
+ @click="toggleConfigExpanded(scope.row)"
|
|
|
+ style="padding: 0; margin-top: 5px;">
|
|
|
+ {{ scope.row.configExpanded ? '收起' : `查看更多(${scope.row.config_options.length - 3})` }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<span v-else>无配置项</span>
|
|
|
</template>
|
|
@@ -843,22 +856,15 @@ export default {
|
|
|
tableSearchQuery: '',
|
|
|
configSelectVisible: false,
|
|
|
currentConfigOptions: [],
|
|
|
- currentEditItem: null
|
|
|
+ currentEditItem: null,
|
|
|
+ expandedConfigs: new Set()
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
if (!this.boolFounder) {
|
|
|
this.permissions = JSON.parse(Storage.getItem('permissions'))
|
|
|
}
|
|
|
- },
|
|
|
- activated() {
|
|
|
- },
|
|
|
- watch: {
|
|
|
- orderNo(val) {
|
|
|
- if (val) {
|
|
|
- this.getData()
|
|
|
- }
|
|
|
- }
|
|
|
+ this.getData()
|
|
|
},
|
|
|
computed: {
|
|
|
filteredBaseDevice() {
|
|
@@ -909,6 +915,8 @@ export default {
|
|
|
if (item.config_data) {
|
|
|
item.config_options = JSON.parse(item.config_data)
|
|
|
}
|
|
|
+ // 初始化配置项展开状态
|
|
|
+ item.configExpanded = false
|
|
|
})
|
|
|
this.listData = res.data
|
|
|
this.baseDevice = this.listData.filter(p => p.type_base)
|
|
@@ -1195,7 +1203,7 @@ export default {
|
|
|
return this.boolFounder || this.permissions.some(p => p === 'pjTech')
|
|
|
},
|
|
|
canEditProduce(item) {
|
|
|
- return this.boolFounder || this.permissions.some(p => p === 'pjOrderShip')
|
|
|
+ return this.boolFounder || this.permissions.some(p => p === 'draftEdit')
|
|
|
},
|
|
|
hasPermission(permissions) {
|
|
|
return this.boolFounder || this.permissions.some(p => permissions.includes(p))
|
|
@@ -1212,6 +1220,9 @@ export default {
|
|
|
if (qty <= 0) return 'success'
|
|
|
if (qty <= 5) return 'warning'
|
|
|
return 'danger'
|
|
|
+ },
|
|
|
+ toggleConfigExpanded(item) {
|
|
|
+ this.$set(item, 'configExpanded', !item.configExpanded)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -1404,6 +1415,28 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .config-section {
|
|
|
+ margin-top: 10px;
|
|
|
+ background: #f8f9fa;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 10px 10px 10px 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ box-shadow: 0 1px 4px rgba(0,0,0,0.03);
|
|
|
+ .config-header {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .config-values {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -1554,16 +1587,16 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.config-values {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 5px;
|
|
|
+.config-toggle {
|
|
|
+ margin-top: 8px;
|
|
|
|
|
|
- .config-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap;
|
|
|
- gap: 5px;
|
|
|
+ .el-button {
|
|
|
+ color: #409EFF;
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #66b1ff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|