🔨 排序字段.

orion-visor-ui/src/components/app/table-adjust/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <a-button-group v-if="columnsHook || queryOrder">
+    <!-- 调整列 -->
+    <a-popover v-if="columnsHook && columns"
+               class="table-adjust-popover"
+               position="br"
+               trigger="click"
+               :content-style="{ padding: 0 }"
+               @popup-visible-change="columnsVisibleChanged">
+      <!-- 触发按钮 -->
+      <a-button title="调整列">
+        <template #icon>
+          <icon-list />
+        </template>
+      </a-button>
+      <!-- 调整内容 -->
+      <template #content>
+        <!-- 顶部按钮 -->
+        <div class="table-adjust-popover-header">
+          <span class="table-adjust-title">
+            表格展示列
+          </span>
+          <a-button type="text"
+                    size="mini"
+                    @click="resetColumns">
+            重置
+          </a-button>
+        </div>
+        <!-- 分隔符 -->
+        <a-divider :margin="4" />
+        <!-- 列信息 -->
+        <a-checkbox-group v-model="columnsValue"
+                          direction="vertical"
+                          @change="columnsChanged">
+          <a-checkbox v-for="column in columns"
+                      :key="column.dataIndex || column.slotName"
+                      :value="column.dataIndex || column.slotName">
+            {{ column.title }}
+          </a-checkbox>
+        </a-checkbox-group>
+      </template>
+    </a-popover>
+    <!-- 调整排序 -->
+    <a-popover v-if="queryOrder"
+               class="table-adjust-popover"
+               position="br"
+               trigger="click"
+               :content-style="{ padding: 0 }"
+               @popup-visible-change="sortVisibleChanged">
+      <!-- 触发按钮 -->
+      <a-button title="调整排序">
+        <template #icon>
+          <icon-sort-ascending />
+        </template>
+      </a-button>
+      <!-- 调整内容 -->
+      <template #content>
+        <!-- 顶部按钮 -->
+        <div class="table-adjust-popover-header">
+          <span class="table-adjust-title">
+            表格查询排序
+          </span>
+        </div>
+        <!-- 分隔符 -->
+        <a-divider :margin="4" />
+        <!-- 列信息 -->
+        <a-radio-group v-model="orderValue"
+                       direction="vertical"
+                       @change="sortChanged">
+          <a-radio :value="ASC">
+            升序排序
+          </a-radio>
+          <a-radio :value="DESC">
+            降序排序
+          </a-radio>
+        </a-radio-group>
+      </template>
+    </a-popover>
+  </a-button-group>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'tableAdjust'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { TableColumnData } from '@arco-design/web-vue';
+  import type { TableColumnsHook } from '@/hooks/table';
+  import type { QueryOrderData } from '@/hooks/query-order';
+  import { ref } from 'vue';
+  import { ASC, DESC } from '@/hooks/query-order';
+
+  const emits = defineEmits(['query']);
+
+  const props = defineProps<Partial<{
+    columns: Array<TableColumnData>;
+    columnsHook: TableColumnsHook;
+    queryOrder: QueryOrderData;
+  }>>();
+
+  const columnsValue = ref<Array<string>>([]);
+  const orderValue = ref<number>(ASC);
+
+  // 列显示切换
+  const columnsVisibleChanged = (show: boolean) => {
+    if (show && props.columnsHook) {
+      columnsValue.value = props.columnsHook.getConfig();
+    }
+  };
+
+  // 排序显示切换
+  const sortVisibleChanged = (show: boolean) => {
+    if (show && props.queryOrder) {
+      orderValue.value = props.queryOrder.order.value;
+    }
+  };
+
+  // 重置列
+  const resetColumns = () => {
+    if (props.columnsHook) {
+      props.columnsHook.saveConfig(undefined);
+      columnsValue.value = props.columnsHook.getConfig();
+    }
+  };
+
+  // 修改列
+  const columnsChanged = () => {
+    props.columnsHook?.saveConfig(columnsValue.value);
+  };
+
+  // 修改排序
+  const sortChanged = () => {
+    props.queryOrder?.saveConfig(orderValue.value);
+    emits('query');
+  };
+
+</script>
+
+<style lang="less" scoped>
+</style>

orion-visor-ui/src/components/view/card-list/components/card-field-adjust.vue

@@ -0,0 +1,78 @@
+<template>
+  <!-- 调整字段 -->
+  <a-popover class="table-adjust-popover"
+             position="br"
+             trigger="click"
+             :content-style="{ padding: 0 }"
+             @popup-visible-change="visibleChanged">
+    <!-- 触发按钮 -->
+    <a-button class="icon-button card-header-icon-button" title="调整字段">
+      <icon-list />
+    </a-button>
+    <!-- 调整内容 -->
+    <template #content>
+      <!-- 顶部按钮 -->
+      <div class="table-adjust-popover-header">
+        <span class="table-adjust-title">
+          表格展示字段
+        </span>
+        <a-button type="text"
+                  size="mini"
+                  @click="resetFields">
+          重置
+        </a-button>
+      </div>
+      <!-- 分隔符 -->
+      <a-divider :margin="4" />
+      <!-- 列信息 -->
+      <a-checkbox-group v-model="fieldsValue"
+                        direction="vertical"
+                        @change="fieldsChanged">
+        <a-checkbox v-for="field in fieldsHook.originFields"
+                    :key="field.dataIndex || field.slotName"
+                    :value="field.dataIndex || field.slotName">
+          {{ field.label }}
+        </a-checkbox>
+      </a-checkbox-group>
+    </template>
+  </a-popover>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'cardFieldAdjust'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { CardFieldsHook } from '@/hooks/card';
+  import { ref } from 'vue';
+
+  const props = defineProps<{
+    fieldsHook: CardFieldsHook;
+  }>();
+
+  const fieldsValue = ref<Array<string>>([]);
+
+  // 列显示切换
+  const visibleChanged = (show: boolean) => {
+    if (show) {
+      fieldsValue.value = props.fieldsHook.getConfig();
+    }
+  };
+
+  // 重置字段
+  const resetFields = () => {
+    props.fieldsHook.saveConfig(undefined);
+    fieldsValue.value = props.fieldsHook.getConfig();
+  };
+
+  // 修改字段
+  const fieldsChanged = () => {
+    props.fieldsHook.saveConfig(fieldsValue.value);
+  };
+
+</script>
+
+<style lang="less" scoped>
+</style>

