hjjc-workbench-web/src/views/contract/components/paymentRegistration.vue

<template>
  <div>
    <!--    付款登记-->
    <xy-dialog
      title="付款登记"
      :is-show.sync="isShowPaymentRegistration"
      type="form"
      class="payment-registration"
      :form="paymentRegistrationForm"
      :rules="paymentRegistrationRules"
      @submit="submit"
      ref="paymentRegistration"
    >
      <template v-slot:extraFormTop>
        <div class="payment-registration-row">
          <div class="payment-registration-row-title">受款单位</div>
          <div class="payment-registration-row-content">
            {{ contract.supply }}
          </div>
        </div>
        <div class="payment-registration-row">
          <div class="payment-registration-row-title">合同名称</div>
          <div class="payment-registration-row-content">
            {{ contract.name }}
          </div>
        </div>
        <div class="payment-registration-row">
          <div class="payment-registration-row-title">合同金额</div>
          <div class="payment-registration-row-content">
            {{ priceFormat(contract.money) }} （元）
          </div>
        </div>
        <div style="display: flex">
          <div class="payment-registration-row">
            <div class="payment-registration-row-title">已申请金额</div>
            <div class="payment-registration-row-content">
              {{ totalApplyMoney() }} （元）
            </div>
          </div>
          <div class="payment-registration-row">
            <div class="payment-registration-row-title">已申请笔数</div>
            <div class="payment-registration-row-content">
              {{ payment.length }}
            </div>
          </div>
        </div>
        <div style="display: flex">
          <div class="payment-registration-row">
            <div class="payment-registration-row-title">已付金额</div>
            <div class="payment-registration-row-content">
              {{ totalMoney() }} （元）
            </div>
          </div>
          <div class="payment-registration-row">
            <div class="payment-registration-row-title">支付占比</div>
            <div class="payment-registration-row-content">
              {{ percentPay() }}%
            </div>
          </div>
          <div class="payment-registration-row">
            <div class="payment-registration-row-title">已付笔数</div>
            <div class="payment-registration-row-content">
              {{ actNumsTotal() }}
            </div>
            <div
              class="payment-registration-row-content"
              style="color: #ff0000; padding-left: 16px; cursor: pointer"
            >
              <Poptip :transfer="true">
                <div>点击查看列表</div>
                <template v-slot:content>
                  <template v-if="payment && payment.length > 0">
                    <xy-table
                      :height="200"
                      :list="payment"
                      :table-item="payTable"
                    >
                      <template v-slot:btns>
                        <p></p>
                      </template>
                    </xy-table>
                  </template>
                  <template v-else>
                    <div style="text-align: center">暂无已付笔数</div>
                  </template>
                </template>
              </Poptip>
            </div>
          </div>
        </div>
      </template>
      <template v-slot:applyMoney>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red; font-weight: 600; padding-right: 4px"
              >*</span
            >申请付款金额
          </div>
          <div class="xy-table-item-content xy-table-item-price">
            <el-input
              clearable
              placeholder="请填写付款金额"
              v-model="paymentRegistrationForm.applyMoney"
              style="width: 150px"
            />
          </div>
        </div>
      </template>

      <template v-slot:audit_money>
        <div class="xy-table-item">
          <div class="xy-table-item-label">审计金额</div>
          <div class="xy-table-item-content xy-table-item-price">
            <el-input
              clearable
              placeholder="请填写审计金额"
              v-model="form.audit_money"
              style="width: 150px"
            />
          </div>
        </div>
      </template>
      <template v-slot:deductionMoney>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red; font-weight: 600; padding-right: 4px"
              >*</span
            >本期扣款金额
          </div>
          <div class="xy-table-item-content xy-table-item-price">
            <el-input
              clearable
              placeholder="请填写扣款金额"
              v-model="paymentRegistrationForm.deductionMoney"
              style="width: 150px"
            />
          </div>
        </div>
      </template>

      <template v-slot:remark>
        <div class="xy-table-item">
          <div class="xy-table-item-label">备注</div>
          <div class="xy-table-item-content">
            <el-input
              type="textarea"
              clearable
              placeholder="进度款日期：2022.6.8-2022.7.7"
              v-model="paymentRegistrationForm.remark"
              style="width: 300px"
            />
          </div>
        </div>
      </template>
      <template v-slot:type>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red; font-weight: 600; padding-right: 4px"
              >*</span
            >款项类型
          </div>
          <div class="xy-table-item-content">
            <el-select
              placeholder="选择款项类型或直接录入其他类型"
              v-model="paymentRegistrationForm.type"
              style="width: 150px"
              filterable
              allow-create
              clearable
            >
              <el-option
                v-for="item in paymentType"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:isLast>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="width: 200px">
            <span style="color: red; font-weight: 600; padding-right: 4px"
              >*</span
            >是否为最后一笔
          </div>
          <div class="xy-table-item-content">
            <el-switch v-model="paymentRegistrationForm.isLast" />
            <!--                       @change="toggleSelection"-->
          </div>
        </div>
      </template>
      <template v-slot:extraFormBottom v-if="false">
        <Input
          search
          enter-button="搜 索"
          placeholder="搜索预算计划.."
          v-model="searchContent"
          @on-search="getBudgets"
        />
        <xy-table
          :list="plans"
          :show-index="false"
          :table-item="planTable"
          :height="310"
          style="margin-top: 10px"
          ref="planTable"
          @select="selectPlan"
        >
          <template v-slot:btns>
            <el-table-column label="使用金额" header-align="center">
              <template slot-scope="scope">
                <Input
                  :value="scope.row.useMoney"
                  @input="(e) => (scope.row.useMoney = e)"
                />
              </template>
            </el-table-column>
          </template>
        </xy-table>

        <div style="display: flex; justify-content: flex-end">
          <Page :total="planTotal" show-elevator @on-change="pageChange" />
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import { getparameter } from "@/api/system/dictionary";
import { getFundLog, addFundLog } from "@/api/paymentRegistration/fundLog";
import { getBudget } from "@/api/budget/budget";
import { detailContract, editorContract } from "@/api/contract/contract";
import { Message } from "element-ui";
import { parseTime } from "@/utils";

export default {
  data() {
    return {
      searchContent: "",
      planTotal: 0,
      pageIndex: 1,
      //付款登记
      plans: [],
      planTypes: [],
      contract: {},
      payment: [], //合同关联的付款登记
      payTable: [
        {
          label: "申请金额",
          prop: "apply_money",
          sortable: false,
          width: 160,
          align: "right",
        },
        {
          label: "已付金额",
          prop: "act_money",
          sortable: false,
          width: 160,
          align: "right",
        },
        {
          label: "时间",
          prop: "created_at",
          sortable: false,
          width: 120,
          formatter: (t1, t2, value) => {
            return parseTime(new Date(value), "{y}-{m}-{d}");
          },
        },
      ],
      paymentType: ["进度款", "结算款", "质保金"],
      isShowPaymentRegistration: false,
      paymentRegistrationForm: {
        applyMoney: "",
        deductionMoney: "",
        audit_money: "",
        type: "",
        isLast: false,
        plan: [],
        remark: "",
      },
      form: {
        audit_money: 0,
      },
      paymentRegistrationRules: {
        applyMoney: [
          {
            required: true,
            message: "必填",
          },
          {
            pattern: /^\d+(\.\d+)?$/,
            message: "必须为数字",
          },
        ],
        deductionMoney: [
          {
            required: true,
            message: "必填",
          },
          {
            pattern: /^\d+(\.\d+)?$/,
            message: "必须为数字",
          },
        ],
        type: [
          {
            required: true,
            message: "必选",
          },
        ],
      },
      planTable: [
        {
          sortable: false,
          width: 36,
          type: "selection",
        },
        {
          label: "分类",
          prop: "type",
          formatter: (cell, data, value) => {
            let res = this.planTypes.filter((item) => {
              return item.id === value;
            });
            return res[0]?.value || "未知";
          },
        },
        {
          label: "名称",
          prop: "name",
          align: "left",
        },
        {
          label: "计划金额",
          prop: "money",
          align: "right",
        },
      ],
    };
  },
  methods: {
    async getPlanTypes() {
      const res = await getparameter({
        number: "money_way",
      });
      this.planTypes = res.detail;
    },

    //翻页
    pageChange(e) {
      this.pageIndex = e;
      this.getBudgets();
    },

    //合计申请金额
    totalApplyMoney() {
      let total = 0.0;
      this.payment.map((item) => {
        total += Number(item.apply_money);
      });
      return total.toFixed(2);
    },
    //合计金额
    totalMoney() {
      let total = 0.0;
      this.payment.map((item) => {
        total += Number(item.act_money);
      });
      return total.toFixed(2);
    },
    //已付笔数
    actNumsTotal() {
      let total = 0;
      this.payment.map((item) => {
        if (Number(item.act_money)) {
          total++;
        }
      });
      return total;
    },
    //支付占比
    percentPay() {
      let total = this.totalMoney();
      return ((total / this.contract.money) * 100).toFixed(2) || 0;
    },

    //获取合同信息
    async getContract(info) {
      this.contract = await detailContract({
        id: info.id,
      });

      this.paymentRegistrationForm.plan = this.contract.plans.map((item) => {
        return {
          plan_id: item.id,
          use_money: item.useMoney,
          new_money: item.money,
        };
      });

      this.form.audit_money = this.contract.audit_money;

      const res = await getFundLog({
        contract_id: this.contract.id,
      });

      this.payment = res.data;
    },

    submit() {
      let data = {
        contract_id: this.contract.id,
        apply_money: this.paymentRegistrationForm.applyMoney,
        discount_money: this.paymentRegistrationForm.deductionMoney,
        type: this.paymentRegistrationForm.type,
        is_end: this.paymentRegistrationForm.isLast ? 1 : 0,
        remark: this.paymentRegistrationForm.remark,
        audit_money: this.paymentRegistrationForm.audit_money,
      };
      addFundLog(data).then((res) => {
        //付款申请后同时更新一下合同中审计金额
        editorContract({
          id: this.contract.id,
          audit_money: this.form.audit_money,
        }).then((r) => {
          this.$emit("paid",{
            name: this.contract?.name,
            type: this.contract?.type,
            number: this.contract?.number,
            id: this.contract?.id,
            reason: this.paymentRegistrationForm.remark,
            yizhifucishu: this.actNumsTotal(),
            yizhifujine: this.totalMoney(),
            zongjia: this.totalApplyMoney()
          })
          console.log({
            name: this.contract?.name,
            type: this.contract?.type,
            number: this.contract?.number,
            id: this.contract?.id,
            reason: this.paymentRegistrationForm.remark,
            yizhifucishu: this.actNumsTotal(),
            yizhifujine: this.totalMoney(),
            zongjia: this.totalApplyMoney()
          })
          this.isShowPaymentRegistration = false;
          Message({
            type: "success",
            message: "操作成功",
          });
        });
        this.$refs["paymentRegistration"].reset();
      });
    },

    //计划
    //获取预算计划
    async getBudgets() {
      let res = await getBudget({
        name: this.searchContent,
        page_size: 10,
        page: this.pageIndex,
      });
      this.plans = res.list.data;
      this.planTotal = res.list.total;

      // this.toggleSelection(this.paymentRegistrationForm.plan.map(item => {
      //   return item.plan_id
      // }))
    },
    planPageChange(e) {
      this.plansPageIndex = e;
      this.getBudgets();
    },
    selectPlan(sel, row) {
      if (sel) {
        this.paymentRegistrationForm.plan = sel.map((item) => {
          return {
            plan_id: item.id,
            use_money: item.useMoney,
            new_money: item.money,
          };
        });
      } else {
        this.paymentRegistrationForm.plan = [];
      }
    },
    toggleSelection(e) {
      if (!e) {
        return;
      }
      let plans = this.paymentRegistrationForm.plan.map((item) => {
        return item.plan_id;
      });
      if (plans) {
        this.plans
          .filter((plan) => {
            return plans.includes(plan.id);
          })
          .map((row) => {
            this.$nextTick(() => {
              this.$refs["planTable"].toggleRowSelection(row);
            });
          });
      } else {
        this.$refs["planTable"].clearSelection();
      }
    },
  },
  computed: {
    priceFormat() {
      return function (price) {
        return Number(price)
          .toFixed(2)
          .replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
      };
    },
  },
  watch: {
    isShowPaymentRegistration(newVal) {
      if (newVal) {
        this.getBudgets();
      }
    },
  },
  mounted() {
    this.getPlanTypes();
  },
};
</script>

<style scoped lang="scss">
.payment-registration {
  &-row {
    display: flex;

    padding: 6px 0;

    &-title {
      padding: 0 10px;
    }

    &-content {
    }
  }
}

.xy-table-item-label {
  width: 140px;
}

.xy-table-item-price {
  position: relative;

  &::after {
    z-index: 1;
    position: absolute;
    right: 0;
    top: 0;
    content: "（元）";
  }

  ::v-deep .el-input__clear {
    position: relative;
    right: 30px;
    z-index: 2;
  }
}
</style>