用的是uni-app的uni-ui拓展組件實現(xiàn)的

功能是對工單進(jìn)行一個展示，并對工單根據(jù)一些篩選條件進(jìn)行搜索

目前是實現(xiàn)了除了日期之外的搜索功能，測試數(shù)據(jù)是下面這個tableData.js，都是我自己手寫的，后端請求也稍微寫了一些，不過沒用上

export default [{"ID": "0001","title": "火災(zāi)排查","associateID": "00001","kind": "緊急工單","state": "待完成","overdue": "否","taskDate": "2023-01-02","dispatchDate": "2023-01-02","personID": "0001","note": "xxxx",},{"ID": "0002","title": "野狗出現(xiàn)","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": "火災(zāi)排查","associateID": "00001","kind": "定時工單","state": "逾期","overdue": "否","taskDate": "2023-01-02","dispatchDate": "2023-01-02","personID": "0002","note": "xxxx",},{"ID": "0005","title": "常規(guī)巡檢","associateID": "00001","kind": "緊急工單","state": "待完成","overdue": "否","taskDate": "2023-01-02","dispatchDate": "2023-01-02","personID": "0001","note": "xxxx",},{"ID": "0006","title": "常規(guī)巡檢","associateID": "00001","kind": "緊急工單","state": "待完成","overdue": "否","taskDate": "2023-01-02","dispatchDate": "2023-01-02","personID": "0001","note": "xxxx",},
]

還有旁邊的導(dǎo)航欄我給你們?nèi)サ粢幌?#xff0c;這樣可以直接copy下來跑

?簡陋代碼如下：

<template>
<!-- 	<navgation /> -->
<!-- 	<view class="right"> --><h2 class="section">工單管理</h2><view class="section"><text>工單狀態(tài): </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>負(fù)責(zé)人員ID: </text><view class="block"><uni-easyinput placeholder="請輸入ID" @change="inputPersonID"></uni-easyinput></view><text>關(guān)聯(lián)養(yǎng)殖場ID: </text><view class="block"><uni-easyinput placeholder="請輸入ID" @change="inputAssociateID"></uni-easyinput></view></view><view class="section"><text>派發(fā)日期: </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="暫無更多數(shù)據(jù)"@selection-change="selectionChange"><uni-tr><uni-th align="center">工單ID</uni-th><uni-th align="center">工單標(biāo)題</uni-th><uni-th align="center">關(guān)聯(lián)養(yǎng)殖場ID</uni-th><uni-th align="center">工單類型</uni-th><uni-th align="center">工單狀態(tài)</uni-th><uni-th align="center">逾期</uni-th><uni-th align="center">指定完成日期</uni-th><uni-th align="center">派發(fā)日期</uni-th><uni-th align="center">負(fù)責(zé)人員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: [],// 每頁數(shù)據(jù)量pageSize: 5,// 當(dāng)前頁pageCurrent: 1,// 數(shù)據(jù)總量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())},// 分頁觸發(fā)change(e) {this.$refs.table.clearSelection()this.selectedIndexs.length = 0this.getData(e.current, this.searchVal)},// 搜索search() {this.getData(1, this.searchVal);},// 獲取數(shù)據(jù)getData(pageCurrent, value = '') {this.loading = truethis.pageCurrent = pageCurrentthis.request({pageSize: this.pageSize,pageCurrent: pageCurrent,value: value,success: res => {// console.log('data', res);this.tableData = res.datathis.total = res.totalthis.loading = false}})},// 偽request請求request(options) {const {pageSize,pageCurrent,success,value} = options;let total = tableData.length;let data = [];if (value) {// 如果有搜索值，根據(jù)條件篩選數(shù)據(jù)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 {// 如果沒有搜索值，直接分頁顯示數(shù)據(jù)data = tableData;}data = data.slice((pageCurrent - 1) * pageSize, pageCurrent * pageSize);setTimeout(() => {typeof success === 'function' && success({data,total});}, 0);},// 向后端發(fā)送請求，暫沒有使用fetchData() {// 向后端發(fā)送請求uni.request({url: 'https://your-backend-api-endpoint', // 替換為你的后端API地址method: 'GET',success: (res) => {// 請求成功處理邏輯if (res.statusCode === 200) {this.workOrders = res.data; // 將獲取到的工單數(shù)據(jù)存儲到data中的workOrders變量中} else {// 請求失敗處理邏輯console.error('Request failed with status code', res.statusCode);}},fail: (error) => {// 網(wǎng)絡(luò)請求失敗處理邏輯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>