工单样式修改

src/views/mes/pro/workorder/proofingInfo.vue

 <template>
-  <div class="form-page" v-loading="loading">
+  <div v-loading="loading">
     <PageTitle>
       {{ pageTitle }}
       <!-- 申请按钮显示 -->
-      <template slot="buttons" v-if="mode == 'apply' ">
+      <template slot="buttons" v-if="mode == 'apply'">
         <el-button size="mini" @click="resetForm">重置</el-button>
-        <el-button size="mini" type="primary" @click="saveForm" >提交</el-button>
+        <el-button size="mini" type="primary" @click="saveForm">提交</el-button>
       </template>
 
       <!-- 修改 按钮显示 -->
-      <template slot="buttons" v-if="mode == 'edit' ">
+      <template slot="buttons" v-if="mode == 'edit'">
         <el-button size="mini" type="primary" @click="saveForm">提交</el-button>
       </template>
     </PageTitle>
 
     <PageWrapper>
       <el-form
+        class="page-form"
         :model="form"
         ref="form"
         size="small"
@@ -23,7 +24,7 @@
         label-width="8em"
       >
         <el-row>
-          <el-col :md="8" :xs="12">
+          <el-col :lg="6" :md="8" :sm="12" :xs="12">
             <el-form-item label="申请单编码" prop="workorderCode">
               <el-input
                 disabled
@@ -32,39 +33,60 @@
               ></el-input>
             </el-form-item>
           </el-col>
-          <el-col :span="6">
+          <el-col :lg="6" :md="8" :sm="12" :xs="12">
             <el-form-item label="工单名称" prop="workorderName">
-              <el-input v-model="form.workorderName" placeholder="请输入工单名称" />
+              <el-input
+                v-model="form.workorderName"
+                placeholder="请输入工单名称"
+              />
             </el-form-item>
           </el-col>
-           <el-col :span="6">
+          <el-col :lg="6" :md="8" :sm="12" :xs="12">
             <el-form-item label="来源类型" prop="orderSource">
-              <el-radio-group v-model="form.orderSource" disabled v-if="optType=='view'">
+              <el-radio-group
+                v-model="form.orderSource"
+                disabled
+                v-if="optType == 'view'"
+              >
                 <el-radio
                   v-for="dict in dict.type.mes_workorder_sourcetype"
                   :key="dict.value"
                   :label="dict.value"
-                >{{dict.label}}</el-radio>
+                  >{{ dict.label }}</el-radio
+                >
               </el-radio-group>
               <el-radio-group v-model="form.orderSource" v-else>
                 <el-radio
                   v-for="dict in dict.type.mes_workorder_sourcetype"
                   :key="dict.value"
                   :label="dict.value"
-                >{{dict.label}}</el-radio>
+                  >{{ dict.label }}</el-radio
+                >
               </el-radio-group>
             </el-form-item>
           </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="8" v-if="form.orderSource == 'ORDER'">
+
+          <el-col
+            :lg="6"
+            :md="8"
+            :sm="12"
+            :xs="12"
+            v-if="form.orderSource == 'ORDER'"
+          >
             <el-form-item label="订单编号" prop="sourceCode">
-              <el-input v-model="form.sourceCode" placeholder="请输入订单编号" />
+              <el-input
+                v-model="form.sourceCode"
+                placeholder="请输入订单编号"
+              />
             </el-form-item>
           </el-col>
-            <el-col :span="8">
+          <el-col :lg="6" :md="8" :sm="12" :xs="12">
             <el-form-item label="单据状态" prop="status">
-              <el-select v-model="form.status" disabled placeholder="请选择单据状态">
+              <el-select
+                v-model="form.status"
+                disabled
+                placeholder="请选择单据状态"
+              >
                 <el-option
                   v-for="dict in dict.type.mes_order_status"
                   :key="dict.value"
@@ -74,7 +96,7 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <!-- <el-col :span="8">
+          <!-- <el-col :lg="6" :md="8" :sm="12" :xs="12">
             <el-form-item label="单据状态" prop="status">
               <el-select v-model="form.status" disabled>
                 <el-option
@@ -87,7 +109,7 @@
             </el-form-item>
           </el-col> -->
 
-          <el-col :span="8">
+          <el-col :lg="6" :md="8" :sm="12" :xs="12">
             <el-form-item label="工单类型" prop="workorderType">
               <el-select v-model="form.workorderType" placeholder="请选择类型">
                 <el-option
@@ -99,9 +121,7 @@
               </el-select>
             </el-form-item>
           </el-col>
-        </el-row>
-       <el-row>
-        <el-col :md="8" :xs="12" style="height: 50.5px">
+          <el-col :lg="6" :md="8" :sm="12" :xs="12">
             <el-form-item label="工艺名称" prop="routeId">
               <el-input
                 v-model="form.routeName"
@@ -114,93 +134,157 @@
                   @click="$refs['RoutesProcessSelectRef'].showFlag = true"
                 ></el-button>
               </el-input>
-              <RoutesProcessSelect
-                ref="RoutesProcessSelectRef"
-                @onSelected="onRoutesProcessSelect"
-              />
             </el-form-item>
           </el-col>
-       
-         <el-col :span="8">
+          <el-col :lg="6" :md="8" :sm="12" :xs="12">
             <el-form-item label="产品编号" prop="productCode">
-              <el-input v-model="form.productCode" placeholder="请选择产品" >
-                <el-button slot="append" @click="handleSelectProduct" icon="el-icon-search"></el-button>
+              <el-input v-model="form.productCode" placeholder="请选择产品">
+                <el-button
+                  slot="append"
+                  @click="handleSelectProduct"
+                  icon="el-icon-search"
+                ></el-button>
               </el-input>
-              <ItemSelect ref="itemSelect" @onSelected="onItemSelected" > </ItemSelect>
             </el-form-item>
           </el-col>
-          <el-col :span="8">
+          <el-col :lg="6" :md="8" :sm="12" :xs="12">
             <el-form-item label="产品名称" prop="productName">
-              <el-input v-model="form.productName" placeholder="请选择产品" disabled/>
+              <el-input
+                v-model="form.productName"
+                placeholder="请选择产品"
+                disabled
+              />
             </el-form-item>
           </el-col>
-          <el-col :span="8">
+          <el-col :lg="6" :md="8" :sm="12" :xs="12">
             <el-form-item label="规格型号" prop="productSpc">
-              <el-input v-model="form.productSpc" placeholder="请选择产品" disabled/>
+              <el-input
+                v-model="form.productSpc"
+                placeholder="请选择产品"
+                disabled
+              />
             </el-form-item>
           </el-col>
-          <el-col :span="8">
+          <el-col :lg="6" :md="8" :sm="12" :xs="12">
             <el-form-item label="单位" prop="unitOfMeasure">
-              <el-input v-model="form.unitOfMeasure" placeholder="请选择产品" disabled/>
+              <el-input
+                v-model="form.unitOfMeasure"
+                placeholder="请选择产品"
+                disabled
+              />
             </el-form-item>
           </el-col>
 
-        <el-col :span="8">
+          <el-col :lg="6" :md="8" :sm="12" :xs="12">
             <el-form-item label="工单数量" prop="quantity">
-              <el-input-number :min="1" v-model="form.quantity" placeholder="请输入生产数量" />
+              <el-input-number
+                :min="1"
+                v-model="form.quantity"
+                placeholder="请输入生产数量"
+              />
             </el-form-item>
           </el-col>
-          <el-col :span="8">
+          <el-col :lg="6" :md="8" :sm="12" :xs="12">
             <el-form-item label="需求日期" prop="requestDate">
-              <el-date-picker clearable
+              <el-date-picker
+                clearable
                 v-model="form.requestDate"
                 type="date"
                 value-format="yyyy-MM-dd"
