2025-03-26

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>

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;
+    }
+}

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;
+    }
+};

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]);
+    }
+};

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%);
+    }
+}

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>