迁移托盘追溯模块
This commit is contained in:
sheng
199
src/views/data-platform/traceability/tray/index.vue
Normal file
199
src/views/data-platform/traceability/tray/index.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template #header>
|
||||
<div class="search-bar">
|
||||
<el-form ref="searchForm" :inline="true" :model="search" size="mini">
|
||||
<el-form-item :label="$t(key('tray_code'))" prop="tray_id">
|
||||
<el-input v-model.trim="search.tray_id" :placeholder="$t(key('tray_code_placeholder'))" clearable style="width:220px" @keyup.enter.native="fetchData" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" :disabled="loading" @click="fetchData">{{ $t(key('query')) }}</el-button>
|
||||
<el-button icon="el-icon-refresh" :disabled="loading" @click="resetSearch">{{ $t(key('reset')) }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<page-table
|
||||
:columns="columns"
|
||||
:data="tableData"
|
||||
:loading="loading"
|
||||
:toolbar-buttons="[]"
|
||||
:row-buttons="rowButtons"
|
||||
:pagination="pagination"
|
||||
:table-attrs="{ size: 'mini', rowKey: 'id', highlightCurrentRow: true }"
|
||||
auto-height
|
||||
@page-change="onPageChange"
|
||||
>
|
||||
<template #col-active="{ row }">
|
||||
<el-tag :type="Number(row.active) === 1 ? 'success' : 'info'" size="mini">
|
||||
{{ Number(row.active) === 1 ? $t(key('active')) : $t(key('inactive')) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #empty>
|
||||
<el-empty :description="$t(key('data_empty'))" :image-size="80" />
|
||||
</template>
|
||||
</page-table>
|
||||
|
||||
<el-drawer :visible.sync="detailVisible" :with-header="false" size="100%" append-to-body>
|
||||
<div class="drawer-header">
|
||||
<el-page-header @back="detailVisible = false" :content="$t(key('battery_detail_data'))" />
|
||||
</div>
|
||||
<div class="detail-layout">
|
||||
<aside v-if="timeLine.length" class="detail-timeline">
|
||||
<el-timeline>
|
||||
<el-timeline-item v-for="(item, index) in timeLine" :key="index">
|
||||
<p>{{ $t(key('process')) }}: {{ item.process_name || '-' }}</p>
|
||||
<el-card shadow="never">
|
||||
<p>{{ $t(key('start_time')) }}: {{ item.beginTime || '-' }}</p>
|
||||
<p>{{ $t(key('end_time')) }}: {{ item.endTime || '-' }}</p>
|
||||
<p>{{ $t(key('device_no')) }}: {{ item.device_code || '-' }}</p>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</aside>
|
||||
<main class="detail-main">
|
||||
<el-form :inline="true" :model="detailSearch" size="mini">
|
||||
<el-form-item :label="$t(key('battery_id'))">
|
||||
<el-input v-model.trim="detailSearch.battery_id" :placeholder="$t(key('search_battery_id'))" clearable style="width:220px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-close" @click="cancelBatteryActive">{{ $t(key('cancel_battery_active')) }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table :data="filteredDetails" border size="mini" height="calc(100vh - 170px)" @selection-change="selection = $event">
|
||||
<el-table-column type="selection" width="48" />
|
||||
<el-table-column prop="id" :label="$t(key('sort'))" width="70" />
|
||||
<el-table-column prop="battery_id" :label="$t(key('battery_id'))" min-width="180" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<el-link type="primary" @click="goBatteryTrace(scope.row.battery_id)">{{ scope.row.battery_id }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="batch" :label="$t(key('production_batch'))" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="model" :label="$t(key('model'))" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="flow_name" :label="$t(key('process_flow_name'))" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="tray" :label="$t(key('tray_no'))" min-width="130" show-overflow-tooltip />
|
||||
<el-table-column prop="lot" :label="$t(key('lot'))" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="active" :label="$t(key('activation_status'))" min-width="120" />
|
||||
<el-table-column prop="class" :label="$t(key('category'))" min-width="120" />
|
||||
<el-table-column prop="classname" :label="$t(key('grade'))" min-width="120" />
|
||||
</el-table>
|
||||
</main>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useTableColumns } from '@/composables/useTableColumns'
|
||||
import { i18nMixin } from '@/composables/useI18n'
|
||||
import PageTable from '@/components/page-table'
|
||||
import { cancelTraceBatteryActive, getTrayTraceDetail, getTrayTraceList } from '@/api/data-platform/traceability/tray'
|
||||
|
||||
export default {
|
||||
name: 'data-platform-traceability-tray',
|
||||
components: { PageTable },
|
||||
mixins: [i18nMixin('page.data_platform.traceability.tray')],
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
detailLoading: false,
|
||||
search: { tray_id: this.$route.query.tray || '' },
|
||||
tableData: [],
|
||||
pagination: { current: 1, size: 10, total: 0 },
|
||||
detailVisible: false,
|
||||
activeTrayId: '',
|
||||
detailData: [],
|
||||
timeLine: [],
|
||||
detailSearch: { battery_id: '' },
|
||||
selection: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
columns () {
|
||||
return useTableColumns([
|
||||
{ prop: 'id', label: this.key('id'), width: 90, sortable: 'custom' },
|
||||
{ prop: 'tray', label: this.key('tray'), minWidth: 140, showOverflowTooltip: true },
|
||||
{ prop: 'batch', label: this.key('login_batch'), minWidth: 140, showOverflowTooltip: true },
|
||||
{ prop: 'lot', label: this.key('lot'), minWidth: 120, showOverflowTooltip: true },
|
||||
{ prop: 'active', label: this.key('is_active'), minWidth: 110, slot: 'active' },
|
||||
{ prop: 'input_battery_count', label: this.key('input_battery_count'), minWidth: 140 },
|
||||
{ prop: 'create_time', label: this.key('login_time'), minWidth: 170, showOverflowTooltip: true },
|
||||
{ prop: 'cancel_active_time', label: this.key('cancel_active_time'), minWidth: 170, showOverflowTooltip: true }
|
||||
], { selectionWidth: 0, indexWidth: 55, operationWidth: 130 })
|
||||
},
|
||||
rowButtons () {
|
||||
return [{ key: 'detail', label: this.key('battery_detail'), type: 'primary', icon: 'el-icon-document', size: 'mini', onClick: this.openDetail }]
|
||||
},
|
||||
filteredDetails () {
|
||||
const keyword = String(this.detailSearch.battery_id || '').toLowerCase()
|
||||
return this.detailData.filter(item => !keyword || String(item.battery_id || '').toLowerCase().includes(keyword))
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.search.tray_id) this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
responseData (res) { return res && res.data !== undefined ? res.data : res },
|
||||
async fetchData () {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await getTrayTraceList({ ...this.search, page_no: this.pagination.current, page_size: this.pagination.size })
|
||||
const data = this.responseData(res)
|
||||
this.tableData = Array.isArray(data) ? data : []
|
||||
this.pagination.total = Number(data && data.count) || this.tableData.length
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
resetSearch () {
|
||||
this.search.tray_id = ''
|
||||
this.tableData = []
|
||||
this.pagination.current = 1
|
||||
this.pagination.total = 0
|
||||
},
|
||||
onPageChange (page) {
|
||||
this.pagination = { ...this.pagination, ...page }
|
||||
this.fetchData()
|
||||
},
|
||||
async openDetail (row) {
|
||||
this.activeTrayId = row.id
|
||||
this.detailVisible = true
|
||||
await this.loadDetail()
|
||||
},
|
||||
async loadDetail () {
|
||||
if (!this.activeTrayId) return
|
||||
this.detailLoading = true
|
||||
try {
|
||||
const res = await getTrayTraceDetail({ tray_id: this.activeTrayId })
|
||||
const data = this.responseData(res) || {}
|
||||
this.detailData = Array.isArray(data.data) ? data.data.filter(item => item.battery_id !== 0 && item.battery_id !== '') : []
|
||||
this.timeLine = Array.isArray(data.date_log) ? data.date_log : []
|
||||
} finally {
|
||||
this.detailLoading = false
|
||||
}
|
||||
},
|
||||
async cancelBatteryActive () {
|
||||
if (!this.selection.length) {
|
||||
this.$message.error(this.$t(this.key('please_select_at_least_one_battery')))
|
||||
return
|
||||
}
|
||||
await cancelTraceBatteryActive({ batterData: JSON.stringify(this.selection) })
|
||||
this.$message.success(this.$t(this.key('cancel_success')))
|
||||
this.loadDetail()
|
||||
},
|
||||
goBatteryTrace (batteryId) {
|
||||
this.detailVisible = false
|
||||
this.$router.push({ path: '/data_middleground/produce/traceability/battery', query: { battery_id: batteryId } })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-bar { margin-bottom: -18px; }
|
||||
.drawer-header { padding: 20px 24px; border-bottom: 1px solid #ebeef5; }
|
||||
.detail-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: calc(100vh - 73px); }
|
||||
.detail-timeline { overflow: auto; padding: 18px; background: #f5f7fa; border-right: 1px solid #ebeef5; }
|
||||
.detail-main { min-width: 0; padding: 16px; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user