refactor(product-manage): 重构商品管理页面状态展示和操作按钮布局

- 优化了多个组件中的状态展示逻辑，增加了更多状态类型
- 调整了操作按钮的布局方式，提高了界面的可读性和易用性
- 统一了状态选项的定义和使用，提升了代码的可维护性
- 优化了 PermissionButton 组件的模板结构，简化了 HTML 结构

src/components/PermissionButton/index.vue

@@ -7,6 +7,7 @@
 import { ButtonProps } from 'element-plus';
 import { BtnPermissionStore } from '/@/plugin/permission/store.permission';
 
+
 const { data } = BtnPermissionStore();
 
 const attrs = useAttrs() as any;
@@ -24,12 +25,10 @@ function hasPermission(permissions: string | string[]): boolean {
 </script>
 
 <template>
-  <div>
-    <el-button v-if="attrs.permissions ? hasPermission(attrs.permissions) : true"
-               v-bind="props">
-      <slot></slot>
-    </el-button>
-  </div>
+  <el-button v-if="attrs.permissions ? hasPermission(attrs.permissions) : true"
+             v-bind="props">
+    <slot></slot>
+  </el-button>
 </template>
 
 <style scoped>

src/views/product-manage/competitor-monitor/component/DataTableSlot.vue

@@ -27,8 +27,13 @@ const countryInfoStore = useCountryInfoStore();
 const country = countryInfoStore.Countries.find(c => c.code == row.country_code);
 const color = country ? country.color : '#3875F6';
 
-const statusText = row.status === 1 ? '在售' : '停售';
-const statusType = row.status === 1 ? 'success' : 'info';
+const statusMap: { [key: number]: { text: string, type: string } } = {
+  1: { text: '正常', type: 'success' },
+  2: { text: '失败', type: 'danger' },
+  3: { text: '暂停', type: 'warning' },
+  10: { text: '下架', type: 'info' }
+};
+const { text: statusText, type: statusType } = statusMap[row.status] || { text: '未知', type: 'info' };
 
 function handleEdit() {
   emit('edit-row', row);
@@ -185,54 +190,62 @@ function goto() {
     </div>
     <div v-else-if="field === 'operate'">
       <div class="flex justify-center gap-2 mb-2">
-        <el-tooltip :enterable="false" :show-arrow="false" content="评论详情" hide-after="0"
-                    placement="top" popper-class="custom-btn-tooltip">
-          <PermissionButton circle plain type="success" @click="goto">
-            <el-icon>
-              <Tickets />
-            </el-icon>
-          </PermissionButton>
-        </el-tooltip>
-        <el-tooltip :enterable="false" :show-arrow="false" content="历史详情" hide-after="0"
-                    placement="top" popper-class="custom-btn-tooltip-2">
-          <PermissionButton :color="'#6466F1'" circle plain type="success" @click="showDetail('show-history')">
-            <el-icon>
-              <Timer />
-            </el-icon>
-          </PermissionButton>
-        </el-tooltip>
-      </div>
-      <div class="flex justify-center gap-2">
-        <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">
+        <div>
+          <el-tooltip :enterable="false" :show-arrow="false" content="评论详情" hide-after="0"
+                      placement="top" popper-class="custom-btn-tooltip">
+            <PermissionButton circle plain type="success" @click="goto">
               <el-icon>
-                <Delete />
+                <Tickets />
               </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>
+        </div>
+        <div>
+          <el-tooltip :enterable="false" :show-arrow="false" content="历史详情" hide-after="0"
+                      placement="top" popper-class="custom-btn-tooltip-2">
+            <PermissionButton :color="'#6466F1'" circle plain type="success" @click="showDetail('show-history')">
+              <el-icon>
+                <Timer />
+              </el-icon>
+            </PermissionButton>
+          </el-tooltip>
+        </div>
+      </div>
+      <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">
+                <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>
     </div>
     <div v-else>

src/views/product-manage/competitor-monitor/index.vue

@@ -44,6 +44,13 @@ provide('groupOptions', groupOptions);
 provide('brandsOptions', brandsOptions);
 provide('shopOptions', shopsOptions);
 
+const statusOptions = [
+  { label: '正常', value: 1 },
+  { label: '失败', value: 2 },
+  { label: '暂停', value: 3 },
+  { label: '下架', value: 10 }
+]
+
 onBeforeMount(() => {
   fetchGroupOptions();
   fetchBrandsOptions();
@@ -119,7 +126,7 @@ function resetParameter() {
                 <div class="flex items-center">
                   <span class="mr-2">状 态</span>
                   <el-select v-model="formInline.status" clearable placeholder="请选择状态">
-                    <el-option v-for="item in staticData.goods_status" :key="item.value" :label="item.label"
+                    <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                   </el-select>
                 </div>

src/views/product-manage/product-list/component/DataTableSlot.vue

@@ -113,19 +113,23 @@ function handleMonitor() {
     </div>
     <div v-else-if="field === 'operate'">
       <div class="flex justify-center gap-2">
-        <PermissionButton circle plain type="warning" @click="handleEdit" :disabled="row.is_competitors">
-          <el-icon>
-            <Operation />
-          </el-icon>
-        </PermissionButton>
-        <el-tooltip :enterable="false" :show-arrow="false" content="变更通知" hide-after="0"
-                    placement="top" popper-class="custom-btn-tooltip-info">
-          <PermissionButton circle plain type="info" @click="handleNotice">
+        <div>
+          <PermissionButton circle plain type="warning" @click="handleEdit" :disabled="row.is_competitors">
             <el-icon>
-              <Message />
+              <Operation />
             </el-icon>
           </PermissionButton>
-        </el-tooltip>
+        </div>
+       <div>
+         <el-tooltip :enterable="false" :show-arrow="false" content="变更通知" hide-after="0"
+                     placement="top" popper-class="custom-btn-tooltip-info">
+           <PermissionButton circle plain type="info" @click="handleNotice">
+             <el-icon>
+               <Message />
+             </el-icon>
+           </PermissionButton>
+         </el-tooltip>
+       </div>
       </div>
     </div>
     <div v-else>

src/views/product-manage/product-monitor/component/DataTableSlot.vue

@@ -28,8 +28,13 @@ const countryInfoStore = useCountryInfoStore();
 const country = countryInfoStore.Countries.find(c => c.code == row.country_code);
 const color = country ? country.color : '#3875F6';
 
-const statusText = row.status === 1 ? '在售' : '停售';
-const statusType = row.status === 1 ? 'success' : 'info';
+const statusMap: { [key: number]: { text: string, type: string } } = {
+  1: { text: '正常', type: 'success' },
+  2: { text: '失败', type: 'danger' },
+  3: { text: '暂停', type: 'warning' },
+  10: { text: '下架', type: 'info' }
+};
+const { text: statusText, type: statusType } = statusMap[row.status] || { text: '未知', type: 'info' };
 
 function handleEdit() {
   emit('edit-row', row);
@@ -161,54 +166,63 @@ function goto() {
     </div>
     <div v-else-if="field === 'operate'">
       <div class="flex justify-center gap-2 mb-2">
-        <el-tooltip :enterable="false" :show-arrow="false" content="评论详情" hide-after="0"
-                    placement="top" popper-class="custom-btn-tooltip">
-          <PermissionButton circle plain type="success" @click="goto">
-            <el-icon>
-              <Tickets />
-            </el-icon>
-          </PermissionButton>
-        </el-tooltip>
-        <el-tooltip :enterable="false" :show-arrow="false" content="历史详情" hide-after="0"
-                    placement="top" popper-class="custom-btn-tooltip-2">
-          <PermissionButton :color="'#6466F1'" circle plain type="success" @click="showDetail('show-history')">
-            <el-icon>
-              <Timer />
-            </el-icon>
-          </PermissionButton>
-        </el-tooltip>
-      </div>
-      <div class="flex justify-center gap-2">
-        <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">
+        <div>
+          <el-tooltip :enterable="false" :show-arrow="false" content="评论详情" hide-after="0"
+                      placement="top" popper-class="custom-btn-tooltip">
+            <PermissionButton circle plain type="success" @click="goto">
               <el-icon>
-                <Delete />
+                <Tickets />
               </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>
+        </div>
+        <div>
+          <el-tooltip :enterable="false" :show-arrow="false" content="历史详情" hide-after="0"
+                      placement="top" popper-class="custom-btn-tooltip-2">
+            <PermissionButton :color="'#6466F1'" circle plain type="success" @click="showDetail('show-history')">
+              <el-icon>
+                <Timer />
+              </el-icon>
+            </PermissionButton>
+          </el-tooltip>
+        </div>
+      </div>
+      <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">
+                <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>
     </div>
     <div v-else>

src/views/product-manage/product-monitor/index.vue

@@ -46,6 +46,13 @@ provide('groupOptions', groupOptions);
 provide('brandsOptions', brandsOptions);
 provide('shopOptions', shopsOptions);
 
+const statusOptions = [
+  { label: '正常', value: 1 },
+  { label: '失败', value: 2 },
+  { label: '暂停', value: 3 },
+  { label: '下架', value: 10 }
+]
+
 onBeforeMount(() => {
   fetchOptions();
 });
@@ -110,7 +117,7 @@ function resetParameter() {
                 <div class="flex items-center">
                   <span class="mr-2">状 态</span>
                   <el-select v-model="formInline.status" clearable placeholder="请选择状态">
-                    <el-option v-for="item in staticData.goods_status" :key="item.value" :label="item.label"
+                    <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                   </el-select>
                 </div>

src/views/sku-manage/company-sku/component/DataTableSlot.vue

@@ -10,111 +10,121 @@ import PermissionButton from '/@/components/PermissionButton/index.vue';
 import { getTagType } from '/@/utils/useTagColor';
 import { handleCopy } from '/@/utils/useCopyText';
 
+
 const props = defineProps<{
-	row: any;
-	field: any;
+  row: any;
+  field: any;
 }>();
 const { row, field } = props;
 
-const emit: any = defineEmits(['edit-row', 'handle-delete', 'show-sku', 'release-sku']);
+const emit: any = defineEmits([ 'edit-row', 'handle-delete', 'show-sku', 'release-sku' ]);
 
 function handleEdit() {
-	emit('edit-row', row);
+  emit('edit-row', row);
 }
 
 function onConfirm() {
-	emit('handle-delete', row);
+  emit('handle-delete', row);
 }
 
 function release() {
-	emit('release-sku', row);
+  emit('release-sku', row);
 }
 
 function showDetail() {
-	emit('show-sku', row);
+  emit('show-sku', row);
 }
 </script>
 
 <template>
-	<div class="font-medium">
-		<div v-if="field === 'operate'">
-			<div class="flex justify-center gap-2 mb-2">
-				<PermissionButton circle plain type="success" @click="showDetail()">
-					<el-icon>
-						<View />
-					</el-icon>
-				</PermissionButton>
-
-			<!--</div>-->
-			<!--<div class="flex justify-center gap-2">-->
-				<PermissionButton circle plain type="warning" @click="handleEdit">
-					<el-icon>
-						<Operation />
-					</el-icon>
-				</PermissionButton>
-				<el-popconfirm :icon="InfoFilled" icon-color="#626AEF" title="发布后此sku将无法更改, 是否继续?" width="220" @confirm="release">
-					<template #reference>
-						<!--div不可以删除，否则会导致popconfirm的弹出框消失-->
-						<div>
-							<el-tooltip :enterable="false" :show-arrow="false" content="发布" hide-after="0" placement="top" popper-class="custom-btn-tooltip-2">
-								<PermissionButton :color="'#6466F1'" circle plain :disabled="row.status === 3">
-									<el-icon>
-										<Position />
-									</el-icon>
-								</PermissionButton>
-							</el-tooltip>
-						</div>
-					</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-popconfirm :icon="InfoFilled" icon-color="#626AEF" title="你确定要删除此项吗?" width="220" @confirm="onConfirm">
-					<template #reference>
-						<PermissionButton circle plain type="danger" :disabled="row.status === 3">
-							<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>
-		<div v-else-if="field === 'sku'" class="flex flex-nowrap">
-			{{ row.sku }}
-			<el-button :disabled="!row.sku" :icon="DocumentCopy" class="ml-2 cursor-pointer" link @click="handleCopy(row.sku || '')"></el-button>
-		</div>
-		<div v-else-if="field === 'brand'">
-			<el-tag :disable-transitions="true" :type="getTagType(row.brand.brand_name)" effect="plain" round>
-				{{ row.brand.brand_name }}
-			</el-tag>
-		</div>
-		<div v-else-if="field === 'kind'">
-			<el-tag :disable-transitions="true" :type="getTagType(row.kind.name)" effect="plain" round>
-				{{ row.kind.name }}
-			</el-tag>
-		</div>
-		<div v-else-if="field === 'status'">
-			<el-tag :disable-transitions="true" :type="row.status === 1 ? 'warning' : 'success'">
-				{{ row.status === 1 ? '草稿' : '已发布' }}
-			</el-tag>
-		</div>
-		<div v-else>
-			{{ row[field] }}
-		</div>
-	</div>
+  <div class="font-medium">
+    <div v-if="field === 'operate'">
+      <div class="flex justify-center gap-2 mb-2">
+        <div>
+          <PermissionButton circle plain type="success" @click="showDetail()">
+            <el-icon>
+              <View />
+            </el-icon>
+          </PermissionButton>
+        </div>
+        <div>
+          <PermissionButton circle plain type="warning" @click="handleEdit">
+            <el-icon>
+              <Operation />
+            </el-icon>
+          </PermissionButton>
+        </div>
+        <div>
+          <el-popconfirm :icon="InfoFilled" icon-color="#626AEF" title="发布后此sku将无法更改, 是否继续?" width="220"
+                         @confirm="release">
+            <template #reference>
+              <!--div不可以删除，否则会导致popconfirm的弹出框消失-->
+              <div>
+                <el-tooltip :enterable="false" :show-arrow="false" content="发布" hide-after="0" placement="top"
+                            popper-class="custom-btn-tooltip-2">
+                  <PermissionButton :color="'#6466F1'" :disabled="row.status === 3" circle plain>
+                    <el-icon>
+                      <Position />
+                    </el-icon>
+                  </PermissionButton>
+                </el-tooltip>
+              </div>
+            </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 :disabled="row.status === 3" 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>
+    </div>
+    <div v-else-if="field === 'sku'" class="flex flex-nowrap">
+      {{ row.sku }}
+      <el-button :disabled="!row.sku" :icon="DocumentCopy" class="ml-2 cursor-pointer" link
+                 @click="handleCopy(row.sku || '')"></el-button>
+    </div>
+    <div v-else-if="field === 'brand'">
+      <el-tag :disable-transitions="true" :type="getTagType(row.brand.brand_name)" effect="plain" round>
+        {{ row.brand.brand_name }}
+      </el-tag>
+    </div>
+    <div v-else-if="field === 'kind'">
+      <el-tag :disable-transitions="true" :type="getTagType(row.kind.name)" effect="plain" round>
+        {{ row.kind.name }}
+      </el-tag>
+    </div>
+    <div v-else-if="field === 'status'">
+      <el-tag :disable-transitions="true" :type="row.status === 1 ? 'warning' : 'success'">
+        {{ row.status === 1 ? '草稿' : '已发布' }}
+      </el-tag>
+    </div>
+    <div v-else>
+      {{ row[field] }}
+    </div>
+  </div>
 </template>
 
 <style lang="scss">
 .custom-btn-tooltip-2 {
-	background-color: #f0f0fe !important;
-	color: #606266 !important;
-	border: 1px solid #6466f1 !important;
-	font-size: 14px;
+  background-color: #f0f0fe !important;
+  color: #606266 !important;
+  border: 1px solid #6466f1 !important;
+  font-size: 14px;
 }
 </style>

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

@@ -30,36 +30,41 @@ function onConfirm() {
   <div class="font-medium">
     <div v-if="field === 'operate'">
       <div class="flex justify-center gap-2">
-        <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>
+        <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">
+                <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>
     </div>
     <div v-else>

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

@@ -30,36 +30,41 @@ function onConfirm() {
   <div class="font-medium">
     <div v-if="field === 'operate'">
       <div class="flex justify-center gap-2">
-        <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>
+        <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">
+                <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>
     </div>
     <div v-else>

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

@@ -35,44 +35,50 @@ function onConfirm() {
   <div class="font-medium">
     <div v-if="field === 'operate'">
       <div class="flex justify-center gap-2">
-        <PermissionButton :disabled="row.status == '3'" 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 :disabled="row.status == '3'" 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 :disabled="row.status == '3'" :enterable="false" :show-arrow="false" content="属性管理" hide-after="0"
-                    placement="top" popper-class="custom-btn-tooltip-3">
-          <PermissionButton :color="'#00A1D6'" :disabled="row.status == '3'" circle plain @click="handleAttribute">
+        <div>
+          <PermissionButton :disabled="row.status == '3'" circle plain type="warning" @click="handleEdit">
             <el-icon>
-              <MessageBox />
+              <Operation />
             </el-icon>
           </PermissionButton>
-        </el-tooltip>
+        </div>
+        <div>
+          <el-popconfirm
+              :icon="InfoFilled"
+              icon-color="#626AEF"
+              title="你确定要删除此项吗?"
+              width="220"
+              @confirm="onConfirm"
+          >
+            <template #reference>
+              <PermissionButton :disabled="row.status == '3'" 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 :disabled="row.status == '3'" :enterable="false" :show-arrow="false" content="属性管理" hide-after="0"
+                      placement="top" popper-class="custom-btn-tooltip-3">
+            <PermissionButton :color="'#00A1D6'" :disabled="row.status == '3'" circle plain @click="handleAttribute">
+              <el-icon>
+                <MessageBox />
+              </el-icon>
+            </PermissionButton>
+          </el-tooltip>
+        </div>
       </div>
     </div>
     <div v-else-if="field === 'main'">