2025-03-26

2025-03-26 11:00:21 +08:00
parent 927d7381b8
commit b45f4950d3
468 changed files with 54473 additions and 124 deletions
--- a/src/components/ErrorMessage/403.vue
+++ b/src/components/ErrorMessage/403.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="not-container">
+        <img src="@/assets/images/403.png" class="not-img" alt="403" />
+        <div class="not-detail">
+            <h2>403</h2>
+            <h4>抱歉，您无权访问该页面~🙅‍♂️🙅‍♀️</h4>
+            <el-button type="primary" @click="router.push(HOME_URL)"> 返回首页 </el-button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="403">
+import { HOME_URL } from "@/config";
+import { useRouter } from "vue-router";
+const router = useRouter();
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>
--- a/src/components/ErrorMessage/404.vue
+++ b/src/components/ErrorMessage/404.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="not-container">
+        <img src="@/assets/images/404.png" class="not-img" alt="404" />
+        <div class="not-detail">
+            <h2>404</h2>
+            <h4>抱歉，您访问的页面不存在~🤷‍♂️🤷‍♀️</h4>
+            <el-button type="primary" @click="router.push(HOME_URL)"> 返回首页 </el-button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="404">
+import { HOME_URL } from "@/config";
+import { useRouter } from "vue-router";
+const router = useRouter();
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>
--- a/src/components/ErrorMessage/500.vue
+++ b/src/components/ErrorMessage/500.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="not-container">
+        <img src="@/assets/images/500.png" class="not-img" alt="500" />
+        <div class="not-detail">
+            <h2>500</h2>
+            <h4>抱歉，您的网络不见了~🤦‍♂️🤦‍♀️</h4>
+            <el-button type="primary" @click="router.push(HOME_URL)"> 返回首页 </el-button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="500">
+import { HOME_URL } from "@/config";
+import { useRouter } from "vue-router";
+const router = useRouter();
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>
--- a/src/components/ErrorMessage/index.scss
+++ b/src/components/ErrorMessage/index.scss
@@ -0,0 +1,32 @@
+.not-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    .not-img {
+        margin-right: 120px;
+    }
+    .not-detail {
+        display: flex;
+        flex-direction: column;
+        h2,
+        h4 {
+            padding: 0;
+            margin: 0;
+        }
+        h2 {
+            font-size: 60px;
+            color: var(--el-text-color-primary);
+        }
+        h4 {
+            margin: 30px 0 20px;
+            font-size: 19px;
+            font-weight: normal;
+            color: var(--el-text-color-regular);
+        }
+        .el-button {
+            width: 100px;
+        }
+    }
+}
--- a/src/components/FormTable/index.vue
+++ b/src/components/FormTable/index.vue
@@ -0,0 +1,246 @@
+<template>
+    <div class="detailsTable">
+        <!-- :row-style="rowStyle" -->
+        <el-table :data="tableData" :border="true" ref="tableRef" :height="height ? height : 340">
+            <template v-for="item in columns" :key="item.prop">
+                <el-table-column
+                    :prop="item.prop"
+                    :fixed="item.fixed"
+                    :align="item.align ? item.align : 'center'"
+                    :label="item.label"
+                    :width="item.width ? item.width : 'auto'"
+                    v-show="item.show"
+                    :sortable="item.sortable"
+                    :showOverflowTooltip="!item.formType"
+                >
+                    <template #header v-if="item.isHeaderIcon">
+                        <span class="iconfont icon-bianji1 iconfont-mg" style="font-size: 12px">
+                            {{ item.label }}
+                        </span>
+                        <span
+                            style="display: inline-block; margin-left: 4px; line-height: 20px; color: #f56c6c"
+                            v-if="item.required"
+                            >*</span
+                        >
+                        <el-tooltip effect="dark" :content="item.tooltip" placement="top" v-if="item.tooltip">
+                            <el-icon style="cursor: pointer"><QuestionFilled /></el-icon>
+                        </el-tooltip>
+                    </template>
+                    <template #default="scope" v-if="item.formType === 'inputNumber'">
+                        <el-input-number
+                            :min="1"
+                            :max="9999"
+                            :controls="true"
+                            style="width: 125px"
+                            v-model.trim="scope.row[item.prop]"
+                            :disabled="tableData[scope.$index].disabled"
+                            :placeholder="item.placeholder"
+                            :maxlength="item.maxLength"
+                            step-strictly
+                            :step="1"
+                            controls-position="right"
+                            @keyup.enter="handleEnterInput(item, scope.$index)"
+                        ></el-input-number>
+                    </template>
+
+                    <template #default="scope" v-if="item.formType === 'input'">
+                        <el-input
+                            :style="item.width ? item.width : 'width:200px'"
+                            v-model.trim="scope.row[item.prop]"
+                            :disabled="tableData[scope.$index].disabled"
+                            :placeholder="item.placeholder"
+                            :maxlength="item.maxLength"
+                            @keyup.enter="handleEnterInput(item, scope.$index)"
+                            ref="inputRef"
+                        ></el-input>
+                    </template>
+
+                    <template #default="scope" v-if="item.formType === 'selectRemote'">
+                        <el-select
+                            :style="item.width ? item.width : 'width:200px'"
+                            v-model.trim="scope.row[item.prop]"
+                            :placeholder="item.placeholder"
+                            clearable
+                            remote
+                            reserve-keyword
+                            filterable
+                            class="m-2 select"
+                            remote-show-suffix
+                            :remote-method="
+                                (query:any) => {
+                                  remoteMethod(
+                                    query,
+                                    item.prop,
+                                    scope.$index
+                                  );
+                                }
+                              "
+                            :disabled="item.disabled"
+                        >
+                            <el-option
+                                :label="option.label"
+                                :value="option.value"
+                                v-for="option in item.options"
+                                :key="option.label"
+                                @click="handleRemoteItemClick(option, scope.$index)"
+                            />
+                        </el-select>
+                    </template>
+
+                    <template v-if="item.formType === 'img'" #default="scope">
+                        <UploadImg v-model:image-url="scope.row[item.prop]" height="104px" width="104px"> </UploadImg>
+                    </template>
+                    <template v-if="item.formType === 'imgs'" #default="scope">
+                        <div style="" class="imgsBox">
+                            <UploadImgs v-model:fileList="scope.row[item.prop]" height="80px" width="80px" />
+                        </div>
+                    </template>
+                    <template #default="scope" v-if="item.formType === 'select'">
+                        <el-select v-model="scope.row[item.prop]" :placeholder="item.placeholder" style="width: 200px">
+                            <el-option
+                                v-for="option in item.options"
+                                :key="option.value"
+                                :label="option.label"
+                                :value="option.value"
+                                @click="handleOptionsItemClick(item, option.value, scope.$index)"
+                            />
+                        </el-select>
+                    </template>
+                    <!-- #default="scope" -->
+                    <template v-if="item.formType === 'up'" #default="scope">
+                        <slot name="up" v-bind="scope"></slot>
+                        <!-- <el-upload
+                            action="#"
+                            class="upload"
+                            :limit="1"
+                            :multiple="true"
+                            :show-file-list="true"
+                            :http-request="uploadExcel"
+                            :before-upload="beforeExcelUpload"
+                            :on-exceed="handleExceed"
+                            :on-success="excelUploadSuccess"
+                            :on-error="excelUploadError"
+                            :accept="filesType!.join(',')"
+                        >
+                            <el-button type="primary" size="small" @click="handleBtnClick(scope)">选择文件11</el-button>
+                        </el-upload> -->
+                    </template>
+                    <!-- 最后一列的按钮 这是一个具名插槽 -->
+                    <template #default="scope" v-if="item.prop === 'operation'">
+                        <slot name="operation" v-bind="scope"></slot>
+                    </template>
+                </el-table-column>
+            </template>
+        </el-table>
+    </div>
+</template>
+
+<script lang="ts" setup name="FormTable">
+import UploadImg from "@/components/Upload/UploadImg.vue";
+import UploadImgs from "@/components/Upload/UploadImgs.vue";
+
+// import { Plus } from "@element-plus/icons-vue";
+import { ElTable, ElTableColumn } from "element-plus";
+import { QuestionFilled } from "@element-plus/icons-vue";
+const props = defineProps<{
+    columns: any;
+    // rowStyle?: (params: any) => void;
+    tableData?: any;
+    height?: number;
+    getRemoteData?: (params: any) => void;
+    handleImgClick?: (params: any) => void;
+    handleKeyupEnterInputValue?: (params: any) => void;
+    handleRemote?: (params: any) => void;
+    handleRemoteClick?: (params: any) => void;
+    handleSelectItemClick?: (params: any) => void;
+    loading?: any;
+}>();
+
+console.log(props, "=========props===========");
+const emits = defineEmits<{
+    (e: "handleImgClick", params: any): void;
+    (e: "handleKeyupEnterInputValue", params: any): void;
+    (e: "handleRemote", params: any): void;
+    (e: "handleRemoteClick", params: any): void;
+    (e: "handleSelectItemClick", params: any): void;
+}>();
+//表格实例
+const tableRef = ref<any>(null);
+const inputRef = ref<any>(null);
+const selectRemote1Ref = ref<any>(null);
+
+const handleOptionsItemClick = (item: any, value: any, index: number) => {
+    emits("handleSelectItemClick", {
+        item,
+        value,
+        index
+    });
+};
+
+const handleRemoteItemClick = (item: any, index: number) => {
+    emits("handleRemoteClick", { item, index });
+};
+//远程搜索
+const remoteMethod = (query: any, prop: any, index: number) => {
+    if (!query) {
+        return;
+    }
+    emits("handleRemote", { query, prop, index });
+};
+const handleEnterInput = (item: any, index: number) => {
+    emits("handleKeyupEnterInputValue", {
+        item,
+        index
+    });
+};
+
+// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
+defineExpose({
+    element: tableRef,
+    inputElement: inputRef,
+    selectRemoteElement: selectRemote1Ref
+});
+</script>
+
+<style lang="scss" scoped>
+::v-deep(.table-box .el-table .el-table__header .el-table__cell > .cell) {
+    .cell {
+        display: flex !important;
+    }
+}
+::v-deep(.el-table__row td) {
+    div {
+        white-space: wrap;
+    }
+}
+::v-deep(.el-table__body-wrapper .el-table__body) {
+    min-height: 51px !important;
+    max-height: 90% !important;
+    overflow-y: auto !important;
+}
+::v-deep(.el-upload-list) {
+    width: 200px;
+    margin: 0;
+}
+::v-deep(.el-upload-list__item) {
+    margin: 0;
+}
+.iconBox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 80px;
+    height: 80px;
+    margin: 0 auto;
+    cursor: pointer;
+    border: 1px solid #66666666;
+    border-radius: 10px;
+}
+.imgsBox {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+
+    // flex-direction: row;
+}
+</style>
--- a/src/components/Grid/components/GridItem.vue
+++ b/src/components/Grid/components/GridItem.vue
@@ -0,0 +1,68 @@
+<template>
+    <div v-show="isShow" :style="style">
+        <slot></slot>
+    </div>
+</template>
+<script setup lang="ts" name="GridItem">
+import { computed, inject, Ref, ref, useAttrs, watch } from "vue";
+import { BreakPoint, Responsive } from "../interface/index";
+
+type Props = {
+    offset?: number;
+    span?: number;
+    suffix?: boolean;
+    xs?: Responsive;
+    sm?: Responsive;
+    md?: Responsive;
+    lg?: Responsive;
+    xl?: Responsive;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+    offset: 0,
+    span: 1,
+    suffix: false,
+    xs: undefined,
+    sm: undefined,
+    md: undefined,
+    lg: undefined,
+    xl: undefined
+});
+
+const attrs = useAttrs() as { index: string };
+const isShow = ref(true);
+
+// 注入断点
+const breakPoint = inject<Ref<BreakPoint>>("breakPoint", ref("xl"));
+const shouldHiddenIndex = inject<Ref<number>>("shouldHiddenIndex", ref(-1));
+watch(
+    () => [shouldHiddenIndex.value, breakPoint.value],
+    n => {
+        if (!!attrs.index) {
+            isShow.value = !(n[0] !== -1 && parseInt(attrs.index) >= Number(n[0]));
+        }
+    },
+    { immediate: true }
+);
+
+const gap = inject("gap", 0);
+const cols = inject("cols", ref(4));
+const style = computed(() => {
+    let span = props[breakPoint.value]?.span ?? props.span;
+    let offset = props[breakPoint.value]?.offset ?? props.offset;
+    if (props.suffix) {
+        return {
+            gridColumnStart: cols.value - span - offset + 1,
+            gridColumnEnd: `span ${span + offset}`,
+            marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"
+        };
+    } else {
+        return {
+            gridColumn: `span ${span + offset > cols.value ? cols.value : span + offset}/span ${
+                span + offset > cols.value ? cols.value : span + offset
+            }`,
+            marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"
+        };
+    }
+});
+</script>
--- a/src/components/Grid/index.vue
+++ b/src/components/Grid/index.vue
@@ -0,0 +1,167 @@
+<template>
+    <div :style="style">
+        <slot></slot>
+    </div>
+</template>
+
+<script setup lang="ts" name="Grid">
+import {
+    ref,
+    watch,
+    useSlots,
+    computed,
+    provide,
+    onBeforeMount,
+    onMounted,
+    onUnmounted,
+    onDeactivated,
+    onActivated,
+    VNodeArrayChildren,
+    VNode
+} from "vue";
+import type { BreakPoint } from "./interface/index";
+
+type Props = {
+    cols?: number | Record<BreakPoint, number>;
+    collapsed?: boolean;
+    collapsedRows?: number;
+    gap?: [number, number] | number;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+    cols: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }),
+    collapsed: false,
+    collapsedRows: 1,
+    gap: 0
+});
+
+onBeforeMount(() => props.collapsed && findIndex());
+onMounted(() => {
+    resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent);
+    window.addEventListener("resize", resize);
+});
+onActivated(() => {
+    resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent);
+    window.addEventListener("resize", resize);
+});
+onUnmounted(() => {
+    window.removeEventListener("resize", resize);
+});
+onDeactivated(() => {
+    window.removeEventListener("resize", resize);
+});
+
+// 监听屏幕变化
+const resize = (e: UIEvent) => {
+    let width = (e.target as Window).innerWidth;
+    switch (!!width) {
+        case width < 768:
+            breakPoint.value = "xs";
+            break;
+        case width >= 768 && width < 992:
+            breakPoint.value = "sm";
+            break;
+        case width >= 992 && width < 1200:
+            breakPoint.value = "md";
+            break;
+        case width >= 1200 && width < 1920:
+            breakPoint.value = "lg";
+            break;
+        case width >= 1920:
+            breakPoint.value = "xl";
+            break;
+    }
+};
+
+// 注入 gap 间距
+provide("gap", Array.isArray(props.gap) ? props.gap[0] : props.gap);
+
+// 注入响应式断点
+let breakPoint = ref<BreakPoint>("xl");
+provide("breakPoint", breakPoint);
+
+// 注入要开始折叠的 index
+const hiddenIndex = ref(-1);
+provide("shouldHiddenIndex", hiddenIndex);
+
+// 注入 cols
+const gridCols = computed(() => {
+    if (typeof props.cols === "object") return props.cols[breakPoint.value] ?? props.cols;
+    return props.cols;
+});
+provide("cols", gridCols);
+
+// 寻找需要开始折叠的字段 index
+const slots = useSlots().default!();
+
+const findIndex = () => {
+    let fields: VNodeArrayChildren = [];
+    let suffix: VNode | null = null;
+    slots.forEach((slot: any) => {
+        // suffix
+        if (typeof slot.type === "object" && slot.type.name === "GridItem" && slot.props?.suffix !== undefined) suffix = slot;
+        // slot children
+        if (typeof slot.type === "symbol" && Array.isArray(slot.children)) fields.push(...slot.children);
+    });
+
+    // 计算 suffix 所占用的列
+    let suffixCols = 0;
+    if (suffix) {
+        suffixCols =
+            ((suffix as VNode).props![breakPoint.value]?.span ?? (suffix as VNode).props?.span ?? 1) +
+            ((suffix as VNode).props![breakPoint.value]?.offset ?? (suffix as VNode).props?.offset ?? 0);
+    }
+    try {
+        let find = false;
+        fields.reduce((prev = 0, current, index) => {
+            prev +=
+                ((current as VNode)!.props![breakPoint.value]?.span ?? (current as VNode)!.props?.span ?? 1) +
+                ((current as VNode)!.props![breakPoint.value]?.offset ?? (current as VNode)!.props?.offset ?? 0);
+            if (Number(prev) > props.collapsedRows * gridCols.value - suffixCols) {
+                hiddenIndex.value = index;
+                find = true;
+                throw "find it";
+            }
+            return prev;
+        }, 0);
+        if (!find) hiddenIndex.value = -1;
+    } catch (e) {
+        // console.warn(e);
+    }
+};
+
+// 断点变化时 执行 findIndex
+watch(
+    () => breakPoint.value,
+    () => {
+        if (props.collapsed) findIndex();
+    }
+);
+
+// 监听 collapsed
+watch(
+    () => props.collapsed,
+    value => {
+        if (value) return findIndex();
+        hiddenIndex.value = -1;
+    }
+);
+
+// 设置间距
+const gridGap = computed(() => {
+    if (typeof props.gap === "number") return `${props.gap}px`;
+    if (Array.isArray(props.gap)) return `${props.gap[1]}px ${props.gap[0]}px`;
+    return "unset";
+});
+
+// 设置 style
+const style = computed(() => {
+    return {
+        display: "grid",
+        gridGap: gridGap.value,
+        gridTemplateColumns: `repeat(${gridCols.value}, minmax(0, 1fr))`
+    };
+});
+
+defineExpose({ breakPoint });
+</script>
--- a/src/components/Grid/interface/index.ts
+++ b/src/components/Grid/interface/index.ts
@@ -0,0 +1,6 @@
+export type BreakPoint = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type Responsive = {
+    span?: number;
+    offset?: number;
+};
--- a/src/components/ImportExcel/index.scss
+++ b/src/components/ImportExcel/index.scss
@@ -0,0 +1,3 @@
+.upload {
+    width: 80%;
+}
--- a/src/components/ImportExcel/index.vue
+++ b/src/components/ImportExcel/index.vue
@@ -0,0 +1,146 @@
+<template>
+    <el-dialog v-model="dialogVisible" :title="`批量添加${parameter.title}`" :destroy-on-close="true" width="580px" draggable>
+        <el-form class="drawer-multiColumn-form" label-width="100px">
+            <!-- <el-form-item label="模板下载 :">
+                <el-button type="primary" :icon="Download" @click="downloadTemp"> 点击下载 </el-button>
+            </el-form-item> -->
+            <el-form-item label="文件上传 :">
+                <el-upload
+                    action="#"
+                    class="upload"
+                    :drag="true"
+                    :limit="excelLimit"
+                    :multiple="true"
+                    :show-file-list="true"
+                    :http-request="uploadExcel"
+                    :before-upload="beforeExcelUpload"
+                    :on-exceed="handleExceed"
+                    :on-success="excelUploadSuccess"
+                    :on-error="excelUploadError"
+                    :accept="parameter.fileType!.join(',')"
+                >
+                    <slot name="empty">
+                        <el-icon class="el-icon--upload">
+                            <upload-filled />
+                        </el-icon>
+                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                    </slot>
+                    <template #tip>
+                        <slot name="tip">
+                            <div class="el-upload__tip">
+                                请上传 .xls , .xlsx 标准格式文件，文件最大为 {{ parameter.fileSize }}M
+                            </div>
+                        </slot>
+                    </template>
+                </el-upload>
+            </el-form-item>
+            <el-form-item label="数据覆盖 :">
+                <el-switch v-model="isCover" />
+            </el-form-item>
+        </el-form>
+    </el-dialog>
+</template>
+
+<script setup lang="ts" name="ImportExcel">
+import { ref } from "vue";
+// import { useDownload } from "@/hooks/useDownload";
+
+// import { Download } from "@element-plus/icons-vue";
+import { ElNotification, UploadRequestOptions, UploadRawFile } from "element-plus";
+
+import { UploadFilled } from "@element-plus/icons-vue";
+export interface ExcelParameterProps {
+    title: string; // 标题
+    fileSize?: number; // 上传文件的大小
+    fileType?: File.ExcelMimeType[]; // 上传文件的类型
+    tempApi?: (params: any) => Promise<any>; // 下载模板的Api
+    importApi?: (params: any) => Promise<any>; // 批量导入的Api
+    proTableRef?: any;
+}
+
+// 是否覆盖数据
+const isCover = ref(false);
+// 最大文件上传数
+const excelLimit = ref(1);
+// dialog状态
+const dialogVisible = ref(false);
+// 父组件传过来的参数
+const parameter = ref<ExcelParameterProps>({
+    title: "",
+    fileSize: 5,
+    fileType: ["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"]
+});
+
+// 接收父组件参数
+const acceptParams = (params: ExcelParameterProps) => {
+    parameter.value = { ...parameter.value, ...params };
+    dialogVisible.value = true;
+};
+
+// 文件上传
+const uploadExcel = async (param: UploadRequestOptions) => {
+    let excelFormData = new FormData();
+    excelFormData.append("file", param.file);
+    await parameter.value.importApi!(excelFormData);
+    parameter?.value?.proTableRef?.getTableList && parameter?.value?.proTableRef?.getTableList();
+    dialogVisible.value = false;
+};
+
+/**
+ * @description 文件上传之前判断
+ * @param file 上传的文件
+ * */
+const beforeExcelUpload = (file: UploadRawFile) => {
+    const isExcel = parameter.value.fileType!.includes(file.type as File.ExcelMimeType);
+    const fileSize = file.size / 1024 / 1024 < parameter.value.fileSize!;
+    if (!isExcel)
+        ElNotification({
+            title: "温馨提示",
+            message: "上传文件只能是 xls / xlsx 格式！",
+            type: "warning"
+        });
+    if (!fileSize)
+        setTimeout(() => {
+            ElNotification({
+                title: "温馨提示",
+                message: `上传文件大小不能超过 ${parameter.value.fileSize}MB！`,
+                type: "warning"
+            });
+        }, 0);
+    return isExcel && fileSize;
+};
+
+// 文件数超出提示
+const handleExceed = () => {
+    ElNotification({
+        title: "温馨提示",
+        message: "最多只能上传一个文件！",
+        type: "warning"
+    });
+};
+
+// 上传错误提示
+const excelUploadError = () => {
+    ElNotification({
+        title: "温馨提示",
+        message: `批量添加${parameter.value.title}失败，请您重新上传！`,
+        type: "error"
+    });
+};
+
+// 上传成功提示
+const excelUploadSuccess = () => {
+    ElNotification({
+        title: "温馨提示",
+        message: `批量添加${parameter.value.title}成功！`,
+        type: "success"
+    });
+};
+
+defineExpose({
+    acceptParams
+});
+</script>
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>
--- a/src/components/Loading/index.scss
+++ b/src/components/Loading/index.scss
@@ -0,0 +1,67 @@
+.loading-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    .loading-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 98px;
+    }
+}
+.dot {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    font-size: 32px;
+    transform: rotate(45deg);
+    animation: ant-rotate 1.2s infinite linear;
+}
+.dot i {
+    position: absolute;
+    display: block;
+    width: 14px;
+    height: 14px;
+    background-color: var(--el-color-primary);
+    border-radius: 100%;
+    opacity: 0.3;
+    transform: scale(0.75);
+    transform-origin: 50% 50%;
+    animation: ant-spin-move 1s infinite linear alternate;
+}
+.dot i:nth-child(1) {
+    top: 0;
+    left: 0;
+}
+.dot i:nth-child(2) {
+    top: 0;
+    right: 0;
+    animation-delay: 0.4s;
+}
+.dot i:nth-child(3) {
+    right: 0;
+    bottom: 0;
+    animation-delay: 0.8s;
+}
+.dot i:nth-child(4) {
+    bottom: 0;
+    left: 0;
+    animation-delay: 1.2s;
+}
+
+@keyframes ant-rotate {
+    to {
+        transform: rotate(405deg);
+    }
+}
+
+@keyframes ant-spin-move {
+    to {
+        opacity: 1;
+    }
+}
--- a/src/components/Loading/index.vue
+++ b/src/components/Loading/index.vue
@@ -0,0 +1,13 @@
+<template>
+    <div class="loading-box">
+        <div class="loading-wrap">
+            <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="Loading"></script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>
--- a/src/components/ProTable/components/ColSetting.vue
+++ b/src/components/ProTable/components/ColSetting.vue
@@ -0,0 +1,45 @@
+<template>
+    <!-- 列设置 -->
+    <el-drawer v-model="drawerVisible" title="列设置" size="450px">
+        <div class="table-main">
+            <el-table :data="colSetting" :border="true" row-key="prop" default-expand-all :tree-props="{ children: '_children' }">
+                <el-table-column prop="label" align="center" label="列名" />
+                <el-table-column v-slot="scope" prop="isShow" align="center" label="显示">
+                    <el-switch v-model="scope.row.isShow"></el-switch>
+                </el-table-column>
+                <el-table-column v-slot="scope" prop="sortable" align="center" label="排序">
+                    <el-switch v-model="scope.row.sortable"></el-switch>
+                </el-table-column>
+                <template #empty>
+                    <div class="table-empty">
+                        <img src="@/assets/images/notData.png" alt="notData" />
+                        <div>暂无可配置列</div>
+                    </div>
+                </template>
+            </el-table>
+        </div>
+    </el-drawer>
+</template>
+
+<script setup lang="ts" name="ColSetting">
+import { ref } from "vue";
+import { ColumnProps } from "@/components/ProTable/interface";
+
+defineProps<{ colSetting: ColumnProps[] }>();
+
+const drawerVisible = ref<boolean>(false);
+
+const openColSetting = () => {
+    drawerVisible.value = true;
+};
+
+defineExpose({
+    openColSetting
+});
+</script>
+
+<style scoped lang="scss">
+.cursor-move {
+    cursor: move;
+}
+</style>
--- a/src/components/ProTable/components/Empty.vue
+++ b/src/components/ProTable/components/Empty.vue
@@ -0,0 +1,12 @@
+<template>
+    <div class="table-empty">
+        <slot name="empty">
+            <img src="@/assets/images/notData.png" alt="notData" />
+            <div>暂无数据</div>
+        </slot>
+    </div>
+</template>
+
+<script setup name="Empty"></script>
+
+<style lang="scss" scoped></style>
--- a/src/components/ProTable/components/Pagination.vue
+++ b/src/components/ProTable/components/Pagination.vue
@@ -0,0 +1,31 @@
+<template>
+    <!-- 分页组件 -->
+    <el-pagination
+        :background="true"
+        :current-page="pageable.page"
+        :page-size="pageable.size"
+        :page-sizes="pageSizes"
+        :total="pageable.total"
+        layout="slot,sizes, total,prev,pager, next,jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+    >
+    </el-pagination>
+</template>
+
+<script setup lang="ts" name="Pagination">
+interface Pageable {
+    page: number;
+    size: number;
+    total: number;
+}
+//pageSize
+interface PaginationProps {
+    pageable: Pageable;
+    handleSizeChange: (size: number) => void;
+    handleCurrentChange: (currentPage: number) => void;
+    pageSizes: any;
+}
+
+defineProps<PaginationProps>();
+</script>
--- a/src/components/ProTable/components/TableColumn.vue
+++ b/src/components/ProTable/components/TableColumn.vue
@@ -0,0 +1,90 @@
+<template>
+    <RenderTableColumn v-bind="column" />
+</template>
+
+<script setup lang="tsx" name="TableColumn">
+import { inject, ref, useSlots } from "vue";
+import { ColumnProps, RenderScope, HeaderRenderScope } from "@/components/ProTable/interface";
+import { filterEnum, formatValue, handleProp, handleRowAccordingToProp } from "@/utils";
+
+defineProps<{ column: ColumnProps }>();
+
+const slots = useSlots();
+
+const enumMap = inject("enumMap", ref(new Map()));
+
+// 渲染表格数据
+const renderCellData = (item: ColumnProps, scope: RenderScope<any>) => {
+    return enumMap.value.get(item.prop) && item.isFilterEnum
+        ? filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop)!, item.fieldNames)
+        : formatValue(handleRowAccordingToProp(scope.row, item.prop!));
+};
+
+// 获取 tag 类型
+const getTagType = (item: ColumnProps, scope: RenderScope<any>) => {
+    return filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop), item.fieldNames, "tag");
+};
+
+const RenderTableColumn = (item: ColumnProps) => {
+    return (
+        <>
+            {item.isShow && (
+                <el-table-column
+                    {...item}
+                    align={item.align ?? "center"}
+                    showOverflowTooltip={item.showOverflowTooltip ?? item.prop !== "operation"}
+                >
+                    {{
+                        default: (scope: RenderScope<any>) => {
+                            if (item._children) return item._children.map(child => RenderTableColumn(child));
+                            if (item.render) return item.render(scope);
+                            if (slots[handleProp(item.prop!)]) return slots[handleProp(item.prop!)]!(scope);
+                            if (item.tag) return <el-tag type={getTagType(item, scope)}>{renderCellData(item, scope)}</el-tag>;
+                            return renderCellData(item, scope);
+                        },
+                        header: (scope: HeaderRenderScope<any>) => {
+                            if (item.headerRender) return item.headerRender(scope);
+                            if (slots[`${handleProp(item.prop!)}Header`]) return slots[`${handleProp(item.prop!)}Header`]!(scope);
+                            return item.label;
+                        }
+                    }}
+                </el-table-column>
+            )}
+        </>
+    );
+};
+</script>
+<style scope lang="scss">
+.color-a {
+    color: #909399;
+}
+.color-b {
+    color: #409eff;
+}
+.color-c {
+    color: #67c23a;
+}
+.color-d {
+    color: #e6a23c;
+}
+
+// .label {
+//     width: 100%;
+//     border-right: 1px solid #ced1d9;
+// }
+
+// .table-main .el-table .el-table__header .el-table__cell > .cell {
+//     width: 100%;
+//     height: 18px;
+//     border-right: 1px solid #ced1d9;
+// }
+// .table-main .el-table .el-table__header .el-table__cell:first-child > .cell {
+//     border-right: none;
+// }
+// .table-main .el-table .el-table__header .el-table__cell:last-child > .cell {
+//     border-right: none;
+// }
+// .el-table.is-scrolling-left th.el-table-fixed-column--left {
+//     background-color: #f5f7fa;
+// }
+</style>
--- a/src/components/ProTable/index.vue
+++ b/src/components/ProTable/index.vue
@@ -0,0 +1,217 @@
+<template>
+    <!-- 表格内容 card -->
+    <div :class="!isBoxClass ? '' : 'card table-main'">
+        <!-- 查询表单 card -->
+        <SearchForm
+            v-show="isShowSearch"
+            :search="search"
+            :reset="reset"
+            :formData="formData"
+            :search-param="searchParam"
+            :search-col="searchCol"
+        />
+        <!-- 表格头部 操作按钮 -->
+        <div class="table-header">
+            <div class="header-button-lf">
+                <slot
+                    name="tableHeader"
+                    :selected-list-ids="selectedListIds"
+                    :selected-list="selectedList"
+                    :is-selected="isSelected"
+                />
+            </div>
+        </div>
+        <!-- 表格主体 -->
+        <el-table
+            ref="tableRef"
+            v-bind="$attrs"
+            :data="data ?? tableData"
+            :border="border"
+            :row-key="rowKey"
+            @selection-change="selectionChange"
+            :style="!isBoxClass ? 'height: 400px; overflow-y: auto' : ''"
+        >
+            <!-- 默认插槽 -->
+            <slot></slot>
+            <template v-for="item in tableColumns" :key="item">
+                <!-- selection || index || expand -->
+                <el-table-column
+                    v-if="item.type && ['selection', 'index', 'expand'].includes(item.type)"
+                    v-bind="item"
+                    :align="item.align ?? 'center'"
+                    :reserve-selection="item.type == 'selection'"
+                >
+                    <template v-if="item.type == 'expand'" #default="scope">
+                        <component :is="item.render" v-bind="scope" v-if="item.render"> </component>
+                        <slot v-else :name="item.type" v-bind="scope"></slot>
+                    </template>
+                </el-table-column>
+                <!-- other -->
+                <TableColumn v-if="!item.type && item.prop && item.isShow" :column="item">
+                    <template v-for="slot in Object.keys($slots)" #[slot]="scope">
+                        <slot :name="slot" v-bind="scope"></slot>
+                    </template>
+                </TableColumn>
+            </template>
+            <!-- 插入表格最后一行之后的插槽 -->
+            <template #append>
+                <slot name="append"> </slot>
+            </template>
+            <!-- 无数据 -->
+            <template #empty>
+                <div class="table-empty">
+                    <slot name="empty">
+                        <img src="@/assets/images/notData.png" alt="notData" />
+                        <div>暂无数据</div>
+                    </slot>
+                </div>
+            </template>
+        </el-table>
+        <!-- 分页组件 -->
+        <slot name="pagination">
+            <Pagination
+                :pageable="pageable"
+                :handle-size-change="handleSizeChange"
+                :handle-current-change="handleCurrentChange"
+                :pageSizes="pageSizes"
+            />
+        </slot>
+    </div>
+    <!-- 列设置 -->
+    <ColSetting v-if="toolButton" ref="colRef" v-model:col-setting="colSetting" />
+</template>
+
+<script setup lang="ts" name="ProTable">
+// /watch
+import { ref, provide, onMounted, watch } from "vue";
+import { ElTable } from "element-plus";
+import { useTable } from "@/hooks/useTable";
+import { useSelection } from "@/hooks/useSelection";
+import { BreakPoint } from "@/components/Grid/interface";
+import { ColumnProps } from "@/components/ProTable/interface";
+import SearchForm from "@/components/SearchForm/index.vue";
+import Pagination from "./components/Pagination.vue";
+import ColSetting from "./components/ColSetting.vue";
+import TableColumn from "./components/TableColumn.vue";
+const $router = useRouter();
+const routeName: any = ref($router.currentRoute.value.name);
+export interface ProTableProps {
+    columns: ColumnProps[]; // 列配置项  ==> 必传
+    formData?: any[];
+    isBoxClass?: boolean;
+    data?: any[]; // 静态 table data 数据，若存在则不会使用 requestApi 返回的 data ==> 非必传
+    requestApi?: any; //(params: any) => Promise<any>; // 请求表格数据的 api ==> 非必传
+    requestAuto?: boolean; // 是否自动执行请求 api ==> 非必传（默认为true）
+    requestError?: (params: any) => void; // 表格 api 请求错误监听 ==> 非必传
+    dataCallback?: (data: any) => any; // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
+    title?: string; // 表格标题，目前只在打印的时候用到 ==> 非必传
+    pagination?: boolean; // 是否需要分页组件 ==> 非必传（默认为true）
+    initParam?: any; // 初始化请求参数 ==> 非必传（默认为{}）
+    orgCode?: any; //组织ID,组织id改变时，重新请求数据
+    border?: boolean; // 是否带有纵向边框 ==> 非必传（默认为true）
+    toolButton?: boolean; // 是否显示表格功能按钮 ==> 非必传（默认为true）
+    rowKey?: string; // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
+    searchCol?: number | Record<BreakPoint, number>; // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }
+    pageSizes?: any;
+}
+
+// 接受父组件参数，配置默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+    formData: () => [],
+    columns: () => [],
+    requestAuto: true,
+    pagination: true,
+    initParam: {},
+    isBoxClass: true,
+    border: true,
+    toolButton: true,
+    rowKey: `id`,
+    searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }),
+    pageSizes: [50, 100, 150, 200]
+});
+
+// 是否显示搜索模块
+const isShowSearch = ref(true);
+// 表格 DOM 元素
+const tableRef = ref<InstanceType<typeof ElTable>>();
+
+// 表格多选 Hooks
+const { selectionChange, selectedList, selectedListIds, isSelected } = useSelection(props.rowKey);
+
+// 清空选中数据列表
+const clearSelection = () => tableRef.value!.clearSelection();
+// 表格操作 Hooks
+const { tableData, pageable, searchParam, searchInitParam, getTableList, search, reset, handleSizeChange, handleCurrentChange } =
+    useTable(
+        routeName.value,
+        props.requestApi,
+        props.initParam,
+        props.pagination,
+        props.dataCallback,
+        props.requestError,
+        clearSelection
+    );
+// 初始化请求
+onMounted(() => props.requestAuto && getTableList());
+
+// 监听页面 initParam 改化，重新获取表格数据
+// watch(() => props.initParam, getTableList, { deep: true });
+// 监听页面 orgCode 改化，重新获取表格数据
+watch(() => props.orgCode, getTableList, { deep: true });
+// 接收 columns 并设置为响应式
+const tableColumns = ref<ColumnProps[]>(props.columns);
+
+// 定义 enumMap 存储 enum 值（避免异步请求无法格式化单元格内容 || 无法填充搜索下拉选择）
+const enumMap = ref(new Map<string, { [key: string]: any }[]>());
+provide("enumMap", enumMap);
+const setEnumMap = async (col: ColumnProps) => {
+    if (!col.enum) return;
+    // 如果当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
+    if (typeof col.enum !== "function") return enumMap.value.set(col.prop!, col.enum!);
+    const { data } = await col.enum();
+    enumMap.value.set(col.prop!, data);
+};
+
+// 扁平化 columns
+const flatColumnsFunc = (columns: ColumnProps[], flatArr: ColumnProps[] = []) => {
+    columns.forEach(async col => {
+        if (col._children?.length) flatArr.push(...flatColumnsFunc(col._children));
+        flatArr.push(col);
+        // 给每一项 column 添加 isShow && isFilterEnum 默认属性
+        col.isShow = col.isShow ?? true;
+        col.isFilterEnum = col.isFilterEnum ?? true;
+        // 设置 enumMap
+        setEnumMap(col);
+    });
+    return flatArr.filter(item => !item._children?.length);
+};
+
+// flatColumns
+const flatColumns = ref<ColumnProps[]>();
+flatColumns.value = flatColumnsFunc(tableColumns.value);
+
+// 列设置 ==> 过滤掉不需要设置的列
+const colRef = ref();
+const colSetting = tableColumns.value!.filter(
+    item => !["selection", "index", "expand"].includes(item.type!) && item.prop !== "operation" && item.isShow
+);
+
+// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
+defineExpose({
+    element: tableRef,
+    tableData,
+    pageable,
+    searchParam,
+    searchInitParam,
+    getTableList,
+    search,
+    reset,
+    handleSizeChange,
+    handleCurrentChange,
+    clearSelection,
+    enumMap,
+    isSelected,
+    selectedList,
+    selectedListIds
+});
+</script>
--- a/src/components/ProTable/interface/index.ts
+++ b/src/components/ProTable/interface/index.ts
@@ -0,0 +1,81 @@
+import { VNode, ComponentPublicInstance } from "vue";
+import { BreakPoint, Responsive } from "@/components/Grid/interface";
+import { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
+import { ProTableProps } from "@/components/ProTable/index.vue";
+import ProTable from "@/components/ProTable/index.vue";
+
+export interface EnumProps {
+    label?: string; // 选项框显示的文字
+    value?: string | number | boolean | any[]; // 选项框值
+    disabled?: boolean; // 是否禁用此选项
+    tagType?: string; // 当 tag 为 true 时，此选择会指定 tag 显示类型
+    children?: EnumProps[]; // 为树形选择时，可以通过 children 属性指定子选项
+    [key: string]: any;
+}
+
+export type TypeProps = "index" | "selection" | "expand";
+
+export type SearchType =
+    | "input"
+    | "input-number"
+    | "select"
+    | "select-v2"
+    | "tree-select"
+    | "cascader"
+    | "date-picker"
+    | "time-picker"
+    | "time-select"
+    | "switch"
+    | "slider";
+
+export type SearchRenderScope = {
+    searchParam: { [key: string]: any };
+    placeholder: string;
+    clearable: boolean;
+    options: EnumProps[];
+    data: EnumProps[];
+};
+
+export type SearchProps = {
+    el?: SearchType; // 当前项搜索框的类型
+    props?: any; // 搜索项参数，根据 element plus 官方文档来传递，该属性所有值会透传到组件
+    key?: string; // 当搜索项 key 不为 prop 属性时，可通过 key 指定
+    order?: number; // 搜索项排序（从大到小）
+    span?: number; // 搜索项所占用的列数，默认为1列
+    offset?: number; // 搜索字段左侧偏移列数
+    defaultValue?: string | number | boolean | any[]; // 搜索项默认值
+    render?: (scope: SearchRenderScope) => VNode; // 自定义搜索内容渲染（tsx语法）
+} & Partial<Record<BreakPoint, Responsive>>;
+
+export type FieldNamesProps = {
+    label: string;
+    value: string;
+    children?: string;
+};
+
+export type RenderScope<T> = {
+    row: T;
+    $index: number;
+    column: TableColumnCtx<T>;
+    [key: string]: any;
+};
+
+export type HeaderRenderScope<T> = {
+    $index: number;
+    column: TableColumnCtx<T>;
+    [key: string]: any;
+};
+
+export interface ColumnProps<T = any> extends Partial<Omit<TableColumnCtx<T>, "children" | "renderCell" | "renderHeader">> {
+    tag?: boolean; // 是否是标签展示
+    isShow?: boolean; // 是否显示在表格当中
+    search?: SearchProps | undefined; // 搜索项配置
+    enum?: EnumProps[] | ((params?: any) => Promise<any>); // 枚举类型（字典）
+    isFilterEnum?: boolean; // 当前单元格值是否根据 enum 格式化（示例：enum 只作为搜索项数据）
+    fieldNames?: FieldNamesProps; // 指定 label && value && children 的 key 值
+    headerRender?: (scope: HeaderRenderScope<T>) => VNode; // 自定义表头内容渲染（tsx语法）
+    render?: (scope: RenderScope<T>) => VNode | string; // 自定义单元格内容渲染（tsx语法）
+    _children?: ColumnProps<T>[]; // 多级表头
+}
+
+export type ProTableInstance = Omit<InstanceType<typeof ProTable>, keyof ComponentPublicInstance | keyof ProTableProps>;
--- a/src/components/SearchForm/components/SearchFormItem.vue
+++ b/src/components/SearchForm/components/SearchFormItem.vue
@@ -0,0 +1,255 @@
+<template>
+    <div>
+        <!-- 输入框 -->
+        <template v-if="item.type === 'input'">
+            <el-input
+                :placeholder="item.placeholder"
+                :maxlength="item.maxlength || 255"
+                v-model.trim="_searchParam[`${item.prop}`]"
+                style="width: 224px"
+                @input="handleInput(item)"
+                @keyup.enter="search"
+                clearable
+                @clear="handleEmitClear(item)"
+            />
+        </template>
+        <!-- 下拉框 -->
+        <template v-if="item.type === 'select'">
+            <el-select
+                v-model="_searchParam[`${item.prop}`]"
+                :placeholder="item.placeholder"
+                clearable
+                ref="selectRef"
+                style="width: 224px"
+            >
+                <el-option v-for="option in item.options" :label="option.label" :value="option.value" :key="option.label" />
+            </el-select>
+        </template>
+        <!-- 开始-结束-日期选择器 -->
+        <template v-if="item.type === 'daterange'">
+            <el-date-picker
+                v-model="_searchParam[`${item.prop}`]"
+                :type="item.type"
+                :start-placeholder="item.startPlaceholder"
+                :end-placeholder="item.endPlaceholder"
+                :defaultTime="item.value"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                style="width: 205px"
+                @change="handlePicker(item)"
+            />
+        </template>
+        <!-- 远程搜索 -->
+        <template v-if="item.type === 'selectRemote'">
+            <el-select
+                v-model="_searchParam[`${item.prop}`]"
+                :placeholder="item.placeholder"
+                clearable
+                remote
+                filterable
+                @clear="handleClear(item)"
+                :loading="loading"
+                class="m-2 select"
+                remote-show-suffix
+                :remote-method="
+                              (query:any) => {
+                                remoteMethod(
+                                  query,
+                                  item
+                                );
+                              }
+                            "
+                :disabled="item.disabled"
+                style="width: 224px"
+            >
+                <el-option :label="option.name" :value="option.id" v-for="option in item.options" :key="option.id" />
+            </el-select>
+            <!--item.prop -->
+        </template>
+        <!-- el-tree-select -->
+        <template v-if="item.type === 'treeSelect'">
+            <el-tree-select
+                v-model="_searchParam[`${item.prop}`]"
+                :data="item.options"
+                :placeholder="item.placeholder"
+                :render-after-expand="false"
+                show-checkbox
+                style="width: 224px"
+                clearable
+            />
+        </template>
+        <!-- 双 -->
+        <template v-if="item.type === 'inputs'">
+            <el-input
+                v-model.trim="_searchParam[`${item.startProp}`]"
+                :placeholder="item.startPlaceholder"
+                :disabled="item.disabled"
+                maxlength="255"
+                style="width: 105px !important"
+                @input="handleInput(item)"
+            >
+            </el-input>
+            <span style="margin: 0 3px">-</span>
+            <el-input
+                v-model.trim="_searchParam[`${item.endProp}`]"
+                :placeholder="item.endPlaceholder"
+                :disabled="item.disabled"
+                maxlength="255"
+                style="width: 106px !important"
+                @input="handleInput(item)"
+            />
+        </template>
+        <template v-if="item.type === 'dateTimerange'">
+            <el-date-picker
+                v-model="_searchParam[`${item.prop}`]"
+                type="datetimerange"
+                range-separator="至"
+                :start-placeholder="item.startPlaceholder"
+                :end-placeholder="item.endPlaceholder"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                style="width: 205px"
+            />
+        </template>
+
+        <template v-if="item.type === 'selectInputs'">
+            <div></div>
+            <el-select
+                v-model="selectInputValue"
+                placeholder="Select"
+                style="width: 102px; height: 30px; margin-right: 6px"
+                class="selectInputs-box"
+                @change="handleChange(item)"
+            >
+                <el-option
+                    v-for="optionsItem in options"
+                    :key="optionsItem.value"
+                    :label="optionsItem.label"
+                    :value="optionsItem.value"
+                />
+            </el-select>
+
+            <el-input
+                v-model.trim="_searchParam[`${item.startProp}`]"
+                :placeholder="item.startPlaceholder"
+                :disabled="item.disabled"
+                maxlength="255"
+                style="width: 105px !important"
+                @input="handleInput(item)"
+            >
+            </el-input>
+            <span style="margin: 0 3px">-</span>
+            <el-input
+                v-model.trim="_searchParam[`${item.endProp}`]"
+                :placeholder="item.endPlaceholder"
+                :disabled="item.disabled"
+                maxlength="255"
+                style="width: 106px !important"
+                @input="handleInput(item)"
+            />
+        </template>
+    </div>
+</template>
+
+<script lang="ts" setup name="SearchFormItem">
+// import { verificationInput } from "./utils/verificationInput";
+import { getCountryListApi } from "@/api/modules/global";
+import $Bus from "@/utils/mittBus";
+import { cloneDeep } from "lodash-es";
+import { ref } from "vue";
+const $router = useRouter();
+
+const routeName: any = ref($router.currentRoute.value.name);
+// const userStore: any = useUserStore();
+interface SearchFormItem {
+    item: { [key: string]: any };
+    searchParam: { [key: string]: any };
+    search: (params: any) => void; // 搜索方法
+    handleEmitClear?: (item: any) => void;
+}
+let selectInputValue = ref(1);
+const options = [
+    {
+        value: 1,
+        label: "序号"
+    },
+    {
+        value: 2,
+        label: "数字序列号"
+    }
+];
+
+const props = defineProps<SearchFormItem>();
+const _searchParam = computed(() => props.searchParam);
+
+let loading = ref(false);
+//日期选择后重选赋值
+const handlePicker = (item: any) => {
+    const { prop } = item;
+    if (Array.isArray(_searchParam.value[prop]) && _searchParam.value[prop].length > 0) {
+        let _date: any = cloneDeep(_searchParam.value[prop]);
+        _date[0] = _date[0] + " " + "00:00:00";
+        _date[1] = _date[1] + " " + "00:00:00";
+        _searchParam.value[item.startDate] = _date.join(",");
+    } else {
+        _searchParam.value[item.startDate] = "";
+    }
+};
+//远程搜索(供应商)
+const remoteMethod = async (query: any, item: any) => {
+    console.log(query, item);
+    loading.value = true;
+    if (!query) {
+        loading.value = false;
+        return;
+    }
+    let valClone = query.replace(/^\s*|\s*$/g, "");
+    if (!valClone.length) {
+        loading.value = false;
+        return;
+    }
+    const result = await getCountryListApi({ name: valClone });
+    if (result?.code === 0) {
+        const { data } = result;
+        console.log(data, "=======data=======");
+        item.options = data;
+    }
+    loading.value = false;
+};
+
+const handleClear = (item: any) => {
+    item.options = [];
+};
+
+//input输入监听
+const handleInput = (item: any) => {
+    console.log(item, "=====item=====");
+    //验证
+    // verificationInput(item, _searchParam, selectInputValue.value);
+};
+const handleChange = (item: any) => {
+    _searchParam.value[item.endProp] = "";
+    _searchParam.value[item.startProp] = "";
+    _searchParam.value["serialNumberBegin"] = "";
+    _searchParam.value["numberCodeBegin"] = "";
+    _searchParam.value["serialNumberEnd"] = "";
+    _searchParam.value["numberCodeEnd"] = "";
+};
+
+const handleEmitClear = (item: any) => {
+    console.log(item);
+
+    if (routeName.value === "barCode") {
+        $Bus.emit("clearBarCodeCreateUser");
+    }
+    if (routeName.value === "boxCode") {
+        $Bus.emit("clearBoxCodeCreateUser");
+    }
+    if (routeName.value === "boxMarkIndex") {
+        $Bus.emit("clearBoxMarkIndexCreator");
+    }
+};
+</script>
+<style lang="scss" scope>
+@import "../index.scss";
+</style>
--- a/src/components/SearchForm/components/index.scss
+++ b/src/components/SearchForm/components/index.scss
@@ -0,0 +1,26 @@
+.customCondition-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .input-number-box {
+        display: flex;
+        align-items: center !important;
+        justify-content: center;
+        span {
+            margin: 0 4px;
+        }
+    }
+    .el-select {
+        // width: 172px!important;
+        margin-top: 1px !important;
+
+        // margin-right: 10px;
+    }
+    .el-autocomplete {
+        width: 100% !important;
+    }
+    .el-input__inner {
+        height: 30px !important;
+        line-height: 30px !important;
+    }
+}
--- a/src/components/SearchForm/components/utils/inputRexArray.ts
+++ b/src/components/SearchForm/components/utils/inputRexArray.ts
@@ -0,0 +1,15 @@
+import { convertSeparators } from "@/utils/regexp/convertSeparators";
+import { removeSpaces } from "@/utils/regexp/removeSpaces";
+
+export const inputRexArray = (prop: string, _searchParam: any) => {
+    _searchParam.value[prop] = removeSpaces(_searchParam.value[prop]);
+    _searchParam.value[prop] =
+        _searchParam.value[prop].indexOf("，") > -1 ? convertSeparators(_searchParam.value[prop]) : _searchParam.value[prop];
+    if (_searchParam.value[prop].indexOf(",") > -1) {
+        _searchParam.value[prop] = _searchParam.value[prop].split(",");
+    } else {
+        let array = [];
+        array.push(_searchParam.value[prop]);
+        _searchParam.value[prop] = array;
+    }
+};
--- a/src/components/SearchForm/components/utils/verificationInput.ts
+++ b/src/components/SearchForm/components/utils/verificationInput.ts
@@ -0,0 +1,45 @@
+import { inputRexArray } from "./inputRexArray";
+// import { integer } from "@/utils/regexp/integer";
+import { integerNumber } from "@/utils/regexp/integerNumber";
+
+import { boxCodeCtn } from "@/utils/regexp/boxCodeCtn";
+export const verificationInput = (item: any, _searchParam: any, selectInputValue: any) => {
+    const { prop, endProp, startProp } = item;
+    //轉換成數組傳給後端
+    if (item.isArray && _searchParam.value[prop]) {
+        inputRexArray(prop, _searchParam);
+    }
+    //序列号区间值开始 限制只能输入正整数
+    if (startProp === "startNumber") {
+        _searchParam.value[startProp] = integerNumber(_searchParam.value[startProp]);
+        if (selectInputValue === 1) {
+            _searchParam.value["serialNumberBegin"] = _searchParam.value[startProp];
+        }
+        if (selectInputValue === 2) {
+            _searchParam.value["numberCodeBegin"] = _searchParam.value[startProp];
+        }
+    }
+    if (endProp === "endNumber") {
+        _searchParam.value[endProp] = integerNumber(_searchParam.value[endProp]);
+        if (selectInputValue === 1) {
+            _searchParam.value["serialNumberEnd"] = _searchParam.value[endProp];
+        }
+        if (selectInputValue === 2) {
+            _searchParam.value["numberCodeEnd"] = _searchParam.value[endProp];
+        }
+    }
+    //流水号区间
+    if (startProp === "idBegin" && _searchParam.value[startProp]) {
+        _searchParam.value[startProp] = integerNumber(_searchParam.value[startProp]);
+    }
+    if (endProp === "idEnd" && _searchParam.value[endProp]) {
+        _searchParam.value[endProp] = integerNumber(_searchParam.value[endProp]);
+    }
+    //箱号号区间只能输入CTN开头且CTN后面只能数字
+    if (endProp === "boxBillNoEnd" && _searchParam.value[endProp]) {
+        _searchParam.value[endProp] = boxCodeCtn(_searchParam.value[endProp]);
+    }
+    if (startProp === "boxBillNoBegin" && _searchParam.value[startProp]) {
+        _searchParam.value[startProp] = boxCodeCtn(_searchParam.value[startProp]);
+    }
+};
--- a/src/components/SearchForm/index.scss
+++ b/src/components/SearchForm/index.scss
@@ -0,0 +1,45 @@
+.el-form-item--default {
+    margin-bottom: 8px;
+}
+.form-item {
+    width: 344px !important;
+    height: 32px;
+    margin-right: 12px !important;
+    .form-item-select {
+        width: 224px !important;
+    }
+}
+.form-box1 {
+    min-width: calc(100% - 217px);
+    max-width: calc(100% - 217px); // 184
+    .form-item {
+        .form-item-select {
+            width: 224px !important;
+        }
+    }
+}
+.btn-box {
+    display: flex;
+    flex: 1;
+    justify-content: flex-end;
+}
+.copyBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.down-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    margin-right: 15px;
+    cursor: pointer;
+    border: 1px solid #cccccc;
+    border-radius: 4px;
+    &:hover {
+        color: #4178d5 !important;
+        border: 1px solid rgb(65 120 213 / 50%);
+    }
+}
--- a/src/components/SearchForm/index.vue
+++ b/src/components/SearchForm/index.vue
@@ -0,0 +1,42 @@
+<template>
+    <div v-if="formData.length" class="table-search" style="display: flex">
+        <div style="flex: 2">
+            <el-form ref="formRef" :model="searchParam" :inline="true">
+                <template v-for="item in formData" :key="item.prop">
+                    <!-- :label="item.label + ':'"  -->
+                    <el-form-item
+                        :prop="item.prop"
+                        :label-width="item.labelWidth ? item.labelWidth : '120px'"
+                        class="form-item"
+                        :label="item.label"
+                    >
+                        <SearchFormItem :item="item" :search-param="searchParam" :search="search" />
+                    </el-form-item>
+                </template>
+            </el-form>
+        </div>
+        <div style="display: flex">
+            <el-button type="primary" @click="search" style="margin-bottom: 0"> 搜索 </el-button>
+            <el-button @click="reset" style="margin-bottom: 0">重置</el-button>
+        </div>
+    </div>
+</template>
+<script setup lang="ts" name="SearchForm">
+import SearchFormItem from "./components/SearchFormItem.vue";
+interface ProTableProps {
+    formData?: any[]; // 搜索配置列
+    searchParam?: any; // 搜索参数
+    search: (params: any) => void; // 搜索方法
+    reset: (params: any) => void; // 重置方法
+}
+// 默认值
+withDefaults(defineProps<ProTableProps>(), {
+    formData: () => [],
+    searchParam: {},
+    search: () => {},
+    reset: () => {}
+});
+</script>
+<style lang="scss" scope>
+@import "./index.scss";
+</style>
--- a/src/components/Upload/UploadImg.vue
+++ b/src/components/Upload/UploadImg.vue
@@ -0,0 +1,327 @@
+<template>
+    <div class="upload-box">
+        <el-upload
+            :id="uuid"
+            action="#"
+            :class="['upload', self_disabled ? 'disabled' : '', drag ? 'no-border' : '']"
+            :multiple="false"
+            :disabled="self_disabled"
+            :show-file-list="false"
+            :http-request="handleHttpUpload"
+            :before-upload="beforeUpload"
+            :on-success="uploadSuccess"
+            :on-error="uploadError"
+            :drag="drag"
+            :accept="fileType.join(',')"
+        >
+            <template v-if="imageUrl">
+                <img :src="h + imageUrl" class="upload-image" />
+                <div class="upload-handle" @click.stop>
+                    <div v-if="!self_disabled" class="handle-icon" @click="editImg">
+                        <el-icon><Edit /></el-icon>
+                        <span>编辑</span>
+                    </div>
+                    <!-- <div class="handle-icon" @click="imgViewVisible = true">
+                        <el-icon><ZoomIn /></el-icon>
+                        <span>查看</span>
+                    </div> -->
+                    <div v-if="!self_disabled" class="handle-icon" @click="deleteImg">
+                        <el-icon><Delete /></el-icon>
+                        <span>删除</span>
+                    </div>
+                </div>
+            </template>
+            <template v-else>
+                <div class="upload-empty">
+                    <slot name="empty">
+                        <el-icon><Plus /></el-icon>
+                    </slot>
+                </div>
+            </template>
+        </el-upload>
+        <div class="el-upload__tip">
+            <slot name="tip"></slot>
+        </div>
+        <!-- <el-image-viewer v-if="imgViewVisible" :url-list="[imageUrl]" @close="imgViewVisible = false" /> -->
+    </div>
+</template>
+
+<script setup lang="ts" name="UploadImg">
+// ZoomIn
+import { Edit, Delete, Plus } from "@element-plus/icons-vue";
+import { ref, computed, inject } from "vue";
+import { generateUUID } from "@/utils";
+import { uploadImg } from "@/api/modules/upload";
+import { ElNotification, formContextKey, formItemContextKey } from "element-plus";
+import type { UploadProps, UploadRequestOptions } from "element-plus";
+
+interface UploadFileProps {
+    imageUrl: string; // 图片地址 ==> 必传
+    api?: (params: any) => Promise<any>; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
+    drag?: boolean; // 是否支持拖拽上传 ==> 非必传（默认为 true）
+    disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false）
+    fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M）
+    fileType?: File.ImageMimeType[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
+    height?: string; // 组件高度 ==> 非必传（默认为 150px）
+    width?: string; // 组件宽度 ==> 非必传（默认为 150px）
+    borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
+}
+
+// 接受父组件参数
+const props = withDefaults(defineProps<UploadFileProps>(), {
+    imageUrl: "",
+    drag: true,
+    disabled: false,
+    fileSize: 5,
+    fileType: () => ["image/jpeg", "image/png", "image/gif"],
+    height: "150px",
+    width: "150px",
+    borderRadius: "8px"
+});
+// 生成组件唯一id
+const uuid = ref("id-" + generateUUID());
+const $router = useRouter();
+const routerValueName: string = $router.currentRoute.value.name as string;
+const routerObj: any = {
+    articleEditIndex: "article",
+    productEditIndex: "product",
+    videoListIndex: "video",
+    downloadListIndex: "download",
+    webSetIndex: "webSet",
+    bannerListIndex: "banner",
+    QAManagementListEdit: "QA"
+};
+const routerName = ref(routerObj[routerValueName]);
+// 查看图片
+// const imgViewVisible = ref(false);
+// 获取 el-form 组件上下文
+const formContext = inject(formContextKey, void 0);
+// 获取 el-form-item 组件上下文
+const formItemContext = inject(formItemContextKey, void 0);
+// 判断是否禁用上传和删除
+const self_disabled = computed(() => {
+    return props.disabled || formContext?.disabled;
+});
+const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
+/**
+ * @description 图片上传
+ * @param options upload 所有配置项
+ * */
+interface UploadEmits {
+    (e: "update:imageUrl", value: string): void;
+}
+const emit = defineEmits<UploadEmits>();
+const handleHttpUpload = async (options: UploadRequestOptions) => {
+    let formData = new FormData();
+    //这里要根据后端设置的name设置key值,如果name是file就传file是image就传image
+    formData.append("image", options.file);
+    try {
+        const api = props.api ?? uploadImg;
+
+        const result = await api(formData, routerName.value);
+        if (result?.code === 0) {
+            const { data } = result;
+            emit("update:imageUrl", data.path);
+        }
+
+        // 调用 el-form 内部的校验方法（可自动校验）
+        formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
+    } catch (error) {
+        options.onError(error as any);
+    }
+};
+
+/**
+ * @description 删除图片
+ * */
+const deleteImg = () => {
+    emit("update:imageUrl", "");
+};
+
+/**
+ * @description 编辑图片
+ * */
+const editImg = () => {
+    const dom = document.querySelector(`#${uuid.value} .el-upload__input`);
+    dom && dom.dispatchEvent(new MouseEvent("click"));
+};
+
+/**
+ * @description 文件上传之前判断
+ * @param rawFile 选择的文件
+ * */
+const beforeUpload: UploadProps["beforeUpload"] = rawFile => {
+    const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
+    const imgType = props.fileType.includes(rawFile.type as File.ImageMimeType);
+
+    if (!imgType)
+        ElNotification({
+            title: "温馨提示",
+            message: "上传图片不符合所需的格式！",
+            type: "warning"
+        });
+    if (!imgSize)
+        setTimeout(() => {
+            ElNotification({
+                title: "温馨提示",
+                message: `上传图片大小不能超过 ${props.fileSize}M！`,
+                type: "warning"
+            });
+        }, 0);
+    return imgType && imgSize;
+};
+
+/**
+ * @description 图片上传成功
+ * */
+const uploadSuccess = () => {
+    ElNotification({
+        title: "温馨提示",
+        message: "图片上传成功！",
+        type: "success"
+    });
+};
+
+/**
+ * @description 图片上传错误
+ * */
+const uploadError = () => {
+    ElNotification({
+        title: "温馨提示",
+        message: "图片上传失败，请您重新上传！",
+        type: "error"
+    });
+};
+// watch(
+//     () => props.imageUrl,
+//     newVal => {
+//         console.log(newVal, "============newVal===========");
+//     }
+// );
+</script>
+
+<style scoped lang="scss">
+.is-error {
+    .upload {
+        :deep(.el-upload),
+        :deep(.el-upload-dragger) {
+            border: 1px dashed var(--el-color-danger) !important;
+            &:hover {
+                border-color: var(--el-color-primary) !important;
+            }
+        }
+    }
+}
+:deep(.disabled) {
+    .el-upload,
+    .el-upload-dragger {
+        cursor: not-allowed !important;
+        background: var(--el-disabled-bg-color);
+        border: 1px dashed var(--el-border-color-darker) !important;
+        &:hover {
+            border: 1px dashed var(--el-border-color-darker) !important;
+        }
+    }
+}
+.upload-box {
+    .no-border {
+        :deep(.el-upload) {
+            border: none !important;
+        }
+    }
+    :deep(.upload) {
+        .el-upload {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: v-bind(width);
+            height: v-bind(height);
+            overflow: hidden;
+            border: 1px dashed var(--el-border-color-darker);
+            border-radius: v-bind(borderRadius);
+            transition: var(--el-transition-duration-fast);
+            &:hover {
+                border-color: var(--el-color-primary);
+                .upload-handle {
+                    opacity: 1;
+                }
+            }
+            .el-upload-dragger {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+                padding: 0;
+                overflow: hidden;
+                background-color: transparent;
+                border: 1px dashed var(--el-border-color-darker);
+                border-radius: v-bind(borderRadius);
+                &: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;
+            }
+            .upload-image {
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+            }
+            .upload-empty {
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                font-size: 12px;
+                line-height: 30px;
+                color: var(--el-color-info);
+                .el-icon {
+                    font-size: 28px;
+                    color: var(--el-text-color-secondary);
+                }
+            }
+            .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: 40%;
+                        font-size: 130%;
+                        line-height: 130%;
+                    }
+                    span {
+                        font-size: 85%;
+                        line-height: 85%;
+                    }
+                }
+            }
+        }
+    }
+    .el-upload__tip {
+        line-height: 18px;
+        text-align: center;
+    }
+}
+</style>
--- a/src/components/Upload/UploadImgs.vue
+++ b/src/components/Upload/UploadImgs.vue
@@ -0,0 +1,326 @@
+<template>
+    <div class="upload-box">
+        <el-upload
+            v-model:file-list="_fileList"
+            action="#"
+            list-type="picture-card"
+            :class="['upload', self_disabled ? 'disabled' : '', drag ? 'no-border' : '']"
+            :multiple="true"
+            :disabled="self_disabled"
+            :limit="limit"
+            :http-request="handleHttpUpload"
+            :before-upload="beforeUpload"
+            :on-exceed="handleExceed"
+            :on-success="uploadSuccess"
+            :on-error="uploadError"
+            :drag="drag"
+            :accept="fileType.join(',')"
+        >
+            <div class="upload-empty">
+                <slot name="empty">
+                    <el-icon><Plus /></el-icon>
+                </slot>
+            </div>
+            <template #file="{ file }">
+                <img :src="h + file.url" class="upload-image" />
+                <div class="upload-handle" @click.stop>
+                    <div v-if="!self_disabled" class="handle-icon" @click="handleRemove(file)">
+                        <el-icon><Delete /></el-icon>
+                        <span>删除</span>
+                    </div>
+                </div>
+            </template>
+        </el-upload>
+        <div class="el-upload__tip">
+            <slot name="tip"></slot>
+        </div>
+        <!-- <el-image-viewer v-if="imgViewVisible" :url-list="[h + viewImageUrl]" @close="imgViewVisible = false" /> -->
+    </div>
+</template>
+
+<script setup lang="ts" name="UploadImgs">
+import { ref, computed, inject, watch } from "vue";
+import { Plus, Delete } from "@element-plus/icons-vue";
+import { uploadImg } from "@/api/modules/upload";
+import type { UploadProps, UploadFile, UploadUserFile, UploadRequestOptions } from "element-plus";
+import { generateUUID } from "@/utils";
+import { ElNotification, formContextKey, formItemContextKey } from "element-plus";
+let uid = generateUUID();
+console.log("uid:", uid);
+interface UploadFileProps {
+    fileList: UploadUserFile[];
+    api?: (params: any) => Promise<any>; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
+    drag?: boolean; // 是否支持拖拽上传 ==> 非必传（默认为 true）
+    disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false）
+    limit?: number; // 最大图片上传数 ==> 非必传（默认为 5张）
+    fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M）
+    fileType?: File.ImageMimeType[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
+    height?: string; // 组件高度 ==> 非必传（默认为 150px）
+    width?: string; // 组件宽度 ==> 非必传（默认为 150px）
+    borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
+}
+
+const props = withDefaults(defineProps<UploadFileProps>(), {
+    fileList: () => [],
+    drag: true,
+    disabled: false,
+    limit: 9,
+    fileSize: 5,
+    fileType: () => ["image/jpeg", "image/png", "image/gif"],
+    height: "150px",
+    width: "150px",
+    borderRadius: "8px"
+});
+const $router = useRouter();
+const routerValueName: string = $router.currentRoute.value.name as string;
+const routerObj: any = {
+    articleEditIndex: "article",
+    productEditIndex: "product"
+};
+const routerName = ref(routerObj[routerValueName]);
+// 获取 el-form 组件上下文
+const formContext = inject(formContextKey, void 0);
+// 获取 el-form-item 组件上下文
+const formItemContext = inject(formItemContextKey, void 0);
+// 判断是否禁用上传和删除
+const self_disabled = computed(() => {
+    return props.disabled || formContext?.disabled;
+});
+
+const _fileList = ref<UploadUserFile[]>(props.fileList);
+const h = import.meta.env.VITE_APP_API_BASE_UPLOAD_URL;
+// 监听 props.fileList 列表默认值改变
+watch(
+    () => props.fileList,
+    (n: UploadUserFile[]) => {
+        _fileList.value = n;
+    }
+);
+
+/**
+ * @description 文件上传之前判断
+ * @param rawFile 选择的文件
+ * */
+const beforeUpload: UploadProps["beforeUpload"] = rawFile => {
+    const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
+    const imgType = props.fileType.includes(rawFile.type as File.ImageMimeType);
+    if (!imgType)
+        ElNotification({
+            title: "温馨提示",
+            message: "上传图片不符合所需的格式！",
+            type: "warning"
+        });
+    if (!imgSize)
+        setTimeout(() => {
+            ElNotification({
+                title: "温馨提示",
+                message: `上传图片大小不能超过 ${props.fileSize}M！`,
+                type: "warning"
+            });
+        }, 0);
+    return imgType && imgSize;
+};
+
+/**
+ * @description 图片上传
+ * @param options upload 所有配置项
+ * */
+const handleHttpUpload = async (options: UploadRequestOptions) => {
+    let formData = new FormData();
+    formData.append("image", options.file);
+    try {
+        const api = props.api ?? uploadImg;
+        const { data } = await api(formData, routerName.value);
+        console.log(data.path, "========data==========");
+        options.onSuccess(data.path);
+    } catch (error) {
+        options.onError(error as any);
+    }
+};
+
+/**
+ * @description 图片上传成功
+ * @param response 上传响应结果
+ * @param uploadFile 上传的文件
+ * */
+interface UploadEmits {
+    (e: "update:fileList", value: UploadUserFile[]): void;
+}
+const emit = defineEmits<UploadEmits>();
+const uploadSuccess = (response: { fileUrl: string } | undefined, uploadFile: any) => {
+    if (!response) return;
+    uploadFile.url = response;
+    console.log(_fileList.value, "=_fileList.value=");
+    emit("update:fileList", _fileList.value);
+    // 调用 el-form 内部的校验方法（可自动校验）
+    formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
+    ElNotification({
+        title: "温馨提示",
+        message: "图片上传成功！",
+        type: "success"
+    });
+};
+
+/**
+ * @description 删除图片
+ * @param file 删除的文件
+ * */
+const handleRemove = (file: UploadFile) => {
+    _fileList.value = _fileList.value.filter(item => item.url !== file.url || item.name !== file.name);
+    emit("update:fileList", _fileList.value);
+};
+
+/**
+ * @description 图片上传错误
+ * */
+const uploadError = () => {
+    ElNotification({
+        title: "温馨提示",
+        message: "图片上传失败，请您重新上传！",
+        type: "error"
+    });
+};
+
+/**
+ * @description 文件数超出
+ * */
+const handleExceed = () => {
+    ElNotification({
+        title: "温馨提示",
+        message: `当前最多只能上传 ${props.limit} 张图片，请移除后上传！`,
+        type: "warning"
+    });
+};
+
+/**
+ * @description 图片预览
+ * @param file 预览的文件
+ * */
+// const viewImageUrl = ref("");
+// const imgViewVisible = ref(false);
+// const handlePictureCardPreview: UploadProps["onPreview"] = file => {
+//     viewImageUrl.value = file.url!;
+//     imgViewVisible.value = true;
+// };
+</script>
+
+<style scoped lang="scss">
+.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;
+        }
+    }
+}
+.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);
+            &: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 {
+            width: 100%;
+        }
+        .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;
+        }
+        .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 {
+            margin-right: 10px;
+            &:hover {
+                .upload-handle {
+                    opacity: 1;
+                }
+            }
+        }
+        .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);
+            }
+        }
+    }
+    .el-upload__tip {
+        line-height: 15px;
+        text-align: center;
+    }
+}
+</style>
--- a/src/components/Upload/UploadVideo.vue
+++ b/src/components/Upload/UploadVideo.vue
@@ -0,0 +1,162 @@
+<template>
+    <div>
+        <el-upload
+            class="upload-demo"
+            :id="uuid"
+            action="#"
+            :multiple="false"
+            :disabled="self_disabled"
+            :show-file-list="false"
+            :http-request="handleHttpUpload"
+            :before-upload="beforeUpload"
+            :on-success="uploadSuccess"
+            :on-error="uploadError"
+            :limit="1"
+            :accept="fileType.join(',')"
+        >
+            <!-- disabled -->
+            <el-input v-model="videoShowUrl" style="width: 414px" @click.stop @input="handleInput" disabled>
+                <template #prepend
+                    ><el-icon :size="20" style="cursor: pointer"><FolderAdd /></el-icon
+                ></template>
+            </el-input>
+        </el-upload>
+        <div class="el-upload__tip">
+            <slot name="tip"></slot>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="UploadVideo">
+// Edit, ZoomIn, Delete,Plus
+import { FolderAdd } from "@element-plus/icons-vue";
+import { ref, computed, inject } from "vue";
+import { generateUUID } from "@/utils";
+import { uploadVideo } from "@/api/modules/upload";
+import { ElNotification, formContextKey, formItemContextKey } from "element-plus";
+import type { UploadProps, UploadRequestOptions } from "element-plus";
+
+interface UploadFileProps {
+    videoUrl: string; // 图片地址 ==> 必传
+    api?: (params: any) => Promise<any>; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
+    width?: string;
+    disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false）
+    fileSize?: number; //视频大小限制 ==> 非必传（默认为 5M）
+    fileType?: any[]; //视频类型限制 ==> 非必传（默认为[".mp4", ".avi", ".mov"]）
+    borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
+}
+const videoShowUrl = ref(null);
+// 接受父组件参数
+const props = withDefaults(defineProps<UploadFileProps>(), {
+    videoUrl: "",
+    disabled: false,
+    fileSize: 200,
+    width: "400px",
+    fileType: () => [".mp4", ".avi", ".mov", "video/mp4", "video/mov", "video/avi"],
+    borderRadius: "8px"
+});
+const $router = useRouter();
+const routerValueName: string = $router.currentRoute.value.name as string;
+const routerObj: any = {
+    articleEditIndex: "article",
+    productEditIndex: "product",
+    videoListIndex: "video"
+};
+const routerName = ref(routerObj[routerValueName]);
+
+// 生成组件唯一id
+const uuid = ref("id-" + generateUUID());
+
+// 获取 el-form 组件上下文
+const formContext = inject(formContextKey, void 0);
+// 获取 el-form-item 组件上下文
+const formItemContext = inject(formItemContextKey, void 0);
+// 判断是否禁用上传和删除
+const self_disabled = computed(() => {
+    return props.disabled || formContext?.disabled;
+});
+/**
+ * @description 视频上传
+ * @param options upload 所有配置项
+ * */
+interface UploadEmits {
+    (e: "update:videoUrl", value: string): void;
+}
+const emit = defineEmits<UploadEmits>();
+const handleHttpUpload = async (options: UploadRequestOptions) => {
+    let formData = new FormData();
+    formData.append("video", options.file);
+    try {
+        const api = props.api ?? uploadVideo;
+        const { data } = await api(formData, routerName.value);
+        emit("update:videoUrl", data.path);
+        // 调用 el-form 内部的校验方法（可自动校验）
+        formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
+    } catch (error) {
+        options.onError(error as any);
+    }
+};
+
+const handleInput = () => {
+    console.log("会触发吗");
+};
+
+/**
+ * @description 文件上传之前判断
+ * @param rawFile 选择的文件
+ * */
+const beforeUpload: UploadProps["beforeUpload"] = rawFile => {
+    const videoSize = rawFile.size / 1024 / 1024 < props.fileSize;
+    const videoType = props.fileType.includes(rawFile.type as any);
+    if (!videoType)
+        ElNotification({
+            title: "温馨提示",
+            message: "上传视频不符合所需的格式！",
+            type: "warning"
+        });
+    if (!videoSize)
+        setTimeout(() => {
+            ElNotification({
+                title: "温馨提示",
+                message: `上传视频大小不能超过 ${props.fileSize}M！`,
+                type: "warning"
+            });
+        }, 0);
+    return videoType && videoSize;
+};
+
+/**
+ * @description 视频上传成功
+ * */
+const uploadSuccess = () => {
+    ElNotification({
+        title: "温馨提示",
+        message: "视频上传成功！",
+        type: "success"
+    });
+};
+
+/**
+ * @description 视频上传错误
+ * */
+const uploadError = () => {
+    ElNotification({
+        title: "温馨提示",
+        message: "视频上传失败，请您重新上传！",
+        type: "error"
+    });
+};
+watch(
+    () => props.videoUrl,
+    (newVal: any) => {
+        videoShowUrl.value = newVal;
+    }
+);
+</script>
+
+<style scoped lang="scss">
+.el-upload__tip {
+    line-height: 18px;
+    text-align: center;
+}
+</style>
--- a/src/components/WangEditor/index.scss
+++ b/src/components/WangEditor/index.scss
@@ -0,0 +1,28 @@
+/* 富文本组件校验失败样式 */
+.is-error {
+    .editor-box {
+        border-color: var(--el-color-danger);
+        .editor-toolbar {
+            border-bottom-color: var(--el-color-danger);
+        }
+    }
+}
+
+/* 富文本组件禁用样式 */
+.editor-disabled {
+    cursor: not-allowed !important;
+}
+
+/* 富文本组件样式 */
+.editor-box {
+    /* 防止富文本编辑器全屏时 tabs组件 在其层级之上 */
+    z-index: 2;
+    width: 100%;
+    border: 1px solid var(--el-border-color-darker);
+    .editor-toolbar {
+        border-bottom: 1px solid var(--el-border-color-darker);
+    }
+    .editor-content {
+        overflow-y: hidden;
+    }
+}
--- a/src/components/WangEditor/index.vue
+++ b/src/components/WangEditor/index.vue
@@ -0,0 +1,169 @@
+<template>
+    <div :class="['editor-box', self_disabled ? 'editor-disabled' : '']">
+        <Toolbar v-if="!hideToolBar" class="editor-toolbar" :editor="editorRef" :default-config="toolbarConfig" :mode="mode" />
+        <Editor
+            v-model="valueHtml"
+            class="editor-content'"
+            :style="{ height }"
+            :mode="mode"
+            :default-config="editorConfig"
+            @on-created="handleCreated"
+            @on-blur="handleBlur"
+        />
+    </div>
+</template>
+
+<script setup lang="ts" name="WangEditor">
+import { nextTick, computed, inject, shallowRef, onBeforeUnmount } from "vue";
+import { IToolbarConfig, IEditorConfig } from "@wangeditor/editor";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { uploadImg, uploadVideo } from "@/api/modules/upload";
+import "@wangeditor/editor/dist/css/style.css";
+import { formContextKey, formItemContextKey } from "element-plus";
+
+// 富文本 DOM 元素
+const editorRef = shallowRef();
+
+// 实列化编辑器
+const handleCreated = (editor: any) => {
+    editorRef.value = editor;
+};
+const $router = useRouter();
+const routerValueName: string = $router.currentRoute.value.name as string;
+const routerObj: any = {
+    articleEditIndex: "article",
+    productEditIndex: "product"
+};
+const routerName = ref(routerObj[routerValueName]);
+// 接收父组件参数，并设置默认值
+interface RichEditorProps {
+    value: any; // 富文本值 ==> 必传
+    toolbarConfig?: Partial<IToolbarConfig>; // 工具栏配置 ==> 非必传（默认为空）
+    editorConfig?: Partial<IEditorConfig>; // 编辑器配置 ==> 非必传（默认为空）
+    height?: string; // 富文本高度 ==> 非必传（默认为 500px）
+    mode?: "default" | "simple"; // 富文本模式 ==> 非必传（默认为 default）
+    hideToolBar?: boolean; // 是否隐藏工具栏 ==> 非必传（默认为false）
+    disabled?: boolean; // 是否禁用编辑器 ==> 非必传（默认为false）
+}
+const props = withDefaults(defineProps<RichEditorProps>(), {
+    toolbarConfig: () => {
+        return {
+            excludeKeys: []
+        };
+    },
+    editorConfig: () => {
+        return {
+            placeholder: "请输入内容...",
+            MENU_CONF: {}
+        };
+    },
+    height: "500px",
+    mode: "default",
+    hideToolBar: false,
+    disabled: false
+});
+
+// 获取 el-form 组件上下文
+const formContext = inject(formContextKey, void 0);
+// 获取 el-form-item 组件上下文
+const formItemContext = inject(formItemContextKey, void 0);
+// 判断是否禁用上传和删除
+const self_disabled = computed(() => {
+    return props.disabled || formContext?.disabled;
+});
+
+// 判断当前富文本编辑器是否禁用
+if (self_disabled.value) nextTick(() => editorRef.value.disable());
+
+// 富文本的内容监听，触发父组件改变，实现双向数据绑定
+type EmitProps = {
+    (e: "update:value", val: string): void;
+    (e: "check-validate"): void;
+};
+const emit = defineEmits<EmitProps>();
+const valueHtml = computed({
+    get() {
+        return props.value;
+    },
+    set(val: string) {
+        // 防止富文本内容为空时，校验失败
+        if (editorRef.value.isEmpty()) val = "";
+        emit("update:value", val);
+    }
+});
+
+/**
+ * @description 图片自定义上传
+ * @param file 上传的文件
+ * @param insertFn 上传成功后的回调函数（插入到富文本编辑器中）
+ * */
+type InsertFnTypeImg = (url: string, alt?: string, href?: string) => void;
+props.editorConfig.MENU_CONF!["uploadImage"] = {
+    async customUpload(file: File, insertFn: InsertFnTypeImg) {
+        if (!uploadImgValidate(file)) return;
+        let formData = new FormData();
+        formData.append("image", file);
+
+        try {
+            const result = await uploadImg(formData, routerName.value);
+            if (result?.code === 0) {
+                const { data } = result;
+                insertFn(import.meta.env.VITE_APP_API_BASE_UPLOAD_URL + data.url);
+            }
+        } catch (error) {
+            console.log(error);
+        }
+    }
+};
+
+// 图片上传前判断
+const uploadImgValidate = (file: File): boolean => {
+    console.log(file);
+    return true;
+};
+
+/**
+ * @description 视频自定义上传
+ * @param file 上传的文件
+ * @param insertFn 上传成功后的回调函数（插入到富文本编辑器中）
+ * */
+type InsertFnTypeVideo = (url: string, poster?: string) => void;
+props.editorConfig.MENU_CONF!["uploadVideo"] = {
+    async customUpload(file: File, insertFn: InsertFnTypeVideo) {
+        if (!uploadVideoValidate(file)) return;
+        let formData = new FormData();
+        formData.append("file", file);
+        try {
+            const { data } = await uploadVideo(formData);
+            insertFn(data.fileUrl);
+        } catch (error) {
+            console.log(error);
+        }
+    }
+};
+
+// 视频上传前判断
+const uploadVideoValidate = (file: File): boolean => {
+    console.log(file);
+    return true;
+};
+
+// 编辑框失去焦点时触发
+const handleBlur = () => {
+    formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+    if (!editorRef.value) return;
+    editorRef.value.destroy();
+});
+
+defineExpose({
+    editor: editorRef
+});
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>
--- a/src/components/rulesForm/index.vue
+++ b/src/components/rulesForm/index.vue
@@ -0,0 +1,220 @@
+<template>
+    <el-form
+        :model="_ruleForm"
+        :rules="_rules"
+        :label-width="labelWidth ? labelWidth : '140px'"
+        ref="ruleFormRef"
+        :validate-on-rule-change="false"
+    >
+        <template v-for="item in formData" :key="item.prop">
+            <!--  :limit="1" -->
+            <el-form-item :label="item.label" :prop="item.prop" style="margin-bottom: 20px">
+                <template v-if="item.type === 'input'">
+                    <el-input
+                        style="width: 440px"
+                        :placeholder="item.placeholder"
+                        v-model.trim="_ruleForm[`${item.prop}`]"
+                        clearable
+                        :disabled="item.disabled"
+                        @blur="handleInputBlur"
+                    />
+                </template>
+                <template v-if="item.type === 'inputSelect'">
+                    <el-input
+                        :placeholder="item.placeholder"
+                        v-model.trim="_ruleForm[`${item.prop}`]"
+                        clearable
+                        :disabled="item.disabled"
+                        @blur="handleInputBlur"
+                    >
+                        <template #append>
+                            <el-select v-model="_ruleForm[`${item.prop1}`]" :placeholder="item.placeholder1" style="width: 115px">
+                                <el-option
+                                    :label="option.label"
+                                    :value="option.value"
+                                    v-for="option in item.options"
+                                    :key="option.value"
+                                />
+                            </el-select>
+                        </template>
+                    </el-input>
+                </template>
+                <template v-if="item.type === 'inputButton'">
+                    <el-input
+                        :placeholder="item.placeholder"
+                        v-model.trim="_ruleForm[`${item.prop}`]"
+                        clearable
+                        :disabled="item.disabled"
+                    >
+                        <template #append>
+                            <el-button @click="handleInputButtonClick">选择</el-button>
+                        </template>
+                    </el-input>
+                </template>
+                <template v-if="item.type === 'inputNumber'">
+                    <el-input-number
+                        :min="1"
+                        :max="9999"
+                        :controls="true"
+                        v-model.trim="_ruleForm[`${item.prop}`]"
+                        :disabled="item.disabled"
+                        :placeholder="item.placeholder"
+                        :maxlength="item.maxLength"
+                        step-strictly
+                        :step="1"
+                        controls-position="right"
+                    ></el-input-number>
+                </template>
+
+                <template v-if="item.type === 'textarea'">
+                    <el-input
+                        type="textarea"
+                        :placeholder="item.placeholder"
+                        v-model="_ruleForm[`${item.prop}`]"
+                        :autosize="{ minRows: 10, maxRows: 20 }"
+                        :disabled="item.disabled"
+                        style="width: 440px"
+                    />
+                </template>
+                <template v-if="item.type === 'date'">
+                    <el-date-picker
+                        v-model="_ruleForm[`${item.prop}`]"
+                        type="date"
+                        :placeholder="item.placeholder"
+                        clearable
+                        :disabled="item.disabled"
+                    />
+                </template>
+                <template v-if="item.type === 'datetime'">
+                    <el-date-picker
+                        v-model="_ruleForm[`${item.prop}`]"
+                        type="datetime"
+                        :placeholder="item.placeholder"
+                        clearable
+                        :disabled="item.disabled"
+                        format="YYYY/MM/DD hh:mm:ss"
+                        value-format="YYYY-MM-DD hh:mm:ss"
+                    />
+                </template>
+                <template v-if="item.type === 'radio'">
+                    <el-radio-group v-model="_ruleForm[`${item.prop}`]" @change="handleRadioGroup(_ruleForm[`${item.prop}`])">
+                        <el-radio
+                            :value="option.value"
+                            :label="option.value"
+                            v-for="(option, optionIndex) in item.options"
+                            :key="optionIndex"
+                            >{{ option.label }}</el-radio
+                        >
+                    </el-radio-group>
+                </template>
+
+                <template v-if="item.type === 'upImg'">
+                    <UploadImg v-model:image-url="_ruleForm[`${item.prop}`]">
+                        <template #tip>
+                            <div class="el-upload__tip">{{ item.prompt }}</div>
+                        </template>
+                    </UploadImg>
+                </template>
+                <template v-if="item.type === 'table'">
+                    <slot />
+                </template>
+
+                <template v-if="item.type === 'video'">
+                    <UploadVideo width="440px" v-model:video-url="_ruleForm[`${item.prop}`]"> </UploadVideo>
+                </template>
+                <template v-if="item.type === 'select'">
+                    <el-select style="width: 240px" v-model="_ruleForm[`${item.prop}`]" :placeholder="item.placeholder" clearable>
+                        <el-option
+                            :label="option.label"
+                            :value="option.value"
+                            v-for="option in item.options"
+                            :key="option.value"
+                        />
+                    </el-select>
+                </template>
+                <template v-if="item.type === 'treeSelect'">
+                    <el-tree-select
+                        clearable
+                        v-model="_ruleForm[`${item.prop}`]"
+                        :data="item.options"
+                        :placeholder="item.placeholder"
+                        :render-after-expand="false"
+                        show-checkbox
+                        check-strictly
+                        @change="handleSelectChange(_ruleForm[`${item.prop}`])"
+                    />
+                </template>
+                <template v-if="item.type === 'treeSelects'">
+                    <el-tree-select
+                        v-model="_ruleForm[`${item.prop}`]"
+                        :data="item.options"
+                        multiple
+                        :render-after-expand="false"
+                        show-checkbox
+                        check-strictly
+                        check-on-click-node
+                        style="width: 240px"
+                    />
+                </template>
+                <template v-if="item.type === 'treeSelectInput'">
+                    <slot />
+                </template>
+            </el-form-item>
+        </template>
+    </el-form>
+</template>
+
+<script setup lang="ts">
+import type { FormInstance, FormRules } from "element-plus";
+import UploadVideo from "@/components/Upload/UploadVideo.vue";
+import UploadImg from "@/components/Upload/UploadImg.vue";
+interface IProps {
+    ruleForm: { [key: string]: any };
+    formData: any[];
+    rules?: FormRules;
+    handleInputButton?: () => void;
+    isIndeterminate?: boolean;
+    labelWidth?: any;
+    handleInputBlurEmits?: () => void;
+    handleSelectChangeEmits?: () => void;
+    handleRadioGroupEmits?: () => void;
+    handleTreesSelectChangeEmits?: () => void;
+}
+const emits = defineEmits<{
+    (e: "handleInputButton", result?: Record<string, any>): void;
+    (e: "handleInputBlurEmits", result?: Record<string, any>): void;
+    (e: "handleSelectChangeEmits", result?: Record<string, any>): void;
+    (e: "handleRadioGroupEmits", result?: any): void;
+    (e: "handleTreesSelectChangeEmits", result?: any): void;
+}>();
+
+const ruleFormRef = ref<FormInstance>();
+const props = defineProps<IProps>();
+//本地化处理,props是单向的,通过本地化就可以改变父组件传过来的值了
+const _ruleForm = computed(() => props.ruleForm);
+// 接收 rules 并设置为响应式,必须要为响应式的,否则失效
+const _rules = computed(() => props.rules);
+//inputButton
+const handleInputButtonClick = () => {
+    emits("handleInputButton", {});
+};
+const handleInputBlur = () => {
+    emits("handleInputBlurEmits");
+};
+const handleSelectChange = (params: any) => {
+    emits("handleSelectChangeEmits", { id: params });
+};
+// const handleTreesSelectChange = (params: any) => {
+//     emits("handleTreesSelectChangeEmits", params);
+// };
+const handleRadioGroup = (value: any) => {
+    emits("handleRadioGroupEmits", value);
+};
+// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
+defineExpose({
+    ruleForm: _ruleForm,
+    ruleFormRef: ruleFormRef
+});
+</script>
+
+<style scoped lang="scss"></style>