7 changed files with 221 additions and 374 deletions
-
2src/apis/crafts.ts
-
5src/components/craft/AddCraft/index.vue
-
27src/components/home/ExecuteCraft/index.vue
-
8src/components/home/Tube/index.vue
-
15src/router/routes.ts
-
261src/views/craft/index.vue
-
277src/views/home/index.vue
@ -1,211 +1,82 @@ |
|||
<script lang="ts" setup> |
|||
import { ElMessage, ElMessageBox } from 'element-plus' |
|||
import { onMounted, ref } from 'vue' |
|||
import { useRoute, useRouter } from 'vue-router' |
|||
import { delCraft, getCraftList, setCraft, startCraft } from '@/apis/crafts' |
|||
import AddCraft from '@/components/craft/AddCraft/index.vue' |
|||
import AddCraftDialog from '@/components/craft/AddCraftDialog.vue' |
|||
import CraftStatus from '@/components/craft/CraftStatus.vue' |
|||
<script setup lang="ts"> |
|||
import { delCraft, getCraftList } from 'apis/crafts' |
|||
import AddCraft from 'components/craft/AddCraft/index.vue' |
|||
import { ElMessageBox } from 'element-plus' |
|||
import { FtMessage } from 'libs/message' |
|||
import { ref, useTemplateRef } from 'vue' |
|||
|
|||
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', |
|||
}] |
|||
const btnList = [ |
|||
{ |
|||
name: '新增', |
|||
type: 'primary', |
|||
serverUrl: 'add', |
|||
serverCondition: 0, |
|||
}, |
|||
{ |
|||
name: '编辑', |
|||
type: 'primary', |
|||
serverUrl: 'edit', |
|||
serverCondition: 1, |
|||
}, |
|||
{ |
|||
name: '删除', |
|||
type: 'danger', |
|||
serverUrl: 'del', |
|||
serverCondition: 2, |
|||
}, |
|||
] |
|||
const columns = [ |
|||
{ |
|||
type: 'selection', |
|||
}, |
|||
{ |
|||
title: '工艺名称', |
|||
key: 'name', |
|||
}, |
|||
{ |
|||
title: '创建时间', |
|||
key: 'createTime', |
|||
}, |
|||
{ |
|||
title: '创建时间', |
|||
key: 'updateTime', |
|||
}, |
|||
] |
|||
|
|||
const queryCrafList = () => { |
|||
const params = { |
|||
oresId, |
|||
} |
|||
getCraftList(params).then((res) => { |
|||
tableData.value = res |
|||
}).catch(() => { |
|||
}) |
|||
} |
|||
const sourceData = ref<CraftTypes.Craft | null>(null) |
|||
const addCraftVisible = ref(false) |
|||
|
|||
const onAddCraft = () => { |
|||
// if (addCraftRef.value) { |
|||
// addCraftRef.value.openDialog() |
|||
// } |
|||
sourceData.value = null |
|||
addCraftVisible.value = true |
|||
} |
|||
|
|||
const onEditCraft = () => { |
|||
// if (multipleSelection.value && multipleSelection.value.length !== 1) { |
|||
// ElMessage.warning('请选择一条数据进行编辑') |
|||
// return |
|||
// } |
|||
// if (addCraftRef.value && multipleSelection.value) { |
|||
// addCraftRef.value.editDialog(multipleSelection.value[0]) |
|||
// } |
|||
sourceData.value = multipleSelection.value[0] |
|||
addCraftVisible.value = true |
|||
} |
|||
const tableRef = useTemplateRef('tableRef') |
|||
|
|||
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 del = async (selectedRows: any) => { |
|||
const ids = selectedRows.map((item: any) => item.id) |
|||
await ElMessageBox.confirm('确定删除当前选中的行?', '消息', { |
|||
confirmButtonText: '确认', |
|||
cancelButtonText: '取消', |
|||
type: 'warning', |
|||
}) |
|||
await delCraft(ids) |
|||
FtMessage.success('删除成功') |
|||
tableRef.value?.initData() |
|||
} |
|||
|
|||
// 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(() => { |
|||
startCraft({ heatId: heatId.value }).then(() => { |
|||
console.log('开始执行') |
|||
ElMessage.success('工艺已开始执行') |
|||
heatVisible.value = false |
|||
// 看执行状态 |
|||
craftStatusRef.value?.showDialog() |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
const sourceData = ref<any>({}) |
|||
const addVisible = ref(false) |
|||
const edit = (selectedRows: any) => { |
|||
sourceData.value = selectedRows[0] |
|||
addVisible.value = true |
|||
} |
|||
|
|||
const returnOre = () => { |
|||
router.push('/ore') |
|||
const add = () => { |
|||
sourceData.value = {} |
|||
addVisible.value = true |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="component-page"> |
|||
<section class="flex items-center h-20 gap-3 pl-3"> |
|||
<FtButton type="primary" @click="onAddCraft"> |
|||
添加工艺 |
|||
</FtButton> |
|||
<FtButton type="primary" :disabled="multipleSelection.length !== 1" @click="onEditCraft"> |
|||
编辑工艺 |
|||
</FtButton> |
|||
<FtButton :disabled="!multipleSelection.length" @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> |
|||
|
|||
<AddCraft v-if="addCraftVisible" :source-data @ok="addCraftVisible = false;queryCrafList()" @cancel="addCraftVisible = false" /> |
|||
<AddCraftDialog ref="addCraftRef" @ok="queryCrafList" /> |
|||
<!-- 执行工艺，选择加热区 --> |
|||
<FtDialog v-model="heatVisible" title="添加矿石" width="30%" :ok-handle="onStart" @cancel="heatVisible = false"> |
|||
<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> |
|||
</FtDialog> |
|||
<CraftStatus ref="craftStatusRef" /> |
|||
<div class="return-ore"> |
|||
<FtButton @click="returnOre"> |
|||
返回 |
|||
</FtButton> |
|||
</div> |
|||
<div> |
|||
<FtTable ref="tableRef" has-header has-page :columns="columns" :btn-list="btnList" :get-data-fn="getCraftList" @add="add" @edit="edit" @del="del" /> |
|||
<AddCraft v-if="addVisible" :source-data @ok="addVisible = false;tableRef?.initData()" @cancel="addVisible = false" /> |
|||
</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 scoped lang="scss"> |
|||
|
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue