aiot-app/pages/salesServiceManagement/demandList/components/AfterSales.vue

<template>
	<view class="after_sales">
		<block v-for="item in tableList" :key="item.id">

			<!-- 	<view class="sales_info" v-if="tableList.length > 0">
			<view>名称：{{ fieldRow('categoryName') }}</view>
			<view>类型：{{ fieldRow('productCategoryName') }}</view>
			<view>编码：{{ fieldRow('categoryCode') }}</view>
			<view>发货条码：{{ fieldRow('barcodes') }}</view>
			<view>发货时间：{{ fieldRow('shipmentDate') }}</view>
			<view>质保有效期：{{ fieldRow('guaranteePeriodDeadline') }}</view>
			<view>计量数量：{{ fieldRow('measureQuantity') }}</view>
			<view class="action" v-if="type != 'view'">
				<text class="text">
					操作:
				</text>
				<u-button @click="goProblem('add')" :plain="true" :hairline="true" size='mini' type="default"
					text="添加故障"></u-button>
				<u-button v-if="!isReport" @click="del" :plain="true" :hairline="true" size='mini' type="default"
					class="delete" text="删除"></u-button>
			</view>
		</view> -->

			<view class="sales_info">
				<view>名称：{{ item.categoryName }}</view>
				<view>类型：{{ item.productCategoryName }}</view>
				<view>编码：{{ item.categoryCode }}</view>
				<view>发货条码：{{ item.barcodes }}</view>
				<view>发货时间：{{ item.shipmentDate }}</view>
				<view>质保有效期：{{ item.guaranteePeriodDeadline }}</view>
				<view>计量数量：{{ item.measureQuantity }}</view>
				<view class="action" v-if="type != 'view'">
					<text class="text">
						操作:
					</text>
					<!-- <u-button @click="goProblem('add','',item.id)" :plain="true" :hairline="true" size='mini'
						type="default" text="添加故障"></u-button> -->
					<u-button @click="addFault('add','',item.id)" :plain="true" :hairline="true" size='mini'
						type="default" text="添加故障"></u-button>
					<u-button v-if="!isReport" @click="del(item.id)" :plain="true" :hairline="true" size='mini'
						type="default" class="delete" text="删除"></u-button>
				</view>


				<!-- <block v-for="item"></block> -->
			</view>


		</block>

		<div class="wapper">
			<view v-for="(item, index) in faultDetails" :key="index" class="view_box" style="position: relative;">
				<myCard @edit="goProblem('edit',index,item)" @del="delProblem(index)" :item="item" :index="index+1"
					:columns="columns" :btnList="btnData">
					<view class="images" slot="imageUrl">
						<PreviewPhoto type="view" :imageList="imagesData(item)" />
					</view>
				</myCard>
			</view>
		</div>
	</view>
</template>

