aiot-app/pages/warehouse/workOrder/components/KdCard/index.vue

<template>
	<view class="kd-card">
		<view class="card-title">
			<view class="">
				<text v-if="orderTitle" class="orderTitle">{{ orderTitle }}</text>
				<text>{{ title }}</text>
			</view>
			<text v-if="status" class="status" :class="statusListStyle[item.status]">
				{{ statusListOptions[item.status] }}
			</text>
		</view>
		<view @click="handleDetail">
			<view class="card-body">
				<view class="card-col">
					<text class="label">计划单号</text>
					<text class="content">{{ item.planCode }}</text>
				</view>
				<view class="card-col">
					<text class="label">计划名称</text>
					<text class="content">{{ item.planName }}</text>
				</view>
				<view class="card-col">
					<text class="label">盘点仓库</text>
					<text class="content">{{ item.warehouseName }}</text>
				</view>
				<view class="card-col">
					<text class="label">盘点部门</text>
					<text class="content">{{ item.executeGroupName }}</text>
				</view>
				<view class="card-col">
					<text class="label">盘点人员</text>
					<text class="content">{{ item.executorName }}</text>
				</view>
				<view class="card-col">
					<text class="label">计划开始时间</text>
					<text class="content">{{ item.startTime }}</text>
				</view>
				<view class="card-col">
					<text class="label">计划结束时间</text>
					<text class="content">{{ item.endTime }}</text>
				</view>
			</view>
			<view v-if="item.status == 0" class="card-footer borer-bottom" @click="goInventory">
				报工
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="card-footer" @click="goDetail">
				详情
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import itemConfig from './config.js'
	import dictMixins from '@/mixins/dictMixins'
	export default {
		mixins: [dictMixins],
		props: {
			title: String,
			orderTitle: String,
			item: {
				type: Object,
				default: () => ({})
			},
			type: {
				type: String,
				required: true
			},
			status: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				statusListStyle: {
					0: 'text-danger',
					1: 'text-warning',
					2: 'text-normal'
				},
				statusListOptions: {
					0: '待处理',
					1: '执行中',
					2: '已完成'
				},
				dictOpt: {
					asset: {
						1: {
							color: '#027DB4',
							backgroundColor: '#def5ff'
						},
						2: {
							color: '#B8741A',
							backgroundColor: '#fef1e8'
						},
						3: {
							color: '#A30014',
							backgroundColor: '#f9e5e7'
						},
						4: {
							color: 'green',
							backgroundColor: '#67C23A'
						},
						5: {
							color: '#a30014',
							backgroundColor: '#F56C6C'
						},
						6: {
							color: '#f56c6c',
							backgroundColor: '#fbc4c4'
						},
						7: {
							color: '#e6a23c',
							backgroundColor: '#fdf6ec'
						}
					}
				}
			}
		},
		created() {
			// this.requestDict('物品类型')
		},

		computed: {
			colOptions() {
				return (
					itemConfig[this.type] || [
						{ label: '单号', key: 'workOrderCode' },
						{ label: '申请人', key: 'applicantName' },
						{ label: '申请时间', key: 'createTime' }
					]
				)
			}
		},
		methods: {
			// 报工
			goInventory() {
				let par = this.URLSearchParams({
					id: this.item.id,
					status: this.item.status
				})
				uni.navigateTo({
					url: '/pages/warehouse/workOrder/inventory/inventory?' + par
				})
			},
			// 详情
			goDetail() {
				let par = {
					id: this.item.id,
					planId: this.item.planId
				}
				par = this.URLSearchParams(par)
				uni.navigateTo({
					url: '/pages/warehouse/workOrder/details/details?' + par
				})
			},
			handleDetail() {
				this.$emit('handleDetail', this.item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.kd-card {
		font-size: 28rpx;
		color: #333;
		background-color: #fff;
		border-radius: 8rpx;
		word-break: break-all;
		.status {
			font-weight: normal;
		}
		.card-title {
			font-weight: bold;
		}
		.card-footer,
		.card-title {
			display: flex;
			justify-content: space-between;
			padding: 12rpx 16rpx;
		}
		.borer-bottom {
			border-bottom: 1px solid #f2f2f2;
		}
		.card-body {
			padding: 0 28rpx;
			border-top: 1rpx solid #f2f2f2;
			border-bottom: 1rpx solid #f2f2f2;
			position: relative;
			.asset {
				position: absolute;
				top: 5rpx;
				padding: 4rpx 8rpx;
				right: 20rpx;
			}
			.card-col {
				padding: 8rpx 0;
				display: flex;

				// line-height: ;
				.label {
					display: inline-block;
					width: 6em;
					color: #555;
					text-align: right;
					margin-right: 14rpx;
				}
				.content {
					flex: 1;
				}
			}
		}
	}
	.orderTitle {
		color: #4b7902;
		margin-right: 10rpx;
	}
</style>