style(table): 优化表格样式和布局

- 调整表格尺寸和样式
- 优化列宽和对齐方式
- 统一按钮样式和间距

src/views/product-manage/Columns.ts

@@ -185,7 +185,7 @@ export const CompetitorMonitorColumns = [
     slots: { default: 'tag' }
   },
   {
-    field: 'price_info', title: '价 格',  width: 'auto', align: 'left',
+    field: 'price_info', title: '价 格', width: 'auto', align: 'left',
     slots: { default: 'price_info' }
   },
   {
@@ -262,8 +262,8 @@ export const HistoricalColumns = [
   {
     field: 'new_val', title: '现 值', align: 'center',
     slots: { default: 'new_val' }
-  },
-]
+  }
+];
 
 export const CompetitorMonitorCommentColumns = [
   {
@@ -310,13 +310,13 @@ export const CompetitorMonitorCommentColumns = [
     field: 'operate', title: '操 作', width: 100, align: 'center', fixed: 'right',
     slots: { default: 'operate' }
   }
-]
+];
 
 export const NegativeLabelColumns = [
-  {type:'seq', title: '序号', width:48, align: 'center'},
-  {field:'raw_label',title: '原始标签',minWidth: 120,align: 'center',},
-  {field:'kind',title: '类别',minWidth: 76,align: 'center',},
-  {field:'update_datetime',title: '更新时间',minWidth:96,align: 'center',},
-  {field:'create_datetime',title: '创建时间',minWidth:96,align: 'center',},
-  {field:'operate',title: '操作',align: 'center',slots: { default: 'operate' }}
-]
+  { type: 'seq', title: '序 号', width: 50, align: 'center' },
+  { field: 'raw_label', title: '原始标签', minWidth: 'auto', align: 'center', showOverflow: true },
+  { field: 'kind', title: '类 别', width: 'auto', align: 'center', showOverflow: true },
+  { field: 'update_datetime', title: '更新时间', width: 'auto', align: 'center', showOverflow: true },
+  { field: 'create_datetime', title: '创建时间', width: 'auto', align: 'center', showOverflow: true },
+  { field: 'operate', fixed: 'right', title: '操 作', align: 'center', width: 90, slots: { default: 'operate' } }
+];

src/views/product-manage/comment-detail/component/NegativeLabel.vue

