|
|
<script lang="ts" setup> import { delCraft, getCraftList, setCraft, startCraft } from '@/apis/crafts' import AddCraftDialog from '@/components/craft/AddCraftDialog.vue' import CraftStatus from '@/components/craft/CraftStatus.vue' import { ElMessage, ElMessageBox } from 'element-plus' import { onMounted, ref } from 'vue' import { useRoute, useRouter } from 'vue-router'
const tableData = ref<CraftTypes.Craft[]>([]) const addCraftRef = ref<CraftTypes.AddCraftType | null>(null) const selectable = ref() const multipleSelection = ref<CraftTypes.Craft[]>() const heatVisible = ref(false) const heatId = ref() const craftStatusRef = ref<CraftTypes.craftStatus | null>(null) const route = useRoute() const router = useRouter() const oresId = route.query.oreId as string onMounted(() => { queryCrafList() }) // 加热区列表
const heatList = [{ id: 'heat_module_01', name: '加热区_01', }, { id: 'heat_module_02', name: '加热区_02', }, { id: 'heat_module_03', name: '加热区_03', }, { id: 'heat_module_04', name: '加热区_04', }, { id: 'heat_module_05', name: '加热区_05', }, { id: 'heat_module_06', name: '加热区_06', }] const queryCrafList = () => { const params = { oresId, } getCraftList(params).then((res) => { console.log('res---', res) tableData.value = res }) }
const onAddCraft = () => { if (addCraftRef.value) { addCraftRef.value.openDialog() } }
const onEditCraft = () => { if (multipleSelection.value && multipleSelection.value.length !== 1) { ElMessage.warning('请选择一条数据进行编辑') return } if (addCraftRef.value && multipleSelection.value) { addCraftRef.value.editDialog(multipleSelection.value[0]) } }
const handleSelectionChange = (rows: CraftTypes.Craft[]) => { if (rows && rows.length) { multipleSelection.value = rows } }
const onDelCraft = () => { if (!multipleSelection.value || !multipleSelection.value.length) { ElMessage.warning('请选择要删除的数据') return } ElMessageBox.confirm( '确认删除选中的数据吗?', '确认提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }, ).then(() => { if (multipleSelection.value && multipleSelection.value.length) { const ids = multipleSelection.value.map(item => item.id) delCraft(ids.join(',')).then((res) => { console.log('删除成功', res) ElMessage.success('删除成功') queryCrafList() }) } }) }
const onSelectHeatId = () => { if (!multipleSelection.value || multipleSelection.value.length !== 1) { ElMessage.warning('每次只可执行一次工艺') return } heatVisible.value = true }
const onShowState = () => { craftStatusRef.value?.showDialog() }
// 开始执行工艺
const onStart = () => { if (!heatId.value) { ElMessage.warning('请选择加热区') return } if (multipleSelection.value && multipleSelection.value.length && heatId) { const craft = multipleSelection.value[0] // 先进行配置
const craftId = craft.id if (craftId && heatId.value) { const params = { craftId: craft.id, heatId: heatId.value, } setCraft(params).then(() => { console.log('配置成功==') startCraft({ heatId: heatId.value }).then(() => { console.log('开始执行') ElMessage.success('工艺已开始执行') heatVisible.value = false // 看执行状态
craftStatusRef.value?.showDialog() }) }) } } }
const returnOre = () => { router.push('/ore') } </script>
<template> <div class="component-page"> <section class="flex items-center h-20 gap-3 pl-3"> <FtButton @click="onAddCraft"> 添加工艺 </FtButton> <FtButton @click="onEditCraft"> 编辑工艺 </FtButton> <FtButton @click="onDelCraft"> 删除工艺 </FtButton> <FtButton @click="onSelectHeatId"> 执行工艺 </FtButton> <FtButton @click="onShowState"> 查看工艺步骤 </FtButton> </section> <main class="craft-main"> <el-table :data="tableData" style="width: 100%" size="small" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" :selectable="selectable" /> <el-table-column prop="name" label="工艺名称" /> <!-- <el-table-column prop="orgName" label="矿石名称"> <template #default="scope"> <span v-if="scope.row.oresId === 1">硫酸</span> <span v-else>硝酸</span> </template> </el-table-column> --> <el-table-column prop="createTime" label="创建日期" /> <el-table-column prop="updateTime" label="更新日期" /> </el-table> </main> <AddCraftDialog ref="addCraftRef" @ok="queryCrafList" /> <!-- 执行工艺,选择加热区 --> <el-dialog v-model="heatVisible" title="执行工艺" width="30vw"> <div style="display: flex; justify-content: center;align-items: center;"> <label>选择加热区:</label> <el-select v-model="heatId" style="width:200px" size="small"> <el-option v-for="el in heatList" :key="el.id" :label="`${el.name}`" :value="el.id" /> </el-select> </div> <div style="display: flex; justify-content: center;align-items: center; height:100px"> <FtButton @click="onStart"> 开始执行 </FtButton> </div> </el-dialog> <CraftStatus ref="craftStatusRef" /> <div class="return-ore"> <FtButton @click="returnOre">返回</FtButton> </div> </div> </template>
<style lang="scss" scoped> .craft-main{ margin-top: 20px; } .return-ore{ position: absolute; bottom: 20px; display: flex; justify-content: center; width: 80vw; } </style>
|