logpm_page/src/views/aftersales/aftersalesWorkOrderAdd.vue

<template>
  <el-divider content-position="left">
    <span> {{ routerState ? '信息查看' : '工单新增' }}</span>
  </el-divider>

  <el-form :model="Indexform" label-width="100px" class="IndexFrom" ref="IndexForm">
    <el-form-item label="异常类型">
      <el-select
        v-model="Indexform.workOrderType"
        clearable
        placeholder="选择工单异常类型"
        @change="abnormalChange"
      >
        <el-option
          v-for="item in IndexException"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="发现节点">
      <el-select
        v-model="Indexform.discoveryNode"
        clearable
        placeholder="选择发现节点"
        @change="DiscoveringNodesChange"
      >
        <el-option
          v-for="item in DiscoveringNodes"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="异常工单号">
      <el-input v-model="Indexform.workOrderNumber" placeholder="请输入异常工单号" clearable />
    </el-form-item>
    <!-- 必填(提货环节可以不填写运单号) -->
    <!-- <el-form-item label="运单号" v-if="groundlineType != 1">
      <el-input v-model="Indexform.waybillNumber" placeholder="请输入运单号" clearable />
    </el-form-item> -->

    <!-- <el-form-item label="少货件数" v-if="StateType || SelectType == 2">
      <div class="moneyNum">
        <el-input
          @change="ShortageTtems"
          v-model="Indexform.number"
          placeholder="请输入少货件数"
          clearable
        />
        <div class="el_btn" @click="moneyBtnA"><span>编辑</span></div>
      </div>
    </el-form-item> -->

    <!-- <el-form-item label="窜货件数" v-if="StateType || SelectType == 3">
      <div class="moneyNum">
        <el-input
          @change="fleeingTtems"
          v-model="Indexform.number"
          placeholder="请输入窜货件数"
          clearable
        />
        <div class="el_btn" @click="moneyBtnB"><span>编辑</span></div>
      </div>
    </el-form-item> -->

    <!-- <el-form-item
      label="包条码"
      v-if="SelectType == 1 || SelectType == 2 || SelectType == 3 || StateType"
    >
      <el-input
        v-model="Indexform.packageCode"
        placeholder="请输入包条码,多个用逗号隔开"
        clearable
      />
    </el-form-item> -->

    <!-- 必填 -->
    <!-- <el-form-item label="订单自编号">
      <el-input v-model="Indexform.orderCode" placeholder="请输入订单自编号" clearable />
    </el-form-item> -->

    <el-form-item
      label="车次号"
      v-if="
        groundlineSet ||
        groundlineType == 1 ||
        groundlineType == 3 ||
        groundlineType == 4 ||
        groundlineType == 8 ||
        groundlineType == 5 ||
        groundlineType == 7 ||
        groundlineType == 8
      "
    >
      <el-input
        v-model="Indexform.trainNumber"
        placeholder="请输入车次号(干线卸车环节)"
        clearable
      />
    </el-form-item>
    <!-- 必填 -->
    <el-form-item label="一级品">
      <el-input v-model="Indexform.first" placeholder="请输入一级品类" clearable />
    </el-form-item>
    <!-- 必填 -->
    <el-form-item label="二级品">
      <el-input v-model="Indexform.secondary" placeholder="请输入二级品类" clearable />
    </el-form-item>

    <el-form-item label="车辆路线" v-if="groundlineSet || groundlineType == 3">
      <el-input
        v-model="Indexform.vehicleRoute"
        placeholder="请输入车辆路线车次号(通过车次号自动带出车辆路线)"
        clearable
      />
    </el-form-item>

    <el-form-item label="发货时间">
      <el-date-picker
        v-model="Indexform.deliverGoodsTime"
        type="datetime"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        placeholder="请选择发货时间"
      />
    </el-form-item>

    <el-form-item
      label="发现时间"
      v-if="
        groundlineSet ||
        groundlineType == 2 ||
        groundlineType == 3 ||
        groundlineType == 4 ||
        groundlineType == 8 ||
        groundlineType == 5 ||
        groundlineType == 7 ||
        groundlineType == 8
      "
    >
      <el-date-picker
        v-model="Indexform.discoveryTime"
        type="datetime"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        placeholder="请选择发现时间"
      />
    </el-form-item>

    <el-form-item
      label="配送时间"
      v-if="
        groundlineSet ||
        groundlineType == 3 ||
        groundlineType == 4 ||
        groundlineType == 8 ||
        groundlineType == 5 ||
        groundlineType == 7 ||
        groundlineType == 8
      "
    >
      <el-date-picker
        v-model="Indexform.deliveryTime"
        type="datetime"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        placeholder="请选择配送时间"
      />
    </el-form-item>

    <el-form-item
      label="入库时间"
      v-if="groundlineSet || groundlineType == 2 || groundlineType == 4"
    >
      <el-date-picker
        v-model="Indexform.warehousingTime"
        type="datetime"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        placeholder="请选择入库"
      />
    </el-form-item>
    <!-- 必填 -->
    <el-form-item label="运单商场">
      <el-input v-model="Indexform.waybillMall" placeholder="请输入运单商场" clearable />
    </el-form-item>

    <el-form-item
      label="配送司机"
      v-if="
        groundlineSet ||
        groundlineType == 3 ||
        groundlineType == 4 ||
        groundlineType == 8 ||
        groundlineType == 5 ||
        groundlineType == 7 ||
        groundlineType == 8
      "
    >
      <el-select
        v-model="Indexform.deliveryDriver"
        filterable
        default-first-option
        :reserve-keyword="false"
        placeholder="请输入配送司机"
      >
        <el-option
          v-for="item in DeliveryDriver"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <!-- 必填 -->
    <el-form-item label="异常问题描述">
      <el-input v-model="Indexform.problemDescription" placeholder="请输入异常问题" clearable />
    </el-form-item>
  </el-form>

  <!-- 必填 -->
  <div class="el_clzr">
    <el-form-item class="investigate" label="调查经过">
      <el-input
        v-model="Indexform.investigationPocess"
        placeholder="请输入调查经过"
        clearable
        :rows="2"
        type="textarea"
      />
    </el-form-item>

    <el-form-item label="处理方">
      <el-select
        v-model="Indexform.processor"
        clearable
        filterable
        multiple
        placeholder="请选择处理方"
      >
        <el-option
          v-for="item in warehouseData"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <!-- 提货环节  -->
    <el-form-item label="责任方" v-if="groundlineSet || groundlineType == 1">
      <el-select v-model="Indexform.businessMame" clearable placeholder="请选提货择责任方">
        <el-option
          v-for="item in responsible"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
  </div>

  <el-tabs type="border-card" class="PackageInformation">
    <el-tab-pane label="包件信息">
      <div class="ResponsibilityBoxS">
        <div><el-button type="primary" @click="ConfirmForm"> 添加信息 </el-button></div>
        <div class="el_btbox">
          <div class="leftbox">
            <div class="maxBox">
              <span class="title">包条码:</span>
              <el-input
                v-model="Indexform.packageCode"
                placeholder="请输入调查经过"
                clearable
                :rows="2"
              />
            </div>

            <div class="maxBox">
              <span class="title">订单自编码:</span>
              <el-input v-model="Indexform.orderCode" placeholder="请输入订单自编号" clearable />
            </div>

            <div class="maxBox">
              <span class="title">运单号:</span>
              <el-input v-model="Indexform.orderCode" placeholder="请输入运单号" clearable />
            </div>
          </div>

          <div class="el-btn">
            <el-button type="primary" @click="ConfirmForm"> 移除 </el-button>
          </div>
        </div>
        <div class="NumTotal">
          <span>总件数:{{ Indexform.number }}</span>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>

  <el-tabs type="border-card">
    <el-tab-pane label="责任方选择">
      <div class="ResponsibilityBox">
        <div><el-button type="primary" @click="ConfirmForm"> 添加信息 </el-button></div>
        <div class="el_btbox">
          <div class="leftbox">
            <div class="maxBox">
              <span class="title">责任方:</span>
              <el-select
                v-model="Indexform.duty"
                clearable
                filterable
                multiple
                placeholder="请选择责任方"
              >
                <el-option
                  v-for="item in warehouseData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="maxBox">
              <span class="title">责任人：</span>
              <el-input
                v-model="Indexform.personResponsible"
                :disabled="FromDisabled"
                placeholder="请输入责任人"
                clearable
              />
            </div>
            <div class="maxBox">
              <span class="title">占比:</span>
              <el-input
                v-model="Indexform.investigationPocess"
                placeholder="请输入调查经过"
                clearable
                :rows="2"
              />
            </div>
            <div class="maxBox">
              <span class="title">公司占比:</span>
              <el-input
                v-model="Indexform.investigationPocess"
                placeholder="请输入调查经过"
                clearable
                :rows="2"
              />
            </div>
          </div>
          <div class="el-btn">
            <el-button type="primary" @click="ConfirmForm"> 移除 </el-button>
          </div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>

  <div class="Transport_damage_photos" v-if="SelectType == 1 || SelectType == 3 || StateType">
    <span class="title">{{
      SelectType == 1 ? '运损照片' : SelectType == 3 ? '窜货照片' : '照片'
    }}</span>
    <el-upload
      v-model:file-list="Indexform.packList"
      list-type="picture-card"
      :on-preview="pictureList"
      :on-remove="ImgListRemove"
      :action="doubledCount"
      :on-success="ImgSuccess"
      :before-upload="beforeAvatarUpload"
      :headers="headers"
      multiple
      drag
    >
      <el-icon><Plus /></el-icon>
    </el-upload>

    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="图片" />
    </el-dialog>
  </div>

  <div class="dialog-footer">
    <el-button @click="Indexdialog = false">取消</el-button>
    <el-button type="primary" @click="ConfirmForm"> 提交 </el-button>
  </div>

  <!-- 少货件数大于3 -->
  <el-dialog
    :show-close="false"
    v-model="ShortageState"
    title="少货件数"
    width="40%"
    @close="ShortageStateFun"
    lock-scroll
    draggable
  >
    <div class="ShortageStatenum" v-for="item in ShortageList">
      <span class="title">件数{{ item.number }}</span
      ><el-input v-model="item.packageCode" placeholder="请输入包条码" />
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="ShortageCancellation">取消</el-button>
        <el-button type="primary" @click="ShortageState = false"> 确认信息 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 窜货件数大于3 -->
  <el-dialog
    :show-close="false"
    v-model="fleeingState"
    title="窜货件数"
    width="40%"
    @close="fleeingFun"
    lock-scroll
    draggable
  >
    <div class="ShortageStatenum" v-for="item in fleeingList">
      <span class="title">件数{{ item.number }}</span
      ><el-input v-model="item.packageCode" placeholder="请输入包条码" />
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="fleeingCancellation">取消</el-button>
        <el-button type="primary" @click="ShortageState = false"> 确认信息 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import { getDictionaryBiz } from '@/api/system/dict'; //字典
import { getDetailWarehouse, getDeptWarehouse } from '@/api/basicdata/basicdataWarehouse'; //处理方
import { $_getList, $_submit, $_getDetail, $_remove } from '@/api/aftersales/aftersalesWorkOrder';
import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
import { getToken } from '@/utils/auth';
const $router = useRouter();
const $route = useRoute();
const Indexform = ref({
  packList: [
    {
      name: 'food.jpeg',
      url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
    {
      name: 'food.jpeg',
      url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
  ],
  decreaseImageEntityList: [], //处理好的图片数据
}); //首页新增表单
const IndexException = ref([]); //异常类型下拉选择
const DiscoveringNodes = ref([]); //发现节点下拉选择
const warehouseData = ref([]); //处理方
const SelectType = ref(null); //类型
const StateType = ref(true); //类型
const dialogImageUrl = ref(null); //图片
const dialogVisible = ref(null); //图片
const groundlineSet = ref(true); //干线条件都满足
const groundlineType = ref(null); //干线状态
const ShortageState = ref(false); //少货件数弹窗状态
const fleeingState = ref(false); //窜货件数弹窗
const ShortageList = ref([]); //少货件数
const fleeingList = ref([]); //窜货件数
const valueStrictly = ref();
const routerID = ref(null); //路由参数ID
const routerState = ref(null); //路由状态
// 提货责任方
const responsible = ref([
  {
    value: '1',
    label: '工厂',
  },
  {
    value: '2',
    label: '外包搬运',
  },
  {
    value: '3',
    label: '物流',
  },
]);

const DeliveryDriver = ref([
  {
    value: '0',
    label: '兰溪',
  },
  {
    value: '1',
    label: '李华',
  },
  {
    value: '2',
    label: '唐飞',
  },
]);
// 图片列表
const fileList = ref([]);
// 字典公共函数
function updateDictionary(targetArray, dictionaryType) {
  getDictionaryBiz(dictionaryType).then(res => {
    console.log(res, '字典');
    res.data.data.forEach(item => {
      targetArray.push({
        value: item.dictKey,
        label: item.dictValue,
      });
    });
  });
}
// 图片上传必须携带TOKEN
const headers = computed(() => {
  return { 'Blade-Auth': 'Bearer ' + getToken() };
});
// 图片上传接口
const doubledCount = computed(() => {
  return '/api/blade-resource/oss/endpoint/put-file';
});
// 图片上传成功回调函数
const ImgSuccess = (response, uploadFile) => {
  if (response.success === true) {
    console.log(response);
    Indexform.value['packList'].push({
      name: response.data.originalName,
      url: response.data.link,
    });
    console.log(Indexform.value['packList'], '图片列表');
  }
};

// 上传图片规则
const beforeAvatarUpload = rawFile => {
  if (rawFile.type !== 'image/png') {
    ElMessage.error('图片格式只能为image/png!');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能大于2MB!');
    return false;
  }
  return true;
};
// 点击图片列表回调
const pictureList = val => {
  console.log(val, '图片列表');
};
// 点击图片移除
const ImgListRemove = val => {
  console.log(val, '移除图片');
};
// 处理方和责任方获取数据
const handle = () => {
  getDeptWarehouse().then(res => {
    res.data.data.forEach(item => {
      warehouseData.value.push({
        value: item.id,
        label: item.name,
      });
    });
  });
};
const onLoad = () => {
  console.log($route.query.id, '页面初始化');
  routerState.value = $route.query.RouterState;
  updateDictionary(IndexException.value, 'pc_work_order'); //异常类型
  updateDictionary(DiscoveringNodes.value, 'pc_discovery_node'); //发现环节
  handle(); //处理方和责任方信息
};
onLoad(); //初始化程序
// 异常类型事件
const abnormalChange = val => {
  console.log(val, '异常事件类型');
  console.log(StateType.value);
  StateType.value = false;
  if (val == 1 || val == 2 || val == 3) {
    SelectType.value = val;
  } else {
    StateType.value = true;
  }
  // 运损无数据默认0
  if (val == 1) {
    Indexform.value.packageCode = 0;
  } else {
    Indexform.value.packageCode = null;
  }
};

// 发现节点事件
const DiscoveringNodesChange = val => {
  groundlineSet.value = false; //干线条件都不满足
  if (val == 1 || val == 2 || val == 3 || val == 4 || val == 5 || val == 8 || val == 7) {
    groundlineType.value = val; //干线状态
    console.log(val);
  } else {
    groundlineSet.value = true; //展示所有搜索框
  }
};

// 照片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview = uploadFile => {
  dialogImageUrl.value = uploadFile.url;
  dialogVisible.value = true;
};
//表单提交
const ConfirmForm = () => {
  // 图片类型:10运损,20窜货
  // decreaseImageEntityList:[
  //   {imageType:10,imageName:'图片名称',imagePath:'图片路径'},
  //   {imageType:10,imageName:'图片名称',imagePath:'图片路径'},
  // ]
  console.log(Indexform.value['packList'], '图片列表');
  // 处理图片(当类型为货损或为窜货才执行下面的东西)
  if (SelectType.value == 1 || SelectType.value == 3) {
    if (Indexform.value['packList']) {
      Indexform.value['packList'].forEach(item => {
        Indexform.value['decreaseImageEntityList'].push({
          imageType: SelectType.value == 1 ? 10 : SelectType.value == 3 ? 20 : '',
          imageName: item.name,
          imagePath: item.url,
        });
      });
    }
  }

  console.log(Indexform.value['decreaseImageEntityList'], '处理好的图片');
  //司机信息处理
  if (Indexform.value.deliveryDriver) {
    Indexform.value.deliveryDriver = DeliveryDriver.value.find(
      item => item.value == Indexform.value.deliveryDriver
    ).label;
  }

  console.log(Indexform.value.deliveryDriver); // 输出李华
  let processorEntityList = [];

  //处理方信息处理
  if (Indexform.value.processor.length) {
    Indexform.value.processor.forEach(item => {
      let found = warehouseData.value.find(element => element.value == item.toString());
      processorEntityList.push({
        businessName: found ? found.label : '',
        businessId: item,
        conditions: 1,
        typesOf: 2,
      });
    });
  }
  console.log(Indexform.value.duty.length);
  //责任方信息处理
  if (Indexform.value.duty.length) {
    Indexform.value.duty.forEach(item => {
      let found = warehouseData.value.find(element => element.value == item.toString());
      processorEntityList.push({
        businessName: found ? found.label : '',
        businessId: item,
        conditions: 1,
        typesOf: 1,
      });
    });
  }

  console.log(Indexform.value.businessMame, '提货责任方');
  // 提货责任方
  if (Indexform.value.businessMame) {
    const found = responsible.value.find(item => item.value === Indexform.value.businessMame);
    if (found) {
      processorEntityList.push({
        businessName: found.label,
        businessId: found.id,
        conditions: 1,
        typesOf: 1,
      });
    }
  }
  //  提货责任方
  console.log(Indexform.value.businessMame, '提货责任方');
  let DataSubmit = { ...Indexform.value }; //解构表单参数
  DataSubmit.processorEntityList = processorEntityList;
  DataSubmit.decreaseImageEntityList = JSON.parse(
    JSON.stringify(Indexform.value['decreaseImageEntityList'])
  );
  delete DataSubmit.duty, //移除多余字段
    delete DataSubmit.packList; //移除图片原始字段
  delete DataSubmit.processor; //移除多余字段
  console.log(DataSubmit, '处理好的数据');
  //提交表单信息stringify
  $_submit(DataSubmit).then(res => {
    if (res.data.code == 200) {
      ElMessage({
        message: res.data.msg,
        type: 'success',
      });
      Indexform.value = {}; //重置表单
      $router.push('/aftersales/aftersalesWorkOrder'); //添加成功跳转到列表
    }
  });
};

// 少货件数对应事件
const ShortageTtems = val => {
  ShortageList.value = []; //进入之前重置参数
  const pattern = /\s+/g;
  const result = val.replace(pattern, '');
  console.log(result); // 输出 "33"
  Indexform.value.number = result;
  if (Indexform.value.number > 1) {
    ShortageState.value = true; //数量大于1，开启弹窗输入
  }
  for (let i = 0; i < val; i++) {
    ShortageList.value.push({
      number: i + 1, //件数
      packageCode: null, //输入框
    });
  }
};
// 少货关闭回调
const ShortageStateFun = () => {
  ShortageList.value.forEach(item => {
    if (item.packageCode == null) {
      Indexform.value.number = null;
    }
  });
};
// 少货按钮取消
const ShortageCancellation = () => {
  Indexform.value.number = null; //少货件数
  ShortageList.value = []; //进入之前重置参数
  ShortageState.value = false; //关闭弹窗
};
// 窜货关闭回调
const fleeingFun = () => {
  fleeingList.value.forEach(item => {
    if (item.packageCode == null) {
      Indexform.value.number = null;
    }
  });
};
// 窜货取消事件
const fleeingCancellation = () => {
  Indexform.value.number = null; //少货件数
  fleeingList.value = []; //进入之前重置参数
  fleeingState.value = false; //关闭弹窗
};
// 窜货输入框
const fleeingTtems = val => {
  fleeingList.value = []; //进入之前重置参数
  const pattern = /\s+/g;
  const result = val.replace(pattern, '');
  console.log(result); // 输出 "33"
  Indexform.value.number = result;
  if (Indexform.value.number > 1) {
    fleeingState.value = true; //数量大于1，开启弹窗输入
  }
  for (let i = 0; i < val; i++) {
    fleeingList.value.push({
      number: i + 1, //件数
      packageCode: null, //输入框
    });
  }
};
// 少货编辑
const moneyBtnA = () => {
  if (!Indexform.value.number) {
    ElMessage({
      message: '请输入少货数量',
      type: 'warning',
    });
    return;
  }
  ShortageState.value = true; //开启弹窗输入
};
// 窜货编辑
const moneyBtnB = () => {
  if (!Indexform.value.number) {
    ElMessage({
      message: '请输入窜货数量',
      type: 'warning',
    });
    return;
  }
  fleeingState.value = true; //开启弹窗输入
};
</script>

<style scoped lang="scss">
.IndexFrom {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  .el-form-item {
    height: 46px;
    display: flex;
    align-items: center;
    margin: 0;
    margin-bottom: 18px;
    flex: 1 0 30%;
    :deep(.el-form-item__label) {
      width: 100px !important;
    }
  }
  :deep(.el-form-item__content) {
    height: 100%;
    width: 70% !important;
    flex: none;
    .el-input {
      height: 100% !important;
      display: flex;
      align-items: center;
    }
  }
  .el-input__wrapper {
    height: 32px !important;
  }
  :deep(.el-input) {
    width: 100% !important;
  }
  :deep(.el-input__wrapper) {
    height: 30px !important;
  }
  :deep(.el-select) {
    width: 100%;
  }
  :deep(.el-form-item__label) {
    margin-left: 20px;
  }
}
.el_clzr {
  margin-top: 40px;

  :deep(.el-select) {
    width: 100%;
  }
  :deep(.el-input) {
    height: 38px;
  }
  :deep(.el-form-item__label) {
    margin-left: 20px;
    font-size: 14px;
    width: 100px !important;
  }
  .el-form-item {
    margin: 0;
    margin-bottom: 34px;
  }
  :deep(.el-input__wrapper) {
    height: 35px !important;
  }
  :deep(.el-form-item__content) {
    height: 100%;
    width: 90% !important;
    flex: none;
    .el-input {
      height: 100% !important;
      display: flex;
      align-items: center;
    }
  }
}
.Transport_damage_photos {
  display: flex;
  padding: 0 15px;
  margin-top: 20px;
  .title {
    width: 100px;
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
  }
}
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 0 10px;
  box-sizing: border-box;
  padding-right: 36px;
}
.investigate {
  :deep(.el-form-item__content) {
    width: 90% !important;
    box-sizing: border-box;
  }
}
.ShortageStatenum {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .title {
    width: 80px;
  }
  .remove {
    width: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ff0000;
  }
}
.moneyNum {
  display: flex;
  flex: 1;
  .el_btn {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    margin-left: 3px;
    border-radius: 4px;
    cursor: pointer;
  }
}
.ResponsibilityBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  .leftbox {
    width: 80%;
    display: flex;
    justify-content: space-between;
  }
  .maxBox {
    display: flex;
    align-items: center;

    .title {
      width: 120px;
      font-size: 14px;
      color: #606266;
    }
    .el-select {
      width: 100%;
    }
  }
  .el-btn {
    margin-left: 5%;
    border: none;
  }
  .el_btbox {
    display: flex;
    margin-top: 10px;
  }
}
.ResponsibilityBoxS {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  .leftbox {
    width: 80%;
    display: flex;
    justify-content: space-between;
  }
  .maxBox {
    display: flex;
    align-items: center;
    width: 30%;
    .title {
      width: 140px;
      color: #606266;
      font-size: 14px;
    }
    .el-select {
      width: 100%;
    }
  }
  .el-btn {
    margin-left: 5%;
    border: none;
  }
  .el_btbox {
    display: flex;
    margin-top: 10px;
  }
}
.PackageInformation {
  margin-bottom: 10px;
}
.NumTotal {
  width: 30%;
  margin-top: 16px;
  display: flex;
  align-items: center;
  span {
    width: 120px;
  }
}
</style>