tiandihe/frontend/src/views/TrackCoil.vue

<template>
  <div>
    <div class="panel" style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
      <el-button size="small" @click="loadCoils">刷新</el-button>
      <el-button size="small" type="primary" icon="el-icon-plus" @click="openAdd">新增钢卷</el-button>
      <el-button size="small" type="danger" icon="el-icon-delete" @click="clearAll">清空全部</el-button>
      <span style="flex:1"></span>
      <el-button size="small" type="warning" @click="triggerSignal1">模拟信号1(入口)</el-button>
      <el-button size="small" type="success" @click="triggerSignal2">模拟信号2(焊接完成)</el-button>
      <span style="font-size:12px;color:#666">提示: 追踪4个位置,按钢卷号升序(最小的先进产线)</span>
    </div>

    <div class="panel" style="padding:0;margin-top:10px">
      <el-table :data="coils" stripe border size="small" v-loading="loading" element-loading-text="加载中...">
        <el-table-column prop="position" label="Position" width="90" />
        <el-table-column prop="coilid" label="钢卷号" width="148" />
        <el-table-column prop="sequencenb" label="顺序号" width="90" />
        <el-table-column prop="rollprogramnb" label="批次号" width="108" />
        <el-table-column prop="created_dt" label="创建时间" width="160" />
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="{row}">
            <el-button type="text" size="mini" @click.stop="openEdit(row)">编辑</el-button>
            <el-button type="text" size="mini" style="color:#e67e22" @click.stop="moveUp(row)" :disabled="row.position === 1">上移</el-button>
            <el-button type="text" size="mini" style="color:#e67e22" @click.stop="moveDown(row)" :disabled="row.position === 4">下移</el-button>
            <el-button type="text" size="mini" style="color:#c0392b" @click.stop="doDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="400px" :close-on-click-modal="false">
      <el-form :model="form" :rules="rules" ref="trackForm" label-width="80px" size="small">
        <el-form-item label="钢卷号" prop="coilid">
          <el-input v-model="form.coilid" placeholder="12位钢卷号" />
        </el-form-item>
        <el-form-item label="顺序号" prop="sequencenb">
          <el-input-number v-model="form.sequencenb" :controls="false" style="width:100%" />
        </el-form-item>
        <el-form-item label="批次号" prop="rollprogramnb">
          <el-input-number v-model="form.rollprogramnb" :controls="false" style="width:100%" />
        </el-form-item>
        <el-form-item label="位置" prop="position">
          <el-input-number v-model="form.position" :min="1" :max="4" :controls="false" style="width:100%" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" size="small" @click="doSave" :loading="saving">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { trackApi } from '../api/index'

export default {
  name: 'TrackCoil',
  data() {
    return {
      loading: false,
      saving: false,
      coils: [],
      dialogVisible: false,
      isEdit: false,
      form: {
        id: null,
        coilid: '',
        sequencenb: 0,
        rollprogramnb: 0,
        position: 1
      },
      rules: {
        coilid: [
          { required: true, message: '钢卷号不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    dialogTitle() {
      return this.isEdit ? '编辑钢卷' : '新增钢卷'
    }
  },
  created() {
    this.loadCoils()
  },
  methods: {
    async loadCoils() {
      this.loading = true
      try {
        const res = await trackApi.getCoils()
        this.coils = res.data || []
      } catch (e) {
        this.$message.error(e.message)
      } finally {
        this.loading = false
      }
    },
    async fetchRangeCoils() {
      try {
        const res = await trackApi.getCoilsByRange(1, 5)
        const coils = res.data || []
        for (const coil of coils) {
          await trackApi.addCoil({
            coilid: coil.coilid,
            sequencenb: coil.sequencenb,
            rollprogramnb: coil.rollprogramnb
          })
        }
        this.$message.success(`已添加 ${coils.length} 个钢卷`)
        this.loadCoils()
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    openAdd() {
      this.isEdit = false
      this.form = {
        id: null,
        coilid: '',
        sequencenb: 0,
        rollprogramnb: 0,
        position: (this.coils.length || 0) + 1
      }
      this.dialogVisible = true
      this.$nextTick(() => this.$refs.trackForm && this.$refs.trackForm.clearValidate())
    },
    openEdit(row) {
      this.isEdit = true
      this.form = { ...row }
      this.dialogVisible = true
      this.$nextTick(() => this.$refs.trackForm && this.$refs.trackForm.clearValidate())
    },
    doSave() {
      this.$refs.trackForm.validate(async valid => {
        if (!valid) return
        this.saving = true
        try {
          if (this.isEdit) {
            await trackApi.updateCoil(this.form.id, {
              coilid: this.form.coilid,
              sequencenb: this.form.sequencenb,
              rollprogramnb: this.form.rollprogramnb,
              position: this.form.position
            })
            this.$message.success('更新成功')
          } else {
            await trackApi.addCoil({
              coilid: this.form.coilid,
              sequencenb: this.form.sequencenb,
              rollprogramnb: this.form.rollprogramnb
            })
            this.$message.success('添加成功')
          }
          this.dialogVisible = false
          this.loadCoils()
        } catch (e) {
          this.$message.error(e.message)
        } finally {
          this.saving = false
        }
      })
    },
    async doDelete(row) {
      this.$confirm(`确认删除钢卷 [${row.coilid}]？`, '删除确认', {
        confirmButtonText: '确认删除', cancelButtonText: '取消', type: 'warning'
      }).then(async () => {
        try {
          await trackApi.deleteCoil(row.id)
          this.$message.success('删除成功')
          this.loadCoils()
        } catch (e) {
          this.$message.error(e.message)
        }
      }).catch(() => {})
    },
    async clearAll() {
      this.$confirm('确认清空所有钢卷？', '清空确认', {
        confirmButtonText: '确认清空', cancelButtonText: '取消', type: 'warning'
      }).then(async () => {
        try {
          await trackApi.clearCoils()
          this.$message.success('清空成功')
          this.loadCoils()
        } catch (e) {
          this.$message.error(e.message)
        }
      }).catch(() => {})
    },
    async moveUp(row) {
      if (row.position <= 1) return
      const currentPos = row.position
      const other = this.coils.find(c => c.position === currentPos - 1)
      if (other) {
        await trackApi.updateCoil(row.id, { ...row, position: currentPos - 1 })
        await trackApi.updateCoil(other.id, { ...other, position: currentPos })
        this.loadCoils()
      }
    },
    async moveDown(row) {
      if (row.position >= 5) return
      const currentPos = row.position
      const other = this.coils.find(c => c.position === currentPos + 1)
      if (other) {
        await trackApi.updateCoil(row.id, { ...row, position: currentPos + 1 })
        await trackApi.updateCoil(other.id, { ...other, position: currentPos })
        this.loadCoils()
      }
    },
    async triggerSignal1() {
      try {
        await trackApi.simulateSignal1()
        this.$message.success('信号1已触发 - 已获取下一批钢卷到临时表')
        this.loadCoils()
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    async triggerSignal2() {
      try {
        await trackApi.simulateSignal2()
        this.$message.success('信号2已触发 - 已更新追踪表')
        this.loadCoils()
      } catch (e) {
        this.$message.error(e.message)
      }
    }
  }
}
</script>