logpm_page/src/views/distribution/reservation/reservationAddFrom.vue

<template>
    <basic-container>
        <div class="avue-crud">

            <el-form ref="form"
                     :model="form"
                     prop="consignee"
                     label-width="80px"
                     :rules="reservationRules">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="收货人:" prop="consignee" label-width="100px">
                            <el-input v-model="form.consignee" clearable placeholder="请输入收货人"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="预约时间:" prop="reservationDate" label-width="100px">
                            <el-date-picker
                                    v-model="form.reservationDate"
                                    type="date"
                                    clearable
                                    placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col :span="10">
                        <el-form-item label="收货地址:" prop="deliveryAddress" label-width="100px">
                            <el-input v-model="form.deliveryAddress" clearable placeholder="请输入收件地址"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="时&emsp;&emsp;段:" prop="periodOfTime" label-width="100px">
                            <el-radio-group v-model="form.periodOfTime" v-for="item in this.periodOfTimeData">
                                <el-radio

                                        :label="item.dictKey"
                                        :value="item.dictKey">{{item.dictValue}}&emsp;
                                </el-radio>
                            </el-radio-group>
                            <!--                            :label="item.dictValue"-->
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-row>
                    <el-col :span="10">
                        <el-form-item label="收件人电话:" prop="deliveryPhone" label-width="100px">
                            <el-input v-model="form.deliveryPhone" placeholder="请输入收件人电话"/>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10">
                        <el-form-item label="配送类型:" prop="serveType" label-width="100px">
                            <!--                            v-for="item in this.deliveryTypeData"-->
                            <el-radio-group v-model="form.deliveryType">
                                <el-radio
                                        :label="'2'"
                                        :value="'2'">市配&emsp;
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-row>
                    <el-col :span="10">
                        <el-form-item label="代收运费:" prop="replaceFee" label-width="100px">
                            <el-input v-model="form.replaceFee" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="配送方式:" prop="serveType" label-width="100px">
                            <!--                            v-for="item in this.deliveryWayData"-->
                            <el-radio-group v-model="form.deliveryWay">
                                <el-radio :label="'10'"
                                          :value="'10'">送货&emsp;
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>


                </el-row>

                <el-row>
                    <!--                    <el-col :span="10">-->
                    <!--                        <el-form-item label="到付运费:" prop="collectFee" label-width="100px">-->
                    <!--                            <el-input type="number" v-model="form.collectFee" :disabled="true"/>-->
                    <!--                        </el-form-item>-->
                    <!--                    </el-col>-->
                    <el-col :span="10">
                        <el-form-item label="待收货款:" prop="collectionFee" label-width="100px">
                            <el-input type="number" v-model="form.collectionFee"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="加&emsp;&emsp;急:" prop="serveType" label-width="100px">
                            <!--                            v-for="item in this.deliveryWayData"-->
                            <el-radio-group v-model="form.isUrgent" v-for="item in this.whetherData">
                                <el-radio

                                        :label="item.dictKey"
                                        :value="item.dictKey">{{item.dictValue}}&emsp;
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>


                    <el-col :span="10">
                        <el-form-item label="其他费用:" prop="collectFee" label-width="100px">
                            <el-input v-model="form.otherFee" placeholder="请输入其他费用"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="服务类型:" prop="serveType" label-width="120px">
                            <el-checkbox-group v-model="serveType" v-for="item in this.addvalueServeTypeData">
                                <el-checkbox :label="item.dictKey"
                                             :value="item.dictKey">{{item.dictValue}}&emsp;
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>


                    <el-col :span="10">
                        <el-form-item label="备注:" prop="orderSource" label-width="100px" style="width: 100%">
                            <el-input
                                    type="textarea"
                                    :rows="1"
                                    placeholder="请输入内容"
                                    v-model="form.remarks">
                            </el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>


            <el-tabs type="border-card">
                <el-tab-pane label="订单">
                    <el-button type="primary" link @click="handleAddOrder">新 增</el-button>
                    <el-table ref="table"
                              v-loading="loading"
                              :data="orderData"
                              :height="height"
                              style="width: 100%"
                              :border="option.border">
                        <el-table-column v-if="option.index" label="序号" type="index" width="80px"
                                         align="center"></el-table-column>
                        <template v-for="(item,index) in option.columnReservations">
                            <el-table-column v-if="item.hide!==true"
                                             :prop="item.prop"
                                             :label="item.label"
                                             :width="item.width"
                                             :key="index">

                            </el-table-column>
                        </template>
                        <!--                        <el-table-column label="包件数量" type="index" width="100px">-->
                        <!--                            <template #="{row}">-->
                        <!--                                <el-input v-model="row.reservationNum" type="number" :disabled="true"-->
                        <!--                                          placeholder="请输入内容"></el-input>-->
                        <!--                            </template>-->
                        <!--                        </el-table-column>-->
                        <!-- 操作栏模块 -->
                        <el-table-column prop="menu" label="操作" :width="220" align="center">
                            <template #="{row}">
                                <el-button type="primary" link icon="el-icon-view"
                                           @click="viewStockArticlePackage(row)">查看包件
                                </el-button>

                                <!--                                2023 07 25 取消增值服务  -->
                                <!--                                <el-button type="primary" link icon="el-icon-delete" @click="addvalueServe(row)">增值服务-->
                                <!--                                </el-button>-->
                                <el-button type="primary" link icon="el-icon-edit" @click="removeStockArticle(row)">移除
                                </el-button>

                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>

                <el-tab-pane label="库存品">
                    <el-button link @click="handleAddInventory">新 增</el-button>
                    <el-table ref="table"
                              v-loading="loading"
                              :data="inventoryData"
                              :height="height"
                              style="width: 100%"
                              :border="option.border">
                        <!--                    <el-table-column type="selection" v-if="stockList.selection" width="55" align="center"></el-table-column>-->
                        <el-table-column v-if="option.index" label="序号" type="index" width="80px"
                                         align="center"></el-table-column>
                        <template v-for="(item,index) in option.stockListColumn">
                            <el-table-column v-if="item.hide!==true"
                                             :prop="item.prop"
                                             :label="item.label"
                                             :width="item.width"
                                             :key="index">
                            </el-table-column>
                        </template>
                        <el-table-column label="预约数量" type="index" width="100px">
                            <template #="{row}">
                                <el-input v-model="row.reservationNum" type="number" :min="0"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="menu" label="操作" :width="220" align="center">
                            <template #="{row}">
                                <el-button type="primary" link icon="el-icon-edit" @click="removeStockList(row)">移除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>

            </el-tabs>
            <el-form-item style="margin-left: 45%;margin-top: 5px">
                <el-button type="primary" icon="el-icon-circle-close" @click="onSubmit">提交(配送订单预约)</el-button>
                <el-button icon="el-icon-circle-close" @click="$router.go(-1)">返 回</el-button>
            </el-form-item>


            <el-dialog
                    v-model="orderShow"
                    title="在库订单信息"
                    width="100%"
                    :model="addvalue"
            >
                <!--                :before-close="handleClose"-->
                <el-form :inline="true" :model="query">
                    <el-form-item label="订单自编号:">
                        <el-input v-model="query.orderCode" placeholder="请输入商场名称"></el-input>
                    </el-form-item>
                    <el-form-item label="商场名称:">
                        <el-input v-model="query.mallName" placeholder="请输入货物名称"></el-input>
                    </el-form-item>
                    <el-form-item label="货物名称:">
                        <el-input v-model="query.descriptionGoods" placeholder="请输入货物名称"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌:">
                        <el-input v-model="query.brand" placeholder="请输入品牌"></el-input>
                    </el-form-item>
                    <el-form-item label="顾客姓名:">
                        <el-input v-model="query.customerName" placeholder="请输入顾客姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="顾客电话:">
                        <el-input v-model="query.customerTelephone" placeholder="请输入顾客电话"></el-input>
                    </el-form-item>

                    <!-- 查询按钮 -->
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="searchStockArticle">搜 索</el-button>
                        <el-button icon="el-icon-delete" @click="stockArticleSearchReset()">清 空</el-button>
                    </el-form-item>
                </el-form>


                <el-table ref="orderList"
                          v-loading="loading"
                          @selection-change="selectionChange"
                          :data="stockArticleInfo"
                          :height="height"
                          style="width: 100%"
                          :border="option.border">
                    <el-table-column type="selection"
                                     v-if="option.selection"
                                     :selectable="checkOrder"
                                     width="55"
                                     align="center"></el-table-column>
                    <el-table-column v-if="option.index" label="序号" type="index" width="80px"
                                     align="center"></el-table-column>
                    <template v-for="(item,index) in option.column">
                        <el-table-column v-if="item.hide!==true"
                                         :prop="item.prop"
                                         :label="item.label"
                                         :width="item.width"
                                         :key="index">
                        </el-table-column>
                    </template>
                </el-table>
                <el-form-item style="margin-left: 45%;margin-top: 5px">
                    <el-button type="primary" icon="el-icon-circle-close" @click="onSubmitOrder">提交(订单)</el-button>
                    <el-button icon="el-icon-circle-close" @click="orderShow=false">返 回</el-button>
                </el-form-item>
            </el-dialog>


            <el-dialog
                    v-model="stockListShow"
                    title="库存品信息"
                    width="100%"
            >
                <!--                :before-close="handleClose"-->
                <el-form :inline="true" :model="query">
                    <el-form-item label="商场名称:">
                        <el-input v-model="query.marketName" placeholder="请输入服务类型"></el-input>
                    </el-form-item>
                    <el-form-item label="物料名称:">
                        <el-input v-model="query.descriptionGoods" placeholder="请输入服务类型"></el-input>
                    </el-form-item>
                    <el-form-item label="商场编码:">
                        <el-input v-model="query.marketCode" placeholder="请输入服务类型"></el-input>
                    </el-form-item>
                    <el-form-item label="订单自编号:">
                        <el-input v-model="query.orderCode" placeholder="请输入服务类型"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌:">
                        <el-input v-model="query.brand" placeholder="请输入服务类型"></el-input>
                    </el-form-item>
                    <!-- 查询按钮 -->
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="searchStockList">搜 索</el-button>
                        <el-button icon="el-icon-delete" @click="stockListSearchReset()">清 空</el-button>
                    </el-form-item>
                </el-form>
                <el-table ref="inventoryTable"
                          v-loading="loading"
                          @selection-change="selectionInventoryChange"
                          :data="inventoryInfo"
                          :height="height"
                          style="width: 90%;height: 100%"
                          :border="option.border">
                    <el-table-column type="selection" v-if="option.selection" width="55"
                                     align="center"></el-table-column>
                    <el-table-column v-if="option.index" label="序号" type="index" width="80px"
                                     align="center"></el-table-column>
                    <template v-for="(item,index) in option.stockListColumn">
                        <el-table-column v-if="item.hide!==true"
                                         :prop="item.prop"
                                         :label="item.label"
                                         :width="item.width"
                                         :key="index">
                        </el-table-column>
                    </template>
                    <el-table-column label="预约数量" type="index" width="100px">
                        <template #="{row}">
                            <el-input v-model="row.reservationNum" type="number" :min="0"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
                <el-form-item style="margin-left: 45%;margin-top: 5px">
                    <el-button type="primary" icon="el-icon-circle-close" @click="onSubmitInventory">提交(库存品)</el-button>
                    <el-button icon="el-icon-circle-close" @click="stockListShow=false">返 回</el-button>
                </el-form-item>
            </el-dialog>


            <el-dialog
                    v-model="isaddvalue"
                    title="包件信息"
                    width="100%"
                    :model="addvalue"
            >
                <!-- 列表模块 -->
                <el-table ref="packageList"
                          v-loading="loading"
                          @selection-change="selectionPackageChange"
                          :data="packageData"
                          :height="height"
                          style="width: 100%"

                          :border="option.border">
                    <el-table-column type="selection"
                                     v-if="option.selection"
                                     :selectable="checkPackage"
                                     align="center"
                                     width="55"
                    ></el-table-column>
                    <el-table-column type="expand" v-if="option.expand" align="center"></el-table-column>
                    <el-table-column v-if="option.index" label="序号" type="index" width="60" align="center">
                    </el-table-column>
                    <template v-for="(item,index) in option.columnParcels">
                        <!-- table字段 -->
                        <el-table-column v-if="item.hide!==true"
                                         :prop="item.prop"
                                         :label="item.label"
                                         :width="item.width"
                                         :key="index">
                        </el-table-column>
                    </template>
                    <!-- 操作栏模块 -->
                    <el-table-column prop="menu" label="操作" :width="220" align="center">
                        <template #="{row}">
                            <!--              <el-button type="primary" text icon="el-icon-view" @click="handleView(row)">查看</el-button>-->
                            <!--              <el-button type="primary" text icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>-->
                            <!--              <el-button type="primary" text icon="el-icon-delete" @click="rowDel(row)">删除</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
                <el-form-item style="margin-left: 45%;margin-top: 5px">
                    <el-button type="primary" icon="el-icon-circle-close" @click="onSubmitPackage">提交(包件)</el-button>
                    <el-button icon="el-icon-circle-close" @click="isaddvalue=false">返 回</el-button>
                </el-form-item>
            </el-dialog>

            <el-dialog
                    v-model="dialogVisible"
                    title="增值服务"
                    width="30%"
                    :model="addvalue"
                    :before-close="handleClose">
                <el-form-item label="增值服务" prop="freightMark">
                    <el-checkbox-group v-model="form.addvalueType" @change="handleCheckedCitiesChange">
                        <el-checkbox style="width: 100%;margin-bottom: 3%;"
                                     v-for="(item,index) in addvalueServeTypeData"
                                     :key="item.dictKey"
                                     :label="item.dictKey"
                        >{{item.dictValue}}
                            <span v-if="index===0||index===6||index===2||index===4">&nbsp;件数:
                         <el-input type="number" v-model="item.f"
                                   :disabled="this.form?.freightMark?.indexOf(item.dictKey) == -1"
                                   @change="textbox($event,index,1)"
                                   style="width: 10%;border:none; border-bottom:2px solid #eee;"/>
                     </span>
                            <span v-if="index===1">公里:
                          <el-input type="primary" v-model="item.a"
                                    :disabled="this.form?.freightMark?.indexOf(item.dictKey) == -1"
                                    @change="textbox($event,index,2)"
                                    style="width: 10%;border:none; border-bottom:2px solid #eee;"/>
                     </span>
                            <span v-if="index===3">距离:
                      <el-input type="number" v-model="item.b"
                                :disabled="this.form?.freightMark?.indexOf(item.dictKey) == -1"
                                @change="textbox($event,index,3)"
                                style="width: 10%;border:none; border-bottom:2px solid #eee;"/>
                     </span>
                            <span v-if="index===5">人数:
                      <el-input type="number" v-model="item.c"
                                :disabled="this.form?.freightMark?.indexOf(item.dictKey) == -1"
                                @change="textbox($event,index,4)"
                                style="width: 10%;border:none; border-bottom:2px solid #eee;"/>
                     </span>
                            <span v-if="index===0">楼层:
                      <el-input type="number" v-model="item.d"
                                :disabled="this.form?.freightMark?.indexOf(item.dictKey) == -1"
                                @change="textbox($event,index,5)"
                                style="width: 10%;border:none; border-bottom:2px solid #eee;"/>
                     </span>
                            <span v-if="item">预计费用:
                        <el-input type="number" v-model="item.e"
                                  :disabled="this.form?.freightMark?.indexOf(item.dictKey) == -1"
                                  @change="textbox($event,index,6)"
                                  style="width: 20%;border:none; border-bottom:2px solid #eee;"/>
                     </span>
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="aaa">
          确定(增值服务)
        </el-button>
      </span>
                </template>
            </el-dialog>
        </div>
    </basic-container>

</template>


<script>
  import { autonomouslySave, update, remove, getReservationInfo } from '@/api/distribution/distributionReservation';
  import {
    getStockArticleList,
    selectStockArticleList,
    selectStockArticleInfoList,
    selectUpdateAvailableStockArticle
  } from '@/api/distribution/distributionStockArticle';
  import { getDetailDelivery } from '@/api/distribution/distributionDelivery';
  import { addIncrement } from '@/api/distribution/distributionStockArticle';
  import { getInventoryList } from '@/api/distribution/distributionStockList';

  import option from '@/option/distribution/distributionStockArticle';
  import { mapGetters } from 'vuex';
  import { getDictionaryBiz } from '@/api/system/dict';

  export default {
    data() {
      return {
        height: 0,
        // 弹框标题
        title: '',
        // 是否展示弹框
        box: false,
        // 是否显示查询
        search: true,
        // 加载中
        loading: true,
        // 是否为查看模式
        view: false,
        // 查询信息
        query: {},
        // 分页信息
        page: {
          currentPage: 1,
          pageSize: 10,
          total: 40
        },
        // 表单数据
        form: {},
        // 选择行
        selectionList: [],
        // 表单配置
        option: option,
        // 表单列表
        data: [],
        //增值服务弹窗
        dialogVisible: false,
        textarea: '',
        //增值服务字典列表
        addvalueServeTypeData: [],
        //配送方式字典列表
        deliveryWayData: [],
        whetherData: [],
        //配送类型字典列表
        deliveryTypeData: [],
        //增值服务列表
        addvalueServeType: [],
        //增值表单输入框对象
        addvalue: {},
        costList: [], //字典
        //增值服务对象
        addvalueObj: {},
        //费用列表
        feeList: [],
        //楼层
        floorList: [],
        //订单行数据
        orderInfo: {},
        //服务类型
        serveType: [],
        //增加订单弹窗
        orderShow: false,
        //在库订单信息
        stockArticleInfo: [],
        //库存品信息
        inventoryInfo: [],
        //时段
        periodOfTimeData: [],
        //路由订单编号
        orderIds: '',
        //预约编号
        reservationId: '',
        inventoryData: [],
        orderData: [],
        stockListShow: false,
        isaddvalue: false,
        packageData: [],
        packageList: [],
        inventoryList: [],
        orderList: [],
        inventoryTable: [],
        reservationRules: {
          consignee: [
            { required: true, message: '请填写收货人名称!!!', trigger: 'change' }
          ],
          deliveryAddress: [
            { required: true, message: '请填写收货人地址!!!', trigger: 'blur' }
          ],
          deliveryPhone: [
            { required: true, message: '请填写收货人电话!!!', trigger: 'change' }
          ]
          // enableStatus: [
          //   { required: true, message: '请选择启用状态!', trigger: 'change' }
          // ],
        },
        obj:{},
      };
    },
    created() {
      this.$watch(
        () => this.$route.params,
        () => {
          this.fetchData();
        },
        // 组件创建完后获取数据，
        // 此时 data 已经被 observed 了
        { immediate: true }
      );
    },
    mounted() {
      this.init();
      this.onLoad(this.page);
      this.getDictionary();
    },
    watch:{
      '$route.query.reservationId': {
        handler(newVal, oldVal) {
          console.log(newVal, oldVal);
          this.fetchData();
          this.onLoad(this.page);
        },
        deep: true,
        immediate: true
      }

    },
    computed: {
      ...mapGetters(['permission']),
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(',');
      }
    },
    methods: {
      fetchData() {
        this.error = this.post = null;
        this.loading = true;
        if (this.$route.query.id) {
          this.orderIds = this.$route.query.id;
        }
        if (this.$route.query.reservationId) {
          this.reservationId = this.$route.query.reservationId;
        }
        this.loading = false;
      },
      init() {
        this.height = this.setPx(document.body.clientHeight - 340);
      },
      aaa() {
        let addvalueInfos = [];
        this.form.addvalueType.forEach((item, index) => {
          let addvalueInfo = {};
          addvalueInfo.addvalueId = item;
          if (item == 1 || item == 3 || item == 5 || item == 7) {
            addvalueInfo.number = this.costList[item];
          }
          if (item == 2) {
            addvalueInfo.kilometer = this.costList[item];
          }
          if (item == 4) {
            addvalueInfo.distance = this.costList[item];
          }
          if (item == 6) {
            addvalueInfo.peopleNum = this.costList[item];
          }
          if (this.floorList.length > 1) {
            addvalueInfo.floor = this.floorList[1];
            this.floorList = [];
          }
          addvalueInfo.fee = this.feeList[item];
          addvalueInfos.push(addvalueInfo);
        });
        let params = {};
        params.id = this.orderInfo.id;
        params.addvalue = addvalueInfos;
        params.relatedId = 1;
        console.log('params>>>>>>>>>>>>', params);
        addIncrement(params).then(res => {
          this.dialogVisible = false;
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        });
        this.onLoad(this.page);
      },
      //查询出所有的市配订单
      handleAddOrder() {
        this.loading = true;
        console.log('$$$$$$', this.orderData);
        this.query.typeService = 2;
        this.query.genre = '1';
        const params = {};
        const page = this.page;
        if (this.reservationId){
          console.log("------------>",'预约编辑');
          //编辑和新增不一样的处理方式
          //这里需要查询出未被预约的订单和该预约自己本身的订单
          selectUpdateAvailableStockArticle(this.reservationId).then(res=>{
            console.log('res------------>', res);
            const data = res.data.data;
            this.stockArticleInfo =  data
            this.stockArticleInfo.forEach((item, index) => {
              //检查订单是否冻结
              this.checkOrder(item, index);
              if (this.orderData) {
                this.orderData.forEach(o => {
                  if (o.id === item.id) {
                    this.$nextTick(() => {
                      this.$refs.orderList.toggleRowSelection(this.stockArticleInfo[index], true);
                    });
                  }
                });
              }else {
                this.orderList = [];
              }
            });
          })

        }else {
          selectStockArticleInfoList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then( res => {
            console.log('res------------>', res);
            const data = res.data.data;
            this.stockArticleInfo =  data.records;
            this.stockArticleInfo.forEach((item, index) => {
              //检查订单是否冻结
              this.checkOrder(item, index);
              // if (this.orderData) {
              //   this.orderData.forEach(o => {
              //     if (o.id === item.id) {
              //       this.$nextTick(() => {
              //         this.$refs.orderList.toggleRowSelection(this.stockArticleInfo[index], true);
              //       });
              //     }
              //   });
              // }else {
              //   this.orderList = [];
              // }
            });
            this.orderList = [];

          });
        }
        this.loading = false;
        console.log("this.stockArticleInfo------------->",this.stockArticleInfo);
        // if (this.reservationId) {
        //   //这里需要编辑，那么这里就需要在订单列表中回显已使用包件，禁用勾选其他预约使用的包件细信息
        //   this.query.typeService = 2;
        //   this.query.genre = '1';
        //   //查询所有订单列表信息
        //   let page = this.page;
        //   let params = {};
        //   selectStockArticleInfoList(Object.assign(params, this.query)).then(res => {
        //     let orderListData = res.data.data;
        //     this.stockArticleInfo = orderListData;
        //     //这里进行订单的勾选回显
        //     let a = this.orderData;
        //     for (let i = 0; i < orderListData.length; i++) {
        //       for (let j = 0; j < a.length; j++) {
        //         if (orderListData[i].id === a[j].id){
        //           orderListData[i] = a[j];
        //           this.$nextTick(()=> {
        //             this.$refs.orderList.toggleRowSelection(this.stockArticleInfo[i],true);
        //           })
        //         }
        //         this.checkOrder(this.stockArticleInfo[i],i);
        //       }
        //     }
        //     this.loading = false;
        //     this.selectionClear();
        //   });
        // } else {
        //   this.query.typeService = 2;
        //   this.query.genre = '1';
        //   let page = this.page;
        //   let params = {};
        //   selectStockArticleAndParcel(Object.assign(params, this.query)).then(res => {
        //     let orderData = res.data.data;
        //     orderData.forEach((item, index) => {
        //       item.reservationNum = item.handQuantity;
        //       item.reservationNum = '0';
        //     });
        //     this.stockArticleInfo = orderData;
        //     //转预约单的操作会带出订单
        //     if (this.orderData){
        //       this.stockArticleInfo.forEach((item,index)=>{
        //         this.orderData.forEach(o=>{
        //           if (item.id === o.id){
        //             this.$nextTick(()=> {
        //               this.$refs.orderList.toggleRowSelection(this.stockArticleInfo[index],true);
        //             })
        //           }
        //         })
        //         // if (item.reservationStatus === '30'){
        //         //   this.$nextTick(()=> {
        //         //     this.$refs.orderList.toggleRowSelection(this.stockArticleInfo[index],true);
        //         //   })
        //         // }
        //         this.checkOrder(item,index);
        //       })
        //     }else {
        //       //这里是通过新增预约的按钮进入的页面
        //     }
        //     this.loading = false;
        //     this.selectionClear();
        //   });
        // }
        this.orderShow = true;
      },
      checkOrder(row, index) {
        if (row.freezeStatus === '30' || row.freezeStatusName === '已冻结') {
          return false;
        } else {
          return true;
        }
        return false;
      },
      handleAddInventory() {
        let page = this.page;
        let params = {};
        this.query.serviceType = '2';
        getInventoryList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const inventoryList = res.data.data;
          inventoryList.records.forEach(item => {
            item.reservationNum = '0';
            item.applyNum = item.quantityStock - item.quantityOccupied;

          });
          this.page.total = inventoryList.total;
          this.inventoryInfo = inventoryList.records;
          //存在库存品，需要将库存品进行回显勾选
          if (this.inventoryData) {
            this.inventoryInfo.forEach((item, index) => {
              this.inventoryData.forEach(inventory => {
                if (item.id === inventory.id) {
                  item = inventory;
                  this.$nextTick(() => {
                    this.$refs.inventoryTable.toggleRowSelection(this.inventoryInfo[index], true);
                  });
                }
              });
            });
          }
          console.log('------------->', this.inventoryData);
          this.loading = false;
          this.selectionClear();
        });
        this.query = {};
        this.inventoryList = [];
        this.stockListShow = true;
      },
      handleCheckedCitiesChange(value) {
        if (value) {
          this.form.addvalueType = value;
        }
        console.log('>>>>>', this.form);
        if (value.length < 1) {
          this.costList = [];
          this.costListName = [];
        }
        this.deliveryWayData.forEach(i => {
          if (value.includes(i.dictKey)) {
            console.log(i);
            i.pitch = true;
            this.costListName = value;
          }
        });

      },
      textbox(e, index, a) {
        console.log('e,index', e, index, a);
        if (a === 6) {
          this.feeList[index + 1] = e;
          return;
        }
        if (a === 5)
          if (index === 0 && a === 5) {
            this.floorList[index + 1] = e;
            return;
          }
        this.costList[index + 1] = e;

        //费用列表
      },
      //数据字典数据获取
      getDictionary() {
        getDictionaryBiz('addvalue_serve_type').then(res => {
          this.addvalueServeTypeData = res.data.data;
        });
        getDictionaryBiz('delivery_way').then(res => {
          this.deliveryWayData = res.data.data;
        });
        getDictionaryBiz('distribution_type').then(res => {
          this.deliveryTypeData = res.data.data;
        });
        getDictionaryBiz('period_of_time').then(res => {
          this.periodOfTimeData = res.data.data;
        });
        getDictionaryBiz('yes_no').then(res => {
          this.whetherData = res.data.data;
        });
      },
      addvalueServe(row) {
        //查询订单的增值服务，
        this.addvalueServeType = [];
        this.addvalue = {};
        this.dialogVisible = true;
        this.costList = [];
        this.feeList = [];
        this.floorList = [];
        this.orderInfo = row;
      },
      searchHide() {
        this.search = !this.search;
      },
      searchChange() {
        this.onLoad(this.page);
      },
      searchReset() {
        this.query = {};
        this.page.currentPage = 1;
        this.onLoad(this.page);
      },
      viewStockArticlePackage(row) {
        this.loading = true;
        this.packageList = row.packageList;
        this.obj = row;
        console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>', row);
        if (this.reservationId) {
          //这里就是编辑的数据回显问题
          let packageInfo = row.parcelListVOS
          // this.packageData = row.parcelListVOS;
          let packageListData = this.packageData;
          if (row.packageList) {
            let packageListInfo = row.packageList;
            packageInfo.forEach((item,index)=>{
              packageListInfo.forEach(p=>{
                if (item.id===p.id){
                  this.$nextTick( ()=> {
                    this.$refs.packageList.toggleRowSelection(this.packageData[index],true);
                  })
                }
              })
            })
          }else {
            //新增订单，默认全选
            packageInfo.forEach((item,index)=>{
              this.$nextTick( ()=> {
                this.$refs.packageList.toggleRowSelection(this.packageData[index],true);
              })
            })
          }
          this.packageData =row.parcelListVOS;
        } else {
          this.packageData = row.parcelListVOS;
          //这里回显展示的效果应该是展示被其他预约单勾选的订单处于禁用勾选，冻结订单处于禁用无法勾选，其他默认为全选
          let data = row.parcelListVOS;
          data.forEach((item, index) => {
            if (item.orderPackageReservationStatusName === '已预约' || item.orderPackageReservationStatus === '20') {
              //   //这里就是表示包件此时状态处于已预约，表示该订单下的这个包件信息被其他的预约信息使用，此时应该处于勾选禁用状态
              this.$nextTick(() => {
                this.$refs.packageList.toggleRowSelection(this.packageData[index], true);
              });
              console.log('::', item);
              this.checkPackage(item, index);
            } else if (item.orderPackageFreezeStatusName !== '已冻结' || item.orderPackageFreezeStatus !== '20') {
              this.$nextTick(() => {
                this.$refs.packageList.toggleRowSelection(this.packageData[index], true);
              });
            }
          });
        }
        this.isaddvalue = true;
        this.loading = false;
      },
      checkPackage(row, index) {
        //区分编辑还是新增
        //编辑需要对这个预约单下的包件信息均可进行调整
        if (!this.reservationId) {
          if (row.orderPackageReservationStatusName === '已预约' || row.orderPackageReservationStatusName === '20') {
            return false;
          }
        }
        if (row.orderPackageFreezeStatus === '20' || row.orderPackageFreezeStatusName === '已冻结') {
          return false;
        } else {
          return true;
        }
      },
      //搜索订单
      searchStockArticle() {
        let params = {};
        let page = this.page;
        this.query.typeService = 2;
        this.query.genre = 1;
        selectStockArticleList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          data.records.forEach(item => {
            item.reservationNum = item.handQuantity;
          });
          this.page.total = data.total;
          this.stockArticleInfo = data.records;
          this.loading = false;
          // this.selectionClear();
        });
      },
      searchStockList() {
        let params = {};
        let page = this.page;
        this.query.serviceType = 2;
        getInventoryList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const inventoryList = res.data.data;
          inventoryList.records.forEach(item => {
            item.reservationNum = '0';
          });
          this.page.total = inventoryList.total;
          this.inventoryInfo = inventoryList.records;
          this.loading = false;
          this.selectionClear();
        });
      },
      stockArticleSearchReset() {
        this.selectionList = [];
        this.query = {};
        this.handleAddOrder();
      },
      stockListSearchReset() {
        this.selectionList = [];
        this.query = {};
        this.handleAddInventory();
      },
      onSubmitPackage() {
        if (this.packageList.length === 0) {
          this.$message.warning('请选择包件!!!');
          return;
        }
        this.orderData.forEach(item=>{
          if (item.id===this.obj.id){
            item.packageList = this.packageList;
          }
        })
        console.log('this.orderData------------>', this.orderData);
        this.isaddvalue = false;
      },
      onSubmit() {
        //新增预约单
        let orderIds = [];
        let inventoryIds = [];
        let inventoryList = [];
        let stockArticleList = [];
        let operation = true;
        this.inventoryData.forEach(item => {
          if (item.reservationNum === '0' || item.reservationNum > item.quantityStock) {
            this.$message({
              type: 'warning',
              message: '请输入' + item.orderCode + '正确数量!'
            });
            operation = false;
          }
          item.reservationNum = item.reservationNum;
          inventoryIds.push(item.id);
          inventoryList.push(item);
        });
        orderIds.join(',');
        inventoryIds.join(',');
        this.form.stockArticleIds = orderIds.toString();
        this.form.inventoryIds = inventoryIds.toString();
        this.form.inventoryList = inventoryList;
        console.log('-------------->', this.orderData);
        let order = this.orderData;
        order.forEach(o=>{
          if (!o.packageListInfo){
            o.packageListInfo = o.packageList;
          }
        })
        this.form.stockArticleList = order;
        this.deliveryWayData.forEach(item => {
          if (this.form.deliveryWay === item.dictValue) {
            this.form.deliveryWay = item.dictKey;
          }
        });
        this.deliveryTypeData.forEach(item => {
          if (this.form.deliveryType === item.dictValue) {
            this.form.deliveryType = item.dictKey;
          }
        });
        this.periodOfTimeData.forEach(item => {
          if (this.form.periodOfTime === item.dictValue) {
            this.form.periodOfTime = item.dictKey;
          }
        });
        this.form.serveType = this.serveType.sort().join(',');
        //服务号
        this.orderData.forEach(item => {
          console.log('-------------->item', item);
          if (!item.packageListInfo) {
            item.packageListInfo = item.parcelListVOS;
          }
        });
        // this.form.stockArticleList = this.packageList;
        console.log('>>>>>>>>', this.form);
        if (this.reservationId) {
          this.form.id = this.reservationId;
          update(this.form).then(() => {
            this.$router.go(-1);
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
          });
        } else {
          this.form.reservationStatus = '20'
          autonomouslySave(this.form).then(() => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.$router.go(-1);
          });
        }
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
      removeStockArticle(row) {
        this.orderData.forEach((item, index) => {
          if (item.id === row.id) {
            this.orderData.splice(index, 1);
          }
          console.log(item);
        });
        console.log('>>>>>>>>>>>>>>>row', row);
      },
      removeStockList(row) {
        this.inventoryData.forEach((item, index) => {
          if (item.id === row.id) {
            this.inventoryData.splice(index, 1);
          }
          console.log(item);
        });
        console.log('>>>>>>>>>>>>>>>row', row);
      },
      handleView(row) {
        this.title = '查看';
        this.view = true;
        this.box = true;
        getDetailDelivery(row.id).then(res => {
          this.form = res.data.data;
        });
      },
      rowDel(row) {
        this.$confirm('确定将选择数据删除?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
          });
      },
      beforeClose(done) {
        done();
        this.form = {};
        this.view = false;
      },
      selectionChange(list) {
        this.orderList = list;
      },
      selectionPackageChange(list) {
        console.log('-----------<>', list);
        if (this.reservationId) {
          this.packageList = list;
        } else {
          //新增
          let a = [];
          list.forEach(item => {
            console.log('--------------->', item);
            if (item.orderPackageReservationStatus === '10' || item.orderPackageReservationStatusName === '未预约') {
              a.push(item);
            }
          });
          this.packageList = a;
        }
      },
      selectionInventoryChange(list) {
        // if (this.reservationId){
        console.log('-----------<>', list);
        this.inventoryList = list;
        // }else {
        //   //新增
        //   let a = [];
        //   list.forEach(item=>{
        //     if (item.orderPackageReservationStatus === '10' || item.orderPackageReservationStatusName === '未预约'){
        //       a.push(item);
        //     }
        //   })
        //   this.inventoryList = a;
        // }
      },

      // 增加库存品
      onSubmitInventory() {
        if (this.inventoryList.length === 0) {
          this.$message.warning('请选择至少一条数据');
          return;
        }
        this.inventoryList.forEach(item=>{
          if (item.reservationNum > item.applyNum){
            this.$message.warning('该库存品数量输入有误!!!');
            return;
          }
        })
        this.inventoryData = this.inventoryList;

        // if (this.orderData.length) {
        //   this.inventoryList.some(i => {
        //     let a = this.inventoryData.filter((ele) => ele.id == i.id).length >= 1;
        //     if (!a) {
        //       this.inventoryData.push(i);
        //     }
        //   });
        // } else {
        //   this.inventoryData = this.selectionList;
        // }

        this.stockListShow = false;
      },
      /**
       * 增加订单提交
       */
      onSubmitOrder() {
        console.log('-------------》', this.orderList);
        if (this.orderList.length === 0) {
          this.$message.warning('请选择至少一条数据');
          return;
        }
        const list = this.orderList;
        console.log("list--------",list);
        let j = 0;
        let  name = list[0].customerName;
        let  address = list[0].customerAddress;
        let  phone = list[0].customerTelephone;
        for (let i = 1; i < list.length; i++) {
          if (list[i].customerName !== name || list[i].customerAddress !== address || list[i].customerTelephone !== phone){
            this.$message.warning('请选择统一顾客订单!!!');
            return;
          }
        }
        this.form.consignee = name;
        this.form.deliveryAddress = address;
        this.form.deliveryPhone = phone;
        this.orderData = this.orderList;
        let info = [];
        // if (this.orderData){
        //   let a = this.orderData;
        //   data.forEach(item=>{
        //     a.forEach(order=>{
        //       if (item.id === order.id){
                console.log("orderData----------------->",this.orderData);
        //         item = order;
        //       }
        //     })
        //     info.push(item);
        //   })
        // }
        // this.orderData = info;
        this.orderShow = false;
      },
      selectionClear() {
        this.selectionList = [];
        this.query = {};
        // this.$refs.table.clearSelection();
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
        this.onLoad(this.page);
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
        this.onLoad(this.page);
      },
      onLoad(page, params = {}) {
        // this.loading = true;
        this.form.deliveryType = '2';
        this.form.deliveryWay = '10';
        this.form.periodOfTime = '3';
        this.form.otherFee = 0;
        this.form.replaceFee = 0;
        this.form.collectionFee = 0;
        this.form.isUrgent = '1';
        this.form.reservationDate = new Date();
        if (this.orderIds) {
          getStockArticleList(this.orderIds).then(res => {
            console.log(res.data.data);
            const data = res.data.data;
            let name = '';
            let phone = '';
            let address = '';
            let typeService = '';
            console.log('>>>>>>>>>>>>>', data);
            for (let i = 0; i < data.length; i++) {
              if (i === 0) {
                name = data[0].customerName;
                phone = data[0].customerTelephone;
                address = data[0].customerAddress;
                typeService = data[0].typeService.toString();
                // typeName = data[0].typeName;
              }
            }
            this.form.consignee = name;
            this.form.deliveryPhone = phone;
            this.form.deliveryType = typeService;
            this.form.deliveryAddress = address;
            this.orderData = data;
          });
        }
        if (this.reservationId) {
          getReservationInfo(this.reservationId).then(res => {
            const reservation = res.data.data;
            const stockArticleListInfo = res.data.data.stockArticleList;
            // stockArticleListInfo.forEach(item=>{
            //
            // })
            console.log('>>>>>>>>', reservation);
            this.orderData = reservation.stockArticleList;
            this.inventoryData = reservation.inventoryList;
            this.inventoryData.forEach(item => {
              item.applyNum = item.quantityStock - item.quantityOccupied;
            });
            this.form.deliveryType = reservation.deliveryType;
            this.form.periodOfTime = reservation.periodOfTime;
            if (reservation.serveType) {
              //过滤字符串中的','
              this.serveType = Array.from(reservation.serveType).filter(s => {
                return s !== ',';
              });
            }
            this.form = reservation;
          });
        } else {
          this.form.deliveryType = '2';
        }
        this.loading = false;
      }
    }

  };
</script>
<style>

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
</style>