emis-oms-frontend/src/views/oms/emisWaybill/WsInBatchList.vue

<template>
  <div >

    <div style="display:inline-flex;width: 100%;border-bottom: 1px solid #d9d9d9;margin-bottom: 20px;">
        <div class="form-group-title"><span class="title">{{ $t('进仓记录') }}</span></div>
      </div>
      <!-- <el-scrollbar style="height: 100%"> -->
        <!-- 如果显示子单勾选则循环显示子单 -->
        <div v-for="(item,index) in emisWarehouseInBatchList" :key="resetRefreshId+'.'+index">
          <CardWithHeader :header="'入仓时间:'+item.entryDate + '          操作员:' + (item.createByName==null?'':item.createByName)+' 进仓子单号:'+item.inNo+'-'+(item.inBatchNo==null?'':item.inBatchNo)" >
              <template v-slot:body>
                <div>
                        <el-row :gutter="0" style="display: flex;flex-wrap: wrap;margin-top: 8px;margin-bottom:8px;color:black;font-weight:bold">
                            <el-col :span="3">
                                    件数:{{ item.parcelQty }}
                              </el-col>
                              <el-col :span="3">
                                    重量：{{ item.billWeight }}(kg)
                              </el-col>
                              <el-col :span="3">
                                    体积：{{ item.totalVolume }}(m³)
                              </el-col>
                        </el-row>
                </div>

                <div style="margin-top:10px">
                    <el-row :gutter="0" style="display: flex;flex-wrap: wrap;margin-top: 8px;margin-bottom:8px;color:black;font-weight:bold">
                      <el-col :span="5">
                          快递公司: <dict-tag :options="dict.type.emis_express_code" :value="item.prepareInExpress"/>
                        </el-col>
                        <el-col :span="5">
                          快递单号:{{ item.prepareInBillCode }}
                        </el-col>
                        <el-col :span="6">
                          是否代垫运费:
                          <span v-if="item.blPrepareInFreight==1">是</span>
                          <span v-else>否</span>

                        </el-col>
                        <el-col :span="5" v-if="item.blPrepareInFreight==1">
                          代垫运费:{{ item.prepareInEstFee }} 元
                        </el-col>
                        <el-col :span="5">
                          自定义标识:{{item.prepareInRemark  }}

                        </el-col>


                      </el-row>
                  </div>
                <div style="margin-top:10px">
                    <el-row :gutter="0" style="display: flex;flex-wrap: wrap;margin-top: 8px;margin-bottom:8px;color:black;font-weight:bold">
                        <el-col :span="5">
                          异常反馈备注: {{item.abnormalDesc}}
                        </el-col>
                    </el-row>
                 </div>    
                <div >

                      <el-table
                            :cell-style="{
                              'padding': '0px!important',
                              'padding-left': '0px!important',
                              'padding-right': '0px!important',
                              'font-size':'11px'
                            }"
                            :header-cell-style="{
                              'font-size':'11px'
                            }"
                              border
                              stripe
                              :data="item.cargoList"
                              size="mini"
                              style="width: 100%"

                            >
                              <el-table-column  :label="$t('序号')" align="center" width="60">
                                    <template slot-scope="scope">
                                        <span > {{scope.$index+1}}</span>
                                    </template>
                              </el-table-column>
                              <el-table-column prop="goodsName" label="品名" align="center" min-width="120" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                  <span > {{scope.row.goodsName}}</span>
                                </template>
                              </el-table-column>
                              <el-table-column prop="cargoQty" :label="$t('件数')" align="center" width="60">
                                <template slot-scope="scope">
                                  <span > {{scope.row.cargoQty}}</span>
                                </template>
                              </el-table-column>
                              <el-table-column prop="length"  :label="$t('长(cm)')"  align="center" width="80">
                                <template slot-scope="scope">
                                  <span > {{scope.row.length}}</span>
                                </template>
                              </el-table-column>
                              <el-table-column prop="width"  :label="$t('宽(cm)')"  align="center" width="80">
                                <template slot-scope="scope">
                                  <span > {{scope.row.width}}</span>
                                </template>
                              </el-table-column>
                              <el-table-column prop="height"   :label="$t('高(cm)')" align="center" width="80">
                                <template slot-scope="scope">
                                  <span > {{scope.row.height}}</span>
                                </template>
                              </el-table-column>
                              <!-- <el-table-column prop="goodsModel" label="规格型号" align="center" width="80" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                  <el-input  v-model="scope.row.goodsModel" size="mini" ></el-input>
                                </template>
                              </el-table-column> -->
                              <el-table-column prop="goodsName" label="品牌" align="center" width="80" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                  <span > {{scope.row.brand}}</span>
                                </template>
                              </el-table-column>
                              <!--
                              <el-table-column prop="hscode" label="海关编码" align="center" width="80" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                  <el-input  v-model="scope.row.hscode" size="mini" placeholder=""></el-input>
                                </template>
                              </el-table-column> -->

                              <el-table-column prop="material" label="材质" align="center" width="60" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                  <span > {{scope.row.material}}</span>
                                </template>
                              </el-table-column>
                              <el-table-column prop="purpose" label="用途" align="center" width="60" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                  <span > {{scope.row.purpose}}</span>
                                </template>
                              </el-table-column>
                              <el-table-column prop="ingredients" label="成分" align="center" width="60" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                  <span > {{scope.row.ingredients}}</span>
                                </template>
                              </el-table-column>
                              <el-table-column prop="supplier" label="供应商" align="center" min-width="80" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                  <span > {{scope.row.supplier}}</span>
                                </template>
                              </el-table-column>

                      </el-table>
                  </div>
                  <div style="text-align: right;margin-top: 10px;">
                    <el-button  size="mini" @click="handleFeedDialogClick(item)">反馈异常</el-button>
                    <el-button type="primary" size="mini" @click="confirmJinCang(item.inNo,item.serialNo)" :disabled="item.confirmStatus==1">{{item.confirmStatus==1?'确认已进仓':'进仓确认'}}</el-button>
                  </div>
                  <div style="margin-top: 10px;padding: 10px 0px;border-top: 1px solid #e6ebf5;">
                        <!-- <div>进仓图片：</div> -->
                        <div v-if="item.picUrl" style="display:inline-flex">
                          <div >
                            <ImagePreview height="40px" v-for="(pic,index2) in (item.picUrl||'').split(',')" :key="index2" :src="pic" ></ImagePreview>
                          </div>
                        </div>
                  </div>
              </template>
          </CardWithHeader>
      </div>
        <!-- 反馈异常弹窗 -->
     <el-dialog
        :visible.sync="feedDialogVisible"
        width="30%"
      >                       
        <el-form :model="feedForm" :rules="feedRules" ref="feedFormRef" label-width="85px">
          <el-form-item label="反馈内容" prop="abnormalDesc">
            <el-input v-model="feedForm.abnormalDesc" type="textarea"  placeholder="请输入反馈内容" :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFeedForm">确 认</el-button>
          <el-button @click="feedDialogVisible = false">取 消</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import elDateSimplePicker from '@/components/DatePickerAdv/elDateSimplePicker';
