日期插件 可参照
ext.dcloud.net.cn/plugin?id=1…
可参照 进行编写
ext.dcloud.net.cn/plugin?id=1…
<template>
<view class="padding-top page">
<scroll-view scroll-y="true" :style="styleHeight(1)">
<view class="card-background card-page-padding">
<!-- <view>{{height}}</view> -->
<view class="card-search" v-for="(box,box_index) in menuList" :key="box_index">
<view class="card-search-title">
<u--text :bold="true" size="32rpx" :text="box.title"></u--text>
</view>
<view class="card-search-tag">
<!-- <u-tag class="search-item-tag" bgColor="#ffffff" color="#000000" borderColor="#c0c0c0" text="待复检" plain>
</u-tag>
<u-tag class="search-item-tag" bgColor="#ffffff" color="#000000" borderColor="#c0c0c0" text="待终检" plain>
</u-tag>
<u-tag class="search-item-tag" bgColor="#ffffff" color="#000000" borderColor="#c0c0c0" text="待验收" plain>
</u-tag>
<u-tag class="search-item-tag" bgColor="#ffffff" color="#000000" borderColor="#c0c0c0" text="已验收" plain>
</u-tag> -->
<block v-if="box.type=='radio'">
<view class="filter-box-radio" v-for="(label,label_index) in box.submenu" :key="label_index"
:class="{'on':label.selected}" @click="selectRadioLabel(box_index,label_index)">
<u--text :block="true" align="center" :color="label.selected?'#ffffff':'#000000'" :bold="false"
size="28rpx" :text="label.label"></u--text>
</view>
</block>
</view>
</view>
<u--form labelPosition="top" :model="formData" labelWidth="200" ref="uForm" :labelStyle="{fontWeight:'bolder'}">
<u-form-item label="验收类型">
<u--input v-model="formData.typeName" clearable :adjustPosition="false" maxlength="50"></u--input>
</u-form-item>
<u-form-item label="项目查询">
<u--input v-model="formData.projectName" clearable :adjustPosition="false" maxlength="50"></u--input>
</u-form-item>
<u-form-item label="验收单位">
<u--input v-model="formData.address" clearable :adjustPosition="false" maxlength="50"></u--input>
</u-form-item>
<u-form-item label="验收人">
<u--input v-model="formData.name" clearable :adjustPosition="false" maxlength="50"></u--input>
</u-form-item>
<u-form-item label="验收时间">
<!-- <u--input v-model="formData.checkDate" disabled disabledColor="#ffffff" placeholder="请选择验收时间"
border="none"></u--input> -->
<view class="time-content">
{{checkDate.startDate!='' && checkDate.endDate!='' ? checkDate.startDate + '-' + checkDate.endDate:'请选择' }}
<u-icon name="close" v-if="checkDate.startDate!='' && checkDate.endDate!=''"
@click="clearTime('date-range','checkDate',['startDate','endDate'])" color="#2979ff"
size="20px"></u-icon>
</view>
<u-icon slot="right" @click="showPop('date-range','checkDate',['startDate','endDate']); hideKeyboard()"
size="22px" color="#3c9cff" name="clock-fill"></u-icon>
</u-form-item>
</u--form>
<lingfeng-timepicker ref="timePop" :type="pickerType" :defaultData="defaultData" :minDate="minDate"
:maxDate="maxDate" @change="timeChange"></lingfeng-timepicker>
</view>
</scroll-view>
<view class="foot-button" :style="styleHeight(2)">
<u-button class="reset-button" @click="resetFilterData" text="重置"></u-button>
<u-button class="submit-button" type="primary" @click="submitFilterData" text="确定"></u-button>
</view>
</view>
</template>
<script>
import {
getFormatDate
} from "@/common/tool.js";
const [year, month, date] = getFormatDate().split("-");
export default {
data() {
return {
height: 0, // 键盘高度
menuList: [{
title: "验收阶段",
type: 'radio',
value: null,
submenu: [{
label: '待复检',
value: '01',
},
{
label: '待终检',
value: '02',
},
{
label: '待验收',
value: '03',
},
{
label: '已验收',
value: '04',
},
]
},
{
title: "验收类别",
type: 'radio',
value: null,
submenu: [{
label: '单位工程',
value: '1',
},
{
label: '分部工程',
value: '2',
},
{
label: '分项工程',
value: '3',
},
{
label: '检验批工程',
value: '4',
},
]
},
],
activeMenuArr: [], //UI状态
shadowActiveMenuArr: [], //记录选中
defaultActive: [],
subData: [], //菜单数据
defaultSelected: [], // 默认选中
defaultSelectedId: [
// ['01'],
// ['1']
], // 默认选中
formData: {
typeName: '',
projectName: '',
address: '',
name: '',
startDate: '',
endDate: '',
},
pickerType: 'year',
defaultData: {},
minDate: {
year: 2000,
month: 1,
date: 1
},
maxDate: {
year: 2100,
month: 1,
date: 1
},
checkDate: {
startDate: '',
endDate: '',
},
}
},
onLoad(option) {
let _this = this
const eventChannel = this.getOpenerEventChannel();
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataPage', function(data) {
_this.defaultSelectedId = []
if (!uni.$u.test.isEmpty(data)) {
if (data.status != null) {
_this.defaultSelectedId[0] = []
_this.defaultSelectedId[0][0] = data.status
} else {
_this.defaultSelectedId[0] = []
}
if (data.category != null) {
_this.defaultSelectedId[1] = []
_this.defaultSelectedId[1][0] = data.category
} else {
_this.defaultSelectedId[1] = []
}
_this.formData = data
if (_this.formData.startDate != null) {
_this.checkDate.startDate = _this.formData.startDate
}
if (_this.formData.endDate != null) {
_this.checkDate.endDate = _this.formData.endDate
}
console.log(_this.defaultSelectedId, _this.formData, '_this.formData')
}
})
},
onShow() {
this.initData()
this.processPage()
},
onReady() {
uni.onKeyboardHeightChange(res => {
if (res.height == 0) {
// 键盘隐藏
this.height = 0
} else {
// 键盘显示
this.height = res.height
}
})
},
methods: {
styleHeight(type) {
if (type == 1) {
if (this.height == 0) {
return {
// #ifdef H5
height: `calc(100vh - 200rpx)`,
// #endif
// #ifdef APP-PLUS
height: `calc(100vh - 140rpx)`,
// #endif
};
} else {
return {
height: `calc(100vh - ${this.height}px - 140rpx)`,
};
}
} else if (type == 2) {
if (this.height == 0) {
return {
btome: `0px`,
};
} else {
return {
bottom: `${this.height}px`,
};
}
}
},
stylebottoem() {
},
hideKeyboard() {
uni.hideKeyboard()
},
clearTime(type, currData, currType) {
this.pickerType = type;
if (currType.length == 2) {
this[currData][currType[0]] = ''
this[currData][currType[1]] = ''
this.defaultData.startTime = '';
this.defaultData.endTime = '';
} else if (currType.length == 1) {
this[currData][currType[0]] = ''
this.defaultData[type] = '';
}
if (currData == "checkDate") {
this.formData.startDate = ''
this.formData.endDate = ''
}
},
showPop(type, currData, currType) {
this.pickerType = type;
if (currType.length == 2) {
this.defaultData.startTime = this[currData][currType[0]];
this.defaultData.endTime = this[currData][currType[1]];
} else if (currType.length == 1) {
this.defaultData[type] = this[currData][currType[0]];
}
// console.log(type, this.defaultData, "this.defaultData")
this.$refs.timePop.show(currData, currType);
},
timeChange(val, currData, type) {
if (type.length == 2) {
this[currData][type[0]] = val[0]
this[currData][type[1]] = val[1]
} else if (type.length == 1) {
this[currData][type] = val
}
if (currData == "checkDate") {
this.formData.startDate = this.checkDate.startDate
this.formData.endDate = this.checkDate.endDate
}
},
// 数据刷新页面清空
initParams() {
this.checkDate.startDate = year + '-' + month + '-' + date
this.checkDate.endDate = year + '-' + month + '-' + date
},
resetFilterData() {
let tmpArr = [];
let level = this.shadowActiveMenuArr.length;
while (level > 0) {
tmpArr.push([]);
let box = this.subData[level - 1].submenu;
for (let i = 0; i < box.length; i++) {
this.subData[level - 1].submenu[i].selected = false;
}
level--;
}
this.activeMenuArr = JSON.parse(JSON.stringify(tmpArr));
this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpArr));
this.defaultSelected = JSON.parse(JSON.stringify(tmpArr));
this.defaultSelectedId = JSON.parse(JSON.stringify(tmpArr));
console.log(this.defaultSelectedId, "this.defaultSelectedId")
this.$forceUpdate();
this.formData.typeName = ""
this.formData.projectName = ""
this.formData.address = ""
this.formData.name = ""
this.formData.startDate = ""
this.formData.endDate = ""
let paramsData = {}
paramsData.status = ''
paramsData.category = ''
paramsData.typeName = uni.$u.trim(this.formData.typeName)
paramsData.projectName = uni.$u.trim(this.formData.projectName)
paramsData.address = uni.$u.trim(this.formData.address)
paramsData.name = uni.$u.trim(this.formData.name)
paramsData.startDate = uni.$u.trim(this.formData.startDate)
paramsData.endDate = uni.$u.trim(this.formData.endDate)
console.log(paramsData, "paraData")
uni.navigateBack({
success: function(res) {
uni.$emit('filterParams', {
paramsData: paramsData
})
}
})
},
submitFilterData() {
let defaultSelectedId = []
console.log(this.activeMenuArr, "this.activeMenuArr")
this.subData.forEach((list, index) => {
defaultSelectedId.push([])
if (list.type == 'radio') {
list.submenu.forEach((item, mumber) => {
if (this.activeMenuArr[index][0] != null && this.activeMenuArr[index][0] == mumber) {
defaultSelectedId[index].push(item.value)
}
})
}
})
this.shadowActiveMenuArr = JSON.parse(JSON.stringify(this.activeMenuArr));
this.defaultSelectedId = JSON.parse(JSON.stringify(defaultSelectedId));
console.log(this.shadowActiveMenuArr, "this.defaultSelectedId")
let paramsData = {}
paramsData.status = String(this.defaultSelectedId[0])
paramsData.category = String(this.defaultSelectedId[1])
paramsData.typeName = uni.$u.trim(this.formData.typeName)
paramsData.projectName = uni.$u.trim(this.formData.projectName)
paramsData.address = uni.$u.trim(this.formData.address)
paramsData.name = uni.$u.trim(this.formData.name)
paramsData.startDate = uni.$u.trim(this.formData.startDate)
paramsData.endDate = uni.$u.trim(this.formData.endDate)
console.log(paramsData, "paraData")
var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2]; //上一个页面
// prevPage.getData(paraData)
console.log(paramsData, "paraDataparaDataparaData")
uni.navigateBack({
success: function(res) {
uni.$emit('filterParams', {
paramsData: paramsData
})
}
})
},
//选中单选类label-UI状态
selectRadioLabel(box_index, label_index) {
let activeIndex = this.activeMenuArr[box_index][0];
if (activeIndex == label_index) {
this.subData[box_index].submenu[activeIndex].selected = false;
this.activeMenuArr[box_index][0] = null;
} else {
if (activeIndex != null && activeIndex < this.subData[box_index].submenu.length) {
this.subData[box_index].submenu[activeIndex].selected = false;
}
this.subData[box_index].submenu[label_index].selected = true;
this.activeMenuArr[box_index][0] = label_index;
}
// console.log(this.activeMenuArr, "this.activeMenuArr")
this.$forceUpdate();
},
initData() {
let tmpMenuActiveArr = [];
for (let i = 0; i < this.menuList.length; i++) {
let tmpitem = this.menuList[i];
//初始化选中项数组-ui状态
tmpMenuActiveArr.push([]);
}
//初始化选中项数组
tmpMenuActiveArr = this.defaultActive.length > 0 ? this.defaultActive : this.activeMenuArr.length > 0 ? this
.activeMenuArr : tmpMenuActiveArr;
this.defaultActive = [];
this.activeMenuArr.splice(0, this.activeMenuArr.length, ...JSON.parse(JSON.stringify(tmpMenuActiveArr)));
//加载菜单数据
this.subData = this.menuList;
if (this.defaultSelectedId.length > 0) {
this.defaultSelected = []
this.subData.forEach((list, index) => {
this.defaultSelected.push([])
if (list.type == 'radio') {
list.submenu.forEach((item, mumber) => {
console.log(this.defaultSelectedId[index][mumber], this.defaultSelectedId, item.value)
if (this.defaultSelectedId[index][0] != null && this.defaultSelectedId[index][0] == item.value) {
this.defaultSelected[index].push(mumber)
}
})
}
})
this.activeMenuArr = this.defaultSelected
this.shadowActiveMenuArr = JSON.parse(JSON.stringify(this.defaultSelected));
} else {
this.activeMenuArr = tmpMenuActiveArr
this.defaultSelected = tmpMenuActiveArr
this.defaultSelectedId = tmpMenuActiveArr
this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
}
},
processPage() {
//重载筛选页选中状态
let level = this.shadowActiveMenuArr.length;
for (let i = 0; i < level; i++) {
let box = this.subData[i].submenu;
for (let j = 0; j < box.length; j++) {
if (this.shadowActiveMenuArr[i].indexOf(j) > -1) {
this.subData[i].submenu[j].selected = true;
} else {
this.subData[i].submenu[j].selected = false;
}
}
}
},
// 返回
goBack() {
uni.navigateBack({
delta: 1
})
},
}
}
</script>
<style lang="scss" scoped>
.card-page-padding {
padding-bottom: 10rpx;
}
.time-content {
width: calc(100% - 20px);
margin-right: 20px;
display: flex;
justify-content: space-between;
border: 1rpx solid #dadbde;
padding: 10rpx 20rpx;
border-radius: 8rpx;
}
.foot-button {
display: flex;
height: 80rpx;
padding: 16rpx 0;
background-color: #fff;
position: fixed;
justify-content: space-between;
width: calc(100% - 0rpx);
bottom: 0;
left: 0;
z-index: 999;
.reset-button,
.submit-button {
margin: 0 10rpx;
width: calc(50% - 20rpx);
}
}
.filter-box-radio {
margin-bottom: 14rpx;
padding: 10rpx 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #000000;
background-color: #ffffff;
border: 2rpx solid #c0c0c0;
border-radius: 4rpx;
margin-right: 20rpx;
width: calc((100% - 60rpx)/4);
&.on {
color: #ffffff;
background-color: #1186d6;
border: 2rpx solid #1186d6;
}
}
</style>
