Warehouse_management_ui/src/views/Warehousing/components/incomeMoney.vue

<template>
  <div>
    <div
        class="dialogTableTitle flex a-center jlr"
        style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 0;
      "
    >
      <div>
        <el-button
            size="small"
            type="primary"
            :disabled="browseStatus"
            @click.prevent="addCollection()"
        >新行
        </el-button>
        <el-button
            type="primary"
            size="small"
            :disabled="browseStatus"
            @click="saveForm"
        >保 存
        </el-button
        >
        <el-button
            size="small"
            @click.prevent="handleSelect()"
            :disabled="browseStatus"
            type="danger"
        >作业费协议
        </el-button>
        <el-button
            v-if="feeDisplay"
            size="small"
            :disabled="browseStatus"
            type="warning"
        >计算仓储费
        </el-button>
      </div>
    </div>
    <el-table
        :data="warehouseDrList"
        ref="table"
        tooltip-effect="dark"
        border
        stripe
        show-summary
        @selection-change="Collectionoptions"
        :summary-method="warehouseDrSummaries"
    >
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="序号" type="index" width="80"></el-table-column>
      <el-table-column
          prop="fCorpid"
          header-align="center"
          align="center"
          width="180px"
          label="客户名称"
      >
        <template slot-scope="scope">
          <el-select
              v-model="scope.row.fCorpid"
              filterable
              clearable
              placeholder="客户名称"
              :disabled="browseStatus"
          >
            <el-option
                v-for="(item, index) in fMblnoOptions"
                :key="index.fId"
                :label="item.fName"
                :value="item.fId"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
          prop="fFeeid"
          header-align="center"
          align="center"
          width="180px"
          label="费用名称"
      >
        <template slot-scope="scope">
          <el-select
              v-model="scope.row.fFeeid"
              clearable
              placeholder="费用名称"
              :disabled="browseStatus"
          >
            <el-option
                v-for="(item, index) in fDNameOptions"
                :key="index.fId"
                :label="item.fName"
                :value="item.fId"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
          prop="fBusinessType"
          header-align="center"
          align="center"
          width="180px"
          label="作业类型"
      >
        <template slot-scope="scope">
          <el-select
              style="width: 80%"
              v-model="scope.row.fBusinessType"
              filterable
              disabled
          >
            <el-option
                v-for="(item, index) in businessTypeOption"
                :key="index.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
          prop="fFeeUnitid"
          header-align="center"
          align="center"
          width="180px"
          label="计价单位"
      >
        <template slot-scope="scope">
          <el-select
              v-model="scope.row.fFeeUnitid"
              placeholder="请选择计价单位"
              clearable
              :disabled="browseStatus"
              @change="changeFeeUnit(scope.row)"
          >
            <el-option
                v-for="(item, index) in fFeetUnitOptions"
                :key="index.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
          prop="fQty"
          header-align="center"
          align="center"
          width="130px"
          label="数量"
      >
        <template slot-scope="scope">
          <el-input
              oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
              v-model="scope.row.fQty"
              placeholder="数量"
              :disabled="browseStatus"
              @change="changeContractAmt(scope.row)"
              show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
          prop="fUnitprice"
          header-align="center"
          align="center"
          width="130px"
          label="单价"
      >
        <template slot-scope="scope">
          <el-input
              oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
              v-model="scope.row.fUnitprice"
              placeholder="单价"
              :disabled="browseStatus || scope.row.fSrcTypeId !== 0"
              @change="changeContractAmt(scope.row)"
              show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
          prop="fAmount"
          header-align="center"
          align="center"
          width="130px"
          label="金额"
      >
        <template slot-scope="scope">
          <el-input
              oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
              v-model="scope.row.fAmount"
              :disabled="browseStatus || scope.row.fSrcTypeId !== 0"
              placeholder="金额"
              show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
          prop="fStltypeid"
          header-align="center"
          align="center"
          width="130px"
          label="结算方式"
      >
        <template slot-scope="scope">
          <el-select
              v-model="scope.row.fStltypeid"
              placeholder="请选择结算表票结、月结"
              :disabled="browseStatus"
          >
            <el-option
                v-for="(item, index) in fStltypeOptions"
                :key="index.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
          prop="fCurrency"
          header-align="center"
          align="center"
          width="130px"
          label="币别"
      >
        <template slot-scope="scope">
          <el-input
              v-model="scope.row.fCurrency"
              :disabled="browseStatus"
              placeholder="币别"
              show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
          prop="fExrate"
          header-align="center"
          align="center"
          width="130px"
          label="汇率"
      >
        <template slot-scope="scope">
          <el-input
              v-model="scope.row.fExrate"
              :disabled="browseStatus"
              placeholder="汇率"
              show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
          prop="fTaxrate"
          header-align="center"
          align="center"
          width="130px"
          label="税率"
      >
        <template slot-scope="scope">
          <el-input
              v-model="scope.row.fTaxrate"
              :disabled="browseStatus"
              placeholder="税率"
              show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
          prop="fMblno"
          header-align="center"
          align="center"
          width="130px"
          label="提单号"
      >
        <template slot-scope="scope">
          <el-input
              v-model="scope.row.fMblno"
              :disabled="browseStatus"
              placeholder="提单号"
              show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
          prop="fProductName"
          header-align="center"
          align="center"
          width="140px"
          label="品名"
      >
        <template slot-scope="scope">
          <el-input
              v-model="scope.row.fProductName"
              :disabled="browseStatus"
              placeholder="品名"
              show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
          prop="fMarks"
          header-align="center"
          align="center"
          width="130px"
          label="品牌"
      >
        <template slot-scope="scope">
          <el-input
              v-model="scope.row.fMarks"
              :disabled="browseStatus"
              placeholder="品牌"
              show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
          prop="fSrcTypeId"
          header-align="center"
          align="center"
          width="130px"
          label="来源"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.fSrcTypeId === 0">录入</span>
          <span v-if="scope.row.fSrcTypeId !== 0">协议</span>
        </template>
      </el-table-column>
      <span v-if="feeDisplay">
      <el-table-column
          prop="fBilltype"
          header-align="center"
          align="center"
          width="140px"
          label="业务来源"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.fBilltype === 'SJRK'">入库</span>
          <span v-if="scope.row.fBilltype === 'SJCK'">出库</span>
          <span v-if="scope.row.fBilltype === 'KCZZ'">库存总账</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="fMblno"
          header-align="center"
          align="center"
          width="140px"
          label="业务单号"
      >
      </el-table-column>
      <el-table-column
          prop="fProductName"
          header-align="center"
          align="center"
          width="140px"
          label="货物名称"
      >
      </el-table-column>
      <el-table-column
          prop="fMarks"
          header-align="center"
          align="center"
          width="140px"
          label="唛头"
      />
      <el-table-column
          prop="fBsdate"
          header-align="center"
          align="center"
          width="140px"
          label="业务日期"
      >
        <template slot-scope="scope">
          <el-date-picker
              v-model="scope.row.fBsdate"
              size="large"
              type="date"
              disabled
              value-format="timestamp"
              placeholder="业务日期"
          >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column
          prop="fBillingway"
          header-align="center"
          align="center"
          width="180px"
          label="计费单位"
      >
        <template slot-scope="scope">
          <el-select
              v-model="scope.row.fBillingway"
              placeholder="请选择计费单位"
              disabled
              clearable
          >
            <el-option
                v-for="dict in fFeetunitOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
          prop="fBillingQty"
          header-align="center"
          align="center"
          width="140px"
          label="计费数量"
      >
      </el-table-column>
      <el-table-column
          prop="fChargedate"
          header-align="center"
          align="center"
          width="140px"
          label="计费起始日期"
      >
        <template slot-scope="scope">
          <el-date-picker
              v-model="scope.row.fChargedate"
              size="large"
              type="date"
              disabled
              value-format="timestamp"
              placeholder="计费起始日期"
          >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column
          prop="fBillingDeadline"
          header-align="center"
          align="center"
          width="140px"
          label="计费截止日期"
      >
        <template slot-scope="scope">
          <el-date-picker
              v-model="scope.row.fBillingDeadline"
              size="large"
              type="date"
              disabled
              value-format="timestamp"
              placeholder="计费截止日期"
          >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column
          prop="fBillingDays"
          header-align="center"
          align="center"
          width="140px"
          label="计费天数"
      >
      </el-table-column>
      <el-table-column
          prop="fInventoryDays"
          header-align="center"
          align="center"
          width="140px"
          label="库存天数"
      >
      </el-table-column>
      <el-table-column
          prop="fAmt"
          header-align="center"
          align="center"
          width="140px"
          label="计费金额"
      >
      </el-table-column>
      </span>

      <el-table-column
          prop="remarks"
          header-align="center"
          align="center"
          width="150px"
          label="备注"
      >
        <template slot-scope="scope">
          <el-input
              v-model="scope.row.Remarks"
              :disabled="browseStatus"
              placeholder="备注"
              show-word-limit
          />
        </template>
      </el-table-column>
      <el-table-column
          header-align="center"
          align="center"
          label="操作"
          width="200px"
      >
        <template slot-scope="scope">
          <el-button
              @click.native.prevent="deleteRow(scope.$index, warehouseDrList)"
              size="small"
              :disabled="browseStatus"
          >移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 选择作业费协议数据 -->
    <el-dialog
        v-dialogDrag
        title="作业费协议"
        :close-on-click-modal="false"
        :modal="false"
        style="box-shadow: 0 1px 3px rgba(0, 0, 0, 0) !important"
        :visible.sync="warehousingagreements"
        width="70%"
    >
      <template slot="作业费协议">
        <div class="avue-crud__dialog__header">
          <span class="el-dialog__title">
            <span
                style="
                display: inline-block;
                width: 3px;
                height: 20px;
                margin-right: 5px;
                float: left;
                margin-top: 2px;
              "
            ></span>
          </span>
        </div>
      </template>
      <el-menu
          :default-active="activeIndex"
          v-if="Navigation === true"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
      >
        <el-menu-item index="1">车队作业费</el-menu-item>
        <el-menu-item index="2">劳务作业费</el-menu-item>
      </el-menu>

      <el-table
          :data="tasklegList"
          ref="table"
          tooltip-effect="dark"
          width="100%"
          border
          stripe
          @selection-change="whgenlegSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="行号" type="index" width="80">
        </el-table-column>
        <el-table-column
            prop="fCorpname"
            header-align="center"
            align="center"
            label="客户名称"
        />
        <el-table-column
            prop="fName"
            header-align="center"
            align="center"
            label="费用名称"
        />
        <el-table-column
            prop="fFeeUnitid"
            header-align="center"
            align="center"
            width="180px"
            label="计价单位"
        >
          <template slot-scope="scope">
            <el-select
                v-model="scope.row.fFeeUnitid"
                placeholder="请选择计价单位"
                @change="changeFeeUnit(scope.row)"
                disabled
                clearable
            >
              <el-option
                  v-for="(dict, index) in fFeetUnitOptions"
                  :key="index.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
            prop="fPrice"
            header-align="center"
            align="center"
            label="单价"
        />
      </el-table>

      <pagination
          v-show="whgenlegTotal > 0"
          :total="whgenlegTotal"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="getWhgenlegList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="zhgenlegData">导 入</el-button>
        <el-button
            @click="
            warehousingagreements = false;
            Navigation = false;
          "
        >取 消
        </el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {operationAgreement} from "@/api/agreement/agreement";

