bj_power/bj_power_mes/frontend/src/pages/DailyPlan.vue

<template>
  <el-card>
    <el-form inline>
      <el-form-item label="工单号">
        <el-select v-model="query.orderNo" filterable allow-create clearable placeholder="请选择/输入工单号" style="width:220px" @change="load">
          <el-option v-for="w in workOrders" :key="w.workOrderNo" :label="w.workOrderNo" :value="w.workOrderNo" />
        </el-select>
      </el-form-item>
      <el-form-item label="排产日期">
        <el-date-picker v-model="query.planDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" @change="load" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="load">查询</el-button>
        <el-button v-if="can('produce.workorder:dailyplan')" type="success" @click="openAdd">新建排产</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" border size="small">
      <el-table-column prop="orderNo" label="工单号" min-width="180" />
      <el-table-column prop="planDate" label="排产日期" width="120" />
      <el-table-column prop="planQty" label="计划数量" width="100" />
      <el-table-column prop="completedQty" label="已完成" width="90" />
      <el-table-column label="状态" width="100">
        <template #default="{ row }">{{ statusText(row.status) }}</template>
      </el-table-column>
      <el-table-column prop="operator" label="操作人" min-width="90" />
      <el-table-column label="操作" width="160">
        <template #default="{ row }">
          <el-button v-if="can('produce.workorder:dailyplan')" size="small" @click="openEdit(row)">编辑</el-button>
          <el-button v-if="can('produce.workorder:dailyplan')" size="small" type="danger" @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialog.show" title="新建/编辑排产" width="460px">
      <el-form :model="dialog" label-width="90px">
        <el-form-item label="工单号">
          <el-select v-model="dialog.orderNo" filterable allow-create placeholder="请选择/输入工单号" style="width:100%">
            <el-option v-for="w in workOrders" :key="w.workOrderNo" :label="w.workOrderNo" :value="w.workOrderNo" />
          </el-select>
        </el-form-item>
        <el-form-item label="排产日期">
          <el-date-picker v-model="dialog.planDate" type="date" value-format="YYYY-MM-DD" style="width:100%" />
        </el-form-item>
        <el-form-item label="计划数量">
          <el-input-number v-model="dialog.planQty" :min="1" style="width:100%" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialog.show=false">取消</el-button>
        <el-button v-if="can('produce.workorder:dailyplan')" type="primary" @click="save">保存</el-button>
      </template>
    </el-dialog>
  </el-card>
  <PageHelp :data="helpDailyPlan" />
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '../utils/request'
import { can } from '../utils/perm'
import PageHelp from '../components/PageHelp.vue'
import { helpDailyPlan } from '../help'

const query = reactive({ orderNo: '', planDate: '' })
const list = ref([])
const workOrders = ref([])
const dialog = reactive({ show: false, id: 0, orderNo: '', planDate: '', planQty: 1 })

const statusOptions = [
  { v: 'PENDING', l: '待排产' }, { v: 'CONFIRMED', l: '已确认' }
]
const statusText = (s) => (statusOptions.find((x) => x.v === s) || {}).l || s

async function load() {
  list.value = (await request.get('/daily-plans', { params: query })) || []
}
function openAdd() {
  Object.assign(dialog, { show: true, id: 0, orderNo: '', planDate: new Date().toISOString().slice(0, 10), planQty: 1 })
}
function openEdit(row) {
  Object.assign(dialog, { show: true, id: row.id, orderNo: row.orderNo, planDate: row.planDate, planQty: row.planQty })
}
async function save() {
  if (!dialog.orderNo || !dialog.planDate) return ElMessage.warning('请选择工单号和排产日期')
  if (dialog.id) await request.put(`/daily-plans/${dialog.id}`, { ...dialog })
  else await request.post('/daily-plans', { orderNo: dialog.orderNo, planDate: dialog.planDate, planQty: dialog.planQty })
  ElMessage.success('保存成功')
  dialog.show = false
  load()
}
async function del(row) {
  await ElMessageBox.confirm('确认删除该排产？', '提示', { type: 'warning' })
  await request.delete(`/daily-plans/${row.id}`)
  load()
}
onMounted(async () => {
  workOrders.value = (await request.get('/work-orders')) || []
  load()
})
</script>