371 lines
8.6 KiB
Vue
371 lines
8.6 KiB
Vue
<template>
|
|
<el-drawer
|
|
:visible.sync="drawerVisible"
|
|
:size="drawerSize"
|
|
title="选择订单"
|
|
:destroy-on-close="true"
|
|
:with-header="false"
|
|
@open="onOpen"
|
|
append-to-body
|
|
:before-close="beforeClose"
|
|
>
|
|
<div class="order-drawer">
|
|
<!-- 搜索区域 -->
|
|
<div class="search-box">
|
|
<div class="search-container">
|
|
<el-input
|
|
v-model="queryParams.keyword"
|
|
placeholder="搜索订单编号/物料编码"
|
|
clearable
|
|
prefix-icon="el-icon-search"
|
|
@input="getList"
|
|
/>
|
|
<el-button
|
|
type="text"
|
|
class="select-btn"
|
|
@click="toggleSelectAll"
|
|
>
|
|
{{ isAllSelected ? '取消全选' : '全选' }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 订单列表区域 -->
|
|
<div
|
|
class="order-list"
|
|
v-infinite-scroll="loadMore"
|
|
:infinite-scroll-immediate="false"
|
|
infinite-scroll-distance="10"
|
|
>
|
|
<div
|
|
v-for="item in orderList"
|
|
:key="item.id"
|
|
class="order-item"
|
|
:class="{ 'is-selected': selectedIds.includes(item.id) }"
|
|
@click="toggleSelection(item)"
|
|
>
|
|
<div class="order-content">
|
|
<div class="order-header">
|
|
<span class="order-no">{{ item.erpBillNo | dv}}</span>
|
|
<span class="order-status">
|
|
<dict-tag :options="dict.type.prod_order_erp_status" :value="item.erpStatus" size="mini"/>
|
|
<boolean-tag :value="!item.erpIsRework" true-text="正常" false-text="返工" size="mini" style="margin-left: 4px;"/>
|
|
</span>
|
|
</div>
|
|
<div class="order-details">
|
|
<div class="detail-item">
|
|
<div class="label">车间:</div>
|
|
<div class="value">{{ item.workShopName | dv}}</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="label">物料:</div>
|
|
<div class="value">{{ item.materialNumber | dv}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="check-icon">
|
|
<i
|
|
v-show="selectedIds.includes(item.id)"
|
|
class="el-icon-check"
|
|
></i>
|
|
</div>
|
|
</div>
|
|
<div v-if="loading" class="loading-tip">
|
|
<i class="el-icon-loading"></i>
|
|
加载中...
|
|
</div>
|
|
<div v-if="isFinished" class="loading-tip">
|
|
没有更多数据了
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部操作区 -->
|
|
<div class="drawer-actions">
|
|
<div class="info">已选：{{ selectedIds.length }} 条</div>
|
|
<el-button @click="drawerVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="confirmSelection">确定</el-button>
|
|
</div>
|
|
</div>
|
|
</el-drawer>
|
|
</template>
|
|
|
|
<script>
|
|
import { listProdOrder, listProdOrderByIds } from '@/api/yh/prodOrder'
|
|
import BooleanTag from '@/components/BooleanTag/index.vue'
|
|
|
|
export default {
|
|
name: 'ProdOrderNewDrawer',
|
|
components: {
|
|
BooleanTag
|
|
},
|
|
dicts: ['prod_order_erp_status'],
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
multiple: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
defaultIds: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
query: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
listApi: {
|
|
type: Function,
|
|
default: listProdOrder
|
|
},
|
|
loadApi: {
|
|
type: Function,
|
|
default: listProdOrderByIds
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
orderList: [],
|
|
loading: false,
|
|
selectedIds: [],
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
keyword: null,
|
|
},
|
|
total: null,
|
|
isAllSelected: false,
|
|
}
|
|
},
|
|
computed: {
|
|
drawerVisible: {
|
|
get() {
|
|
return this.show
|
|
},
|
|
set(val) {
|
|
this.$emit('update:show', val)
|
|
}
|
|
},
|
|
drawerSize() {
|
|
return window.innerWidth < 768 ? '100%' : '600px'
|
|
},
|
|
isFinished() {
|
|
return this.total != null && this.orderList.length >= this.total;
|
|
}
|
|
},
|
|
methods: {
|
|
onOpen() {
|
|
this.selectedIds = [...this.defaultIds];
|
|
this.isAllSelected = false;
|
|
this.getList();
|
|
},
|
|
getList() {
|
|
this.queryParams.pageNum = 0;
|
|
this.queryParams = {
|
|
...this.queryParams,
|
|
...this.query
|
|
}
|
|
this.orderList = [];
|
|
this.total = null;
|
|
this.isAllSelected = false;
|
|
this.loadMore();
|
|
},
|
|
async loadMore() {
|
|
if (this.loading) {
|
|
return;
|
|
}
|
|
if (this.isFinished) {
|
|
return;
|
|
}
|
|
this.loading = true
|
|
this.queryParams.pageNum ++
|
|
try {
|
|
// 这里替换为实际的API调用
|
|
const res = await this.listApi(this.queryParams);
|
|
if (res.code === 200) {
|
|
this.orderList.push(...res.rows)
|
|
this.total = res.total;
|
|
|
|
if (this.isAllSelected) {
|
|
const newIds = res.rows
|
|
.map(user => user.id)
|
|
.filter(id => !this.selectedIds.includes(id))
|
|
this.selectedIds.push(...newIds)
|
|
}
|
|
}
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
toggleSelection(item) {
|
|
if (!this.multiple) {
|
|
this.selectedIds = [item.id]
|
|
this.confirmSelection();
|
|
} else {
|
|
const index = this.selectedIds.indexOf(item.id)
|
|
if (index === -1) {
|
|
this.selectedIds.push(item.id)
|
|
} else {
|
|
this.selectedIds.splice(index, 1)
|
|
}
|
|
}
|
|
},
|
|
async confirmSelection() {
|
|
if (this.selectedIds == null || this.selectedIds.length == 0) {
|
|
this.$message.warning('请选择订单');
|
|
return;
|
|
}
|
|
let res = await this.loadApi(this.selectedIds);
|
|
if (res.code == 200) {
|
|
this.$emit('confirm', res.data)
|
|
this.drawerVisible = false
|
|
}
|
|
},
|
|
toggleSelectAll() {
|
|
if (this.isAllSelected) {
|
|
this.selectedIds = []
|
|
this.isAllSelected = false
|
|
} else {
|
|
this.selectedIds = this.orderList.map(item => item.id)
|
|
this.isAllSelected = true
|
|
}
|
|
},
|
|
beforeClose(done) {
|
|
if (this.selectedIds != null && this.selectedIds.length > 0) {
|
|
this.$confirm('是否选中当前数据？').then(() => {
|
|
done();
|
|
this.confirmSelection();
|
|
}).catch(() => {
|
|
done();
|
|
});
|
|
} else {
|
|
done();
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.order-drawer {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.search-box {
|
|
margin-top: 8px;
|
|
padding: 0 16px 8px;
|
|
border-bottom: 1px solid #eee;
|
|
|
|
.search-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
.el-input {
|
|
flex: 1;
|
|
}
|
|
|
|
.select-btn {
|
|
white-space: nowrap;
|
|
padding: 0 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.order-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 8px 16px;
|
|
|
|
.order-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
margin-bottom: 4px;
|
|
|
|
&:hover {
|
|
background-color: #f5f7fa;
|
|
}
|
|
|
|
&.is-selected {
|
|
background-color: #ecf5ff;
|
|
.order-no {
|
|
color: #409eff;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.order-content {
|
|
flex: 1;
|
|
|
|
.order-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 2px;
|
|
|
|
.order-no {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.order-status {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.order-details {
|
|
color: #606266;
|
|
font-size: 12px;
|
|
display: flex;
|
|
gap: 8px;
|
|
|
|
.detail-item {
|
|
display: flex;
|
|
align-items: center;
|
|
.label {
|
|
width: fit-content;
|
|
}
|
|
.value {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.check-icon {
|
|
width: 20px;
|
|
color: #409eff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.loading-tip {
|
|
text-align: center;
|
|
color: #909399;
|
|
padding: 8px 0;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.drawer-actions {
|
|
padding: 12px 16px;
|
|
border-top: 1px solid #eee;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
align-items: center;
|
|
.info {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
}
|
|
}
|
|
}
|
|
</style> |