From 6179ccc32baab98160cea177bb3086c565b46428 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=9C=E9=9B=AA?= <1617763071@qq.com>
Date: Fri, 20 Mar 2026 09:07:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=96=E5=8D=8F=E7=89=B9=E6=AE=8A=E8=BF=87?=
 =?UTF-8?q?=E7=A8=8B=E8=A1=A8=E4=B8=8E=E4=BB=BB=E5=8A=A1=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/oem/inplan.js                         |  45 ++++
 .../components/inPlantProcessDetails.vue      | 159 +++++++++++
 .../components/inPlantProcessHandle.vue       | 252 ++++++++++++++++++
 src/views/oem/proTask/inPlantProcessOem.vue   | 142 ++++++++--
 4 files changed, 577 insertions(+), 21 deletions(-)
 create mode 100644 src/api/oem/inplan.js
 create mode 100644 src/views/oem/proTask/components/inPlantProcessDetails.vue
 create mode 100644 src/views/oem/proTask/components/inPlantProcessHandle.vue

diff --git a/src/api/oem/inplan.js b/src/api/oem/inplan.js
new file mode 100644
index 0000000..32bb37f
--- /dev/null
+++ b/src/api/oem/inplan.js
@@ -0,0 +1,45 @@
+
+import request from '@/axios';
+
+export const pageList = (current, size, params) => {
+  return request({
+    url: '/blade-desk/mesOemTaskBill/page',
+    method: 'get',
+    params: {
+      ...params,
+      current,
+      size,
+    },
+  });
+};
+
+//详情
+export const detailItem = (params)=>{
+  return request({
+    url: '/blade-desk/dsTaskBill/listOemFillingDetail',
+    method: 'get',
+    params: params
+  });
+}
+
+//处理
+export const handleOemTaskBillItem = params => {
+  return request({
+    url: '/blade-desk/mesOemTaskBill/handleOemTaskBill',
+    method: 'post',
+    data: params,
+  });
+};
+
+//删除
+  export const removeItem = ids => {
+  return request({
+    url: '/blade-desk/mesOemTaskBill/remove',
+    method: 'post',
+    params: {
+      ids,
+    },
+  });
+};
+
+
diff --git a/src/views/oem/proTask/components/inPlantProcessDetails.vue b/src/views/oem/proTask/components/inPlantProcessDetails.vue
new file mode 100644
index 0000000..a41ec8e
--- /dev/null
+++ b/src/views/oem/proTask/components/inPlantProcessDetails.vue
@@ -0,0 +1,159 @@
+<template>
+  <el-dialog title="详情" append-to-body :modelValue="openShow" width="40%" @close="closeDialog">
+    <!-- <avue-form :option="option"></avue-form> -->
+    <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" @on-load="onLoad">
+      <template #menu-left> </template>
+      <template #menu-right> </template>
+      <template #menu> </template>
+
+      <template #heatTreat> </template>
+    </avue-crud>
+    <!-- <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="closeDialog">取 消</el-button>
+        <el-button type="primary" @click="submit">确 定</el-button>
+      </span>
+    </template> -->
+  </el-dialog>
+</template>
+<script>
+import { detailItem} from '@/api/oem/inplan';
+// import { getDetail } from '@/api/processManagement/inPlantProcess';
+export default {
+  props: {
+    showDialog: {
+      type: Boolean,
+      default: false,
+    },
+    rowData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      openShow: false,
+      data: [],
+      loading: false,
+      option: {
+        columnSort: true,
+        tip: false,
+        // height: 'auto',
+        calcHeight: 32,
+        simplePage: false,
+        searchShow: true,
+        searchMenuSpan: 6,
+        searchIcon: true,
+        searchIndex: 3,
+        tree: false,
+        border: true,
+        index: true,
+        selection: false,
+        addBtn: false,
+        editBtn: false,
+        viewBtn: false,
+        delBtn: false,
+        editBtnText: '修改',
+        labelWidth: 120,
+        menuWidth: 80,
+        dialogWidth: 900,
+        dialogClickModal: false,
+        searchEnter: true,
+        excelBtn: false,
+        filterBtn: true,
+        searchShowBtn: false,
+        excelBtn: true,
+        showOverflowTooltip: true,
+        addBtnIcon: ' ',
+        viewBtnIcon: ' ',
+        delBtnIcon: ' ',
+        editBtnIcon: ' ',
+        gridBtn: false,
+        searchLabelPosition: 'left',
+        searchGutter: 24,
+        searchSpan: 6,
+        menuAlign: 'left',
+        gridBtn: false,
+        searchMenuPosition: 'right',
+        align: 'center',
+        header: false,
+        menu: false,
+        column: [
+          {
+            label: '事项',
+            prop: 'matter',
+            search: false,
+            sortable: true,
+            span: 12,
+          },
+          {
+            label: '描述',
+            prop: 'process',
+            search: false,
+            sortable: true,
+            span: 12,
+          },
+        ],
+      },
+    };
+  },
+  watch: {
+    showDialog(newVal) {
+      this.openShow = newVal;
+    }
+  },
+  mounted() {
+    this.openShow = this.showDialog;
+  },
+  methods: {
+    closeDialog() {
+      this.openShow = false;
+      this.$emit('closeDialog');
+    },
+    submit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          let params = {
+            id: this.$route.query.id,
+            approvalStatus: '',
+
+            // status: this.option.column[0].value,
+            // reason: this.option.column[1].value,
+          };
+          //   updateProcess(params).then((res) => {
+          //     if (res.code == 200) {
+          //       this.$message.success('操作成功');
+          //       this.closeDialog();
+          //     }
+          //   });
+        }
+      });
+    },
+    onLoad() {
+      this.loading = true;
+      
+      detailItem({ busId: this.rowData.id }).then(res => {
+        if (res.data && res.data.code === 200) {
+          this.data = res.data.data || [];
+        } else {
+          this.$message.error(res.data.msg || '获取数据失败');
+          this.data = [];
+        }
+        this.loading = false;
+      }).catch(error => {
+        console.error('获取详情数据失败:', error);
+        this.$message.error('获取数据失败');
+        this.data = [];
+        this.loading = false;
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+::v-deep(.el-dialog .el-dialog__body) {
+  padding-bottom: 20px !important;
+  padding-left: 20px !important;
+  padding-right: 20px !important;
+}
+</style>
diff --git a/src/views/oem/proTask/components/inPlantProcessHandle.vue b/src/views/oem/proTask/components/inPlantProcessHandle.vue
new file mode 100644
index 0000000..3c858ac
--- /dev/null
+++ b/src/views/oem/proTask/components/inPlantProcessHandle.vue
@@ -0,0 +1,252 @@
+<template>
+  <el-dialog title="处理" append-to-body :modelValue="openShow" width="70%" @close="closeDialog">
+    <!-- 单个 Form 包裹整个表格 -->
+    <el-form ref="tableForm" :model="form" :rules="formRules" label-width="0px">
+      <el-form-item label="备注：" label-width="60px">
+        <el-input v-model="form.fillMemo" type="textarea" :rows="3" style="width:50%" />
+      </el-form-item>
+      <div style="margin-bottom: 12px" >
+        <el-button type="primary" @click="addTable">插入一行</el-button>
+        <el-button type="danger" @click="delTable">删除选中行</el-button>
+      </div>
+      <!-- 全局错误提示 -->
+      <div v-if="formError" class="error-message" style="color: #f56c6c; margin-bottom: 10px">
+        {{ formError }}
+      </div>
+
+      <el-table :data="form.tableData" @select="selectChange" border>
+        <el-table-column type="selection" width="55"></el-table-column>
+
+        <!-- 作业中心（绑定数组字段） -->
+        <el-table-column align="center" label="事项">
+          <template #header>
+            <span><i style="color: red">*</i>事项</span>
+          </template>
+          <template #default="scope">
+            <!-- prop 格式：数组名[索引].字段名 -->
+            <el-form-item :prop="`tableData[${scope.$index}].matter`" :rules="formRules.matter">
+              <el-input
+                v-model="scope.row.matter"
+                placeholder="请输入"
+                style="width: 100%"
+              ></el-input>
+            </el-form-item>
+          </template>
+        </el-table-column>
+
+        <!-- 描述 -->
+        <el-table-column align="center" label="描述">
+          <template #header>
+            <span><i style="color: red">*</i>描述</span>
+          </template>
+          <template #default="scope">
+            <el-form-item :prop="`tableData[${scope.$index}].process`" :rules="formRules.process">
+              <el-input
+                v-model="scope.row.process"
+                placeholder="请输入"
+                style="width: 100%"
+              ></el-input>
+            </el-form-item>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-form>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="closeDialog">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { handleOemTaskBillItem } from '@/api/oem/inplan';
+// import { submitBatchData } from '@/api/processManagement/inPlantProcess.js'; // 实际提交接口
+
+export default {
+  props: {
+    showDialog: { type: Boolean, default: false },
+    moldAddMore: { type: Boolean, default: false },
+    tabPosition: { type: String, default: '' },
+    rowData: { type: Object, default: () => ({}) },
+  },
+  data() {
+    return {
+      openShow: false,
+      wcData: [],
+      formError: '', // 全局错误提示
+
+      // 单个表单模型：包含表格所有行数据
+      form: {
+        tableData: [], // 表格数据数组（直接绑定到 Form 模型）
+        fillMemo: '', // 备注信息
+      },
+
+      // 统一校验规则：支持数组项校验
+      formRules: {
+        // 表格数据数组的整体校验（可选：如最少1行数据）
+        tableData: [
+          {
+            required: true,
+            message: '请至少添加一行数据',
+            trigger: 'submit',
+            type: 'array', // 明确类型为数组
+          },
+          {
+            validator: (rule, value, callback) => {
+              if (value.length === 0) {
+                callback(new Error('请至少添加一行数据'));
+              } else {
+                callback();
+              }
+            },
+            trigger: 'submit',
+          },
+        ],
+
+        // 数组中每一项的 wcId 字段校验
+        matter: [{ required: true, message: '请输入', trigger: ['change', 'submit'] }],
+
+        // 数组中每一项的 preserveContent 字段校验
+        process: [{ required: true, message: '请输入', trigger: ['blur', 'submit'] }],
+      },
+    };
+  },
+  watch: {
+    showDialog(newVal) {
+      this.openShow = newVal;
+      if (newVal && this.moldAddMore && this.form.tableData.length === 0) {
+        this.addTable();
+      }
+    }
+  },
+  mounted() {
+    this.openShow = this.showDialog;
+    console.log(898989, this.showDialog);
+    // this.getWorkCenterList();
+    // 初始添加一行（可选）
+    if (this.moldAddMore && this.form.tableData.length === 0) {
+      this.addTable();
+    }
+  },
+  methods: {
+    selectChange(list, row) {
+      row._select = !row._select;
+    },
+
+    // 新增一行（直接push到表单模型的 tableData 中）
+    addTable() {
+      this.form.tableData.push({
+        _select: false, // 选择状态
+        matter: '',
+        process: '',
+      });
+    },
+
+    // 删除选中行
+    delTable() {
+      this.form.tableData = this.form.tableData.filter(row => !row._select);
+    },
+
+    closeDialog() {
+      this.openShow = false;
+      this.$emit('closeDialog', true);
+      // 重置表单
+      this.form.tableData = [];
+      this.form.fillMemo = '';
+      this.formError = '';
+      this.$refs.tableForm?.resetFields();
+    },
+
+    // 提交表单（单次校验所有行）
+    submitForm() {
+      this.formError = '';
+
+      // 调用单个 Form 的校验方法
+      this.$refs.tableForm.validate(async (isValid, invalidFields) => {
+        if (!isValid) {
+          // 校验失败：显示提示并滚动到第一个错误字段
+          this.formError = '存在未完善的字段，请检查表格中的红色提示';
+
+          this.$nextTick(() => {
+            // 找到第一个错误字段并滚动到视图
+            const firstError = document.querySelector('.el-form-item.is-error');
+            if (firstError) {
+              firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+          });
+          return;
+        }
+
+        // 校验通过：准备提交数据（过滤无用字段）
+        const submitData = this.form.tableData.map(row => {
+          const { _select, ...validData } = row; // 剔除选择状态字段
+          return validData;
+        });
+
+        // 调用接口提交（实际项目替换）
+        try {
+          let query = {
+            fillingDetailList: submitData,
+            otbId: this.rowData.id,
+            deleteIds: [],
+            fillMemo: this.form.fillMemo || '',
+          };
+          handleOemTaskBillItem(query).then(res => {
+            this.$message.success('提交成功');
+            this.closeDialog();
+            this.$emit('submitSuccess', submitData);
+          });
+
+          // 演示用
+          // this.$message.success('提交成功');
+          // this.closeDialog();
+          // this.$emit('submitSuccess', submitData);
+        } catch (err) {
+          this.$message.error(err);
+          // console.error('提交失败：', err);
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+// 优化表单字段样式
+:deep(.el-table .el-form-item) {
+  margin-bottom: 0; // 去掉默认边距
+}
+
+// 错误提示样式优化
+:deep(.el-form-item__error) {
+  font-size: 12px;
+  white-space: nowrap;
+  z-index: 10;
+  background: #fff;
+  padding: 2px 4px;
+  border: 1px solid #f56c6c;
+  border-radius: 4px;
+}
+
+// 表格行高适配 textarea
+.el-table__row {
+  height: 80px !important;
+}
+
+.el-table__cell {
+  vertical-align: middle !important;
+}
+
+.error-message {
+  font-size: 14px;
+  line-height: 1.5;
+}
+:deep(.el-table .el-table__cell) {
+  height: 50px !important;
+  padding: 0 !important;
+  line-height: 50px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/oem/proTask/inPlantProcessOem.vue b/src/views/oem/proTask/inPlantProcessOem.vue
index 7aecc5a..94e7648 100644
--- a/src/views/oem/proTask/inPlantProcessOem.vue
+++ b/src/views/oem/proTask/inPlantProcessOem.vue
@@ -22,15 +22,42 @@
       </template>
       <template #menu-right> </template>
       <template #menu="scope">
-        <el-button type="primary" @click="handleImport">处理 </el-button>
+        <el-button type="text" @click="detailsView(scope.row)">详情 </el-button>
+        <el-button type="text" @click="handle(scope.row)" v-if="scope.row.tbStatus == 0"
+          >处理
+        </el-button>
       </template>
     </avue-crud>
+    <!-- 处理 -->
+    <inPlantProcessHandle
+      v-if="showHandle"
+      :showDialog="showHandle"
+      :moldAddMore="moldAddMore"
+      :rowData="rowData"
+      @closeDialog="cancel()"
+    ></inPlantProcessHandle>
+    <!-- 详情 -->
+    <inPlantProcessDetails
+      v-if="showDetails"
+      :showDialog="showDetails"
+      :rowData="rowData"
+      @closeDialog="cancel()"
+    ></inPlantProcessDetails>
   </basic-container>
 </template>
 <script>
+
+import { pageList, detailItem, handleOemTaskBillItem, removeItem } from '@/api/oem/inplan';
+import inPlantProcessHandle from './components/inPlantProcessHandle.vue';
+import inPlantProcessDetails from './components/inPlantProcessDetails.vue';
 export default {
+  components: {
+    inPlantProcessHandle,
+    inPlantProcessDetails,
+  },
   data() {
     return {
+      loading: false,
       selectionList: [],
       option: {
         height: 'auto',
@@ -47,8 +74,9 @@ export default {
         index: true,
         selection: false,
         viewBtn: false,
-        delBtn: true,
+        delBtn: false,
         addBtn: false,
+        editBtn: false,
         editBtnText: '修改',
         addBtnIcon: ' ',
         viewBtnIcon: ' ',
@@ -56,16 +84,14 @@ export default {
         editBtnIcon: ' ',
         viewBtnText: '详情',
         labelWidth: 120,
-        menuWidth: 180,
+        menuWidth: 120,
         dialogWidth: 1040,
         dialogClickModal: false,
         searchEnter: true,
-        excelBtn: false,
+        excelBtn: true,
         filterBtn: true,
         searchShowBtn: false,
         columnSort: true,
-        excelBtn: true,
-        columnSort: true,
         showOverflowTooltip: true,
         menuAlign: 'left',
         gridBtn: false,
@@ -74,6 +100,7 @@ export default {
         searchSpan: 6,
         searchMenuPosition: 'right',
         align: 'center',
+        menu: true,
         column: [
          {
             label: '外协厂商',
@@ -121,7 +148,7 @@ export default {
           },
           {
             label: '确认编号',
-            prop: 'condition',
+            prop: 'confirmCondition',
             search: true,
             sortable: true,
             filter: true,
@@ -151,8 +178,7 @@ export default {
           },
           {
             label: '工艺员',
-            prop: 'proMan.userName',
-            bind: 'proMan.userName',
+            prop: 'proManName',
             search: true,
             sortable: true,
             filter: true,
@@ -169,7 +195,7 @@ export default {
           },
           {
             label: '备注',
-            prop: 'memo',
+            prop: 'remarks',
             search: false,
             sortable: true,
             filter: true,
@@ -179,7 +205,7 @@ export default {
           },
           {
             label: '状态',
-            prop: 'tbStatusTitle',
+            prop: 'tbStatusName',
             search: false,
             sortable: true,
             filter: true,
@@ -190,38 +216,112 @@ export default {
         ],
       },
       form: {},
+      data: [],
+      query: {},
       page: {
         pageSize: 10,
         currentPage: 1,
         total: 0,
       },
+      rowData: {},
+      showHandle: false,
+      moldAddMore: true,
+      showDetails: false,
     };
   },
   methods: {
-    handleDelete() {
-      if (this.selectionList.length === 0) {
-        this.$message.warning('请选择至少一条数据');
-        return;
-      }
+    // 查看详情
+    detailsView(row) {
+      console.log(row, 'row');
+      this.showDetails = true;
+      this.rowData = row;
+      this.moldAddMore = false;
+    },
+    handle(row) {
+      this.rowData = row;
+      this.showHandle = true;
+    },
+    cancel() {
+      this.showHandle = false;
+      this.showDetails = false;
+
+      this.onLoad(this.page, this.query);
+    },
+    // 删除单行
+    rowDel(row, index, done) {
+      console.log('【删除行】row:', row);
       this.$confirm('确定将选择数据删除?', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
-      }).then(() => {});
+      }).then(() => {
+        return removeItem(String(row.id)).then(() => {
+          this.$message.success('删除成功');
+          this.onLoad(this.page);
+          done();
+        });
+      }).catch(error => {
+        console.error('删除失败:', error);
+        this.$message.error('删除失败，请稍后重试');
+      });
     },
     // 多选
     selectionChange(list) {
       this.selectionList = list;
     },
-    onLoad() {
+    onLoad(page, params = {}) {
       this.loading = true;
-      this.data = [];
-      this.page.total = this.data.length;
-      this.loading = false;
+      pageList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+        console.log('API返回数据:', res);
+
+        // 检查返回的数据结构
+        if (res.data && res.data.code === 200) {
+          const data = res.data.data;
+          this.page.total = data.total || 0;
+          this.data = data.records || [];
+          console.log('设置的数据:', { total: this.page.total, data: this.data });
+        } else {
+          this.$message.error(res.data.msg || '获取数据失败');
+          this.data = [];
+        }
+        this.loading = false;
+
+      }).catch(error => {
+        console.error('获取数据失败:', error);
+        this.$message.error('获取数据失败');
+        this.data = [];
+        this.loading = false;
+      });
+
       setTimeout(() => {
         this.selectionClear();
       }, 500);
     },
+    searchReset() {
+      this.query = {};
+      this.onLoad(this.page);
+    },
+    searchChange(params, done) {
+      this.query = params;
+      this.page.currentPage = 1;
+      this.onLoad(this.page, params);
+      done();
+    },
+    currentChange(currentPage) {
+      this.page.currentPage = currentPage;
+      this.onLoad(this.page, this.query);
+    },
+    sizeChange(pageSize) {
+      this.page.pageSize = pageSize;
+      this.onLoad(this.page, this.query);
+    },
+    refreshChange() {
+      this.onLoad(this.page, this.query);
+    },
+    selectionClear() {
+      this.selectionList = [];
+      this.$refs.crud.toggleSelection();
+    },
   },
 };
 </script>