aiot-app/pages/salesServiceManagement/toDoList/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 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"></image>
		</view>
		<view class="wrapper">
			<u-list @scrolltolower="scrolltolower" class="listContent">
				<view v-for="(item, index) in tableList" :key="index" style="position: relative;">
					<myCard @del="del(item)" @edit="edit('edit',item.id)" @details="edit('view',item.id)" :item="item"
						:index="index+1" :columns="columns" :btnList="btnList">
					</myCard>
				</view>
			</u-list>
		</view>

		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	import {
		getSalesPlan,
	} from '@/api/salesServiceManagement/toDoList/index.js'
	import myCard from '@/pages/saleManage/components/myCard.vue'
	export default {
		components: {
			myCard,
		},

		data() {
			return {
				searchVal: '',
				isEnd: false,
				page: 1,
				size: 10,
				tableList: [],
				columns: [
					[{
						label: '计划单号：',
						prop: 'code',
						type: 'title',
						className: 'perce100',
					}],
					[{
						label: '计划名称：',
						prop: 'name'
					}, ],
					[{
						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: 'contactName'
					}, {
						label: '紧急程度：',
						prop: 'urgent',
						formatter: (item) => {
							return {
								1: '普通',
								2: '紧急',
								3: '重要'
							} [item.urgent];
						}
					}],
					[{
						label: '创建人：',
						prop: 'createUserName'
					}, {
						label: '创建时间：',
						prop: 'createTime',
					}],
					[{
						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: 'planStatus',
							value: [0, 4, 5],

						}],
					},
					{
						name: '删除',
						apiName: 'del',
						btnType: 'error ',
						type: '2',
						pageUrl: '',
						judge: [{
							authorities: '',
						}, {
							key: 'planStatus',
							value: [0, 4, 5],
						}],
					}, {
						name: '派单',
						apiName: 'handleAudit',
						btnType: 'primary',
						type: '2',
						pageUrl: '',
						judge: [{
							authorities: '',
						}, {
							key: 'planStatus',
							value: [0, 4, 5],
						}],
					},
					{
						name: '撤回',
						apiName: 'handleAudit',
						btnType: 'primary',
						type: '2',
						pageUrl: '',
						judge: [{
							authorities: '',
						}, {
							key: 'planStatus',
							value: [1],
						}],
					},
				],
			}
		},
		computed: {

		},

		onShow() {
			this.isEnd = false
			this.page = 1
			this.getList()
		},

		methods: {
			doSearch() {
				this.isEnd = false
				this.page = 1
				this.getList()
			},
			//获取列表信息
			getList() {
				if (this.isEnd) {
					return
				}
				uni.showLoading({
					title: '加载中'
				})
				let data = {
					pageNum: this.page,
					size: this.size,

				}
				getSalesPlan(data).then(res => {
					if (this.page === 1) {
						this.tableList = res.list
					} else {
						this.tableList.push(...res.list)
					}
					this.page += 1
					this.isEnd = this.tableList.length >= res.count;
					uni.hideLoading();
				}).catch((e) => {
					uni.hideLoading()
				})
			},
			scrolltolower() {
				if (this.isEnd) {
					return
				}
				this.getList();
			},
			del(item) {

			},
			edit(type,id) {
				uni.navigateTo({
					url: `/pages/salesServiceManagement/toDoList/components/editPlan?type=${type}&id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.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;
		}
	}
</style>