@skyfox2000/webui 1.4.21 → 1.4.22

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@skyfox2000/webui",
-   "version": "1.4.21",
+   "version": "1.4.22",
    "description": "后台前端通用组件定义",
    "type": "module",
    "keywords": [],

package/src/components/content/dialog/uploadForm.vue

@@ -9,19 +9,10 @@ import message from 'vue-m-message';
 import { AsyncUploader } from '@/utils/file-upload';
 
 const props = defineProps<{
-   /**
-    * 文件后缀限制
-    */
-   fileExt?: string[];
    /**
     * 表格控制器
     */
    gridCtrl: GridControl<AnyData>;
-   /**
-    * 最大文件数
-    * 默认1个
-    */
-   maxCount?: number;
    /**
     * 并发上传文件数
     * 默认3个
@@ -39,19 +30,90 @@ const props = defineProps<{
     * 下载地址和参数
     */
    downloadUrl?: IUrlInfo;
+   /**
+    * 删除Url
+    */
+   deleteUrl?: IUrlInfo;
+   /**
+    * 文件列表
+    */
+   fileList: UploadFile[];
+
    /**
     * 部分错误上传是否继续保存
     */
    continueOnError?: boolean;
+
+   /**
+    * 预览Url
+    */
+   previewUrl?: IUrlInfo;
+   
+   /**
+    * Upload配置参数
+    */
+   upload?: {
+      /**
+       * 是否自动上传
+       */
+      autoUpload?: boolean;
+      /**
+       * 提示文字
+       */
+      placeholder?: string;
+      /**
+       * 文件后缀列表
+       */
+      fileExt?: string[];
+      /**
+       * 最大文件大小
+       */
+      maxFileSize?: number;
+      /**
+       * 最大数量
+       */
+      maxCount?: number;
+      /**
+       * 最大数量提示
+       */
+      maxCountTip?: boolean;
+      /**
+       * 文件大小提示
+       */
+      maxFileSizeTip?: boolean;
+      /**
+       * 文件类型提示
+       */
+      fileExtTip?: boolean;
+      /**
+       * 文件路径
+       */
+      parentPath?: string;
+      /**
+       * 显示操作文字
+       */
+      showActionText?: boolean;
+      /**
+       * 是否显示上线或下线
+       */
+      showOnlineSwitch?: boolean;
+      /**
+       * 是否显示删除
+       */
+      showDelete?: boolean;
+      /**
+       * 是否显示目录上传按钮
+       */
+      showFolderUpload?: boolean;
+   };
 }>();
 
 const uploadFormCtrl = props.uploadForm;
 const open = ref<boolean>(false);
 
-const maxCount = props.maxCount ?? 1;
 const maxConcurrent = props.maxConcurrent ?? 3;
 