orion-visor-ui/src/components/view/card-list/components/card-header.vue

@@ -90,6 +90,13 @@
                       @click="bubblesEmitter(HeaderEmitter.RESET)">
               <icon-refresh />
             </a-button>
+            <!-- 调整字段 -->
+            <card-field-adjust v-if="fieldsHook"
+                               :fields-hook="fieldsHook" />
+            <!-- 调整排序 -->
+            <card-sort-adjust v-if="queryOrder"
+                              :query-order="queryOrder"
+                              @query="bubblesEmitter(HeaderEmitter.SEARCH)" />
           </a-space>
         </div>
       </div>
@@ -110,13 +117,14 @@
   import { triggerMouseEvent } from '@/utils/event';
   import { HeaderEmitter } from '../types/emits';
   import useEmitter from '@/hooks/emitter';
+  import CardFieldAdjust from './card-field-adjust.vue';
+  import CardSortAdjust from './card-sort-adjust.vue';
 
   const props = defineProps<CardProps>();
   const emits = defineEmits(['emitter']);
 
-  const { bubblesEmitter } = useEmitter(emits);
-
   const appStore = useAppStore();
+  const { bubblesEmitter } = useEmitter(emits);
 
   const filterRef = ref();
 

orion-visor-ui/src/components/view/card-list/components/card-sort-adjust.vue

@@ -0,0 +1,72 @@
+<template>
+  <!-- 调整排序 -->
+  <a-popover class="table-adjust-popover"
+             position="br"
+             trigger="click"
+             :content-style="{ padding: 0 }"
+             @popup-visible-change="visibleChanged">
+    <!-- 触发按钮 -->
+    <a-button class="icon-button card-header-icon-button" title="调整排序">
+      <icon-sort-ascending />
+    </a-button>
+    <!-- 调整内容 -->
+    <template #content>
+      <!-- 顶部按钮 -->
+      <div class="table-adjust-popover-header">
+        <span class="table-adjust-title">
+          表格查询排序
+        </span>
+      </div>
+      <!-- 分隔符 -->
+      <a-divider :margin="4" />
+      <!-- 排序信息 -->
+      <a-radio-group v-model="orderValue"
+                     direction="vertical"
+                     @change="sortChanged">
+        <a-radio :value="ASC">
+          升序排序
+        </a-radio>
+        <a-radio :value="DESC">
+          降序排序
+        </a-radio>
+      </a-radio-group>
+    </template>
+  </a-popover>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'cardSortAdjust'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { QueryOrderData } from '@/hooks/query-order';
+  import { ref } from 'vue';
+  import { ASC, DESC } from '@/hooks/query-order';
+
+  const emits = defineEmits(['query']);
+
+  const props = defineProps<{
+    queryOrder: QueryOrderData;
+  }>();
+
+  const orderValue = ref<number>(ASC);
+
+  // 排序显示切换
+  const visibleChanged = (show: boolean) => {
+    if (show) {
+      orderValue.value = props.queryOrder.order.value;
+    }
+  };
+
+  // 修改排序
+  const sortChanged = () => {
+    props.queryOrder.saveConfig(orderValue.value);
+    emits('query');
+  };
+
+</script>
+
+<style lang="less" scoped>
+</style>

orion-visor-ui/src/components/view/card-list/index.vue

@@ -80,12 +80,12 @@
 </script>
 
 <script lang="ts" setup>
+  import type { CardProps } from './types/props';
+  import { Emitter } from './types/emits';
+  import useEmitter from '@/hooks/emitter';
   import CreateCard from './components/create-card.vue';
   import CardHeader from './components/card-header.vue';
   import CardItem from './components/card-item.vue';
-  import { Emitter } from './types/emits';
-  import { CardProps } from './types/props';
-  import useEmitter from '@/hooks/emitter';
 
   const props = withDefaults(defineProps<CardProps>(), {
     rowKey: 'id',

orion-visor-ui/src/components/view/card-list/types/props.ts

@@ -1,5 +1,7 @@
 import type { CSSProperties } from 'vue';
 import type { PaginationProps, ResponsiveValue } from '@arco-design/web-vue';
+import type { CardFieldsHook } from '@/hooks/card';
+import type { QueryOrderData } from '@/hooks/query-order';
 import type { CardFieldConfig, CardPosition, CardRecord, ColResponsiveValue, HandleVisible } from '@/types/card';
 
 // 卡片属性
@@ -19,7 +21,9 @@ export interface CardProps {
   createCardDescription?: string;
   createCardPosition?: CardPosition;
   addPermission?: Array<string>;
-  cardLayoutGutter?: Number | ResponsiveValue | Array<Number> | Array<ResponsiveValue>;
+  fieldsHook?: CardFieldsHook;
+  queryOrder?: QueryOrderData;
+  cardLayoutGutter?: number | ResponsiveValue | Array<number> | Array<ResponsiveValue>;
   cardLayoutCols?: ColResponsiveValue;
   handleVisible?: HandleVisible;
   list?: Array<CardRecord>;