graphite-digestion-web/src/views/craft/index.vue

<script lang="ts" setup>
import type { AddCraftType, Craft } from './craftType'
import { createCraft, delCraft, getCraftList, setCraft, startCraft, updateCraft } from '@/apis/crafts'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue'
import AddCraftDialog from './AddCraftDialog.vue'

const tableData = ref([])
const addCraftRef = ref<AddCraftType | null>(null)
const selectable = ref()
const multipleSelection = ref<Craft[]>()
const heatVisible = ref(false)
const heatId = ref()
const oresId = 1
onMounted(() => {
  queryCrafList()
})

const queryCrafList = () => {
  const params = {
    oresId: 1,
  }
  getCraftList(params).then((res) => {
    tableData.value = res
  })
}

const onAddCraft = () => {
  if (addCraftRef.value) {
    addCraftRef.value.openDialog()
  }
}

const onEditCraft = () => {
  if (addCraftRef.value && multipleSelection.value) {
    addCraftRef.value.editDialog(multipleSelection.value[0])
  }
}

const handleSelectionChange = (rows: Craft[]) => {
  if (rows && rows.length) {
    console.log('rows---', rows)
    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 confirmCraftEdit = (craft: Craft) => {
  // const req = createCraft({ name: craft.name, steps: craft.steps, oresId })
  let req
  if (craft.id) {
    req = updateCraft(craft)
  }
  else {
    req = createCraft({ name: craft.name, steps: craft.steps, oresId })
  }
  req.then(() => {
    ElMessage.success('保存成功')
    queryCrafList()
    if (addCraftRef.value) {
      addCraftRef.value.closeDialog()
    }
  })
}

// 开始执行工艺
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
        })
      })
    }
  }
}
</script>

<template>
  <div class="component-page">
    <section class="flex items-center h-20 gap-3 pl-3">
      <el-button type="primary" size="small" @click="onAddCraft">
        添加工艺
      </el-button>
      <el-button type="primary" size="small" @click="onEditCraft">
        编辑工艺
      </el-button>
      <el-button type="primary" size="small" @click="onDelCraft">
        删除工艺
      </el-button>
      <el-button type="primary" size="small" @click="onSelectHeatId">
        执行工艺
      </el-button>
    </section>
    <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>
    </main>
    <AddCraftDialog ref="addCraftRef" @ok="confirmCraftEdit" />
    <!-- 执行工艺，选择加热区 -->
    <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">
          <el-option v-for="el in 6" :key="el" :label="`加热区${el}`" :value="el" />
        </el-select>
      </div>
      <div style="display: flex; justify-content: center;align-items: center; height:100px">
        <el-button type="primary" @click="onStart">
          开始执行
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>