export default {
  props: {
    feeDisplay:false,
    browseStatus: {
      type: Boolean,
      default: false,
    },
    warehouseDrList: {
      type: Array,
      default: [],
    },
    businessTypeOption: {
      type: Array,
      default: [],
    },
    fMblnoOptions: {
      type: Array,
      default: [],
    },
    fDNameOptions: {
      type: Array,
      default: [],
    },
    fFeetUnitOptions: {
      type: Array,
      default: [],
    },
    fStltypeOptions: {
      type: Array,
      default: [],
    },
    fGrossweight: {
      type: Number,
      default: null,
    },
    fQty: {
      type: Number,
      default: null,
    },
    fNetweight: {
      type: Number,
      default: null,
    },
    fCntqty: {
      type: Number,
      default: null,
    },
    form: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      Collectionoptionss: [],
      warehousingagreements: false,
      whgenlegTotal: 0,
      Navigation: false,
      tasklegList: [],
      dialogWhgenlegList: [],
      pageNum: 1,
      pageSize: 10,
    };
  },
  methods: {
    saveForm() {
      this.$emit("chiSave");
    },
    addCollection() {
      this.$emit("chiAdd");
    },
    // 付款合计
    warehouseDrSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        // column.property === "fUnitprice" ||
        if (
            column.property === "fAmount" ||
            column.property === "fQty"
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2);
        }
      });
      return sums;
    },
    // 收款选
    Collectionoptions(selection) {
      this.Collectionoptionss = selection;
      for (let item in this.fWbuOptions) {
        for (let li in this.Collectionoptionss) {
          if (
              this.fWbuOptions[item].fId === this.Collectionoptionss[li].fFeeid
          ) {
            this.$set(
                this.Collectionoptionss[li],
                "fFeeids",
                this.fWbuOptions[item].fName
            );
          }
        }
      }
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    // 变更计价单位
    changeFeeUnit(row) {
      if (!row.fFeeUnitid) {
        return false;
      }
      if (row.fFeeUnitid === "2") {
        this.$set(row, "fQty", (this.fGrossweight / 1000).toFixed(2));
      } else if (row.fFeeUnitid === "1") {
        this.$set(row, "fQty", this.fQty.toFixed(2));
      } else if (row.fFeeUnitid === "3") {
        this.$set(row, "fQty", (this.fNetweight / 1000).toFixed(2));
      } else if (row.fFeeUnitid === "7") {
        this.$set(row, "fQty", this.fCntqty);
      } else {
        this.$set(row, "fQty", 0);
      }
      if (row.fUnitprice) {
        this.$set(
            row,
            "fAmount",
            parseFloat(Number(row.fUnitprice) * Number(row.fQty)).toFixed(2)
        );
      }
    },
    // 数量计算
    changeContractAmt(row) {
      let fQty = 0;
      let fUnitprice = 0;
      if (row.fUnitprice) {
        fUnitprice = row.fUnitprice;
      }
      if (row.fQty) {
        fQty = row.fQty;
      }
      this.$set(row, "fAmount", Number(fUnitprice) * Number(fQty)).toFixed(2);
    },
    handleSelect() {
      if (!this.form.fCorpid) {
        this.$message({
          message: "请维护客户",
          type: "warning",
        });
      } else if (this.form.fProductName == undefined) {
        this.$message({
          message: "请维护入库明细品名",
          type: "warning",
        });
      } else {
        this.dialogWhgenlegList = [];
        this.whgenlegTotal = 0;
        this.warehousingagreements = true;
        this.getWhgenlegList();
      }
    },
    // 查询作业费信息
    getWhgenlegList() {
      let data = {};
      this.Navigation = false;
      data = {
        pageNum: 1,
        pageSize: 10,
        fCorpid: this.form.fCorpid,
      };
      operationAgreement(data).then((response) => {
        response.rows.map((e) => {
          if (e.fFeeUnitid) {
            e.fFeeUnitid = e.fFeeUnitid.toString();
          }
        });
        this.tasklegList = response.rows;
        this.whgenlegTotal = response.total;
      });
    },
    // 库存总账多选框
    whgenlegSelectionChange(selection) {
      this.dialogWhgenlegList = selection;
    },
    //导入收付款信息明细
    zhgenlegData() {
      if (this.dialogWhgenlegList.length === 0) {
        this.$message({
          message: "请选择需要导入的数据",
          type: "warning",
        });
      } else {
        this.dialogWhgenlegList.map((e) => {
          let qty = 1;
          if (e.fFeeUnitid == 1) {
            qty = this.fQty;
          } else if (e.fFeeUnitid == 2) {
            qty = (this.fGrossweight / 1000).toFixed(2);
          } else if (e.fFeeUnitid == 3) {
            qty = (this.fNetweight / 1000).toFixed(2);
          } else if (e.fFeeUnitid == 7) {
            qty = this.fCntqty;
          }
          let fAmount = 0;
          fAmount = e.fPrice * qty;
          this.warehouseDrList.push({
            fQty: qty,
            fCorpid: e.fCorpid,
            fFeeid: e.feeFId,
            fFeeUnitid: e.fFeeUnitid,
            fUnitprice: e.fPrice,
            fCurrency: "RMB",
            fExrate: 1,
            fAmount: fAmount,
            fTaxrate: this.fTaxrate,
            fMblno: this.form.fMblno,
            fProductName: this.form.fProductName,
            fMarks: this.form.fMarks,
            fBusinessType: this.form.fBusinessType,
            fSrcTypeId: e.fId,
          });
        });

        this.warehousingagreements = false;
      }
    },
  },
  watch: {
    browseStatus(val) {
      this.browseStatus = val;
    },
    warehouseDrList(val) {
      this.warehouseDrList = val;
    },
  },
};
</script>

<style scoped lang="scss">
</style>