wms后台管理系统迁移
This commit is contained in:
32
src/components/Search/index.scss
Normal file
32
src/components/Search/index.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
.search-box {
|
||||
display: flex;
|
||||
min-width: 1280px;
|
||||
padding: 16px;
|
||||
background: #ffffff;
|
||||
.el-form-item--default {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.form-box {
|
||||
.form-item {
|
||||
width: 300px;
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
.form-item-select {
|
||||
width: 240px;
|
||||
}
|
||||
.el-input__wrapper {
|
||||
width: 178px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-box {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.copyBtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
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>
|
||||
48
src/components/Search/interface/index.ts
Normal file
48
src/components/Search/interface/index.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
export interface formDataIProps {
|
||||
reg?: any;
|
||||
prop?: string;
|
||||
label?: string;
|
||||
isShow?: boolean;
|
||||
value?: any; //默认值
|
||||
bomList?: any;
|
||||
placeholder?: string;
|
||||
labelWidth?: string;
|
||||
rules?: any;
|
||||
error?: string;
|
||||
showMessage?: boolean;
|
||||
inlineMessage?: boolean;
|
||||
size?: string;
|
||||
style?: string;
|
||||
inputWidth?: string;
|
||||
brIndex?: number;
|
||||
optionProps?: any;
|
||||
rgx?: any;
|
||||
type:
|
||||
| "input"
|
||||
| "inputs"
|
||||
| "textarea"
|
||||
| "select"
|
||||
| "datetimepicker"
|
||||
| "date"
|
||||
| "daterange"
|
||||
| "radio"
|
||||
| "checked"
|
||||
| "cascader"
|
||||
| "selectRemote"
|
||||
| "customCondition"
|
||||
| "customCondition1"
|
||||
| "customCondition2";
|
||||
options?: any;
|
||||
startPlaceholder?: string;
|
||||
endPlaceholder?: string;
|
||||
defaultTime?: any;
|
||||
radios?: any;
|
||||
checkeds?: any;
|
||||
isCopy?: boolean;
|
||||
required?: boolean;
|
||||
disabled?: boolean;
|
||||
txt?: string;
|
||||
formClass?: string;
|
||||
isNumber?: boolean;
|
||||
ruleForm?: any;
|
||||
}
|
||||
Reference in New Issue
Block a user