<script lang="ts" setup>
|
import { ref, computed, watch, onMounted } from 'vue'
|
import { useI18n } from 'vue-i18n'
|
import { ElMessage, ElTransfer, ElTabs, ElTabPane, ElButton } from 'element-plus'
|
import request from '@/utils/request'
|
|
const { t } = useI18n()
|
|
const activeTab = ref('cutting1')
|
|
// Transfer组件所需的数据格式
|
interface TransferDataItem {
|
key: string
|
label: string
|
projectNo: string
|
projectName: string
|
}
|
|
// 所有可选数据（左侧）
|
const dataSource = ref<TransferDataItem[]>([])
|
// 已选数据的keys（右侧）
|
const targetKeys = ref<string[]>([])
|
|
// 根据当前标签页获取右侧列表标题
|
const getRightListTitle = computed(() => {
|
switch (activeTab.value) {
|
case 'cutting1':
|
return t('large.countOutOne')
|
case 'cutting2':
|
return t('large.countOutTwo')
|
case 'tempered':
|
return t('large.temp')
|
default:
|
return '已排产'
|
}
|
})
|
|
// 获取左侧数据源
|
const fetchDataSource = async () => {
|
try {
|
// 根据当前标签页选择不同的接口
|
const apiUrl = activeTab.value === 'tempered'
|
? '/cacheVerticalGlass/bigStorageCageDetails/queryEngineer'
|
: '/loadGlass/optimizeProject/queryEngineer';
|
|
const response = await request.post(apiUrl)
|
|
if (response.code === 200) {
|
dataSource.value = response.data.map((item: any) => {
|
const projectNo = activeTab.value === 'tempered' ? item.engineerId : item.projectNo
|
const name = activeTab.value === 'tempered' ? item.engineerId : (item.projectNo + "-" + item.projectName)
|
|
return {
|
key: projectNo,
|
label: name,
|
projectNo: projectNo,
|
projectName: activeTab.value === 'tempered' ? '' : item.projectName
|
}
|
})
|
} else {
|
ElMessage.error(`获取数据失败: ${response.message || '未知错误'}`)
|
}
|
} catch (error) {
|
console.error('获取左侧数据失败:', error)
|
ElMessage.error('请稍后重试')
|
}
|
}
|
|
// 获取右侧已选数据
|
const fetchTargetKeys = async () => {
|
try {
|
// 根据当前标签页确定type参数
|
let type = 1; // 默认切割一线
|
if (activeTab.value === 'cutting2') {
|
type = 2; // 切割二线
|
} else if (activeTab.value === 'tempered') {
|
type = 3; // 钢化
|
}
|
|
const response = await request.post('/loadGlass/optimizeProject/engineerScheduling', {
|
type: type
|
})
|
|
if (response.code === 200) {
|
// 对于所有标签页，使用projectNo作为key
|
targetKeys.value = response.data.map((item: any) => item.projectNo)
|
|
// 将右侧数据添加到dataSource中，确保Transfer组件能找到对应的项
|
response.data.forEach((item: any) => {
|
// 检查dataSource中是否已存在该项
|
const exists = dataSource.value.some(dataItem => dataItem.key === item.projectNo)
|
if (!exists) {
|
// 如果不存在，添加到dataSource中
|
const newItem: TransferDataItem = {
|
key: item.projectNo,
|
label: `${item.projectNo}-${item.projectName || 'null'}`,
|
projectNo: item.projectNo,
|
projectName: item.projectName || ''
|
}
|
dataSource.value.push(newItem)
|
}
|
})
|
} else {
|
ElMessage.error(`获取数据失败: ${response.message || '未知错误'}`)
|
}
|
} catch (error) {
|
console.error('获取右侧数据失败:', error)
|
ElMessage.error('请稍后重试')
|
}
|
}
|
|
// 保存排产信息
|
const saveScheduling = async () => {
|
try {
|
// 根据当前标签页确定type参数
|
let type = 1; // 默认切割一线
|
if (activeTab.value === 'cutting2') {
|
type = 2; // 切割二线
|
} else if (activeTab.value === 'tempered') {
|
type = 3; // 钢化
|
}
|
|
const engineerList = targetKeys.value.map(projectNo => {
|
const dataItem = dataSource.value.find(item => item.key === projectNo)
|
return {
|
projectNo: projectNo,
|
projectName: dataItem ? dataItem.projectName : ''
|
}
|
})
|
|
const response = await request.post(`/loadGlass/optimizeProject/updateEngineerScheduling?type=${type}`, engineerList)
|
|
if (response.code === 200) {
|
ElMessage.success('保存成功')
|
// 重新加载数据
|
await fetchDataSource()
|
await fetchTargetKeys()
|
} else {
|
ElMessage.error(`保存失败: ${response.message || '未知错误'}`)
|
}
|
} catch (error) {
|
console.error('保存排产信息失败:', error)
|
ElMessage.error('请稍后重试')
|
}
|
}
|
|
// 重置排产信息
|
const resetScheduling = async () => {
|
await fetchDataSource()
|
await fetchTargetKeys()
|
ElMessage.info(t('已取消'))
|
}
|
|
// 监听标签页切换，根据不同标签页加载对应的数据
|
watch(activeTab, async (newTab) => {
|
// 重新获取数据
|
await fetchDataSource()
|
await fetchTargetKeys()
|
})
|
|
|
// 移除formatFunc，使用默认配置，Element Plus Transfer组件默认就会显示数量统计
|
// 如果需要自定义标题显示，可以通过titles属性处理
|
|
// 组件挂载时获取数据
|
onMounted(async () => {
|
await fetchDataSource()
|
await fetchTargetKeys()
|
})
|
</script>
|
|
<template>
|
<div class="engineer-scheduling-container">
|
<el-tabs v-model="activeTab" class="custom-tabs">
|
<el-tab-pane :label="t('large.countOutOne')" name="cutting1" />
|
<el-tab-pane :label="t('large.countOutTwo')" name="cutting2" />
|
<el-tab-pane :label="t('large.temp')" name="tempered" />
|
</el-tabs>
|
|
<div class="transfer-wrapper">
|
<el-transfer v-model="targetKeys" class="custom-transfer" filterable :data="dataSource"
|
:titles="['待排产', getRightListTitle]" :button-texts="['', '']">
|
<template #right-empty>
|
<el-empty :image-size="80" description="No data" />
|
</template>
|
</el-transfer>
|
|
|
<div class="transfer-save">
|
<el-button type="primary" @click="saveScheduling">
|
{{ t('searchOrder.makesure') }}
|
</el-button>
|
<el-button type="primary" @click="resetScheduling">
|
{{ t('delivery.cancel') }}
|
</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.engineer-scheduling-container {
|
padding: 20px;
|
border: 1px solid #dcdfe6;
|
border-radius: 4px;
|
background-color: #fff;
|
}
|
|
.custom-tabs {
|
margin-bottom: 20px;
|
}
|
|
::v-deep(.custom-tabs .el-tabs__item) {
|
font-size: 20px;
|
}
|
|
.transfer-wrapper {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: 20px;
|
}
|
|
.transfer-save {
|
display: flex;
|
gap: 10px;
|
}
|
|
/* 自定义Transfer组件的样式 */
|
::v-deep(.el-transfer-panel) {
|
font-size: 16px;
|
width: 350px;
|
height: 440px;
|
}
|
|
.custom-transfer {
|
--el-transfer-panel-body-height: 400px;
|
}
|
|
::v-deep(.el-transfer-panel__header) {
|
font-weight: bold;
|
font-size: 18px;
|
}
|
|
::v-deep(.el-checkbox__label) {
|
font-size: 16px;
|
}
|
</style>
|
