200 lines
8.9 KiB
Vue
200 lines
8.9 KiB
Vue
<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>
|