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

package/src/components/EditableTable/index.vue

@@ -16,93 +16,17 @@
         </div>
       </div>
 
-      <el-dialog
-        title="显示设置"
-        :visible.sync="viewSettingVisible"
-        width="750px"
-        top="12vh"
-        :close-on-click-modal="false"
-        :append-to-body="true"
-        custom-class="view-setting__dialog"
-      >
-        <div class="view-setting__content">
-          <div class="view-setting__content-left">
-            <!-- <div class="view-setting__content-left-title">
-              表头设置
-            </div> -->
-            <div class="view-setting__checkbox-wrapper">
-              <el-checkbox-group v-model="columnsToBeShown">
-                <el-checkbox
-                  v-for="item in columnConfig"
-                  :key="item.label"
-                  :label="item.prop"
-                  :disabled="item.isAlwaysShow"
-                >
-                  <div class="view-setting__content-left-item">
-                    {{ item.label }}
-                  </div>
-                </el-checkbox>
-              </el-checkbox-group>
-            </div>
-          </div>
-          <div class="view-setting__content-right">
-            <div class="view-setting__content-right-title">
-              已选择
-              <div class="view-setting__selected-count">
-                {{ columnsToBeShown.length }}
-              </div>
-            </div>
-            <div class="view-setting__content-right-frize">
-              冻结前
-              <el-input
-                class="view-setting__content-right-input"
-                :value="tempLeftFixedColumnCount"
-                @input="handleInputTempLeftFixedColumnCount"
-              />
-              列
-            </div>
-            <div class="view-setting__content-right-selected">
-              <div
-                v-for="(item, index) in viewSettingDragSortOptions"
-                :key="item.prop"
-                class="view-setting__selected-item view-setting-draggable-item"
-              >
-                <div class="view-setting__selected-item-left">
-                  <div
-                    class="view-setting-drag-target view-setting__icon-wrapper"
-                    :data-index="index"
-                  >
-                    <div
-                      class="view-setting-drag-target editable-table-drag-icon"
-                      :data-index="index"
-                    />
-                  </div>
-                  <div class="view-setting__selected-item-name">
-                    {{ item.label }}
-                  </div>
-                </div>
-                <div
-                  :class="['view-setting__selected-item-close', item.isAlwaysShow ? 'view-setting__selected-item-close--disabled' : '']"
-                  @click="handleColumnClose(item)"
-                >
-                  <i class="el-icon-close" />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <template #footer>
-          <el-button @click="handleViewSettingClose">
-            取消
-          </el-button>
-          <el-button
-            type="primary"
-            @click="handleViewSettingConfirm"
-          >
-            确认
-          </el-button>
-        </template>
-      </el-dialog>
+      <biz-view-setting-dialog
+        ref="bizViewSettingDialogRef"
+        :props="props"
+        :actual-columns="actualColumns"
+        :showing-columns="showingColumns"
+        :view-setting-drag-sort-options="viewSettingDragSortOptions"
+        @update:leftFixedColumnCount="(val) => { leftFixedColumnCount = val }"
+        @update:showingColumns="(val) => { showingColumns = val }"
+        @update:viewSettingDragSortOptions="(val) => { viewSettingDragSortOptions = val }"
+        @tableDoLayout="doTableLayout"
+      />
     </div>
 
     <!-- 列表展示，属性透传，列编辑 -->
@@ -125,7 +49,7 @@
         v-if="rowDragAble"
         width="30px"
         class-name="editable-table__drag-cell no-inner-cell-border"
-        :fixed="leftFixedColumnCount > 0 ? 'left' : ''"
+        :fixed="leftFixedColumnCount > 0 ? 'left' : false"
       >
         <template #default="scope">
           <div
@@ -145,7 +69,7 @@
         v-if="hasExpandRow"
         width="30px"
         type="expand"
-        :fixed="leftFixedColumnCount > 0 ? 'left' : ''"
+        :fixed="leftFixedColumnCount > 0 ? 'left' : false"
         class-name="no-inner-cell-border"
       >
         <template #default="scope">
@@ -161,7 +85,7 @@
         width="45px"
         align="center"
         type="selection"
