@skyfox2000/webui 0.1.0

package/src/components/content/table/index.vue

@@ -0,0 +1,215 @@
+<script lang="ts" setup>
+import { onMounted, Ref, ref, watch, provide, useAttrs, onActivated } from 'vue';
+import { Table, TablePaginationConfig, TableProps } from 'ant-design-vue';
+import {
+   gridQueryFind,
+   gridStatusUpdate,
+   PrimaryKey,
+   OPTIONS,
+   gridQueryList,
+   GridControl,
+   filterColumns,
+} from '@skyfox2000/webbase';
+import TableOperate from './tableOperate.vue';
+import Toolbar from '../toolbar/index.vue';
+import Switch from '../../form/switch/index.vue';
+import { AnyData } from '@skyfox2000/fapi';
+import { ProviderKeys } from '@skyfox2000/webbase';
+
+const props = defineProps<{
+   /**
+    * 表格数据控制
+    */
+   gridCtrl: GridControl<AnyData>;
+   /**
+    * 表格主键
+    */
+   primaryKey?: string;
+   /**
+    * 自定义表格数据
+    */
+   tableData?: Record<string, AnyData>[];
+   /**
+    * 自定义行选中处理
+    */
+   rowSelection?: TableProps['rowSelection'];
+   /**
+    * 自定义分页控制
+    */
+   pagination?: TableProps['pagination'];
+   /**
+    * 表格大小配置
+    */
+   scroll?: TableProps['scroll'];
+   /**
+    * 是否禁用启用状态
+    */
+   statusDisabled?: Function;
+}>();
+// 关闭自动继承属性到根元素
+defineOptions({
+   inheritAttrs: false,
+});
+const attrs = useAttrs(); // 手动获取 $attrs
+
+const gridCtrl = props.gridCtrl;
+
+if (gridCtrl) {
+   gridCtrl.pageNo.value = 1;
+   gridCtrl.total.value = 0;
+   gridCtrl.pageSize.value = gridCtrl.pageSize.value;
+}
+const curPageSize = ref(gridCtrl.pageSize.value);
+const curPageNo = ref(gridCtrl.pageNo.value);
+
+const dataList = ref<Record<string, AnyData>[]>([]);
+const pagination: Ref<TablePaginationConfig> = ref<TablePaginationConfig>({
+   ...{
+      total: 0,
+      current: 1,
+      pageSize: curPageSize.value,
+      showTotal: (total: number) => {
+         return `共 ${total} 条记录`;
+      },
+      onChange: (page: number, pageSize: number) => {
+         pagination.value.current = page;
+         pagination.value.pageSize = pageSize;
+         curPageSize.value = pageSize;
+         curPageNo.value = page;
+         if (gridCtrl) {
+            gridCtrl.pageNo.value = page;
+            gridCtrl.pageSize.value = pageSize;
+            if (gridCtrl.remotePage) gridQueryFind(gridCtrl);
+         }
+      },
+   },
+   ...props.pagination,
+});
+
+watch(
+   () => gridCtrl.tableData.value,
+   (newVal) => {
+      if (newVal) {
+         dataList.value = newVal;
+         pagination.value.total = gridCtrl.total.value ?? 0;
+      }
+   },
+   { immediate: true },
+);
+
+watch(
+   () => props.tableData,
+   (newVal) => {
+      if (newVal) {
+         dataList.value = newVal;
+         pagination.value.total = newVal.length;
+      }
+   },
+   { immediate: true },
+);
+
+const columns = ref<Record<string, any>[]>(gridCtrl.columns.value);
+const selection = {
+   ...{
+      onChange: (selectedRowKeys: PrimaryKey[], selectedRows: any[]) => {
+         if (gridCtrl) {
+            gridCtrl.selectKeys.value = selectedRowKeys;
+            gridCtrl.selectRows.value = selectedRows;
+         }
+      },
+      columnWidth: '30px',
+      getCheckboxProps: (record: any) => ({
+         disabled: record.Enabled === 0,
+      }),
+   },
+   ...props.rowSelection,
+};
+const rowSelection: Ref<TableProps['rowSelection']> = ref<TableProps['rowSelection']>(selection);
+watch(
+   () => gridCtrl.selectable.value,
+   (newVal) => {
+      if (gridCtrl) {
+         rowSelection.value = newVal ? selection : undefined;
+      }
+   },
+   { immediate: true },
+);
+
+watch(
+   () => gridCtrl.columns.value,
+   () => {
+      columns.value = filterColumns(gridCtrl.columns.value);
+   },
+   { deep: true, immediate: true },
+);
+
+const visible = ref(false);
+onActivated(() => {
+   if (visible.value && gridCtrl) gridCtrl.reload.value = true;
+});
+
+onMounted(async () => {
+   provide(ProviderKeys.GridControl, gridCtrl);
+
+   if (gridCtrl.tableData.value) {
+      dataList.value = gridCtrl.tableData.value;
+      gridCtrl.total.value = dataList.value.length;
+      pagination.value.total = gridCtrl.total.value ?? 0;
+   } else if (gridCtrl.autoload !== false) {
+      if (gridCtrl.remotePage) {
+         dataList.value = (await gridQueryFind(gridCtrl)).rows;
+      } else {
+         dataList.value = await gridQueryList(gridCtrl);
+      }
+   }
+
+   setTimeout(() => {
+      // 延时显示，避免表格无数据显示异常
+      visible.value = true;
+   }, 50);
+});
+</script>
+<template>
+   <Toolbar
+      :grid-ctrl="gridCtrl"
+      :editor-ctrl="gridCtrl.editor!"
+      v-if="gridCtrl.buttons?.value.length || gridCtrl.tools?.length"
+   />
+   <Table
+      v-if="visible"
+      class="w-full"
+      :row-key="props.primaryKey ?? gridCtrl.primaryKey ?? 'Id'"
+      :data-source="dataList"
+      :loading="gridCtrl.isGridLoading.value"
+      :columns="columns"
+      :pagination="pagination"
+      :row-selection="rowSelection"
+      :scroll="props.scroll || { x: 700, y: 1000 }"
+      :size="gridCtrl.tableSize.value"
+      bordered
+      v-bind="attrs"
+   >
+      <template #bodyCell="bodyCell">
+         <slot name="bodyCell" :column="bodyCell?.column" :record="bodyCell?.record"></slot>
+         <template v-if="gridCtrl && bodyCell?.column?.dataIndex === 'enabled'">
+            <Switch
+               v-model:checked="bodyCell.record.Enabled"
+               v-permit:disable="':enabled'"
+               :disabled="statusDisabled ? statusDisabled(bodyCell.record) : false"
+               :data="OPTIONS.EnableDisable"
+               @click="gridStatusUpdate(gridCtrl, bodyCell.record)"
+               :class="[
+                  'w-[58px]',
+                  statusDisabled && statusDisabled(bodyCell.record) ? 'cursor-not-allowed disabled' : '',
+               ]"
+               :loading="bodyCell?.record.isLoading"
+            />
+         </template>
+         <template v-if="gridCtrl && bodyCell?.column?.dataIndex === 'operation'">
+            <slot name="operate" :record="bodyCell?.record">
+               <TableOperate :record="bodyCell?.record" :grid-ctrl="gridCtrl"> </TableOperate>
+            </slot>
+         </template>
+      </template>
+   </Table>
+</template>

