feat: 列设置支持自定义样式

fast-crud · Aug 7, 2023 · df86e04 · df86e04
1 parent f4ca5c1
commit df86e04
Show file tree

Hide file tree

Showing 10 changed files with 143 additions and 138 deletions.
diff --git a/docs/zh/api/crud-options/toolbar.md b/docs/zh/api/crud-options/toolbar.md
@@ -117,3 +117,10 @@ crudBinding.value.toolbar.columnsFilter.originalColumns[2].columnSetShow = false
 crudBinding.value.toolbar.columnsFilter.originalColumns[2].columnSetDisabled = true
 
 ```
+
+## columnsFilter.container
+* 说明：自定义列设置布局
+* 类型：`{is：string|ShallowRef}`
+* 默认值： `{is:"fs-columns-filter-layout-default"}`
+* 布局参考： [fs-columns-filter-layout-default](https://github.com/fast-crud/fast-crud/blob/main/packages/fast-crud/src/components/toolbar/fs-table-columns-filter/fs-columns-filter-layout-default.vue)
+* 关键： 通过 `inject(ColumnsFilterProvideKey)`获取 `ColumnsFilterContext`, 修改currentColumns内每个列的show值即可
diff --git a/docs/zh/guide/advance/layout.md b/docs/zh/guide/advance/layout.md
@@ -108,3 +108,22 @@ const crudOptions = {
     }
 }
 ```
