【Vue】【uni-app】工单管理页面实现

用的是uni-app的uni-ui拓展组件实现的

功能是对工单进行一个展示，并对工单根据一些筛选条件进行搜索

目前是实现了除了日期之外的搜索功能，测试数据是下面这个tableData.js，都是我自己手写的，后端请求也稍微写了一些，不过没用上

export default [{
		"ID": "0001",
		"title": "火灾排查",
		"associateID": "00001",
		"kind": "紧急工单",
		"state": "待完成",
		"overdue": "否",
		"taskDate": "2023-01-02",
		"dispatchDate": "2023-01-02",
		"personID": "0001",
		"note": "xxxx",
	},
	{
		"ID": "0002",
		"title": "野狗出现",
		"associateID": "00001",
		"kind": "临时工单",
		"state": "已完成",
		"overdue": "否",
		"taskDate": "2023-01-02",
		"dispatchDate": "2023-01-02",
		"personID": "0003",
		"note": "xxxx",
	},
	{
		"ID": "0003",
		"title": "温度过高",
		"associateID": "00001",
		"kind": "紧急工单",
		"state": "已完成",
		"overdue": "否",
		"taskDate": "2023-01-02",
		"dispatchDate": "2023-01-02",
		"personID": "0005",
		"note": "xxxx",
	},
	{
		"ID": "0004",
		"title": "火灾排查",
		"associateID": "00001",
		"kind": "定时工单",
		"state": "逾期",
		"overdue": "否",
		"taskDate": "2023-01-02",
		"dispatchDate": "2023-01-02",
		"personID": "0002",
		"note": "xxxx",
	},
	{
		"ID": "0005",
		"title": "常规巡检",
		"associateID": "00001",
		"kind": "紧急工单",
		"state": "待完成",
		"overdue": "否",
		"taskDate": "2023-01-02",
		"dispatchDate": "2023-01-02",
		"personID": "0001",
		"note": "xxxx",
	},
	{
		"ID": "0006",
		"title": "常规巡检",
		"associateID": "00001",
		"kind": "紧急工单",
		"state": "待完成",
		"overdue": "否",
		"taskDate": "2023-01-02",
		"dispatchDate": "2023-01-02",
		"personID": "0001",
		"note": "xxxx",
	},
]

还有旁边的导航栏我给你们去掉一下，这样可以直接copy下来跑

 简陋代码如下：

<template>
<!-- 	<navgation /> -->
<!-- 	<view class="right"> -->
		<h2 class="section">工单管理</h2>
		<view class="section">
			<text>工单状态: </text>
			<view>
				<uni-data-checkbox v-model="state" :localdata="states" @change="inputState"></uni-data-checkbox>
			</view>
			<text>工单类型: </text>
			<view class="block">
				<uni-data-select v-model="kind" :localdata="kinds" @change="inputKind"></uni-data-select>
			</view>
		</view>
		<view class="section">
			<text>工单ID: </text>
			<view class="block">
				<uni-easyinput placeholder="请输入ID" @change="inputID"></uni-easyinput>
			</view>
			<text>负责人员ID: </text>
			<view class="block">
				<uni-easyinput placeholder="请输入ID" @change="inputPersonID"></uni-easyinput>
			</view>
			<text>关联养殖场ID: </text>
			<view class="block">
				<uni-easyinput placeholder="请输入ID" @change="inputAssociateID"></uni-easyinput>
			</view>
		</view>
		<view class="section">
			<text>派发日期: </text>
			<view class="block">
				<uni-datetime-picker type="range" v-model="dispatchDate"></uni-datetime-picker>
			</view>
		</view>
		<view class="section">
			<text>指定完成日期: </text>
			<view class="block">
				<uni-datetime-picker type="range" v-model="taskDate"></uni-datetime-picker>
			</view>
		</view>
		<view class="section">
			<view>
				<button type="primary" size="mini" @click="search">搜索</button>
			</view>
		</view>
		<view>
			<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据"
				@selection-change="selectionChange">
				<uni-tr>
					<uni-th align="center">工单ID</uni-th>
					<uni-th align="center">工单标题</uni-th>
					<uni-th align="center">关联养殖场ID</uni-th>
					<uni-th align="center">工单类型</uni-th>
					<uni-th align="center">工单状态</uni-th>
					<uni-th align="center">逾期</uni-th>
					<uni-th align="center">指定完成日期</uni-th>
					<uni-th align="center">派发日期</uni-th>
					<uni-th align="center">负责人员ID</uni-th>
					<uni-th align="center">备注</uni-th>
					<uni-th align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ item.ID }}</uni-td>
					<uni-td align="center">{{ item.title }}</uni-td>
					<uni-td align="center">{{ item.associateID }}</uni-td>
					<uni-td align="center">{{ item.kind }}</uni-td>
					<uni-td align="center">{{ item.state }}</uni-td>
					<uni-td align="center">{{ item.overdue }}</uni-td>
					<uni-td align="center">{{ item.taskDate }}</uni-td>
					<uni-td align="center">{{ item.dispatchDate }}</uni-td>
					<uni-td align="center">{{ item.personID }}</uni-td>
					<uni-td align="center">{{ item.note }}</uni-td>
					<uni-td align="center">
						<button size="mini" type="primary">详情</button>
						<button size="mini" type="warn">删除</button>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
					@change="change" /></view>
		</view>
