初始化仓库
This commit is contained in:
tao
277
pages/detail/detail.vue
Normal file
277
pages/detail/detail.vue
Normal 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>
|
||||
61
pages/detail/qualityDetail.vue
Normal file
61
pages/detail/qualityDetail.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<view class="detail-container">
|
||||
<view class="date-picker" style="margin: 2vh 0;">
|
||||
<uni-datetime-picker v-model="dateRange" type="daterange" @change="getDateRange" rangeSeparator="至" />
|
||||
</view>
|
||||
|
||||
<uni-table ref="table" border stripe emptyText="暂无更多数据" @selection-change="selectionChange">
|
||||
<uni-tr>
|
||||
<uni-th width="80" align="center">作业单号</uni-th>
|
||||
<uni-th width="80" align="center">产品编码</uni-th>
|
||||
<uni-th width="80" align="center">报工数量</uni-th>
|
||||
<uni-th width="80" align="center">不良数量</uni-th>
|
||||
<uni-th width="80" align="center">计件单价</uni-th>
|
||||
<uni-th width="80" align="center">合计</uni-th>
|
||||
</uni-tr>
|
||||
<uni-tr v-for="(item, index) in originData" :key="index">
|
||||
<uni-td align="center">{{ item.repNum }}</uni-td>
|
||||
<uni-td align="center">{{ item.repNum }}</uni-td>
|
||||
<uni-td align="center">{{ item.failedNum }}</uni-td>
|
||||
<uni-td align="center">{{ item.salary }}</uni-td>
|
||||
</uni-tr>
|
||||
</uni-table>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
listReport
|
||||
} from '@/api/mes/pwoDraw.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedDate: new Date().toISOString().slice(0, 10), // 默认当天
|
||||
originData: null, // 原始数据
|
||||
tableData: null, // 表格数据
|
||||
dateRange: [],
|
||||
jobReport: []
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
// 初始化接收数据
|
||||
initData() {
|
||||
|
||||
},
|
||||
// 获取时间范围
|
||||
getDateRange() {
|
||||
console.log(this.dateRange)
|
||||
},
|
||||
getJobInfo() {
|
||||
listReport().then(res => {
|
||||
|
||||
})
|
||||
console.log("6")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
228
pages/detail/salaryDetail.vue
Normal file
228
pages/detail/salaryDetail.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<view class="detail-container">
|
||||
<view class="date-picker">
|
||||
<uni-datetime-picker v-model="dateRange" type="daterange" @change="getTime" 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: [], // 表格数据
|
||||
dateRange: []
|
||||
}
|
||||
},
|
||||
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: {
|
||||
getTime() {
|
||||
console.log(this.dateRange)
|
||||
},
|
||||
// 初始化接收数据
|
||||
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>
|
||||
Reference in New Issue
Block a user