From 1e6be8cd76db988a178e832cda9cd82612fb6060 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Fri, 27 Mar 2026 09:57:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(aps):=20=E6=96=B0=E5=A2=9E=E6=8E=92?=
 =?UTF-8?q?=E4=BA=A7=E5=8D=95=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加排产单主表和明细表的API接口
实现排产单列表、新增、修改、删除功能
添加排产单明细表单和列表展示组件
---
 klp-ui/src/api/aps/planDetail.js              |  44 ++
 klp-ui/src/api/aps/planSheet.js               |  44 ++
 .../views/aps/planSheet/PlanDetailForm.vue    | 234 +++++++++++
 klp-ui/src/views/aps/planSheet/detail.vue     | 342 ++++++++++++++++
 klp-ui/src/views/aps/planSheet/index.vue      | 375 ++++++++++++++++++
 5 files changed, 1039 insertions(+)
 create mode 100644 klp-ui/src/api/aps/planDetail.js
 create mode 100644 klp-ui/src/api/aps/planSheet.js
 create mode 100644 klp-ui/src/views/aps/planSheet/PlanDetailForm.vue
 create mode 100644 klp-ui/src/views/aps/planSheet/detail.vue
 create mode 100644 klp-ui/src/views/aps/planSheet/index.vue

diff --git a/klp-ui/src/api/aps/planDetail.js b/klp-ui/src/api/aps/planDetail.js
new file mode 100644
index 00000000..50aa582b
--- /dev/null
+++ b/klp-ui/src/api/aps/planDetail.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询排产单明细列表
+export function listPlanDetail(query) {
+  return request({
+    url: '/aps/planDetail/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询排产单明细详细
+export function getPlanDetail(planDetailId) {
+  return request({
+    url: '/aps/planDetail/' + planDetailId,
+    method: 'get'
+  })
+}
+
+// 新增排产单明细
+export function addPlanDetail(data) {
+  return request({
+    url: '/aps/planDetail',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改排产单明细
+export function updatePlanDetail(data) {
+  return request({
+    url: '/aps/planDetail',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除排产单明细
+export function delPlanDetail(planDetailId) {
+  return request({
+    url: '/aps/planDetail/' + planDetailId,
+    method: 'delete'
+  })
+}
diff --git a/klp-ui/src/api/aps/planSheet.js b/klp-ui/src/api/aps/planSheet.js
new file mode 100644
index 00000000..13e4d72e
--- /dev/null
+++ b/klp-ui/src/api/aps/planSheet.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询排产单主列表
+export function listPlanSheet(query) {
+  return request({
+    url: '/aps/planSheet/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询排产单主详细
+export function getPlanSheet(planSheetId) {
+  return request({
+    url: '/aps/planSheet/' + planSheetId,
+    method: 'get'
+  })
+}
+
+// 新增排产单主
+export function addPlanSheet(data) {
+  return request({
+    url: '/aps/planSheet',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改排产单主
+export function updatePlanSheet(data) {
+  return request({
+    url: '/aps/planSheet',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除排产单主
+export function delPlanSheet(planSheetId) {
+  return request({
+    url: '/aps/planSheet/' + planSheetId,
+    method: 'delete'
+  })
+}
diff --git a/klp-ui/src/views/aps/planSheet/PlanDetailForm.vue b/klp-ui/src/views/aps/planSheet/PlanDetailForm.vue
new file mode 100644
index 00000000..311212a2
--- /dev/null
+++ b/klp-ui/src/views/aps/planSheet/PlanDetailForm.vue
@@ -0,0 +1,234 @@
+<template>
+  <el-form ref="form" :model="formData" :rules="rules" label-width="60px">
+    <el-collapse v-model="activeNames" :accordion="false">
+      <!-- 订单信息组 -->
+      <el-collapse-item title="订单信息" name="1">
+        <!-- <el-form-item label="订单ID" prop="orderId">
+          <el-input v-model="formData.orderId" placeholder="请输入订单ID" />
+        </el-form-item> -->
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="订单号" prop="orderCode">
+              <el-input v-model="formData.orderCode" placeholder="请输入订单号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="合同号" prop="contractCode">
+              <el-input v-model="formData.contractCode" placeholder="请输入合同号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="客户" prop="customerName">
+              <el-input v-model="formData.customerName" placeholder="请输入客户名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="业务员" prop="salesman">
+              <el-input v-model="formData.salesman" placeholder="请输入业务员姓名" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-collapse-item>
+
+      <!-- 原料信息组 -->
+      <el-collapse-item title="原料信息" name="2">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="厂家" prop="rawManufacturer">
+              <el-input v-model="formData.rawManufacturer" placeholder="请输入原料厂家" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="材质" prop="rawMaterial">
+              <el-input v-model="formData.rawMaterial" placeholder="请输入原料材质" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="厚度" prop="rawThick">
+              <el-input v-model="formData.rawThick" placeholder="请输入原料厚度(mm)" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="宽度" prop="rawWidth">
+              <el-input v-model="formData.rawWidth" placeholder="请输入原料宽度(mm)" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-collapse-item>
+
+      <!-- 成品信息组 -->
+      <el-collapse-item title="成品信息" name="3">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="成品名称" prop="productName">
+              <el-input v-model="formData.productName" placeholder="请输入成品名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="材质" prop="productMaterial">
+              <el-input v-model="formData.productMaterial" placeholder="请输入成品材质" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="镀层(g)" prop="coatingG">
+              <el-input v-model="formData.coatingG" placeholder="请输入镀层重量" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="成品宽度" prop="productWidth">
+              <el-input v-model="formData.productWidth" placeholder="请输入成品宽度" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="轧制厚度" prop="rollingThick">
+              <el-input v-model="formData.rollingThick" placeholder="请输入轧制厚度" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="标签厚度" prop="markCoatThick">
+              <el-input v-model="formData.markCoatThick" placeholder="请输入标签厚度" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="24">
+            <el-form-item label="吨钢长度区间" prop="tonSteelLengthRange">
+              <el-input v-model="formData.tonSteelLengthRange" placeholder="请输入吨钢长度区间(m)" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="数量" prop="planQty">
+              <el-input v-model="formData.planQty" placeholder="请输入成品数量" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="重量" prop="planWeight">
+              <el-input v-model="formData.planWeight" placeholder="请输入成品重量" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="表面处理" prop="surfaceTreatment">
+              <el-input v-model="formData.surfaceTreatment" placeholder="请输入表面处理要求" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="切边要求" prop="widthReq">
+              <el-input v-model="formData.widthReq" placeholder="请输入切边要求" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="包装要求" prop="productPackaging">
+              <el-input v-model="formData.productPackaging" placeholder="请输入包装要求" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="宽度要求" prop="productEdgeReq">
+              <el-input v-model="formData.productEdgeReq" placeholder="请输入宽度要求" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="用途" prop="usageReq">
+              <el-input v-model="formData.usageReq" placeholder="请输入成品用途" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-collapse-item>
+
+      <!-- 其他信息组 -->
+      <el-collapse-item title="生产信息" name="4">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="开始时间" prop="startTime">
+              <el-date-picker clearable v-model="formData.startTime" style="width: 100%" type="datetime"
+                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择生产开始时间">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="结束时间" prop="endTime">
+              <el-date-picker clearable v-model="formData.endTime" style="width: 100%" type="datetime"
+                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择生产结束时间">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="后处理" prop="postProcess">
+              <el-input v-model="formData.postProcess" placeholder="请输入后处理要求" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="下工序" prop="nextProcess">
+              <el-input v-model="formData.nextProcess" placeholder="请输入下工序" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="取样" prop="sampleReq">
+              <el-input v-model="formData.sampleReq" placeholder="请输入取样要求" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注信息" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-collapse-item>
+    </el-collapse>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: "PlanDetailForm",
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    planSheetId: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    formData: {
+      get() {
+        return this.value || {};
+      },
+      set(newVal) {
+        const data = { ...newVal, planSheetId: this.planSheetId };
+        this.$emit('input', data);
+        this.$emit('change', data);
+      }
+    }
+  },
+  data() {
+    return {
+      // 折叠面板默认展开项（全部打开）
+      activeNames: ['1', '2', '3', '4'],
+      // 表单校验
+      rules: {
+        planSheetId: [
+          { required: true, message: "关联排产单ID不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  methods: {
+    /** 表单验证 */
+    validate(callback) {
+      return this.$refs.form.validate(callback);
+    },
+    reset() {
+      this.$refs["form"].resetFields();
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/klp-ui/src/views/aps/planSheet/detail.vue b/klp-ui/src/views/aps/planSheet/detail.vue
new file mode 100644
index 00000000..1aba4853
--- /dev/null
+++ b/klp-ui/src/views/aps/planSheet/detail.vue
@@ -0,0 +1,342 @@
+<template>
+  <div>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
+      </el-col>
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+        >修改</el-button>
+      </el-col> -->
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
+          @click="handleDelete">删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="info" plain icon="el-icon-refresh" size="mini" @click="getList">刷新</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
+      </el-col>
+    </el-row>
+
+    <el-table v-loading="loading" :data="planDetailList" @selection-change="handleSelectionChange"
+      @row-click="handleRowClick">
+      <el-table-column label="订单号" align="center" prop="orderCode" />
+      <!-- <el-table-column label="客户" align="center" prop="customerName" /> -->
+      <!-- <el-table-column label="业务员" align="center" prop="salesman" /> -->
+      <el-table-column label="原料信息" align="center" prop="rawManufacturer">
+        <template slot-scope="scope">
+          {{ formatterRaw(scope.row) }}
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="原料材质" align="center" prop="rawMaterial" />
+      <el-table-column label="原料厚度" align="center" prop="rawThick" />
+      <el-table-column label="原料宽度" align="center" prop="rawWidth" /> -->
+      <el-table-column label="成品名称" align="center" prop="productName" />
+      <el-table-column label="用途" align="center" prop="usageReq" />
+      <el-table-column label="后处理" align="center" prop="postProcess" />
+      <!-- <el-table-column label="下工序" align="center" prop="nextProcess" /> -->
+      <el-table-column label="取样" align="center" prop="sampleReq" />
+      <el-table-column label="开始时间" align="center" prop="startTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.startTime, '{y}.{m}.{d}') }} ~ {{ parseTime(scope.row.endTime, '{y}.{m}.{d}')
+            }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <!-- <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+          >修改</el-button> -->
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
+
+    <!-- 添加或修改排产单明细对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <plan-detail-form ref="planDetailForm" v-model="form" :plan-sheet-id="planSheetId" />
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listPlanDetail, getPlanDetail, delPlanDetail, addPlanDetail, updatePlanDetail } from "@/api/aps/planDetail";
+import PlanDetailForm from "./PlanDetailForm";
+
+export default {
+  name: "PlanDetail",
+  components: {
+    PlanDetailForm
+  },
+  props: {
+    planSheetId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 排产单明细表格数据
+      planDetailList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        planSheetId: this.planSheetId,
+        bizSeqNo: undefined,
+        orderId: undefined,
+        orderCode: undefined,
+        contractCode: undefined,
+        customerName: undefined,
+        salesman: undefined,
+        rawManufacturer: undefined,
+        rawMaterial: undefined,
+        rawThick: undefined,
+        rawWidth: undefined,
+        rawMaterialId: undefined,
+        rawCoilNos: undefined,
+        rawLocation: undefined,
+        rawPackaging: undefined,
+        rawEdgeReq: undefined,
+        rawCoatingType: undefined,
+        rawNetWeight: undefined,
+        productName: undefined,
+        productMaterial: undefined,
+        coatingG: undefined,
+        productWidth: undefined,
+        rollingThick: undefined,
+        markCoatThick: undefined,
+        tonSteelLengthRange: undefined,
+        planQty: undefined,
+        planWeight: undefined,
+        surfaceTreatment: undefined,
+        widthReq: undefined,
+        productPackaging: undefined,
+        productEdgeReq: undefined,
+        usageReq: undefined,
+        postProcess: undefined,
+        nextProcess: undefined,
+        sampleReq: undefined,
+        startTime: undefined,
+        endTime: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        planSheetId: [
+          { required: true, message: "关联排产单ID不能为空", trigger: "blur" }
+        ],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询排产单明细列表 */
+    getList() {
+      this.loading = true;
+      listPlanDetail(this.queryParams).then(response => {
+        this.planDetailList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    formatterRaw(row) {
+      // 格式化原料信息的显示
+      const { rawManufacturer, rawMaterial, rawThick, rawWidth } = row;
+      let rawInfo = "";
+      if (rawManufacturer) {
+        rawInfo += rawManufacturer;
+      }
+      if (rawMaterial) {
+        rawInfo += '[' + rawMaterial + "]";
+      }
+      if (rawThick && rawWidth) {
+        rawInfo += '(' + rawThick + "*" + rawWidth + ')';
+      } 
+      return rawInfo;
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        planDetailId: undefined,
+        planSheetId: this.planSheetId,
+        bizSeqNo: undefined,
+        orderId: undefined,
+        orderCode: undefined,
+        contractCode: undefined,
+        customerName: undefined,
+        salesman: undefined,
+        rawManufacturer: undefined,
+        rawMaterial: undefined,
+        rawThick: undefined,
+        rawWidth: undefined,
+        rawMaterialId: undefined,
+        rawCoilNos: undefined,
+        rawLocation: undefined,
+        rawPackaging: undefined,
+        rawEdgeReq: undefined,
+        rawCoatingType: undefined,
+        rawNetWeight: undefined,
+        productName: undefined,
+        productMaterial: undefined,
+        coatingG: undefined,
+        productWidth: undefined,
+        rollingThick: undefined,
+        markCoatThick: undefined,
+        tonSteelLengthRange: undefined,
+        planQty: undefined,
+        planWeight: undefined,
+        surfaceTreatment: undefined,
+        widthReq: undefined,
+        productPackaging: undefined,
+        productEdgeReq: undefined,
+        usageReq: undefined,
+        postProcess: undefined,
+        nextProcess: undefined,
+        sampleReq: undefined,
+        startTime: undefined,
+        endTime: undefined,
+        remark: undefined,
+        delFlag: undefined,
+        createBy: undefined,
+        updateBy: undefined,
+        createTime: undefined,
+        updateTime: undefined
+      };
+      // 重置表单
+      if (this.$refs["planDetailForm"]) {
+        this.$refs["planDetailForm"].reset();
+      }
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.planDetailId)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    // 表格行点击事件
+    handleRowClick(row) {
+      this.$emit('change', row);
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加排产单明细";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const planDetailId = row.planDetailId || this.ids
+      getPlanDetail(planDetailId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改排产单明细";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["planDetailForm"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.planDetailId != null) {
+            updatePlanDetail(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addPlanDetail(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const planDetailIds = row.planDetailId || this.ids;
+      this.$modal.confirm('是否确认删除排产单明细编号为"' + planDetailIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delPlanDetail(planDetailIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('aps/planDetail/export', {
+        ...this.queryParams
+      }, `planDetail_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>
diff --git a/klp-ui/src/views/aps/planSheet/index.vue b/klp-ui/src/views/aps/planSheet/index.vue
new file mode 100644
index 00000000..17eeb65a
--- /dev/null
+++ b/klp-ui/src/views/aps/planSheet/index.vue
@@ -0,0 +1,375 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="8">
+      <el-col :span="16">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+          label-width="68px">
+          <el-form-item label="排产日期" prop="planDate">
+            <el-date-picker clearable v-model="queryParams.planDate" type="date" value-format="yyyy-MM-dd"
+              placeholder="请选择排产日期">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="产线名称" prop="lineName">
+            <el-input v-model="queryParams.lineName" placeholder="请输入产线名称" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="排产单号" prop="planCode">
+            <el-input v-model="queryParams.planCode" placeholder="请输入排产单号" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="排产人" prop="scheduler">
+            <el-input v-model="queryParams.scheduler" placeholder="请输入排产人" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
+            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-table v-loading="loading" :data="planSheetList" height="600px" @row-click="handleRowClick">
+          <el-table-column label="排产日期" align="center" prop="planDate" width="180">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.planDate, '{y}-{m}-{d}') }}</span>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="产线ID" align="center" prop="lineId" /> -->
+          <el-table-column label="产线名称" align="center" prop="lineName" />
+          <el-table-column label="排产单号" align="center" prop="planCode" />
+          <!-- <el-table-column label="排产类型" align="center" prop="planType" /> -->
+          <el-table-column label="排产人" align="center" prop="scheduler" />
+          <el-table-column label="备注" align="center" prop="remark" />
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
+              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize" @pagination="getList" />
+
+        <PlanDetail v-if="currentPlanSheetId" ref="planDetail" :planSheetId="currentPlanSheetId"
+          @change="handlePlanDetailChange" />
+        <el-empty v-else class="appempty" description="选择排产单查看详情" />
+
+        <!-- 添加或修改排产单对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+            <el-form-item label="排产日期" prop="planDate">
+              <el-date-picker clearable v-model="form.planDate" type="date" value-format="yyyy-MM-dd"
+                placeholder="请选择排产日期">
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item label="产线名称" prop="lineName">
+              <el-select v-model="form.lineName" placeholder="请选择产线名称" filterable clearable>
+                <el-option v-for="item in dict.type.sys_lines" :key="item.value" :label="item.label"
+                  :value="item.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="排产单号" prop="planCode">
+              <el-input v-model="form.planCode" placeholder="请输入排产单号" />
+            </el-form-item>
+            <el-form-item label="排产人" prop="scheduler">
+              <el-input v-model="form.scheduler" placeholder="请输入排产人" />
+            </el-form-item>
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+            <el-button @click="cancel">取 消</el-button>
+          </div>
+        </el-dialog>
+      </el-col>
+
+      <el-col :span="8">
+        <div class="detail-form-container">
+          <div v-if="currentPlanDetail.planDetailId" class="detail-card">
+            <div class="card-header">
+              <span>排产明细信息</span>
+              <el-button type="primary" size="mini" @click="submitDetail">保存变更</el-button>
+            </div>
+            <div class="card-body">
+              <PlanDetailForm v-model="currentPlanDetail" :plan-sheet-id="currentPlanSheetId" />
+            </div>
+          </div>
+          <el-empty v-else description="选择排产单和明细行查看详情" />
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { listPlanSheet, getPlanSheet, delPlanSheet, addPlanSheet, updatePlanSheet } from "@/api/aps/planSheet";
+import { updatePlanDetail } from "@/api/aps/planDetail";
+import PlanDetail from "@/views/aps/planSheet/detail.vue";
+import PlanDetailForm from "@/views/aps/planSheet/PlanDetailForm.vue";
+
+export default {
+  name: "PlanSheet",
+  dicts: ['sys_lines'],
+  components: {
+    PlanDetail,
+    PlanDetailForm
+  },
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 当前选中的排产单ID
+      currentPlanSheetId: undefined,
+      // 当前选中的明细数据
+      currentPlanDetail: {},
+      // 排产单表格数据
+      planSheetList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        planDate: undefined,
+        lineId: undefined,
+        lineName: undefined,
+        planCode: undefined,
+        planType: undefined,
+        scheduler: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        planSheetId: [
+          { required: true, message: "排产单键ID不能为空", trigger: "blur" }
+        ],
+        planDate: [
+          { required: true, message: "排产日期不能为空", trigger: "blur" }
+        ],
+        lineId: [
+          { required: true, message: "产线ID不能为空", trigger: "blur" }
+        ],
+        lineName: [
+          { required: true, message: "产线名称不能为空", trigger: "blur" }
+        ],
+        planCode: [
+          { required: true, message: "排产单号不能为空", trigger: "blur" }
+        ],
+        planType: [
+          { required: true, message: "排产类型不能为空", trigger: "change" }
+        ],
+        scheduler: [
+          { required: true, message: "排产人不能为空", trigger: "blur" }
+        ],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询排产单列表 */
+    getList() {
+      this.loading = true;
+      listPlanSheet(this.queryParams).then(response => {
+        this.planSheetList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 点击排产单行，显示详情
+    handleRowClick(row) {
+      this.currentPlanSheetId = row.planSheetId;
+      this.currentPlanDetail = {};
+      this.$refs.planDetail.getList();
+    },
+    // 处理排产明细行点击事件
+    handlePlanDetailChange(row) {
+      this.currentPlanDetail = row;
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 提交排产明细变更
+    submitDetail() {
+      updatePlanDetail(this.currentPlanDetail).then(response => {
+        this.$message({
+          message: "变更保存成功",
+          type: "success"
+        });
+        this.handleQuery();
+      });
+    },
+    // 表单重置
+    reset() {
+      // 日期默认选中今天 yyyy-MM-dd格式，北京时间
+      // planCode与日期格式一致，添加-HHmmss
+      // 排产人默认当前登录用户 this.$store.getters.nickName
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, '0');
+      const day = String(now.getDate()).padStart(2, '0');
+      const hours = String(now.getHours()).padStart(2, '0');
+      const minutes = String(now.getMinutes()).padStart(2, '0');
+      const seconds = String(now.getSeconds()).padStart(2, '0');
+
+      const dateStr = `${year}-${month}-${day}`;
+      const timeStr = `${hours}${minutes}${seconds}`;
+
+      this.form = {
+        planSheetId: undefined,
+        planDate: dateStr,
+        lineId: undefined,
+        lineName: undefined,
+        planCode: `${dateStr}-${timeStr}`,
+        planType: undefined,
+        scheduler: this.$store.getters.nickName || undefined,
+        remark: undefined,
+        delFlag: undefined,
+        createBy: undefined,
+        updateBy: undefined,
+        createTime: undefined,
+        updateTime: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.planSheetId)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加排产单";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const planSheetId = row.planSheetId || this.ids
+      getPlanSheet(planSheetId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改排产单";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.planSheetId != null) {
+            updatePlanSheet(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addPlanSheet(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const planSheetIds = row.planSheetId || this.ids;
+      this.$modal.confirm('是否确认删除排产单编号为"' + planSheetIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delPlanSheet(planSheetIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('aps/planSheet/export', {
+        ...this.queryParams
+      }, `planSheet_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>
+
+<style scoped>
+.detail-form-container {
+  height: 100%;
+  padding: 8px;
+}
+
+.detail-card {
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-header {
+  padding: 12px 16px;
+  border-bottom: 1px solid #ebeef5;
+  background-color: #fafafa;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-body {
+  padding: 16px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.appempty {
+  margin-top: 20px;
+}
+</style>