package/src/components/content/table/tableOperate.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts" generic="T">
+import {
+   ButtonTool,
+   getToolGroup,
+   getToolVisible,
+   getToolStatus,
+   onToolClicked,
+   onGridRowEdit,
+   onGridRowDelete,
+   GridControl,
+} from '@skyfox2000/webbase';
+import { ConfigProvider, Button, Space, DropdownButton, Menu, MenuItem, Popconfirm } from 'ant-design-vue';
+
+const props = defineProps<{
+   /**
+    * 数据行记录
+    */
+   record: Record<string, any>;
+   /**
+    * 表格数据控制
+    */
+   gridCtrl: GridControl<T>;
+}>();
+
+const gridCtrl = props.gridCtrl;
+
+/// 兼容其它按钮操作参数
+const defaultOperates: ButtonTool[] = [
+   {
+      key: 'Edit',
+      label: '编辑',
+      type: 'primary',
+      visible: true,
+      permit: ':edit',
+      click: () => onGridRowEdit<T>(gridCtrl, props.record as T),
+   },
+   {
+      key: 'Delete',
+      label: '删除',
+      type: 'primary',
+      visible: true,
+      danger: true,
+      permit: ':delete',
+      confirm: true,
+      confirmText: '是否删除此记录？',
+      click: () => onGridRowDelete<T>(gridCtrl, props.record as T),
+   },
+];
+
+const { buttons, menus } = getToolGroup(defaultOperates, 0, gridCtrl.operates);
+
+const disabled = (item: ButtonTool): boolean => {
+   if (typeof item.disabled == 'boolean') {
+      return item.disabled;
+   }
+   if (typeof item.disabled == 'function') {
+      return getToolStatus(item, props.record) ?? false;
+   }
+   if (props.record.hasOwnProperty('Enabled')) {
+      switch (item.key) {
+         case 'Edit':
+            return props.record.Enabled ? false : true;
+         case 'Delete':
+            return props.record.Enabled ? true : false;
+      }
+   }
+   return false;
+};
+</script>
+<template>
+   <ConfigProvider
+      :theme="{
+         token: {
+            fontSize: 13,
+         },
+      }"
+   >
+      <Space>
+         <template v-for="item in buttons" :key="item.key">
+            <Popconfirm
+               v-if="getToolVisible(item, props.record)"
+               :disabled="disabled(item) || !item.confirm"
+               cancelText="否"
+               okText="是"
+               :title="item.confirmText"
+               :okButtonProps="{ size: 'small' }"
+               :cancelButtonProps="{ size: 'small' }"
+               @confirm="onToolClicked(item, gridCtrl.page, gridCtrl, props.record, true)"
+            >
+               <Button
+                  :key="item.key"
+                  :type="item.type ?? 'text'"
+                  :danger="item.danger"
+                  v-if="getToolVisible(item, props.record)"
+                  :disabled="disabled(item)"
+                  v-role="item.role"
+                  v-permit="item.permit"
+                  @click="onToolClicked(item, gridCtrl.page, gridCtrl, props.record)"
+                  size="small"
+                  :style="{
+                     padding: item.type ?? '0px 4px',
+                  }"
+               >
+                  {{ item.label }}
+               </Button>
+            </Popconfirm>
+         </template>
+
+         <ConfigProvider :autoInsertSpaceInButton="false" v-if="record.Enabled == 1">
+            <DropdownButton v-if="menus.length > 0" size="small">
+               更多
+               <template #overlay>
+                  <Menu>
+                     <template v-for="item in menus" :key="item.key">
+                        <MenuItem
+                           v-if="getToolVisible(item, props.record)"
+                           :disabled="disabled(item)"
+                           v-role="item.role"
+                           v-permit="item.permit"
+                           @click="onToolClicked(item, gridCtrl.page, gridCtrl, props.record)"
+                        >
+                           {{ item.label }}
+                        </MenuItem>
+                     </template>
+                  </Menu>
+               </template>
+            </DropdownButton>
+         </ConfigProvider>
+      </Space>
+   </ConfigProvider>
+</template>

