feat: add delivery notice list
This commit is contained in:
243
src/views/ProductionManagement/DeliveryNoticeList/index.vue
Normal file
243
src/views/ProductionManagement/DeliveryNoticeList/index.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<div class="delivery-notice-page">
|
||||
<el-card>
|
||||
<!-- <div class="page-title">发货状态列表</div> -->
|
||||
<div class="search-container" @keyup.enter="searchTable">
|
||||
<span class="show-text">生产订单:</span>
|
||||
<el-input
|
||||
v-model="orderNo"
|
||||
clearable
|
||||
placeholder="请输入生产订单"
|
||||
style="width: 130px; margin-right: 10px"
|
||||
/>
|
||||
<span class="show-text">销售订单:</span>
|
||||
<el-input
|
||||
v-model="saleNo"
|
||||
clearable
|
||||
placeholder="请输入销售订单"
|
||||
style="width: 130px; margin-right: 10px"
|
||||
/>
|
||||
<span class="show-text">物料名称:</span>
|
||||
<el-input
|
||||
v-model="materialName"
|
||||
clearable
|
||||
placeholder="请输入物料名称"
|
||||
style="width: 150px; margin-right: 10px"
|
||||
/>
|
||||
<span class="show-text">物料编码:</span>
|
||||
<el-input
|
||||
v-model="materialCode"
|
||||
clearable
|
||||
placeholder="请输入物料编码"
|
||||
style="width: 170px; margin-right: 10px"
|
||||
/>
|
||||
<span class="show-text">要求发货日期:</span>
|
||||
<el-date-picker
|
||||
v-model="deliveryDate"
|
||||
clearable
|
||||
format="yyyy-MM-dd"
|
||||
placeholder="请选择日期"
|
||||
style="width: 150px; margin-right: 10px"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
/>
|
||||
<span class="show-text">齐套:</span>
|
||||
<el-select
|
||||
v-model="complete"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
style="width: 100px; margin-right: 10px"
|
||||
>
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="是" value="是" />
|
||||
<el-option label="否" value="否" />
|
||||
</el-select>
|
||||
<span class="show-text">发料状态:</span>
|
||||
<el-select
|
||||
v-model="sendStatus"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
style="width: 120px; margin-right: 10px"
|
||||
>
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="发料齐套" value="发料齐套" />
|
||||
<el-option label="发料缺件" value="发料缺件" />
|
||||
<el-option label="未发料" value="未发料" />
|
||||
</el-select>
|
||||
<el-button
|
||||
:disabled="loading"
|
||||
icon="el-icon-search"
|
||||
plain
|
||||
type="primary"
|
||||
@click="searchTable"
|
||||
>查询</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
:height="'76vh'"
|
||||
border
|
||||
element-loading-background="rgba(0, 0, 0, 0.2)"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
highlight-current-row
|
||||
size="mini"
|
||||
style="width: 100%; margin-top: 16px"
|
||||
tooltip-effect="dark"
|
||||
>
|
||||
<el-table-column align="center" fixed label="序号" type="index" width="50" />
|
||||
<el-table-column align="center" fixed label="生产订单" prop="订单编号" width="90" />
|
||||
<el-table-column align="center" label="销售订单" prop="合同号" width="110" />
|
||||
<el-table-column align="center" label="物料名称" prop="物料描述" width="160" />
|
||||
<el-table-column align="center" label="物料编码" prop="物料编号" min-width="230" show-overflow-tooltip />
|
||||
<el-table-column align="center" label="数量" width="80">
|
||||
<template slot-scope="scope">{{ formatQuantity(scope.row.交货数量 || scope.row.计划数量) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="要求发货日期" width="120">
|
||||
<template slot-scope="scope">{{ formatDate(scope.row.要求发货日期) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="齐套" width="90">
|
||||
<template slot-scope="scope">
|
||||
<div :style="getStatusStyle(formatComplete(scope.row.齐套))" class="score-cell">
|
||||
{{ formatComplete(scope.row.齐套) }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="发料状态" width="110">
|
||||
<template slot-scope="scope">
|
||||
<div :style="getStatusStyle(formatSendStatus(scope.row.发料状态))" class="score-cell">
|
||||
{{ formatSendStatus(scope.row.发料状态) }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="操作人" prop="操作人" width="100" />
|
||||
<el-table-column align="center" label="装配开工" width="100">
|
||||
<template slot-scope="scope">
|
||||
<div :style="getStatusStyle(formatStartStatus(scope.row.任务状态))" class="score-cell">
|
||||
{{ formatStartStatus(scope.row.任务状态) }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DeliveryNoticeList',
|
||||
data() {
|
||||
return {
|
||||
orderNo: '',
|
||||
saleNo: '',
|
||||
materialName: '',
|
||||
materialCode: '',
|
||||
deliveryDate: '',
|
||||
complete: '',
|
||||
sendStatus: '',
|
||||
tableData: [],
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.searchTable()
|
||||
},
|
||||
methods: {
|
||||
async searchTable() {
|
||||
this.loading = true
|
||||
this.tableData = []
|
||||
const param = []
|
||||
param.push(['生产订单', this.normalizeQueryValue(this.orderNo)])
|
||||
param.push(['销售订单', this.normalizeQueryValue(this.saleNo)])
|
||||
param.push(['物料名称', this.normalizeQueryValue(this.materialName)])
|
||||
param.push(['物料编码', this.normalizeQueryValue(this.materialCode)])
|
||||
param.push(['要求发货日期', this.deliveryDate || null])
|
||||
param.push(['齐套', this.complete || ''])
|
||||
param.push(['发料状态', this.sendStatus || ''])
|
||||
|
||||
const data = this.CreateData('11', '装配中心任务看板_发货状态查询', param)
|
||||
try {
|
||||
const response = await this.ExecDatabase(data)
|
||||
this.tableData = response.data || []
|
||||
} catch (error) {
|
||||
console.error('发货通知列表查询失败:', error)
|
||||
this.$message.error('查询失败')
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
normalizeQueryValue(value) {
|
||||
return value === null || value === undefined || value === '' ? '0' : value
|
||||
},
|
||||
formatDate(value) {
|
||||
if (!value) return ''
|
||||
return String(value).split('T')[0].split(' ')[0]
|
||||
},
|
||||
formatQuantity(value) {
|
||||
if (value === null || value === undefined || value === '') return ''
|
||||
const numberValue = Number(value)
|
||||
if (Number.isNaN(numberValue)) return value
|
||||
return Number.isInteger(numberValue) ? String(numberValue) : String(numberValue).replace(/0+$/, '').replace(/\.$/, '')
|
||||
},
|
||||
formatComplete(value) {
|
||||
return Number(value || 0) === 1 ? '是' : '否'
|
||||
},
|
||||
formatSendStatus(value) {
|
||||
if (value === '发料齐套' || value === '发料缺件') return value
|
||||
if (Number(value || 0) === 1) return '发料齐套'
|
||||
if (Number(value || 0) === 2) return '发料缺件'
|
||||
return ''
|
||||
},
|
||||
formatStartStatus(value) {
|
||||
return Number(value || 0) > 0 ? '已开工' : '待执行'
|
||||
},
|
||||
getStatusStyle(value) {
|
||||
if (value === '是' || value === '发料齐套' || value === '已开工') {
|
||||
return {
|
||||
backgroundColor: '#f0f9eb',
|
||||
color: '#67c23a'
|
||||
}
|
||||
}
|
||||
if (value === '否' || value === '发料缺件' || value === '待执行') {
|
||||
return {
|
||||
backgroundColor: '#fdf6ec',
|
||||
color: '#e6a23c'
|
||||
}
|
||||
}
|
||||
return {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.delivery-notice-page {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
color: #409eff;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 28px;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 0;
|
||||
}
|
||||
|
||||
.show-text {
|
||||
line-height: 32px;
|
||||
margin-right: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.score-cell {
|
||||
border-radius: 3px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user