process_sheet/vue/src/views/workorder/Edit.vue

<template>
  <div class="page-card" v-loading="loading">
    <el-form :model="form" label-width="90px" style="max-width:880px">
      <el-form-item label="工单号"><el-input v-model="form.no" /></el-form-item>
      <el-form-item label="产品">
        <el-select
          v-model="form.product_id"
          filterable
          clearable
          placeholder="可不选，选择后带出名称和工序"
          style="width:100%"
          @change="onProduct"
        >
          <el-option v-for="item in products" :key="item.id" :label="item.name + ' / ' + item.code" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="form.product_name" placeholder="选择产品后自动带出，不选产品则手动填写" />
      </el-form-item>
      <el-form-item label="规格">
        <el-input v-model="form.spec" placeholder="选择产品后自动带出，也可手动填写" />
      </el-form-item>
      <el-form-item label="批次"><el-input v-model="form.batch_no" /></el-form-item>
      <el-form-item label="客户"><el-input v-model="form.customer" /></el-form-item>
      <el-form-item label="计划日期"><el-date-picker v-model="form.plan_date" value-format="YYYY-MM-DD" /></el-form-item>
      <el-form-item label="备注"><el-input v-model="form.remark" type="textarea" /></el-form-item>
      <el-form-item label="工序">
        <ProcessEditor v-model="form.processes" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="saving" @click="onSave">保存</el-button>
        <el-button v-if="form.id && hasPerms('print.do')" type="success" @click="openPrint({ bizType: 'workorder', bizId: form.id, no: form.no, name: form.product_name })">套打</el-button>
        <el-button v-if="form.id && hasPerms('workorder.delete')" type="danger" plain @click="onDel">删除</el-button>
        <el-button @click="$router.push('/workorders')">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import ProcessEditor from '@/components/ProcessEditor.vue'
import { productInfo, productList, workorderDel, workorderInfo, workorderSave } from '@/api/ps'
import { openPrint } from '@/utils/print'
import { hasPerms } from '@/utils/auth'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const saving = ref(false)
const products = ref([])
const form = reactive({
  id: 0,
  no: '',
  product_id: '',
  product_name: '',
  spec: '',
  batch_no: '',
  customer: '',
  plan_date: '',
  remark: '',
  status: 'draft',
  processes: [],
})

onMounted(async () => {
  const list = await productList({ limit: 200 })
  products.value = list.rows || []
  if (!route.params.id) {
    return
  }
  loading.value = true
  try {
    const row = await workorderInfo(route.params.id)
    Object.assign(form, row)
    form.product_id = row.product_id || ''
    form.product_name = row.product_name || (row.product && row.product.name) || ''
    form.spec = row.spec || (row.product && row.product.spec) || ''
    form.processes = row.processes || []
  } finally {
    loading.value = false
  }
})

async function onProduct(id) {
  if (!id) {
    return
  }
  const row = await productInfo(id)
  form.product_name = row.name || ''
  form.spec = row.spec || ''
  if (form.processes && form.processes.length) {
    return
  }
  form.processes = (row.processes || []).map((item) => ({
    seq: item.seq,
    code: item.code,
    name: item.name,
    workstation: item.workstation,
    standard_time: item.standard_time,
    qc_points: item.qc_points,
    remark: item.remark,
  }))
}

async function onDel() {
  await ElMessageBox.confirm('删除后不可恢复，确定删除该工单？', '删除工单')
  await workorderDel(form.id)
  ElMessage.success('已删除')
  router.push('/workorders')
}

async function onSave() {
  if (!String(form.no || '').trim()) {
    ElMessage.warning('请填写工单号')
    return
  }
  if (!form.product_id && !String(form.product_name || '').trim()) {
    ElMessage.warning('请选择产品或填写名称')
    return
  }
  saving.value = true
  try {
    const { qty, sheet_qty, product, ...rest } = form
    await workorderSave({
      ...rest,
      product_id: Number(form.product_id) || 0,
      product_name: String(form.product_name || '').trim(),
    })
    ElMessage.success('已保存')
    router.push('/workorders')
  } finally {
    saving.value = false
  }
}
</script>