import CardWithHeader from '@/components/CardWithHeader/index.vue';
import { getWarehouseInDetail,cusConfirmWsIn ,reportBatchWsInError} from "@/api/oms/emisWarehouseIn";

export default {
  name: "emisWarehouseInBatch",
  components: { elDateSimplePicker,CardWithHeader },
  props:{
    inNo:{
        type:String
    },
    stockInBatchList:{
      type:Array,
      default:()=>[]
    }
  },
  dicts: [
  ],
  data() {
    return {
      // 遮罩层
      loading: true,
      resetRefreshId:null,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 创建时间搜索
      dateTimeRange:[],
      // 总条数
      total: 0,
      // 进仓单批次表格数据 
      emisWarehouseInBatchList: this.stockInBatchList,

      currentId:null,
      openForm: false,
      titleForm: "",

      // 弹出展示层
      id:null,
      titleView:"",
      openView: false,
      // 更新站点时间范围
      daterangeEntryDate: [],
      // 更新站点时间范围
      daterangeConfirmDate: [],
      // 更新站点时间范围
      daterangeCreateTime: [],
      // 更新站点时间范围
      daterangeUpdateTime: [],
      //异常提交表单
      feedForm: {
        abnormalDesc: '',
      },
      feedDialogVisible:false,
      selectedItem:null,
       openViewForm:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        serialNo: null,
        inNo: null,
        inBatchNo: null,
        customerCode: null,
        customerName: null,
        orderSn: null,
        billCode: null,
        transCarNo: null,
        entryDate: null,
        confirmStatus: null,
        confirmDate: null,
        status: null,
        totalParcelQty: null,
        totalVolume: null,
        totalWeight: null,
        remark: null,
        delFlag: null,
      },
      feedRules: {
        abnormalDesc: [
          { required: true, message: '请输入反馈内容', trigger: 'blur' }
        ],
      },
    };
  },
  created() {
    this.queryParams.inNo=this.inNo;
    // this.getList();
  },
  methods: {
    /** 查询进仓单批次列表 */
    getList() {
      this.loading = true;
      getWarehouseInDetail({inNo:this.inNo}).then(response => {
        this.emisWarehouseInBatchList = response.data.stockInBatchList;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    // 排序 查询字段是表格中字段名字 动态取值排序顺序
    handleSortChange(column) {
      this.queryParams.orderByColumn = column.prop;
      this.queryParams.isAsc = column.order;
      this.getList();
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.currentId=null;
      this.openForm= true;
      this.titleForm = "新增";
    },
    handleShowMoreInput(){
      this.moreInputVisible = !this.moreInputVisible;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
       this.currentId= row.id;
       this.openForm = true;
       this.titleForm = "修改";
    },
    handleView(row) {
       this.id=row.id;
       this.titleView="查看";
       this.openView=true;
    //   this.router.push({ path: '/emis/emisWarehouseInBatch/viewDetail', query: { id: row.id }})
    },
    handleFormChanged(){
        this.openForm = false;
        this.getList();
    },
    cancelForm(){
      this.openForm = false;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除').then(function() {
        return delEmisWarehouseInBatch(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
    //   this.download('emis/emisWarehouseInBatch/export', {
    //     ...this.queryParams
    //   }, `emisWarehouseInBatch_${new Date().getTime()}.xlsx`)
     const loadingInstance = this.$loading({
            text: '正在导出...'
        })
       var qParam = {...this.queryParams};
       qParam.pageNum=1;
       qParam.pageSize=5000;

       listEmisWarehouseInBatch(this.addDateRange(qParam, this.dateTimeRange)).then(response => {
        this.downloadLoading = false
        if (response.code === 200) {
                const curList = response.rows
                import('@/vendor/Export2Excel').then(excel => {
                  const tHeader = ['id','进仓序列号','进仓单号','进仓子批次单号in_no+001','客户编号','客户名称','订单号','运单号','运输工具编号','进仓日期','客户确认状态','确认时间','状态','总件数','总体积','总重量','备注','租户ID','删除标志（0代表存在','创建者','创建时间','更新者','更新时间','创建站点','更新站点',];
                  const filterVal = ['id','serialNo','inNo','inBatchNo','customerCode','customerName','orderSn','billCode','transCarNo','entryDate','confirmStatus','confirmDate','status','totalParcelQty','totalVolume','totalWeight','remark','tenantId','delFlag','createBy','createTime','updateBy','updateTime','createSite','updateSite',];
                  const data = this.formatJson(filterVal, curList, response.rows)
                  excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filename: '进仓单批次',
                    autoWidth: true
                  })
                  loadingInstance.close()
                })
        }
      });
    },
    formatJson(filterVal, jsonData, resData) {
      let index = 0
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'index') {
          return ++index
        }
        if (j === 'status') {
          var statusStr='xxx'
          if(v[j] == 10){
              statusStr='xxx'
          }
          return statusStr;
        }
        return v[j]
      }))
    },
    /** 列索引函数  */
    getIndex($index) {
          return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
    },
    /** 时间搜索响应函数 */
    dateTimeChange(value){
        this.dateTimeRange=value;
    },
    async confirmJinCang(inNo,serialNo) {
      let confirmStatus = '2' // 部分入仓
      if (!inNo) {
        confirmStatus = '1' // 全部入仓
        inNo = this.billInfo.inNo
      }
      let res = await cusConfirmWsIn({ inNo, confirmStatus, _loading: true ,serialNo:serialNo }).then(() => {
        this.$modal.msgSuccess("操作成功");
        //刷新列表
        this.getList();
        //触发父组件更新进仓单详情
        this.$emit('updateWhsInDetail');
      })
    },
    async handleFeedDialogClick(item) {
      this.selectedItem=item;
      this.feedForm.abnormalDesc = '';
      this.feedDialogVisible = true;
    },
    submitFeedForm() {
      this.$refs.feedFormRef.validate((valid) => {
        if (valid) {
            reportBatchWsInError({
              inNo: this.inNo,
              abnormalDesc: this.feedForm.abnormalDesc,
              serialNo: this.selectedItem.serialNo
            }).then(() => {
              this.$modal.msgSuccess("反馈异常成功");
              this.feedDialogVisible = false;
              this.getList();
            }).catch(() => {});   
        }
      });
    }
  }
};
</script>

<style scoped>
  .el-divider{
    margin-top: 0px;
    background: 0 0;
    border-top: 1px solid #E6EBF5;
  }
  .el-divider__text {
    color: #0955ee;
    cursor: pointer;
  }
</style>