feat(biz): 添加生产订单管理功能
This commit is contained in:
parent
dc19a31ba5
commit
bba176ebec
@ -0,0 +1,285 @@
|
|||||||
|
<template>
|
||||||
|
<Dialog :title="dialogTitle" v-model="dialogVisible" width="1400px">
|
||||||
|
<div class="dialog-content">
|
||||||
|
<div class="table-container">
|
||||||
|
<!-- 表1：物料搜索列表 -->
|
||||||
|
<div class="table-section">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 搜索区域 -->
|
||||||
|
<el-form :model="queryParams" inline label-width="80px" class="search-form">
|
||||||
|
<el-form-item label="检索条件">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.searchText"
|
||||||
|
placeholder="物料编码、物料名称支持模糊查询"
|
||||||
|
clearable
|
||||||
|
class="!w-240px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="searchMaterial">
|
||||||
|
<Icon icon="ep:search" class="mr-5px" />搜索
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="resetQuery">
|
||||||
|
<Icon icon="ep:refresh-right" class="mr-5px" />重置
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 表格区域 -->
|
||||||
|
<el-table
|
||||||
|
ref="tableRef"
|
||||||
|
v-loading="loading"
|
||||||
|
:data="materialList"
|
||||||
|
:show-overflow-tooltip="true"
|
||||||
|
border
|
||||||
|
class="material-table"
|
||||||
|
@row-click="handleRowClick"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="50px" align="center" />
|
||||||
|
<el-table-column label="序号" width="60px" align="center" type="index" />
|
||||||
|
<el-table-column label="物料编码" align="center" prop="matCode" width="120px" />
|
||||||
|
<el-table-column label="物料名称" align="center" prop="matName" width="150px" />
|
||||||
|
<el-table-column label="规格型号" align="center" prop="spec" width="120px" />
|
||||||
|
<el-table-column label="单位" align="center" prop="unit" width="80px" />
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<Pagination
|
||||||
|
v-model:page="queryParams.pageNo"
|
||||||
|
v-model:limit="queryParams.pageSize"
|
||||||
|
:total="total"
|
||||||
|
@pagination="searchMaterial"
|
||||||
|
class="mt-15px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表2：已选中物料列表 -->
|
||||||
|
<div class="table-section">
|
||||||
|
<div class="section-header">
|
||||||
|
<div class="action-buttons">
|
||||||
|
<el-button size="small" @click="clearSelected">清空</el-button>
|
||||||
|
<el-button size="small" type="danger" @click="removeSelected">删除行</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表格区域 -->
|
||||||
|
<el-table
|
||||||
|
ref="selectedTableRef"
|
||||||
|
:data="selectedList"
|
||||||
|
:show-overflow-tooltip="true"
|
||||||
|
border
|
||||||
|
class="material-table"
|
||||||
|
@row-click="handleSelectedRowClick"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="50px" align="center" />
|
||||||
|
<el-table-column label="序号" width="60px" align="center" type="index" />
|
||||||
|
<el-table-column label="物料编码" align="center" prop="matCode" width="120px" />
|
||||||
|
<el-table-column label="物料名称" align="center" prop="matName" width="150px" />
|
||||||
|
<el-table-column label="规格型号" align="center" prop="spec" width="120px" />
|
||||||
|
<el-table-column label="单位" align="center" prop="unit" width="80px" />
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="confirmSelection" type="primary">保存</el-button>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
</template>
|
||||||
|
</Dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, nextTick } from 'vue'
|
||||||
|
import * as MaterialApi from '@/api/biz/material'
|
||||||
|
import { Icon } from '@/components/Icon'
|
||||||
|
|
||||||
|
const message = useMessage()
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const dialogTitle = ref('选择物料')
|
||||||
|
const loading = ref(false)
|
||||||
|
const total = ref(0)
|
||||||
|
const materialList = ref([])
|
||||||
|
const selectedList = ref<any[]>([])
|
||||||
|
const tableRef = ref()
|
||||||
|
const selectedTableRef = ref()
|
||||||
|
|
||||||
|
const queryParams = reactive({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
searchText: undefined,
|
||||||
|
matType: '1'
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['confirm'])
|
||||||
|
|
||||||
|
// 搜索物料
|
||||||
|
const searchMaterial = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const params: any = {
|
||||||
|
pageNo: queryParams.pageNo,
|
||||||
|
pageSize: queryParams.pageSize,
|
||||||
|
matType: queryParams.matType
|
||||||
|
}
|
||||||
|
if (queryParams.searchText) {
|
||||||
|
params.keyWord = queryParams.searchText
|
||||||
|
}
|
||||||
|
const data = await MaterialApi.getMaterialPage(params)
|
||||||
|
materialList.value = data.list
|
||||||
|
total.value = data.total
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置搜索
|
||||||
|
const resetQuery = () => {
|
||||||
|
queryParams.searchText = undefined
|
||||||
|
queryParams.pageNo = 1
|
||||||
|
searchMaterial()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击物料行
|
||||||
|
const handleRowClick = (row: any) => {
|
||||||
|
if (tableRef.value) {
|
||||||
|
tableRef.value.toggleRowSelection(row)
|
||||||
|
const selectedItems = tableRef.value.getSelectionRows()
|
||||||
|
|
||||||
|
// 找出新增的物料
|
||||||
|
selectedItems.forEach(item => {
|
||||||
|
if (!selectedList.value.some(s => s.id === item.id)) {
|
||||||
|
selectedList.value.push({
|
||||||
|
id: item.id,
|
||||||
|
matCode: item.matCode,
|
||||||
|
matName: item.matName,
|
||||||
|
spec: item.spec,
|
||||||
|
unit: item.unit,
|
||||||
|
materialId: item.id,
|
||||||
|
materialCode: item.matCode,
|
||||||
|
materialName: item.matName
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 找出取消选中的物料并移除
|
||||||
|
const selectedIds = selectedItems.map(i => i.id)
|
||||||
|
selectedList.value = selectedList.value.filter(item => selectedIds.includes(item.id))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击已选中行
|
||||||
|
const handleSelectedRowClick = (row: any) => {
|
||||||
|
if (selectedTableRef.value) {
|
||||||
|
selectedTableRef.value.toggleRowSelection(row)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清空已选中列表
|
||||||
|
const clearSelected = () => {
|
||||||
|
selectedList.value = []
|
||||||
|
// 同时取消表1中的选中状态
|
||||||
|
nextTick(() => {
|
||||||
|
if (tableRef.value) {
|
||||||
|
tableRef.value.clearSelection()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除选中行
|
||||||
|
const removeSelected = () => {
|
||||||
|
if (!selectedTableRef.value) return
|
||||||
|
|
||||||
|
const selectedItems = selectedTableRef.value.getSelectionRows()
|
||||||
|
if (selectedItems.length === 0) {
|
||||||
|
message.warning('请选择要删除的行')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectedIds = selectedItems.map(item => item.id)
|
||||||
|
selectedList.value = selectedList.value.filter(item => !selectedIds.includes(item.id))
|
||||||
|
|
||||||
|
// 同时取消表1中对应物料的选中状态
|
||||||
|
nextTick(() => {
|
||||||
|
if (tableRef.value) {
|
||||||
|
materialList.value.forEach(item => {
|
||||||
|
if (selectedIds.includes(item.id)) {
|
||||||
|
tableRef.value.toggleRowSelection(item, false)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确认选择
|
||||||
|
const confirmSelection = () => {
|
||||||
|
if (selectedList.value.length === 0) {
|
||||||
|
message.warning('请选择物料')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
emit('confirm', selectedList.value)
|
||||||
|
dialogVisible.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打开弹窗
|
||||||
|
const open = () => {
|
||||||
|
dialogVisible.value = true
|
||||||
|
selectedList.value = []
|
||||||
|
searchMaterial()
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ open })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dialog-content {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-section {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 15px;
|
||||||
|
background: #f5f7fa;
|
||||||
|
border-bottom: 1px solid #e4e7ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form {
|
||||||
|
padding: 15px;
|
||||||
|
border-bottom: 1px solid #e4e7ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-table {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table__header-wrapper) {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user