340 lines
13 KiB
Vue
340 lines
13 KiB
Vue
<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 === 'selectFilterable'">
|
|
<el-select
|
|
v-model="ruleForm[`${item.prop}`]"
|
|
:placeholder="item.placeholder"
|
|
clearable
|
|
:disabled="item.disabled"
|
|
style="width: 224px"
|
|
ref="selectRef"
|
|
filterable
|
|
>
|
|
<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>
|