import { defineComponent, onMounted, ref } from 'vue'
|
import type { Ref } from 'vue'
|
import styles from './PipeAccessoryAssembly.module.scss'
|
import pipeImage from '@/images/pipe-assembly-drawing-example.png';
|
import {
|
ElInput,
|
ElForm,
|
ElFormItem,
|
ElButton,
|
ElSelect,
|
ElOption,
|
ElMessage,
|
ElCol,
|
} from 'element-plus'
|
import {
|
getPlaceNoForStockList,
|
getMaterialModelList,
|
instock,
|
} from '@/widgets/PipeAccessoryAssembly/Models/Service/PipeAccessoryAssembly'
|
import { Message } from '@element-plus/icons-vue/dist/types'
|
|
export default defineComponent({
|
name: 'PipeAccessoryAssembly',
|
setup() {
|
// 查询表单数据
|
const queryForm = ref({
|
materialModel: '',
|
placeNo: '',
|
materialBatch: '',
|
stockNumber: '',
|
})
|
|
// 数据源
|
const modelOptions = ref<Array<{ value: string; label: string }>>([])
|
const placeNoOptions = ref<Array<{ value: string; label: string }>>([])
|
|
onMounted(() => {
|
// 组件挂载后获取型号列表和库位号列表
|
getModelList()
|
getPlaceNoList()
|
})
|
|
// 组盘操作
|
const handlePalletize = () => {
|
console.log('组盘操作', queryForm.value)
|
// 这里添加组盘逻辑
|
}
|
|
// 组盘入库操作
|
const handlePalletizeStorage = () => {
|
console.log('组盘入库操作', queryForm.value)
|
instock(queryForm.value), resetQueryForm()
|
ElMessage.success({
|
message: '组盘入库成功',
|
type: 'success',
|
})
|
// 这里添加组盘入库逻辑
|
}
|
|
const resetQueryForm = () => {
|
queryForm.value.materialModel = ''
|
queryForm.value.placeNo = ''
|
queryForm.value.materialBatch = ''
|
queryForm.value.stockNumber = ''
|
}
|
|
const getModelList = async () => {
|
const models = await getMaterialModelList()
|
modelOptions.value = models.map((item: string) => ({
|
value: item.materialModel,
|
label: item.materialModelDesc,
|
}))
|
}
|
|
const getPlaceNoList = async () => {
|
const placeNos = await getPlaceNoForStockList(2)
|
console.log('库位号列表:', placeNos)
|
placeNoOptions.value = placeNos.map((item: string) => ({
|
value: item.placeNo,
|
label: item.placeNoDesc,
|
}))
|
}
|
|
return () => {
|
return (
|
<div class={styles.PipeAccessoryAssemblyContent} style="overflow-y: auto !important; height: 100%;">
|
<div class={styles.actionButtons}>
|
<ElButton type="warning">开工</ElButton>
|
<ElButton type="warning">完工</ElButton>
|
<ElButton type="warning">暂停</ElButton>
|
<ElButton type="warning">自动</ElButton>
|
<ElButton type="warning">质检</ElButton>
|
</div>
|
|
<h2 class={styles.blockTitle}>当前工位/设备信息</h2>
|
|
{/* <div class={styles.modelRrow}> */}
|
{/* <div> */}
|
<div class={styles.headerContent}>
|
<div class={styles.header}>
|
<ElForm label-position="right" class={styles.h5Form}>
|
<ElFormItem label="型号1">
|
<ElSelect
|
v-model={queryForm.value.materialModel}
|
placeholder="请选择型号"
|
clearable
|
disabled
|
class={styles.formInput}
|
>
|
{modelOptions.value.map((item) => (
|
<ElOption
|
key={item.value}
|
label={item.label}
|
value={item.value}
|
/>
|
))}
|
</ElSelect>
|
</ElFormItem>
|
<ElFormItem label="型号2">
|
<ElSelect
|
v-model={queryForm.value.materialModel}
|
placeholder="请选择型号"
|
clearable
|
disabled
|
class={styles.formInput}
|
>
|
{modelOptions.value.map((item) => (
|
<ElOption
|
key={item.value}
|
label={item.label}
|
value={item.value}
|
/>
|
))}
|
</ElSelect>
|
</ElFormItem>
|
<ElFormItem label="型号3">
|
<ElSelect
|
v-model={queryForm.value.materialModel}
|
placeholder="请选择型号"
|
clearable
|
disabled
|
class={styles.formInput}
|
>
|
{modelOptions.value.map((item) => (
|
<ElOption
|
key={item.value}
|
label={item.label}
|
value={item.value}
|
/>
|
))}
|
</ElSelect>
|
</ElFormItem>
|
<ElFormItem label="型号4">
|
<ElSelect
|
v-model={queryForm.value.materialModel}
|
placeholder="请选择型号"
|
clearable
|
disabled
|
class={styles.formInput}
|
>
|
{modelOptions.value.map((item) => (
|
<ElOption
|
key={item.value}
|
label={item.label}
|
value={item.value}
|
/>
|
))}
|
</ElSelect>
|
</ElFormItem>
|
</ElForm>
|
</div>
|
</div>
|
|
<div class="info-block">
|
<h2 class="block-title">工艺信息</h2>
|
<el-table stripe>
|
<el-table-column prop="sequence" label="序"></el-table-column>
|
<el-table-column prop="flangeA" label="法兰A"></el-table-column>
|
<el-table-column prop="flangeB" label="法兰B"></el-table-column>
|
</el-table>
|
</div>
|
<h2 class="block-title">图纸</h2>
|
<img
|
src={pipeImage}
|
alt="设备图片"
|
style="height:1250px;"
|
class="equipment-image"
|
></img>
|
|
</div>
|
)
|
}
|
},
|
})
|
