Warehouse_management_lc_ui/src/views/Warehousing/mortgage/detailsPage.vue

<template>
  <div>
    <el-breadcrumb separator="/" style="display: flex; align-items: center; margin-bottom: 10px">
      <el-breadcrumb-item>
        <el-button plain size="mini" type="danger" icon="el-icon-arrow-left" @click="backToList">
          返回列表
        </el-button>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :model="data" ref="queryForm" :rules="rules" :inline="true" label-width="180px">


<!--      <el-form-item label="提单号" prop="fMblno">-->
<!--        <el-input-->
<!--          v-model="data.fMblno"-->
<!--          placeholder="请输入编号"-->
<!--          disabled-->
<!--          size="small"-->
<!--        />-->
<!--      </el-form-item>-->


      <el-form-item label="客户名称" prop="fCorpid">
<!--        <el-input-->
<!--          v-model="data.fCorpid"-->
<!--          placeholder="请输入编号"-->
<!--          disabled-->
<!--          size="small"-->
<!--        />-->

        <el-select v-model="data.fCorpid" clearable disabled filterable placeholder="请输入关键词"
                   size="small" style="width: 184px">
          <el-option v-for="(item, index) in fMblnoOptions" :key="index.fId" :label="item.fName"
                     :value="item.fId"></el-option>
        </el-select>
      </el-form-item>



      <el-form-item label="产业平台业务编号" prop="businessCode">
        <el-input
          v-model="data.businessCode"
          placeholder="请输入编号"
          disabled
          size="small"
        />
      </el-form-item>
      <el-form-item label="数仓平台对应编号" prop="serialNumber">
        <el-input
          v-model="data.serialNumber"
          placeholder="请输入编号"
          disabled
          size="small"
        />
      </el-form-item>
      <el-form-item label="仓库编码" prop="positionCode">
        <el-input
          v-model="data.positionCode"
          placeholder="请输入编号"
          disabled
          size="small"
        />
      </el-form-item>
      <el-form-item label="产业平台仓单申请号" prop="receiptApplyCode">
        <el-input
          v-model="data.receiptApplyCode"
          placeholder="请输入编号"
          disabled
          size="small"
        />
      </el-form-item>
      <el-form-item label="状态" prop="fBillstatusName">
        <el-input
          v-model="data.fBillstatusName"
          placeholder="请输入编号"
          disabled
          size="small"
        />
      </el-form-item>
      <el-form-item label="提交人" prop="createBy">
        <el-input
          v-model="data.createBy"
          placeholder="请输入编号"
          disabled
          size="small"
        />
      </el-form-item>
<!--      <el-form-item label="客户名称" prop="fCorpid">-->
<!--        <el-input-->
<!--          v-model="data.fCorpid"-->
<!--          placeholder="请输入编号"-->
<!--          disabled-->
<!--          size="small"-->
<!--        />-->
<!--      </el-form-item>-->


      <el-form-item label="仓储公司名称" prop="storageName">
        <el-input
          v-model="data.storageName"
          placeholder="请输入"
          :disabled="!isEdit"
          size="small"
        />
      </el-form-item>
      <el-form-item label="仓储合同编号" prop="storageContractCode">
        <el-input
          v-model="data.storageContractCode"
          placeholder="请输入"
          :disabled="!isEdit"
          size="small"
        />
      </el-form-item>
      <el-form-item label="仓储合同开始时间" prop="storageContractStart">
        <el-date-picker
          v-model="data.storageContractStart"
          style="width: 184px"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="date"
          :disabled="!isEdit"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="仓储合同结束时间" prop="storageContractEnd">
        <el-date-picker
          v-model="data.storageContractEnd"
          style="width: 184px"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="date"
          :disabled="!isEdit"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="仓储费率" prop="storageRate">
        <el-input
          v-model="data.storageRate"
          placeholder="请输入"
          :disabled="!isEdit"
          size="small"
        />
      </el-form-item>
      <el-form-item label="仓储缴纳日期" prop="storagePayTime">
        <el-date-picker
          v-model="data.storagePayTime"
          style="width: 184px"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="date"
          :disabled="!isEdit"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="保险单号" prop="insuranceCode">
        <el-input
          v-model="data.insuranceCode"
          placeholder="请输入"
          :disabled="!isEdit"
          size="small"
        />
      </el-form-item>
      <el-form-item label="保险金额" prop="insuranceAmount">
        <el-input
          v-model="data.insuranceAmount"
          placeholder="请输入"
          :disabled="!isEdit"
          size="small"
        />
      </el-form-item>
      <el-form-item label="保险开始时间" prop="insuranceStartTime">
        <el-date-picker
          v-model="data.insuranceStartTime"
          style="width: 184px"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="date"
          :disabled="!isEdit"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="保险结束时间" prop="insuranceEndTime">
        <el-date-picker
          v-model="data.insuranceEndTime"
          style="width: 184px"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="date"
          :disabled="!isEdit"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="保险人" prop="insurer">
        <el-input
          v-model="data.insurer"
          placeholder="请输入"
          :disabled="!isEdit"
          size="small"
        />
      </el-form-item>
      <el-form-item label="存货申请人" prop="inventory">
        <el-input
          v-model="data.inventory"
          placeholder="请输入"
          :disabled="!isEdit"
          size="small"
        />
      </el-form-item>
      <el-form-item label="保管审核人" prop="operator">
        <el-input
          v-model="data.operator"
          placeholder="请输入"
          :disabled="!isEdit"
          size="small"
        />
      </el-form-item>
      <el-form-item label="保管复核人" prop="auditor">
        <el-input
          v-model="data.auditor"
          placeholder="请输入"
          :disabled="!isEdit"
          size="small"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="data.remark"
          placeholder="请输入"
          :disabled="!isEdit"
          size="small"
        />
      </el-form-item>
    </el-form>

    <div style="margin: 8px">
      <el-button type="primary" size="mini" :disabled="selectDisable || !isEdit || typeDisabled" @click="masterPreservation">保存</el-button>
      <el-button type="primary" size="mini" :disabled="isEdit || typeDisabled" @click="isEdit = true; data.storageRate ? data.storageRate : 0">编辑</el-button>
      <el-button type="primary" size="mini" :disabled="selectDisable || isEdit || isEditRetinue || typeDisabled" @click="feedback()">配货完成</el-button>
    </div>
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1">
        <template slot="title">
          <span style="font-size: 16px; font-weight: bolder; margin-left: 5px">货物信息</span>
        </template>
        <el-table :data="goodsTypeList">
