优化代码

src/views/aftersales/aftersalesWorkOrderAddTemp.vue

@@ -47,6 +47,7 @@
               placeholder="请选择发现节点"
               style="width: 100%"
               @change="DiscoveringNodesChange"
+              clearable
             >
               <el-option
                 v-for="item in Discoveringoptions"
@@ -288,6 +289,7 @@
                   label="调查经过"
                   prop="investigationPocess"
                   class="el_Investigation"
+                  clearable
                   v-if="displaySettings.investigationPocess"
                 >
                   <el-input
@@ -305,13 +307,83 @@
         <!-- 内部责任划分  -->
         <el-tabs
           v-model="form.responsibilities"
-          class="demo-tabs Packagebox"
+          class="demo-tabs responsibilities"
           @tab-click="handleClick"
           v-loading="form.Packageloading"
         >
           <el-tab-pane label="内部责任划分" name="0">
+            <div class="el_responsibilities">
+              <div class="el_responsibilities_box">
+                <el-form-item label="责任方" prop="processor" class="el_Processing">
+                  <el-select
+                    v-model="form.processor"
+                    placeholder="请选择责任方"
+                    style="width: 100%"
+                    multiple
+                    filterable
+                    clearable
+                  >
+                    <el-option
+                      v-for="item in Processingoptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
 
+                <el-form-item label="责任人" prop="processor" class="el_Processing">
+                  <el-select
+                    v-model="form.processor"
+                    placeholder="请选择责任人"
+                    style="width: 100%"
+                    multiple
+                    filterable
+                    clearable
+                  >
+                    <el-option
+                      v-for="item in Processingoptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
 
+                <el-form-item label="占比" prop="waybillMall">
+                  <el-input-number
+                    v-model="form.a"
+                    :min="0"
+                    :max="100"
+                    :controls="false"
+                    :value-on-clear="0"
+                    @change="handleChange"
+                  />
+                </el-form-item>
+                <el-form-item label="三方责任人" prop="waybillMall">
+                  <el-input v-model="form.vehicleRoute" placeholder="请输入三方责任人" clearable />
+                </el-form-item>
+                <el-form-item
+                  label="说明"
+                  prop="investigationPocess"
+                  class="el_Investigation"
+                  clearable
+                  v-if="displaySettings.investigationPocess"
+                >
+                  <el-input
+                    v-model="form.investigationPocess"
+                    placeholder="请输入说明"
+                    type="textarea"
+                    :autosize="{ minRows: 1, maxRows: 4 }"
+                    clearable
+                  />
+                </el-form-item>
+              </div>
+
+              <div>
+                <el-button type="primary" @click="onSubmit">移除</el-button>
+              </div>
+            </div>
           </el-tab-pane>
         </el-tabs>
       </el-form>
@@ -362,7 +434,7 @@ import { deepClone } from '@/utils/util';
 const form = ref({
   TabactiveName: '0', //工单类型菜单
   activPackage: '0', //包件信息菜单
-  responsibilities:'0',//内部责任菜单
+  responsibilities: '0', //内部责任菜单
   Pageloading: false, //页面加载
   Packageloading: false, //包件加载
   historydialog: false, //历史包件弹窗
@@ -381,10 +453,8 @@ const form = ref({
     },
   ], //历史包件列表
   Historicalpackage: [],
-//   内部责任划分
+  //   内部责任划分
-  responsibilitiesList:[
+  responsibilitiesList: [],
-    
-  ],
 });
 const ruleForm = reactive({
   workOrderType: [{ required: true, message: '请选择异常类型', trigger: 'bulr' }],
@@ -670,9 +740,41 @@ const TabactiveClick = (a, b) => {
     .el_Processing {
       width: 39.6%;
     }
+    :deep(.el_Investigation) {
+      flex: 1;
+    }
+    :deep(.is-error) {
+      .el-input--suffix {
+        .el-textarea__inner:focus {
+          box-shadow: 0 0 0 1px #ff0000 inset !important;
+        }
+      }
+    }
+  }
+}
+.responsibilities {
+  .el_responsibilities {
+    display: flex;
+    align-items: center;
+    .el-form-item {
+      width: 12.8%;
+      margin-right: 10px;
+      .el-input-number {
+        width: 100%;
+      }
+    }
+    :deep(.el_responsibilities_box) {
+      display: flex;
+      width: 80%;
+      .el-form-item {
+        .el-form-item__label {
+          margin-bottom: 0;
+        }
+      }
       .el_Investigation {
         flex: 1;
       }
     }
+  }
 }
 </style>