<script>
	import PreviewPhoto from "@/pages/maintenance/check/components/PreviewPhoto.vue"
	import myCard from '@/pages/saleManage/components/myCard.vue'
	export default {
		components: {
			myCard,
			PreviewPhoto
		},
		props: {
			itemList: {
				type: Array,
				default: () => []
			},
			type: {
				type: String,
				default: 'edit'
			},
			// 是否是售后工单的 报工或者修改进入
			isReport: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			itemList: {
				handler(newVal) {
					let list = JSON.parse(JSON.stringify(newVal));
					list.map((el) => {
						el.faultDetails = el.faultDetails ? el.faultDetails : []
					})
					this.tableList = list
				},
				deep: true,
				immediate: true
			}
		},
		computed: {
			faultDetails() {
				let arr = []
				console.log(this.tableList);
				if (this.tableList.length > 0) {
					this.tableList.forEach(item =>
						arr.push(...item.faultDetails))
				}
				console.log(arr);
				return arr
			},
			fieldRow() {
				return (field) => {
					if (this.tableList.length == 0) return '';
					return this.tableList[0][field]
				}
			},
			btnData() {
				if (this.type == 'view') {
					return []
				}
				if (this.isReport) {
					this.btnList[1].judge = [{
						authorities: '',
					}, {
						key: 'customize',
						value: ['5'],

					}]
				}
				return this.btnList;
			},
			imagesData() {
				return (item) => {
					console.log(item, 'item')
					let list = item.imageUrl || [];
					return list;
				}
			}
		},
		data() {
			return {
				dataId: '',
				typeOptions: [{
						text: '维修',
						value: '1'
					},
					{
						text: '保养',
						value: '2'
					},
					{
						text: '安装',
						value: '3'
					}
				],
				columns: [
					[{
						label: '故障类型：',
						prop: 'type',
						className: 'perce100',
						formatter: (row) => {
							const user = this.typeOptions.find(item => item.value === row.type);
							return user.text
						}
					}],
					[{
						label: '故障现象：',
						prop: 'faultPhenomenon',
					}],
					[{
						label: '故障原因：',
						prop: 'faultReason'
					}],
					[{
						label: '维修过程：',
						prop: 'maintenanceProcess',
					}],
					[{
						label: '图片：',
						prop: 'maintenanceProcess',
						slot: 'imageUrl',
						className: 'perce100 image_url',

					}],
					[{
						label: '操作：',
						prop: 'action',
						type: this.type != 'view' ? 'action' : '',
						className: 'perce100',
					}],
				],
				btnList: [{
						name: '编辑',
						apiName: 'edit',
						btnType: 'error',
						type: '2',
						pageUrl: '',
					},
					{
						name: '删除',
						apiName: 'del',
						btnType: 'error',
						type: '2',
						pageUrl: '',

					}
				],
				tableList: []
			}
		},
		onLoad({}) {},
		created() {
			uni.$off('updateFaultList')
			uni.$on('updateFaultList', ({
				type,
				data,
				index
			}) => {
				console.log(type);
				console.log(this.tableList);
				console.log(data);

				if (type === 'add') {
					this.tableList.find(item => item.id === this.dataId).faultDetails.push(data)
				}


			})

		},
		methods: {
			del(id) {
				console.log(id);
				console.log(this.tableList);
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这条售后对象吗?',
					confirmText: '删除',
					confirmColor: '#FF4D4F',
					success: (res) => {
						if (res.confirm) {
							this.tableList = this.tableList.filter(item => item.id !== id);
						} else if (res.cancel) {
							// 用户点击了取消按钮
							console.log('用户取消删除');
						}
					}
				});
			},
			// 删除故障
			delProblem(index) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这条故障吗?',
					confirmText: '删除',
					confirmColor: '#FF4D4F',
					success: (res) => {
						if (res.confirm) {
							this.tableList[0].faultDetails.splice(index, 1);
						} else if (res.cancel) {
							// 用户点击了取消按钮
							console.log('用户取消删除');
						}
					}
				});
			},
			// 现在只针对做 一 对 多 的 故障数据
			goProblem(type, index, obj = {}) {
				let str = this.type == 'report' ? 'report' : '';
				let resD = JSON.parse(JSON.stringify(obj));
				let arr = [];
				if (resD.imageUrl && resD.imageUrl.length > 0) {
					arr = JSON.stringify(resD.imageUrl);
					delete resD.imageUrl;
				}
				console.log(arr, 'arr ----')
				let data = JSON.stringify(resD);
				uni.navigateTo({
					url: `/pages/salesServiceManagement/demandList/components/faultAdd?type=${type}&index=${index}&data=${data}&str=${str}&arr=${encodeURIComponent(arr)}`
				})
			},
			addFault(type, index, id) {
				this.dataId = id
				console.log(id);
				let str = this.type == 'report' ? 'report' : '';
				// let resD = JSON.parse(JSON.stringify(obj));

				uni.navigateTo({
					url: `/pages/salesServiceManagement/demandList/components/faultAdd?type=${type}&str=${str}`
				})


			},
			// 返回列表数据
			getTabData() {
				if (!this.isReport) return this.tableList || [];
				let list = this.tableList.map((el) => {
					if (el.customize) {
						delete el.customize;
					}
					return el;
				})
				return list;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.after_sales {
		height: calc(100vh - 246rpx);

		.sales_info {
			padding: 8px 16px;
			font-size: 13px;
			font-style: normal;
			font-weight: 400;
			line-height: 22px;
			word-wrap: break-word;
			border-bottom: 6rpx solid #E1E1E1;

			.action {
				display: flex;
				line-height: 22px;

				.text {
					margin-right: 12rpx;
				}

				/deep/ .u-button {
					width: 100rpx;
					font-size: 26rpx;
					margin-left: 10rpx;
					margin-right: 0rpx;
					background: #157a2c;
					color: #fff !important;
				}
			}
		}

		.wapper {
			height: calc(100% - 338rpx);

			.view_box {

				/deep/ .card_box {
					.image_url {
						width: 110%;

						.item_one {
							.text {
								display: block;
								width: calc(100% - 80rpx);
							}
						}
					}
				}
			}
		}

	}
</style>