😎 !1006 update Web/src/components/table/search.vue.

Merge pull request !1006 from Mr先生/N/A

Web/src/components/table/search.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="table-search-container" v-if="props.search.length > 0">
-		<el-form ref="tableSearchRef" :model="model" label-width="100px" class="table-form">
+		<el-form ref="tableSearchRef" :model="searchModel" label-width="100px" class="table-form">
 			<el-row :gutter="20">
 				<!-- <el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="4" class="mb20"></el-col> -->
 				<el-col :xs="12" :sm="5" :md="5" :lg="6" :xl="4" class="mb20" v-for="(val, key) in search" :key="key" v-show="key < 3 || state.isToggle">
@@ -12,7 +12,7 @@
 							:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: val.type === 'input' ? 'blur' : 'change' }]"
 						>
 							<el-input
-								v-model="model[val.prop]"
+								v-model="searchModel[val.prop]"
 								v-bind="val.comProps"
 								:placeholder="val.placeholder"
 								:clearable="!val.required"
@@ -22,7 +22,7 @@
 								class="w100"
 							/>
 							<el-date-picker
-								v-model="model[val.prop]"
+								v-model="searchModel[val.prop]"
 								v-bind="val.comProps"
 								type="date"
 								:placeholder="val.placeholder"
@@ -32,7 +32,7 @@
 								class="w100"
 							/>
 							<el-date-picker
-								v-model="model[val.prop]"
+								v-model="searchModel[val.prop]"
 								v-bind="val.comProps"
 								type="monthrange"
 								value-format="YYYY/MM/DD"
@@ -43,7 +43,7 @@
 								class="w100"
 							/>
 							<el-date-picker
-								v-model="model[val.prop]"
+								v-model="searchModel[val.prop]"
 								v-bind="val.comProps"
 								type="daterange"
 								value-format="YYYY/MM/DD"
@@ -53,7 +53,7 @@
 								@change="val.change"
 								class="w100"
 							/>
-							<el-select v-model="model[val.prop]" v-bind="val.comProps" :clearable="!val.required" :placeholder="val.placeholder" v-else-if="val.type === 'select'" @change="val.change" class="w100">
+							<el-select v-model="searchModel[val.prop]" v-bind="val.comProps" :clearable="!val.required" :placeholder="val.placeholder" v-else-if="val.type === 'select'" @change="val.change" class="w100">
 								<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
 							</el-select>
 							<el-cascader
@@ -66,7 +66,7 @@
 								@change="val.change"
 								class="w100"
 								v-bind="val.comProps"
-								v-model="model[val.prop]"
+								v-model="searchModel[val.prop]"
 							>
 							</el-cascader>
 						</el-form-item>
@@ -84,10 +84,10 @@
 						</template>
 						<div>
 							<!-- 使用el-button-group会导致具有type属性的按钮的右边框无法显示 -->
-							<el-button-group>
+							<!-- <el-button-group> -->
 								<el-button plain type="primary" icon="ele-Search" @click="onSearch(tableSearchRef)"> 查询 </el-button>
 								<el-button icon="ele-Refresh" @click="onReset(tableSearchRef)" style="margin-left: 12px"> 重置 </el-button>
-							</el-button-group>
+							<!-- </el-button-group> -->
 						</div>
 					</el-form-item>
 				</el-col>
@@ -101,6 +101,7 @@ import { reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
 import { saulVModel } from '/@/utils/saulVModel';
 
+
 // 定义父组件传过来的值
 const props = defineProps({
 	// 搜索表单,type-控件类型（input,select,cascader,date）,options-type为selct时需传值，cascaderData,cascaderProps-type为cascader时需传值，属性同elementUI,cascaderProps不传则使用state默认。
@@ -111,17 +112,17 @@ const props = defineProps({
 	},
 	reset: {
 		type: Object,
-		default: () => {},
+		default: () => ({}),
 	},
 	modelValue: {
 		type: Object,
-		default: () => {},
+		default: () => ({}),
 	},
 });
 
 // 定义子组件向父组件传值/事件
 const emit = defineEmits(['search', 'reset', 'update:modelValue']);
-
+const searchModel=ref(props.modelValue);
 // 定义变量内容
 const tableSearchRef = ref<FormInstance>();
 const state = reactive({
@@ -129,14 +130,14 @@ const state = reactive({
 	cascaderProps: { checkStrictly: true, emitPath: false, value: 'id', label: 'name', expandTrigger: 'hover' },
 });
 
-const model = saulVModel(props, 'modelValue', emit);
+const model = saulVModel(props, 'modelValue', emit).value;
 
 // 查询
 const onSearch = (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 	formEl.validate((valid: boolean) => {
 		if (valid) {
-			emit('search');
+			emit('search',model);
 		} else {
 			return false;
 		}
@@ -147,8 +148,9 @@ const onSearch = (formEl: FormInstance | undefined) => {
 const onReset = (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 	formEl.resetFields();
-	emit('reset');
+	emit('reset',model);
 };
+
 </script>
 
 <style scoped lang="scss">
@@ -167,4 +169,5 @@ const onReset = (formEl: FormInstance | undefined) => {
 		}
 	}
 }
+
 </style>