7 changed files with 221 additions and 374 deletions
-
2src/apis/crafts.ts
-
5src/components/craft/AddCraft/index.vue
-
17src/components/home/ExecuteCraft/index.vue
-
8src/components/home/Tube/index.vue
-
15src/router/routes.ts
-
255src/views/craft/index.vue
-
129src/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 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 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 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( |
|
||||
'确认删除选中的数据吗？', |
|
||||
'确认提示', |
|
||||
{ |
|
||||
|
const del = async (selectedRows: any) => { |
||||
|
const ids = selectedRows.map((item: any) => item.id) |
||||
|
await ElMessageBox.confirm('确定删除当前选中的行?', '消息', { |
||||
confirmButtonText: '确认', |
confirmButtonText: '确认', |
||||
cancelButtonText: '取消', |
cancelButtonText: '取消', |
||||
type: 'warning', |
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() |
|
||||
}) |
}) |
||||
|
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> |
</script> |
||||
|
|
||||
<template> |
<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> |
</div> |
||||
</template> |
</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> |
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue