lemonBeans_ui/src/views/jiGang/jigangeject.vue

<template>
<div class="app-container">
  <el-form
    :model="queryParams"
    ref="queryForm"
    :inline="true"
    label-width="88px"
  >
    <el-row>
      <el-form-item label="日期" prop="fBsdate">
        <el-input
          v-model="queryParams.fBsdate"
          placeholder="请输入日期"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="提单号" prop="fMblno">
        <el-input
          v-model="queryParams.fMblno"
          placeholder="请输入提单号"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="制单人" prop="createBy">
        <el-input
          v-model="queryParams.createBy"
          placeholder="请输入制单人"
          clearable
          size="small"
        />
      </el-form-item>
    </el-row>
  </el-form>

  <h3><i class="el-icon-circle-plus"></i>收款信息</h3>
  <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"
        @click.prevent="addCollection()"
      >新行
      </el-button>
      <!-- <el-button :disabled="browseStatus" @click.prevent="deleteRow(warehouseDrList)"
      >删除
    </el-button> -->
      <el-button
        type="primary"
        size="small"
        @click="submitForm(2)"
      >保 存</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
          remote
          :remote-method="corpsRemoteMethod"
          placeholder="客户名称"
        >
          <el-option
            v-for="(dict, index) in KHblnoOptions"
            :key="index.fId"
            :label="dict.fName"
            :value="dict.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"
          filterable
          remote
          :remote-method="fWRemoteMethod"
          @change="changeFeeId(scope.row)"
          placeholder="费用名称"
        >
          <el-option
            v-for="(dict, index) in fDNameOptions"
            :key="index.fId"
            :label="dict.fName"
            :value="dict.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="(dict, index) in businessTypeOption"
            :key="index.dictValue"
            :label="dict.dictLabel"
            :value="dict.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="请选择计价单位"
          @change="changeFeeUnit(scope.row)"
          clearable
        >
          <el-option
            v-for="(dict, index) in jFeetunitOptions"
            :key="index.dictValue"
            :label="dict.dictLabel"
            :value="dict.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="数量"
          @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="单价"
          @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
          disabled
          oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
          v-model="scope.row.fAmount"
          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="请选择结算表票结、月结"
        >
          <el-option
            v-for="(dict, index) in fStltypeOptions"
            :key="index.dictValue"
            :label="dict.dictLabel"
            :value="parseInt(dict.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"
          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"
          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>

    <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>

  <h3><i class="el-icon-remove"></i>付款信息</h3>
  <div
    class="dialogTableTitle flex a-center jlr"
    style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 10px 0;
            "
  >
    <div>
      <el-button
        type="primary"
        @click.prevent="addpayment()"
        size="small"
      >新行
      </el-button>
      <el-button
        type="primary"
        size="small"
      >保 存</el-button
      >
    </div>
  </div>
  <el-table
    :data="warehouseCrList"
    ref="table"
    tooltip-effect="dark"
    border
    stripe
    show-summary
    :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
          remote
          :disabled="browseStatus"
          :remote-method="corpsRemoteMethod"
          placeholder="客户名称"
        >
          <el-option
            v-for="(dict, index) in KHblnoOptions"
            :key="index.fId"
            :label="dict.fName"
            :value="dict.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"
          filterable
          :disabled="browseStatus"
          remote
          :remote-method="fWRemoteMethod"
          @change="changeFeeId(scope.row)"
          placeholder="费用名称"
        >
          <el-option
            v-for="(dict, index) in fCNameOptions"
            :key="index.fId"
            :label="dict.fName"
            :value="dict.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="(dict, index) in businessTypeOption"
            :key="index.dictValue"
            :label="dict.dictLabel"
            :value="dict.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"
          filterable
          remote
          @change="changeFeeUnit(scope.row)"
          :disabled="browseStatus"
          :remote-method="corpsRemoteMethod"
          placeholder="计价单位"
        >
          <el-option
            v-for="(dict, index) in jFeetunitOptions"
            :key="index.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          ></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column
      prop="fQty"
      header-align="center"
      align="center"
      width="150px"
      label="数量"
    >
      <template slot-scope="scope">
        <el-input
          oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, "$1$2.$3")'
          v-model="scope.row.fQty"
          :disabled="browseStatus"
          @change="changeContractAmt(scope.row)"
          placeholder="数量"
          show-word-limit
        />
      </template>
    </el-table-column>
    <el-table-column
      prop="fUnitprice"
      header-align="center"
      align="center"
      width="150px"
      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"
          :disabled="browseStatus || scope.row.fSrcTypeId !== 0"
          @change="changeContractAmt(scope.row)"
          placeholder="单价"
          show-word-limit
        />
      </template>
    </el-table-column>
    <el-table-column
      prop="fAmount"
      header-align="center"
      align="center"
      width="150px"
      label="金额"
    >
      <template slot-scope="scope">
        <el-input
          disabled
          oninput='this.value=this.value.replace(/[^\-?\d.]/g,"").replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3")'
          v-model="scope.row.fAmount"
          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="(dict, index) in fStltypeOptions"
            :key="index.dictValue"
            :label="dict.dictLabel"
            :value="parseInt(dict.dictValue)"
          ></el-option>
        </el-select>
      </template>
    </el-table-column>

    <el-table-column
      prop="fCurrency"
      header-align="center"
      align="center"
      width="150px"
      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="150px"
      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="150px"
      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>
    <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"
      width="200px"
      label="操作"
    >
      <template slot-scope="scope">
        <!-- <el-button size="small">审核费用</el-button> -->
        <el-button
          @click.native.prevent="
                    deleteRoww(scope.$index, warehouseCrList)
                  "
          size="small"
          :disabled="browseStatus"
        >移除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
import { listFees } from '@/api/basicdata/fees'
import { listCorps } from '@/api/basicdata/corps'

export default {
  name: 'jigangeject',
  data() {
    return {
      queryParams:[],
      warehouseCrList:[],
      fCNameOptions:[],
      jFeetunitOptions:[],
      browseStatus:false,
      fDNameOptions:[],
      warehouseDrList:[]
    }
  },
  created() {
    this.getDicts("data_unitfees").then((response) => {
      if (response.data) {
        this.jFeetunitOptions = response.data;
      }
    });
  },
  methods: {
    addpayment() {
      this.warehouseCrList.push({
        fCorpid: null,
        fFeeid: null,
        fFeeUnitid: "",
        fQty: null,
        fUnitprice: null,
        fAmount: null,
        fCurrency: "RMB",
        fExrate: "1",
        fTaxrate: '',
        fCxrate: null,
        fRate: null,
        remarks: null,
        fMblno: '',
        fProductName: '',
        fMarks: '',
        fBusinessType: '',
        fSrcTypeId: 0,
      });
      this.fWbuOptions = [];
      let queryParams = { pageNum: 1, fDc: "C" };
      listFees(queryParams).then((response) => {
        this.fCNameOptions = response.rows;
      });
    },
    addCollection() {
      this.warehouseDrList.push({
        fCorpid: null,
        fFeeid: null,
        fFeeUnitid: "",
        fQty: null,
        fUnitprice: null,
        fAmount: null,
        fCurrency: "RMB",
        fExrate: "1",
        fTaxrate: '',
        fCxrate: null,
        fRate: null,
        remarks: null,
        fMblno: '',
        fProductName: '',
        fMarks: '',
        fBusinessType: '',
        fSrcTypeId: 0,
      });
      this.fWbuOptions = [];
      let queryParams = { pageNum: 1, fDc: "D" };
      listFees(queryParams).then((response) => {
        this.fDNameOptions = response.rows;
      });
    },
    // 付款合计
    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]));
        if (
          column.property === "fUnitprice" ||
          column.property === "fAmount" ||
          column.property === "fQty" ||
          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 lest in this.fWbuOptions) {
        for (let li in this.Collectionoptionss) {
          if (
            this.fWbuOptions[lest].fId === this.Collectionoptionss[li].fFeeid
          ) {
            this.$set(
              this.Collectionoptionss[li],
              "fFeeids",
              this.fWbuOptions[lest].fName
            );
          }
        }
      }
    },
  }
}
</script>

<style scoped>

</style>