package/src/components/content/toolbar/icontool.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { VueDraggableNext as draggable } from 'vue-draggable-next';
+import { Checkbox } from 'ant-design-vue';
+import {
+   AppRouter,
+   filterColumns,
+   onColumnVisibleChanged,
+   useSettingInfo,
+   getToolStatus,
+   getToolByKey,
+   getToolVisible,
+   useToolFactory,
+   onToolClicked,
+   GridControl,
+} from '@skyfox2000/webbase';
+import { Button, ToolIcon } from '../../common';
+import { Dropdown, Menu, MenuItem } from 'ant-design-vue';
+
+const props = defineProps<{
+   /**
+    * 页面主数据
+    */
+   gridCtrl: GridControl<any>;
+}>();
+
+const gridCtrl = props.gridCtrl;
+const { tools } = useToolFactory(props.gridCtrl);
+
+const settingStore = useSettingInfo();
+
+watch(
+   () => gridCtrl.selectable.value,
+   (newVal) => {
+      if (getToolByKey(tools, 'tool.export.excel.selected'))
+         getToolByKey(tools, 'tool.export.excel.selected')!.disabled = !newVal;
+      if (getToolByKey(tools, 'tool.export.pdf.selected'))
+         getToolByKey(tools, 'tool.export.pdf.selected')!.disabled = !newVal;
+   },
+);
+
+// 添加拖拽相关的响应式数据
+const dragColumns = ref<Record<string, any>[]>([]);
+
+watch(
+   () => gridCtrl.columns.value,
+   (newVal) => {
+      dragColumns.value = filterColumns(newVal, true);
+   },
+   { deep: true, immediate: true },
+);
+
+// 处理拖拽结束事件
+const onDragEnd = () => {
+   // 更新列的顺序
+   gridCtrl.columns.value.splice(0, gridCtrl.columns.value.length, ...dragColumns.value);
+   settingStore.setTableColumns(AppRouter.currentRoute.value.path, gridCtrl.columns.value);
+};
+</script>
+<template>
+   <div class="inline-flex [&>div]:ml-[-1px] first:[&>div]:ml-0">
+      <template v-for="(item, index) in tools" :key="item.key">
+         <Dropdown placement="bottomRight" class="p-0 rounded-none" v-if="getToolVisible(item) && item.dropdown">
+            <template #overlay>
+               <div class="min-w-[100px] bg-white rounded shadow-md p-4" :class="item.dropdownClass">
+                  <draggable
+                     v-if="item.dropdown === 'headset'"
+                     v-model="dragColumns"
+                     item-key="dataIndex"
+                     @end="onDragEnd"
+                     handle=".drag-handle"
+                  >
+                     <template v-for="element in dragColumns" :key="element.name">
+                        <div @click.stop class="flex items-center mb-2 last:mb-0 select-none">
+                           <span class="drag-handle mr-2 text-gray-400 hover:text-gray-600 cursor-move">⋮⋮</span>
+                           <Checkbox
+                              :checked="element.visible !== false"
+                              @change.stop.prevent="
+                                 (e) => {
+                                    onColumnVisibleChanged(element, e.target.checked);
+                                 }
+                              "
+                              class="text-gray-700 hover:text-gray-900 select-none"
+                           >
+                              {{ element.title }}
+                           </Checkbox>
+                        </div>
+                     </template>
+                  </draggable>
+               </div>
+            </template>
+            <Button
+               :class="[
+                  'px-[8px] py-[2px] relative border-[#ccc] bg-[#fcfcfc] rounded-none text-[#666] hover:z-10',
+                  index === 0 ? 'rounded-l-[5px]' : '',
+                  index === tools.length - 1 ? 'rounded-r-[5px]' : '',
+               ]"
+               :disabled="getToolStatus(item)"
+               :tiptext="item.label"
+               @click="onToolClicked(item, gridCtrl.page, gridCtrl)"
+            >
+               <ToolIcon :icon="item.icon" class="w-[18px] h-[18.5px]" clickable />
+            </Button>
+         </Dropdown>
+         <Button
+            v-else-if="!item.children && getToolVisible(item)"
+            :class="[
+               'px-[8px] py-[2px] relative border-[#ccc] bg-[#fcfcfc] rounded-none text-[#666] hover:z-10',
+               index === 0 ? 'rounded-l-[5px]' : '',
+               index === tools.length - 1 ? 'rounded-r-[5px]' : '',
+            ]"
+            :disabled="getToolStatus(item)"
+            :tiptext="item.label"
+            @click="onToolClicked(item, gridCtrl.page, gridCtrl)"
+         >
+            <ToolIcon :icon="item.icon" class="w-[18px] h-[18.5px]" clickable />
+         </Button>
+         <Dropdown placement="bottomRight" class="p-0 rounded-none" v-else-if="getToolVisible(item)">
+            <template #overlay>
+               <Menu>
+                  <MenuItem v-for="menu in item.children" :key="menu.key" :disabled="getToolStatus(menu)">
+                     {{ menu.label }}
+                  </MenuItem>
+               </Menu>
+            </template>
+            <Button
+               :class="[
+                  '!w-[46px] px-[5px] py-[2px] relative border-[#ccc] bg-[#fcfcfc] rounded-none text-[#666] hover:z-10',
+                  index === 0 ? 'rounded-l-[5px]' : '',
+               ]"
+               :disabled="getToolStatus(item)"
+               :tiptext="item.label"
+               :icon="item.icon"
+               :iconProps="{ class: 'w-[19px] h-[19px]' }"
+               @click="onToolClicked(item, gridCtrl.page, gridCtrl)"
+            >
+               <template #default>
+                  <ToolIcon icon="icon-down-arrow" class="w-[12px] h-[12px]" />
+               </template>
+            </Button>
+         </Dropdown>
+      </template>
+      <!--
+       导出Excel 基于表头导出
+       导出PDF
+       TODO：支持多模板导出选择
+       表头设置 
+       TODO：增加保存功能，可设置个性化表头和多模式表头
+       -->
+   </div>
+</template>