<!--          <el-table-column type="selection" width="55" align="center" />-->
          <el-table-column label="SPU" align="center" prop="spuId" />
          <el-table-column label="SKU" align="center" prop="skuId" />
          <el-table-column label="提单号" align="center" prop="billOfLading" />
          <el-table-column label="重量（吨）" align="center" prop="goodsWeight" />
          <el-table-column label="数量" align="center" prop="goodsQuantity" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="inquireGoodsList(scope.row)"
              >配货</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template slot="title">
          <span style="font-size: 16px; font-weight: bolder; margin-left: 5px">配货</span>
        </template>
        <div style="margin: 8px">
<!--          <el-button type="primary" size="mini" :disabled="!isEditRetinue || typeDisabled" @click="importData()">导入</el-button>-->
          <el-button type="primary" size="mini" :disabled="!isEditRetinue || typeDisabled" @click="PickUpPreservation()">保存</el-button>
          <el-button type="primary" size="mini" :disabled="isEditRetinue || typeDisabled" @click="isEditRetinue = true;">编辑</el-button>
        </div>

        <el-table :data="goodsList">
          <el-table-column label="库区" align="center" prop="fWarehouseInformation" />
          <el-table-column label="数量" align="center" prop="fQtyD">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.fQtyD" :disabled="!isEditRetinue" controls-position="right" :min="0" :precision="0"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="净重（吨）" align="center" prop="fGrossweightD">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.fGrossweightD" :disabled="!isEditRetinue" controls-position="right" :min="0"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="提单号" align="center" prop="fMblno" />
          <el-table-column label="备注" align="center" prop="remark">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark" :disabled="!isEditRetinue"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                :disabled="!isEditRetinue || typeDisabled"
                @click="retinueDelete(scope)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>

    <el-dialog
      title="导入"
      :visible.sync="dialogVisible"
      width="30%">
      <el-table :data="importGoodsList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="库区" align="center" prop="fWarehouseInformation" />
        <el-table-column label="数量" align="center" prop="fQtyD" />
        <el-table-column label="毛重（吨）" align="center" prop="fGrossweightD" />
      </el-table>


      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="importDataConfirm()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { mortgageDetail, distribution, addCollateralGoods, collateralGoods, mortgageFeedback, masterSuppressThePreservationOfGoods } from "@/api/Warehousing/mortgage";
