277 lines
7.0 KiB
Vue
277 lines
7.0 KiB
Vue
<template>
|
||
<view class="page container">
|
||
<uni-card is-full>
|
||
<text class="uni-h6">可以同时选择日期和时间的选择器</text>
|
||
</uni-card>
|
||
<uni-section :title="'日期用法：' + single" type="line"></uni-section>
|
||
<view class="example-body">
|
||
<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
|
||
</view>
|
||
<uni-section :title="'日期时间用法：' + datetimesingle" type="line"></uni-section>
|
||
<view class="example-body">
|
||
<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
|
||
</view>
|
||
<uni-section :title="'日期范围用法：' + '[' + range + ']'" type="line"></uni-section>
|
||
<view class="example-body">
|
||
<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
|
||
</view>
|
||
<uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
|
||
<view class="example-body">
|
||
<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
|
||
</view>
|
||
<uni-section :title="'v-model用法：' + single" type="line"></uni-section>
|
||
<view class="example-body">
|
||
<uni-datetime-picker v-model="single" />
|
||
</view>
|
||
<uni-section :title="'时间戳用法：' + single" type="line"></uni-section>
|
||
<view class="example-body">
|
||
<uni-datetime-picker returnType="timestamp" v-model="single" @change="changeLog($event)" />
|
||
</view>
|
||
<uni-section :title="'date 对象用法：' + datetimesingle" type="line"></uni-section>
|
||
<view class="example-body">
|
||
<uni-datetime-picker type="datetime" returnType="date" v-model="datetimesingle" @change="changeLog" />
|
||
</view>
|
||
<uni-section :title="'插槽用法：' + single" type="line"></uni-section>
|
||
<view class="example-body">
|
||
<uni-datetime-picker v-model="single">我是一个插槽，点击我</uni-datetime-picker>
|
||
</view>
|
||
<uni-section :title="'无边框用法：' + single" type="line"></uni-section>
|
||
<view class="example-body">
|
||
<uni-datetime-picker v-model="single" :border="false" />
|
||
</view>
|
||
<uni-section :title="'隐藏清除按钮用法：' + single" type="line"></uni-section>
|
||
<view class="example-body">
|
||
<uni-datetime-picker v-model="single" :clearIcon="false" />
|
||
</view>
|
||
<uni-section :title="'disabled用法：' + single" type="line"></uni-section>
|
||
<view class="example-body">
|
||
<uni-datetime-picker v-model="single" disabled />
|
||
</view>
|
||
</view>
|
||
<view class="detail-container">
|
||
<!-- 日期选择器 -->
|
||
<view class="example-body">
|
||
<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
|
||
</view>
|
||
|
||
<!-- 数据表格 -->
|
||
<view class="data-table">
|
||
<view class="table-header">
|
||
<text v-for="(col, index) in columns" :key="index" class="header-cell">
|
||
{{ col.title }}
|
||
</text>
|
||
</view>
|
||
|
||
<view class="table-body">
|
||
<view class="table-row" v-for="(item, rowIndex) in tableData" :key="rowIndex">
|
||
<text class="body-cell" v-for="(col, colIndex) in columns" :key="colIndex">
|
||
{{ item[col.key] }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
selectedDate: new Date().toISOString().slice(0, 10), // 默认当天
|
||
originData: null, // 原始数据
|
||
statType: '', // 统计类型
|
||
columns: [], // 动态表头
|
||
tableData: [] // 表格数据
|
||
}
|
||
},
|
||
|
||
onLoad(options) {
|
||
this.initData(options.data)
|
||
this.generateTable()
|
||
},
|
||
watch: {
|
||
datetimesingle(newval) {
|
||
console.log("单选:", this.datetimesingle);
|
||
},
|
||
range(newval) {
|
||
console.log("范围选:", this.range);
|
||
},
|
||
datetimerange(newval) {
|
||
console.log("范围选:", this.datetimerange);
|
||
},
|
||
},
|
||
mounted() {
|
||
setTimeout(() => {
|
||
this.datetimesingle = "2021-5-1";
|
||
this.single = "2021-5-1";
|
||
}, 1000);
|
||
},
|
||
|
||
methods: {
|
||
change(e) {
|
||
this.single = e;
|
||
console.log("-change事件:", e);
|
||
},
|
||
}
|
||
/*
|
||
methods: {
|
||
// 初始化接收数据
|
||
initData(encodedData) {
|
||
try {
|
||
const rawData = decodeURIComponent(encodedData)
|
||
this.originData = JSON.parse(rawData)
|
||
this.statType = this.originData.statType
|
||
|
||
console.log(rawData)
|
||
} catch (e) {
|
||
uni.showToast({
|
||
title: '数据加载失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
|
||
// 日期变化处理
|
||
handleDateChange(e) {
|
||
this.selectedDate = e.value
|
||
this.generateTable()
|
||
},
|
||
|
||
// 生成表格数据
|
||
generateTable() {
|
||
// 根据类型生成不同列
|
||
this.columns = this.getColumns()
|
||
|
||
// 根据类型生成数据（示例逻辑）
|
||
this.tableData = this.statType === 'quality' ?
|
||
this.generateQualityData() :
|
||
this.generateCommonData()
|
||
},
|
||
|
||
// 获取表头配置
|
||
getColumns() {
|
||
const baseColumns = [{
|
||
title: '日期',
|
||
key: 'date'
|
||
},
|
||
{
|
||
title: '类型',
|
||
key: 'type'
|
||
}
|
||
]
|
||
|
||
switch (this.statType) {
|
||
case 'quality':
|
||
return [...baseColumns,
|
||
{
|
||
title: '问题数量',
|
||
key: 'issueCount'
|
||
},
|
||
{
|
||
title: '问题类型',
|
||
key: 'issueType'
|
||
}
|
||
]
|
||
|
||
case 'salary':
|
||
return [...baseColumns,
|
||
{
|
||
title: '计件数量',
|
||
key: 'quantity'
|
||
},
|
||
{
|
||
title: '工资金额',
|
||
key: 'amount'
|
||
}
|
||
]
|
||
|
||
default: // production
|
||
return [...baseColumns,
|
||
{
|
||
title: '报工数量',
|
||
key: 'total'
|
||
},
|
||
{
|
||
title: '合格数量',
|
||
key: 'passed'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
|
||
// 生成质量数据（示例）
|
||
generateQualityData() {
|
||
return [{
|
||
date: this.selectedDate,
|
||
type: '当日统计',
|
||
issueCount: this.originData.todayData.failedNum,
|
||
issueType: '生产问题'
|
||
}, {
|
||
date: '本月累计',
|
||
type: '月度统计',
|
||
issueCount: this.originData.monthData.failedNum,
|
||
issueType: '综合问题'
|
||
}]
|
||
},
|
||
generateCommonData() {
|
||
return [{
|
||
date: this.selectedDate,
|
||
type: '当日统计',
|
||
issueCount: this.originData.todayData.failedNum,
|
||
issueType: '生产问题'
|
||
}, {
|
||
date: '本月累计',
|
||
type: '月度统计',
|
||
issueCount: this.originData.monthData.failedNum,
|
||
issueType: '综合问题'
|
||
}]
|
||
}
|
||
}*/
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.detail-container {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.date-picker {
|
||
margin: 20rpx 0;
|
||
padding: 20rpx;
|
||
background: #fff;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.data-table {
|
||
border: 1rpx solid #e4e7ed;
|
||
border-radius: 8rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.table-header,
|
||
.table-row {
|
||
display: flex;
|
||
height: 80rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
.header-cell,
|
||
.body-cell {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 10rpx;
|
||
}
|
||
|
||
.table-header {
|
||
background-color: #f5f7fa;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.table-row:nth-child(even) {
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.body-cell {
|
||
color: #606266;
|
||
}
|
||
</style> |