+
+
+# 列设置自定义布局
+配置 `toolbar.columnsFilter.container.is=xxxxxxx` 可以自定义列设置组件布局容器（使用方法同上）
+
+* 默认布局：`fs-columns-filter-layout-default`
+* 参考：[fs-columns-filter-layout-default源码](https://github.com/fast-crud/fast-crud/blob/main/packages/fast-crud/src/components/toolbar/fs-table-columns-filter/fs-columns-filter-layout-default.vue)
+
+```js
+const crudOptions = {
+    toolbar:{
+        columnsFilter:{
+            container:{
+                is:'your-custom-layout-component-name',
+            },
+        }
+    }
+}
+```
diff --git a/packages/fast-admin/fs-admin-element b/packages/fast-admin/fs-admin-element
diff --git a/packages/fast-admin/fs-admin-naive-ui b/packages/fast-admin/fs-admin-naive-ui
diff --git a/...-crud/src/components/toolbar/fs-table-columns-filter/fs-columns-filter-layout-default.vue b/...-crud/src/components/toolbar/fs-table-columns-filter/fs-columns-filter-layout-default.vue
@@ -1,68 +1,91 @@
 <template>
-  <div class="fs-columns-filter-layout-default">
-    <component :is="ui.card.name" shadow="never">
-      <div class="component--list">
-        <div key="__first__" class="component--list-item" flex="main:justify cross:center">
-          <span :span="12">
-            <!-- 全选 反选 -->
-            <component :is="ui.checkbox.name" :indeterminate="isIndeterminate" v-bind="checkAllBind">
-              {{ showLength }} / {{ allLength }}
-            </component>
-          </span>
-          <span class="title">{{ _text.fixed }} / {{ _text.order }}</span>
-        </div>
+  <component
+    :is="ui.drawer.name"
+    class="fs-columns-filter-layout-default"
+    :title="text.title"
+    v-bind="drawerBind"
+    append-to-body
+  >
+    <component
+      :is="ui.drawer.hasContentWrap || 'div'"
+      class="fs-drawer-wrapper fs-table-columns-filter"
+      :title="text.title"
+    >
+      <component :is="ui.card.name" shadow="never">
+        <div class="component--list">
+          <div key="__first__" class="component--list-item" flex="main:justify cross:center">
+            <span :span="12">
+              <!-- 全选 反选 -->
+              <component :is="ui.checkbox.name" :indeterminate="isIndeterminate" v-bind="checkAllBind">
+                {{ showLength }} / {{ allLength }}
+              </component>
+            </span>
+            <span class="title">{{ text.fixed }} / {{ text.order }}</span>
+          </div>
 
-        <draggable v-model="currentColumns" item-key="key" :move="onDraggableMove">
-          <template #item="{ element, index }">
-            <div
-              v-show="original[element.key]?.__show !== false"
-              :title="buildText(element)"
-              class="component--list-item"
-              flex="main:justify cross:center"
-              :i="index"
-            >
-              <component
-                :is="ui.checkbox.name"
-                v-model:[ui.checkbox.modelValue]="element.show"
-                :disabled="original[element.key]?.__disabled === true"
-                class="item-label"
+          <draggable v-model="currentColumns" item-key="key" :move="onDraggableMove">
+            <template #item="{ element, index }">
+              <div
+                v-show="originalColumns[element.key]?.__show !== false"
                 :title="buildText(element)"
-                @change="allCheckedUpdate"
+                class="component--list-item"
+                flex="main:justify cross:center"
+                :i="index"
               >
-                {{ buildText(element) }}
-              </component>
-              <div class="item-right">
-                <fs-table-columns-fixed-controller
-                  v-model="element.fixed"
-                  flex-box="0"
-                  class="d2-mr-10"
-                  @change="fixedChange(index, $event)"
-                />
-                <div flex-box="0" class="component--list-item-handle handle">
-                  <fs-icon :icon="ui.icons.sort" />
+                <component
+                  :is="ui.checkbox.name"
+                  v-model:[ui.checkbox.modelValue]="element.show"
+                  :disabled="originalColumns[element.key]?.__disabled === true"
+                  class="item-label"
+                  :title="buildText(element)"
+                  @change="allCheckedUpdate"
+                >
+                  {{ buildText(element) }}
+                </component>
+                <div class="item-right">
+                  <fs-table-columns-fixed-controller
+                    v-model="element.fixed"
+                    flex-box="0"
+                    class="d2-mr-10"
+                    @change="fixedChange(index, $event)"
+                  />
+                  <div flex-box="0" class="component--list-item-handle handle">
+                    <fs-icon :icon="ui.icons.sort" />
+                  </div>
                 </div>
               </div>
-            </div>
-          </template>
-        </draggable>
-      </div>
+            </template>
+          </draggable>
+        </div>
+      </component>
+      <slot name="buttons"></slot>
     </component>
-  </div>
+  </component>
 </template>
 
 <script lang="ts" setup>
 //不要删
+//@ts-ignore
 import draggable from "vuedraggable-es";
 import FsTableColumnsFixedController from "./fs-table-columns-fixed-controller/index.vue";
 import { useUi } from "../../../use";
-import { computed, inject, ref, Ref, watch } from "vue";
-import { ColumnsFilterItem, ColumnsFilterProvideKey } from "./fs-columns-filter-types";
+import { computed, inject, ref, watch } from "vue";
+import { ColumnsFilterItem, ColumnsFilterProvideKey, ColumnsFilterContext } from "../../../d/";
 
 const { ui } = useUi();
 
-const { original, currentColumns, _text } = inject<{ original: Ref; currentColumns: Ref; _text: Ref }>(
-  ColumnsFilterProvideKey
-);
+const { originalColumns, currentColumns, text, active } = inject<ColumnsFilterContext>(ColumnsFilterProvideKey);
+
+const drawerBind = computed(() => {
+  return {
+    [ui.drawer.visible]: active.value,
+    ["onUpdate:" + ui.drawer.visible]: (e: any) => {
+      active.value = e;
+    },
+    [ui.drawer.width]: "300px"
+  };
+});
+
 const checkAll = ref(false);
 // 全选和反选发生变化时触发
 function onCheckAllChange(value: any) {
@@ -159,7 +182,7 @@ function allCheckedUpdate() {
 }
 
 function buildText(element: any) {
-  return element.label || element.title || element.key || _text.value.unnamed;
+  return element.label || element.title || element.key || text.value.unnamed;
 }
 </script>
 

diff --git a/packages/fast-crud/src/components/toolbar/fs-table-columns-filter/fs-columns-filter-types.ts b/packages/fast-crud/src/components/toolbar/fs-table-columns-filter/fs-columns-filter-types.ts
diff --git a/packages/fast-crud/src/components/toolbar/fs-table-columns-filter/index.vue b/packages/fast-crud/src/components/toolbar/fs-table-columns-filter/index.vue
@@ -34,15 +34,9 @@
     </component>
   </template>
   <!-- 完全模式 -->
-  <component :is="ui.drawer.name" v-else :title="_text.title" v-bind="drawerBind" append-to-body>
-    <component
-      :is="ui.drawer.hasContentWrap || 'div'"
-      class="fs-drawer-wrapper fs-table-columns-filter"
-      :title="_text.title"
-    >
-      <div class="fs-table-columns-filter-style">
-        <component :is="container?.is || 'fs-columns-filter-layout-default'" v-bind="container" />
-      </div>
+
+  <component :is="container?.is || 'fs-columns-filter-layout-default'" v-else v-bind="container">
+    <template #buttons>
       <component :is="ui.row.name" class="fs-drawer-footer" :gutter="10">
         <component :is="ui.col.name" :span="12">
           <fs-button :icon="ui.icons.refresh" :text="_text.reset" block @click="reset" />
@@ -51,7 +45,7 @@
           <fs-button type="primary" :icon="ui.icons.check" :text="_text.confirm" block @click="submit(false)" />
         </component>
       </component>
-    </component>
+    </template>
   </component>
 </template>
 
@@ -62,16 +56,20 @@
 import _ from "lodash-es";
 import TableStore from "../../../utils/util.store";
 import { useI18n } from "../../../locale";
-import { computed, nextTick, ref, Ref, watch, provide } from "vue";
+import { computed, nextTick, provide, Ref, ref, watch } from "vue";
 import { uiContext } from "../../../ui";
 import { useMerge } from "../../../use/use-merge";
 import { useRoute } from "vue-router";
-import { ColumnProps, TableColumnsProps, TypeMap } from "../../../d";
-import type { ColumnsFilterProps, ColumnsFilterItem } from "./fs-columns-filter-types";
-import { ColumnsFilterProvideKey } from "./fs-columns-filter-types";
-const { cloneDeep } = useMerge();
-
-const props = withDefaults(defineProps<ColumnsFilterProps>(), {
+import {
+  ColumnProps,
+  ColumnsFilterItem,
+  ColumnsFilterProvideKey,
+  TableColumnsProps,
+  TypeMap,
+  ColumnsFilterComponentProps
+} from "../../../d";
+
+const props = withDefaults(defineProps<ColumnsFilterComponentProps>(), {
   storage: true,
   mode: "default"
 });
@@ -80,16 +78,6 @@ const emit = defineEmits(["update:columns", "update:show"]);
 const { t } = useI18n();
 const ui = uiContext.get();
 const active = ref(false);
-const drawerBind = computed(() => {
-  return {
-    [ui.drawer.visible]: active.value,
-    ["onUpdate:" + ui.drawer.visible]: (e: any) => {
-      active.value = e;
-    },
-    [ui.drawer.width]: "300px"
-  };
-});
-
 const start = () => {
   active.value = true;
 };
@@ -113,7 +101,7 @@ const _text = computed(() => {
   return def;
 });
 
-provide(ColumnsFilterProvideKey, { original, currentColumns, _text });
+provide(ColumnsFilterProvideKey, { originalColumns: original, currentColumns, text: _text, active });
 
 function buildColumnFilterItem(item: ColumnProps) {
   return {

diff --git a/packages/fast-crud/src/d/columns-filter.ts b/packages/fast-crud/src/d/columns-filter.ts
@@ -0,0 +1,19 @@
+import { Ref } from "vue";
+
+export type ColumnsFilterItem = {
+  key: string;
+  title: string;
+  fixed: boolean | string;
+  show: boolean;
+  __show: boolean;
+  __disabled: boolean;
+};
+
+export type ColumnsFilterContext = {
+  originalColumns: Ref;
+  currentColumns: Ref;
+  text: Ref;
+  active: Ref;
+};
+
+export const ColumnsFilterProvideKey = "ColumnsFilterContext";
diff --git a/packages/fast-crud/src/d/crud.ts b/packages/fast-crud/src/d/crud.ts
@@ -750,6 +750,13 @@ export type ContainerProps = {
 };
 
 export type ColumnsFilterComponentProps = {
+  /**
+   * 布局容器组件配置
+   */
+  container?: {
+    is?: string | ShallowRef;
+  };
+
   /**
    * 列配置组件名称
    */

diff --git a/packages/fast-crud/src/d/index.ts b/packages/fast-crud/src/d/index.ts
@@ -2,3 +2,4 @@ export * from "./expose";
 export * from "./crud";
 export * from "./compute";
 export * from "./fs";
+export * from "./columns-filter";