@skyfox2000/webui 1.2.7 → 1.2.9

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

@@ -2,44 +2,108 @@
 import { ref, watch } from 'vue';
 import { Input, Button } from 'ant-design-vue';
 
-interface ConfigItem {
+export interface PropConfigItem {
    id: number;
+   /**
+    * 文本
+    */
+   text?: string;
+   /**
+    * 配置名
+    */
    field: string;
+   /**
+    * 配置值
+    */
    value: string;
 }
 
 const props = defineProps<{
+   /**
+    * 配置值
+    */
    value: Record<string, string>;
+   /**
+    * 配置项
+    */
+   selectList?: PropConfigItem[];
+   /**
+    * 配置名宽度%
+    */
+   fieldWidth?: number;
+   /**
+    * 标签占位符
+    */
    labelHolder?: string;
-   valueHolder: string;
+   /**
+    * 值占位符
+    */
+   valueHolder?: string;
+   /**
+    * 新增配置行
+    */
+   addMore?: boolean;
 }>();
 const emit = defineEmits(['update:value']);
 
-const configList = ref<ConfigItem[]>([]);
-let isInnerChange = false; // 标记是否为内部输入变更
+// 当有selectList时，不允许添加更多配置项
+const addMore = ref(props.selectList && props.selectList.length > 0 ? false : (props.addMore ?? true));
 
+const configList = ref<PropConfigItem[]>([]);
+// 标记是否为内部输入变更
+// 避免重复触发 update:value
+let isInnerChange = false;
+
+// 初始化配置列表
+// 1、有selectList时，只能使用selectList里面的内容，且不允许重复
+// 2、没有selectList时，可动态添加新的项目
+// 3、value有值时，能够正常显示值，value的key对应field
 const initConfigList = () => {
-   configList.value = Object.entries(props.value).map(([field, value]) => ({
-      id: Date.now() + Math.random(),
-      field,
-      value,
-   }));
+   if (props.selectList && props.selectList.length > 0) {
+      // 有selectList的情况：使用selectList作为基础，合并value值
+      configList.value = props.selectList.map((item) => ({
+         id: Date.now() + Math.random(),
+         text: item.text,
+         field: item.field,
+         // 如果value中有对应的field，使用value中的值，否则使用selectList中的默认值
+         value: props.value[item.field] ?? item.value,
+      }));
+   } else {
+      // 没有selectList的情况：基于value动态生成配置项
+      if (props.value && Object.keys(props.value).length > 0) {
+         configList.value = Object.entries(props.value).map(([field, value]) => ({
+            id: Date.now() + Math.random(),
+            field,
+            value,
+         }));
+      } else {
+         // value为空时，初始化为空数组
+         configList.value = [];
+      }
+   }
 };
 
-watch(() => props.value, () => {
-   if (!isInnerChange) {
-      initConfigList();
-   }
-   isInnerChange = false;
-}, { immediate: true });
+watch(
+   () => props.value,
+   () => {
+      if (!isInnerChange) {
+         initConfigList();
+      }
+      isInnerChange = false;
+   },
+   { immediate: true },
+);
 
 const updateConfig = () => {
-   const newConfig = configList.value.reduce((acc: Record<string, string>, item: ConfigItem) => {
-      if (item.field) {
-         acc[item.field] = item.value;
-      }
-      return acc;
-   }, {} as Record<string, string>);
+   const newConfig = configList.value.reduce(
+      (acc: Record<string, string>, item: PropConfigItem) => {
+         if (item.field) {
+            acc[item.field] = item.value;
+         }
+         return acc;
+      },
+      {} as Record<string, string>,
+   );
    isInnerChange = true;
    emit('update:value', newConfig);
 };
@@ -60,22 +124,38 @@ const handleInputChange = () => {
 <template>
    <div class="flex flex-col gap-2">
       <div v-for="item in configList" :key="item.id" class="flex items-center gap-2">
-         <div class="w-[33%]">
-            <Input v-model:value="item.field" :title="item.field" class="w-full" :placeholder="labelHolder || '配置名'"
-               @input="handleInputChange" />
-         </div>
-         <div class="w-[3%]">
-            =
+         <div :class="[fieldWidth ? `w-[${fieldWidth}%]` : 'w-[33%]']">
+            <Input
+               v-if="!selectList || selectList.length === 0"
+               v-model:value="item.field"
+               :title="item.text || item.field"
+               class="w-full"
+               :placeholder="item.text || labelHolder || '配置名'"
+               @input="handleInputChange"
+               :disabled="!addMore"
+            />
+            <div v-else>
+               <Input v-model:value="item.text" :title="item.text" :disabled="true" class="w-[100%]" />
+               <Input type="hidden" v-model:value="item.field" />
+            </div>
          </div>
-         <div class="w-[64%]">
-            <Input v-model:value="item.value" :placeholder="valueHolder" @input="handleInputChange"
-               :title="item.value" />
+         <div class="w-[3%]">=</div>
+         <div :class="[fieldWidth ? `w-[${97 - fieldWidth}%]` : 'w-[64%]']">
+            <Input
+               v-model:value="item.value"
+               :placeholder="valueHolder || '请输入' + item.text || '请输入配置值'"
+               @input="handleInputChange"
+               :title="item.value"
+            />
          </div>
       </div>
-      <Button @click="addNewLine"
+      <Button
+         v-if="addMore"
+         @click="addNewLine"
          class="mt-1 w-[80px] !text-[12px] text-[#666] bg-[#e6f7ff] border-[#b3e0ff] hover:bg-[#b3e0ff] hover:border-[#8abeff]"
-         size="small">
+         size="small"
+      >
          新增配置行
       </Button>
    </div>
-</template>
+</template>

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

@@ -73,28 +73,45 @@ const url = ref<IUrlInfo>({
 const inputFactory = useInputFactory();
 const { editorCtrl, errInfo, labelText } = inputFactory;
 
+const defaultVal = ref(props.value);
+const placeholder = ref(attrs.placeholder);
+
 /// 避免类型错误
 const innerValue = ref<string | number | string[] | number[] | undefined>(undefined);
 const emit = defineEmits(['change', 'update:value', 'update:labels']);
 inputFactory.inputEmit = emit;
+
 /**
  * 实际的选择项
  */
 const selectOptions = ref<OptionItemProps[]>([]);
+const onChanged = (value: any) => {
+   const selectedOptions = onOptionChanged(props, value as SelectValue, selectOptions, inputFactory);
+   const labels: string[] = getSelectedLabels(selectedOptions);
+
+   innerValue.value = value;
+   emit('update:labels', labels);
+   emit('change', value);
+
+   if (errInfo?.value.errClass && editorCtrl) {
+      /// 重新开始验证
+      formValidate(editorCtrl);
+   }
+};
+
 watch(
    () => selectOptions.value,
    (newVal) => {
-      if (newVal.length > 0 && isEmpty(props.value) && props.selectFirst) {
+      if (newVal.length && isEmpty(props.value) && props.selectFirst) {
          innerValue.value = newVal[0].value;
-         onChanged(newVal[0].value);
       } else {
          // 当选项加载完成后，设置实际的 value 值
          innerValue.value = props.value === null ? undefined : props.value;
       }
+      if (newVal.length > 0 && innerValue.value) onChanged(innerValue.value);
    },
 );
 
-const placeholder = ref(attrs.placeholder);
 watch(
    () => url.value.loading,
    (newVal) => {
@@ -104,7 +121,6 @@ watch(
    { immediate: true },
 );
 
-const defaultVal = ref(props.value);
 watch(
    () => innerValue.value,
    (newVal) => {
@@ -118,19 +134,13 @@ watch(
    },
 );
 
-const onChanged = (value: any) => {
-   const selectedOptions = onOptionChanged(props, value as SelectValue, selectOptions, inputFactory);
-   const labels: string[] = getSelectedLabels(selectedOptions);
-
-   innerValue.value = value;
-   emit('update:labels', labels);
-   emit('change', value);
-
-   if (errInfo?.value.errClass && editorCtrl) {
-      /// 重新开始验证
-      formValidate(editorCtrl);
-   }
-};
+watch(
+   () => props.params,
+   (newVal) => {
+      loadOption(true, props, selectOptions, inputFactory, url.value, newVal);
+   },
+   { deep: true },
+);
 
 onMounted(() => {
    if (url.value && !url.value.fieldMap) {

package/src/components/form/upload/uploadList.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { Button } from '../../common';
+import { Button, ToolIcon, Tooltip } from '../../common';
 import { computed, ref, watch } from 'vue';
 import message from 'vue-m-message';
 import type { UploadProps } from 'ant-design-vue';
-import { Upload, Progress, Tag } from 'ant-design-vue';
-import { UploadFile, UploadStatus, donwloadFromMinio, path } from '@/index';
+import { Upload, Progress, Tag, Popconfirm } from 'ant-design-vue';
+import { UploadFile, UploadStatus, donwloadFromMinio, path, Switch } from '@/index';
+import { useInputFactory } from '@/utils/form-validate';
 import { IUrlInfo } from '@skyfox2000/fapi';
 
 export interface UploadListProps {
@@ -12,14 +13,19 @@ export interface UploadListProps {
     * 是否自动上传
     */
    autoUpload?: boolean;
+   /**
+    * 上传Url
+    */
+   uploadUrl: IUrlInfo;
+   /**
    /*
     * 下载Url
     */
-   downloadUrl: IUrlInfo;
+   downloadUrl?: IUrlInfo;
    /**
     * 文件列表
     */
-   fileList: UploadFile<any>[];
+   fileList: UploadFile[];
    /**
     * 提示文字
     */
@@ -36,10 +42,30 @@ export interface UploadListProps {
     * 最大数量
     */
    maxCount?: number;
+   /**
+    * 最大数量提示
+    */
+   maxCountTip?: boolean;
+   /**
+    * 文件大小提示
+    */
+   maxFileSizeTip?: boolean;
+   /**
+    * 文件类型提示
+    */
+   fileExtTip?: boolean;
    /**
     * 文件路径
     */
    parentPath?: string;
+   /**
+    * 显示操作文字
+    */
+   showActionText?: boolean;
+   /**
+    * 是否显示上线或下线
+    */
+   showOnlineSwitch?: boolean;
 }
 
 const props = withDefaults(defineProps<UploadListProps>(), {
@@ -48,12 +74,20 @@ const props = withDefaults(defineProps<UploadListProps>(), {
    placeholder: '',
    maxFileSize: 20,
    maxCount: 5,
+   maxCountTip: false,
+   maxFileSizeTip: true,
+   fileExtTip: true,
+   showActionText: true,
+   showOnlineSwitch: false,
 });
 
+const inputFactory = useInputFactory();
+const { errInfo } = inputFactory;
+
 const fileList = ref<UploadFile[]>(props.fileList);
 const fileUploader = ref();
 const emit = defineEmits(['update:file-list']);
-
+const confirmOpen = ref(false);
 const acceptString = computed(() => (props.fileExt?.length ? props.fileExt.map((ext) => `.${ext}`).join(',') : ''));
 
 const beforeUpload: UploadProps['beforeUpload'] = (file) => {
@@ -75,13 +109,18 @@ const beforeUpload: UploadProps['beforeUpload'] = (file) => {
       return false;
    }
 
+   confirmOpen.value = false;
    return props.autoUpload;
 };
 
 const updateFileList: UploadProps['onUpdate:fileList'] = (fileList) => {
    fileList.forEach((file) => {
-      if (!file.fileName) file.fileName = file.name;
-      if (props.parentPath) file.name = path.join('/', props.parentPath, file.fileName);
+      const fileInfo = file as UploadFile<any>;
+      if (!fileInfo.fileName) fileInfo.fileName = fileInfo.name;
+      if (props.parentPath) fileInfo.name = path.join('/', props.parentPath, fileInfo.fileName);
+      if (!fileInfo.params) fileInfo.params = {};
+      fileInfo.params.FileKey = fileInfo.name;
+      fileInfo.status = UploadStatus.Pending;
    });
 };
 
@@ -101,6 +140,14 @@ const uploadProps = computed<UploadProps>(() => ({
    },
 }));
 
+watch(
+   () => props.fileList,
+   (newVal) => {
+      fileList.value = newVal;
+   },
+   { deep: true, immediate: true },
+);
+
 watch(
    () => fileList.value,
    (newVal) => {
@@ -109,16 +156,27 @@ watch(
    { deep: true },
 );
 
+watch(
+   () => props.parentPath,
+   (newVal) => {
+      if (newVal) {
+         fileList.value.forEach((file) => {
+            file.params.FileKey = path.join('/', newVal, file.fileName);
+         });
+      }
+   },
+);
+
 const downloadFile = (index: number) => {
-   const fileInfo = fileList.value[index].minioFile!;
+   if (!props.downloadUrl) return;
+   const minioFile = fileList.value[index].minioFile!;
    const url: IUrlInfo = {
       api: props.downloadUrl.api,
       authorize: props.downloadUrl.authorize,
       url: props.downloadUrl.url,
-      // url: props.pageData.urls.download!.url,
       params: {
          Query: {
-            FileKey: fileInfo.Key,
+            FileKey: minioFile.Key,
          },
       },
    };
@@ -127,23 +185,34 @@ const downloadFile = (index: number) => {
 };
 
 const onlineOrOffline = (file: UploadFile) => {
-   file.status = file.status === UploadStatus.Offline ? UploadStatus.Online : UploadStatus.Offline;
-   file.minioFile!.Status = file.status;
+   if (file.minioFile) {
+      file.minioFile.Status = file.status!;
+   }
 };
 
 // const previewFile = (index: number) => {
-//    const fileInfo = fileList.value[index].minioFile;
+//    const fileInfo = internalFileList.value[index].minioFile;
 //    console.log(fileInfo);
 // };
 
 const removeFile = (index: number) => {
    fileList.value.splice(index, 1);
+   confirmOpen.value = false;
+};
+
+const confirmDelFile = (index: number, status?: UploadStatus) => {
+   if (status === UploadStatus.Pending) {
+      removeFile(index);
+      return;
+   }
+   confirmOpen.value = true;
 };
 
 const getPlaceholder = (): string => {
-   const typeMsg = props.fileExt && props.fileExt.length ? `文件必须为 ${props.fileExt.join('/')}` : '';
-   const sizeMsg = props.maxFileSize !== 0 ? `单文件最大 ${props.maxFileSize}MB` : '';
-   const countMsg = props.maxCount !== 0 ? `最多 ${props.maxCount} 个文件` : '';
+   const typeMsg =
+      props.fileExt && props.fileExt.length && props.fileExtTip ? `文件必须为 ${props.fileExt.join('/')}` : '';
+   const sizeMsg = props.maxFileSize !== 0 && props.maxFileSizeTip ? `单文件最大 ${props.maxFileSize}MB` : '';
+   const countMsg = props.maxCount !== 0 && props.maxCountTip ? `最多 ${props.maxCount} 个文件` : '';
 
    return [sizeMsg, typeMsg, countMsg].filter(Boolean).join('，');
 };
@@ -164,12 +233,13 @@ const getStatusColor = (status?: UploadStatus) => {
          return 'cyan';
    }
 };
+
 const getStatus = (status?: UploadStatus) => {
    switch (status) {
       case UploadStatus.Uploading:
          return '上传中';
       case UploadStatus.Success:
-         return '已完成';
+         return '上传完成';
       case UploadStatus.Error:
          return '上传失败';
       case UploadStatus.Online:
@@ -183,14 +253,20 @@ const getStatus = (status?: UploadStatus) => {
 </script>
 
 <template>
-   <div class="w-full border border-solid border-gray-100 mt-1 rounded-md py-5">
+   <div class="w-full border border-solid border-gray-100 mt-1 rounded-md py-5" :class="[errInfo?.errClass]">
       <div class="flex items-center justify-between w-full">
          <div class="w-35 mx-3">
-            <Upload ref="fileUploader" v-bind="uploadProps">
-               <Button>选择文件</Button>
+            <Upload
+               ref="fileUploader"
+               v-bind="uploadProps"
+               v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:upload' }"
+            >
+               <Button :class="[errInfo?.errClass + '-text']">选择文件</Button>
             </Upload>
          </div>
-         <div class="flex-1 text-sm text-gray-500">{{ getPlaceholder() }}</div>
+         <div class="flex-1 text-sm text-gray-500" :class="[errInfo?.errClass + '-text']">
+            {{ getPlaceholder() }}
+         </div>
          <!-- <Button v-if="!autoUpload" @click="manualUpload" class="mr-3">开始上传</Button> -->
       </div>
 
@@ -208,28 +284,92 @@ const getStatus = (status?: UploadStatus) => {
                   </span>
                </div>
                <div class="flex items-center">
-                  <span
-                     class="text-blue-500 hover:text-blue-700 mr-4 cursor-pointer"
-                     v-if="file.status == UploadStatus.Offline || file.status == UploadStatus.Online"
-                     @click="onlineOrOffline(file)"
-                     >{{ file.status == UploadStatus.Offline ? '上线' : '下线' }}</span
+                  <div
+                     class="mr-2"
+                     v-if="
+                        showOnlineSwitch && (file.status == UploadStatus.Online || file.status == UploadStatus.Offline)
+                     "
                   >
-                  <span
-                     v-if="file.status == UploadStatus.Offline || file.status == UploadStatus.Online"
-                     class="text-blue-500 hover:text-blue-700 mr-4 cursor-pointer"
-                     @click="downloadFile(index)"
-                     >下载</span
+                     <Tooltip title="上线或下线">
+                        <Switch
+                           v-model:checked="file.status"
+                           :data="[
+                              { label: '上线', value: UploadStatus.Online },
+                              { label: '下线', value: UploadStatus.Offline },
+                           ]"
+                           @change="onlineOrOffline(file)"
+                           v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:online' }"
+                        />
+                     </Tooltip>
+                  </div>
+                  <div
+                     class="flex items-center text-blue-500 hover:text-blue-700 mr-1 cursor-pointer"
+                     v-if="downloadUrl && (file.status == UploadStatus.Online || file.status == UploadStatus.Offline)"
                   >
+                     <Tooltip title="下载">
+                        <ToolIcon
+                           icon="icon-download"
+                           v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:download' }"
+                           clickable
+                           @click="downloadFile(index)"
+                        />
+                        <span
+                           v-if="showActionText"
+                           class="mr-2 text-sm text-nowrap"
+                           v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:download' }"
+                           @click="downloadFile(index)"
+                           >下载</span
+                        >
+                     </Tooltip>
+                  </div>
                   <!-- <span class="text-blue-500 hover:text-blue-700 mr-4" @click="previewFile(index)">预览</span> -->
-                  <span class="text-red-500 hover:text-red-700 cursor-pointer" @click="removeFile(index)">删除</span>
+                  <div class="flex items-center text-red-500 hover:text-red-700 cursor-pointer">
+                     <Popconfirm
+                        v-model:open="confirmOpen"
+                        cancelText="否"
+                        okText="是"
+                        title="确定删除该文件吗？"
+                        :okButtonProps="{ size: 'small' }"
+                        :cancelButtonProps="{ size: 'small' }"
+                        @confirm="removeFile(index)"
+                        @cancel="confirmOpen = false"
+                     >
+                        <Tooltip title="删除">
+                           <div @click="confirmDelFile(index, file.status)">
+                              <ToolIcon
+                                 icon="icon-new"
+                                 :angle="45"
+                                 v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:delete' }"
+                                 clickable
+                              />
+                              <span
+                                 v-if="showActionText"
+                                 class="text-sm text-nowrap"
+                                 v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:delete' }"
+                                 >删除</span
+                              >
+                           </div>
+                        </Tooltip>
+                     </Popconfirm>
+                  </div>
                </div>
             </div>
 
             <!-- 上传进度条 -->
-            <div>
+            <div v-if="file.status !== UploadStatus.Online && file.status !== UploadStatus.Offline && file.status !== UploadStatus.Success">
                <Progress :percent="file.percent" :stroke-width="2" :show-info="false" style="height: 2px"></Progress>
             </div>
          </div>
       </div>
    </div>
 </template>
+
+<style scoped>
+.error {
+   border-color: #ff4d4f80;
+   box-shadow: 0 0 3px 0 #ff4d4f;
+}
+.error-text {
+   color: #ff4d4f !important;
+}
+</style>

package/src/components/index.ts

@@ -1,5 +1,16 @@
 // 基础组件
-export { Button, Tooltip, AppIcon, Fullscreen, Helper, Icon, LayoutIcon, ProjectIcon, ToolIcon } from './common';
+export {
+   Button,
+   Tooltip,
+   AppIcon,
+   Fullscreen,
+   Helper,
+   Icon,
+   LayoutIcon,
+   ProjectIcon,
+   ToolIcon,
+   Loading,
+} from './common';
 
 // 内容组件
 export {
@@ -27,6 +38,7 @@ export {
    InputPassword,
    InputNumber,
    PropEditor,
+   type PropConfigItem,
    Radio,
    RadioStatus,
    RangePicker,

package/src/directives/permission.ts

@@ -12,7 +12,7 @@ type BehaviorType = 'remove' | 'disable';
  * 权限参数类型
  */
 interface PermissionParams {
-   url: string;
+   url?: string;
    role?: string | string[];
    permit?: string;
    behavior?: BehaviorType;
@@ -77,13 +77,18 @@ const checkPermission = (params: PermissionParams): boolean => {
    const userInfoStore = useUserInfo();
    const { url, role, permit } = params;
 
+   // 如果都没有配置，默认允许访问
+   if (isEmpty(role) && isEmpty(permit)) {
+      return true;
+   }
+
    // 获取当前URL，优先使用传入的url，否则使用当前路由路径
-   const currentUrl = url;
+   const currentUrl = url ?? window.location.hash?.split('#')?.[1] ?? window.location.pathname;
 
    if (EnvConfig.VITE_PERMISSION_MODE === 'role') {
       // 仅判断角色权限
-      if (!isEmpty(role) && role !== undefined) {
-         return userInfoStore.hasRole(role);
+      if (!isEmpty(role)) {
+         return userInfoStore.hasRole(role!);
       }
       // 如果没有配置角色，默认允许访问
       return true;
@@ -102,13 +107,8 @@ const checkPermission = (params: PermissionParams): boolean => {
       }
 
       // 检查功能权限
-      if (!isEmpty(permit) && typeof permit === 'string') {
-         hasPermitPermission = userInfoStore.hasPermit(currentUrl, permit);
-      }
-
-      // 如果都没有配置，默认允许访问
-      if (isEmpty(role) && isEmpty(permit)) {
-         return true;
+      if (!isEmpty(permit)) {
+         hasPermitPermission = userInfoStore.hasPermit(currentUrl, permit!);
       }
 
       // 任意一个有权限即可