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

<template>
	<view class="after_sales">
		<view class="bth_oper" v-if="type != 'view'">
			<view class="btn add" @click="goContact('add')">添加</view>
			<view class="btn del" @click="batchDelete">删除</view>
			<text class="reserve">请至少保留一条联系人数据</text>
		</view>
		<u-list class="listContent">
			<checkbox-group v-for="(item, index) in contactList" :key="index" @change="e => selectVal(e, item, index)">
				<label>
					<view class="listBox">
						<view class="listBox-sel">
							<checkbox v-if="type != 'view'" :value="item.id" color="#fff" :disabled="item.disabled" :checked="item.checked" />
						</view>
						<view class="listBox-con">
							<view class="listBox-bottom">
								<view>姓名：{{ item.contactName }}</view>
								<view>手机：{{ item.contactPhone }}</view>
								<view>电话：{{ item.telephone }}</view>
								<view>微信号：{{ item.wechat }}</view>
								<view>邮箱：{{ item.email }}</view>
								<view>部门：{{ item.deptName }}</view>
								<view>职务：{{ item.post }}</view>
								<view>备注：{{ item.remark }}</view>
								<view class="action">
									<text class="text">
										操作:
									</text>
									<u-button v-if="type != 'view'" @click="goContact('edit',index,item)" :plain="true" :hairline="true"
										size='mini' type="default" text="编辑"></u-button>
									<u-button v-if="type != 'view'" @click="del(index)" :plain="true" :hairline="true" size='mini' type="default"
										class="delete" text="删除"></u-button>
								</view>
							</view>
						</view>
					</view>
				</label>
			</checkbox-group>
			<u-empty class="noDate" style="margin-top: 20vh" v-if="!contactList.length"></u-empty>
		</u-list>
		<u-toast ref="uToast"></u-toast>
	</view>

</template>

<script>
	// import myCard from '@/pages/saleManage/components/myCard.vue'
	export default {
		components: {
			// myCard
		},
		props: {
			itemList: {
				type: Array,
				default: () => []
			},
			type:{
				type:String,
				default:''
			}
		},
		watch: {
			itemList: {
				handler(newVal) {
					let list = JSON.parse(JSON.stringify(newVal));
					this.contactList = list
				},
				deep: true,
				immediate: true
			}
		},
		computed: {},
		data() {
			return {
				contactList: []
			}
		},
		onLoad({}) {},
		created() {
			uni.$off('updateContactList')
			uni.$on('updateContactList', ({
				type,
				data,
				index
			}) => {
				console.log(data, 'data');
				if (type == 'add') {
					this.contactList.push(data);
				} else {
					this.$set(this.contactList, index, data);
				}
			})
		},
		methods: {
			// 勾选数据
			selectVal(e, val, index) {
				this.$set(this.contactList[index], 'checked', !this.contactList[index].checked)
			},
			// 删除联系人
			del(index) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这条联系人数据吗?',
					confirmText: '删除',
					confirmColor: '#FF4D4F',
					success: (res) => {
						if (res.confirm) {
							this.contactList.splice(index, 1);
						} else if (res.cancel) {
							// 用户点击了取消按钮
							console.log('用户取消删除');
						}
					}
				});
			},
			// 批量删除
			batchDelete() {
				let list = this.contactList.filter(item=> item.checked);
				console.log(list,'list')
				if (list.length == 0) {
					this.$refs.uToast.show({
						type: "warning",
						message: "至少选择一条数据进行删除",
					})
					return;
				}
				uni.showModal({
					title: '确认删除',
					content: '确定要删除所选联系人数据吗?',
					confirmText: '删除',
					confirmColor: '#FF4D4F',
					success: (res) => {
						if (res.confirm) {
							this.contactList = this.contactList.filter(item=> !item.checked);
						} else if (res.cancel) {
							// 用户点击了取消按钮
							console.log('用户取消删除');
						}
					}
				});
			},
			// 现在只针对做 一 对 多 的 故障数据
			goContact(type, index, obj) {
				let data = obj ? JSON.stringify(obj) : '';
				uni.navigateTo({
					url: `/pages/salesServiceManagement/demandList/components/contactAdd?type=${type}&index=${index}&data=${data}`
				})
			},
			addFault() {

			},
			getTabData() {
				return this.contactList || []
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import './invoice.scss';

	.bth_oper {
		display: flex;
		align-items: center;
		margin-top: 16rpx;
		border-bottom: 1px solid #e5e5e5;
		padding-bottom: 16rpx;

		.btn {
			width: 80rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			background: #1890ff;
			font-size: 26rpx;
			color: #ffffff;
			border-radius: 8rpx;
		}

		.del {
			background: #ff4d4f;
		}

		.reserve {
			color: #e6a23c;
			font-size: 26rpx;
			margin-left: 18rpx;
		}
	}

	.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;
		}
	}
</style>