-        :fixed="leftFixedColumnCount > 0 ? 'left' : ''"
+        :fixed="leftFixedColumnCount > 0 ? 'left' : false"
         class-name="no-inner-cell-border"
       />
       <!-- 编号列 -->
@@ -169,7 +93,7 @@
         v-if="hasIndexColumn"
         min-width="30px"
         type="index"
-        :fixed="leftFixedColumnCount > 0 ? 'left' : ''"
+        :fixed="leftFixedColumnCount > 0 ? 'left' : false"
         class-name="no-inner-cell-border"
       />
       <!-- 颜色选择列 -->
@@ -177,13 +101,13 @@
         v-if="colorList && colorList.length > 0"
         width="22px"
         class-name="editable-table__color-column no-inner-cell-border"
-        :fixed="leftFixedColumnCount > 0 ? 'left' : ''"
+        :fixed="leftFixedColumnCount > 0 ? 'left' : false"
       >
         <template #header>
           <div class="editable-table__color-icon" />
         </template>
         <template #default="scope">
-          <view-color-select
+          <biz-color-select
             :color-list="colorList"
             :scope="scope"
             @row-bg-change="(params) => emit('row-bg-change', params)"
@@ -203,217 +127,63 @@
           v-if="showColumnHeadSortIcon(column)"
           #header="scope"
         >
-          <el-popover
+          <biz-table-header-popover
             ref="sortFilterPopoverRef"
-            placement="bottom"
-            trigger="click"
-            popper-class="editable-table__sort-filter"
-            :data-prop="column.prop"
-            @show="handleHeaderPopoverShow(column)"
+            :head-active="isColumnHeadActive(column)"
+            :column="column"
+            :showing-columns="showingColumns"
+            :temp-summary-list="tempSummaryList"
+            :temp-sorting-column="tempSortingColumn"
+            :temp-sort-type="tempSortType"
+            :temp-filtered-value="tempFilteredValue"
+            :temp-search-value="tempSearchValue"
+            @update:tempSummaryList="val => { tempSummaryList = val }"
+            @update:tempFilteredValue="(key, value) => { tempFilteredValue[key] = value }"
+            @update:tempSearchValue="(key, value) => { tempSearchValue[key] = value }"
+            @popover-show="() => handleHeaderPopoverShow(column)"
+            @update:sort="(type) => handleSort(type, column)"
+            @reset="() => handleHeaderOperationReset(column, scope)"
+            @confirm="() => handleHeaderOperationConfirm(column, scope)"
           >
-            <template slot="reference">
-              <!-- 筛选中，或排序中，高亮 -->
-              <span :class="['editable-table__sort-reference', isColumnHeadActive(column) && 'editable-table__sort-reference--active']">
-                {{ column.label }}
-                <div :class="['editable-table__sort-icon', isColumnHeadActive(column) && 'editable-table__sort-icon--active']" />
-              </span>
-            </template>
-            <div class="sort-filter">
-              <div class="sort-filter__column-title">
-                {{ column.label }}
-              </div>
-              <div
-                v-if="column.isColumnSortable"
-                class="sort-filter__sort"
-              >
-                <div class="sort-filter__sort-title">
-                  排序
-                </div>
-                <div class="sort-filter__sort-btns">
-                  <el-button
-                    :class="['sort-filter__sort-btn', tempSortingColumn?.prop === column.prop && tempSortType === 'ascending' && 'sort-filter__sort-btn--active']"
-                    @click="handleSort('ascending', column)"
-                  >
-                    升序
-                  </el-button>
-                  <el-button
-                    :class="['sort-filter__sort-btn', tempSortingColumn?.prop === column.prop && tempSortType === 'descending' && 'sort-filter__sort-btn--active']"
-                    @click="handleSort('descending', column)"
-                  >
-                    降序
-                  </el-button>
-                </div>
-              </div>
-              <div
-                v-if="column.search && !Array.isArray(column.search)"
-                class="sort-filter__search"
-              >
-                <div class="sort-filter__search-title">
-                  搜索
-                </div>
-                <el-input
-                  v-model.trim="tempSearchValue[column.prop]"
-                  class="sort-filter__search-input"
-                  placeholder="请输入内容"
-                />
-              </div>
-
-              <div
-                v-if="column.search && Array.isArray(column.search)"
-                class="sort-filter__search"
-                style="display: flex;flex-direction: column;gap: 12px;"
-              >
-                <div
-                  v-for="item in column.search"
-                  :key="item.prop"
-                >
-                  <div class="sort-filter__search-title">
-                    {{ item.label }}
-                  </div>
-                  <el-input
-                    v-model.trim="tempSearchValue[item.prop]"
-                    class="sort-filter__search-input"
-                    placeholder="请输入内容"
-                  />
-                </div>
-              </div>
-
-              <div
-                v-if="column.filters && ((Array.isArray(column.filters) ? column.filters : column.filters.options).length > 0)"
-                class="sort-filter__filter"
+            <template #filter-item="item">
+              <slot
+                :name="column.prop + '-filter-item'"
+                v-bind="item"
               >