-const fileList = ref<UploadFile[]>([]);
+const fileList = ref<UploadFile[]>(props.fileList ?? []);
 const emit = defineEmits<{
    /**
     * 显示预处理
@@ -80,6 +142,22 @@ watch(
 const uploadUrl = ref(props.uploadUrl);
 const downloadUrl = ref(props.downloadUrl);
 
+// Upload默认配置
+const uploadConfig = ref({
+   autoUpload: false,
+   placeholder: '',
+   maxFileSize: 20,
+   maxCount: 5,
+   maxCountTip: false,
+   maxFileSizeTip: true,
+   fileExtTip: true,
+   showActionText: true,
+   showOnlineSwitch: false,
+   showDelete: true,
+   showFolderUpload: false,
+   ...props.upload
+});
+
 const dialogSave = async () => {
    emit('before:upload', fileList.value);
    const uploader = new AsyncUploader(uploadUrl.value!, maxConcurrent);
@@ -139,8 +217,13 @@ const dialogClose = () => {
    <Modal title="文件上传" v-model:open="open"
       :wrapClassName="'modal mx-auto ' + ($attrs.width ? 'w-[' + $attrs.width + ']' : 'w-[500px]')"
       @close="dialogClose">
-      <UploadList v-model:file-list="fileList" :upload-url="uploadUrl!" :download-url="downloadUrl"
-         :max-count="maxCount" :file-ext="fileExt" />
+      <UploadList 
+         v-model:file-list="fileList" 
+         :upload-url="uploadUrl!" 
+         :download-url="downloadUrl" 
+         :preview-url="props.previewUrl"
+         v-bind="uploadConfig"
+      />
       <template #footer>
          <Space>
             <Button @click="dialogClose">取消</Button>

package/src/components/content/index.ts

@@ -13,6 +13,11 @@ export { Form };
 import FormItem from './form/formItem.vue';
 export { FormItem };
 
+import List from './list/index.vue';
+export { List };
+import ListOperate from './list/listOperate.vue';
+export { ListOperate };
+
 import Search from './search/index.vue';
 export { Search };
 import SearchItem from './search/searchItem.vue';

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

@@ -0,0 +1,198 @@
+<script lang="ts" setup>
+import { onMounted, Ref, ref, watch, provide, useAttrs, onActivated, computed } from 'vue';
+import { Card, List, ListItem, PaginationProps, ListProps } from 'ant-design-vue';
+import {
+   AppRouter,
+   gridQueryFind,
+   gridStatusUpdate,
+   OPTIONS,
+   gridQueryList,
+   GridControl,
+} from '@/index';
+import ListOperate from './listOperate.vue';
+import Toolbar from '../toolbar/index.vue';
+import Switch from '../../form/switch/index.vue';
+import { AnyData } from '@skyfox2000/fapi';
+import { ProviderKeys } from '@/index';
+
+const props = withDefaults(defineProps<{
+   /**
+    * 列表数据控制
+    */
+   gridCtrl: GridControl<AnyData>;
+   /**
+    * 主键字段名
+    */
+   primaryKey?: string;
+   /**
+    * 自定义列表数据
+    */
+   listData?: Record<string, AnyData>[];
+   /**
+    * 网格配置
+    */
+   grid?: ListProps['grid'];
+   /**
+    * 自定义分页控制
+    */
+   pagination?: false | PaginationProps;
+   /**
+    * 卡片标题字段
+    */
+   titleField?: string;
+   /**
+    * 是否禁用启用状态
+    */
+   statusDisabled?: Function;
+}>(), {
+   grid: () => ({ gutter: 16, column: 4 }),
+   titleField: 'Title',
+   pagination: undefined,
+});
+
+// 关闭自动继承属性到根元素
+defineOptions({
+   inheritAttrs: false,
+});
+const attrs = useAttrs(); // 手动获取 $attrs
+
+const gridCtrl = props.gridCtrl;
+
+// 响应式获取当前路由路径
+const currentPath = computed(() => AppRouter.currentRoute.value.path);
+
+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<false | PaginationProps> = ref<false | PaginationProps>({
+   ...{
+      total: 0,
+      current: 1,
+      pageSize: curPageSize.value,
+      showTotal: (total: number) => {
+         return `共 ${total} 条记录`;
+      },
+      onChange: (page: number, pageSize: number) => {
+         if (pagination.value !== false) {
+            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 === false ? {} : props.pagination),
+});
+
+if (props.pagination === false) {
+   pagination.value = false;
+}
+
+watch(
+   () => gridCtrl.tableData.value,
+   (newVal) => {
+      if (newVal) {
+         dataList.value = newVal;
+         if (pagination.value !== false) {
+            pagination.value.total = gridCtrl.total.value ?? 0;
+            pagination.value.current = gridCtrl.pageNo.value ?? 1;
+            pagination.value.pageSize = gridCtrl.pageSize.value ?? 10;
+         }
+      }
+   },
+   { immediate: true },
+);
+
+watch(
+   () => props.listData,
+   (newVal) => {
+      if (newVal) {
+         dataList.value = newVal;
+         if (pagination.value !== false) {
+            pagination.value.total = newVal.length;
+            pagination.value.current = gridCtrl.pageNo.value ?? 1;
+            pagination.value.pageSize = gridCtrl.pageSize.value ?? 10;
+         }
+      }
+   },
+   { immediate: true },
+);
+
+const visible = ref(false);
+onActivated(() => {
+   if (visible.value && gridCtrl && gridCtrl.autoload) gridCtrl.reload.value = true;
+});
+
+onMounted(async () => {
+   provide(ProviderKeys.GridControl, gridCtrl);
+
+   if (gridCtrl.page && gridCtrl.gridUrl?.url) {
+      if (gridCtrl.gridUrl?.url === gridCtrl.page.urls.list?.url) {
+         gridCtrl.remotePage = false;
+      }
+      if (gridCtrl.gridUrl?.url === gridCtrl.page.urls.find?.url) {
+         gridCtrl.remotePage = true;
+      }
+   }
+
+   if (gridCtrl.tableData.value) {
+      dataList.value = gridCtrl.tableData.value;
+      gridCtrl.total.value = dataList.value.length;
+      if (pagination.value !== false) {
+         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" />
+   <List v-if="visible" class="w-full min-h-[480px]" :grid="props.grid" :data-source="dataList"
+      :loading="gridCtrl.isGridLoading.value" :pagination="pagination" v-bind="attrs">
+      <template #renderItem="{ item }">
+         <ListItem class="!m-0 !p-0">
+            <Card class="!m-0" :head-style="{ fontSize: '14px', padding: '8px', minHeight: '36px', height: '36px' }"
+               :body-style="{ padding: '4px' }">
+               <template #title>
+                  <div class="flex items-center justify-between">
+                     <span>{{ item[props.titleField] }}</span>
+                     <div class="flex items-center space-x-2">
+                        <Switch v-model:checked="item[gridCtrl.statusKey]"
+                           v-auth:disable="{ url: currentPath, role: ['Super', 'Admin'], permit: ':enabled' }"
+                           :disabled="statusDisabled ? statusDisabled(item) : false" :data="OPTIONS.EnableDisable"
+                           @click="gridStatusUpdate(gridCtrl, item)" size="small" :class="[
+                              'relative mt-[3px] transform scale-[1.1]',
+                              statusDisabled && statusDisabled(item) ? 'cursor-not-allowed disabled' : '',
+                           ]" :loading="item.isLoading" />
+                        <ListOperate :record="item" :grid-ctrl="gridCtrl" />
+                     </div>
+                  </div>
+               </template>
+               <slot name="cardContent" :record="item"></slot>
+            </Card>
+         </ListItem>
+      </template>
+   </List>
+</template>

package/src/components/content/list/listOperate.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts" generic="T">
+import {
+   AppRouter,
+   ButtonTool,
+   getToolGroup,
+   getToolVisible,
+   getToolStatus,
+   onToolClicked,
+   onGridRowEdit,
+   onGridRowDelete,
+   GridControl,
+   ToolIcon,
+} from '@/index';
+import { ConfigProvider, Space, DropdownButton, Menu, MenuItem, Popconfirm } from 'ant-design-vue';
+import { computed } from 'vue';
+
+const props = defineProps<{
+   /**
+    * 数据行记录
+    */
+   record: Record<string, any>;
+   /**
+    * 表格数据控制
+    */
+   gridCtrl: GridControl<T>;
+}>();
+
+const gridCtrl = props.gridCtrl;
+
+// 响应式获取当前路由路径
+const currentPath = computed(() => AppRouter.currentRoute.value.path);
+
+/// 兼容其它按钮操作参数
+const defaultOperates: ButtonTool[] = [
+   {
+      key: 'Edit',
+      label: '',
+      icon: 'icon-edit',
+      type: 'text',
+      visible: true,
+      role: ['Super', 'Admin'],
+      permit: ':edit',
+      click: () => onGridRowEdit<T>(gridCtrl, props.record as T),
+   },
+   {
+      key: 'Delete',
+      label: '',
+      icon: 'icon-delete',
+      type: 'text',
+      visible: true,
+      danger: true,
+      role: ['Super', 'Admin'],
+      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(gridCtrl.statusKey)) {
+      switch (item.key) {
+         case 'Edit':
+            return props.record[gridCtrl.statusKey] ? false : true;
+         case 'Delete':
+            return props.record[gridCtrl.statusKey] ? 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)">
+               <ToolIcon :key="item.key" :icon="item.icon" :danger="item.danger"
+                  v-if="getToolVisible(item, props.record)" :disabled="disabled(item)"
+                  v-auth="{ url: currentPath, role: item.role, permit: item.permit }"
+                  @click="!disabled(item) && onToolClicked(item, gridCtrl.page, gridCtrl, props.record)"
+                  :clickable="!disabled(item)" :class="[
+                     'w-4 h-4',
+                     item.danger ? 'text-red-500' : 'text-gray-600',
+                     disabled(item) ? 'opacity-30 cursor-not-allowed' : 'hover:text-gray-800',
+                  ]" />
+            </Popconfirm>
+         </template>
+
+         <ConfigProvider :autoInsertSpaceInButton="false" v-if="record[gridCtrl.statusKey] == 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-auth="{ url: currentPath, role: item.role, 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/table/index.vue

@@ -212,7 +212,7 @@ onMounted(async () => {
       <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"
+            <Switch v-model:checked="bodyCell.record[gridCtrl.statusKey]"
                v-auth:disable="{ url: currentPath, role: ['Super', 'Admin'], permit: ':enabled' }"
                :disabled="statusDisabled ? statusDisabled(bodyCell.record) : false" :data="OPTIONS.EnableDisable"
                @click="gridStatusUpdate(gridCtrl, bodyCell.record)" :class="[

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

@@ -63,68 +63,50 @@ const disabled = (item: ButtonTool): boolean => {
    if (typeof item.disabled == 'function') {
       return getToolStatus(item, props.record) ?? false;
    }
-   if (props.record.hasOwnProperty('Enabled')) {
+   if (props.record.hasOwnProperty(gridCtrl.statusKey)) {
       switch (item.key) {
          case 'Edit':
-            return props.record.Enabled ? false : true;
+            return props.record[gridCtrl.statusKey] ? false : true; // 启用时可编辑，停用时不可编辑
          case 'Delete':
-            return props.record.Enabled ? true : false;
+            return props.record[gridCtrl.statusKey] ? true : false; // 启用时不可删除，停用时可删除
       }
    }
    return false;
 };
 </script>
 <template>
-   <ConfigProvider
-      :theme="{
-         token: {
-            fontSize: 13,
-         },
-      }"
-   >
+   <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' }"
+            <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)"
+               @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-auth="{ url: currentPath, role: item.role, permit: item.permit }"
-                  @click="onToolClicked(item, gridCtrl.page, gridCtrl, props.record)"
-                  size="small"
-                  :style="{
+                  @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">
+         <ConfigProvider :autoInsertSpaceInButton="false" v-if="record[gridCtrl.statusKey] == 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)"
+                        <MenuItem v-if="getToolVisible(item, props.record)" :disabled="disabled(item)"
                            v-auth="{ url: currentPath, role: item.role, permit: item.permit }"
-                           @click="onToolClicked(item, gridCtrl.page, gridCtrl, props.record)"
-                        >
-                           {{ item.label }}
+                           @click="onToolClicked(item, gridCtrl.page, gridCtrl, props.record)">
+                        {{ item.label }}
                         </MenuItem>
                      </template>
                   </Menu>

package/src/components/form/switch/index.vue

@@ -4,6 +4,7 @@ import { formValidate, useInputFactory, OptionItemProps, loadOption, unloadOptio
 import { Switch } from 'ant-design-vue';
 import message from 'vue-m-message';
 import { useOptionFactory } from '@/utils/page';
+import { computed } from 'vue';
 
 const props = defineProps({
    ...OptionCommProps,
@@ -14,6 +15,10 @@ const props = defineProps({
       type: Array as PropType<OptionItemProps[]>,
       required: true,
    },
+   size: {
+      type: String as PropType<'small' | 'default' | undefined>,
+      default: 'default',
+   },
 });
 
 const inputFactory = useInputFactory();
@@ -42,6 +47,15 @@ const emit = defineEmits<{
 }>();
 
 const { editorCtrl, errInfo } = useInputFactory();
+
+const customSize = computed(() => {
+   switch (props.size) {
+      case 'small':
+         return 'w-[46px]';
+      default:
+         return 'w-[58px]';
+   }
+});
 const onChange = (checked: boolean | string | number) => {
    if (errInfo?.value.errClass && editorCtrl) {
       /// 重新开始验证
@@ -63,18 +77,17 @@ onUnmounted(() => {
 });
 </script>
 <template>
-   <Switch
-      v-if="switchOptions.length === 2"
-      :class="[
-         errInfo?.errClass === 'error' ? 'error !border-red-300 shadow-[0_0_3px_0px_#ff4d4f]' : '',
-         'bg-blue-300',
-         'w-[58px]',
-      ]"
-      :checkedChildren="switchOptions[0].label"
-      :checkedValue="switchOptions[0].value"
-      :unCheckedChildren="switchOptions[1].label"
-      :unCheckedValue="switchOptions[1].value"
-      @change="onChange"
-      v-bind="$attrs"
-   />
+   <Switch v-if="switchOptions.length === 2" :size="size" :class="[
+      errInfo?.errClass === 'error' ? 'error !border-red-300 shadow-[0_0_3px_0px_#ff4d4f]' : '',
+      'bg-blue-300',
+      customSize,
+   ]" :checkedChildren="switchOptions[0].label" :checkedValue="switchOptions[0].value"
+      :unCheckedChildren="switchOptions[1].label" :unCheckedValue="switchOptions[1].value" @change="onChange"
+      v-bind="$attrs" />
 </template>
+<style>
+.ant-switch-small .ant-switch-inner-checked,
+.ant-switch-small .ant-switch-inner-unchecked {
+   font-size: 10px !important;
+}
+</style>