| | |
| | | <template> |
| | | <basic-container> |
| | | <avue-crud |
| | | :option="option" |
| | | :table-loading="loading" |
| | | :data="data" |
| | | v-model:page="page" |
| | | :permission="permissionList" |
| | | v-model="form" |
| | | ref="crud" |
| | | @search-change="searchChange" |
| | | @search-reset="searchReset" |
| | | @selection-change="selectionChange" |
| | | @current-change="currentChange" |
| | | @size-change="sizeChange" |
| | | @refresh-change="refreshChange" |
| | | @on-load="onLoad"> |
| | | <avue-crud :option="option" :table-loading="loading" :data="data" v-model:page="page" :permission="permissionList" |
| | | v-model="form" ref="crud" @search-change="searchChange" @search-reset="searchReset" |
| | | @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange" |
| | | @refresh-change="refreshChange" @on-load="onLoad"> |
| | | </avue-crud> |
| | | </basic-container> |
| | | </template> |
| | | |
| | | <script> |
| | | import { getJobsByUser } from '@/api/resource/wayline'; |
| | | import { getAirportList } from '@/api/device/device'; |
| | | import { mapGetters } from 'vuex'; |
| | | import func from '@/utils/func'; |
| | | import { getJobsByUser } from '@/api/resource/wayline' |
| | | import { getAirportList } from '@/api/device/device' |
| | | import { mapGetters } from 'vuex' |
| | | import func from '@/utils/func' |
| | | |
| | | export default { |
| | | data() { |
| | | data () { |
| | | // 计算默认的开始和结束日期 |
| | | const endDate = new Date(); // 当前日期 |
| | | const startDate = new Date(); // 一个月前的日期 |
| | | startDate.setMonth(startDate.getMonth() - 1); |
| | | const endDate = new Date() // 当前日期 |
| | | const startDate = new Date() // 一个月前的日期 |
| | | startDate.setMonth(startDate.getMonth() - 1) |
| | | |
| | | // 格式化为 YYYY-MM-DD 字符串 |
| | | const defaultStartDate = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`; |
| | | const defaultEndDate = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')}`; |
| | | const defaultStartDate = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}` |
| | | const defaultEndDate = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')}` |
| | | |
| | | return { |
| | | form: {}, |
| | |
| | | selection: true, |
| | | dialogClickModal: false, |
| | | menu: false, // 禁用默认操作列 |
| | | |
| | | height: 'auto', |
| | | calcHeight: 20, |
| | | column: [ |
| | | { |
| | | label: '机场选择', |
| | |
| | | label: '错误原因', |
| | | prop: 'reason', |
| | | formatter: (row) => { |
| | | return [4, 5].includes(row.status) ? row.reason || '未知' : ''; |
| | | return [4, 5].includes(row.status) ? row.reason || '未知' : '' |
| | | }, |
| | | }, |
| | | ], |
| | | }, |
| | | data: [], |
| | | }; |
| | | } |
| | | }, |
| | | computed: { |
| | | ...mapGetters(['permission']), |
| | | permissionList() { |
| | | permissionList () { |
| | | return { |
| | | addBtn: false, |
| | | editBtn: false, |
| | | viewBtn: this.validData(this.permission.attach_view, false), |
| | | delBtn: this.validData(this.permission.attach_delete, false), |
| | | }; |
| | | } |
| | | }, |
| | | ids() { |
| | | let ids = []; |
| | | ids () { |
| | | let ids = [] |
| | | this.selectionList.forEach(ele => { |
| | | ids.push(ele.job_id); |
| | | }); |
| | | return ids.join(','); |
| | | ids.push(ele.job_id) |
| | | }) |
| | | return ids.join(',') |
| | | }, |
| | | }, |
| | | mounted() { |
| | | this.loadAirportList(); |
| | | mounted () { |
| | | this.loadAirportList() |
| | | // 初始化时手动触发搜索,以确保默认值生效 |
| | | this.$refs.crud.searchChange(this.query); |
| | | this.onLoad(this.page, this.query); |
| | | this.$refs.crud.searchChange(this.query) |
| | | this.onLoad(this.page, this.query) |
| | | }, |
| | | methods: { |
| | | loadAirportList() { |
| | | loadAirportList () { |
| | | getAirportList().then(res => { |
| | | const airportData = res.data.data || []; |
| | | const airportColumn = this.option.column.find(col => col.prop === 'dock_name'); |
| | | const airportData = res.data.data || [] |
| | | const airportColumn = this.option.column.find(col => col.prop === 'dock_name') |
| | | if (airportColumn) { |
| | | airportColumn.dicData = airportData.map(item => ({ |
| | | nickname: item.nickname, |
| | | workspace_id: item.workspace_id, |
| | | })); |
| | | })) |
| | | } |
| | | }).catch(error => { |
| | | // 处理错误 |
| | | }); |
| | | }) |
| | | }, |
| | | searchReset() { |
| | | searchReset () { |
| | | // 重置时恢复默认时间范围 |
| | | const endDate = new Date(); |
| | | const startDate = new Date(); |
| | | startDate.setMonth(startDate.getMonth() - 1); |
| | | const defaultStartDate = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`; |
| | | const defaultEndDate = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')}`; |
| | | const endDate = new Date() |
| | | const startDate = new Date() |
| | | startDate.setMonth(startDate.getMonth() - 1) |
| | | const defaultStartDate = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}` |
| | | const defaultEndDate = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')}` |
| | | this.query = { |
| | | daterange: [defaultStartDate, defaultEndDate] |
| | | }; |
| | | this.selectedWorkspaceId = null; |
| | | } |
| | | this.selectedWorkspaceId = null |
| | | // 更新 searchValue 以确保界面重置后显示默认值 |
| | | const daterangeColumn = this.option.column.find(col => col.prop === 'daterange'); |
| | | daterangeColumn.searchValue = [defaultStartDate, defaultEndDate]; |
| | | this.onLoad(this.page, this.query); |
| | | const daterangeColumn = this.option.column.find(col => col.prop === 'daterange') |
| | | daterangeColumn.searchValue = [defaultStartDate, defaultEndDate] |
| | | this.onLoad(this.page, this.query) |
| | | }, |
| | | searchChange(params, done) { |
| | | this.query = params; |
| | | this.page.currentPage = 1; |
| | | searchChange (params, done) { |
| | | this.query = params |
| | | this.page.currentPage = 1 |
| | | |
| | | const airportColumn = this.option.column.find(col => col.prop === 'dock_name'); |
| | | const selectedAirport = airportColumn.dicData.find(item => item.nickname === params.dock_name); |
| | | this.selectedWorkspaceId = selectedAirport ? selectedAirport.workspace_id : null; |
| | | const airportColumn = this.option.column.find(col => col.prop === 'dock_name') |
| | | const selectedAirport = airportColumn.dicData.find(item => item.nickname === params.dock_name) |
| | | this.selectedWorkspaceId = selectedAirport ? selectedAirport.workspace_id : null |
| | | |
| | | const { daterange } = params; |
| | | let startTime = null; |
| | | let endTime = null; |
| | | const { daterange } = params |
| | | let startTime = null |
| | | let endTime = null |
| | | if (daterange && Array.isArray(daterange) && daterange.length === 2) { |
| | | startTime = this.formatTime(daterange[0]); |
| | | endTime = this.formatTime(daterange[1]); |
| | | startTime = this.formatTime(daterange[0]) |
| | | endTime = this.formatTime(daterange[1]) |
| | | } |
| | | |
| | | if (startTime && isNaN(new Date(startTime).getTime())) { |
| | | startTime = null; |
| | | startTime = null |
| | | } |
| | | if (endTime && isNaN(new Date(endTime).getTime())) { |
| | | endTime = null; |
| | | endTime = null |
| | | } |
| | | |
| | | this.onLoad(this.page, params); |
| | | if (done) done(); |
| | | this.onLoad(this.page, params) |
| | | if (done) done() |
| | | }, |
| | | selectionChange(list) { |
| | | this.selectionList = list; |
| | | selectionChange (list) { |
| | | this.selectionList = list |
| | | }, |
| | | selectionClear() { |
| | | this.selectionList = []; |
| | | this.$refs.crud.toggleSelection(); |
| | | selectionClear () { |
| | | this.selectionList = [] |
| | | this.$refs.crud.toggleSelection() |
| | | }, |
| | | currentChange(currentPage) { |
| | | this.page.currentPage = currentPage; |
| | | this.onLoad(this.page, this.query); |
| | | currentChange (currentPage) { |
| | | this.page.currentPage = currentPage |
| | | this.onLoad(this.page, this.query) |
| | | }, |
| | | sizeChange(pageSize) { |
| | | this.page.pageSize = pageSize; |
| | | this.onLoad(this.page, this.query); |
| | | sizeChange (pageSize) { |
| | | this.page.pageSize = pageSize |
| | | this.onLoad(this.page, this.query) |
| | | }, |
| | | refreshChange() { |
| | | this.onLoad(this.page, this.query); |
| | | refreshChange () { |
| | | this.onLoad(this.page, this.query) |
| | | }, |
| | | onLoad(page, params = {}) { |
| | | this.loading = true; |
| | | onLoad (page, params = {}) { |
| | | this.loading = true |
| | | |
| | | const workspaceId = this.selectedWorkspaceId || null; |
| | | const { daterange } = params; |
| | | let startTime = null; |
| | | let endTime = null; |
| | | const workspaceId = this.selectedWorkspaceId || null |
| | | const { daterange } = params |
| | | let startTime = null |
| | | let endTime = null |
| | | |
| | | if (daterange && Array.isArray(daterange) && daterange.length === 2) { |
| | | startTime = this.formatTime(daterange[0]); |
| | | endTime = this.formatTime(daterange[1]); |
| | | startTime = this.formatTime(daterange[0]) |
| | | endTime = this.formatTime(daterange[1]) |
| | | } |
| | | |
| | | if (startTime && isNaN(new Date(startTime).getTime())) { |
| | | startTime = null; |
| | | startTime = null |
| | | } |
| | | if (endTime && isNaN(new Date(endTime).getTime())) { |
| | | endTime = null; |
| | | endTime = null |
| | | } |
| | | |
| | | getJobsByUser( |
| | |
| | | endTime, |
| | | params.job_name || null |
| | | ).then(res => { |
| | | const responseData = res.data; |
| | | const responseData = res.data |
| | | |
| | | if (responseData && responseData.data && Array.isArray(responseData.data.list)) { |
| | | this.page.total = responseData.data.pagination.total || responseData.data.list.length; |
| | | this.page.total = responseData.data.pagination.total || responseData.data.list.length |
| | | this.data = responseData.data.list.map(item => ({ |
| | | job_id: item.job_id, |
| | | job_name: item.job_name, |
| | |
| | | reason: item.reason, |
| | | begin_time: item.begin_time, |
| | | completed_time: item.completed_time, |
| | | })); |
| | | })) |
| | | } else { |
| | | this.data = []; |
| | | this.page.total = 0; |
| | | this.data = [] |
| | | this.page.total = 0 |
| | | } |
| | | |
| | | this.loading = false; |
| | | this.selectionClear(); |
| | | this.loading = false |
| | | this.selectionClear() |
| | | }).catch(error => { |
| | | this.loading = false; |
| | | this.data = []; |
| | | this.page.total = 0; |
| | | }); |
| | | this.loading = false |
| | | this.data = [] |
| | | this.page.total = 0 |
| | | }) |
| | | }, |
| | | formatTime(time) { |
| | | if (!time) return ''; |
| | | let date; |
| | | formatTime (time) { |
| | | if (!time) return '' |
| | | let date |
| | | if (typeof time === 'number') { |
| | | date = new Date(time < 10000000000 ? time * 1000 : time); |
| | | date = new Date(time < 10000000000 ? time * 1000 : time) |
| | | } else if (typeof time === 'string') { |
| | | date = new Date(time); |
| | | date = new Date(time) |
| | | } |
| | | if (isNaN(date.getTime())) { |
| | | return null; |
| | | return null |
| | | } |
| | | const year = date.getFullYear(); |
| | | const month = String(date.getMonth() + 1).padStart(2, '0'); |
| | | const day = String(date.getDate()).padStart(2, '0'); |
| | | const hours = String(date.getHours()).padStart(2, '0'); |
| | | const minutes = String(date.getMinutes()).padStart(2, '0'); |
| | | const seconds = String(date.getSeconds()).padStart(2, '0'); |
| | | return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
| | | const year = date.getFullYear() |
| | | const month = String(date.getMonth() + 1).padStart(2, '0') |
| | | const day = String(date.getDate()).padStart(2, '0') |
| | | const hours = String(date.getHours()).padStart(2, '0') |
| | | const minutes = String(date.getMinutes()).padStart(2, '0') |
| | | const seconds = String(date.getSeconds()).padStart(2, '0') |
| | | return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` |
| | | }, |
| | | validData(val, def) { |
| | | return typeof val !== 'undefined' ? val : def; |
| | | validData (val, def) { |
| | | return typeof val !== 'undefined' ? val : def |
| | | }, |
| | | }, |
| | | }; |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | :deep(){ |
| | | .avue-crud__body{ |
| | | .el-form{ |
| | | height: 745px; |
| | | overflow: auto; |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | <style scoped lang="scss"></style> |