opt_web/src/views/sku-manage/product-attribute/component/ShowDetailDrawer.vue

<script setup lang="ts">
/**
 * @Name: ShowDetailDrawer.vue
 * @Description: 产品属性-查看详情抽屉
 * @Author: xinyan
 */
import * as api from '../api';
import { useResponse } from '/@/utils/useResponse';
import { Warning } from '@element-plus/icons-vue';

const showDetailDrawer = <Ref>useTemplateRef('showEnumDrawer');
const viewOpen = defineModel({ default: false });

const props = defineProps({
	rowData: <any>Object,
});
const { rowData } = props;

const deptData = ref([]);

async function fetchAllDept() {
	const  resp = await useResponse(api.getAllDept)
	deptData.value = resp.data;
}

function getDeptName(id) {
	const department = deptData.value.find(dept => dept.id === Number(id)); // 确保 id 是数字
	return department ? department.name : id;
}

onMounted(() => {
	fetchAllDept();
});

</script>

<template>
	<div class="drawer-container">
		<el-drawer ref="showDetailDrawer" v-model="viewOpen" style="width: 40%" >
			<template #title>
				<div>
					<span style="font-size: 16px; font-weight: bold">查看:</span>
					<el-check-tag checked style="pointer-events: none;margin-left: 5px">{{ rowData.name }}</el-check-tag>
				</div>
			</template>
			<div class="p-5">
				<el-descriptions :column="1" border>
					<el-descriptions-item label="ID">
						{{ rowData.id }}
					</el-descriptions-item>
					<el-descriptions-item label="属性名称">
						{{ rowData.name }}
					</el-descriptions-item>
					<el-descriptions-item label="数据值">
						{{ rowData.key }}
					</el-descriptions-item>
					<el-descriptions-item label="创建人">
						{{ rowData.creator_name }}
					</el-descriptions-item>
					<el-descriptions-item label="所属部门">
						<template #label>
							<div style="display: flex;align-items: center">
								所属部门
								<el-tooltip effect="dark" content="默认不填则为当前创建用户的部门ID" placement="top">
									<el-icon>
										<Warning />
									</el-icon>
								</el-tooltip>
							</div>
						</template>
						{{ getDeptName(rowData.dept_belong_id) }}
					</el-descriptions-item>
					<el-descriptions-item label="更新时间">
						{{ rowData.update_datetime }}
					</el-descriptions-item>
					<el-descriptions-item label="创建时间">
						{{ rowData.create_datetime }}
					</el-descriptions-item>
				</el-descriptions>
			</div>
		</el-drawer>
	</div>
</template>

<style scoped>

</style>