opt_web/src/views/sku-manage/company-sku/component/ShowSkuDrawer.vue

<script lang="ts" setup>
/**
 * @Name: ShowSkuDrawer.vue
 * @Description: SKU详情抽屉
 * @Author: xinyan
 */
import * as api from '../api';
import { useResponse } from '/@/utils/useResponse';
import { ElMessage } from 'element-plus';
import XEUtils from 'xe-utils';

const showSkuDrawer = <Ref>useTemplateRef('showSkuDrawer');
const showOpen = defineModel({ default: false });
const props = defineProps({
	skuData: Object,
	rowData: Object,
});
const { skuData, rowData } = props;

const attrList = ref({});
const powerType = ref([]);

async function initPower() {
	const resp = await useResponse(api.getSkuDetailByPower, { key: 'power' });
	if (!resp || resp.data.total === 0) {
		ElMessage({
			type: 'warning',
			message: '警告：未找到产品属性：power(电源规格)！请在产品属性中定义标识为power的电源规格属性！',
		});
	}
	const items = resp.data[0].attr_dict;
	items.unshift({
		label: '无',
		value: '',
	});
	powerType.value = items;
}

async function initData() {
	const ret = await useResponse(api.getSkuDetailByKind, rowData.kind.id);

	const info = XEUtils.groupBy(ret.data.RelatedAttrs, 'section');
	const sortedKey = XEUtils.sortBy(Object.keys(info), (key) => key);

	const relatedAttrs = []; // 用于存放解析后的 info

	for (const section of sortedKey) {
		const attrItems = XEUtils.sortBy(info[section], 'order');

		let selectedIds = [];
		if (skuData) {
			selectedIds = skuData[`section${section}`] || []; // 获取对应 section 的选中 ID
		}
		const tmpAttrs = [];
		for (const item of attrItems) {
			const v = item.attr_dict.find((dict) => selectedIds.includes(dict.id));
			if (v) {
				tmpAttrs.push({
					label: item.attr.name,
					value: v.label,
					description: item.description,
				});
			}
		}

		relatedAttrs.push({
			section: '第' + section + '部分',
			attrItems: tmpAttrs,
		});
	}

	if (skuData.optional) {
		const optionalAttrs = [];
		const value = skuData.optional.powerType;
		const matchedLabel = powerType.value.find((item) => item.value === value)?.label;
		optionalAttrs.push({
			label: '电源',
			value: matchedLabel,
		});
		const key = skuData.optional.version;
		const type = skuData.optional.versionType;
		optionalAttrs.push({
			label: '版本', // 属性名
			value: type == null ? '无' : `${type}${key}`,
		});

		optionalAttrs.push({
			label: '版本特征', // 属性名
			value: rowData.version_feature === '' ? '无' : rowData.version_feature, // 属性值
		});
		if (optionalAttrs.length > 0) {
			relatedAttrs.push({
				section: '可选部分',
				attrItems: optionalAttrs,
			});
			console.log('=>(ShowSkuDrawer.vue:100) optionalAttrs', optionalAttrs);
		}
	}
	attrList.value = relatedAttrs;
}

onMounted(() => {
	initPower();
	initData();
});
</script>

<template>
	<div class="drawer-container">

	<el-drawer ref="showSkuDrawer" v-model="showOpen" style="width: 40%">
		<template #title>
			<div>
				<span style="font-size: 16px; font-weight: bold">当前SKU:</span>
				<!--<el-tag style="margin-left: 5px" type="primary">-->
				<!--	{{ rowData.sku }}-->
				<!--</el-tag>-->
				<el-check-tag checked style="margin-left: 5px">{{ rowData.sku }}</el-check-tag>
			</div>
		</template>
		<div class="m-4">
			<el-descriptions v-for="info of attrList" :title="info.section" border style="margin-bottom: 40px">
				<el-descriptions-item v-for="attr of info.attrItems" label-class-name="my-label">
					<template #label>
						<div style="white-space: nowrap">{{ attr.label }}</div>
						<el-tooltip v-if="Boolean(attr.description)" :content="attr.description" effect="dark" placement="top-start">
							<i class="el-icon-question"></i>
						</el-tooltip>
					</template>
					<div :style="{ whiteSpace: attr.label !== '版本特征' ? 'nowrap' : 'normal' }" class="my-value">{{ attr.value }}</div>
				</el-descriptions-item>
			</el-descriptions>
		</div>
	</el-drawer>
	</div>
</template>

<style scoped>
.drawer-container :deep(.el-drawer__header) {
	border-bottom: none;
	/* font-weight: 500; */
}

:deep(.my-label) {
	background: #f5f5f5 !important;
}

.my-value {
	font-weight: 500;
	font-size: 13px;
}
</style>