-                placeholder="请选择需求日期">
+                placeholder="请选择需求日期"
+              >
               </el-date-picker>
             </el-form-item>
           </el-col>
-          <el-col :span="8">
+          <el-col :lg="6" :md="8" :sm="12" :xs="12">
             <el-form-item label="批次号" prop="batchCode">
               <el-input v-model="form.batchCode" placeholder="请输入批次号" />
             </el-form-item>
           </el-col>
-          <el-row v-if="form.orderSource == 'ORDER'">
-          <el-col :span="8">
+          <!-- <el-row v-if="form.orderSource == 'ORDER'"> -->
+          <el-col
+            :lg="6"
+            :md="8"
+            :sm="12"
+            :xs="12"
+            v-if="form.orderSource == 'ORDER'"
+          >
             <el-form-item label="客户编码" prop="clientCode">
-              <el-input v-model="form.clientCode" placeholder="请选择客户" >
-                <el-button slot="append" @click="handleSelectClient" icon="el-icon-search"></el-button>
+              <el-input v-model="form.clientCode" placeholder="请选择客户">
+                <el-button
+                  slot="append"
+                  @click="handleSelectClient"
+                  icon="el-icon-search"
+                ></el-button>
               </el-input>
-              <ClientSelect ref="clientSelect" @onSelected="onClientSelected" > </ClientSelect>
+              <ClientSelect ref="clientSelect" @onSelected="onClientSelected">
+              </ClientSelect>
             </el-form-item>
           </el-col>
-          <el-col :span="8">
+          <el-col
+            :lg="6"
+            :md="8"
+            :sm="12"
+            :xs="12"
+            v-if="form.orderSource == 'ORDER'"
+          >
             <el-form-item label="客户名称" prop="clientName">
-              <el-input v-model="form.clientName" readonly="readonly" placeholder="请输入客户名称" />
+              <el-input
+                v-model="form.clientName"
+                readonly="readonly"
+                placeholder="请输入客户名称"
+              />
             </el-form-item>
           </el-col>
-          <el-col></el-col>
-        </el-row>
-        <el-row v-if="form.workorderType == 'OUTSOURCE' || form.workorderType == 'PURCHASE'">
-          <el-col :span="8">
+
+          <el-col
+            :lg="6"
+            :md="8"
+            :sm="12"
+            :xs="12"
+            v-if="
+              form.workorderType == 'OUTSOURCE' ||
+              form.workorderType == 'PURCHASE'
+            "
+          >
             <el-form-item label="供应商编码" prop="vendorCode">
-              <el-input v-model="form.vendorCode" placeholder="请选择供应商" >
-                <el-button slot="append" @click="handleSelectVendor" icon="el-icon-search"></el-button>
+              <el-input v-model="form.vendorCode" placeholder="请选择供应商">
+                <el-button
+                  slot="append"
+                  @click="handleSelectVendor"
+                  icon="el-icon-search"
+                ></el-button>
               </el-input>
               <VendorSelect ref="vendorSelect" @onSelected="onVendorSelected" />
             </el-form-item>
           </el-col>
-          <el-col :span="8">
+          <el-col
+            :lg="6"
+            :md="8"
+            :sm="12"
+            :xs="12"
+            v-if="
+              form.workorderType == 'OUTSOURCE' ||
+              form.workorderType == 'PURCHASE'
+            "
+          >
             <el-form-item label="供应商名称" prop="vendorName">
-              <el-input v-model="form.vendorName" readonly="readonly" placeholder="请选择供应商" />
+              <el-input
+                v-model="form.vendorName"
+                readonly="readonly"
+                placeholder="请选择供应商"
+              />
             </el-form-item>
           </el-col>
-          <el-col></el-col>
         </el-row>
-        
-          <el-col :span="8">
+        <el-row>
+          <el-col :lg="6" :md="8" :sm="12" :xs="12">
             <el-form-item label="备注" prop="remark">
-              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+              <el-input
+                v-model="form.remark"
+                type="textarea"
+                placeholder="请输入内容"
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -215,28 +299,47 @@
         </el-tab-pane>
       </el-tabs>
     </PageWrapper>
+    <RoutesProcessSelect
+      ref="RoutesProcessSelectRef"
+      @onSelected="onRoutesProcessSelect"
+    />
+    <ItemSelect ref="itemSelect" @onSelected="onItemSelected"> </ItemSelect>
   </div>
 </template>
 
 <script>
-import {genCode} from "@/api/system/autocode/rule";;
- import ProogingBom from "./components/ProogingBom.vue";
- import ProogingProcess from "./components/ProogingProcess.vue";
-  import ItemSelect from "@/components/itemSelect/single.vue";
-  import ClientSelect from "@/components/clientSelect/single.vue";
-  import VendorSelect from "@/components/vendorSelect/single.vue";
- import RoutesProcessSelect from "@/components/routesProcessSelect/index.vue";
+import { genCode } from "@/api/system/autocode/rule";
+import ProogingBom from "./components/ProogingBom.vue";
+import ProogingProcess from "./components/ProogingProcess.vue";
+import ItemSelect from "@/components/itemSelect/single.vue";
+import ClientSelect from "@/components/clientSelect/single.vue";
+import VendorSelect from "@/components/vendorSelect/single.vue";
+import RoutesProcessSelect from "@/components/routesProcessSelect/index.vue";
 import { listRouteprocess } from "@/api/mes/pro/routeprocess";
