wms后台管理系统迁移
This commit is contained in:
320
src/components/Search/index.vue
Normal file
320
src/components/Search/index.vue
Normal file
@@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<div class="search-box">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:inline="true"
|
||||
class="form-box"
|
||||
:show-message="false"
|
||||
style="height: 100%"
|
||||
:label-width="100"
|
||||
>
|
||||
<template v-for="item in formData" :key="item.prop">
|
||||
<el-form-item
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
:label-width="item.labelWidth"
|
||||
:rules="item.rules"
|
||||
:error="item.error"
|
||||
:show-message="item.showMessage ? item.showMessage : false"
|
||||
:inline-message="item.inlineMessage"
|
||||
:required="item.required"
|
||||
class="form-item"
|
||||
:style="item.formItemStyle"
|
||||
>
|
||||
<!-- 输入框 -->
|
||||
<template v-if="item.type === 'input'">
|
||||
<el-input
|
||||
v-model.trim="ruleForm[`${item.prop}`]"
|
||||
:placeholder="item.placeholder"
|
||||
:disabled="item.disabled"
|
||||
:maxlength="item.maxLength || 255"
|
||||
@input="handleInputValue(item.prop)"
|
||||
:style="item.style"
|
||||
>
|
||||
<template #append v-if="item.isCopy">
|
||||
<span :data-clipboard-text="ruleForm[`${item.prop}`]" class="copyBtn">
|
||||
<el-icon><DocumentCopy /></el-icon>
|
||||
</span>
|
||||
</template>
|
||||
</el-input>
|
||||
<template v-if="item.txt">
|
||||
<span style="padding-left: 8px">{{ item.txt }}</span>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 下拉框 -->
|
||||
<template v-if="item.type === 'select'">
|
||||
<el-select
|
||||
v-model="ruleForm[`${item.prop}`]"
|
||||
:placeholder="item.placeholder"
|
||||
clearable
|
||||
:disabled="item.disabled"
|
||||
style="width: 224px"
|
||||
ref="selectRef"
|
||||
>
|
||||
<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="ruleForm[`${item.prop}`]"
|
||||
:type="item.type"
|
||||
:placeholder="item.placeholder"
|
||||
format="YYYY-MM-DD"
|
||||
:style="item.style || 'width: 224px'"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</template>
|
||||
<!-- 开始-结束-日期选择器 -->
|
||||
<template v-if="item.type === 'daterange'">
|
||||
<el-date-picker
|
||||
v-model="ruleForm[`${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"
|
||||
/>
|
||||
</template>
|
||||
<!-- 远程搜索下拉框 -->
|
||||
<template v-if="item.type === 'selectRemote'">
|
||||
<el-select
|
||||
v-model="ruleForm[`${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.prop
|
||||
);
|
||||
}
|
||||
"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<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 === 'selectRemote1'">
|
||||
<el-select
|
||||
v-model="ruleForm[`${item.prop}`]"
|
||||
:placeholder="item.placeholder"
|
||||
clearable
|
||||
remote
|
||||
reserve-keyword
|
||||
filterable
|
||||
class="m-2 select"
|
||||
remote-show-suffix
|
||||
:remote-method="
|
||||
(query:any) => {
|
||||
remoteMethod(
|
||||
query,
|
||||
item.prop
|
||||
);
|
||||
}
|
||||
"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<el-option
|
||||
:label="option.stockName"
|
||||
:value="option.value"
|
||||
v-for="option in item.options"
|
||||
:key="option.label"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-if="item.type === 'selectRemote2'">
|
||||
<el-select
|
||||
v-model="ruleForm[`${item.prop}`]"
|
||||
:placeholder="item.placeholder"
|
||||
clearable
|
||||
remote
|
||||
reserve-keyword
|
||||
filterable
|
||||
class="m-2 select"
|
||||
remote-show-suffix
|
||||
:remote-method="
|
||||
(query:any) => {
|
||||
remoteMethod(
|
||||
query,
|
||||
item.prop
|
||||
);
|
||||
}
|
||||
"
|
||||
: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 class="btn-box">
|
||||
<el-button type="primary" @click="onSearch" style="margin-bottom: 0" @keyup.enter="onSearch"> 搜索 </el-button>
|
||||
<el-button @click="onReset" style="margin-bottom: 0">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="Search">
|
||||
import { ref, toRefs } from "vue";
|
||||
import { FormInstance } from "element-plus";
|
||||
import { DocumentCopy } from "@element-plus/icons-vue";
|
||||
import { getSubUcStockApi, getOrgApi, getCustomersApi, getSupplierApi, getSubUcStockByNameApi } from "@/api/modules/global";
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
interface IProps {
|
||||
formData: any;
|
||||
ruleForm: any;
|
||||
handleReset?: () => void;
|
||||
handleSearch?: () => void;
|
||||
handleRemoteMehod?: () => void;
|
||||
handleConvertSeparators?: () => void;
|
||||
}
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
formData: () => [],
|
||||
ruleForm: {},
|
||||
handleReset: () => {},
|
||||
handleSearch: () => {},
|
||||
handleRemoteMehod: () => {},
|
||||
handleSetInputValue: () => {},
|
||||
handleConvertSeparators: () => {}
|
||||
});
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: "handleReset"): void;
|
||||
(e: "handleSearch"): void;
|
||||
(e: "handleRemoteMehod", params: any): void;
|
||||
(e: "handleSetInputValue", prop: any): void;
|
||||
(e: "handleConvertSeparators", prop: any): void;
|
||||
//handleConvertSeparators
|
||||
}>();
|
||||
|
||||
const state: any = toRefs(props);
|
||||
const selectRef = ref<any>(null);
|
||||
const slectRef1 = ref<any>(null);
|
||||
const { ruleForm } = state;
|
||||
const getSubUcStockByName = async (query: any, prop: any) => {
|
||||
const rulest = await getSubUcStockByNameApi(query);
|
||||
if (rulest.status === 200) {
|
||||
const { data } = rulest;
|
||||
emits("handleRemoteMehod", {
|
||||
prop,
|
||||
data
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputValue = (prop: any) => {
|
||||
if (prop === "boxBillNos" || prop === "serialNumbers") {
|
||||
emits("handleConvertSeparators", prop);
|
||||
}
|
||||
if (prop === "qty") {
|
||||
emits("handleSetInputValue", prop);
|
||||
}
|
||||
};
|
||||
const getSubUcStock = async (query: any, prop: any) => {
|
||||
const rulest = await getSubUcStockApi(query);
|
||||
if (rulest.status === 200) {
|
||||
const { data } = rulest;
|
||||
emits("handleRemoteMehod", {
|
||||
prop,
|
||||
data
|
||||
});
|
||||
}
|
||||
};
|
||||
const getCustomers = async (query: any, prop: any) => {
|
||||
const rulest = await getCustomersApi(query);
|
||||
if (rulest.status === 200) {
|
||||
const { data } = rulest;
|
||||
emits("handleRemoteMehod", {
|
||||
prop,
|
||||
data
|
||||
});
|
||||
}
|
||||
};
|
||||
const getSupplier = async (query: any, prop: any) => {
|
||||
const rulest = await getSupplierApi(query);
|
||||
if (rulest.status === 200) {
|
||||
const { data } = rulest;
|
||||
emits("handleRemoteMehod", {
|
||||
prop,
|
||||
data
|
||||
});
|
||||
}
|
||||
};
|
||||
const getOrg = async (query: any, prop: any) => {
|
||||
const rulest = await getOrgApi(query);
|
||||
if (rulest.status === 200) {
|
||||
const { data } = rulest;
|
||||
emits("handleRemoteMehod", {
|
||||
prop,
|
||||
data
|
||||
});
|
||||
}
|
||||
};
|
||||
const remoteMethod = (query: any, prop: any) => {
|
||||
if (!query) {
|
||||
return;
|
||||
}
|
||||
if (prop === "receiptCustomer") {
|
||||
getCustomers(query, prop);
|
||||
}
|
||||
if (prop === "supplierId") {
|
||||
getSupplier(query, prop);
|
||||
}
|
||||
if (prop === "orgId" || prop === "deliveryOrgId") {
|
||||
getOrg(query, prop);
|
||||
}
|
||||
if (prop === "srcsubStockCode" || prop === "destsubStockCode") {
|
||||
getSubUcStock(query, prop);
|
||||
}
|
||||
|
||||
if (prop === "subStockCode") {
|
||||
getSubUcStockByName(query, prop);
|
||||
}
|
||||
};
|
||||
const onSearch = () => {
|
||||
emits("handleSearch");
|
||||
};
|
||||
const onReset = () => {
|
||||
emits("handleReset");
|
||||
};
|
||||
const handleKeyupSearch = (e: any) => {
|
||||
if (e.keyCode === 13) {
|
||||
emits("handleSearch");
|
||||
}
|
||||
};
|
||||
onActivated(() => {
|
||||
document.addEventListener("keyup", handleKeyupSearch, false);
|
||||
});
|
||||
onDeactivated(() => {
|
||||
document.removeEventListener("keyup", handleKeyupSearch, false);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scope>
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
Reference in New Issue
Block a user