Bladeren bron

style(sku-manage): 优化产品种类和产品属性界面布局和样式

- 移除了不必要的 console.log 语句
- 使用 flex 布局优化了产品属性管理标题的样式
- 为属性名称添加了 el-check-tag 组件,提高了可读性
- 调整了操作按钮的布局,使其更加清晰
- 优化了数据表格的操作列,增加了查看按钮和管理枚举功能
WanGxC 6 maanden geleden
bovenliggende
commit
7b24ed9cd0

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

@@ -37,79 +37,52 @@ function handleManage() {
 <template>
   <div class="font-medium">
     <div v-if="field === 'operate'">
-      <div class="flex justify-center gap-2">
-        <div>
-          <PermissionButton circle plain type="warning" @click="handleEdit">
-            <el-icon>
-              <Operation />
-            </el-icon>
-          </PermissionButton>
-        </div>
-        <div>
-          <el-popconfirm
-              :icon="InfoFilled"
-              icon-color="#626AEF"
-              title="你确定要删除此项吗?"
-              width="220"
-              @confirm="onConfirm"
-          >
-            <template #reference>
-              <PermissionButton circle plain type="danger">
+      <div class="font-medium">
+        <div v-if="field === 'operate'">
+          <div class="flex justify-center gap-2">
+            <div>
+              <el-button circle plain type="success" :icon="View" @click="handleView"></el-button>
+            </div>
+            <div>
+              <PermissionButton circle plain type="warning" @click="handleEdit">
                 <el-icon>
-                  <Delete />
+                  <Operation />
                 </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>
+              <el-popconfirm :icon="InfoFilled" icon-color="#626AEF" title="你确定要删除此项吗?" width="220" @confirm="onConfirm">
+                <template #reference>
+                  <PermissionButton circle plain 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>
+              <el-tooltip :enterable="false" :show-arrow="false" content="管理枚举" placement="top" popper-class="custom-btn-tooltip-2">
+                <el-button :icon="Key" circle color="#8d87e8" plain @click="handleManage"> </el-button>
+              </el-tooltip>
+            </div>
+            
+          </div>
+        </div>
+        <div v-else>
+          {{ row[field] }}
         </div>
-        
       </div>
     </div>
     <div v-else>
       {{ row[field] }}
     </div>
   </div>
-	<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 />
-					</el-icon>
-				</PermissionButton>
-				<el-popconfirm :icon="InfoFilled" icon-color="#626AEF" title="你确定要删除此项吗?" width="220" @confirm="onConfirm">
-					<template #reference>
-						<PermissionButton circle plain 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>
-				<el-tooltip :enterable="false" :show-arrow="false" content="管理枚举" placement="top" popper-class="custom-btn-tooltip-2">
-					<el-button :icon="Key" circle color="#8d87e8" plain @click="handleManage"> </el-button>
-				</el-tooltip>
-			</div>
-		</div>
-		<div v-else>
-			{{ row[field] }}
-		</div>
-	</div>
+	
 </template>
 
 <style lang="scss">

+ 41 - 35
src/views/sku-manage/product-category/component/AttributeManage.vue

@@ -134,7 +134,6 @@ async function handleRelease() {
 }
 
 async function handleUpdate(row: any) {
-  console.log("(AttributeManage.vue: 137)=> row", row);
   const query = {
     id: row.id,
     attr: row.attr.id,
@@ -180,11 +179,13 @@ const gridEvents = {
                size="80%"
     >
       <template #title>
-        <div class="font-medium text-xl">
+        <div class="font-medium text-xl flex">
           产品属性管理:
-          <span class="italic">
-            {{ rowData.name }}
-          </span>
+          <el-check-tag type="primary" :checked="true" class="italic" style="pointer-events: none;">
+            <span style="font-size: 1.1rem">
+              {{ rowData.name }}
+            </span>
+          </el-check-tag>
         </div>
       </template>
       <div class="h-full p-3">
@@ -250,36 +251,41 @@ const gridEvents = {
           </template>
           <template #operate="{ row }">
             <div class="flex justify-center gap-2">
-              <PermissionButton :disabled="row.is_competitors" circle plain type="warning" @click="handleEdit(row)">
-                <el-icon>
-                  <Operation />
-                </el-icon>
-              </PermissionButton>
-              <el-popconfirm
-                  :icon="InfoFilled"
-                  icon-color="#626AEF"
-                  title="你确定要删除此项吗?"
-                  width="220"
-                  @confirm="onConfirm(row)"
-              >
-                <template #reference>
-                  <PermissionButton circle plain 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>
+                <PermissionButton :disabled="row.is_competitors" 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="onConfirm(row)"
+                >
+                  <template #reference>
+                    <PermissionButton circle plain 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>
         </vxe-grid>