aiot-app/pages/salesServiceManagement/recycle/index.vue

<template>
	<view class="mainBox">
		<uni-nav-bar background-color="#157A2C" color="#fff" fixed="true" statusBar="true" left-icon="back"
			title="配件回收记录" @clickLeft="back">
		</uni-nav-bar>
		<view class="top-wrapper">
			<uni-section>
				<uni-easyinput @clear="clearSearch" prefixIcon="search" style="width: 460rpx" v-model="searchVal"
					placeholder="名称">
				</uni-easyinput>
			</uni-section>
			<button class="search_btn" @click="doSearch">搜索</button>
			<image class="menu_icon" src="~@/static/pda/menu.svg" @click="showSearch"></image>
		</view>
		<view class="wrapper">
			<u-list @scrolltolower="scrolltolower" class="listContent" style="height: auto;">
				<view v-for="(item, index) in tableList" :key="index" style="position: relative;">
					<myCard :columns="columns" :btnList="btnList" @details="add(item,'view')" @edit="add(item,'edit')" @auSubmit="auSubmit(item)"
						@delete="deleteRow(item)" :item="item">
					</myCard>
				</view>
				<u-empty v-show="emptyShow && tableList.length==0" width="300" height="300" textSize="30"></u-empty>
			</u-list>
		</view>
		<view class="add" @click="add('','add')">
			<u-icon name="plus" color="#fff"></u-icon>
		</view>
		<u-toast ref="uToast"></u-toast>

		<MySearch :show.sync="searchShow" :formItems="formItems" @search="confirmSearch"></MySearch>
	</view>
</template>

