|
@@ -1,6 +1,6 @@
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from "vue";
|
|
import { onMounted, ref } from "vue";
|
|
-import { ElForm } from "element-plus";
|
|
|
|
|
|
+import { ElForm, ElMessage } from "element-plus";
|
|
import { useVModel } from "@vueuse/core";
|
|
import { useVModel } from "@vueuse/core";
|
|
import { basicFormProps } from "./types";
|
|
import { basicFormProps } from "./types";
|
|
import { CONTACT_OPTIONS } from "./configs/config";
|
|
import { CONTACT_OPTIONS } from "./configs/config";
|
|
@@ -34,9 +34,25 @@ onMounted(() => {
|
|
CONTACT_OPTIONS.find(c => c.rule.validator("", data))?.value || "4";
|
|
CONTACT_OPTIONS.find(c => c.rule.validator("", data))?.value || "4";
|
|
});
|
|
});
|
|
|
|
|
|
-function handleChange({ trigger, onChange, field }: any) {
|
|
|
|
- if (!trigger || trigger !== "change") {
|
|
|
|
- return;
|
|
|
|
|
|
+function handleChange({ onChange, field }: any, isRange: boolean) {
|
|
|
|
+ // if (!trigger || trigger !== "change") {
|
|
|
|
+ // return;
|
|
|
|
+ // }
|
|
|
|
+ if(isRange){
|
|
|
|
+ const [first, end] = formData.value[field]
|
|
|
|
+ if(!first && !end){
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ if(!first){
|
|
|
|
+ ElMessage.warning('请输入起始值')
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ if(!end){
|
|
|
|
+ ElMessage.warning('请输入结束值')
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
emit("trigger-blur", formData.value);
|
|
emit("trigger-blur", formData.value);
|
|
@@ -65,32 +81,32 @@ defineExpose({
|
|
<!-- 输入框 -->
|
|
<!-- 输入框 -->
|
|
<template v-if="item.type === 'input'">
|
|
<template v-if="item.type === 'input'">
|
|
<el-input v-model="formData[item.field]" :placeholder="item.placeholder" v-bind="item.otherOptions"
|
|
<el-input v-model="formData[item.field]" :placeholder="item.placeholder" v-bind="item.otherOptions"
|
|
- clearable />
|
|
|
|
|
|
+ clearable @change="handleChange(item)" />
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<!-- 数字输入 -->
|
|
<!-- 数字输入 -->
|
|
<template v-if="item.type === 'number'">
|
|
<template v-if="item.type === 'number'">
|
|
- <el-input-number v-model="formData[item.field]" :placeholder="item.placeholder" clearable />
|
|
|
|
|
|
+ <el-input-number v-model="formData[item.field]" :placeholder="item.placeholder" clearable @change="handleChange(item)" />
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<!-- 选择框 -->
|
|
<!-- 选择框 -->
|
|
<template v-if="item.type === 'select'">
|
|
<template v-if="item.type === 'select'">
|
|
- <el-select v-model="formData[item.field]" :placeholder="item.placeholder" clearable>
|
|
|
|
|
|
+ <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"
|
|
<el-option v-for="(opt, index) in item.options" :key="index" :label="opt.label" :value="opt.value"
|
|
:disabled="item.otherOptions?.disabled ? opt.disabled : false" />
|
|
:disabled="item.otherOptions?.disabled ? opt.disabled : false" />
|
|
</el-select>
|
|
</el-select>
|
|
</template>
|
|
</template>
|
|
<template v-if="item.type === 'radio'">
|
|
<template v-if="item.type === 'radio'">
|
|
- <el-radio-group v-model="formData[item.field]">
|
|
|
|
|
|
+ <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 v-for="(opt, index) in item.options" :key="index" :label="opt.value">{{ opt.label
|
|
}}</el-radio>
|
|
}}</el-radio>
|
|
</el-radio-group>
|
|
</el-radio-group>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<template v-if="item.type === 'input_group'">
|
|
<template v-if="item.type === 'input_group'">
|
|
- <el-input v-model="formData[item.field]">
|
|
|
|
|
|
+ <el-input v-model="formData[item.field]" @change="handleChange(item)">
|
|
<template #prepend>
|
|
<template #prepend>
|
|
- <el-select v-model="formData[item.type_field]" placeholder="Select" style="width: 150px">
|
|
|
|
|
|
+ <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"
|
|
<el-option v-for="option in item.otherOptions?.inputGroupOptions" :value="option.value"
|
|
:label="option.label" :key="option.value" />
|
|
:label="option.label" :key="option.value" />
|
|
</el-select>
|
|
</el-select>
|
|
@@ -103,14 +119,14 @@ defineExpose({
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<template v-if="item.type === 'checkbox'">
|
|
<template v-if="item.type === 'checkbox'">
|
|
- <el-checkbox-group v-model="formData[item.field]">
|
|
|
|
|
|
+ <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 v-for="(opt, index) in item.options" :key="index" :label="opt.value">{{ opt.label }}
|
|
</el-checkbox>
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-checkbox-group>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<template v-if="item.type === 'date_picker'">
|
|
<template v-if="item.type === 'date_picker'">
|
|
- <el-date-picker v-model="formData[item.field]" @change="handleChange(item)" style="width: 100%"
|
|
|
|
|
|
+ <el-date-picker v-model="formData[item.field]" @change="handleChange(item)" style="width: 100%"
|
|
format="YYYY-MM-DD" v-bind="item.otherOptions" />
|
|
format="YYYY-MM-DD" v-bind="item.otherOptions" />
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -118,7 +134,7 @@ defineExpose({
|
|
<template v-if="item.type === 'contact'">
|
|
<template v-if="item.type === 'contact'">
|
|
<el-input v-model="formData[item.field]">
|
|
<el-input v-model="formData[item.field]">
|
|
<template #prepend>
|
|
<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-option v-for="c in CONTACT_OPTIONS" :key="c.value" :label="c.label" :value="c.value" />
|
|
</el-select>
|
|
</el-select>
|
|
</template>
|
|
</template>
|
|
@@ -133,20 +149,20 @@ defineExpose({
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<template v-if="item.type === 'supplier-query'">
|
|
<template v-if="item.type === 'supplier-query'">
|
|
- <SupplierQuery v-model="formData[item.field]" :placeholder="item.placeholder || '卖出方公司'" />
|
|
|
|
|
|
+ <SupplierQuery v-model="formData[item.field]" :placeholder="item.placeholder || '卖出方公司'" @change="handleChange(item, true)" />
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<template v-if="item.type === 'business-query'">
|
|
<template v-if="item.type === 'business-query'">
|
|
- <BusinessQuery v-model="formData[item.field]" :placeholder="item.placeholder || '买入方公司'" />
|
|
|
|
|
|
+ <BusinessQuery v-model="formData[item.field]" :placeholder="item.placeholder || '买入方公司'" @change="handleChange(item, true)" />
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<template v-if="item.type === 'range'">
|
|
<template v-if="item.type === 'range'">
|
|
<div flex gap-2 w-full>
|
|
<div flex gap-2 w-full>
|
|
- <el-input v-model="formData[item.field][0]" :placeholder="item.otherOptions?.startPlaceholder" />
|
|
|
|
|
|
+ <el-input v-model="formData[item.field][0]" :placeholder="item.otherOptions?.startPlaceholder" @change="handleChange(item, true)" />
|
|
|
|
|
|
<span>至</span>
|
|
<span>至</span>
|
|
|
|
|
|
- <el-input v-model="formData[item.field][1]" :placeholder="item.otherOptions?.endPlaceholder" />
|
|
|
|
|
|
+ <el-input v-model="formData[item.field][1]" :placeholder="item.otherOptions?.endPlaceholder" @change="handleChange(item, true)" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</el-form-item>
|
|
</el-form-item>
|