-                <div class="sort-filter__filter-title">
-                  筛选
-                </div>
-                <el-checkbox-group
-                  v-if="column.filters && (Array.isArray(column.filters) || column.filters.type === 'checkbox')"
-                  v-model="tempFilteredValue[column.prop]"
-                  class="sort-filter__filter-checkbox-group"
-                >
-                  <el-checkbox
-                    v-for="item in (Array.isArray(column.filters) ? column.filters : column.filters.options)"
-                    :key="item.value"
-                    :label="item.value"
-                    class="sort-filter__filter-checkbox"
-                  >
-                    <slot
-                      :name="column.prop + '-filter-item'"
-                      v-bind="item"
-                    >
-                      {{ item.text }}
-                    </slot>
-                  </el-checkbox>
-                </el-checkbox-group>
-
-                <el-radio-group
-                  v-if="column.filters && !Array.isArray(column.filters) && column.filters.type === 'radio'"
-                  v-model="tempFilteredValue[column.prop]"
-                  style="display: flex;flex-direction: column;gap: 6px;"
-                >
-                  <el-radio
-                    v-for="item in column.filters.options"
-                    :key="item.value"
-                    :label="item.value"
-                  >
-                    <slot
-                      :name="column.prop + '-filter-item'"
-                      v-bind="item"
-                    >
-                      {{ item.text }}
-                    </slot>
-                  </el-radio>
-                </el-radio-group>
-              </div>
-              <div
-                v-if="column.summary"
-                class="sort-filter__filter"
+                {{ item.text }}
+              </slot>
+            </template>
+            <template #summay-item>
+              <slot
+                :name="column.prop + '-summay-item'"
+                v-bind="column"
               >
-                <div class="sort-filter__filter-title">
-                  统计
-                </div>
-                <el-checkbox-group
-                  v-model="tempSummaryList"
-                  class="sort-filter__filter-checkbox-group"
-                >
-                  <el-checkbox
-                    :label="column.prop"
-                    class="sort-filter__filter-checkbox"
-                  >
-                    <slot
-                      :name="column.prop + '-summay-item'"
-                      v-bind="column"
-                    >
-                      {{ column.label }}
-                    </slot>
-                  </el-checkbox>
-                </el-checkbox-group>
-              </div>
-              <div class="sort-filter__footer">
-                <el-button
-                  class="sort-filter__reset-btn"
-                  @click="handleHeaderOperationReset(column, scope)"
-                >
-                  重置
-                </el-button>
-                <el-button
-                  class="sort-filter__confirm-btn"
-                  type="primary"
-                  @click="handleHeaderOperationConfirm(column, scope)"
-                >
-                  确定
-                </el-button>
-              </div>
-            </div>
-          </el-popover>
+                {{ column.label }}
+              </slot>
+            </template>
+          </biz-table-header-popover>
         </template>
         <!-- 默认操作按钮，defaultOperations属性不为空数组时展示。编辑状态下隐藏 -->
         <template
           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"
@@ -453,30 +223,11 @@
               :name="column.editSlotName"
             />
             <!-- 内置编辑类型 -->
