RRSWithSmartHome
/
pda_uniapp
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add:新增三个组件

master
何应权 2026-08-03 10:11:22 +08:00
parent 778b503f20
commit bab9c9855f
3 changed files with 582 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
components/commonUI/DrawerPicker.vue 100644
View File

@ -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>

195
components/commonUI/TreeDrawerPicker.vue 100644
View File

@ -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>

197
components/proQuery/proQuery.vue 100644
View File

@ -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>