- import tabPlugins from "@/plugins/tab";
- import {
+import tabPlugins from "@/plugins/tab";
+import {
   addPrototypeRequest,
   getPrototypeRequest,
   updatePrototypeRequest,
 } from "@/api/mes/pro/prototypeRequest";
-import { listWorkorder, getWorkorder, delWorkorder, addWorkorder, updateWorkorder ,dofinish} from "@/api/mes/pro/workorder";
+import {
+  listWorkorder,
+  getWorkorder,
+  delWorkorder,
+  addWorkorder,
+  updateWorkorder,
+  dofinish,
+} from "@/api/mes/pro/workorder";
 export default {
-  components: { ProogingProcess,ProogingBom, ItemSelect, RoutesProcessSelect ,ClientSelect,VendorSelect},
-  dicts: ['mes_order_status','mes_workorder_sourcetype','mes_workorder_type'],
+  components: {
+    ProogingProcess,
+    ProogingBom,
+    ItemSelect,
+    RoutesProcessSelect,
+    ClientSelect,
+    VendorSelect,
+  },
+  dicts: ["mes_order_status", "mes_workorder_sourcetype", "mes_workorder_type"],
   provide() {
     return {
       mode: this.mode,
@@ -244,11 +347,9 @@ export default {
   },
   data() {
     return {
-     
       loading: false,
       optType: undefined,
 
-
       bomList: [],
       // 表单参数
       form: {
@@ -291,38 +392,37 @@ export default {
         parentId: "",
         ancestors: "",
         status: "PREPARE",
-
       },
       // 表单校验
       rules: {
         workorderCode: [
-          { required: true, message: "工单编码不能为空", trigger: "blur" }
+          { required: true, message: "工单编码不能为空", trigger: "blur" },
         ],
         workorderName: [
-          { required: true, message: "工单名称不能为空", trigger: "blur" }
+          { required: true, message: "工单名称不能为空", trigger: "blur" },
         ],
         workorderType: [
-          { required: true, message: "请选择生产工单类型", trigger: "blur" }
+          { required: true, message: "请选择生产工单类型", trigger: "blur" },
         ],
         orderSource: [
-          { required: true, message: "来源类型不能为空", trigger: "blur" }
+          { required: true, message: "来源类型不能为空", trigger: "blur" },
         ],
         productId: [
-          { required: true, message: "产品不能为空", trigger: "blur" }
+          { required: true, message: "产品不能为空", trigger: "blur" },
         ],
         productCode: [
-          { required: true, message: "产品编号不能为空", trigger: "blur" }
+          { required: true, message: "产品编号不能为空", trigger: "blur" },
         ],
         productName: [
-          { required: true, message: "产品名称不能为空", trigger: "blur" }
+          { required: true, message: "产品名称不能为空", trigger: "blur" },
         ],
         quantity: [
-          { required: true, message: "生产数量不能为空", trigger: "blur" }
+          { required: true, message: "生产数量不能为空", trigger: "blur" },
         ],
         requestDate: [
-          { required: true, message: "需求日期不能为空", trigger: "blur" }
+          { required: true, message: "需求日期不能为空", trigger: "blur" },
         ],
-      }
+      },
     };
   },
   computed: {
@@ -349,14 +449,20 @@ export default {
   },
 
   methods: {
-  
-    
     /** 查询生产工单下拉树结构 */
     getTreeselect() {
-      listWorkorder().then(response => {
+      listWorkorder().then((response) => {
         this.workorderOptions = [];
-        const data = { workorderId: 0, workorderName: '顶级节点', children: [] };
-        data.children = this.handleTree(response.data, "workorderId", "parentId");
+        const data = {
+          workorderId: 0,
+          workorderName: "顶级节点",
+          children: [],
+        };
+        data.children = this.handleTree(
+          response.data,
+          "workorderId",
+          "parentId"
+        );
         this.workorderOptions.push(data);
       });
     },
@@ -384,10 +490,9 @@ export default {
     //   this.optType="add";
     // },
 
-    
     //物料选择弹出框
-    onItemSelected(obj){
-        if(obj != undefined && obj != null){
+    onItemSelected(obj) {
+      if (obj != undefined && obj != null) {
         this.form.productId = obj.itemId;
         this.form.productCode = obj.itemCode;
         this.form.productName = obj.itemName;
@@ -397,30 +502,30 @@ export default {
     },
     //客户选择弹出框
 
-    onClientSelected(row){
-        if(row != undefined && row != null){
+    onClientSelected(row) {
+      if (row != undefined && row != null) {
         this.form.clientId = row.clientId;
         this.form.clientCode = row.clientCode;
         this.form.clientName = row.clientName;
       }
     },
     //供应商选择弹出框
-    onVendorSelected(row){
+    onVendorSelected(row) {
       debugger;
-        if(row != undefined && row != null){
+      if (row != undefined && row != null) {
         this.form.vendorId = row.vendorId;
         this.form.vendorCode = row.vendorCode;
         this.form.vendorName = row.vendorName;
       }
     },
-    handleSelectProduct(){
+    handleSelectProduct() {
       this.$refs.itemSelect.showFlag = true;
     },
-  handleSelectClient(){
+    handleSelectClient() {
       this.$refs.clientSelect.showFlag = true;
     },
 
-    handleSelectVendor(){
+    handleSelectVendor() {
       this.$refs.vendorSelect.showFlag = true;
     },
     /** 根据 id 获取页面数据 */
@@ -462,7 +567,6 @@ export default {
     // },
     //物料选择弹出框
 
-    
     onRoutesProcessSelect(row) {
       if (row != undefined && row != null) {
         this.form.routeId = row.routeId;
@@ -532,7 +636,7 @@ export default {
         workorderCode: null,
         workorderName: null,
         routeName: null,
-        workorderType: 'SELF',
+        workorderType: "SELF",
         orderSource: null,
         sourceCode: null,
         productId: null,
@@ -557,14 +661,13 @@ export default {
         createBy: null,
         createTime: null,
         updateBy: null,
-        updateTime: null
+        updateTime: null,
       };
       this.$refs["ProogingBomRef"].resetState();
       this.$refs["ProogingProcessRef"].resetState();
       this.gCode();
     },
-   
-  }
+  },
 };
 </script>