feat: 🚀 订阅功能

2025-09-16 16:38:30 +08:00
parent eb1b66a066
commit d3a3ef2911
456 changed files with 40544 additions and 124 deletions
--- a/src/components/DetailsSearch/index.vue
+++ b/src/components/DetailsSearch/index.vue
@@ -0,0 +1,373 @@
+<template>
+    <div class="search-box1" ref="searchRef">
+        <el-form
+            ref="ruleFormRef"
+            :model="_searchResult"
+            :inline="props.inline ? false : true"
+            class="form-box"
+            :show-message="false"
+            style="height: 100%; font-size: 14px"
+        >
+            <template v-for="item in formData" :key="item.prop">
+                <el-form-item
+                    :label="item.label"
+                    :prop="item.prop"
+                    :label-width="labelWidth || '81px'"
+                    :rules="item.rules"
+                    :error="item.error"
+                    :show-message="item.showMessage ? item.showMessage : false"
+                    :inline-message="item.inlineMessage"
+                    :style="item.style ? item.style : 'margin-right:8px;position: relative;'"
+                    :required="item.required"
+                    :class="item.class ? item.class : 'form-item'"
+                >
+                    <template v-if="item.type === 'input'">
+                        <el-input
+                            v-model.trim="_searchResult[`${item.prop}`]"
+                            :placeholder="item.placeholder"
+                            :disabled="item.disabled"
+                            :maxlength="item.maxLength ? item.maxLength : 255"
+                            @input="valueVerify(item)"
+                        >
+                        </el-input>
+                    </template>
+                    <template v-if="item.type === 'inputs'">
+                        <el-input
+                            v-model.trim="_searchResult[`${item.startProp}`]"
+                            :placeholder="item.startPlaceholder"
+                            :disabled="item.startDisabled"
+                            maxlength="255"
+                            style="width: 144px !important"
+                            @input="valueVerifyInputs(item)"
+                        />
+                        <span style="margin: 0 3px">-</span>
+                        <el-input
+                            v-model.trim="_searchResult[`${item.endProp}`]"
+                            :placeholder="item.endPlaceholder"
+                            :disabled="item.endDisabled"
+                            maxlength="255"
+                            style="width: 144px !important"
+                            @input="valueVerifyInputs(item)"
+                        />
+                    </template>
+
+                    <template v-if="item.type === 'select'">
+                        <el-select
+                            v-model="_searchResult[`${item.prop}`]"
+                            :placeholder="item.placeholder"
+                            clearable
+                            :disabled="item.disabled"
+                        >
+                            <el-option
+                                v-for="options in item.options"
+                                :label="options.label"
+                                :value="options.value"
+                                :key="options.label"
+                            />
+                        </el-select>
+                    </template>
+
+                    <template v-if="item.type === 'date'">
+                        <el-date-picker
+                            :disabled="item.disabled"
+                            v-model="_searchResult[`${item.prop}`]"
+                            :type="item.type"
+                            :placeholder="item.placeholder"
+                            format="YYYY-MM-DD"
+                            :style="item.style"
+                            value-format="YYYY-MM-DD"
+                        />
+                    </template>
+                    <template v-if="item.type === 'selectRemote' || item.type === 'selectRemoteUser'">
+                        <el-select
+                            v-model="_searchResult[`${item.prop}`]"
+                            :placeholder="item.placeholder"
+                            clearable
+                            remote
+                            reserve-keyword
+                            filterable
+                            ref="slectRef1"
+                            class="m-2 select"
+                            remote-show-suffix
+                            :remote-method="
+                              (query:any) => {
+                                remoteMethod(
+                                  query,
+                                  item
+                                );
+                              }
+                            "
+                            :disabled="item.disabled"
+                        >
+                            <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 === 'selectMultiple'">
+                        <el-select
+                            v-model="_searchResult[`${item.prop}`]"
+                            multiple
+                            filterable
+                            @remove-tag="handleRomoveTag(item)"
+                            :disabled="item.disabled"
+                            :placeholder="item.placeholder"
+                        >
+                            <!-- 循环渲染选项：label 为显示文本，value 为实际提交值 -->
+                            <el-option
+                                v-for="option in item.options"
+                                :key="option.value"
+                                :label="option.label"
+                                :value="option.value"
+                            ></el-option>
+                        </el-select>
+                    </template>
+                    <template
+                        v-if="item.type === 'selectMultipleRemoteCustomersNames' || item.type === 'selectProductLinesRemote'"
+                    >
+                        <el-select
+                            v-model="_searchResult[`${item.prop}`]"
+                            :placeholder="item.placeholder"
+                            remote
+                            multiple
+                            filterable
+                            class="m-2 select"
+                            remote-show-suffix
+                            @clear="handleSelectClear(item.prop)"
+                            :remote-method="(query:any)=> handleSelectMultipleRemote(query, item)"
+                            :disabled="item.disabled"
+                        >
+                            <el-option
+                                :label="option.label"
+                                :value="option.value"
+                                v-for="option in item.options"
+                                :key="option.label"
+                            />
+                        </el-select>
+                    </template>
+                </el-form-item>
+            </template>
+        </el-form>
+    </div>
+</template>
+
+<script lang="ts" setup name="Search">
+import { ref } from "vue";
+import { FormInstance } from "element-plus";
+import { getCustomersApi, getUsersApi, getProductLinesApi } from "@/api/modules/global";
+import { integerRexg, numberDecimalSeparatorRexg } from "@/utils/regexp/index";
+const ruleFormRef = ref<FormInstance>();
+const props = defineProps<{
+    formData: any[];
+    labelWidth?: string;
+    ruleForm: Record<string, any>;
+    style?: string;
+    inline?: Boolean;
+    getSearchValue?: () => void;
+    selectMultipleRemoveTag?: () => void;
+    setRuleFormValue?: () => void;
+}>();
+
+let _searchResult = computed(() => {
+    return props.ruleForm;
+});
+
+const emits = defineEmits<{
+    (e: "getSearchValue", result: Record<string, any>): void;
+    (e: "setMaterialList", result: Record<string, any>): void;
+    (e: "setRuleFormValue", result: Record<string, any>): void;
+    (e: "selectMultipleRemoveTag", result: Record<string, any>): void;
+}>();
+
+const handleRomoveTag = (item: any) => {
+    emits("selectMultipleRemoveTag", { item, org_number: _searchResult.value.org_number });
+};
+
+//客戶
+const getCustomers = async (keywords: any, item: any) => {
+    let org_number = _searchResult.value.org_number.join(",");
+    const result: any = await getCustomersApi({ keywords, org_number });
+    if (result?.code === 0) {
+        const { data } = result;
+        if (Array.isArray(data) && data.length) {
+            let options: any = [];
+            data.forEach((item: any) => {
+                options.push({
+                    value: item.customer_number,
+                    label: item.customer_name
+                });
+            });
+            item.options = options;
+        }
+    }
+};
+
+//品线
+const getProductLines = async (keywords: any, item: any) => {
+    const result: any = await getProductLinesApi({ keywords });
+    if (result?.code === 0) {
+        const { data } = result;
+        if (Array.isArray(data) && data.length) {
+            let options: any = [];
+            data.forEach((item: any) => {
+                options.push({
+                    value: item,
+                    label: item
+                });
+            });
+            item.options = options;
+        }
+    }
+};
+
+//订阅账号
+const getUsers = async (keywords: any, item: any) => {
+    const result: any = await getUsersApi({ keywords });
+    if (result?.code === 0) {
+        const { data } = result;
+        if (Array.isArray(data) && data.length) {
+            let options: any = [];
+            data.forEach((item: any) => {
+                options.push({
+                    value: item.dduid,
+                    label: item.realname
+                });
+            });
+            item.options = options;
+        }
+    }
+};
+
+//远程搜索多选
+const handleSelectMultipleRemote = (query: any, item: any) => {
+    if (!query) {
+        return;
+    }
+    let valClone = query.replace(/^\s*|\s*$/g, "");
+    if (!valClone) {
+        return;
+    }
+    //客户
+    if (item.type === "selectMultipleRemoteCustomersNames") {
+        getCustomers(valClone, item);
+    }
+    if (item.type === "selectProductLinesRemote") {
+        getProductLines(valClone, item);
+    }
+};
+const remoteMethod = async (query: any, item: any) => {
+    if (!query) {
+        return;
+    }
+    let valClone = query.replace(/^\s*|\s*$/g, "");
+    if (!valClone) {
+        return;
+    }
+    if (item.type === "selectRemoteUser") {
+        getUsers(valClone, item);
+    }
+};
+const handleSelectClear = (prop: any) => {
+    console.log("会触发吗?", prop);
+};
+//input输入验证
+const valueVerify = (item: any) => {
+    //只能输入整数
+    if (item.reg === "integerRexg") {
+        let value = integerRexg(_searchResult.value[item.prop]);
+        _searchResult.value[item.prop] = value;
+    }
+    if (item.reg === "numberDecimalSeparatorRexg") {
+        let value = numberDecimalSeparatorRexg(_searchResult.value[item.prop]);
+        _searchResult.value[item.prop] = value;
+    }
+    emits("getSearchValue", {
+        val: _searchResult.value,
+        prop: item.prop
+    });
+};
+
+const valueVerifyInputs = (item: any) => {
+    //只能输入整数
+    if (item.reg === "integerRexg") {
+        let value = integerRexg(_searchResult.value[item.startProp]);
+        _searchResult.value[item.startProp] = value;
+    }
+
+    emits("getSearchValue", {
+        val: _searchResult.value,
+        prop: item.prop
+    });
+};
+// const handleSelectMultipleClear = (item: any) => {
+//     console.log(item, "===========>");
+// };
+</script>
+<style lang="scss" scope>
+.search-box1 {
+    position: relative;
+    display: flex;
+    min-width: 1280px;
+    padding: 16px;
+    background: #ffffff;
+    border-radius: 6px;
+
+    // 单据头用的样式
+    .form-box {
+        // width: 85%;
+        .form-item {
+            width: 392px !important;
+
+            // height: 32px;
+            // 原代码有 height: 32px !important; 这会导致子元素高度超出后被遮盖
+            height: auto !important; // 改为自动高度
+            min-height: 32px; // 保留最小高度，未选择时对齐
+            margin-bottom: 8px !important;
+            .el-form-item__label {
+                font-size: 12px !important;
+            }
+            .el-select {
+                width: 392px;
+            }
+            .el-form-item--default {
+                width: 392px;
+            }
+        }
+        .form-item1 {
+            width: 594px !important;
+
+            // height: 32px;
+            // 原代码有 height: 32px !important; 这会导致子元素高度超出后被遮盖
+            height: auto !important; // 改为自动高度
+            min-height: 32px; // 保留最小高度，未选择时对齐
+            margin-bottom: 8px !important;
+            .el-form-item__label {
+                font-size: 12px !important;
+            }
+            .el-select {
+                width: 594px;
+            }
+            .el-form-item--default {
+                width: 594px;
+            }
+        }
+        .form-item2 {
+            width: 494px !important;
+        }
+
+        margin-bottom: 8px !important;
+    }
+}
+.el-form-item--default .el-form-item__label {
+    height: 32px;
+    margin-bottom: 8px;
+
+    // font-size: 12px;
+    line-height: 32px;
+    color: rgb(92 92 92 / 100%);
+}
+</style>
--- a/src/components/DetailsSearch/interface/index.ts
+++ b/src/components/DetailsSearch/interface/index.ts
@@ -0,0 +1,58 @@
+export interface formDataIProps {
+    reg?: any;
+    prop?: string;
+    label?: string;
+    isShow?: boolean;
+    maxLength?: any;
+    value?: any; //默认值
+    bomList?: any;
+    placeholder?: string;
+    labelWidth?: string;
+    class?: string;
+    urlType?: string;
+    rules?: any;
+    error?: string;
+    showMessage?: boolean;
+    inlineMessage?: boolean;
+    size?: string;
+    style?: string;
+    autosize?: any;
+    inputWidth?: string;
+    brIndex?: number;
+    endDisabled?: any;
+    endProp?: any;
+    optionProps?: any;
+    startDisabled?: any;
+    startProp?: any;
+    rgx?: any;
+    isTxt?: any;
+    type:
+        | "input"
+        | "textarea"
+        | "select"
+        | "datetimepicker"
+        | "date"
+        | "daterange"
+        | "radio"
+        | "checked"
+        | "cascader"
+        | "selectRemote"
+        | "selectRemote1"
+        | "selectRemote2"
+        | "selectRemote3"
+        | "inputs"
+        | "selectMultiple"
+        | "customCondition";
+    options?: any;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    defaultTime?: any;
+    radios?: any;
+    checkeds?: any;
+    isCopy?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    formClass?: string;
+    isNumber?: boolean;
+    ruleForm?: any;
+}
--- 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/Form/components/FormItem.vue
+++ b/src/components/Form/components/FormItem.vue
@@ -0,0 +1,123 @@
+<template>
+    <div class="card content-box">
+        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="140px">
+            <el-form-item label="Activity name" prop="name">
+                <el-input v-model="ruleForm.name" />
+            </el-form-item>
+            <el-form-item label="Activity phone" prop="phone">
+                <el-input v-model="ruleForm.phone" placeholder="Activity phone" />
+            </el-form-item>
+            <el-form-item label="Activity zone" prop="region">
+                <el-select v-model="ruleForm.region" placeholder="Activity zone">
+                    <el-option label="Zone one" value="shanghai" />
+                    <el-option label="Zone two" value="beijing" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="Activity time" required>
+                <el-form-item prop="date1">
+                    <el-date-picker v-model="ruleForm.date1" type="date" placeholder="Pick a date" style="width: 100%" />
+                </el-form-item>
+                <el-col class="text-center" :span="1">
+                    <span class="text-gray-500">-</span>
+                </el-col>
+                <el-form-item prop="date2">
+                    <el-time-picker v-model="ruleForm.date2" placeholder="Pick a time" style="width: 100%" />
+                </el-form-item>
+            </el-form-item>
+            <el-form-item label="Instant delivery" prop="delivery">
+                <el-switch v-model="ruleForm.delivery" />
+            </el-form-item>
+            <el-form-item label="Resources" prop="resource">
+                <el-radio-group v-model="ruleForm.resource">
+                    <el-radio label="Sponsorship" />
+                    <el-radio label="Venue" />
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="Activity form" prop="desc">
+                <el-input v-model="ruleForm.desc" type="textarea" />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="submitForm(ruleFormRef)"> Create </el-button>
+                <el-button @click="resetForm(ruleFormRef)"> Reset </el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script setup lang="ts" name="dynamicForm">
+import { reactive, ref } from "vue";
+import { checkPhoneNumber } from "@/utils/eleValidate";
+import type { FormInstance, FormRules } from "element-plus";
+import { ElMessage } from "element-plus";
+
+const ruleFormRef = ref<FormInstance>();
+const ruleForm = reactive({
+    name: "",
+    phone: "",
+    region: "",
+    date1: "",
+    date2: "",
+    delivery: false,
+    resource: "",
+    desc: ""
+});
+
+const rules = reactive<FormRules>({
+    name: [
+        { required: true, message: "Please input Activity name", trigger: "blur" },
+        { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" }
+    ],
+    phone: [{ required: true, validator: checkPhoneNumber, trigger: "blur" }],
+    region: [
+        {
+            required: true,
+            message: "Please select Activity zone",
+            trigger: "change"
+        }
+    ],
+    date1: [
+        {
+            type: "date",
+            required: true,
+            message: "Please pick a date",
+            trigger: "change"
+        }
+    ],
+    date2: [
+        {
+            type: "date",
+            required: true,
+            message: "Please pick a time",
+            trigger: "change"
+        }
+    ],
+    resource: [
+        {
+            required: true,
+            message: "Please select activity resource",
+            trigger: "change"
+        }
+    ],
+    desc: [{ required: true, message: "Please input activity form", trigger: "blur" }]
+});
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    await formEl.validate((valid, fields) => {
+        if (valid) {
+            ElMessage.success("提交的数据为 : " + JSON.stringify(ruleForm));
+        } else {
+            console.log("error submit!", fields);
+        }
+    });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    formEl.resetFields();
+};
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>
--- a/src/components/Form/index.vue
+++ b/src/components/Form/index.vue
@@ -0,0 +1,87 @@
+<template>
+    <div class="card content-box">
+        <el-form :model="_ruleForm" :rules="_rules" label-width="140px" ref="ruleFormRef">
+            <template v-for="item in formData" :key="item.prop">
+                <el-form-item :label="item.label" :prop="item.prop" :limit="1">
+                    <template v-if="item.type === 'uploadImgs'">
+                        <UploadImgs
+                            v-model:file-list="_ruleForm[`${item.prop}`]"
+                            height="140px"
+                            width="140px"
+                            border-radius="50%"
+                        >
+                            <template #empty>
+                                <el-icon><Picture /></el-icon>
+                                <span>请上传图片</span>
+                            </template>
+                            <template #tip> 图片大小不能超过 5M </template>
+                        </UploadImgs>
+                    </template>
+
+                    <template v-if="item.type === 'input'">
+                        <el-input :placeholder="item.placeholder" v-model.trim="_ruleForm[`${item.prop}`]" />
+                    </template>
+                    <template v-if="item.type === 'select'">
+                        <el-select
+                            v-model="_ruleForm[`${item.prop}`]"
+                            :placeholder="item.placeholder"
+                            clearable
+                            style="width: 224px"
+                        >
+                            <el-option
+                                :label="option.label"
+                                :value="option.value"
+                                v-for="option in item.options"
+                                :key="option.value"
+                            />
+                        </el-select>
+                    </template>
+                </el-form-item>
+            </template>
+
+            <el-form-item style="margin-top: 20px">
+                <el-button type="primary" @click="submitForm(ruleFormRef)"> 提交 </el-button>
+                <el-button @click="resetForm(ruleFormRef)">重置 </el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { FormInstance, FormRules } from "element-plus";
+import { ElMessage } from "element-plus";
+// import UploadImgs from "@/components/Upload/Imgs.vue";
+interface IProps {
+    ruleForm: { [key: string]: any };
+    formData: any[];
+    rules: FormRules;
+    submitForm: () => void;
+    resetForm: () => void;
+}
+const ruleFormRef = ref<FormInstance>();
+const props = defineProps<IProps>();
+//将传递过来的值设置为响应式,这样就可以做一些输入的控制,props是单向的
+const _ruleForm = computed(() => props.ruleForm);
+// 接收 rules 并设置为响应式,必须要为响应式的,否则失效
+const _rules = ref(props.rules);
+//点击按钮验证,如果验证过来,可以将值传递到父组件
+const submitForm = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    await formEl.validate((valid, fields) => {
+        if (valid) {
+            ElMessage.success("提交的数据为 : " + JSON.stringify(_ruleForm.value));
+        } else {
+            console.log("error submit!", fields);
+        }
+    });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    formEl.resetFields();
+};
+</script>
+
+<style scoped lang="scss">
+// @import "./index.scss";
+</style>
--- a/src/components/FormTable/index.vue
+++ b/src/components/FormTable/index.vue
@@ -0,0 +1,189 @@
+<template>
+    <div class="detailsTable">
+        <el-table :data="tableData" :border="true" ref="tableRef" :height="height ? height : 340" :row-style="rowStyle">
+            <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="1000"
+                            :controls="false"
+                            style="width: 125px"
+                            v-model.trim="scope.row[item.prop]"
+                            :disabled="tableData[scope.$index].disabled"
+                            :placeholder="item.placeholder"
+                            :maxlength="item.maxLength"
+                            step-strictly
+                            @keyup.enter="handleEnterInput(item, scope.$index)"
+                        ></el-input-number>
+                    </template>
+                    <template #default="scope" v-if="item.formType === 'checkbox'">
+                        <el-checkbox v-model="scope.row[item.prop]" @change="handleCheckBox(scope.row, scope.$index)" />
+                    </template>
+                    <template #default="scope" v-if="item.formType === 'input'">
+                        <el-input
+                            :style="item.width ? item.width : 'width:125px'"
+                            v-model.trim="scope.row[item.prop]"
+                            :disabled="tableData[scope.$index].disabled"
+                            :placeholder="item.placeholder"
+                            :maxlength="item.maxLength"
+                            @input="verificationInput(item, scope.$index)"
+                            @keyup.enter="handleEnterInput(item, scope.$index)"
+                            ref="inputRef"
+                        ></el-input>
+                    </template>
+                    <!-- 这个是有远程功能的 -->
+                    <template #default="scope" v-if="item.formType === 'selectRemote'">
+                        <el-select
+                            :placeholder="item.placeholder"
+                            filterable
+                            remote
+                            clearable
+                            style="width: 280px"
+                            v-model.trim="scope.row[item.prop]"
+                            class="m-2 select"
+                            :disabled="tableData[scope.$index].disabled"
+                            remote-show-suffix
+                            :loading="loading"
+                            @clear="clear(scope.$index)"
+                            :remote-method="(query:any)=>{
+                                remoteMethod(query,item.prop,scope.$index)
+                        }"
+                        >
+                            <el-option
+                                v-for="option in item.options[scope.$index]"
+                                :key="option.materialNumber"
+                                :label="option.specifications"
+                                :value="option.idConvertBar"
+                                @click="handleRemoteClick(item, scope.$index)"
+                            />
+                        </el-select>
+                    </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 { cloneDeep } from "lodash-es";
+import { ElTable, ElTableColumn } from "element-plus";
+import { QuestionFilled } from "@element-plus/icons-vue";
+const props = defineProps<{
+    columns: any;
+    rowStyle?: (params: any) => void;
+    isStatus?: boolean;
+    tableData?: any;
+    height?: number;
+    getRemoteData?: (params: any) => void;
+    verificationInput?: (params: any) => void;
+    handleKeyupEnterInputValue?: (params: any) => void;
+    handleClear?: (params: any) => void;
+    handleCheckEmit?: (prams: any) => void;
+    loading?: any;
+}>();
+
+console.log(props, "=========props===========");
+const emits = defineEmits<{
+    (e: "getRemoteData", params: any): void;
+    (e: "verificationInput", params: any): void;
+    (e: "handleRemoteClickValue", params: any): void;
+    (e: "handleKeyupEnterInputValue", params: any): void;
+    (e: "handleClear", params: any): void;
+    (e: "handleCheckEmit", params: any): void;
+}>();
+//表格实例
+const tableRef = ref<any>(null);
+const inputRef = ref<any>(null);
+const selectRemote1Ref = ref<any>(null);
+
+//远程搜索
+const remoteMethod = async (val: any, prop: string, index: number) => {
+    emits("getRemoteData", {
+        val,
+        prop,
+        index
+    });
+};
+const handleCheckBox = (row: any, index: number) => {
+    emits("handleCheckEmit", {
+        index
+    });
+};
+//表单输入验证函数
+const verificationInput = (item: any, index: number) => {
+    const { prop } = item;
+    emits("verificationInput", {
+        prop,
+        index
+    });
+};
+const handleRemoteClick = (item: any, index: number) => {
+    emits("handleRemoteClickValue", { item, index });
+};
+const handleEnterInput = (item: any, index: number) => {
+    console.log("1232323");
+    emits("handleKeyupEnterInputValue", {
+        item,
+        index
+    });
+};
+const clear = (index: any) => {
+    emits("handleClear", {
+        index
+    });
+    console.log(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;
+}
+</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,151 @@
+<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";
+
+export interface ExcelParameterProps {
+    title: string; // 标题
+    fileSize?: number; // 上传文件的大小
+    fileType?: File.ExcelMimeType[]; // 上传文件的类型
+    tempApi?: (params: any) => Promise<any>; // 下载模板的Api
+    importApi?: (params: any) => Promise<any>; // 批量导入的Api
+    getTableList?: () => void; // 获取表格数据的Api
+}
+
+// 是否覆盖数据
+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;
+};
+
+// Excel 导入模板下载
+const downloadTemp = () => {
+    if (!parameter.value.tempApi) return;
+    useDownload(parameter.value.tempApi, `${parameter.value.title}模板`);
+};
+
+// 文件上传
+const uploadExcel = async (param: UploadRequestOptions) => {
+    let excelFormData = new FormData();
+    excelFormData.append("file", param.file);
+    excelFormData.append("isCover", isCover.value as unknown as Blob);
+    await parameter.value.importApi!(excelFormData);
+    parameter.value.getTableList && parameter.value.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/PermissionButton/index.vue
+++ b/src/components/PermissionButton/index.vue
@@ -0,0 +1,66 @@
+<template>
+    <!-- 按钮组模式 -->
+    <div class="permission-button-group">
+        <template v-for="(btn, index) in props.buttons" :key="index">
+            <!-- 过滤无权限的按钮 -->
+            <el-button
+                v-permissionDirective="btn.permission"
+                v-bind="btn.props"
+                :customClass="btn.class"
+                :disabled="btn.disabled"
+                @click="handleButtonClick(btn, $event)"
+            >
+                <template #default>
+                    {{ btn.text }}
+                    <slot :name="btn.name" />
+                </template>
+            </el-button>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+// 定义按钮属性类型
+interface ButtonProps {
+    // 按钮文本
+    text?: string;
+    // 按钮名称（用于插槽和标识）
+    name?: string;
+    // 按钮权限标识（支持单个或多个）
+    permission?: string | string[];
+    // Element Plus 按钮原生属性
+    props?: Record<string, any>;
+    // 自定义类名
+    class?: string;
+    // 是否禁用
+    disabled?: boolean;
+}
+
+// 组件属性
+const props = defineProps<{
+    // 按钮组配置（按钮组模式用）
+    buttons?: ButtonProps[];
+}>();
+
+// 处理按钮组点击事件
+const handleButtonClick = (btn: ButtonProps, event: Event) => {
+    // 触发组件的统一点击事件（携带按钮信息）
+    emit("handleButtonClickCallback", btn, event);
+};
+
+// 组件事件
+const emit = defineEmits<{
+    (e: "handleButtonClickCallback", btn: ButtonProps, event: Event): void;
+}>();
+</script>
+
+<style scoped>
+.permission-button {
+    /* 单个按钮的基础样式 */
+}
+.permission-button-group {
+    /* 按钮组的基础样式 */
+    display: inline-flex;
+    gap: 4px;
+}
+</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,37 @@
+<template>
+    <!-- 分页组件 -->
+    <el-pagination
+        :background="true"
+        :current-page="pageable.page"
+        :page-size="pageable.size"
+        :page-sizes="sizes"
+        :total="pageable.total_size"
+        layout="slot,sizes, total,prev,pager, next,jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+    >
+        <span style="font-size: 12px">
+            <span>共选中</span>
+            <span style="margin: 0 5px; color: #4178d5"> {{ length ? length : 0 }}</span>
+            <span>行 </span>
+        </span>
+    </el-pagination>
+</template>
+
+<script setup lang="ts" name="Pagination">
+interface Pageable {
+    page: number;
+    size: number;
+    total_size: number;
+}
+//size
+interface PaginationProps {
+    pageable: Pageable;
+    handleSizeChange: (size: number) => void;
+    handleCurrentChange: (currentPage: number) => void;
+    length: number;
+    sizes: 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"
+        /> -->
+        <slot name="search"></slot>
+        <!-- 表格头部 操作按钮 -->
+        <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="
+                row => {
+                    return routeName === 'boxCode' || routeName === 'boxMarkIndex' ? row.detailId + '' + row.id : row.id;
+                }
+            "
+            @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
+                v-if="pagination"
+                :pageable="pageable"
+                :handle-size-change="handleSizeChange"
+                :handle-current-change="handleCurrentChange"
+                :length="selectedList.length"
+                :sizes="sizes"
+            />
+        </slot>
+    </div>
+    <!-- 列设置 -->
+    <ColSetting v-if="toolButton" ref="colRef" v-model:col-setting="colSetting" />
+</template>
+
+<script setup lang="ts" name="ProTable">
+// import SearchForm from "@/components/SearchForm/index.vue";
+// /watch
+import { ref, provide, onMounted, toRef } 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?: (params: any) => Promise<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 }
+    sizes?: any;
+}
+
+// 接受父组件参数，配置默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+    formData: () => [],
+    columns: () => [],
+    requestAuto: true,
+    pagination: true,
+    initParam: {},
+    isBoxClass: true,
+    border: true,
+    toolButton: true,
+    // rowKey: `id${index}`,
+    // searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }),
+    sizes: [1, 2, 3, 4]
+});
+
+// 是否显示搜索模块
+// const isShowSearch = ref(true);
+// 表格 DOM 元素
+const tableRef = ref<InstanceType<typeof ElTable>>();
+const newValInitParams = toRef(props, "initParam");
+// 表格多选 Hooks
+const { selectionChange, selectedList, selectedListIds, isSelected } = useSelection(props.rowKey);
+
+// 清空选中数据列表
+const clearSelection = () => tableRef.value!.clearSelection();
+// 表格操作 Hooks
+const { tableData, pageable, getTableList, handleSizeChange, handleCurrentChange } = useTable(
+    routeName.value,
+    props.requestApi,
+    newValInitParams,
+    props.pagination,
+    props.requestError,
+    clearSelection
+);
+// 初始化请求
+onMounted(() => props.requestAuto && getTableList());
+
+// 接收 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,
+    getTableList,
+    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,229 @@
+<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' || item.type === 'selectRemote1' || item.type === 'selectRemote2'">
+            <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.code" v-for="option in item.options" :key="option.code" />
+            </el-select>
+            <!--item.prop -->
+        </template>
+
+        <!-- 多选带模糊搜索 -->
+        <template v-if="item.type === 'selectMultiple'">
+            <!-- multiple -->
+            <el-select
+                v-model="_searchParam[`${item.prop}`]"
+                filterable
+                clearable
+                multiple
+                :disabled="item.disabled"
+                :placeholder="item.placeholder"
+                class="m-2 select"
+                style="width: 224px"
+            >
+                <!-- 循环渲染选项：label 为显示文本，value 为实际提交值 -->
+                <el-option
+                    v-for="option in item.options"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                ></el-option>
+            </el-select>
+        </template>
+        <template v-if="item.type === 'selectMultipleD'">
+            <!-- multiple -->
+            <el-select
+                v-model="_searchParam[`${item.prop}`]"
+                filterable
+                clearable
+                :disabled="item.disabled"
+                :placeholder="item.placeholder"
+                class="m-2 select"
+                style="width: 224px"
+            >
+                <!-- 循环渲染选项：label 为显示文本，value 为实际提交值 -->
+                <el-option
+                    v-for="option in item.options"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                ></el-option>
+            </el-select>
+        </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>
+    </div>
+</template>
+
+<script lang="ts" setup name="SearchFormItem">
+import { verificationInput } from "./utils/verificationInput";
+//getCustomersApi
+import { getSupplierApi, getCustomersApi } from "@/api/modules/global";
+
+import { ref } from "vue";
+// const $router = useRouter();
+// const routeName: any = ref($router.currentRoute.value.name);
+interface SearchFormItem {
+    item: { [key: string]: any };
+    searchParam: { [key: string]: any };
+    search: (params: any) => void; // 搜索方法
+    handleEmitClear?: (item: any) => void;
+}
+
+const props = defineProps<SearchFormItem>();
+const _searchParam = computed(() => props.searchParam);
+
+let loading = ref(false);
+//日期选择后重选赋值
+const handlePicker = (item: any) => {
+    const { prop } = item;
+    if (prop === "Time" || prop === "Time1") {
+        if (Array.isArray(_searchParam.value[prop]) && _searchParam.value[prop].length > 0) {
+            _searchParam.value[item.startDate] = _searchParam.value[prop].join(",");
+        } else {
+            _searchParam.value[item.startDate] = "";
+        }
+    }
+};
+//供应商
+const getSupplier = async (keywords: any, item: any) => {
+    let org_number = _searchParam.value.org_number.join(",");
+    const result: any = await getSupplierApi({ keywords, org_number });
+    if (result?.code === 0) {
+        const { data } = result;
+        item.options = data;
+    }
+};
+//客戶
+const getCustomers = async (keywords: any, item: any) => {
+    let org_number = _searchParam.value.org_number.join(",");
+    const result: any = await getCustomersApi({ keywords, org_number });
+    if (result?.code === 0) {
+        const { data } = result;
+        console.log(item);
+        console.log(data);
+        // item.options = data;
+    }
+};
+
+//远程搜索(供应商)
+const remoteMethod = async (query: any, item: any) => {
+    loading.value = true;
+    if (!query) {
+        loading.value = false;
+        return;
+    }
+    //去除字符串首尾的所有空白字符。
+    let valClone = query.replace(/^\s*|\s*$/g, "");
+    if (!valClone.length) {
+        loading.value = false;
+        return;
+    }
+    //供应商
+    if (item.type === "selectRemote") {
+        getSupplier(valClone, item);
+    } else if (item.type === "selectRemote1") {
+        //客戶編碼
+        getCustomers(valClone, item);
+    } else if (item.type === "selectRemote2") {
+        //品线
+    }
+    loading.value = false;
+};
+
+const handleClear = (item: any) => {
+    item.options = [];
+};
+
+//input输入监听
+const handleInput = (item: any) => {
+    //验证
+    verificationInput(item, _searchParam);
+};
+
+const handleEmitClear = (item: any) => {
+    console.log(item);
+};
+</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,9 @@
+import { inputRexArray } from "./inputRexArray";
+
+export const verificationInput = (item: any, _searchParam: any) => {
+    const { prop } = item;
+    //轉換成數組傳給後端
+    if (item.isArray && _searchParam.value[prop]) {
+        inputRexArray(prop, _searchParam);
+    }
+};
--- a/src/components/SearchForm/index.scss
+++ b/src/components/SearchForm/index.scss
@@ -0,0 +1,46 @@
+.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,313 @@
+<template>
+    <div v-if="formData.length" class="table-search" style="display: flex">
+        <div style="flex: 2">
+            <el-form ref="formRef" :model="_searchParams" :inline="true">
+                <template v-for="item in formData" :key="item.prop">
+                    <el-form-item
+                        :prop="item.prop"
+                        :label-width="item.labelWidth ? item.labelWidth : '120px'"
+                        class="form-item"
+                        :label="item.label"
+                    >
+                        <!-- 输入框 -->
+                        <template v-if="item.type === 'input'">
+                            <el-input
+                                :placeholder="item.placeholder"
+                                :maxlength="item.maxlength || 255"
+                                v-model.trim="_searchParams[`${item.prop}`]"
+                                style="width: 224px"
+                                @input="handleInput(item)"
+                                @keyup.enter="handleFormSearch"
+                                clearable
+                                @clear="handleEmitClear(item)"
+                            />
+                        </template>
+                        <!-- 下拉框 -->
+                        <template v-if="item.type === 'select'">
+                            <el-select
+                                v-model="_searchParams[`${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="_searchParams[`${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' || item.type === 'selectRemote1' || item.type === 'selectRemote2'"
+                        >
+                            <el-select
+                                v-model="_searchParams[`${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.label"
+                                    :value="option.value"
+                                    v-for="option in item.options"
+                                    :key="option.label"
+                                />
+                            </el-select>
+                        </template>
+                        <!-- getProductLinesApi -->
+                        <template v-if="item.type === 'selectMultipleRemote' || item.type === 'selectProductLinesRemote'">
+                            <el-select
+                                v-model="_searchParams[`${item.prop}`]"
+                                :placeholder="item.placeholder"
+                                remote
+                                multiple
+                                filterable
+                                @clear="handleClear(item)"
+                                :loading="loading"
+                                class="m-2 select"
+                                remote-show-suffix
+                                :remote-method="
+                              (query:any) => {
+                                handleSelectMultipleRemote(
+                                  query,
+                                  item
+                                );
+                              }
+                            "
+                                :disabled="item.disabled"
+                                style="width: 224px"
+                            >
+                                <el-option
+                                    :label="option.label"
+                                    :value="option.value"
+                                    v-for="option in item.options"
+                                    :key="option.label"
+                                />
+                            </el-select>
+                        </template>
+                        <!--本地多选带模糊搜索 -->
+                        <template v-if="item.type === 'selectMultiple'">
+                            <!-- multiple -->
+                            <el-select
+                                v-model="_searchParams[`${item.prop}`]"
+                                filterable
+                                multiple
+                                :disabled="item.disabled"
+                                :placeholder="item.placeholder"
+                                class="m-2 select"
+                                style="width: 224px"
+                            >
+                                <!-- 循环渲染选项：label 为显示文本，value 为实际提交值 -->
+                                <el-option
+                                    v-for="option in item.options"
+                                    :key="option.value"
+                                    :label="option.label"
+                                    :value="option.value"
+                                ></el-option>
+                            </el-select>
+                        </template>
+                        <!-- 本地单选搜索 -->
+                        <template v-if="item.type === 'selectMultipleD'">
+                            <!-- multiple -->
+                            <el-select
+                                v-model="_searchParams[`${item.prop}`]"
+                                filterable
+                                clearable
+                                :disabled="item.disabled"
+                                :placeholder="item.placeholder"
+                                class="m-2 select"
+                                style="width: 224px"
+                            >
+                                <!-- 循环渲染选项：label 为显示文本，value 为实际提交值 -->
+                                <el-option
+                                    v-for="option in item.options"
+                                    :key="option.value"
+                                    :label="option.label"
+                                    :value="option.value"
+                                ></el-option>
+                            </el-select>
+                        </template>
+                    </el-form-item>
+                </template>
+            </el-form>
+        </div>
+        <div style="display: flex">
+            <el-button type="primary" @click="handleFormSearch" style="margin-bottom: 0"> 搜索 </el-button>
+            <el-button @click="handleFormReset" style="margin-bottom: 0">重置</el-button>
+        </div>
+    </div>
+</template>
+<script setup lang="ts" name="SearchForm">
+import { verificationInput } from "./components/utils/verificationInput";
+import { getSupplierApi, getCustomersApi, getProductLinesApi } from "@/api/modules/global";
+const props = defineProps<{
+    formData: any[];
+    searchParams: Record<string, any>;
+}>();
+
+const emits = defineEmits<{
+    (e: "search", result: Record<string, any>): void;
+    (e: "reset", result: Record<string, any>): void;
+}>();
+
+let loading = ref(false);
+
+const _searchParams = computed(() => {
+    return props.searchParams;
+});
+
+//日期选择后重选赋值
+const handlePicker = (item: any) => {
+    const { prop } = item;
+    if (prop === "Time" || prop === "Time1") {
+        if (Array.isArray(_searchParams.value[prop]) && _searchParams.value[prop].length > 0) {
+            _searchParams.value[item.startDate] = _searchParams.value[prop].join(",");
+        } else {
+            _searchParams.value[item.startDate] = "";
+        }
+    }
+};
+//供应商
+const getSupplier = async (keywords: any, item: any) => {
+    let org_number = _searchParams.value.org_number.join(",");
+    const result: any = await getSupplierApi({ keywords, org_number });
+    if (result?.code === 0) {
+        const { data } = result;
+        item.options = data;
+    }
+};
+//客戶
+const getCustomers = async (keywords: any, item: any) => {
+    let org_number = _searchParams.value.org_number.join(",");
+    const result: any = await getCustomersApi({ keywords, org_number });
+    if (result?.code === 0) {
+        const { data } = result;
+        if (Array.isArray(data) && data.length) {
+            let options: any = [];
+            data.forEach((item: any) => {
+                options.push({
+                    value: item.customer_number,
+                    label: item.customer_name
+                });
+            });
+            item.options = options;
+        }
+    }
+};
+//品线
+const getProductLines = async (keywords: any, item: any) => {
+    const result: any = await getProductLinesApi({ keywords });
+    if (result?.code === 0) {
+        const { data } = result;
+        if (Array.isArray(data) && data.length) {
+            let options: any = [];
+            data.forEach((item: any) => {
+                options.push({
+                    value: item,
+                    label: item
+                });
+            });
+            item.options = options;
+        }
+    }
+};
+//多选远程搜索
+const handleSelectMultipleRemote = async (query: any, item: any) => {
+    loading.value = true;
+    if (!query) {
+        loading.value = false;
+        return;
+    }
+    //去除字符串首尾的所有空白字符。
+    let valClone = query.replace(/^\s*|\s*$/g, "");
+    if (!valClone.length) {
+        loading.value = false;
+        return;
+    }
+    if (item.type === "selectMultipleRemote") {
+        //客戶編碼
+        getCustomers(valClone, item);
+    } else if (item.type === "selectProductLinesRemote") {
+        //品线
+        getProductLines(valClone, item);
+    }
+    loading.value = false;
+};
+
+//单选远程搜索(供应商)
+const remoteMethod = async (query: any, item: any) => {
+    loading.value = true;
+    if (!query) {
+        loading.value = false;
+        return;
+    }
+    //去除字符串首尾的所有空白字符。
+    let valClone = query.replace(/^\s*|\s*$/g, "");
+    if (!valClone.length) {
+        loading.value = false;
+        return;
+    }
+    //供应商
+    if (item.type === "selectRemote") {
+        getSupplier(valClone, item);
+    }
+
+    loading.value = false;
+};
+
+const handleClear = (item: any) => {
+    item.options = [];
+};
+
+//input输入监听
+const handleInput = (item: any) => {
+    //验证
+    verificationInput(item, _searchParams);
+};
+
+const handleEmitClear = (item: any) => {
+    console.log(item);
+};
+
+const handleFormSearch = () => {
+    emits("search", _searchParams.value);
+};
+const handleFormReset = () => {
+    emits("reset", _searchParams.value);
+};
+</script>
+<style lang="scss" scope>
+@import "./index.scss";
+</style>