add:新增三个组件
parent
778b503f20
commit
bab9c9855f
|
|
@ -0,0 +1,190 @@
|
||||||
|
<!--展示树结构的抽屉选择器-->
|
||||||
|
<template>
|
||||||
|
<view class="bg-gradual-blue">
|
||||||
|
<!-- <scroll-view scroll-y class="DrawerPage" :class="showDrawer?'show':''">
|
||||||
|
<view class='padding margin text-center'>
|
||||||
|
<view class='cu-btn bg-green lg block shadow radius margin' @tap="showModal" data-target="viewModal">
|
||||||
|
选择机组
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view> -->
|
||||||
|
<!--选择机组相关的抽屉-->
|
||||||
|
<scroll-view scroll-y class="DrawerWindow" :class="showDrawer?'show':''"
|
||||||
|
style="height:100%;back-ground-color:red;">
|
||||||
|
<view cclass="cu-list menu card-menu margin-top margin-bottom-xl shadow-lg">
|
||||||
|
<view class="cu-bar bg-grey solid-bottom margin-top-sm">
|
||||||
|
<view class="action text-white">
|
||||||
|
<text>{{title}}</text>
|
||||||
|
<!-- <text class="text-red margin-left">{{dataList ? dataList.length:0}}</text> -->
|
||||||
|
<text>个</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<scroll-view scroll-y class="bg-white" style="max-height: calc(100vh);">
|
||||||
|
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
|
||||||
|
<view class="cu-item arrow" v-for="(item,index) in dataList" :key="index">
|
||||||
|
<view class="content" @tap="tabSelect(item)">
|
||||||
|
<text class="text-grey">🏭</text>
|
||||||
|
<text class="text-grey">{{item.name}}</text>
|
||||||
|
<view class="solid-bottom text-xs">
|
||||||
|
<text class="text-gray">机组数：<!-- {{item.children.length}} --> </text>
|
||||||
|
<!-- <view class="cu-tag badge bg-cyan">出库站台</view> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
<view class="DrawerClose" :class="showDrawer?'show':''" @tap="hideModal">
|
||||||
|
<text class="cuIcon-pullright"></text>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'TreeDrawerPicker',
|
||||||
|
props: {
|
||||||
|
// 表单项配置数组
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: () => 'Demo标题'
|
||||||
|
},
|
||||||
|
// 表单项配置数组
|
||||||
|
dataList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
showDrawer: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: ['on-select', 'on-hiden'],
|
||||||
|
watch: {
|
||||||
|
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
modalName: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
hideModal(e) {
|
||||||
|
this.$emit('on-hiden', false);
|
||||||
|
},
|
||||||
|
tabSelect(item) {
|
||||||
|
this.$emit('on-select', {
|
||||||
|
...item
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
page {
|
||||||
|
background-image: var(--gradualBlue);
|
||||||
|
width: 100vw;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage {
|
||||||
|
position: fixed;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
left: 0vw;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
transition: all 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage.show {
|
||||||
|
transform: scale(0.9, 0.9);
|
||||||
|
left: 85vw;
|
||||||
|
box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
|
||||||
|
transform-origin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerWindow {
|
||||||
|
position: absolute;
|
||||||
|
width: 85vw;
|
||||||
|
height: 100vh;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
transform: scale(0.9, 0.9) translateX(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: all 0.4s;
|
||||||
|
padding: 100upx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerWindow.show {
|
||||||
|
transform: scale(1, 1) translateX(0%);
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerClose {
|
||||||
|
position: absolute;
|
||||||
|
width: 40vw;
|
||||||
|
height: 100vh;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
color: transparent;
|
||||||
|
padding-bottom: 30upx;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
|
||||||
|
letter-spacing: 5px;
|
||||||
|
font-size: 50upx;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: all 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerClose.show {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: all;
|
||||||
|
width: 15vw;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage .cu-bar.tabbar .action button.cuIcon {
|
||||||
|
width: 64upx;
|
||||||
|
height: 64upx;
|
||||||
|
line-height: 64upx;
|
||||||
|
margin: 0;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage .cu-bar.tabbar .action .cu-avatar {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage .nav {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage .nav .cu-item.cur {
|
||||||
|
border-bottom: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage .nav .cu-item.cur::after {
|
||||||
|
content: "";
|
||||||
|
width: 10upx;
|
||||||
|
height: 10upx;
|
||||||
|
background-color: currentColor;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10upx;
|
||||||
|
border-radius: 10upx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage .cu-bar.tabbar .action {
|
||||||
|
flex: initial;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,195 @@
|
||||||
|
<!--展示树结构的抽屉选择器-->
|
||||||
|
<template>
|
||||||
|
<view class="bg-gradual-blue">
|
||||||
|
<!-- <scroll-view scroll-y class="DrawerPage" :class="showDrawer?'show':''">
|
||||||
|
<view class='padding margin text-center'>
|
||||||
|
<view class='cu-btn bg-green lg block shadow radius margin' @tap="showModal" data-target="viewModal">
|
||||||
|
选择机组
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view> -->
|
||||||
|
<!--选择机组相关的抽屉-->
|
||||||
|
<scroll-view scroll-y class="DrawerWindow" :class="showDrawer?'show':''"
|
||||||
|
style="height:100%;back-ground-color:red;">
|
||||||
|
<view cclass="cu-list menu card-menu margin-top margin-bottom-xl shadow-lg">
|
||||||
|
<view class="cu-bar bg-grey solid-bottom margin-top-sm">
|
||||||
|
<view class="action text-white">
|
||||||
|
<text>{{title}}</text>
|
||||||
|
<text class="text-red margin-left">{{dataList ? dataList.length:0}}</text>
|
||||||
|
<text>个</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<scroll-view scroll-y class="bg-white" style="max-height: calc(100vh);">
|
||||||
|
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
|
||||||
|
<view class="cu-item arrow" v-for="(item,index) in dataList" :key="index">
|
||||||
|
<view class="content" @tap="tabSelect(item)">
|
||||||
|
<text class="text-grey">🏭</text>
|
||||||
|
<text class="text-grey">{{item.name}}</text>
|
||||||
|
<view class="solid-bottom text-xs">
|
||||||
|
<text class="text-gray">{{totalTitle}}:</text>
|
||||||
|
<view class="cu-tag badge bg-cyan">{{item.children?item.children.length:0}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="DrawerClose" :class="showDrawer?'show':''" @tap="hideModal">
|
||||||
|
<text class="cuIcon-pullright"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DrawerPicker',
|
||||||
|
props: {
|
||||||
|
// 表单项配置数组
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: () => 'Demo标题'
|
||||||
|
},
|
||||||
|
totalTitle: {
|
||||||
|
type: String,
|
||||||
|
default: () => 'total标题'
|
||||||
|
},
|
||||||
|
// 表单项配置数组
|
||||||
|
dataList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
showDrawer: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: ['on-select', 'on-hiden'],
|
||||||
|
watch: {
|
||||||
|
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
modalName: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
hideModal(e) {
|
||||||
|
this.$emit('on-hiden', false);
|
||||||
|
},
|
||||||
|
tabSelect(item) {
|
||||||
|
this.$emit('on-select', {
|
||||||
|
...item
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
page {
|
||||||
|
background-image: var(--gradualBlue);
|
||||||
|
width: 100vw;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage {
|
||||||
|
position: fixed;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
left: 0vw;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
transition: all 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage.show {
|
||||||
|
transform: scale(0.9, 0.9);
|
||||||
|
left: 85vw;
|
||||||
|
box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
|
||||||
|
transform-origin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerWindow {
|
||||||
|
position: absolute;
|
||||||
|
width: 85vw;
|
||||||
|
height: 100vh;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
transform: scale(0.9, 0.9) translateX(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: all 0.4s;
|
||||||
|
padding: 100upx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerWindow.show {
|
||||||
|
transform: scale(1, 1) translateX(0%);
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerClose {
|
||||||
|
position: absolute;
|
||||||
|
width: 40vw;
|
||||||
|
height: 100vh;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
color: transparent;
|
||||||
|
padding-bottom: 30upx;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
|
||||||
|
letter-spacing: 5px;
|
||||||
|
font-size: 50upx;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: all 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerClose.show {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: all;
|
||||||
|
width: 15vw;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage .cu-bar.tabbar .action button.cuIcon {
|
||||||
|
width: 64upx;
|
||||||
|
height: 64upx;
|
||||||
|
line-height: 64upx;
|
||||||
|
margin: 0;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage .cu-bar.tabbar .action .cu-avatar {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage .nav {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage .nav .cu-item.cur {
|
||||||
|
border-bottom: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage .nav .cu-item.cur::after {
|
||||||
|
content: "";
|
||||||
|
width: 10upx;
|
||||||
|
height: 10upx;
|
||||||
|
background-color: currentColor;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10upx;
|
||||||
|
border-radius: 10upx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DrawerPage .cu-bar.tabbar .action {
|
||||||
|
flex: initial;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,197 @@
|
||||||
|
<template>
|
||||||
|
<view class="pro-query">
|
||||||
|
<form @submit="formSubmit" @reset="formReset">
|
||||||
|
<!-- 循环渲染表单项 -->
|
||||||
|
<view class="cu-form-group" :class="{'margin-top': index === 0}" v-for="(item, index) in visibleItems"
|
||||||
|
:key="item.key">
|
||||||
|
<view class="title">{{ item.label }}</view>
|
||||||
|
|
||||||
|
<!-- 输入框 -->
|
||||||
|
<input v-if="item.type === 'input'" :placeholder="item.placeholder || '请输入'" :name="item.key"
|
||||||
|
v-model="formData[item.key]" :disabled="item.disabled || false" />
|
||||||
|
|
||||||
|
<!-- 多行文本框 -->
|
||||||
|
<textarea v-else-if="item.type === 'textarea'" :placeholder="item.placeholder || '请输入'"
|
||||||
|
v-model="formData[item.key]" :disabled="item.disabled || false"></textarea>
|
||||||
|
|
||||||
|
<!-- 数字输入框 -->
|
||||||
|
<input v-else-if="item.type === 'number'" type="number" :placeholder="item.placeholder || '请输入'"
|
||||||
|
v-model="formData[item.key]" :disabled="item.disabled || false" />
|
||||||
|
|
||||||
|
<!-- 下拉选择（picker） -->
|
||||||
|
<picker v-else-if="item.type === 'select'"
|
||||||
|
@change="(e) => { formData[item.key] = item.options[e.detail.value].value }" :range="item.options"
|
||||||
|
range-key="text" :disabled="item.disabled || false">
|
||||||
|
<view class="picker">
|
||||||
|
{{ formData[item.key] ? getOptionText(item.options, formData[item.key]) : '请选择' }}
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
|
||||||
|
<!-- 开关 -->
|
||||||
|
<switch v-else-if="item.type === 'switch'" :checked="formData[item.key]"
|
||||||
|
@change="(e) => { formData[item.key] = e.detail.value }"
|
||||||
|
:class="formData[item.key] ? 'checked' : ''" :disabled="item.disabled || false"></switch>
|
||||||
|
|
||||||
|
<!-- 单选组 -->
|
||||||
|
<radio-group v-else-if="item.type === 'radio'" @change="(e) => { formData[item.key] = e.detail.value }">
|
||||||
|
<radio v-for="opt in item.options" :key="opt.value" :value="opt.value"
|
||||||
|
:checked="formData[item.key] === opt.value"
|
||||||
|
:class="formData[item.key] === opt.value ? 'checked' : ''" :disabled="item.disabled || false">
|
||||||
|
{{ opt.text }}
|
||||||
|
</radio>
|
||||||
|
</radio-group>
|
||||||
|
|
||||||
|
<!-- 复选组 -->
|
||||||
|
<checkbox-group v-else-if="item.type === 'checkbox'"
|
||||||
|
@change="(e) => { formData[item.key] = e.detail.value }">
|
||||||
|
<checkbox v-for="opt in item.options" :key="opt.value" :value="opt.value"
|
||||||
|
:checked="formData[item.key] && formData[item.key].includes(opt.value)"
|
||||||
|
:class="formData[item.key] && formData[item.key].includes(opt.value) ? 'checked' : ''"
|
||||||
|
:disabled="item.disabled || false">{{ opt.text }}</checkbox>
|
||||||
|
</checkbox-group>
|
||||||
|
|
||||||
|
<!-- 日期选择 -->
|
||||||
|
<picker v-else-if="item.type === 'datePicker'" mode="date" :value="formData[item.key]"
|
||||||
|
@change="(e) => { formData[item.key] = e.detail.value }" :disabled="item.disabled || false">
|
||||||
|
<view class="picker">{{ formData[item.key] || '选择日期' }}</view>
|
||||||
|
</picker>
|
||||||
|
|
||||||
|
<!-- 时间选择 -->
|
||||||
|
<picker v-else-if="item.type === 'timePicker'" mode="time" :value="formData[item.key]"
|
||||||
|
@change="(e) => { formData[item.key] = e.detail.value }" :disabled="item.disabled || false">
|
||||||
|
<view class="picker">{{ formData[item.key] || '选择时间' }}</view>
|
||||||
|
</picker>
|
||||||
|
|
||||||
|
<!-- 自定义插槽 -->
|
||||||
|
<slot v-else-if="item.type === 'custom'" :name="item.customRender" :data="formData"></slot>
|
||||||
|
|
||||||
|
<!-- 默认 fallback -->
|
||||||
|
<input v-else :placeholder="item.placeholder || '请输入'" v-model="formData[item.key]" />
|
||||||
|
</view>
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<view class="padding flex justify-between cu-form-group">
|
||||||
|
<view class="flex">
|
||||||
|
<button class="cu-btn block bg-blue margin-tb-sm md" form-type="submit" :disabled="isLoading">
|
||||||
|
<view class="flex align-center justify-center">
|
||||||
|
<!-- 加载旋转动画 -->
|
||||||
|
<text v-if="isLoading" class="cuIcon-loading2 cuIconfont-spin"></text>
|
||||||
|
<text>{{ isLoading ? '提交中...' : submitText }}</text>
|
||||||
|
</view>
|
||||||
|
</button>
|
||||||
|
<button class="cu-btn block line-blue margin-tb-sm md" @click="formReset"
|
||||||
|
style="margin-left: 20rpx;">重置</button>
|
||||||
|
<!-- <button class="cu-btn block line-blue margin-tb-sm lg" form-type="reset" style="margin-left: 20rpx;">重置</button> -->
|
||||||
|
</view>
|
||||||
|
<view v-if="more" class="flex">
|
||||||
|
<view class="cu-btn line-blue" @click="hiddenHandle">
|
||||||
|
{{ hidden ? '展开' : '收起' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</form>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ProQuery',
|
||||||
|
props: {
|
||||||
|
// 表单项配置数组
|
||||||
|
searchParam: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
submitText: {
|
||||||
|
type: String,
|
||||||
|
default: () => '查询'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: ['on-search', 'on-reset'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formData: {}, // 表单数据对象
|
||||||
|
hidden: true, // 是否隐藏有 hidden 标记的项
|
||||||
|
more: false, // 是否有隐藏项
|
||||||
|
isLoading: false, //加载状态
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 根据 hidden 状态过滤可见项
|
||||||
|
visibleItems() {
|
||||||
|
if (this.hidden) {
|
||||||
|
return this.searchParam.filter(item => !item.hidden);
|
||||||
|
}
|
||||||
|
return this.searchParam;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
searchParam: {
|
||||||
|
immediate: true,
|
||||||
|
handler(newVal) {
|
||||||
|
if (newVal && newVal.length) {
|
||||||
|
// 初始化 formData
|
||||||
|
const data = {};
|
||||||
|
let hasHidden = false;
|
||||||
|
newVal.forEach(item => {
|
||||||
|
data[item.key] = item.defaultValue ?? '';
|
||||||
|
if (item.hidden) hasHidden = true;
|
||||||
|
});
|
||||||
|
this.formData = data;
|
||||||
|
this.more = hasHidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取 select 选项的显示文本
|
||||||
|
getOptionText(options, value) {
|
||||||
|
const found = options.find(opt => opt.value === value);
|
||||||
|
return found ? found.text : '';
|
||||||
|
},
|
||||||
|
// 提交事件
|
||||||
|
// formSubmit(e) {
|
||||||
|
// // 如果使用原生表单，e.detail.value 包含所有 name 字段，但我们已经使用 v-model，直接传 formData
|
||||||
|
// this.$emit('on-search', {
|
||||||
|
// ...this.formData
|
||||||
|
// });
|
||||||
|
// },
|
||||||
|
// ★★★ 修改提交方法：增加加载控制 ★★★
|
||||||
|
formSubmit(e) {
|
||||||
|
if (this.isLoading) return;// 防止重复提交
|
||||||
|
this.isLoading = true;
|
||||||
|
// 定义完成回调，父组件异步处理结束后必须调用
|
||||||
|
const done = () => {
|
||||||
|
this.isLoading = false;
|
||||||
|
};
|
||||||
|
// 将表单数据和 done 回调一并传递给父组件
|
||||||
|
this.$emit('on-search', {
|
||||||
|
...this.formData
|
||||||
|
}, done);
|
||||||
|
},
|
||||||
|
// 重置事件
|
||||||
|
formReset(e) {
|
||||||
|
if (e) e.preventDefault();
|
||||||
|
const data = {};
|
||||||
|
this.searchParam.forEach(item => {
|
||||||
|
data[item.key] = item.defaultValue != null ? item.defaultValue : '';
|
||||||
|
});
|
||||||
|
this.formData = data;
|
||||||
|
this.isLoading = false; // 强制重置加载状态，避免卡死
|
||||||
|
this.$emit('on-reset');
|
||||||
|
},
|
||||||
|
// 展开/收起切换
|
||||||
|
hiddenHandle() {
|
||||||
|
this.hidden = !this.hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 保留文件1中关于标题宽度的样式 */
|
||||||
|
.cu-form-group .title {
|
||||||
|
min-width: calc(4em + 15px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 其它 ColorUI 样式已在全局引入，此处无需重复定义 */
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue