icore-pass/src/views/appoint/components/saleContract/addSaleOrder.vue

<template>
  <!-- 添加销售订单 -->
  <div class="addSalePlan">
    <page-title>钢材订单新增</page-title>
    <!-- 订单基础信息 -->
    <el-form
      :inline="true"
      style="margin-top: 1rem;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
    >
      <el-form-item>
        <label class="el-form-item__label" style="width: auto;">发货单位</label>
        <el-autocomplete
          class="inline-input"
          v-model="shipperName"
          :fetch-suggestions="querySearchCarrier"
          placeholder="请输入发货单位名称"
          :trigger-on-focus="false"
          @select="handleSelectCarrier"
          style="width:245px"
        >
          <template slot-scope="{ item }">
            <div class="name">{{ item.shipperName }}</div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item>
        <label class="el-form-item__label" style="width: auto;">收货单位</label>
        <el-autocomplete
          class="inline-input"
          v-model="consigneeName"
          :fetch-suggestions="querySearchConsignee"
          placeholder="请输入收货单位名称"
          :trigger-on-focus="false"
          @select="handleSelectConsignee"
        >
          <template slot-scope="{ item }">
            <div class="name">{{ item.consigneeCompanyName }}</div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item>
        <label class="el-form-item__label" style="width: auto;">是否自提</label>
        <el-select v-model="values" placeholder="请选择" style="width:60px">
          <el-option
            v-for="item in options"
            :key="item.values"
            :label="item.label"
            :value="item.values"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <label class="el-form-item__label" style="width: auto;">收款公司</label>
        <el-select v-model="values1" placeholder="请选择" style="width: 255px">
          <el-option
            v-for="item in receivingCompany"
            :key="item.values1"
            :label="item.label1"
            :value="item.values1"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <label class="el-form-item__label" style="width: auto;">业务员</label>
        <el-select v-model="saleMan" placeholder="请选择" style="width: 90px">
          <el-option
            v-for="item in saleMans"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <label
          class="el-form-item__label"
          style="width: auto;margin-top: 0.3rem;"
          >摘要</label
        >
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="remarks"
          placeholder="(非必填)"
          style="width: 100px"
        ></el-input>
      </el-form-item>
    </el-form>

    <!-- 车序号基础信息 -->
    <el-form :inline="true" style="margin-top: 1rem;">
      <el-form-item>
        <label class="el-form-item__label" style="width: auto;">收货地址</label>
        <el-input
          style="width: 400px"
          v-model="saleShipperAddressName"
          disabled
        >
        </el-input>
        <el-button type="primary" @click="ondrawerOut">选择</el-button>
      </el-form-item>
      <el-form-item>
        <label class="el-form-item__label" style="width: auto;"
          >可装货时间</label
        >
        <el-date-picker
          class="textinput3"
          v-model.number="saleDateOfReceipt"
          type="datetime"
          placeholder="选择日期时间"
          disabled
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <label
          class="el-form-item__label"
          style="width: auto;margin-top: 0.4rem;"
          >收货客户电话</label
        >
      </el-form-item>
      <!-- <el-form-item>
        <label
          class="el-form-item__label"
          style="width: auto;margin-top: 0.4rem;color:red"
          >(注:不填无法收到发货短信)</label
        >
      </el-form-item> -->
      <el-form-item>
        <el-input
          style="width: 150px"
          v-model="saleOrderConsigneeTel"
          placeholder="(非必填)"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <label
          class="el-form-item__label"
          style="width: auto;margin-top: 0.4rem;"
          >备注</label
        >
      </el-form-item>
      <el-form-item>
        <el-input
          style="width: 180px"
          v-model="truckRemark"
          placeholder="(非必填)"
        ></el-input>
      </el-form-item>
    </el-form>

    <div class="button-box">
      <el-button type="primary" class="btn" @click="addMaterial"
        ><i class="el-icon-circle-plus-outline"></i>新增物资</el-button
      >
    </div>

    <!-- 车辆拼装物资信息table1 -->
    <div class="selectionTable from">
      <el-table
        :data="materialList"
        border
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column
          v-for="(item, i) in materialTableTop"
          :key="i"
          :prop="item.prop"
          :label="item.label"
          align="center"
          show-overflow-tooltip
        >
          <!-- 插入输入框 -->
          <template slot-scope="scope">
            <template v-if="item.slot">
              <!-- 物资件数 -->
              <template v-if="item.prop == 'orderPlanWeight'">
                <el-input
                  class="textinput111"
                  v-model.number="scope.row.orderPlanWeight"
                  placeholder="(必填)"
                ></el-input>
              </template>
              <!-- 米数 -->
              <template v-if="item.prop == 'meterNumber'">
                <el-input
                  v-if="scope.row.haveMeter == 1"
                  class="textinput111"
                  v-model.number="scope.row.meterNumber"
                  placeholder="(必填)"
                  :disabled="scope.row.isDisable == 1"
                ></el-input>
              </template>
              <!-- 分装车数 -->
              <template v-if="item.prop == 'carNumber'">
                <el-input
                  v-if="materialList.length == 1"
                  class="textinput111"
                  v-model.number="scope.row.carNumber"
                  placeholder="(非必填)"
                ></el-input>
              </template>
              <!-- 是否磅重销售 -->
              <template v-if="item.prop == 'isPound'">
                <el-select
                  v-model="scope.row.isPound"
                  placeholder="请选择"
                  style="width:65px"
                >
                  <el-option
                    v-for="item in options2"
                    :key="item.values2"
                    :label="item.label2"
                    :value="item.values2"
                  >
                  </el-option>
                </el-select>
              </template>
            </template>
            <template v-else>
              <span>{{ scope.row[item.prop] }}</span>
            </template>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="
                deleteMaterialRow(scope.$index, materialList)
              "
              type="text"
              icon="el-icon-close"
              size="big"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增物资和生成一车 -->
    <div class="button-box">
      <el-button type="primary" class="btn" @click="createACar"
        >添加到订单</el-button
      >
    </div>

    <div style="margin-left: 0.3rem;color:red">(注:一个车序号代表一辆车)</div>
    <!-- 销售订单信息table2 -->
    <div class="selectionTable from">
      <el-table
        :data="selectionList"
        border
        style="width: 100%"
        :span-method="cellMerge"
        highlight-current-row
      >
        <el-table-column
          v-for="(item, i) in tableTop"
          :key="i"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
          show-overflow-tooltip
        >
          <template slot="scope" v-if="item.label !== '物资名称'">
            <span>{{ item.label }}</span>
          </template>
          <template slot="scope" v-if="item.label !== '件数'">
            <span>{{ item.label }}</span>
          </template>
          <template slot="scope" v-if="item.label !== '收货地址'">
            <span>{{ item.label }}</span>
          </template>
          <!-- <template slot="scope" v-if="item.label !== '收货日期'">
            <span>{{ item.label }}</span>
          </template> -->
          <template slot="scope" v-if="item.label !== '收货姓名'">
            <span>{{ item.label }}</span>
          </template>
          <template slot="scope" v-if="item.label !== '收货方电话'">
            <span>{{ item.label }}</span>
          </template>
          <!-- 插入输入框 -->
          <template slot-scope="scope">
            <template v-if="item.slot">
              <!-- 物资名称 -->
              <template v-if="item.prop == 'materialName'">
                <el-input
                  style="width: 200px"
                  v-model="scope.row.materialName"
                  disabled
                >
                </el-input>
                <el-button type="primary" @click="changeMaterial(scope.$index)"
                  >更改</el-button
                >
              </template>
              <!-- 物资件数 -->
              <template v-if="item.prop == 'orderPlanWeight'">
                <el-input
                  class="textinput"
                  v-model.number="scope.row.orderPlanWeight"
                ></el-input>
              </template>
              <!-- 米数 -->
              <template v-if="item.prop == 'meterNumber'">
                <el-input
                  v-if="scope.row.haveMeter == 1"
                  class="textinput"
                  v-model.number="scope.row.meterNumber"
                ></el-input>
              </template>
              <!-- 是否磅重销售 -->
              <template v-if="item.prop == 'isPound'">
                <el-select
                  v-model="scope.row.isPound"
                  placeholder="请选择"
                  style="width:65px"
                >
                  <el-option
                    v-for="item in options2"
                    :key="item.values2"
                    :label="item.label2"
                    :value="item.values2"
                  >
                  </el-option>
                </el-select>
              </template>
              <!-- 收货地址id -->
              <template
                style="width: 300px"
                v-if="item.prop == 'saleShipperAddressName'"
              >
                <el-input
                  style="width: 250px"
                  v-model="scope.row.saleShipperAddressName"
                  disabled
                >
                </el-input>
                <el-button
                  type="primary"
                  @click="ondrawer(scope.row, scope.$index)"
                  >选择</el-button
                >
              </template>
              <!-- 收货日期 -->
              <!-- <template v-if="item.prop == 'saleDateOfReceipt'">
                <el-date-picker
                  class="textinput3"
                  type="date"
                  v-model.number="scope.row.saleDateOfReceipt"
                  @change="batchUpdateValue(scope.row,scope.$index)"
                  style="width:135px"
                ></el-date-picker>
              </template> -->
              <!-- 收货客户电话号码 -->
              <template v-if="item.prop == 'saleOrderConsigneeTel'">
                <el-input
                  class="textinput5"
                  placeholder="(必填)"
                  v-model.number="scope.row.saleOrderConsigneeTel"
                  @change="batchUpdateValue(scope.row, scope.$index)"
                ></el-input>
              </template>
              <template v-if="item.prop == 'truckRemark'">
                <el-input
                  class="textinput5"
                  placeholder="(必填)"
                  v-model.number="scope.row.truckRemark"
                  @change="batchUpdateValue(scope.row, scope.$index)"
                ></el-input>
              </template>
            </template>
            <template v-else>
              <span>{{ scope.row[item.prop] }}</span>
            </template>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, selectionList)"
              type="text"
              icon="el-icon-close"
              size="big"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 收货地址弹出框 -->
    <el-dialog title="收货地址" :visible.sync="drawer1" width="90%">
      <el-form :inline="true">
        <el-form-item>
          <label class="el-form-item__label" style="width: auto;">省</label>
          <el-select
            v-model="province"
            filterable
            placeholder="请选择"
            @change="onchangeProvince"
          >
            <el-option
              v-for="item in provinceList"
              :key="item.id"
              :label="item.addressProvince"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <label class="el-form-item__label" style="width: auto;">市</label>
          <el-select
            v-model="city"
            filterable
            placeholder="请选择"
            @change="onchangeCity"
          >
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.addressDistrict"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <label class="el-form-item__label" style="width: auto;">县(区)</label>
          <el-select
            v-model="county"
            filterable
            placeholder="请选择"
            @change="onchangeCounty"
          >
            <el-option
              v-for="item in countyList"
              :key="item.id"
              :label="item.addressTown"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <label class="el-form-item__label" style="width: auto;"
            >具体收货地址</label
          >
          <el-autocomplete
            class="inline-input"
            v-model="place"
            :fetch-suggestions="querySearch1"
            placeholder="请输入具体收货地址"
            :trigger-on-focus="false"
            @select="handleSelect1"
          >
          </el-autocomplete>
        </el-form-item>
      </el-form>
      <div slot="footer" class="button-box">
        <el-button @click="drawer1 = false">取 消</el-button>
        <el-button type="primary" @click="addAddressClick">确定</el-button>
      </div>
    </el-dialog>

    <!-- 物资选择模态框 -->
    <el-drawer
      title="选择物资信息"
      :visible.sync="table1"
      direction="rtl"
      size="90%"
      :show-close="true"
    >
      <el-form :inline="true" style="margin-top: 0.5rem;">
        <el-form-item>
          <label class="el-form-item__label" style="width: auto;"
            >物资名称/型号</label
          >
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入物资名称或型号"
            v-model="materialNameText"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <label class="el-form-item__label" style="width: auto;">规格</label>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入内容"
            v-model="materialSpecificationText"
            clearable
            ><template slot="prepend">Φ</template></el-input
          >
        </el-form-item>
        <el-button
          type="primary"
          class="btn"
          @click="onclick"
          style="margin-left: 4px;"
          ><i class="el-icon-search"></i>查询</el-button
        >
        <el-button type="primary" @click="makeSureMaterial"
          ><i class="el-icon-check"></i>确定</el-button
        >
      </el-form>
      <div class="tablecls">
        <!-- 查询所有的物资 -->
        <dilTable
          v-bind.sync="option"
          @selection-change="selectionChange"
          @rowDbClick="rowDbClick"
        >
        </dilTable>
      </div>
    </el-drawer>

    <!-- 更改行物资 -->
    <el-dialog title="更改物资" :visible.sync="drawer" width="80%">
      <el-form :inline="true" style="margin-top: 0.5rem;">
        <el-form-item>
          <label class="el-form-item__label" style="width: auto;"
            >物资名称/型号</label
          >
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入物资名称或型号"
            v-model="materialNameText"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <label class="el-form-item__label" style="width: auto;">规格</label>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入内容"
            v-model="materialSpecificationText"
            clearable
            ><template slot="prepend">Φ</template></el-input
          >
        </el-form-item>
        <el-button
          type="primary"
          class="btn"
          @click="onclick"
          style="margin-left: 4px;"
          ><i class="el-icon-search"></i>查询</el-button
        >
      </el-form>

      <div class="tablecls">
        <!-- 查询所有的物资 -->
        <dilTable
          @rowDbClick="rowDbClick1"
          v-bind.sync="option1"
          @radio-change="currentRadioChange"
          :drawer="drawer"
        >
        </dilTable>
      </div>

      <div class="button-box">
        <el-button @click="closeChangeMaterial">取消更改</el-button>
        <el-button type="primary" @click="makeSureChange">确认更改</el-button>
      </div>
    </el-dialog>

    <!-- 订单确认 -->
    <el-dialog
      title="订单明细 (注*: 请仔细确认订单物资和件数后再提交)"
      :visible.sync="orderMakeSure"
      width="94%"
    >
      <el-form :inline="true" style="margin-top: 0.5rem;">
        <el-form-item>
          <label class="el-form-item__label" style="width: auto;"
            >发货单位:</label
          >
          <el-tag size="big">{{ shipperName }}</el-tag>
        </el-form-item>
        <el-form-item>
          <label class="el-form-item__label" style="width: auto;"
            >收货单位:</label
          >
          <el-tag size="big">{{ consigneeName }}</el-tag>
        </el-form-item>
        <el-form-item>
          <label class="el-form-item__label" style="width: auto;"
            >是否自提:</label
          >
          <el-tag size="big">{{ saleOrderIsselfMention }}</el-tag>
        </el-form-item>
        <el-form-item>
          <label class="el-form-item__label" style="width: auto;"
            >收款公司:</label
          >
          <el-tag size="big">{{ saleOrderReceiveCustomer }}</el-tag>
        </el-form-item>
        <el-form-item>
          <label class="el-form-item__label" style="width: auto;"
            >业务员:</label
          >
          <el-tag size="big">{{ saleManText }}</el-tag>
        </el-form-item>
        <el-form-item>
          <label class="el-form-item__label" style="width: auto;">摘要:</label>
          <el-tag size="big" v-if="remarks != null">{{ remarks }}</el-tag>
        </el-form-item>
      </el-form>
      <!-- 物资明细信息 -->
      <el-table
        :data="selectionList"
        border
        style="width: 100%;margin-top: 0.5rem;"
        :span-method="cellMerge"
        highlight-current-row
      >
        <el-table-column
          v-for="(item, i) in tableTop"
          :key="i"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <div class="button-box">
        <el-button @click="orderMakeSure = false">返回编辑</el-button>
        <el-button type="primary" @click="sendRequest">提交订单</el-button>
      </div>
    </el-dialog>

    <div class="button-box">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="makeSure">确定</el-button>
    </div>
  </div>
</template>
<script>
import PageTitle from "@/components/Page/Title";
import { sjTime, isIntegerNumber } from "@/utils/sharedJsFile";
export default {
  components: { PageTitle },
  data() {
    return {
      truckRemark: "",
      shipperName: "四川省达州钢铁集团有限责任公司",
      shipperId: 1,
      consigneeName: null,
      consigneeId: null,
      remarks: null,
      saleShipperAddressName: null,
      saleShipperAddressId: null,
      saleDateOfReceipt: null,
      saleOrderConsigneeTel: null,
      //加载
      selectLineLoading: false,
      //物资选中暂存
      materialList1: [],
      //物资信息查询内容
      materialNameText: null,
      materialSpecificationText: null,
      materialModelText: null,
      //物资选中表格
      materialList: [],
      materialTableTop: [
        {
          prop: "materialName",
          label: "物资名称",
          width: "140"
        },
        {
          prop: "meterNumber",
          label: "米数",
          slot: true
        },
        {
          prop: "Specification",
          label: "规格型号",
          width: "140"
        },
        {
          prop: "orderPlanWeight",
          label: "件数",
          slot: true
        },
        {
          prop: "carNumber",
          label: "分装车数",
          slot: true
        },
        {
          prop: "isPound",
          label: "是否磅重销售",
          slot: true
        }
      ],
      table1: false,
      //最大车序号数
      maxCxh: 1,
      //存放每一行记录的合并数
      spanArr: [],
      //pos是spanArr的索引
      pos: 0,
      //判断是内层还是外层点击的收货地址浏览
      inOrOut: 0,
      //地址输入框的值
      addresText: "",
      //已选中省市县
      address: null,
      //具体地址
      place: null,
      //暂存具体地址
      place1: null,
      //省市县Id
      addressId: null,
      // input: "",
      //物资表格多选
      option: {
        // 表格请求数据的地址
        requestUrl: "/api/v1/uc/getSteelMaterial?apiId=244",
        // 控制显示多选列
        selectionType: "select"
      },
      //物资表格单选
      option1: {
        // 表格请求数据的地址
        requestUrl: "/api/v1/uc/getSteelMaterial?apiId=244",
        // 控制显示单选列
        selectionType: "radio"
      },
      selectionList: [],
      selectionList1: [],
      drawer1: false,
      direction: "rtl",
      form1: {},
      value: undefined,
      frist: {
        requestUrl: "/api/v1/ams/getAddressDeliveryAddress?apiId=255",
        selectionType: "radio",
        mapList: []
      },
      //所有省
      provinceList: [],
      //选中的省
      province: "",
      //所有市
      cityList: [],
      //选中的市
      city: "",
      //所有的县(区)
      countyList: [],
      //选中的县
      county: "",
      options: [
        {
          values: "yes",
          label: "是"
        },
        {
          values: "no",
          label: "否"
        }
      ],
      values: "no",
      //是否磅重销售
      options2: [
        {
          values2: 0,
          label2: "是"
        },
        {
          values2: 1,
          label2: "否"
        }
      ],
      values2: 1,
      receivingCompany: [
        {
          values1: "dzgt",
          label1: "四川省达州钢铁集团有限责任公司"
        },
        {
          values1: "dgsm",
          label1: "四川达钢商贸有限公司"
        }
      ],
      values1: "dzgt",
      saleMan: null,
      saleManText: null,
      saleMans: [],
      tableTop: [
        {
          prop: "cxh",
          label: "车序号",
          width: "50"
        },
        {
          prop: "materialName",
          label: "物资名称",
          width: "300",
          slot: true
        },
        {
          prop: "meterNumber",
          label: "米数",
          width: "60",
          slot: true
        },
        {
          prop: "Specification",
          label: "规格型号",
          width: "140"
        },
        {
          prop: "orderPlanWeight",
          label: "件数",
          width: "60",
          slot: true
        },
        {
          prop: "isPound",
          label: "是否磅重销售",
          width: "80",
          slot: true
        },
        {
          prop: "saleShipperAddressName",
          label: "收货地址",
          width: "300",
          slot: true
        },
        {
          prop: "saleOrderConsigneeTel",
          label: "收货客户电话",
          width: "120",
          slot: true
        },
        {
          prop: "truckRemark",
          label: "备注",
          width: "140",
          slot: true
        }
      ],
      row: {},
      //打开更改改物资弹出框
      drawer: false,
      //记录为内层打开
      isOpenDrawer: 0,
      //记录修改物资单选行的位置
      indexChangeMaterial: null,
      //记录单选物资Id
      selectedMaterialId: null,
      //记录单选物资名称
      selectedMaterialName: null,
      //记录单选物资规格
      selectedMaterialSpecification: null,
      //记录单选物资型号
      selectedMaterialModel: null,
      //记录单选物资编码
      selectedMaterialCode: null,
      //订单确认
      orderMakeSure: false,
      //是否自提记录字段
      saleOrderIsselfMention: null,
      //收款公司
      saleOrderReceiveCustomer: null,
      //是否忽视收货客户电话字段
      ignoreSaleOrderConsigneeTel: 0
    };
  },
  created() {
    let loadTime1 = new Date(
      new Date(new Date().toLocaleDateString()).getTime() +
        (3600 * 1000 * 8 - 1)
    ); // 当天8点前
    let loadTime2 = new Date(
      new Date(new Date().toLocaleDateString()).getTime() +
        (3600 * 1000 * 32 - 1)
    ); // 次天8点前
    if (new Date().getTime() - loadTime1 > 0) {
      this.saleDateOfReceipt = loadTime2;
    } else {
      this.saleDateOfReceipt = loadTime1;
    }
    //获取所有的省
    this.getAllProvince();
    //获取所有的业务员
    this.getAllsaleMan();
  },
  methods: {
    rowDbClick1(row) {
      this.selectedMaterialId = row.materialId;
      this.selectedMaterialName = row.materialName;
      this.selectedMaterialSpecification = row.materialSpecification;
      this.selectedMaterialModel = row.materialModel;
      this.selectedMaterialCode = row.materialCode;
      this.makeSureChange();
    },
    rowDbClick(row) {
      this.materialList1 = [];
      this.materialList1.push(row);
      this.makeSureMaterial();
    },
    //获取所有的业务员数据
    getAllsaleMan() {
      this.axios.get("/api/v1/uc/getSalerList").then(res => {
        this.saleMans = res.data.data;
      });
    },
    //获取所有省数据
    getAllProvince() {
      this.axios.post("/api/v1/uc/getAllProvince").then(res => {
        this.provinceList = res.data.data;
      });
    },
    //省改变
    onchangeProvince() {
      this.axios
        .post(
          "/api/v1/uc/getDistrictByProvince?addressProvince=" + this.province
        )
        .then(res => {
          this.cityList = res.data.data;
        });
    },
    //市改变
    onchangeCity() {
      this.axios
        .post("/api/v1/uc/getTownByDistrict?addressDistrict=" + this.city)
        .then(res => {
          this.countyList = res.data.data;
        });
    },
    //县(区)改变
    onchangeCounty() {
      let mapValue = {
        addressProvince: this.province,
        addressDistrict: this.city,
        addressTown: this.county
      };
      this.axios.post("/api/v1/uc/getPlaceByAllAddress", mapValue).then(res => {
        this.addressId = res.data.data[0].addressId;
      });
    },
    //发货单位弹出层
    handleSelectCarrier(item) {
      this.shipperName = item.shipperName;
      this.shipperId = item.shipperId;
    },
    //以下是发货单位边输边查搜索
    querySearchCarrier(queryString, cb) {
      this.axios
        .post("/api/v1/uc/getRequireUnitName?index=" + queryString)
        .then(res => {
          if (res.data.code == "200") {
            var restaurantsCarrier = res.data.data;
            var results = queryString
              ? restaurantsCarrier.filter(this.createFilterCarrier(queryString))
              : restaurantsCarrier;
            // 调用 callback 返回建议列表的数据
            cb(results);
          }
        });
    },
    createFilterCarrier(queryString) {
      return restaurantsCarrier => {
        return (
          restaurantsCarrier.shipperName
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) > -1
        );
      };
    },
    //以上是发货单位边输边查搜索
    //收货单位弹出层
    handleSelectConsignee(item) {
      this.consigneeName = item.consigneeCompanyName;
      this.consigneeId = item.consigneeId;
      //带出摘要
      this.axios
        .post("/api/v1/uc/getSaleArea?receiveId=" + this.consigneeId)
        .then(res => {
          this.remarks = res.data.data;
        });
      this.axios
        .post(
          "/api/v1/ams/matchingAddressRecently?receiveId=" + this.consigneeId
        )
        .then(res => {
          const place = res.data.data;
          console.log(place);
          this.saleShipperAddressName =
            place[0].addressProvince +
            place[0].addressDistrict +
            place[0].addressTown +
            place[0].place;
          this.saleShipperAddressId = place[0].shipperAddressId;
          this.place1 = place[0].place;
          this.saleMan = place[0].salerId;
          this.saleOrderConsigneeTel = place[0].saleOrderConsigneeTel;
        });
    },
    //以下是收货单位边输边查搜索
    querySearchConsignee(queryString, cb) {
      this.axios
        .post("/api/v1/uc/getConsigneeByLike?index=" + queryString)
        .then(res => {
          if (res.data.code == "200") {
            var restaurantsConsignee = res.data.data;
            var results = queryString
              ? restaurantsConsignee.filter(
                  this.createFilterConsignee(queryString)
                )
              : restaurantsConsignee;
            // 调用 callback 返回建议列表的数据
            cb(results);
          }
        });
    },
    createFilterConsignee(queryString) {
      return restaurantsConsignee => {
        return (
          restaurantsConsignee.value
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) > -1
        );
      };
    },
    //以上是收货单位边输边查搜索
    //新增物资
    addMaterial() {
      if (!this.shipperName) {
        this.$message.warning("发货单位未填写!");
      } else if (!this.consigneeName) {
        this.$message.warning("收货单位未填写!");
      } else if (!this.consigneeId) {
        this.$message.error("请选择一个收货单位下拉框中的选项!");
      } else if (!this.saleMan) {
        this.$message.warning("业务员未选择!");
      } else {
        this.option.requestUrl =
          "/api/v1/uc/getSteelMaterial?apiId=244&i=" + new Date();
        this.materialNameText = null;
        this.materialSpecificationText = null;
        this.table1 = true;
      }
    },
    //返回选中的物资信息
    selectionChange(selection) {
      this.materialList1 = [];
      this.materialList1 = selection;
    },
    //确认新增物资
    makeSureMaterial() {
      //记录是理重还是磅重
      var getisPound = 1;
      this.materialList1.forEach(e => {
        if (!e.materialSpecification) {
          e.materialSpecification = "";
        }
        if (!e.materialModel) {
          e.materialModel = "";
        }
        //判断物资是否为盘螺或非定尺
        if (
          e.materialName.includes("盘螺") ||
          e.materialName.includes("乱尺") ||
          e.materialName.includes("盘元") ||
          e.materialName.includes("盘圆")
        ) {
          getisPound = 0;
        } else {
          getisPound = 1;
        }
        //若物资为带有盘螺、盘圆、盘元，默认无米数
        if (
          e.materialName.includes("盘螺") ||
          e.materialName.includes("盘圆") ||
          e.materialName.includes("盘元")
        ) {
          var addmap = {
            materialName: e.materialName,
            Specification: e.materialSpecification + e.materialModel,
            materialCode: e.materialCode,
            orderPlanWeight: null,
            meterNumber: null,
            isPound: getisPound,
            //物资Id
            materialId: e.materialId,
            //无米数
            haveMeter: 0
          };
        } else {
          if (e.materialName.includes("米")) {
            console.log(e.materialName.replace(/[^0-9]/gi, ""));
            var addmap = {
              materialName: e.materialName,
              Specification: e.materialSpecification + e.materialModel,
              materialCode: e.materialCode,
              orderPlanWeight: null,
              meterNumber: e.materialName.replace(/[^0-9]/gi, ""),
              isPound: getisPound,
              //物资Id
              materialId: e.materialId,
              //有米数
              haveMeter: 1,
              isDisable: 1
            };
          } else {
            var addmap = {
              materialName: e.materialName,
              Specification: e.materialSpecification + e.materialModel,
              materialCode: e.materialCode,
              orderPlanWeight: null,
              meterNumber: null,
              isPound: getisPound,
              //物资Id
              materialId: e.materialId,
              //有米数
              haveMeter: 1
            };
          }
        }
        this.materialList.push(addmap);
      });
      this.materialList1 = [];
      this.table1 = false;
      //初始化查询数据
      this.materialNameText = null;
      this.materialSpecificationText = null;
      this.materialModelText = null;
    },
    //删除物资行数据
    deleteMaterialRow(index, rows) {
      rows.splice(index, 1);
    },
    //删除一车数据
    deleteRow(index, rows) {
      //删除车序号相同的行
      if (this.spanArr[index] == 1) {
        //动态调整车序号
        rows.forEach(e => {
          if (rows[index].cxh < e.cxh) {
            e.cxh -= 1;
          }
        });
        //最大车序号减1
        this.maxCxh -= 1;
      }
      rows.splice(index, 1);
      //调用记录每一行的合并数的方法
      this.getSpanArr(this.selectionList);
    },
    //准备生成部分订单
    createACar() {
      if (
        !this.saleOrderConsigneeTel &&
        this.ignoreSaleOrderConsigneeTel == 0
      ) {
        this.$confirm(
          "收货客户电话未填写会导致无法接收车辆发货短信, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            this.ignoreSaleOrderConsigneeTel = 1;
            this.addMaterialToSaleOrder();
          })
          .catch(() => {
            this.$message.info("已取消！");
          });
      } else {
        this.addMaterialToSaleOrder();
      }
    },
    //添加物资到订单
    addMaterialToSaleOrder() {
      debugger;
      if (this.materialList.length == 0) {
        this.$message.warning("请至少为这一车添加一个物资！");
      } else if (!this.saleShipperAddressName && this.values == "no") {
        this.$message.warning("收货地址未填写！");
      } else if (
        this.materialList.length == 1 &&
        this.materialList[0].carNumber != null
      ) {
        var eachOrderPlanWeight =
          this.materialList[0].orderPlanWeight / this.materialList[0].carNumber;
        if (isIntegerNumber(eachOrderPlanWeight)) {
          var e = this.materialList[0];
          for (var i = 0; i < this.materialList[0].carNumber; i++) {
            var addmap = {
              cxh: this.maxCxh,
              materialName: e.materialName,
              Specification: e.Specification,
              materialCode: e.materialCode,
              orderPlanWeight: eachOrderPlanWeight,
              meterNumber: e.meterNumber,
              isPound: e.isPound,
              saleShipperAddressId: this.saleShipperAddressId,
              place: this.place1,
              saleShipperAddressName: this.saleShipperAddressName,
              saleDateOfReceipt: this.saleDateOfReceipt,
              saleOrderConsigneeTel: this.saleOrderConsigneeTel,
              truckRemark: this.truckRemark,
              materialId: e.materialId,
              haveMeter: e.haveMeter
            };
            this.selectionList.push(addmap);
            //最大车序号加1
            this.maxCxh += 1;
          }
          //清空materialList
          this.materialList = [];
          //调用记录每一行的合并数的方法
          this.getSpanArr(this.selectionList);
        } else {
          this.$message.warning("分配件数不是整数！");
        }
      } else {
        this.materialList.forEach(e => {
          var addmap = {
            cxh: this.maxCxh,
            materialName: e.materialName,
            Specification: e.Specification,
            materialCode: e.materialCode,
            orderPlanWeight: e.orderPlanWeight,
            meterNumber: e.meterNumber,
            isPound: e.isPound,
            saleShipperAddressId: this.saleShipperAddressId,
            place: this.place1,
            saleShipperAddressName: this.saleShipperAddressName,
            saleDateOfReceipt: this.saleDateOfReceipt,
            saleOrderConsigneeTel: this.saleOrderConsigneeTel,
            truckRemark: this.truckRemark,
            materialId: e.materialId,
            haveMeter: e.haveMeter
          };
          this.selectionList.push(addmap);
        });
        //清空materialList
        this.materialList = [];
        //最大车序号加1
        this.maxCxh += 1;
        //调用记录每一行的合并数的方法
        this.getSpanArr(this.selectionList);
      }
    },
    //更改行物资
    changeMaterial(index) {
      this.option1.requestUrl =
        "/api/v1/uc/getSteelMaterial?apiId=244&i=" + new Date();
      this.drawer = true;
      this.materialNameText = null;
      this.materialSpecificationText = null;
      this.isOpenDrawer = 1;
      this.indexChangeMaterial = index;
    },
    //关闭更改行物资
    closeChangeMaterial() {
      this.drawer = false;
      this.isOpenDrawer = 0;
      this.$message.info("取消更改！");
    },
    //单选一行物资
    currentRadioChange(row) {
      this.selectedMaterialId = row.materialId;
      this.selectedMaterialName = row.materialName;
      this.selectedMaterialSpecification = row.materialSpecification;
      this.selectedMaterialModel = row.materialModel;
      this.selectedMaterialCode = row.materialCode;
    },
    //确认物资修改
    makeSureChange() {
      if (!this.selectedMaterialId) {
        this.$message.warning("请先选择一个物资！");
      } else {
        if (!this.selectedMaterialSpecification) {
          this.selectedMaterialSpecification = "";
        }
        if (!this.selectedMaterialModel) {
          this.selectedMaterialModel = "";
        }
        //记录是理重还是磅重
        var getisPound = 1;
        //判断物资是否为盘螺或非定尺
        if (
          this.selectedMaterialName.includes("盘螺") ||
          this.selectedMaterialName.includes("乱尺")
        ) {
          getisPound = 0;
        } else {
          getisPound = 1;
        }
        this.selectionList[
          this.indexChangeMaterial
        ].materialId = this.selectedMaterialId;
        this.selectionList[
          this.indexChangeMaterial
        ].materialName = this.selectedMaterialName;
        this.selectionList[this.indexChangeMaterial].Specification =
          this.selectedMaterialSpecification + this.selectedMaterialModel;
        this.selectionList[
          this.indexChangeMaterial
        ].materialCode = this.selectedMaterialModel;
        this.selectionList[this.indexChangeMaterial].isPound = getisPound;
        //确定更改的物资有无米数
        if (
          this.selectedMaterialName.includes("盘螺") ||
          this.selectedMaterialName.includes("盘圆") ||
          this.selectedMaterialName.includes("盘元")
        ) {
          this.selectionList[this.indexChangeMaterial].haveMeter = 0;
          this.selectionList[this.indexChangeMaterial].meterNumber = null;
        } else {
          this.selectionList[this.indexChangeMaterial].haveMeter = 1;
        }
        //重新初始化
        this.indexChangeMaterial = null;
        this.selectedMaterialId = null;
        this.selectedMaterialName = null;
        this.selectedMaterialSpecification = null;
        this.selectedMaterialModel = null;
        this.selectedMaterialCode = null;
        //关闭弹出框
        this.drawer = false;
        this.isOpenDrawer = 0;
        //初始化查询数据
        (this.materialNameText = null),
          (this.materialSpecificationText = null),
          (this.materialModelText = null);
        this.$message.success("成功更改！");
      }
    },
    //记录每一行的合并数
    getSpanArr(data) {
      //每次调用方法初始化
      this.spanArr = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].cxh === data[i - 1].cxh) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    //根据条件合并行
    cellMerge({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 6) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 7) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 8) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    //点击外层收货地址浏览事件
    ondrawerOut() {
      if (this.inOrOut % 2 == 0) {
        this.inOrOut += 1;
      }
      this.frist.requestUrl =
        "/api/v1/ams/getAddressDeliveryAddress?apiId=255&i=" + new Date();
      this.drawer1 = true;
    },
    //点击内层收货地址浏览事件
    ondrawer(row, index) {
      if (this.inOrOut % 2 == 1) {
        this.inOrOut += 1;
      }
      this.row = row;
      this.row.index = index;
      this.frist.requestUrl =
        "/api/v1/ams/getAddressDeliveryAddress?apiId=255&i=" + new Date();
      this.drawer1 = true;
    },
    //查询全国省市县
    selectAddresClick() {
      if (this.addresText) {
        this.frist.requestUrl =
          "/api/v1/ams/getAddressDeliveryAddress?apiId=255&con=" +
          this.addresText;
      } else {
        this.frist.requestUrl =
          "/api/v1/ams/getAddressDeliveryAddress?apiId=255&i=" + new Date();
      }
    },
    //收货地址弹出层
    handleSelect1(item) {
      console.log("获取所有下拉值!");
    },
    //以下是收货地址边输边查搜索
    querySearch1(queryString, cb) {
      this.axios
        .post(
          "/api/v1/ams/getRealAddressByLike?addressId=" +
            this.addressId +
            "&index=" +
            queryString
        )
        .then(res => {
          if (res.data.code == "200") {
            var restaurants = res.data.data;
            var results = queryString
              ? restaurants.filter(this.createFilter1(queryString))
              : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
          }
        });
    },
    createFilter1(queryString) {
      return restaurants => {
        return (
          restaurants.value.toLowerCase().indexOf(queryString.toLowerCase()) >
          -1
        );
      };
    },
    //以上是收货地址边输边查搜索
    //监听收货地址模态框点击事件
    currentRadioChange1(radioList) {
      this.addressId = radioList.addressId;
      this.address = radioList.address;
    },
    //确定收货地址事件
    addAddressClick() {
      if (this.inOrOut % 2 == 0) {
        for (
          var i = this.row.index;
          i < this.spanArr[this.row.index] + this.row.index;
          i++
        ) {
          this.selectionList[i].saleShipperAddressId = this.addressId;
          this.selectionList[i].place = this.place;
          this.selectionList[i].saleShipperAddressName =
            this.province + this.city + this.county + this.place;
        }
        this.drawer1 = false;
      } else {
        this.saleShipperAddressId = this.addressId;
        this.saleShipperAddressName =
          this.province + this.city + this.county + this.place;
        this.drawer1 = false;
      }
      //初始化
      this.addressId = null;
      this.province = null;
      this.cityList = [];
      this.city = null;
      this.countyList = [];
      this.county = null;
      //暂存具体地址
      this.place1 = this.place;
      this.place = null;
      this.addresText = null;
    },
    //批量修改内层值
    batchUpdateValue(row, index) {
      for (var i = index; i < this.spanArr[index] + index; i++) {
        this.selectionList[i].saleOrderConsigneeTel = row.saleOrderConsigneeTel;
      }
    },
    //物资模态框查询
    onclick() {
      if (this.isOpenDrawer == 0) {
        this.option.requestUrl =
          "/api/v1/uc/getSteelMaterial?apiId=244&materialNameText=" +
          this.materialNameText +
          "&materialSpecificationText=" +
          this.materialSpecificationText;
      } else {
        this.option1.requestUrl =
          "/api/v1/uc/getSteelMaterial?apiId=244&materialNameText=" +
          this.materialNameText +
          "&materialSpecificationText=" +
          this.materialSpecificationText;
      }
    },
    // 确定
    makeSure() {
      console.log(this.selectionList.length);
      if (this.selectionList.length == 0) {
        this.$message.warning("请先填写具体信息");
        return;
      }
      //获取是否自提字段
      this.options.forEach(e => {
        if (this.values == e.values) {
          this.saleOrderIsselfMention = e.label;
        }
      });
      //获取收款公司字段
      this.receivingCompany.forEach(f => {
        if (this.values1 == f.values1) {
          this.saleOrderReceiveCustomer = f.label1;
        }
      });
      //获取业务员姓名
      this.saleMans.forEach(g => {
        if (this.saleMan == g.value) {
          this.saleManText = g.label;
        }
      });
      this.orderMakeSure = true;
    },
    //发送请求
    sendRequest() {
      this.orderMakeSure = false;
      //是否还有件数未填写
      var orderPlanWeightAllFill = 0;
      //初始化maplist
      var mapList = [];
      this.selectionList.forEach(item => {
        if (!item.orderPlanWeight) {
          orderPlanWeightAllFill++;
        }
        //初始化mapItem
        var mapItem = {
          //车序号
          truckNo: 0,
          //省市县id
          shipperAddressId: 0,
          //具体地址
          place: null,
          //截止日期
          saleDateOfReceipt: null,
          //收货方电话
          saleOrderConsigneeTel: "",
          //车序号物资ID
          materialId: 0,
          //物资件数
          materialNumber: 0,
          //米数
          steelMeters: 0,
          //是否磅重销售
          isPoundSale: 0,
          //备注
          truckRemark: ""
        };
        mapItem.truckNo = item.cxh;
        mapItem.shipperAddressId = item.saleShipperAddressId;
        mapItem.place = item.place;
        mapItem.saleDateOfReceipt = sjTime(item.saleDateOfReceipt);
        mapItem.saleOrderConsigneeTel = item.saleOrderConsigneeTel;
        mapItem.materialId = item.materialId;
        mapItem.materialNumber = item.orderPlanWeight;
        mapItem.steelMeters = item.meterNumber;
        mapItem.isPoundSale = item.isPound;
        mapItem.truckRemark = item.truckRemark;
        mapList.push(mapItem);
      });
      let mapValue = {
        shipperId: this.shipperId,
        receiveId: this.consigneeId,
        isSelfMention: this.saleOrderIsselfMention,
        saleOrderReceiveCustomer: this.saleOrderReceiveCustomer,
        salerId: this.saleMan,
        saleRemark: this.remarks,
        mapList: mapList
      };
      console.log(mapValue);
      //所有列件数都填写
      if (orderPlanWeightAllFill == 0) {
        this.axios.post("/api/v1/ams/addSteelSaleOrder", mapValue).then(res => {
          if (res.data.code == "200") {
            this.$router.go(-1);
          }
          this.$message.success("新增订单成功！");
        });
      } else {
        this.$message.error("还有物资件数未填写！");
      }
    },
    // 取消
    cancel() {
      this.$router.go(-1);
    },
    //关闭事件
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    CloseClick() {}
  }
};
</script>
<style lang="scss" scoped>
.addSalePlan {
  width: 100%;
  .el-drawer__body {
    overflow: auto;
  }
  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }
}

.form-box,
.from {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  margin-bottom: 20px;
}
.button-box {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-top: 0.3125rem;
  margin-bottom: 1.25rem;
}
.select {
  margin-left: -10rem;
}
.demo-form-inline {
  margin-left: 2rem;
}
.table_form {
  margin-left: -16rem;
}
.textinput111 {
  width: 83px;
}
.textinput {
  width: 50px;
}
.textinput1 {
  width: 50px;
  text-align: center;
  size: small;
}
.textinput2 {
  width: 50px;
  margin-right: 30px;
}
.textinput3 {
  width: 190px;
}
.textinput4 {
  width: 60px;
}
.textinput5 {
  width: 120px;
}
</style>