Wance/rd_mes_uniapp
14
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 25 Wiki Activity

初始化仓库

Browse Source
This commit is contained in:
tao
2025-12-18 14:11:48 +08:00
parent e96f277a68
commit 54ec472bd4
1107 changed files with 158756 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
pages/detail/detail.vue Normal file
View File

@@ -0,0 +1,277 @@
<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>