@@ -38,7 +38,7 @@ const gridOptions: any = reactive({
   // id: 'NegativeLabel-table',
   // keepSource: true,
   height: 800,
-  size: 'mini',
+  size: 'small',
   border: false,
   round: true,
   stripe: true,
@@ -119,7 +119,7 @@ onMounted(() => {
         v-model="isShowLabel"
         :show-close="false"
         direction="rtl"
-        size="50%"
+        size="55%"
         style="background-color: #f3f4fb"
         title="负面标签"
     >
@@ -129,7 +129,7 @@ onMounted(() => {
           <el-descriptions :column="1" direction="vertical">
             <el-descriptions-item>
               <template #label>
-                <div class="title-item">标题</div>
+                <div class="title-item">标 题</div>
               </template>
               <span class="cell-item">{{ rowData.title }}</span>
             </el-descriptions-item>
@@ -152,42 +152,45 @@ onMounted(() => {
         <el-card>
           <vxe-grid ref="gridRef" :cell-style="cellStyle" v-bind="gridOptions">
             <template #toolbar_buttons>
-              <div class="flex gap-2">
                 <PermissionButton v-if="hasPermission('ReviewLabelCreate')" :icon="Plus" plain round type="primary" @click="handleCreate"> 新 增</PermissionButton>
-              </div>
             </template>
             <template #operate="{ row }">
-              <div class="flex justify-center ">
-								<PermissionButton v-if="hasPermission('ReviewLabelUpdate')" circle plain type="warning" size="small" @click="handleEdit(row)">
-									<el-icon>
-										<Operation />
-									</el-icon>
-								</PermissionButton>
-                <el-popconfirm
-                    :icon="InfoFilled"
-                    icon-color="#626AEF"
-                    title="你确定要删除此项吗?"
-                    width="220"
-                    @confirm="singleDelete(row)"
-                >
-                  <template #reference>
-                    <PermissionButton circle plain size="small" type="danger" v-if="hasPermission('ReviewLabelDelete')">
-                      <el-icon>
-                        <Delete />
-                      </el-icon>
-                    </PermissionButton>
-                  </template>
-                  <template #actions="{ confirm, cancel }">
-                    <el-button size="small" @click="cancel">No!</el-button>
-                    <el-button
-                        size="small"
-                        type="danger"
-                        @click="confirm"
-                    >
-                      Yes?
-                    </el-button>
-                  </template>
-                </el-popconfirm>
+              <div class="flex justify-center gap-2">
+                <div>
+                  <PermissionButton v-if="hasPermission('ReviewLabelUpdate')" circle plain type="warning" @click="handleEdit(row)">
+                    <el-icon>
+                      <Operation />
+                    </el-icon>
+                  </PermissionButton>
+                </div>
+								<div>
+                  <el-popconfirm
+                      :icon="InfoFilled"
+                      icon-color="#626AEF"
+                      title="你确定要删除此项吗?"
+                      width="220"
+                      @confirm="singleDelete(row)"
+                  >
+                    <template #reference>
+                      <PermissionButton circle plain type="danger" v-if="hasPermission('ReviewLabelDelete')">
+                        <el-icon>
+                          <Delete />
+                        </el-icon>
+                      </PermissionButton>
+                    </template>
+                    <template #actions="{ confirm, cancel }">
+                      <el-button size="small" @click="cancel">No!</el-button>
+                      <el-button
+                          size="small"
+                          type="danger"
+                          @click="confirm"
+                      >
+                        Yes?
+                      </el-button>
+                    </template>
+                  </el-popconfirm>
+                </div>
+                
               </div>
             </template>
             <template #pager>

src/views/sku-manage/Columns.ts

@@ -9,11 +9,11 @@ export const AttributeColumns = [
     slots: { default: 'key' }
   },
   {
-    field: 'update_datetime', title: '更新时间',  align: 'center',
+    field: 'update_datetime', title: '更新时间', align: 'center',
     slots: { default: 'update_datetime' }
   },
   {
-    field: 'create_datetime', title: '创建时间',  align: 'center',
+    field: 'create_datetime', title: '创建时间', align: 'center',
     slots: { default: 'create_datetime' }
   },
   {
@@ -24,7 +24,8 @@ export const AttributeColumns = [
 
 export const ProductBrandColumns = [
   { type: 'seq', title: 'No.', width: 70, align: 'center', fixed: 'left' },
-  { field: 'brand_name', title: '品牌名称',  align: 'center', fixed: 'left',
+  {
+    field: 'brand_name', title: '品牌名称', align: 'center', fixed: 'left',
     slots: { default: 'brand_name' }
   },
   {
@@ -33,14 +34,15 @@ export const ProductBrandColumns = [
   },
   { field: 'create_datetime', title: '创建时间', align: 'center', slots: { default: 'create_datetime' } },
   {
-    field: 'operate', title: '操 作', width: 100 ,align: 'center', fixed: 'right',
+    field: 'operate', title: '操 作', width: 100, align: 'center', fixed: 'right',
     slots: { default: 'operate' }
   }
 ];
 
 export const ProductCategoryColumns = [
   { type: 'seq', title: 'No.', width: 70, align: 'center', fixed: 'left' },
-  { field: 'name', title: '种类名称',  align: 'center', fixed: 'left',
+  {
+    field: 'name', title: '种类名称', align: 'center', fixed: 'left',
     slots: { default: 'name' }
   },
   {
@@ -55,7 +57,7 @@ export const ProductCategoryColumns = [
     field: 'update_datetime', title: '更新时间', align: 'center',
     slots: { default: 'update_datetime' }
   },
-  { field: 'create_datetime', title: '创建时间',  align: 'center', slots: { default: 'create_datetime' } },
+  { field: 'create_datetime', title: '创建时间', align: 'center', slots: { default: 'create_datetime' } },
   {
     field: 'operate', title: '操 作', width: 130, align: 'center', fixed: 'right',
     slots: { default: 'operate' }
@@ -64,7 +66,8 @@ export const ProductCategoryColumns = [
 
 export const CompanySkuColumns = [
   { type: 'checkbox', width: 50, align: 'center', fixed: 'left' },
-  { field: 'sku', title: 'SKU',  align: 'center', fixed: 'left',
+  {
+    field: 'sku', title: 'SKU', align: 'center', fixed: 'left',
     slots: { default: 'sku' }
   },
   {
@@ -95,19 +98,18 @@ export const CompanySkuColumns = [
 ];
 
 export const EnumColumns = [
-  {field:'label',title: '名称',minWidth: 100,align: 'center',},
-  {field:'value',title: '数据值',minWidth: 76,align: 'center',},
-  {field:'status',title: '状态',minWidth: 120,align: 'center',slots: { default: 'status' }},
-  {field:'operate',title: '操作',align: 'center',slots: { default: 'operate' }}
-]
-
+  { field: 'label', title: '名称', minWidth: 'auto', align: 'center' },
+  { field: 'value', title: '数据值', minWidth: 'auto', align: 'center' },
+  { field: 'status', title: '状态', minWidth: 'auto', align: 'center', slots: { default: 'status' } },
+  { field: 'operate', title: '操作', align: 'center', width: 130, slots: { default: 'operate' } }
+];
 
 export const AttributeManageColumns = [
   { type: 'seq', title: 'No.', width: 70, align: 'center', fixed: 'left' },
-  { field: 'placement', title: '位 置',  align: 'center', slots: { default: 'placement' } },
-  { field: 'attribute', title: '属 性',  align: 'center', slots: { default: 'attribute' } },
-  { field: 'order', title: '顺 序',  align: 'center', slots: { default: 'order' } },
+  { field: 'placement', title: '位 置', align: 'center', slots: { default: 'placement' } },
+  { field: 'attribute', title: '属 性', align: 'center', slots: { default: 'attribute' } },
+  { field: 'order', title: '顺 序', align: 'center', slots: { default: 'order' } },
   { field: 'update_datetime', title: '更新时间', width: 170, align: 'center', slots: { default: 'update_datetime' } },
   { field: 'create_datetime', title: '创建时间', width: 170, align: 'center', slots: { default: 'create_datetime' } },
   { field: 'operate', title: '操 作', width: 175, align: 'center', fixed: 'right', slots: { default: 'operate' } }
-]
+];

src/views/sku-manage/product-attribute/component/manage-enum/index.vue

@@ -17,10 +17,11 @@ import EditLabelDialog from '/@/views/product-manage/comment-detail/component/Ed
 import ShowEnumDrawer from '/@/views/sku-manage/product-attribute/component/manage-enum/component/ShowEnumDrawer.vue';
 import { hasPermission } from '/@/utils/hasPermission';
 
+
 const manageOpen = defineModel({ default: false });
 
 const props = defineProps({
-	rowData: Object,
+  rowData: Object
 });
 
 const { rowData } = props;
@@ -33,205 +34,209 @@ const viewOpen = ref(false);
 const editData = ref<any>();
 
 const formInline = reactive<any>({
-	label: '',
-	status: '',
+  label: '',
+  status: ''
 });
 
 const gridRef = ref();
 const gridOptions: any = reactive({
-	// id: 'NegativeLabel-table',
-	// keepSource: true,
-	height: 720,
-	size: 'mini',
-	border: false,
-	round: true,
-	stripe: true,
-	showHeader: true,
-	showOverflow: true,
-	currentRowHighLight: true,
-	toolbarConfig: {
-		size: 'large',
-		slots: {
-			buttons: 'toolbar_buttons'
-			// tools: 'toolbar_tools',
-		}
-	},
-	rowConfig: {
-		isHover: true
-	},
-	columnConfig: {
-		resizable: true
-	},
-	pagerConfig: {
-		total: tableOptions.value.total,
-		page: tableOptions.value.page,
-		limit: tableOptions.value.limit
-	},
-	loading: false,
-	loadingConfig: {
-		icon: 'vxe-icon-indicator roll',
-		text: '正在拼命加载中...'
-	},
-	columns: '',
-	data: ''
+  // id: 'NegativeLabel-table',
+  // keepSource: true,
+  height: 720,
+  size: 'small',
+  border: false,
+  round: true,
+  stripe: true,
+  showHeader: true,
+  showOverflow: true,
+  currentRowHighLight: true,
+  toolbarConfig: {
+    size: 'large',
+    slots: {
+      buttons: 'toolbar_buttons'
+      // tools: 'toolbar_tools',
+    }
+  },
+  rowConfig: {
+    isHover: true
+  },
+  columnConfig: {
+    resizable: true
+  },
+  pagerConfig: {
+    total: tableOptions.value.total,
+    page: tableOptions.value.page,
+    limit: tableOptions.value.limit
+  },
+  loading: false,
+  loadingConfig: {
+    icon: 'vxe-icon-indicator roll',
+    text: '正在拼命加载中...'
+  },
+  columns: '',
+  data: ''
 });
 
 async function fetchList() {
-	gridOptions.data = [];
-	gridOptions.columns = [];
-
-	const query = {
-		attr: rowData.id,
-		label: formInline.label,
-		status: formInline.status,
-	};
-	await useTableData(api.getTableData, query, gridOptions);
-	await gridRef.value.loadColumn(EnumColumns);
-	gridOptions.showHeader = Boolean(gridOptions.data?.length);
+  gridOptions.data = [];
+  gridOptions.columns = [];
+
+  const query = {
+    attr: rowData.id,
+    label: formInline.label,
+    status: formInline.status
+  };
+  await useTableData(api.getTableData, query, gridOptions);
+  await gridRef.value.loadColumn(EnumColumns);
+  gridOptions.showHeader = Boolean(gridOptions.data?.length);
 }
 
 async function singleDelete(row: any) {
-	const res = await useResponse(api.deleteRow, row.id);
-	if (res.code === 2000) {
-		ElMessage.success({ message: '删除成功', plain: true });
-		await fetchList();
-	}
+  const res = await useResponse(api.deleteRow, row.id);
+  if (res.code === 2000) {
+    ElMessage.success({ message: '删除成功', plain: true });
+    await fetchList();
+  }
 }
 
 function handleCreate() {
-	createOpen.value = true;
+  createOpen.value = true;
 }
 
 function handleView(row: any) {
-	editData.value = row;
-	viewOpen.value = true;
+  editData.value = row;
+  viewOpen.value = true;
 }
 
 function handleEdit(row: any) {
-	editOpen.value = true;
-	editData.value = row;
+  editOpen.value = true;
+  editData.value = row;
 }
 
 function cellStyle() {
-	return {
-		fontWeight: 500
-	};
+  return {
+    fontWeight: 500
+  };
 }
 
 onMounted(() => {
-	fetchList();
+  fetchList();
 });
 </script>
 
 <template>
-	<div class="drawer-container">
-		<el-drawer ref="editDrawer"
-							 v-model="manageOpen"
-							 :close-on-click-modal="false"
-							 :close-on-press-escape="false"
-							 style="background-color: #f3f4fb"
-							 size="50%">
-			<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 w-full whitespace-nowrap">
-				<el-card style="height: 850px">
-					<el-row >
-						<el-col :span="8" >
-							<div>
-								<span class="mr-2">名称</span>
-								<el-input v-model="formInline.label" placeholder="请输入名称" clearable @change="fetchList"></el-input>
-							</div>
-						</el-col>
-						<el-col :span="8" :offset="4">
-							<div>
-								<span class="mr-2">状态</span>
-								<el-select v-model="formInline.status" placeholder="请选择状态" clearable @change="fetchList">
-									<el-option label="启用" value="1"></el-option>
-									<el-option label="禁用" value="0"></el-option>
-								</el-select>
-							</div>
-						</el-col>
-					</el-row>
-					<el-divider ref="dividerContainer" style="margin: 20px 0 12px 0" />
-					<vxe-grid ref="gridRef" :cell-style="cellStyle" v-bind="gridOptions">
-						<template #toolbar_buttons>
-							<div class="flex gap-2">
-								<PermissionButton :icon="Plus" v-if="hasPermission('AttrCreate')" plain round type="primary" @click="handleCreate"> 新 增</PermissionButton>
-							</div>
-						</template>
-						<template #status="{ row }">
-							<el-tag v-if="row.status == true" type="success">启用</el-tag>
-							<el-tag v-else type="danger">禁用</el-tag>
-						</template>
-						<template #operate="{ row }">
-							<div class="flex justify-center gap-2">
-								<div>
-									<el-button size="small" circle plain type="success" :icon="View" @click="handleView(row)"></el-button>
-								</div>
-								<PermissionButton v-if="hasPermission('AttrUpdate')" circle plain type="warning" size="small" @click="handleEdit(row)">
-									<el-icon>
-										<Operation />
-									</el-icon>
-								</PermissionButton>
-								<div v-if="hasPermission('AttrDelete')">
-								<el-popconfirm
-									:icon="InfoFilled"
-									icon-color="#626AEF"
-									title="你确定要删除此项吗?"
-									width="220"
-									@confirm="singleDelete(row)"
-								>
-									<template #reference>
-										<PermissionButton circle plain size="small" type="danger">
-											<el-icon>
-												<Delete />
-											</el-icon>
-										</PermissionButton>
-									</template>
-									<template #actions="{ confirm, cancel }">
-										<el-button size="small" @click="cancel">No!</el-button>
-										<el-button
-											size="small"
-											type="danger"
-											@click="confirm"
-										>
-											Yes?
-										</el-button>
-									</template>
-								</el-popconfirm>
-								</div>
-							</div>
-						</template>
-						<template #pager>
-							<vxe-pager
-								v-model:currentPage="gridOptions.pagerConfig.page"
-								v-model:pageSize="gridOptions.pagerConfig.limit"
-								:total="gridOptions.pagerConfig.total"
-								class="mt-1.5"
-								@page-change="handlePageChange"
-							/>
-						</template>
-					</vxe-grid>
-				</el-card>
-			</div>
-		</el-drawer>
-		<CreateDialog v-if="createOpen" v-model="createOpen" :rowData="rowData" @refresh="fetchList"></CreateDialog>
-		<EditDrawer v-if="editOpen" v-model="editOpen" :editData="editData" :rowData="rowData" @refresh="fetchList"></EditDrawer>
-		<ShowEnumDrawer v-if="viewOpen" v-model="viewOpen" :editData="editData" ></ShowEnumDrawer>
-	</div>
+  <div class="drawer-container">
+    <el-drawer ref="editDrawer"
+               v-model="manageOpen"
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               size="50%"
+               style="background-color: #f3f4fb">
+      <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 w-full whitespace-nowrap">
+        <el-card style="height: 850px">
+          <el-row>
+            <el-col :span="8">
+              <div>
+                <span class="mr-2">名 称</span>
+                <el-input v-model="formInline.label" clearable placeholder="请输入名称" @change="fetchList"></el-input>
+              </div>
+            </el-col>
+            <el-col :offset="4" :span="8">
+              <div>
+                <span class="mr-2">状 态</span>
+                <el-select v-model="formInline.status" clearable placeholder="请选择状态" @change="fetchList">
+                  <el-option label="启用" value="1"></el-option>
+                  <el-option label="禁用" value="0"></el-option>
+                </el-select>
+              </div>
+            </el-col>
+          </el-row>
+          <el-divider ref="dividerContainer" style="margin: 20px 0 12px 0" />
+          <vxe-grid ref="gridRef" :cell-style="cellStyle" v-bind="gridOptions">
+            <template #toolbar_buttons>
+              <div class="flex gap-2">
+                <PermissionButton v-if="hasPermission('AttrCreate')" :icon="Plus" plain round type="primary"
+                                  @click="handleCreate"> 新 增
+                </PermissionButton>
+              </div>
+            </template>
+            <template #status="{ row }">
+              <el-tag v-if="row.status == true" type="success">启用</el-tag>
+              <el-tag v-else type="danger">禁用</el-tag>
+            </template>
+            <template #operate="{ row }">
+              <div class="flex justify-center gap-2">
+                <div>
+                  <el-button :icon="View" circle plain type="success" @click="handleView(row)"></el-button>
+                </div>
+                <div>
+                  <PermissionButton v-if="hasPermission('AttrUpdate')" circle plain type="warning"
+                                    @click="handleEdit(row)">
+                    <el-icon>
+                      <Operation />
+                    </el-icon>
+                  </PermissionButton>
+                </div>
+                <div v-if="hasPermission('AttrDelete')">
+                  <el-popconfirm
+                      :icon="InfoFilled"
+                      icon-color="#626AEF"
+                      title="你确定要删除此项吗?"
+                      width="220"
+                      @confirm="singleDelete(row)"
+                  >
+                    <template #reference>
+                      <PermissionButton circle plain type="danger">
+                        <el-icon>
+                          <Delete />
+                        </el-icon>
+                      </PermissionButton>
+                    </template>
+                    <template #actions="{ confirm, cancel }">
+                      <el-button @click="cancel">No!</el-button>
+                      <el-button
+                          type="danger"
+                          @click="confirm"
+                      >
+                        Yes?
+                      </el-button>
+                    </template>
+                  </el-popconfirm>
+                </div>
+              </div>
+            </template>
+            <template #pager>
+              <vxe-pager
+                  v-model:currentPage="gridOptions.pagerConfig.page"
+                  v-model:pageSize="gridOptions.pagerConfig.limit"
+                  :total="gridOptions.pagerConfig.total"
+                  class="mt-1.5"
+                  @page-change="handlePageChange"
+              />
+            </template>
+          </vxe-grid>
+        </el-card>
+      </div>
+    </el-drawer>
+    <CreateDialog v-if="createOpen" v-model="createOpen" :rowData="rowData" @refresh="fetchList"></CreateDialog>
+    <EditDrawer v-if="editOpen" v-model="editOpen" :editData="editData" :rowData="rowData" @refresh="fetchList"></EditDrawer>
+    <ShowEnumDrawer v-if="viewOpen" v-model="viewOpen" :editData="editData"></ShowEnumDrawer>
+  </div>
 </template>
 
 <style scoped>
 .drawer-container :deep(.el-drawer__header) {
-	border-bottom: none;
-	font-weight: 500;
+  border-bottom: none;
+  font-weight: 500;
 }
 
 .drawer-container :deep(.el-drawer__title) {
-	font-size: 18px;
+  font-size: 18px;
 }
 </style>