Warehouse.vue

<template>
  <div style="display: inline-block;margin-right: 10px">
    <el-button size="mini" @click="visible = true" type="text">{{ title }}</el-button>
    <el-dialog
      :title="title + ' - ' + warehousing.orderNo"
      :visible.sync="visible"
      width="100%"
    >
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane :label="edit ? $t('货物修改') : $t('货物入仓')" name="first">
          <el-form ref="form" :model="form" :rules="formRules" label-width="80px">
            <el-descriptions border :column="2">
              <el-descriptions-item>
                <template slot="label"><span style="color: red">*</span>{{ $t('中文品名') }}</template>
                <span style="min-width: 200px;margin-right: 15px;display: inline-block">
                  <product-selector v-if="(!order.parentOrderId && !isAdd) || order.splitSeparateOrder" v-model="form.prodId" @change="onProductChange" determined protect-once/>
                  <span v-else>{{ warehousing.prodTitleZh }}</span>
                </span>
                <el-button v-if="(!order.parentOrderId && !isAdd) || order.splitSeparateOrder" type="text" @click="isShowProduct = true">添加新商品</el-button>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"><span style="color: red">*</span>{{ $t('英文品名') }}</template>
                <product-selector v-if="(!order.parentOrderId && !isAdd) || order.splitSeparateOrder" lang="En" v-model="form.prodId" @change="onProductChange" determined protect-once/>
                <span v-else>{{ warehousing.prodTitleEn }}</span>
              </el-descriptions-item>
              <el-descriptions-item :label="$t('品牌')">
                <template slot="label"><span style="color: red">*</span>{{ $t('品牌') }}</template>
                <el-form-item required label="" prop="brand" label-width="0">
                  <el-select
                    v-model="form.brand"
                    :placeholder="$t('可修改')"
                    filterable
                    remote
                    @change="handleBrandChange"
                    :remote-method="getProductBrandPage"
                    clearable>
                    <el-option
                      v-for="item in brandList"
                      :key="item.id"
                      :label="item.titleZh"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item :label="$t('是否备案')">
                <template slot="label"><span style="color: red">*</span>{{ $t('是否备案') }}</template>
                {{ isBeian }}
              </el-descriptions-item>
              <el-descriptions-item :label="$t('收费模式')">
                <template slot="label"><span style="color: red">*</span>{{ $t('收费模式') }}</template>
                {{ feeType }}
              </el-descriptions-item>
              <el-descriptions-item :label="$t('填单参数')">{{ $t('箱数：') }}<el-input size="mini" v-if="edit" v-model="warehousing.num" style="display: inline-block;width: 100px"></el-input>
                <span v-else>{{ warehousing.num }}</span><br>{{ $t('体积：') }}<el-input size="mini" v-if="edit" v-model="warehousing.volume" style="display: inline-block;width: 100px"></el-input>
                <span v-else>{{ warehousing.volume }}</span>m³<br>{{ $t('重量：') }}<el-input size="mini" v-if="edit" v-model="warehousing.weight" style="display: inline-block;width: 100px"></el-input>
                <span v-else>{{ warehousing.weight }}</span>Kg
              </el-descriptions-item>
            </el-descriptions>
            <el-row>
              <el-col :span="8">
                <el-form-item :label="$t('材质')" style="margin-top: 20px">
                  <dict-selector :type="DICT_TYPE.ECW_PRODUCT_MATERIAL" v-model="form.material" clearable></dict-selector>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item :label="$t('入仓特性')" style="margin-top: 20px">
                  <el-checkbox-group v-model="form.warehouseInProdAttrIds">
                    <el-checkbox v-for="item in attrList" :key="item.id" :label="item.id">{{ item.attrName }}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('入仓时间')" v-if="!edit">
                  <el-date-picker v-model="form.inTime" type="datetime" :placeholder="$t('请选择入仓时间')" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item :label="$t('用途')">
                  <el-checkbox-group v-model="form.usageIds">
                    <el-checkbox v-for="item in getDictDatas(DICT_TYPE.WAREHOUSING_RECORD_DETAIL_USAGE)" :key="item.value" :label="item.value">{{ $l(item, 'label') }}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ $t('入仓记录') }}</span>
              <el-button style="float: right;margin-left: 15px" size="mini" type="primary" icon="el-icon-minus" circle @click="handleDelete" :disabled="form.table.length < protectRowCount"></el-button>
              <el-button style="float: right" size="mini" type="primary" icon="el-icon-plus" circle @click="handleAdd()"></el-button>
            </div>
            <el-form ref="tableForm" :rules="tableFormRules" :model="form" size="mini">
              <el-table
                :data="form.table"
                style="width: 100%">
                <el-table-column :label="$t('箱数')" width="150px">
                  <template v-slot:header>
                    <span style="color: red">*</span>{{ $t('箱数') }}</template>
                  <template v-slot="{r,c,$index}">
                    <el-form-item :rules="tableFormRules.cartonsNum">
                      <el-input v-model="form.table[$index].cartonsNum" placeholder="" @blur="handleVolume($index)" :disabled="$index < protectRowCount">
                        <span slot="append">{{ getDictDataLabel(DICT_TYPE.WAREHOUSING_SPECIFICATION_TYPE, form.table[$index].specificationType) }}</span>
                      </el-input>
                      <dict-selector :disabled="$index < protectRowCount" :type="DICT_TYPE.WAREHOUSING_SPECIFICATION_TYPE" v-model="form.table[$index].specificationType" @change="handleVolume($index)"></dict-selector>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('包装类型')" width="100px">
                  <template v-slot:header>
                    <span style="color: red">*</span>{{ $t('包装类型') }}</template>
                  <template v-slot="{r,c,$index}">
                    <el-form-item>
                      <dict-selector :disabled="$index < protectRowCount" :type="DICT_TYPE.ECW_PACKAGING_TYPE" v-model="form.table[$index].unit"></dict-selector>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="长(cm)">
                  <template v-slot:header>
                    <span>{{ $t('长') }}</span>(cm)
                  </template>
                  <template v-slot="{r,c,$index}">
                    <el-form-item :rules="tableFormRules.boxGauge1">
                      <el-input :disabled="$index < protectRowCount" type="number" v-model="form.table[$index].boxGauge1" placeholder="" @blur="handleVolume($index)"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="宽(cm)">
                  <template v-slot:header>
                    <span>{{ $t('宽') }}</span>(cm)
                  </template>
                  <template v-slot="{r,c,$index}">
                    <el-form-item :rules="tableFormRules.boxGauge2">
                      <el-input :disabled="$index < protectRowCount" type="number" v-model="form.table[$index].boxGauge2" placeholder="" @blur="handleVolume($index)"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="高(cm)">
                  <template v-slot:header>
                    <span>{{ $t('高') }}</span>(cm)
                  </template>
                  <template v-slot="{r,c,$index}">
                    <el-form-item :rules="tableFormRules.boxGauge3">
                      <el-input :disabled="$index < protectRowCount" type="number" v-model="form.table[$index].boxGauge3" placeholder="" @blur="handleVolume($index)"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="体积(m³)">
                  <template v-slot:header>
                    <span style="color: red">*</span> <span>{{ $t('体积') }}</span>(m³)
                  </template>
                  <template v-slot="{r,c,$index}">
                    <el-form-item :rules="tableFormRules.volume">
                      <el-input :disabled="$index < protectRowCount" v-model="form.table[$index].volume" placeholder="" type="number"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="重量(Kg)">
                  <template v-slot:header>
                    <span style="color: red">*</span> <span>{{ $t('重量') }}</span>(Kg)
                  </template>
                  <template v-slot="{r,c,$index}">
                    <el-form-item :rules="tableFormRules.weight">
                      <el-input :disabled="$index < protectRowCount" v-model="form.table[$index].weight" placeholder="" type="number"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('数量')" width="140px">
                  <template v-slot="{r,c,$index}">
                    <el-form-item :rules="tableFormRules.quantityAll">
                      <el-input :disabled="$index < protectRowCount" v-model.number="form.table[$index].quantityAll" placeholder="" type="number">
                        <template slot="append">{{ $t('个') }}</template>
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('快递单号')">
                  <template v-slot="{r,c,$index}">
                    <el-form-item>
                      <el-input :disabled="$index < protectRowCount" v-model="form.table[$index].expressNo" placeholder=""></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('储位')" prop="orderLocationBackVOList"  width="150px">
                  <template v-slot="{ row, column, $index }">
                    <warehouse-area-select
                      v-if="visible"
                      v-model="form.table[$index].orderLocationBackVOList"
                      :order-id="orderId"
                      :order-item-id="warehousing.orderItemId"
                      :warehouse-in-id="form.table[$index].id"
                      :warehouse-id="warehouseId"
                      :is-editing="edit"></warehouse-area-select>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('备注')">
                  <template v-slot="{r,c,$index}">
                    <el-form-item>
                      <el-input v-model="form.table[$index].remark" type="textarea" show-word-limit maxlength="100" placeholder="" :disabled="$index < protectRowCount"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('操作')">
                  <template v-slot="{ row, column, $index}">
                    <WarehouseRecordDetail v-model="form.table[$index].orderWarehouseInDetailsVOList" :readonly="$index < protectRowCount" />
                    <el-popconfirm
                        v-if="$index >= protectRowCount"
                        title="确定要删除该行入仓记录吗？"
                        @confirm="handleDeleteRow($index)"
                    >
                      <template v-slot:reference>
                        <el-button size="mini" type="danger">删除</el-button>
                      </template>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>

            </el-form>
          </el-card>


          <el-card style="margin-top: 15px;">
            <div slot="header" class="clearfix">
              <span style="font-size: 18px"><span style="color: red">*</span>{{$t('入仓影像')}}</span>
            </div>
            <div>
              <image-and-video-upload
                :fileSize="50"
                :isShowTip="true"
                v-model="form.pictureUrls"
                :id="orderItemId"
                :type="5"
                @delete="handleImageDelete"
              ></image-and-video-upload>
            </div>
          </el-card>
        </el-tab-pane>


        <el-tab-pane :label="$t('添加新品名')" name="second" v-if="!edit">
          <el-form ref="form1" :model="form1" :rules="formRules" label-width="80px">
            <el-descriptions border :column="2">
              <el-descriptions-item>
                <template slot="label"><span style="color: red">*</span>{{ $t('中文品名') }}</template>
                <el-form-item required label="" prop="prodId" label-width="0">
                  <product-selector v-model="form1.prodId" @change="onProductChange1"/>
                  <el-button type="text" @click="isShowProduct = true" style="margin-left: 15px">添加新商品</el-button>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"><span style="color: red">*</span>{{ $t('英文品名') }}</template>
                <el-form-item required label="" prop="prodId" label-width="0">
                  <product-selector lang="En" v-model="form1.prodId" @change="onProductChange1"/>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item :label="$t('品牌')">
                <template slot="label"><span style="color: red">*</span>{{ $t('品牌') }}</template>
                <el-form-item required label="" prop="brand" label-width="0">
                  <el-select
                    v-model="form1.brand"
                    :placeholder="$t('可修改')"
                    filterable
                    remote
                    @change="handleBrandChange"
                    :remote-method="getProductBrandPage1"
                    clearable>
                    <el-option
                      v-for="item in brandList1"
                      :key="item.id"
                      :label="item.titleZh"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item :label="$t('是否备案')">
                <template slot="label"><span style="color: red">*</span>{{ $t('是否备案') }}</template>
                {{ isBeian1 }}
              </el-descriptions-item>
              <el-descriptions-item :label="$t('收费模式')">
                <template slot="label"><span style="color: red">*</span>{{ $t('收费模式') }}</template>
                {{ feeType1 }}
              </el-descriptions-item>
              <el-descriptions-item :label="$t('填单参数')">{{ $t('非填单货物') }}</el-descriptions-item>
            </el-descriptions>
            <el-row>
              <el-col :span="8">
                <el-form-item :label="$t('材质')" style="margin-top: 20px">
                  <dict-selector :type="DICT_TYPE.ECW_PRODUCT_MATERIAL" v-model="form1.material" clearable></dict-selector>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item :label="$t('入仓特性')" style="margin-top: 20px">
                  <el-checkbox-group v-model="form1.warehouseInProdAttrIds">
                    <el-checkbox v-for="item in attrList" :key="item.id" :label="item.id">{{ item.attrName }}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('入仓时间')">
                  <el-date-picker v-model="form1.inTime" type="datetime" :placeholder="$t('请选择入仓时间')" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="16">
                <el-form-item :label="$t('用途')">
                  <el-checkbox-group v-model="form1.usageIds">
                    <el-checkbox v-for="item in getDictDatas(DICT_TYPE.WAREHOUSING_RECORD_DETAIL_USAGE)" :key="item.value" :label="item.value">{{ $l(item, 'label') }}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ $t('入仓记录') }}</span>
              <el-button style="float: right;margin-left: 15px" size="mini" type="primary" icon="el-icon-minus" circle @click="handleDelete(1)"></el-button>
              <el-button style="float: right" size="mini" type="primary" icon="el-icon-plus" circle @click="handleAdd(1)"></el-button>
            </div>
            <el-form ref="tableForm1" :model="form1" :rules="tableFormRules" size="mini">
              <el-table
                :data="form1.table"
                style="width: 100%">
                <el-table-column :label="$t('箱数')" width="150px">
                  <template v-slot:header>
                    <span style="color: red">*</span>{{ $t('箱数') }}</template>
                  <template v-slot="{r,c,$index}">
                    <el-form-item>
                      <span v-if="form1.table[$index].id">
                        {{ form1.table[$index].cartonsNum }}
                        {{ getDictDataLabel(DICT_TYPE.ECW_PACKAGING_TYPE, form1.table[$index].unit) }}
                      </span>
                      <el-input v-else v-model="form1.table[$index].cartonsNum" placeholder="" @blur="handleVolume($index, 1)">
                        <span slot="append">{{ getDictDataLabel(DICT_TYPE.ECW_PACKAGING_TYPE, form1.table[$index].unit) }}</span>
                      </el-input>
                      <dict-selector :type="DICT_TYPE.WAREHOUSING_SPECIFICATION_TYPE" v-model="form1.table[$index].specificationType" @change="handleVolume($index, 1)"></dict-selector>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('包装类型')" width="100px">
                  <template v-slot:header>
                    <span style="color: red">*</span>{{ $t('包装类型') }}</template>
                  <template v-slot="{r,c,$index}">
                    <el-form-item>
                      <span v-if="form1.table[$index].id">{{ getDictDataLabel(DICT_TYPE.ECW_PACKAGING_TYPE, form1.table[$index].unit) }}</span>
                      <dict-selector v-else :type="DICT_TYPE.ECW_PACKAGING_TYPE" v-model="form1.table[$index].unit"></dict-selector>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="长(cm)">
                  <template v-slot:header>
                    <span>{{ $t('长') }}</span>(cm)
                  </template>
                  <template v-slot="{r,c,$index}">
                    <el-form-item>
                      <span v-if="form1.table[$index].id">{{ form1.table[$index].boxGauge ? form1.table[$index].boxGauge.split('*')[0] : '' }}</span>
                      <el-input v-else type="number" v-model="form1.table[$index].boxGauge1" placeholder="" @blur="handleVolume($index, 1)"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="宽(cm)">
                  <template v-slot:header>
                    <span>{{ $t('宽') }}</span>(cm)
                  </template>
                  <template v-slot="{r,c,$index}">
                    <el-form-item>
                      <span v-if="form1.table[$index].id">{{ form1.table[$index].boxGauge ? form1.table[$index].boxGauge.split('*')[1] : '' }}</span>
                      <el-input v-else type="number" v-model="form1.table[$index].boxGauge2" placeholder="" @blur="handleVolume($index, 1)"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="高(cm)">
                  <template v-slot:header>
                    <span>{{ $t('高') }}</span>(cm)
                  </template>
                  <template v-slot="{r,c,$index}">
                    <el-form-item>
                      <span v-if="form1.table[$index].id">{{ form1.table[$index].boxGauge ? form1.table[$index].boxGauge.split('*')[2] : '' }}</span>
                      <el-input v-else type="number" v-model="form1.table[$index].boxGauge3" placeholder="" @blur="handleVolume($index, 1)"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="体积(m³)">
                  <template v-slot:header>
                    <span style="color: red">*</span> <span>{{ $t('体积') }}</span>(m³)
                  </template>
                  <template v-slot="{r,c,$index}">
                    <el-form-item>
                      <span v-if="form1.table[$index].id">{{ form1.table[$index].volume }}</span>
                      <el-input v-else type="number" v-model="form1.table[$index].volume" placeholder=""></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="重量(Kg)">
                  <template v-slot:header>
                    <span style="color: red">*</span> <span>{{ $t('重量') }}</span>(Kg)
                  </template>
                  <template v-slot="{r,c,$index}">
                    <el-form-item>
                      <span v-if="form1.table[$index].id">{{ form1.table[$index].weight }}</span>
                      <el-input v-else type="number" v-model="form1.table[$index].weight" placeholder=""></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('数量')" width="140px">
                  <template v-slot="{r,c,$index}">
                    <el-form-item>
                      <span v-if="form1.table[$index].id">{{ form1.table[$index].quantityAll }}</span>
                      <el-input v-else type="number" v-model.number="form1.table[$index].quantityAll" placeholder="">
                        <template slot="append">{{ $t('个') }}</template>
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('快递单号')">
                  <template v-slot="{r,c,$index}">
                    <el-form-item>
                      <span v-if="form1.table[$index].id">{{ form1.table[$index].expressNo }}</span>
                      <el-input v-else v-model="form1.table[$index].expressNo" placeholder=""></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('储位')" prop="orderLocationBackVOList"  width="150px">
                  <template v-slot="{ row, column, $index }">
                    <warehouse-area-select
                      v-model="form1.table[$index].orderLocationBackVOList"
                      :readonly="form1.table[$index].id && !edit"
                      :order-id="orderId"
                      :order-item-id="warehousing.orderItemId"
                      :warehouse-in-id="form1.table[$index].id"
                      :warehouse-id="warehouseId"
                      :is-editing="edit"></warehouse-area-select>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('操作')">
                  <template v-slot="{ row, column, $index}">
                    <WarehouseRecordDetail v-model="form1.table[$index].orderWarehouseInDetailsVOList" />
                    <el-popconfirm
                        title="确定要删除该行入仓记录吗？"
                        @confirm="handleDeleteRow($index, 1)"
                    >
                      <template v-slot:reference>
                        <el-button size="mini" type="danger">删除</el-button>
                      </template>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
          </el-card>


          <el-card style="margin-top: 15px;">
            <div slot="header" class="clearfix">
              <span style="font-size: 18px"><span style="color: red">*</span>{{$t('入仓影像')}}</span>
            </div>
            <div>
              <image-and-video-upload :fileSize="50" :isShowTip="true" v-model="form1.pictureUrls" ></image-and-video-upload>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>

      <div v-if="edit && order.status !== 3">
        <h2>{{ $t('审批流程') }}</h2>
        <work-flow xmlkey="free_apply" v-model="selectedUsers"  />
        <!--        <div>选择的用户：{{selectedUsers}}</div>-->
      </div>

      <span slot="footer">
        <template v-if="!isEditing">
          <el-button @click="handleClose">{{ $t('关 闭') }}</el-button>
          <el-button type="primary" :loading="submitting" @click="handleSubmit()">{{ edit ? $t('确认修改') : $t('提 交') }}</el-button>
        </template>
        <template v-else>
          <el-button type="primary" @click="$router.push('/bpm/process-instance/detail?id=' + formId)">{{ $t('审核中') }}</el-button>
          <el-button type="primary" @click="handleCancelProcessInstance">{{ $t('取消审核') }}</el-button>
          <el-button @click="handleClose">{{ $t('返回') }}</el-button>
        </template>
        <template v-else>

        </template>
      </span>
    </el-dialog>

    <!-- 对话框(添加 / 修改) -->
    <el-dialog title="添加商品" :visible.sync="isShowProduct" width="550px" append-to-body>
      <el-form ref="productForm" :model="productForm" :rules="productRules" label-width="110px">
        <el-form-item :label="$t('商品类型')" prop="typeId">
          <el-select v-model="productForm.typeId" :placeholder="$t('选择商品类型')" clearable>
            <el-option v-for="types in typeList" :key="types.id" :label="types.titleZh" :value="types.id" />
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('中文标题')" prop="titleZh">
          <el-input v-model="productForm.titleZh" :placeholder="$t('请输入中文标题')" />
        </el-form-item>

        <el-form-item :label="$t('英文标题')" prop="titleEn">
          <el-input v-model="productForm.titleEn" :placeholder="$t('请输入英文标题')" />
        </el-form-item>

        <el-form-item :label="$t('商品特性')" prop="attrArray">
          <el-select v-model="productForm.attrArray" :placeholder="$t('选择商品特性')" clearable multiple>
            <el-option v-for="attr in attrList" :key="attr.id" :label="attr.attrName" :value="attr.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="productSubmit">{{$t('确定')}}</el-button>
        <el-button @click="productCancel">{{$t('取消')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ProductSelector from "@/components/ProductSelector"
import WarehouseAreaSelect from "@/components/WarehouseAreaSelect"
import {getFeeTypeByOrderProduct, getProductBrankPage} from "@/api/ecw/productBrank"
import {cancelProcessInstance} from "@/api/bpm/processInstance"
import WorkFlow from "@/components/WorkFlow"
import {DICT_TYPE, getDictDataLabel, getDictDatas} from "@/utils/dict"
import {
  orderWarehouseIn,
  orderWarehouseInUpdateApply, warehousePictureDelete,
  warehousePictureList
} from "@/api/ecw/order"
import {getProductAttrList} from "@/api/ecw/productAttr"
import {getProductTypeList} from "@/api/ecw/productType"
import {addProduct} from "@/api/ecw/product"
import ImageAndVideoUpload from "@/components/ImageAndVideoUpload/index.vue"
import WarehouseRecordDetail from "@/views/ecw/order/warehousing/components/WarehouseRecordDetail.vue"

export default {
  name: "Warehouse",

  components: {
    WarehouseRecordDetail,
    ImageAndVideoUpload,
    ProductSelector,
    WarehouseAreaSelect,
    WorkFlow
  },

  props: {
    title: {
      type: String,
      default: undefined
    },
    order: {
      type: Object,
      default: undefined
    },
    isJiyun: {
      type: Boolean,
      default: false
    },
    // 入仓修改
    edit: {
      type: Boolean,
      default: false
    },
    orderItemA: {
      type: Object,
      default: () => {
        return {
          material: undefined,
          inTime: undefined,
          orderWarehouseInBackItemDoList: []
        }
      }
    },
    orderItemB: {
      type: Object,
      default: () => {
        return {
          material: undefined,
          inTime: undefined,
          orderWarehouseInBackItemDoList: []
        }
      }
    }
  },

  mounted() {
    this.getAttrList()
    this.getTypeList()
  },

  computed: {
    isAdd() {
      return this.$route.path === "/order/warehousing-add"
    },
    warehousing(){
      return {...this.orderItemA, ...this.orderItemB}
    },
    orderId(){
      return this.order.orderId
    },
    orderItemId(){
      return this.warehousing.orderItemId
    },
    brandObject(){
      return this.brandList.find(e => e.id === this.form.brand) || ''
    },
    brandObject1(){
      return this.brandList.find(e => e.id === this.form1.brand) || ''
    },
    isBeian(){
      if (this.form.recordMode !== undefined){
        return [this.$t('无备案'), this.$t('有备案'), this.$t('中性')][this.form.recordMode]
      }
      if (this.brandObject.filing){
        return [this.$t('无备案'), this.$t('有备案'), this.$t('中性')][this.brandObject.filing]
      } else {
        return ''
      }
    },
    isBeian1(){
      if (this.form1.recordMode !== undefined){
        return [this.$t('无备案'), this.$t('有备案'), this.$t('中性')][this.form1.recordMode]
      }
      if (this.brandObject1.filing){
        return [this.$t('无备案'), this.$t('有备案'), this.$t('中性')][this.brandObject1.filing]
      } else {
        return ''
      }
    },
    /**
     * 收费模式
     * @returns {string} 无牌价0，有牌价1，中性品牌价2
     */
    feeType(){
      const feeType = this.form.feeType
      if (feeType >= 0 && feeType < 3) {
        return [this.$t('无牌价'), this.$t('有牌价'), this.$t('中性品牌价')][feeType]
      }
      return ''
    },
    feeType1(){
      const feeType = parseInt(this.form1.feeType)
      if (feeType >= 0 && feeType < 3) {
        return [this.$t('无牌价'), this.$t('有牌价'), this.$t('中性品牌价')][feeType]
      }
      return ''
    },
    warehouseId(){
      return this.order.adjustToDestWarehouseId || this.order?.logisticsInfoDto?.startWarehouseId
    }
  },

  watch: {
    visible(val){
      if (val) {
        this.init()
        this.getProductBrandPage(this.warehousing.brandName)
        this.getProductBrandPage1()
        this.handleBrandChange(parseInt(this.form.brand))
      } else {
        this.$emit('close')
      }
    }
  },

  data(){
    return {
      DICT_TYPE,
      getDictDataLabel,
      getDictDatas,
      activeName: 'first',
      visible: false,
      submitting: false,
      form: {
        table: [],
        brandType: undefined,
        orderId: undefined,
        orderNo: undefined,
        brand: undefined,
        inTime: undefined,
        material: undefined,
        orderItemId: undefined,
        warehouseInProdAttrIds: [],
        prodId: undefined,
        prodTitleEn: undefined,
        prodTitleZh: undefined,
        prodType: undefined,
        type: undefined,
        feeType: undefined,
        recordMode: undefined,
        pictureUrls: [],
        usageIds: []
      },
      form1: {
        table: [],
        brandType: undefined,
        orderId: undefined,
        orderNo: undefined,
        brand: undefined,
        inTime: undefined,
        material: undefined,
        orderItemId: undefined,
        warehouseInProdAttrIds: [],
        prodId: undefined,
        prodTitleEn: undefined,
        prodTitleZh: undefined,
        prodType: undefined,
        type: 1,
        feeType: undefined,
        recordMode: undefined,
        pictureUrls: [],
        usageIds: []
      },
      brandList: [],
      brandList1: [],
      formRules: {
        prodId: [{required: true, message: this.$t("请选择品名"), trigger: "change"}],
        brand: [{required: true, message: this.$t("请选择品牌"), trigger: "change"}],
      },
      tableFormRules: {
        // cartonsNum: [{required: true, message: this.$t("箱数不能为空"), trigger: "change"}],
        // boxGauge1: [{required: true, message: this.$t("货物长不能为空"), trigger: "change"}],
        // boxGauge2: [{required: true, message: this.$t("货物宽不能为空"), trigger: "change"}],
        // boxGauge3: [{required: true, message: this.$t("货物高不能为空"), trigger: "change"}],
        // volume: [{required: true, message: this.$t("体积不能为空"), trigger: "change"}],
        // weight: [{required: true, message: this.$t("重量不能为空"), trigger: "change"}],
        // // quantityAll: [{required: true, message: this.$t("数量不能为空"), trigger: "change"}]
      },


      selectedUsers: undefined,

      // 入仓修改正在审核中
      isEditing: false,
      // 审批业务id
      formId: '',

      // 追加时被保护的行数
      protectRowCount: -1,

      // 添加商品弹窗
      isShowProduct: false,
      productForm: {
        typeId: undefined,
        attrArray: [],
        titleZh: undefined,
        titleEn: undefined
      },
      productRules: {
        typeId: [{ required: true, message: this.$t("商品类型不能为空"), trigger: "change" }],
        // attrArray: [{ required: true, message: this.$t("商品特性不能为空"), trigger: "change" }],
        titleZh: [{ required: true, message: this.$t("中文标题不能为空"), trigger: "blur" }],
        titleEn: [{ required: true, message: this.$t("英文标题不能为空"), trigger: "blur" }],
      },
      //类型列表
      typeList: [],
      // 特性列表
      attrList: []
    }
  },

  methods: {
    init(){
      this.form.brandType = this.warehousing.brandType
      this.form.orderId = this.warehousing.orderId
      this.form.orderItemId = this.warehousing.orderNo
      this.form.orderNo = this.warehousing.orderNo
      this.form.brand = this.warehousing.brand
      this.form.brandType = this.warehousing.brandType
      this.form.inTime = this.warehousing.inTime
      this.form.material = this.warehousing.material
      this.form.orderId = this.warehousing.orderId
      this.form.orderItemId = this.warehousing.orderItemId
      this.form.orderNo = this.warehousing.orderNo
      if ((this.edit || this.isAdd) && this.warehousing.warehouseInProdAttrIds !== null ) {
        this.form.warehouseInProdAttrIds = this.warehousing.warehouseInProdAttrIds?.split(',').map(e => +e) || []
      } else {
        this.form.warehouseInProdAttrIds =
          this.warehousing.warehouseInProdAttrIds?.split(',').map(e => +e)
          || this.warehousing.prodAttrIds?.split(',').map(e => +e)
          || []
      }
      this.form.prodId = this.warehousing.prodId
      this.form.prodTitleEn = this.warehousing.prodTitleEn
      this.form.prodTitleZh = this.warehousing.prodTitleZh
      this.form.prodType = this.warehousing.prodType
      this.form.type = this.warehousing.type
      this.form.feeType = this.warehousing.feeType
      this.form.pictureUrls = this.warehousing.pictureUrls
      this.form.usageIds = this.warehousing.usageIds?this.warehousing.usageIds.split(',') : []
      if (this.form.usageIds.length > 0 && this.form.usageIds[0] === ''){
        this.usageIds.splice(0, 1)
      }
      this.warehousing.orderWarehouseInBackItemDoList.forEach(e => {
        let bg = {}
        if (e.boxGauge) {
          const boxGauge = e.boxGauge.split('*')
          // e.boxGauge1 = boxGauge[0]
          // e.boxGauge2 = boxGauge[1]
          // e.boxGauge3 = boxGauge[2]
          bg = {
            boxGauge1: boxGauge[0],
            boxGauge2: boxGauge[1],
            boxGauge3: boxGauge[2]
          }
        }
        this.form.table.push({...e, ...bg})
      })

      if (!this.edit){
        let protectRowCount = 0
        this.protectRowCount = this.form.table.map(e => {
          if (e.id){
            protectRowCount++
          }
        })
        this.protectRowCount = protectRowCount
        this.handleAdd()
        this.handleAdd(1)
      }
    },
    handleImageDelete(url) {
      warehousePictureList({
        bizId: this.orderId,
        type: 1
      }).then(r =>{
        console.log(r, url)
        if (r.data?.length > 0) {
          const id = r.data.find(e => e?.url === url)?.id
          if (id) {
            warehousePictureDelete(id).then(r => {
              console.log(r)
            })
          }
        }
      })
    },
    handleClose() {
      this.visible = false
    },
    handleVolume(index, val){
      setTimeout(() => {
        const {boxGauge1, boxGauge2, boxGauge3, specificationType, cartonsNum} = (val === 1 ? this.form1.table : this.form.table)[index]
        let result = ''
        if (boxGauge1 && boxGauge2 && boxGauge3 && specificationType && cartonsNum) {
          result = (((specificationType === 1 || specificationType === '1') ? cartonsNum : 1) * (boxGauge1 * boxGauge2 * boxGauge3) / 1000000 + 0.000001)?.toFixed(2) || ''
        } else {
          result = ''
        }
        if (result === '0.00') result = '0.01';
        (val === 1 ? this.form1.table : this.form.table)[index].volume = result
      }, 0)
    },
    handleSubmit() {
      if (this.activeName !== "first"){
        // 添加非填单货物
        if (this.form1.warehouseInProdAttrIds.indexOf(4) !== -1) {
          return this.$notify({
            title: this.$t('提示'),
            message: this.$t("订单包含不接受货物，请检查"),
            type: 'warning'
          })
        }
        this.$refs['form1'].validate(valid => {
          this.$refs['tableForm1'].validate(valid1 => {
            if (!valid || !valid1) {
              return
            }
            this.submitting = true
            return orderWarehouseIn({
              ...this.form1,
              brandType: this.warehousing.brandType,
              orderId: this.warehousing.orderId,
              orderItemId: undefined,
              orderNo: this.warehousing.orderNo,
              warehouseInProdAttrIds: this.form1.warehouseInProdAttrIds.join(','),
              usageIds: this.form1.usageIds.join(','),
              orderWarehouseInItemDoList: this.form1.table.map(e => {
                return {
                  ...e,
                  boxGauge: e.boxGauge1 + '*' + e.boxGauge2 + '*' + e.boxGauge3,
                  orderLocationCreateReqVOList: e.orderLocationBackVOList
                }
              })
            }).then(r => {
              this.submitting = false
              if (r.data) {
                this.$message.success('新增入仓成功')
                this.handleClose()
              } else {
                this.$message.success('新增入仓失败')
              }
            }).catch(() => {
              this.submitting = false
            })
          })
        })
      } else {
        if (this.form.warehouseInProdAttrIds.indexOf(4) !== -1) {
          return this.$notify({
            title: this.$t('提示'),
            message: this.$t("订单包含不接受货物，请检查"),
            type: 'warning'
          })
        }
        this.$refs['form'].validate(valid => {
          this.$refs['tableForm'].validate(valid1 => {
            if (!valid || !valid1) {
              return
            }
            if (this.edit) {
              // 入仓修改
              this.submitting = true
              return orderWarehouseInUpdateApply({
                ...this.form,
                brandType: this.warehousing.brandType,
                orderId: this.warehousing.orderId,
                orderItemId: this.warehousing.orderItemId,
                orderNo: this.warehousing.orderNo,
                num: this.warehousing.num,
                volume: (+this.warehousing.volume)?.toFixed(2) || '',
                weight: (+this.warehousing.weight)?.toFixed(2) || '',
                prodId: this.form.prodId,
                warehouseInProdAttrIds: this.form.warehouseInProdAttrIds.join(','),
                usageIds: this.form.usageIds.join(','),
                "orderWarehouseInUpdateItemDoList": this.form.table.map(e => {
                  return {
                    ...e,
                    boxGauge: e.boxGauge1 + '*' + e.boxGauge2 + '*' + e.boxGauge3,
                    orderLocationCreateReqVOList: e.orderLocationBackVOList
                  }
                }),
                copyUserId: this.selectedUsers
              }).then(r => {
                this.submitting = false
                if (r.data) {
                  this.$message.success(r.msg || '入仓修改发起成功')
                  this.handleClose()
                } else {
                  this.$message.success(r.msg || '入仓修改发起失败')
                }
              }).catch(() => {
                this.submitting = false
              })
            } else {
              // 首次入仓、入仓补充
              this.submitting = true
              return orderWarehouseIn({
                ...this.form,
                brandType: this.warehousing.brandType,
                orderId: this.warehousing.orderId,
                orderItemId: this.warehousing.orderItemId,
                orderNo: this.warehousing.orderNo,
                isAppend: this.isAdd ? true : undefined,
                warehouseInProdAttrIds: this.form.warehouseInProdAttrIds.join(','),
                usageIds: this.form.usageIds.join(','),
                orderWarehouseInItemDoList: this.form.table.map(e => {
                  return {
                    ...e,
                    boxGauge: e.boxGauge1 + '*' + e.boxGauge2 + '*' + e.boxGauge3,
                    orderLocationCreateReqVOList: e.orderLocationBackVOList
                  }
                }),
              }).then(r => {
                this.submitting = false
                if (r.data) {
                  this.$message.success('入仓成功')
                  this.handleClose()
                } else {
                  this.$message.success('入仓失败')
                }
              }).catch(() => {
                this.submitting = false
              })
            }
          })
        })
      }
    },
    handleCancelProcessInstance(){
      this.$prompt('请输入取消原因？', this.$t("取消流程"), {
        type: 'warning',
        confirmButtonText: this.$t("确定"),
        cancelButtonText: this.$t("取消"),
        inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
        inputErrorMessage: this.$t("取消原因不能为空"),
      }).then(({ value }) => {
        cancelProcessInstance(this.formId, value).then(() => {
          this.opened = false
          this.$modal.msgSuccess("取消成功");
        })
      })
    },
    onProductChange(product){
      if (!product) {
        return
      }
      this.form.prodTitleZh = product.titleZh
      this.form.prodTitleEn = product.titleEn
      this.handleBrandChange(parseInt(this.form.brand))
      this.form.warehouseInProdAttrIds = product.attrId ? product.attrId.split(',').map(e => +e) : []
    },
    onProductChange1(product){
      if (!product) {
        return
      }
      this.form1.prodTitleZh = product.titleZh
      this.form1.prodTitleEn = product.titleEn
      this.handleBrandChange(parseInt(this.form1.brand))
      this.form1.warehouseInProdAttrIds = product.attrId ? product.attrId.split(',').map(e => +e) : []
    },
    getProductBrandPage(titleZh = undefined) {
      getProductBrankPage({pageSize: 20, titleZh}).then(r => {
        this.brandList = r.data.list
      })
    },
    getProductBrandPage1(titleZh = undefined) {
      getProductBrankPage({pageSize: 20, titleZh}).then(r => {
        this.brandList1 = r.data.list
      })
    },
    handleBrandChange(v){
      getFeeTypeByOrderProduct({
        brandId: parseInt(v),
        productId: this.warehousing.prodId,
        orderId: this.orderId
      }).then(r => {
        if(r.code === 0){
          (this.activeName === "first" ? this.form : this.form1).feeType = parseInt(r.data.feeType);
          (this.activeName === "first" ? this.form : this.form1).recordMode = parseInt(r.data.recordMode)
        }
      })
    },
    handleDelete(val) {
      if (val === 1) {
        this.form1.table.pop()
      } else if (this.form.table.length > this.protectRowCount) {
        this.form.table.pop()
      }
    },
    handleDeleteRow(index, val) {
      if (val === 1) {
        this.form1.table.splice(index, 1);
      } else if (this.form.table.length > this.protectRowCount) {
        this.form.table.splice(index, 1);
      }  
    },
    handleAdd(val = 0) {
      let cartonsNum = ''
      if (val !== 1) { // 货物入仓
        let hasCartonsNum = 0
        this.form.table.forEach(e => {
          hasCartonsNum += e.cartonsNum
        })
        cartonsNum = this.warehousing.num - hasCartonsNum
      }

      const form = val === 1 ? this.form1 : this.form
      const formLength = form.table.length
      let orderLocationBackVOList = []
      /* // 不默认使用上一条记录的储位 https://zentao.test.jdshangmen.com/bug-view-3344.html
      if (formLength > 0) {
        orderLocationBackVOList = JSON.parse(JSON.stringify(form.table[formLength - 1].orderLocationBackVOList))
      }*/
      form.table.push({
        "boxGauge1": this.isJiyun ? 0 : '',
        "boxGauge2": this.isJiyun ? 0 : '',
        "boxGauge3": this.isJiyun ? 0 : '',
        "cartonsNum": cartonsNum > 0 ? cartonsNum : '',
        "expressNo": "",
        "quantityAll": undefined,
        "unit": "1",
        "volume": '',
        "weight": '',
        specificationType: '1',
        table: [],
        orderLocationBackVOList
      })
    },
    /** 获取产品属性列表 */
    getAttrList() {
      getProductAttrList().then(response => {
        this.attrList = response.data;
      })
    },
    /** 获取产品类型列表 */
    getTypeList() {
      getProductTypeList().then(response => {
        this.typeList = response.data;
      })
    },
    productSubmit(){
      this.$refs["productForm"].validate(valid => {
        if (!valid) {
          return;
        }
        //商品特性转字符串
        this.productForm.attrId = this.productForm.attrArray.join(',')
        // 添加的提交
        addProduct(this.productForm).then(response => {
          this.$modal.msgSuccess(this.$t("新增成功"))
          if (this.activeName === 'first') {
            this.form.prodId = response.data
            this.form.warehouseInProdAttrIds = this.productForm.attrArray
          } else {
            this.form1.prodId = response.data
            this.form1.warehouseInProdAttrIds = this.productForm.attrArray
          }
          this.productCancel()
        })
      })
    },
    productCancel(){
      this.isShowProduct = false
      this.productForm = {
        typeId: undefined,
        attrArray: [],
        titleZh: undefined,
        titleEn: undefined
      }
    }
  }
}
</script>

<style scoped>

</style>