package/src/components/content/toolbar/index.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts" generic="T">
+import {
+   ButtonTool,
+   EditorControl,
+   GridControl,
+   getToolGroup,
+   getToolStatus,
+   onToolClicked,
+   openNewForm,
+} from '@skyfox2000/webbase';
+import { Dropdown, Menu, MenuItem, Space } from 'ant-design-vue';
+import { Button } from '../../common';
+import IconTool from './icontool.vue';
+import { ref, watch } from 'vue';
+
+const props = defineProps<{
+   /**
+    * 表格控制器
+    */
+   gridCtrl: GridControl<T>;
+   /**
+    * 表单控制器
+    */
+   editorCtrl: EditorControl<T>;
+}>();
+
+const gridCtrl = props.gridCtrl;
+const pageCtrl = gridCtrl.page;
+const editorCtrl = props.editorCtrl;
+
+const defaultButtons: ButtonTool[] = [
+   {
+      key: 'New',
+      label: '新增',
+      type: 'primary',
+      icon: 'icon-new',
+      danger: true,
+      permit: ':new', // 默认仅受权限码控制
+      click: () => {
+         return openNewForm(editorCtrl);
+      },
+   },
+];
+
+const MaxButtonCount = 3;
+
+const ToolbarButtons = ref<ButtonTool[]>([]);
+const ToolbarMenus = ref<ButtonTool[]>([]);
+
+watch(
+   () => gridCtrl.buttons?.value,
+   () => {
+      const { buttons, menus } = getToolGroup(
+         defaultButtons,
+         gridCtrl.flat !== undefined ? gridCtrl.flat : MaxButtonCount,
+         gridCtrl.buttons?.value,
+      );
+      ToolbarButtons.value.splice(0, ToolbarButtons.value.length, ...buttons);
+      ToolbarMenus.value.splice(0, ToolbarMenus.value.length, ...menus);
+   },
+   {
+      deep: true,
+      immediate: true,
+   },
+);
+</script>
+<template>
+   <div class="flex justify-between mb-[10px]">
+      <Space>
+         <Button
+            v-for="item in ToolbarButtons"
+            :key="item.key"
+            :type="item.type"
+            :danger="item.danger"
+            :disabled="getToolStatus(item)"
+            :icon="item.icon"
+            v-role="item.role"
+            v-permit="item.permit"
+            @click="onToolClicked(item, pageCtrl, gridCtrl)"
+         >
+            {{ item.label }}
+         </Button>
+         <Dropdown v-if="ToolbarMenus.length > 0">
+            <template #overlay>
+               <Menu>
+                  <MenuItem
+                     v-for="item in ToolbarMenus"
+                     :key="item.key"
+                     :disabled="getToolStatus(item)"
+                     v-role="item.role"
+                     v-permit="item.permit"
+                     @click="onToolClicked(item, pageCtrl, gridCtrl)"
+                  >
+                     {{ item.label }}
+                  </MenuItem>
+               </Menu>
+            </template>
+            <Button> 更多操作 </Button>
+         </Dropdown>
+         <!-- 空占位元素 -->
+         <span v-if="ToolbarButtons.length === 0 && ToolbarMenus.length === 0"></span>
+      </Space>
+      <Space class="mr-1">
+         <component :is="IconTool" :grid-ctrl="gridCtrl" />
+      </Space>
+   </div>
+</template>