Merge branch 'xinyan' into dev

src/views/sku-manage/Columns.ts

@@ -17,7 +17,7 @@ export const AttributeColumns = [
     slots: { default: 'create_datetime' }
   },
   {
-    field: 'operate', title: '操 作', width: 145, align: 'center', fixed: 'right',
+    field: 'operate', title: '操 作', width: 175, align: 'center', fixed: 'right',
     slots: { default: 'operate' }
   }
 ];

src/views/sku-manage/product-attribute/api.ts

@@ -35,3 +35,11 @@ export function createAttr(data:any) {
   })
 }
 
+export function getAllDept(query: any) {
+  return request({
+    url: '/api/system/dept/all_dept/',
+    method: 'GET',
+    params: query
+  });
+}
+

src/views/sku-manage/product-attribute/component/DataTable.vue

@@ -18,6 +18,8 @@ import NoticeDialog from '/src/views/product-manage/product-list/component/Notic
 import * as api from '../api';
 import CreateDialog from '/src/views/sku-manage/product-attribute/component/CreateDialog.vue';
 import ManageEnumDrawer from '/src/views/sku-manage/product-attribute/component/manage-enum/index.vue';
+import ShowDetailDrawer from '/@/views/sku-manage/product-attribute/component/ShowDetailDrawer.vue';
+import ShowEnumDrawer from '/@/views/sku-manage/product-attribute/component/manage-enum/component/ShowEnumDrawer.vue';
 
 
 interface Parameter {
@@ -79,6 +81,7 @@ const gridOptions: any = reactive({
 const editOpen = ref(false);
 const createOpen = ref(false);
 const manageOpen = ref(false);
+const viewOpen = ref(false);
 const rowData = ref({});
 
 const dialogVisible = ref(false);
@@ -132,6 +135,11 @@ function handleCreate() {
   createOpen.value = true;
 }
 
+function handleView(row: any) {
+  viewOpen.value = true;
+  rowData.value = row;
+}
+
 async function singleDelete(row: any) {
   const res = await useResponse(api.deleteRow, row);
   if (res.code === 2000) {
@@ -179,13 +187,14 @@ defineExpose({ fetchList });
     </template>
     <!-- 自定义列插槽 -->
     <template v-for="col in AttributeColumns" #[`${col.field}`]="{ row }">
-      <DataTableSlot :key="row.id" :field="col.field" :row="row" @edit-row="handleEdit" @handle-delete="singleDelete" @handle-manage="handleManage"/>
+      <DataTableSlot :key="row.id" :field="col.field" :row="row" @edit-row="handleEdit" @handle-delete="singleDelete" @handle-manage="handleManage" @show-detail="handleView" />
     </template>
   </vxe-grid>
   <EditDrawer v-if="editOpen" v-model="editOpen" :row-data="rowData" @refresh="handleRefresh" />
   <NoticeDialog v-if="dialogVisible" v-model="dialogVisible" :row-data="rowData" />
   <CreateDialog v-if="createOpen" v-model="createOpen" @refresh="fetchList" />
 	<ManageEnumDrawer v-if="manageOpen" v-model="manageOpen" :row-data="rowData" />
+	<ShowDetailDrawer v-if="viewOpen" v-model="viewOpen" :row-data="rowData" ></ShowDetailDrawer>
 </template>
 
 <style scoped>

src/views/sku-manage/product-attribute/component/DataTableSlot.vue

@@ -5,7 +5,7 @@
  * @Author: Cheney
  */
 
-import { Delete, InfoFilled, Operation, Tools } from '@element-plus/icons-vue';
+import { Delete, InfoFilled, Key, Operation, Tools, View } from '@element-plus/icons-vue';
 import PermissionButton from '/@/components/PermissionButton/index.vue';
 
 const props = defineProps<{
@@ -14,7 +14,11 @@ const props = defineProps<{
 }>();
 const { row, field } = props;
 
-const emit = defineEmits(['edit-row', 'handle-delete', 'handle-manage']);
+const emit = defineEmits(['edit-row', 'handle-delete', 'handle-manage','show-detail']);
+
+function handleView() {
+	emit('show-detail', row);
+}
 
 function handleEdit() {
 	emit('edit-row', row);
@@ -33,6 +37,7 @@ function handleManage() {
 	<div class="font-medium">
 		<div v-if="field === 'operate'">
 			<div class="flex justify-center gap-2">
+				<el-button circle plain type="success" :icon="View" @click="handleView"></el-button>
 				<PermissionButton circle plain type="warning" @click="handleEdit">
 					<el-icon>
 						<Operation />
@@ -52,7 +57,7 @@ function handleManage() {
 					</template>
 				</el-popconfirm>
 				<el-tooltip :enterable="false" :show-arrow="false" content="管理枚举" placement="top" popper-class="custom-btn-tooltip-2">
-					<el-button :icon="Tools" circle color="#6466F1" plain @click="handleManage"> </el-button>
+					<el-button :icon="Key" circle color="#8d87e8" plain @click="handleManage"> </el-button>
 				</el-tooltip>
 			</div>
 		</div>
@@ -66,7 +71,7 @@ function handleManage() {
 .custom-btn-tooltip-2 {
 	background-color: #f0f0fe !important;
 	color: #606266 !important;
-	border: 1px solid #6466f1 !important;
+	border: 1px solid #8d87e8 !important;
 	font-size: 14px;
 }
 </style>

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

@@ -0,0 +1,87 @@
+<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="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>