@lx-frontend/wrap-element-ui 1.0.1-beta.7 → 1.0.1-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.1-beta.7",
+  "version": "1.0.1-beta.8",
   "description": "wrap-element-ui",
   "author": "",
   "main": "src/components/index.ts",

package/src/components/EditableTable/bizHooks/index.ts

@@ -13,5 +13,5 @@ export {
   useRowBgColor,
   useDefaultOperation,
   useColumnHeaderOperation,
-  useDragSort
+  useDragSort,
 }

package/src/components/EditableTable/features/bizColorSelect.vue

@@ -1,40 +1,38 @@
 <!-- 行颜色选择组件 -->
 <template>
-  <div>
-    <el-popover
-      v-model="visible"
-      placement="right"
-      trigger="click"
-      popper-class="color-popover"
-    >
-      <div class="color-list">
-        <div
-          v-for="color in colorList"
-          :key="color.id"
-          class="color-list__item"
-          :style="{ backgroundColor: color.sampleColor }"
-          @click="() => {
-            visible = false
-            handleColorChange(color.id, scope)
-          }"
-        >
-          <span :style="{color: color.textColor}">{{ color.name }}</span>
-        </div>
+  <el-popover
+    v-model="visible"
+    placement="right"
+    trigger="click"
+    popper-class="color-popover"
+  >
+    <div class="color-list">
+      <div
+        v-for="color in colorList"
+        :key="color.id"
+        class="color-list__item"
+        :style="{ backgroundColor: color.sampleColor }"
+        @click="() => {
+          visible = false
+          handleColorChange(color.id, scope)
+        }"
+      >
+        <span :style="{color: color.textColor}">{{ color.name }}</span>
       </div>
+    </div>
 
-      <div slot="reference">
-        <div
-          v-if="isDefaultColor(scope.row.colorId)"
-          class="editable-table__color-icon"
-        />
-        <div
-          v-else
-          class="editable-table__selected-color"
-          :style="{ backgroundColor: getColorById(scope.row.colorId, 'sample') }"
-        />
-      </div>
-    </el-popover>
-  </div>
+    <div slot="reference">
+      <div
+        v-if="isDefaultColor(scope.row.colorId)"
+        class="editable-table__color-icon"
+      />
+      <div
+        v-else
+        class="editable-table__selected-color"
+        :style="{ backgroundColor: getColorById(scope.row.colorId, 'sample') }"
+      />
+    </div>
+  </el-popover>
 </template>
 
 <script setup lang="ts">

package/src/components/EditableTable/features/bizTableOperatePopover.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-popover
+    ref="operationPopoverRef"
+    placement="bottom"
+    trigger="click"
+    popper-class="operation-popover"
+  >
+    <div
+      slot="reference"
+      class="operation-popover__operation-reference btn-pointer"
+    >
+      <el-button :class="['operation-popover__operation-btn', hoveringCellInfo.rowIndex === scope.$index && 'operation-popover__operation-btn--active']">
+        操作
+      </el-button>
+    </div>
+    <div class="operation-popover__operation">
+      <div
+        v-if="defaultOperations.includes('delete')"
+        class="operation-popover__operation-item btn-pointer"
+        @click="() => emit('delete')"
+      >
+        删除
+      </div>
+      <div
+        v-if="defaultOperations.includes('edit')"
+        class="operation-popover__operation-item btn-pointer"
+        @click="() => emit('edit')"
+      >
+        编辑
+      </div>
+      <div
+        v-if="defaultOperations.includes('top')"
+        class="operation-popover__operation-item btn-pointer"
+        @click="() => emit('rowPinToTop')"
+      >
+        置顶
+      </div>
+      <slot />
+    </div>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { IDefaultOperationType } from '../types';
+
+defineProps<{
+  defaultOperations: IDefaultOperationType[]
+  hoveringCellInfo: {
+    rowIndex: number
+    columnProperty: string
+  }
+  scope: any
+}>()
+
+const emit = defineEmits<{
+  (e: 'edit'): void
+  (e: 'delete'): void
+  (e: 'rowPinToTop'): void
+}>()
+
+const operationPopoverRef = ref(null as any)
+
+defineExpose({
+  doClose: () => operationPopoverRef.value?.doClose?.()
+})
+</script>

package/src/components/EditableTable/index.vue

@@ -168,49 +168,22 @@
           v-if="column.prop === '$$operation'"
           #default="scope"
         >
-          <el-popover
+          <biz-table-operate-popover
             v-if="editingRowIndex !== scope.$index"
             ref="operationPopoverRef"
-            placement="bottom"
-            trigger="click"
-            popper-class="operation-popover"
+            :default-operations="defaultOperations"
+            :hovering-cell-info="hoveringCellInfo"
+            :scope="scope"
+            @edit="() => handleEdit(scope)"
+            @delete="() => handleDelete(scope.row, scope.$index)"
+            @rowPinToTop="() => handleRowPinToTop(scope)"
           >
-            <div
-              slot="reference"
-              class="operation-popover__operation-reference btn-pointer"
-            >
-              <el-button :class="['operation-popover__operation-btn', hoveringCellInfo.rowIndex === scope.$index && 'operation-popover__operation-btn--active']">
-                操作
-              </el-button>
-            </div>
-            <div class="operation-popover__operation">
-              <div
-                v-if="defaultOperations.includes('delete')"
-                class="operation-popover__operation-item btn-pointer"
-                @click="handleDelete(scope.row, scope.$index)"
-              >
-                删除
-              </div>
-              <div
-                v-if="defaultOperations.includes('edit')"
-                class="operation-popover__operation-item btn-pointer"
-                @click="handleEdit(scope)"
-              >
-                编辑
-              </div>
-              <div
-                v-if="defaultOperations.includes('top')"
-                class="operation-popover__operation-item btn-pointer"
-                @click="handleRowPinToTop(scope)"
-              >
-                置顶
-              </div>
-              <slot
-                name="custom-operation"
-                v-bind="scope"
-              />
-            </div>
-          </el-popover>
+            <slot
+              name="custom-operation"
+              v-bind="scope"
+            />
+          </biz-table-operate-popover>
+
           <div
             v-else
             class="operation-popover__save-cancel"
@@ -328,6 +301,7 @@ import BizColorSelect from './features/bizColorSelect.vue';
 import BizViewSettingDialog from './features/bizViewSettingDialog.vue'
 import BizTableHeaderPopover from './features/bizTableHeaderPopover.vue'
 import BizEditCell from './features/bizEditCell.vue'
+import BizTableOperatePopover from './features/bizTableOperatePopover.vue'
 
 import { computed, nextTick, ref, watch } from 'vue';
 import { Message } from 'element-ui';