<script>
	import {
		recyclePage,
		recycleDelete
	} from '@/api/salesServiceManagement/accessory/index.js';
	import myCard from '@/pages/saleManage/components/myCard.vue';
	import {
		processInstanceCreateAPI,
		processInstancePage,getWarehouseListByIdsAPI
	} from '@/api/wt/index.js'
	import {
		recycleDetails,

	} from '@/api/salesServiceManagement/workOrder/index.js'
	export default {
		components: {
			myCard
		},
		data() {
			return {
				searchForm: {},
				emptyShow: false,
				searchShow: false,
				formItems: [{
						label: '编码：',
						prop: 'code',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容'
						}
					},
					{
						label: '工单编码：',
						prop: 'workCode',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容',
						}
					},
					{
						label: '回收人：',
						prop: 'recycleName',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容',
						}
					},
					{
						label: '客户名称：',
						prop: 'contactName',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容',
						}
					},
					{
						label: '设备名称：',
						prop: 'deviceName',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容',
						}
					},
					{
						label: '物品名称：',
						prop: 'categoryName',
						component: 'MyInput',
						props: {
							placeholder: '请输入内容',
						}
					},
					{
						label: '创建时间：',
						prop: 'creatTime',
						component: 'MyDateRange',
						props: {
							type: 'daterange',
						}
					}
				],


				columns: [
					[{
						label: '编号：',
						prop: 'code',
						type: 'title',
						className: 'perce100',
					}],
					[{
						label: '工单编码：',
						prop: 'orderWorkCode'
					}],
					[{
						label: '物品名称：',
						prop: 'categoryName',
						formatter: (row) => {
							if (!row.details) return '';
							let str = '';
							row.details.map((el, idx) => {
								if (idx + 1 == row.details.length) {
									str += el.categoryName;
								} else {
									str = str + '' + el.categoryName + ',';
								}
							});
							return str;
						}
					}],
					[{
						label: '客户名称：',
						prop: 'contactName',
					}],
					[{
						label: '设备名称：',
						prop: 'categoryName',
						formatter: (row) => {
							if (!row.deviceDetails) return '';
							let str = '';
							row.deviceDetails.map((el, idx) => {
								if (idx + 1 == row.deviceDetails.length) {
									str += el.categoryName;
								} else {
									str = str + '' + el.categoryName + ',';
								}
							});
							return str;
						}
					}],
					[{
						label: '回收部门：',
						prop: 'recycleDeptName',
					}, {
						label: '回收人：',
						prop: 'recycleName',
					}],
					[{
						label: '创建时间：',
						prop: 'createTime'
					}, {
						label: '回收时间：',
						prop: 'usageTime',
					}],
					[{
						label: '状态：',
						prop: 'approvalStatus',
						formatter: (row) => {
							const reviewStatus = {
								0: '未提交',
								1: '审核中',
								2: '已审核',
								3: '审核不通过'
							}
							let cellValue = row.approvalStatus;
							return reviewStatus[cellValue]
						}
					}],
					[{
						label: '操作：',
						prop: 'action',
						type: 'action',
						className: 'perce100',
					}],
				],
				btnList: [{
					name: '详情',
					apiName: 'details',
					btnType: 'primary',
					type: '2',
					pageUrl: '',

				}, {
					name: '修改',
					apiName: 'edit',
					btnType: 'primary',
					type: '2',
					pageUrl: '',
					judge: [{
						authorities: '',
					}, {
						key: 'source',
						value: [0],

					},{
						key: 'approvalStatus',
						value: [0, 3],

					}],
				}, {
					name: '提交',
					apiName: 'auSubmit',
					btnType: 'primary',
					type: '2',
					pageUrl: '',
					judge: [{
						authorities: '',
					}, {
						key: 'approvalStatus',
						value: [0, 3],

					}],
				}, {
					name: '删除',
					apiName: 'delete',
					btnType: 'primary',
					type: '2',
					pageUrl: '',
					judge: [{
						authorities: '',
					}, {
						key: 'approvalStatus',
						value: [0, 3],

					},{
						key: 'source',
						value: [0],

					}],
				}],
				page: 1,
				size: 10,
				isEnd: false,
				tableList: [],
				searchVal: ''
			}
		},
		created() {

		},
		onShow() {
			this.doSearch();
		},
		onReachBottom() {
			this.getList()
		},

		methods: {
			doSearch() {
				this.isEnd = false;
				this.page = 1;
				this.getList();
			},
			//获取列表信息
			getList() {
				this.emptyShow = false
				if (this.isEnd) {
					this.$refs.uToast.show({
						message: "暂无更多数据",
						duration: 1000
					})
					return;
				}
				uni.showLoading({
					title: '加载中'
				})
				let data = {
					pageNum: this.page,
					size: this.size,
					keyWord: this.searchVal,
					workOrderIsReport:1,
					...this.searchForm
				}
				recyclePage(data).then(res => {
					if (this.page === 1) {
						this.tableList = res.list;
						if (this.tableList.length === 0) {
							this.emptyShow = true
						}
					} else {
						this.tableList.push(...res.list);
					}
					this.page += 1;
					this.isEnd = this.tableList.length >= res.count;
					const height = uni.getSystemInfoSync()
					console.log(height);
					uni.hideLoading();
				}).catch((e) => {
					uni.hideLoading();
				})
			},
			scrolltolower() {
				if (this.isEnd) {
					return;
				}
				this.getList();
			},
			add(item, type) {
				uni.navigateTo({
					url: `/pages/salesServiceManagement/recycle/recycleAdd?type=${type}&id=${item?item.id:''}`
				})
			},
			async auSubmit(res) {
				try {
					//后台不提供接口
					const data = await recycleDetails(res.id);
					let storemanIds = '';
					let ids = data.detailList.map((item) => item.warehouseId);
					let warehouseList = await getWarehouseListByIdsAPI(ids || []);
					storemanIds = warehouseList.map((item) => item.ownerId);
					let list = await processInstancePage({
						pageNo: 1,
						pageSize: 1,
						reset: true,
						key: 'after_sale_accessory_apply'
					})
					let params = {
						businessId: res.id,
						businessKey: 'after_sale_accessory_apply',
						formCreateUserId: res.createUserId,
						processDefinitionId: list?.list[0]?.processDefinition.id,
						variables: {
							businessCode: res.code,
							businessName: res.recycleDeptName,
							businessType: '售后配件回收入库',
							storemanIds:storemanIds.toString()
						},
					}

					await processInstanceCreateAPI(params)
					uni.showModal({
						title: `提交成功`,
						content: '',
						confirmText: '确认',
						showCancel: false, // 是否显示取消按钮，默认为 true
						success: () => {
							this.doSearch()
						}

					})


				} catch {

				}
			},
			async deleteRow(row) {
				const res = await uni.showModal({
					title: '确认删除',
					content: '确定要删除该条数据吗?',
					confirmText: '删除',
					confirmColor: '#FF4D4F',
				});
				if (res[1].confirm) {
					const data = await recycleDelete([row.id]);
					if (!data) return;
					this.$refs.uToast.show({
						type: "success",
						message: "操作成功",
					})
					this.doSearch();
				} else if (res.cancel) {
					console.log('用户取消');
				}
			},
			clearSearch() {
				this.searchVal = ''
				this.doSearch()
			},
			showSearch() {
				this.searchShow = true
			},
			confirmSearch(e) {
				console.log(e);
				let data = JSON.parse(JSON.stringify(e))
				if (data.creatTime) {
					var [startTime, endTime] = data.creatTime
					delete data.creatTime
					this.searchForm = {
						...data,
						startTime,
						endTime
					}
				} else {
					this.searchForm = data
				}
				this.doSearch()
			}


		}
	}
</script>

<style scoped lang="scss">
	.top-wrapper {
		background-color: #fff;
		display: flex;
		width: 750rpx;
		height: 88rpx;
		padding: 16rpx 32rpx;
		align-items: center;
		gap: 16rpx;

		/deep/.uni-section {
			margin-top: 0px;
		}

		/deep/.uni-section-header {
			padding: 0px;

		}

		.search_btn {
			width: 120rpx;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 24rpx;
			background: $theme-color;
			font-size: 32rpx;
			color: #fff;
			margin: 0;
			margin-left: 26rpx;
		}

		.menu_icon {
			width: 44rpx;
			height: 44rpx;
			margin-left: 14rpx;
		}
	}

	.add {
		width: 96rpx;
		height: 96rpx;
		border-radius: 48rpx;
		background: #3c9cff;
		position: fixed;
		bottom: 100rpx;
		right: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/deep/ .u-empty {
		margin-top: 200px !important;
	}
</style>