@jzt-packages/components 1.0.0

package/src/JztTreeFilter/index.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="spd-card filter">
+    <h4 v-if="title" class="title sle">
+      {{ title }}
+    </h4>
+    <div class="search">
+      <el-input
+        v-model="filterText"
+        placeholder="输入关键字进行过滤"
+        clearable
+      />
+      <el-dropdown trigger="click">
+        <el-icon size="20"><More /></el-icon>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item @click="toggleTreeNodes(true)"
+              >展开全部</el-dropdown-item
+            >
+            <el-dropdown-item @click="toggleTreeNodes(false)"
+              >折叠全部</el-dropdown-item
+            >
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+    <el-scrollbar
+      :style="{ height: title ? `calc(100% - 95px)` : `calc(100% - 56px)` }"
+    >
+      <el-tree
+        ref="treeRef"
+        default-expand-all
+        :node-key="id"
+        :data="multiple ? treeData : treeAllData"
+        :show-checkbox="multiple"
+        :check-strictly="false"
+        :current-node-key="!multiple ? selected : ''"
+        :highlight-current="!multiple"
+        :expand-on-click-node="false"
+        :check-on-click-node="multiple"
+        :props="defaultProps"
+        :filter-node-method="filterNode"
+        :default-checked-keys="multiple ? selected : []"
+        @node-click="handleNodeClick"
+        @check="handleCheckChange"
+      >
+        <template #default="scope">
+          <span class="el-tree-node__label">
+            <slot :row="scope">
+              {{ scope.node.label }}
+            </slot>
+          </span>
+        </template>
+      </el-tree>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts" name="TreeFilter">
+import { ref, watch, onBeforeMount, nextTick } from "vue";
+import { ElTree } from "element-plus";
+
+// 接收父组件参数并设置默认值
+interface TreeFilterProps {
+  requestApi?: (data?: any) => Promise<any>; // 请求分类数据的 api ==> 非必传
+  data?: { [key: string]: any }[]; // 分类数据，如果有分类数据，则不会执行 api 请求 ==> 非必传
+  title?: string; // treeFilter 标题 ==> 非必传
+  id?: string; // 选择的id ==> 非必传，默认为 “id”
+  label?: string; // 显示的label ==> 非必传，默认为 “label”
+  multiple?: boolean; // 是否为多选 ==> 非必传，默认为 false
+  defaultValue?: any; // 默认选中的值 ==> 非必传
+}
+const props = withDefaults(defineProps<TreeFilterProps>(), {
+  id: "id",
+  label: "label",
+  multiple: false,
+});
+
+const defaultProps = {
+  children: "children",
+  label: props.label,
+};
+
+const treeRef = ref<InstanceType<typeof ElTree>>();
+const treeData = ref<{ [key: string]: any }[]>([]);
+const treeAllData = ref<{ [key: string]: any }[]>([]);
+
+const selected = ref();
+const setSelected = () => {
+  if (props.multiple)
+    selected.value = Array.isArray(props.defaultValue)
+      ? props.defaultValue
+      : [props.defaultValue];
+  else
+    selected.value =
+      typeof props.defaultValue === "string" ? props.defaultValue : "";
+};
+
+onBeforeMount(async () => {
+  setSelected();
+  if (props.requestApi) {
+    const { data } = await props.requestApi!();
+    treeData.value = data;
+    treeAllData.value = [{ id: "", [props.label]: "全部" }, ...data];
+  }
+});
+
+// 使用 nextTick 防止打包后赋值不生效，开发环境是正常的
+watch(
+  () => props.defaultValue,
+  () => nextTick(() => setSelected()),
+  { deep: true, immediate: true }
+);
+
+watch(
+  () => props.data,
+  () => {
+    if (props.data?.length) {
+      treeData.value = props.data;
+      treeAllData.value = [{ id: "", [props.label]: "全部" }, ...props.data];
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+const filterText = ref("");
+watch(filterText, (val) => {
+  treeRef.value!.filter(val);
+});
+
+// 过滤
+const filterNode = (value: string, data: { [key: string]: any }, node: any) => {
+  if (!value) return true;
+  let parentNode = node.parent,
+    labels = [node.label],
+    level = 1;
+  while (level < node.level) {
+    labels = [...labels, parentNode.label];
+    parentNode = parentNode.parent;
+    level++;
+  }
+  return labels.some((label) => label.indexOf(value) !== -1);
+};
+
+// 切换树节点的展开或折叠状态
+const toggleTreeNodes = (isExpand: boolean) => {
+  let nodes = treeRef.value?.store.nodesMap;
+  if (!nodes) return;
+  for (const node in nodes) {
+    if (nodes.hasOwnProperty(node)) {
+      nodes[node].expanded = isExpand;
+    }
+  }
+};
+
+// emit
+const emit = defineEmits<{
+  change: [value: any];
+}>();
+
+// 单选
+const handleNodeClick = (data: { [key: string]: any }) => {
+  if (props.multiple) return;
+  emit("change", data[props.id]);
+};
+
+// 多选
+const handleCheckChange = () => {
+  emit("change", treeRef.value?.getCheckedKeys());
+};
+
+// 暴露给父组件使用
+defineExpose({ treeData, treeAllData, treeRef });
+</script>
+
+<style scoped lang="scss">
+@use "./index";
+</style>

package/src/JztUploadFile/interface/index.ts

@@ -0,0 +1,21 @@
+// // /* FileType */
+// declare namespace File {
+//   type ImageMimeType =
+//     | 'image/apng'
+//     | 'image/bmp'
+//     | 'image/gif'
+//     | 'image/jpeg'
+//     | 'image/pjpeg'
+//     | 'image/png'
+//     | 'image/svg+xml'
+//     | 'image/tiff'
+//     | 'image/webp'
+//     | 'image/x-icon'
+
+//   type ExcelMimeType = 'application/vnd.ms-excel' | 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+
+//   type FileMimeType = 'image/jpeg' | 'image/pjpeg' | 'image/png' | 'image/webp' | 'image/x-icon' | 'application/pdf'
+
+//   type FilePostfixType = '.jpeg' | '.png' | '.jpg' | '.pdf'
+//   type ImagePostfixType = '.jpeg' | '.png' | '.jpg'
+// }

package/src/JztUploadFile/multiple.scss

@@ -0,0 +1,215 @@
+// 公共样式
+.no-upload {
+  :deep(.el-upload) {
+    display: none;
+  }
+}
+.is-error {
+  .upload {
+    :deep(.el-upload--picture-card),
+    :deep(.el-upload-dragger) {
+      border: 1px dashed var(--el-color-danger) !important;
+      &:hover {
+        border-color: var(--el-color-primary) !important;
+      }
+    }
+  }
+}
+:deep(.disabled) {
+  .el-upload--picture-card,
+  .el-upload-dragger {
+    cursor: not-allowed;
+    background: var(--el-disabled-bg-color) !important;
+    border: 1px dashed var(--el-border-color-darker);
+    &:hover {
+      border-color: var(--el-border-color-darker) !important;
+    }
+  }
+}
+:deep(.el-upload.el-upload--picture-card:not(.disabled)) {
+  background: #fff;
+}
+
+.el-upload__tip {
+  line-height: 15px;
+  text-align: left;
+}
+.upload-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 12px;
+  line-height: 30px;
+  color: var(--el-color-info);
+  .el-icon {
+    font-size: 28px;
+    color: var(--el-text-color-secondary);
+  }
+}
+//文件上传
+.file_upload_box {
+  .upload-btn {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    .el-button {
+      margin-right: 10px;
+    }
+  }
+}
+//图片上传
+.img_upload_box {
+  .no-border {
+    :deep(.el-upload--picture-card) {
+      border: none !important;
+    }
+  }
+  :deep(.upload) {
+    .el-upload-dragger {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      overflow: hidden;
+      border: 1px dashed var(--el-border-color-darker);
+      // border-radius: v-bind(borderRadius);
+      background-color: #fff !important;
+      &:hover {
+        border: 1px dashed var(--el-color-primary);
+      }
+    }
+    .el-upload-dragger.is-dragover {
+      background-color: var(--el-color-primary-light-9);
+      border: 2px dashed var(--el-color-primary) !important;
+    }
+    // .el-upload-list__item,
+    // .el-upload--picture-card {
+    //   width: v-bind(width);
+    //   height: v-bind(height);
+    //   // background-color: transparent;
+    //   border-radius: v-bind(borderRadius);
+    // }
+    .upload-image {
+      width: 100%;
+      height: 100%;
+      // object-fit: contain;
+      object-fit: cover;
+    }
+    .upload-handle {
+      position: absolute;
+      top: 0;
+      right: 0;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      background: rgb(0 0 0 / 60%);
+      opacity: 0;
+      transition: var(--el-transition-duration-fast);
+      .handle-icon {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 0 6%;
+        color: aliceblue;
+        .el-icon {
+          margin-bottom: 15%;
+          font-size: 140%;
+        }
+        span {
+          font-size: 100%;
+        }
+      }
+    }
+    .el-upload-list__item {
+      &:hover {
+        .upload-handle {
+          opacity: 1;
+        }
+      }
+    }
+  }
+  .el-upload__tip {
+    line-height: 15px;
+    text-align: left;
+  }
+}
+
+// 文件列表显示样式
+.el-upload-list__item {
+  width: 100%;
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: var(--el-text-color-regular);
+  font-size: 14px;
+  margin-bottom: 5px;
+  position: relative;
+  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+
+  &:hover {
+    background-color: var(--el-fill-color-light);
+    .result .delete {
+      display: block !important;
+    }
+    .result .success {
+      display: none !important;
+    }
+  }
+  .result {
+    padding: 0 10px;
+    .success {
+      display: inline-block !important;
+    }
+    .delete {
+      display: none !important;
+    }
+  }
+
+  .el-upload-list__item-name {
+    color: var(--el-text-color-regular);
+    display: inline-flex;
+    font-size: var(--el-font-size-base);
+    padding: 0 4px;
+    text-align: center;
+    transition: color var(--el-transition-duration);
+    overflow: hidden;
+    &:hover {
+      color: var(--el-color-primary);
+      cursor: pointer;
+    }
+  }
+  .fileName {
+    flex: 1;
+  }
+}
+
+.jzt-upload-loading {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: rgb(0 0 0 / 50%);
+  .loading-icon {
+    font-size: 24px;
+    color: #fff;
+    animation: rotate 1.5s linear infinite;
+  }
+}
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}