-            <div v-else-if="column.editType">
-              <div v-if="column.editType === 'input'">
-                <el-input
-                  v-model="editingRowData[column.prop]"
-                  clearable
-                />
-              </div>
-              <div v-if="column.editType === 'select'">
-                <el-select v-model="editingRowData[column.prop]">
-                  <el-option
-                    v-for="item in column.selectOptions"
-                    :key="item.label"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
-              </div>
-              <el-date-picker
-                v-if="column.editType === 'date'"
-                v-model="editingRowData[column.prop]"
-                type="date"
-                placeholder="选择日期"
-              />
-            </div>
+            <biz-edit-cell
+              v-else-if="column.editType"
+              v-model="editingRowData[column.prop]"
+              :column="column"
+            />
             <!-- 不支持编辑 -->
             <slot
               v-else
@@ -491,32 +242,11 @@
           #default="scope"
         >
           <!-- 当前行编辑中，内置编辑类型 -->
-          <template v-if="editingRowIndex === scope.$index && column.editType">
-            <div v-if="column.editType === 'input'">
-              <el-input
-                v-model="editingRowData[column.prop]"
-                clearable
-                type="text"
-              />
-            </div>
-            <div v-if="column.editType === 'select'">
-              <el-select v-model="editingRowData[column.prop]">
-                <el-option
-                  v-for="item in column.selectOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-            </div>
-            <div v-if="column.editType === 'date'">
-              <el-date-picker
-                v-model="editingRowData[column.prop]"
-                type="date"
-                placeholder="选择日期"
-              />
-            </div>
-          </template>
+          <biz-edit-cell
+            v-if="editingRowIndex === scope.$index && column.editType"
+            v-model="editingRowData[column.prop]"
+            :column="column"
+          />
           <!-- 当前行编辑中，自定义编辑类型 -->
           <slot
             v-else-if="column.editSlotName && scope.$index === editingRowIndex"
@@ -567,17 +297,24 @@
 </template>
 
 <script lang="ts" setup>
-import ViewColorSelect from './viewColorSelect.vue';
+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';
-import usePagination from './usePagination';
-import useCellHover from './useCellHover';
-import useViewSetting from './useViewSetting';
-import useRowBgColor from './useRowBgColor';
-import useDefaultOperation from './useDefaultOperation';
-import useColumnHeaderOperation from './useColumnHeaderOperation';
-import useDragSort from './useDragSort';
+
+import {
+  usePagination,
+  useCellHover,
+  useRowBgColor,
+  useDefaultOperation,
+  useColumnHeaderOperation,
+  useDragSort,
+} from './bizHooks'
+
 import { ITableDataItem, IColumnConfig, IDefaultOperationType, IColorList } from './types';
 
 // defineProps泛型参数如果从外部传入，编译报错
@@ -667,6 +404,8 @@ const props = withDefaults(defineProps<IProps>(), {
 const emit = defineEmits<IEmits>();
 
 const showingColumns = ref<string[]>([]); // 表格中实际展示的列
+const leftFixedColumnCount = ref(0) // 左侧固定列数量
+const viewSettingDragSortOptions = ref<IColumnConfig[]>([])
 
 const actualColumns = computed(() => {
   const res: IColumnConfig[] = [];
@@ -754,24 +493,6 @@ const {
   hasExpandRow: props.hasExpandRow
 });
 
-/************ 显示设置相关 ************ */
-const {
-  viewSettingDragSortOptions,
-  columnsToBeShown,
-  viewSettingVisible,
-  leftFixedColumnCount,
-  tempLeftFixedColumnCount,
-  handleInputTempLeftFixedColumnCount,
-  handleViewSettingShow,
-  handleViewSettingClose,
-  handleViewSettingConfirm
-} = useViewSetting({
-  tableDomRef,
-  showingColumns,
-  actualColumns,
-  props
-});
-
 /************ 列头部操作相关 ************ */
 const {
   setSort,
@@ -856,10 +577,8 @@ const handleSelectionChange = (e) => {
   emit('selection-change', e);
 };
 
-const handleColumnClose = (item) => {
-  if (item.isAlwaysShow) return;
-  columnsToBeShown.value = columnsToBeShown.value.filter(c => c !== item.prop);
-};
+const bizViewSettingDialogRef = ref(null as unknown as InstanceType<typeof BizViewSettingDialog>)
+const handleViewSettingShow = () => bizViewSettingDialogRef.value.open()
 
 defineExpose({
   closeAllExpandedRows,