|
@@ -12,8 +12,12 @@ import BrandQuery from "./fields/brand-query.vue";
|
|
|
import CustomerQuery from "./fields/customer-query.vue"
|
|
|
// import PlatformQuery from "./fields/customer-query.vue"
|
|
|
|
|
|
+import invInQuery from "./fields/inv-in-query.vue";
|
|
|
+
|
|
|
|
|
|
import { shortcuts } from "./date-picker"
|
|
|
+import InvInQuery from "./fields/inv-in-query.vue";
|
|
|
+import InvOutQuery from "./fields/inv-out-query.vue";
|
|
|
|
|
|
|
|
|
const props = defineProps(basicFormProps);
|
|
@@ -65,52 +69,46 @@ defineExpose({
|
|
|
<el-row>
|
|
|
<template v-for="(item, index) in formItems" :key="index">
|
|
|
<el-col v-bind="item.span ? { span: item.span } : colLayout" v-if="!item.isHidden">
|
|
|
- <el-form-item
|
|
|
- :label="item.label"
|
|
|
- :prop="item.field"
|
|
|
- :rules="item.type !== 'contact' ? item.rules : CONTACT_OPTIONS[contact].rule"
|
|
|
- :label-width="item.labelWidth"
|
|
|
- :style="itemStyle"
|
|
|
- >
|
|
|
- <!--插槽 -->
|
|
|
+ <el-form-item :label="item.label" :prop="item.field"
|
|
|
+ :rules="item.type !== 'contact' ? item.rules : CONTACT_OPTIONS[contact].rule" :label-width="item.labelWidth"
|
|
|
+ :style="itemStyle">
|
|
|
+ <!--插槽 -->
|
|
|
<template v-if="item.slot">
|
|
|
<slot :name="item.slot" />
|
|
|
</template>
|
|
|
|
|
|
<!-- 输入框 -->
|
|
|
<template v-if="item.type === 'input'">
|
|
|
- <el-input
|
|
|
- v-model="formData[item.field]"
|
|
|
- :placeholder="item.placeholder"
|
|
|
- v-bind="item.otherOptions"
|
|
|
- @change="handleChange(item)"
|
|
|
- clearable
|
|
|
- />
|
|
|
+ <el-input v-model="formData[item.field]" :placeholder="item.placeholder" v-bind="item.otherOptions"
|
|
|
+ @change="handleChange(item)" clearable />
|
|
|
</template>
|
|
|
|
|
|
<!-- 数字输入 -->
|
|
|
<template v-if="item.type === 'number'">
|
|
|
- <el-input-number v-model="formData[item.field]" :placeholder="item.placeholder" clearable @change="handleChange(item)" />
|
|
|
+ <el-input-number v-model="formData[item.field]" :placeholder="item.placeholder" clearable
|
|
|
+ @change="handleChange(item)" />
|
|
|
</template>
|
|
|
|
|
|
<!-- 选择框 -->
|
|
|
<template v-if="item.type === 'select'">
|
|
|
- <el-select v-model="formData[item.field]" :placeholder="item.placeholder" clearable @change="handleChange(item)">
|
|
|
+ <el-select v-model="formData[item.field]" :placeholder="item.placeholder" clearable
|
|
|
+ @change="handleChange(item)">
|
|
|
<el-option v-for="(opt, index) in item.options" :key="index" :label="opt.label" :value="opt.value"
|
|
|
:disabled="item.otherOptions?.disabled ? opt.disabled : false" />
|
|
|
</el-select>
|
|
|
</template>
|
|
|
<template v-if="item.type === 'radio'">
|
|
|
- <el-radio-group v-model="formData[item.field]" @change="handleChange(item)">
|
|
|
+ <el-radio-group v-model="formData[item.field]" @change="handleChange(item)">
|
|
|
<el-radio v-for="(opt, index) in item.options" :key="index" :label="opt.value">{{ opt.label
|
|
|
}}</el-radio>
|
|
|
</el-radio-group>
|
|
|
</template>
|
|
|
|
|
|
<template v-if="item.type === 'input_group'">
|
|
|
- <el-input v-model="formData[item.field]" @change="handleChange(item)">
|
|
|
+ <el-input v-model="formData[item.field]" @change="handleChange(item)">
|
|
|
<template #prepend>
|
|
|
- <el-select v-model="formData[item.type_field]" placeholder="Select" style="width: 150px" @change="handleChange(item)">
|
|
|
+ <el-select v-model="formData[item.type_field]" placeholder="Select" style="width: 150px"
|
|
|
+ @change="handleChange(item)">
|
|
|
<el-option v-for="option in item.otherOptions?.inputGroupOptions" :value="option.value"
|
|
|
:label="option.label" :key="option.value" />
|
|
|
</el-select>
|
|
@@ -123,28 +121,22 @@ defineExpose({
|
|
|
</template>
|
|
|
|
|
|
<template v-if="item.type === 'checkbox'">
|
|
|
- <el-checkbox-group v-model="formData[item.field]" @change="handleChange(item)">
|
|
|
+ <el-checkbox-group v-model="formData[item.field]" @change="handleChange(item)">
|
|
|
<el-checkbox v-for="(opt, index) in item.options" :key="index" :label="opt.value">{{ opt.label }}
|
|
|
</el-checkbox>
|
|
|
</el-checkbox-group>
|
|
|
</template>
|
|
|
|
|
|
<template v-if="item.type === 'date_picker'">
|
|
|
- <el-date-picker
|
|
|
- v-model="formData[item.field]"
|
|
|
- @change="handleChange(item)"
|
|
|
- style="width: 100%"
|
|
|
- format="YYYY-MM-DD"
|
|
|
- v-bind="item.otherOptions"
|
|
|
- :shortcuts="shortcuts"
|
|
|
- />
|
|
|
+ <el-date-picker v-model="formData[item.field]" @change="handleChange(item)" style="width: 100%"
|
|
|
+ format="YYYY-MM-DD" v-bind="item.otherOptions" :shortcuts="shortcuts" />
|
|
|
</template>
|
|
|
|
|
|
<!-- 联系方式 -->
|
|
|
<template v-if="item.type === 'contact'">
|
|
|
<el-input v-model="formData[item.field]">
|
|
|
<template #prepend>
|
|
|
- <el-select style="width: 115px" v-model="contact">
|
|
|
+ <el-select style="width: 115px" v-model="contact">
|
|
|
<el-option v-for="c in CONTACT_OPTIONS" :key="c.value" :label="c.label" :value="c.value" />
|
|
|
</el-select>
|
|
|
</template>
|
|
@@ -159,38 +151,51 @@ defineExpose({
|
|
|
</template>
|
|
|
|
|
|
<template v-if="item.type === 'supplier-query'">
|
|
|
- <SupplierQuery v-model="formData[item.field]" :placeholder="item.placeholder || '卖出方公司'" @change="handleChange(item, true)" />
|
|
|
+ <SupplierQuery v-model="formData[item.field]" :placeholder="item.placeholder || '卖出方公司'"
|
|
|
+ @change="handleChange(item, true)" />
|
|
|
</template>
|
|
|
|
|
|
<template v-if="item.type === 'business-query'">
|
|
|
- <BusinessQuery v-model="formData[item.field]" :placeholder="item.placeholder || '买入方公司'" @change="handleChange(item, true)" />
|
|
|
+ <BusinessQuery v-model="formData[item.field]" :placeholder="item.placeholder || '买入方公司'"
|
|
|
+ @change="handleChange(item, true)" />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="item.type === 'inv-in-query'">
|
|
|
+ <InvInQuery v-model="formData[item.field]" :placeholder="item.placeholder || '发票购买方公司'"
|
|
|
+ @change="handleChange(item, true)" />
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ <template v-if="item.type === 'inv-out-query'">
|
|
|
+ <InvOutQuery v-model="formData[item.field]" :placeholder="item.placeholder || '发票销售方公司'"
|
|
|
+ @change="handleChange(item, true)" />
|
|
|
</template>
|
|
|
|
|
|
<template v-if="item.type === 'brand-query'">
|
|
|
- <BrandQuery v-model="formData[item.field]" :placeholder="item.placeholder || '品牌'" @change="handleChange(item, true)" />
|
|
|
+ <BrandQuery v-model="formData[item.field]" :placeholder="item.placeholder || '品牌'"
|
|
|
+ @change="handleChange(item, true)" />
|
|
|
</template>
|
|
|
|
|
|
<template v-if="item.type === 'platform-query'">
|
|
|
- <PlatformQuery v-model="formData[item.field]" :placeholder="item.placeholder || '品牌'" @change="handleChange(item, true)" />
|
|
|
+ <PlatformQuery v-model="formData[item.field]" :placeholder="item.placeholder || '品牌'"
|
|
|
+ @change="handleChange(item, true)" />
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<template v-if="item.type === 'customer-query'">
|
|
|
- <CustomerQuery
|
|
|
- v-model="formData[item.field]"
|
|
|
- :placeholder="item.placeholder || '企业客户'"
|
|
|
- @change="handleChange(item, true)"
|
|
|
- v-bind="item.otherOptions"
|
|
|
- />
|
|
|
+ <CustomerQuery v-model="formData[item.field]" :placeholder="item.placeholder || '企业客户'"
|
|
|
+ @change="handleChange(item, true)" v-bind="item.otherOptions" />
|
|
|
</template>
|
|
|
|
|
|
<template v-if="item.type === 'range'">
|
|
|
<div flex gap-2 w-full>
|
|
|
- <el-input v-model="formData[item.field][0]" :placeholder="item.otherOptions?.startPlaceholder" @change="handleChange(item, true)" />
|
|
|
+ <el-input v-model="formData[item.field][0]" :placeholder="item.otherOptions?.startPlaceholder"
|
|
|
+ @change="handleChange(item, true)" />
|
|
|
|
|
|
<span>至</span>
|
|
|
|
|
|
- <el-input v-model="formData[item.field][1]" :placeholder="item.otherOptions?.endPlaceholder" @change="handleChange(item, true)" />
|
|
|
+ <el-input v-model="formData[item.field][1]" :placeholder="item.otherOptions?.endPlaceholder"
|
|
|
+ @change="handleChange(item, true)" />
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-form-item>
|
|
@@ -202,7 +207,7 @@ defineExpose({
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item>
|
|
|
- <slot name="action" />
|
|
|
+ <slot name="action" />
|
|
|
</el-form-item>
|
|
|
</el-row>
|
|
|
|