<!-- 	</view> -->
</template>

<script>
	// import navigation from '../../components/navgation/navgation.vue';
	import tableData from '../../pages/WorkOrderManagement/tableData.js';
	export default {
		data() {
			return {
				state: 0,
				states: [{
					text: '全选',
					value: 0
				}, {
					text: '待完成',
					value: 1
				}, {
					text: '已完成',
					value: 2
				}, {
					text: '逾期',
					value: 3
				}],
				kind: '',
				kinds: [{
					text: '周期工单',
					value: 0
				}, {
					text: '临时工单',
					value: 1
				}, {
					text: '紧急工单',
					value: 2
				}],
				ID: "",
				personID: "",
				associateID: "",
				dispatchDate: [],
				taskDate: [],
				searchVal: '',
				tableData: [],
				// 每页数据量
				pageSize: 5,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false
			};
		},
		onLoad() {
			this.selectedIndexs = []
			this.getData(1)
		},
		methods: {
			inputID(e) {
				this.ID = e;
				this.searchVal = e;
			},
			inputPersonID(e) {
				this.personID = e;
				this.searchVal = e;
			},
			inputAssociateID(e) {
				this.associateID = e;
				this.searchVal = e;
			},
			inputState() {
				this.searchVal = this.states[this.state].text;
				if (this.searchVal == '全选') {
					this.searchVal = '';
				}
			},
			inputKind() {
				this.searchVal = this.kinds[this.kind].text;
			},
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},
			// 多选
			selectionChange(e) {
				this.selectedIndexs = e.detail.index
			},
			//批量删除
			delTable() {
				console.log(this.selectedItems())
			},
			// 分页触发
			change(e) {
				this.$refs.table.clearSelection()
				this.selectedIndexs.length = 0
				this.getData(e.current, this.searchVal)
			},
			// 搜索
			search() {
				this.getData(1, this.searchVal);
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent
				this.request({
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					value: value,
					success: res => {
						// console.log('data', res);
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					}
				})
			},
			// 伪request请求
			request(options) {
				const {
					pageSize,
					pageCurrent,
					success,
					value
				} = options;
				let total = tableData.length;
				let data = [];
				if (value) {
					// 如果有搜索值，根据条件筛选数据
					data = tableData.filter(item => {
						return (
							item.ID.includes(value) ||
							item.personID.includes(value) ||
							item.associateID.includes(value) ||
							item.kind.includes(value) ||
							item.state.includes(value)
						);
					});
					total = data.length;
				} else {
					// 如果没有搜索值，直接分页显示数据
					data = tableData;
				}
				data = data.slice((pageCurrent - 1) * pageSize, pageCurrent * pageSize);
				setTimeout(() => {
					typeof success === 'function' && success({
						data,
						total
					});
				}, 0);
			},
			// 向后端发送请求，暂没有使用
			fetchData() {
				// 向后端发送请求
				uni.request({
					url: 'https://your-backend-api-endpoint', // 替换为你的后端API地址
					method: 'GET',
					success: (res) => {
						// 请求成功处理逻辑
						if (res.statusCode === 200) {
							this.workOrders = res.data; // 将获取到的工单数据存储到data中的workOrders变量中
						} else {
							// 请求失败处理逻辑
							console.error('Request failed with status code', res.statusCode);
						}
					},
					fail: (error) => {
						// 网络请求失败处理逻辑
						console.error('Network request failed', error);
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	.right {
		margin-top: 40rpx;
		margin-left: 440rpx;
	}

	.section {
		display: flex;
		align-items: center;
		column-gap: 20rpx;
		margin: 20rpx;
	}

	.block {
		width: 20%;
		border-radius: 10rpx;
	}

	button {
		margin: 10rpx;
		border-radius: 20rpx;
	}
</style>