优化已知问题

src/components/tablecmt/tablecmt.vue

@@ -75,9 +75,10 @@
             <el-date-picker
               v-model="column.values"
               v-if="column.type == 4"
+         
               type="date"
               clearable
-              style="width: auto"
+              style="width: auto;height:23px !important"
               :placeholder="`请选择${column.label}`"
               @change="timechange($event, column)"
             />
@@ -86,7 +87,8 @@
               v-if="column.type == 5"
               type="datetime"
               clearable
-              style="width: auto"
+              style="width: auto;"
+              size="default"
               :placeholder="`请选择${column.label}`"
               format="YYYY/MM/DD HH:mm:ss"
               @change="timechange($event, column)"
@@ -853,9 +855,9 @@ defineExpose({ handleCheckSelect, handleClearSelect });
 .el-table__body tr.hover-row > td {
   background-color: #d3d8e1 !important;
 }
-.el-date-editor.el-input,
-.el-date-editor.el-input__wrapper {
-  height: 23px !important;
+:deep(.el-date-editor.el-input,
+.el-date-editor.el-input__wrapper) {
+  height: 23px;
 }
 .copys {
   display: inline-block;

src/views/aftersales/aftersalesWorkOrderAdd.vue

@@ -1525,6 +1525,7 @@ const ConfirmForm = () => {
       delete DataSubmit.processor; //移除多余字段
       console.log(DataSubmit, '处理好的数据');
       // 提交表单信息stringify
+      return
       Addloading.value = true; //开启页面加载
       $_submit(DataSubmit)
         .then(res => {

src/views/aftersales/aftersalesWorkOrderAddTemp.vue

@@ -84,6 +84,7 @@
             <template v-for="(item, index) in form.PackageList" :key="index + item.packageCode">
               <div class="el_Package">
                 <div class="Package">
+                  <span class="Number"> {{ index + 1 }}</span>
                   <el-form-item
                     :prop="`PackageList[${index}.packageCode]`"
                     :rules="ruleForm.packageCode"
@@ -152,7 +153,7 @@
           v-loading="form.Packageloading"
         >
           <el-tab-pane label="基础信息" name="0">
-            <div class="Basicinformation">
+            <div class="Basicinformation" style="padding-left: 20px; box-sizing: border-box">
               <el-form-item label="车次号" prop="trainNumber" v-if="displaySettings.trainNumber">
                 <el-select
                   v-model="form.trainNumber"
@@ -296,7 +297,7 @@
                     v-model="form.investigationPocess"
                     placeholder="请输调查经过"
                     type="textarea"
-                    :autosize="{ minRows: 1, maxRows: 4 }"
+                    :autosize="{ minRows: 1, maxRows: 10 }"
                     clearable
                   />
                 </el-form-item>
@@ -312,77 +313,206 @@
           v-loading="form.Packageloading"
         >
           <el-tab-pane label="内部责任划分" name="0">
+            <div class="el_top">
+              <el-button type="primary" class="el_addPackage" @click="AddResponsible">
+                <el-icon><Plus /></el-icon>新增信息</el-button
+              >
+              <div class="el_Package_num">
+                <span>公司占比:{{ form.Proportion }}%</span>
+              </div>
+            </div>
+
             <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
+              <template
+                v-for="(item, index) in form.responsibilitiesList"
+                :key="index + item.businessName"
+              >
+                <div class="el_responsibilities_box">
+                  <span class="Number"> {{ index + 1 }}</span>
+                  <el-form-item
+                    label="责任方"
+                    class="el_Processing"
+                    :prop="`responsibilitiesList[${index}.businessName]`"
+                    :rules="ruleForm.businessName"
                   >
-                    <el-option
-                      v-for="item in Processingoptions"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
+                    <el-select
+                      v-if="form.groundlineType == '1'"
+                      v-model="item.businessName"
+                      placeholder="请选择提货责任方"
+                      style="width: 100%"
+                      clearable
+                      filterable
+                    >
+                      <el-option
+                        v-for="items in item.Processingoptions"
+                        :key="items.value"
+                        :label="items.label"
+                        :value="items.value"
+                      />
+                    </el-select>
+                    <el-select
+                      v-else
+                      v-model="item.businessName"
+                      placeholder="请选择责任方"
+                      style="width: 100%"
+                      clearable
+                      filterable
+                    >
+                      <el-option
+                        v-for="items in item.Responsibleoptions"
+                        :key="items.value"
+                        :label="items.label"
+                        :value="items.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+
+                  <el-form-item
+                    label="责任人"
+                    class="el_Processing"
+                    :prop="`responsibilitiesList[${index}.personResponsibleName]`"
+                    :rules="ruleForm.personResponsibleName"
+                  >
+                    <el-input
+                      v-if="form.groundlineType == '1'"
+                      v-model="item.personResponsibleName"
+                      placeholder="请输入责任人"
+                      clearable
                     />
-                  </el-select>
-                </el-form-item>
+                    <el-select
+                      v-else
+                      v-model="item.personResponsibleName"
+                      style="width: 100%"
+                      filterable
+                      clearable
+                    >
+                      <el-option
+                        v-for="items in item.ResponsibleoNameptions"
+                        :key="items.value"
+                        :label="items.label"
+                        :value="items.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
+                  <el-form-item
+                    label="占比(%)"
+                    :prop="`responsibilitiesList[${index}.responsibilityRatio]`"
+                    :rules="ruleForm.responsibilityRatio"
+                    @change="CompanyProportionInput"
+                  >
+                    <el-input-number
+                      v-model="item.responsibilityRatio"
+                      :min="0"
+                      :max="item.ProportionMax"
+                      :controls="false"
+                      :value-on-clear="0"
+                    />
+                  </el-form-item>
+                  <el-form-item
+                    label="三方责任人"
+                    :prop="`responsibilitiesList[${index}.tripartite]`"
+                    :rules="ruleForm.tripartite"
+                  >
+                    <el-input v-model="item.tripartite" placeholder="请输入三方责任人" clearable />
+                  </el-form-item>
+                  <el-form-item
+                    label="说明"
+                    class="el_Investigation"
                     clearable
+                    :prop="`responsibilitiesList[${index}.description]`"
+                    :rules="ruleForm.description"
                   >
-                    <el-option
-                      v-for="item in Processingoptions"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
+                    <el-input
+                      v-model="item.description"
+                      placeholder="请输入说明"
+                      type="textarea"
+                      :autosize="{ minRows: 1, maxRows: 4 }"
+                      clearable
                     />
-                  </el-select>
-                </el-form-item>
+                  </el-form-item>
+                </div>
+                <div>
+                  <el-button v-if="index" type="primary" @click="Responsemoval(index)"
+                    >移除</el-button
+                  >
+                </div>
+              </template>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
 
-                <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>
+        <!-- 处理结果-理赔金额  -->
+        <el-tabs
+          v-model="form.ProcessingTab"
+          class="demo-tabs Processingresults"
+          v-loading="form.Packageloading"
+        >
+          <el-tab-pane label="处理结果-理赔金额" name="0">
+            <el-form-item label="">
+              <el-select
+                v-model="form.result"
+                placeholder="请选择处理结果类型"
+                style="width: 100%"
+                clearable
+                multiple
+                @change="Claimssettlement"
+              >
+                <el-option
+                  v-for="item in Processingresultsoptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <!-- 处理结果循环列表 -->
+            <div class="el_Processingresults">
+              <template v-for="(item, index) in form.Claimamount" :key="index + item.title">
+                <div class="el_Processingresults_box">
+                  <span class="el_title">{{ item.title }}</span>
+                  <div class="el_Processingresults_box_list">
+                    <el-form-item label="金额">
+                      <el-input-number
+                        v-model="item.money"
+                        :min="0"
+                        :max="9999999"
+                        :controls="false"
+                        :value-on-clear="0"
+                      />
+                    </el-form-item>
 
-              <div>
-                <el-button type="primary" @click="onSubmit">移除</el-button>
-              </div>
+                    <el-form-item label="支付单位">
+                      <el-input v-model="item.paymentUnit" placeholder="请输入支付单位" clearable />
+                    </el-form-item>
+                    <el-form-item label="理赔支付时间">
+                      <el-date-picker
+                        v-model="item.compensationTime"
+                        type="datetime"
+                        format="YYYY-MM-DD"
+                        value-format="YYYY-MM-DD HH:mm:ss"
+                        placeholder="理赔支付时间"
+                        size="default"
+                      />
+                    </el-form-item>
+                    <el-form-item label="支付方式">
+                      <el-select
+                        v-model="item.compensationMethod"
+                        placeholder="请选择支付方式"
+                        style="width: 100%"
+                        clearable
+                      >
+                        <el-option
+                          v-for="items in item.Paymentmethod"
+                          :key="items.value"
+                          :label="items.label"
+                          :value="items.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+                  </div>
+                </div>
+              </template>
             </div>
           </el-tab-pane>
         </el-tabs>
@@ -435,14 +565,16 @@ const form = ref({
   TabactiveName: '0', //工单类型菜单
   activPackage: '0', //包件信息菜单
   responsibilities: '0', //内部责任菜单
+  ProcessingTab: '0', //处理结果菜单
   Pageloading: false, //页面加载
   Packageloading: false, //包件加载
   historydialog: false, //历史包件弹窗
   groundlineType: 0, //发现节点
+  Proportion: 100, //公司占比
+  totalMax: 100, //公司占比最大值
   //   包件列表
   PackageList: [
     {
-      sequence: 1, //序号
       packageCode: '', //包条码
       waybillNumber: '', //运单号
       orderCode: '', //订单自编号
@@ -454,36 +586,66 @@ const form = ref({
   ], //历史包件列表
   Historicalpackage: [],
   //   内部责任划分
-  responsibilitiesList: [],
+  responsibilitiesList: [
+    {
+      businessName: '', //责任方
+      personResponsibleName: '', //责任人
+      responsibilityRatio: 0, //占比
+      description: '', //三方责任人
+      tripartite: '', //说明
+      ProportionMax: 100, //最大值校验
+      Processingoptions: [
+        //提货责任方列表
+      ],
+      Responsibleoptions: [
+        // 责任方
+      ],
+      ResponsibleoNameptions: [
+        // 责任人列表
+      ],
+    },
+  ],
+  //   理赔金额
+  Claimamount: [],
 });
 const ruleForm = reactive({
-  workOrderType: [{ required: true, message: '请选择异常类型', trigger: 'bulr' }],
-  discoveryNode: [{ required: true, message: '请选择发现节点', trigger: 'bulr' }],
-  packageCode: [{ required: true, message: '请输入包条码', trigger: 'bulr' }],
-  waybillNumber: [{ required: true, message: '请输入运单号', trigger: 'bulr' }],
-  orderCode: [{ required: true, message: '请输入订单自编号', trigger: 'bulr' }],
-  first: [{ required: true, message: '请输入一级品', trigger: 'bulr' }],
-  secondary: [{ required: true, message: '请输入二级品', trigger: 'bulr' }],
-  brandName: [{ required: true, message: '请输入品牌', trigger: 'bulr' }],
-  trainNumber: [{ required: true, message: '请选择车次号', trigger: 'bulr' }],
-  deliveryTime: [{ required: true, message: '请输入配送时间', trigger: 'bulr' }],
-  deliveryDriver: [{ required: true, message: '请输入配送司机', trigger: 'bulr' }],
-  vehicleRoute: [{ required: true, message: '请输入车辆线路', trigger: 'bulr' }],
-  deliverGoodsTime: [{ required: true, message: '请输入发货时间', trigger: 'bulr' }],
-  warehousingTime: [{ required: true, message: '请选择入库时间', trigger: 'bulr' }],
-  discoveryTime: [{ required: true, message: '请选择发现时间', trigger: 'bulr' }],
-  waybillMall: [{ required: true, message: '请输入运单商场', trigger: 'bulr' }],
-  typeServiceName: [{ required: true, message: '请输入合作模式', trigger: 'bulr' }],
-  processor: [{ required: true, message: '请输入处理方', trigger: 'bulr' }],
-  investigationPocess: [{ required: true, message: '请输入调查经过', trigger: 'bulr' }],
+  workOrderType: [{ required: true, message: '请选择异常类型', trigger: ['bulr', 'change'] }],
+  discoveryNode: [{ required: true, message: '请选择发现节点', trigger: ['bulr', 'change'] }],
+  packageCode: [{ required: true, message: '请输入包条码', trigger: ['bulr', 'change'] }],
+  waybillNumber: [{ required: true, message: '请输入运单号', trigger: ['bulr', 'change'] }],
+  orderCode: [{ required: true, message: '请输入订单自编号', trigger: ['bulr', 'change'] }],
+  first: [{ required: true, message: '请输入一级品', trigger: ['bulr', 'change'] }],
+  secondary: [{ required: true, message: '请输入二级品', trigger: ['bulr', 'change'] }],
+  brandName: [{ required: true, message: '请输入品牌', trigger: ['bulr', 'change'] }],
+  trainNumber: [{ required: true, message: '请选择车次号', trigger: ['bulr', 'change'] }],
+  deliveryTime: [{ required: true, message: '请输入配送时间', trigger: ['bulr', 'change'] }],
+  deliveryDriver: [{ required: true, message: '请输入配送司机', trigger: ['bulr', 'change'] }],
+  vehicleRoute: [{ required: true, message: '请输入车辆线路', trigger: ['bulr', 'change'] }],
+  deliverGoodsTime: [{ required: true, message: '请输入发货时间', trigger: ['bulr', 'change'] }],
+  warehousingTime: [{ required: true, message: '请选择入库时间', trigger: ['bulr', 'change'] }],
+  discoveryTime: [{ required: true, message: '请选择发现时间', trigger: ['bulr', 'change'] }],
+  waybillMall: [{ required: true, message: '请输入运单商场', trigger: ['bulr', 'change'] }],
+  typeServiceName: [{ required: true, message: '请输入合作模式', trigger: ['bulr', 'change'] }],
+  processor: [{ required: true, message: '请输入处理方', trigger: ['bulr'] }],
+  investigationPocess: [{ required: true, message: '请输入调查经过', trigger: ['bulr', 'change'] }],
+  businessName: [{ required: true, message: '请选择责任方', trigger: ['bulr', 'change'] }],
+  personResponsibleName: [{ required: true, message: '请输入责任人', trigger: ['bulr', 'change'] }],
+  responsibilityRatio: [{ required: true, message: '请输入占比', trigger: ['bulr', 'change'] }],
+  tripartite: [{ required: true, message: '请输入三方责任人', trigger: ['bulr', 'change'] }],
+  description: [{ required: true, message: '请输入说明', trigger: ['bulr', 'change'] }],
 });
+const ResponsibleParty = ref([]); //提货责任方
 const ruleFormRef = ref(); //表单示例
 // 异常类型
 const Exceptionoptions = ref([]);
 // 发现节点
 const Discoveringoptions = ref([]);
-// 处理方
+// 处理方/责任方
 const Processingoptions = ref([]);
+// 支付方式
+const Paymentmethodoptions = ref([]);
+// 处理结果
+const Processingresultsoptions = ref([]);
 // 车次号
 const Trainoptions = ref([]);
 // 字典公共函数
@@ -498,8 +660,8 @@ async function updateDictionary(targetArray, dictionaryType) {
   });
 }
 // 获取处理方和责任方
-const Handling = () => {
-  getDeptWarehouse().then(res => {
+const Handling = async () => {
+  await getDeptWarehouse().then(res => {
     let data = [];
     if (res.data.code == 200) {
       if (res.data && res.data.data.length) {
@@ -514,13 +676,68 @@ const Handling = () => {
     }
   });
 };
+// 页面初始化数据处理
+const PageState = () => {
+  // 内部责任划分处理
+  form.value.responsibilitiesList = [
+    {
+      businessName: '', //责任方
+      personResponsibleName: '', //责任人
+      responsibilityRatio: 0, //占比
+      description: '', //三方责任人
+      tripartite: '', //说明
+      ProportionMax: 100, //最大值校验
+      Processingoptions: [
+        //提货责任方列表
+        ...ResponsibleParty.value,
+      ],
+      Responsibleoptions: [
+        // 责任方
+        ...Processingoptions.value,
+      ],
+      ResponsibleoNameptions: [
+        // 责任人列表
+      ],
+      id: 1,
+    },
+  ];
+  //包件列表
+  form.value.PackageList = [
+    {
+      packageCode: '', //包条码
+      waybillNumber: '', //运单号
+      orderCode: '', //订单自编号
+      first: '', //一级品
+      secondary: '', //二级品
+      brandName: '', //品牌
+      history: true, //是否有历史包间
+      id: 1,
+    },
+  ];
 
+  //理赔金额
+
+  form.value.Claimamount = [
+    {
+      title: '', //标题
+      money: 0, //金额
+      paymentUnit: '', //支付单位
+      compensationTime: '', //理赔支付时间
+      compensationMethod: '', //支付方式
+      Paymentmethod: [...Paymentmethodoptions.value],
+    },
+  ];
+};
 // 页面必要初始化请求
 const onLoad = async () => {
   form.value.Pageloading = true; //开启页面加载
   await updateDictionary(Exceptionoptions.value, 'pc_work_order'); //异常类型
   await updateDictionary(Discoveringoptions.value, 'pc_discovery_node'); //发现环节
+  await updateDictionary(ResponsibleParty.value, 'Responsible_party'); //责任方
+  await updateDictionary(Paymentmethodoptions.value, 'payment_method'); //支付方式
+  await updateDictionary(Processingresultsoptions.value, 'result_handling'); //理赔选择
   await Handling(); //获取处理方和责任方
+  await PageState(); //页面基础数据处理
   form.value.Pageloading = false; //关闭页面加载
 };
 onLoad();
@@ -564,6 +781,7 @@ const Addpackages = () => {
     first: '', //一级品
     secondary: '', //二级品
     brandName: '', //品牌
+    id: form.value.PackageList.length + 1,
   };
   form.value.PackageList.push(data);
 };
@@ -575,31 +793,115 @@ const Removepackage = index => {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning',
-  })
-    .then(async () => {
-      await form.value.PackageList.splice(index, 1); //移除当前点击的按钮
-      ElMessage({
-        message: '移除成功.',
-        type: 'success',
-        plain: true,
-      });
-    })
-    .catch(() => {
-      ElMessage({
-        type: 'info',
-        message: 'Delete canceled',
-      });
+  }).then(async () => {
+    await form.value.PackageList.splice(index, 1); //移除当前点击的按钮
+    form.value.PackageList.forEach((item, index) => {
+      item.id = index + 1;
+    });
+    console.log(form.value.PackageList, 'form.value.PackageList');
+    ElMessage({
+      message: '移除成功.',
+      type: 'success',
+      plain: true,
     });
+  });
 };
 
 // 历史包件查看
 const ViewhistoricalPackages = () => {
   form.value.historydialog = true; //打开弹窗
 };
+// 新增责任方
+const AddResponsible = () => {
+  form.value.Packageloading = true;
+  let time = setTimeout(() => {
+    form.value.Packageloading = false;
+    clearTimeout(time);
+  }, 300);
+  let data = {
+    businessName: '', //责任方
+    personResponsibleName: '', //责任人
+    responsibilityRatio: 0, //占比
+    description: '', //三方责任人
+    tripartite: '', //说明
+    ProportionMax: 100, //最大值校验
+    Processingoptions: [
+      //提货责任方列表
+      ...ResponsibleParty.value,
+    ],
+    Responsibleoptions: [
+      // 责任方
+      ...Processingoptions.value,
+    ],
+    ResponsibleoNameptions: [
+      // 责任人列表
+    ],
+    id: form.value.responsibilitiesList.length + 1,
+  };
+  form.value.responsibilitiesList.push(data);
+  calculateMaxValues();
+};
+// 责任方移除
+const Responsemoval = index => {
+  console.log(index, 'index===>');
+  ElMessageBox.confirm('是否移除当前责任信息?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    await form.value.responsibilitiesList.splice(index, 1); //移除当前点击的按钮
+    form.value.responsibilitiesList.forEach((item, index) => {
+      item.id = index + 1;
+    });
+    calculateMaxValues(); //调用占比计算
+    ElMessage({
+      message: '移除成功.',
+      type: 'success',
+      plain: true,
+    });
+  });
+};
 
+const calculateMaxValues = () => {
+  // 计算每个输入框剩余最大值
+  let data = form.value.responsibilitiesList;
+  let totalUsed = data.reduce((acc, item) => acc + item.responsibilityRatio, 0);
+  data.forEach(item => {
+    item.ProportionMax = Math.min(100, form.value.totalMax - totalUsed + item.responsibilityRatio);
+  });
+
+  //   计算公司占比
+  let totasum = data.reduce((acc, item) => acc + item.responsibilityRatio, 0);
+  form.value.Proportion = form.value.totalMax - totasum;
+};
+
+// 公司占比计算
+const CompanyProportionInput = value => {
+  calculateMaxValues();
+};
+
+const Claimssettlement = value => {
+  console.log(value, '理赔金额');
+  console.log(Processingresultsoptions.value, '参数列表');
+  let toa = ['1', '2'];
+  let data = [];
+  value.forEach(item => {
+    let _data = Processingresultsoptions.value.find(res => res.value == item);
+    if (_data) {
+      data.push(_data);
+    }
+  });
+  console.log(data, '筛选出来的值');
+  if (data && data.length) {
+    data.forEach(item => {
+        
+    });
+  }
+};
 const historyPush = () => {};
 // 提交
 const onSubmit = () => {
+  console.log(form.value);
   ruleFormRef.value.validate(valid => {
     console.log(valid, '123123');
   });
@@ -658,6 +960,8 @@ const TabactiveClick = (a, b) => {
   .el_Package {
     display: flex;
     align-items: center;
+    border-bottom: 1px solid #afbdc3;
+    margin-bottom: 10px;
     .el_activPackage_btton {
       flex: 1;
       display: flex;
@@ -672,12 +976,25 @@ const TabactiveClick = (a, b) => {
     width: 80%;
     display: flex;
     justify-content: space-between;
+    align-items: center;
     .el-form-item {
       width: 16%;
+      margin-right: 0;
       .el-form-item__label {
         margin-bottom: 0;
       }
     }
+    .Number {
+      width: 20px;
+      height: 20px;
+      background-color: #666;
+      color: #fff;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+    }
   }
   .el_addPackage {
     background-color: #409eff;
@@ -690,14 +1007,14 @@ const TabactiveClick = (a, b) => {
     margin-bottom: 10px;
     height: 40px;
     .el_Package_num {
-      margin-left: 120px;
+      margin-left: 64px;
       font-size: 14px;
       height: 80%;
       border-bottom: 1px solid #409eff;
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 12px;
+      padding: 2px;
       box-sizing: border-box;
       span {
         color: #666;
@@ -738,7 +1055,7 @@ const TabactiveClick = (a, b) => {
     display: flex;
     min-width: 20%;
     .el_Processing {
-      width: 39.6%;
+      min-width: 430px;
     }
     :deep(.el_Investigation) {
       flex: 1;
@@ -755,17 +1072,21 @@ const TabactiveClick = (a, b) => {
 .responsibilities {
   .el_responsibilities {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     .el-form-item {
-      width: 12.8%;
+      width: 16%;
       margin-right: 10px;
       .el-input-number {
         width: 100%;
       }
     }
     :deep(.el_responsibilities_box) {
-      display: flex;
       width: 80%;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #afbdc3;
+      margin-bottom: 10px;
       .el-form-item {
         .el-form-item__label {
           margin-bottom: 0;
@@ -774,6 +1095,76 @@ const TabactiveClick = (a, b) => {
       .el_Investigation {
         flex: 1;
       }
+      .Number {
+        width: 20px;
+        height: 20px;
+        background-color: #666;
+        margin-right: 4px;
+        color: #fff;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+      }
+    }
+  }
+  .el_top {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    height: 40px;
+    .el_addPackage {
+      background-color: #409eff;
+      border: none;
+    }
+    .el_Package_num {
+      margin-left: 36px;
+      font-size: 14px;
+      height: 80%;
+      border-bottom: 1px solid #409eff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2px;
+      box-sizing: border-box;
+      span {
+        color: #666;
+        font-weight: 500;
+      }
+    }
+  }
+  :deep(.is-active) {
+    font-weight: bold;
+  }
+}
+// 处理结果
+:deep(.Processingresults) {
+  .is-active {
+    font-weight: bold;
+  }
+  .el_Processingresults {
+    display: flex;
+    flex-wrap: wrap;
+    .el_Processingresults_box {
+      display: flex;
+      flex-direction: column;
+      width: 48%;
+      .el_title {
+        display: flex;
+        width: fit-content;
+        padding: 0 2px;
+        margin-bottom: 4px;
+        border-left: 3px solid #172e60;
+      }
+      .el_Processingresults_box_list {
+        display: flex;
+        .el-form-item {
+          .el-form-item__label {
+            margin-bottom: 0;
+          }
+        }
+      }
     }
   }
 }