import { listCorps } from "@/api/basicdata/corps";
export default {
  name: 'Fees',
  components: {},
  props: {
    detailData: {
      type: Object
    }
  },
  data() {
    return {
      queryParams: {
        kpTime: new Date(),
        type: 2
      },
      data: {},
      form: {},
      activeNames: ['1', '2'],
      goodsTypeList: [],
      goodsList: [],
      importGoodsList: [],
      dialogVisible: false,
      // 选择操作禁用
      selectDisable: false,
      // 小保存数据禁用
      retinuePreservationDisable: true,
      // 编辑状态
      isEdit: false,
      // 抵押状态
      typeDisabled: true,
      isEditRetinue: false,
      goodsType: {},
      multipleSelection: [],
      fMblnoOptions: [],
      rules: {
        storageName: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        storageContractCode: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        storageContractStart: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        storageContractEnd: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        storageRate: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        storagePayTime: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        insuranceCode: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        insuranceAmount: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        insuranceStartTime: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        insuranceEndTime: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        insurer: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        inventory: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        operator: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        auditor: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
      },
    }
  },
  created() {


    listCorps({ type: 1 }).then((response) => {
      this.fMblnoOptions = response.rows;
    });

    if (this.detailData.id != null) {
      mortgageDetail(this.detailData.id).then(res => {
        // 1 抵押申请 2 抵押取消 3 抵押成功 4 抵押失败 5 已提交配货 6 申请失败 7 解押成功
        if (res.fBillstatus == '1') {
          res.fBillstatusName = '抵押申请'
        } else if (res.fBillstatus == '2') {
          res.fBillstatusName = '抵押取消'
        } else if (res.fBillstatus == '3') {
          res.fBillstatusName = '抵押成功'
        } else if (res.fBillstatus == '4') {
          res.fBillstatusName = '抵押失败'
        } else if (res.fBillstatus == '5') {
          res.fBillstatusName = '已提交配货'
        } else if (res.fBillstatus == '6') {
          res.fBillstatusName = '申请失败'
        } else if (res.fBillstatus == '7') {
          res.fBillstatusName = '解押成功'
        }
        if (res.fBillstatus == '1' ||
          res.fBillstatus == '4' ||
          res.fBillstatus == '6' ||
          res.fBillstatus == '7') {
          this.typeDisabled = false
        }

        this.data = res
        this.goodsTypeList = res.skuItemList
      })
    } else {

    }

  },
  methods: {
    masterPreservation() {
      this.$refs['queryForm'].validate((valid) => {
        if (valid) {
          masterSuppressThePreservationOfGoods(this.data).then(res => {
            this.isEdit = false
            this.$message({
              message: '保存成功',
              type: 'success'
            });
          })
        }
      });
    },
    retinueDelete(scope) {
      console.log(scope)
      this.goodsList.splice(scope.$index, 1)
    },
    // 配货保存
    PickUpPreservation() {
      addCollateralGoods({pid: this.goodsType.id, list: this.goodsList}).then(res => {
        this.selectDisable = false
        this.retinuePreservationDisable = true
        this.isEditRetinue = false
        this.isEdit = false
        this.$message({
          message: '配货信息保存成功',
          type: 'success'
        });
      })
    },
    // 导入数据确认
    importDataConfirm() {
      this.multipleSelection.forEach(datas => {
        datas.pid = this.goodsType.id
      })
      this.goodsList.push(...this.multipleSelection)
      this.dialogVisible = false
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 导入
    importData() {
      if (this.goodsType) {
        distribution(this.goodsType).then(res => {
          this.importGoodsList = res.data
          this.dialogVisible = true
        })
      } else {
        this.$message({
          message: '请先选择数据数据',
          type: 'warning'
        });
      }
    },
    inquireGoodsList(row) {
      collateralGoods(row.id).then(res => {

        this.goodsType = row
        this.goodsType.ownerId = this.data.fCorpid


        this.goodsList = res.data
        // this.selectDisable = true;
        this.retinuePreservationDisable = false;

        if (this.data.fBillstatusName == '抵押申请') {
          this.isEditRetinue = true;
          this.importData();
        }
      })
    },
    backToList() {
      this.$emit('goBack')
    },
    feedback(type) {
      this.$refs['queryForm'].validate((valid) => {
        if (valid) {
          // 判断按钮 1 配货完成 2 不可配货
          // if (type === 1) {
          console.log(this.data.fId, 'fid')
            mortgageFeedback({fId: this.data.fId, operationType: 10}).then(res => {
              this.typeDisabled = true
              this.$message({
                message: '提交成功',
                type: 'success'
              });
            })
          // } else if (type === 2) {
          //   if (this.data.remark) {
          //     mortgageFeedback({fId: this.data.fId, operationType: 20}).then(res => {
          //       this.$message({
          //         message: '提交成功',
          //         type: 'success'
          //       });
          //     })
          //   } else {
          //     this.$message({
          //       message: '请输入备注',
          //       type: 'warning'
          //     });
          //   }
          // }

        } else {
          this.$message({
            message: '请输入必填项',
            type: 'warning'
          });
        }
      });

    }
  }
}
</script>

<style scoped>
::v-deep.el-form-item {
  margin-bottom: 6px;
}
</style>