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

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

@@ -0,0 +1,137 @@
+<template>
+  <el-dialog
+    title="显示设置"
+    :visible.sync="viewSettingVisible"
+    width="750px"
+    top="12vh"
+    :close-on-click-modal="false"
+    append-to-body
+    custom-class="view-setting__dialog"
+  >
+    <div class="view-setting__content">
+      <div class="view-setting__content-left">
+        <div class="view-setting__checkbox-wrapper">
+          <el-checkbox-group v-model="columnsToBeShown">
+            <el-checkbox
+              v-for="item in props.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>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue';
+import { useViewSetting } from '../bizHooks'
+import { IColumnConfig, IProps } from '../types';
+
+const emit = defineEmits<{
+  (e: 'update:leftFixedColumnCount', val: number): void
+  (e: 'update:showingColumns', val: string[]): void
+  (e: 'update:viewSettingDragSortOptions', val: IColumnConfig[]): void
+  (e: 'tableDoLayout'): void
+}>()
+
+const _props = defineProps<{
+  actualColumns: IColumnConfig[]
+  viewSettingDragSortOptions: IColumnConfig[]
+  showingColumns: string[]
+  props: IProps
+}>()
+
+const {
+  actualColumns,
+  showingColumns,
+  viewSettingDragSortOptions,
+} = toRefs(_props)
+
+const {
+  columnsToBeShown,
+  viewSettingVisible,
+  tempLeftFixedColumnCount,
+  handleInputTempLeftFixedColumnCount,
+  handleViewSettingShow,
+  handleViewSettingClose,
+  handleViewSettingConfirm
+} = useViewSetting({
+  showingColumns,
+  actualColumns,
+  viewSettingDragSortOptions,
+  props: _props.props,
+  emit,
+});
+
+const handleColumnClose = (item) => {
+  if (item.isAlwaysShow) return;
+  columnsToBeShown.value = columnsToBeShown.value.filter(c => c !== item.prop);
+};
+
+defineExpose({
+  open: handleViewSettingShow
+})
+</script>