saas_masterPlatform/src/views/financed/accountsPayable/components/dislogDividePay.vue

<template>
  <div>
    <BaseDialog
      :disabledBtn="disabledBtn"
      width="400px"
      :isShow.sync="isShow"
      title="分成支付"
      @open="init"
      @submit="submitForm"
      confirmName="支付"
    >
      <template>
        <template>
          <em>订单信息：</em>
          <p>
            机构名称：<em>{{ info.tenantName }}</em>
          </p>
          <p>
            账期类型：<em>{{
              ["月份", "季度", "半年", "年度"][info.billType - 1]
            }}</em>
          </p>
          <p>
            时间：<em>{{ info.monthTime }}</em>
          </p>
          <p>
            应付分成：<span class="color_red">{{
              info.payMoney | formatPrice
            }}</span>
          </p>
        </template>
        <el-button type="primary" plain @click="orderDialogVisible = true"
          >分成详细</el-button
        >
        <el-divider></el-divider>
        <em>收款信息：</em>
        <el-input
          style="margin-top: 10px"
          disabled
          v-model="formPay.toBankAcount"
        ></el-input>
        <el-input
          style="margin-top: 10px"
          disabled
          v-model="formPay.toBankName"
        ></el-input>
        <el-input
          style="margin-top: 10px"
          disabled
          v-model="formPay.toBankTypeName"
        ></el-input>
      </template>
    </BaseDialog>
    <!-- 订单列表 -->
    <dislogOrderList :info="info" :dialogVisible.sync="orderDialogVisible" />
  </div>
</template>

<script>
import dislogOrderList from "./dislogOrderList";
export default {
  name: "DislogDividePay",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      disabledBtn: false,
      orderDialogVisible: false,
      form: {
        payMoney: 0,
      },
      formPay: {
        toBankAcount: "",
        toBankName: "",
        toBankTypeName: "",
      },
      bankList: [],
    };
  },

  mounted() {},

  methods: {
    fastInput(item) {
      this.formPay = {
        toBankAcount: item.proceedsAccount,
        toBankName: item.openingName,
        toBankTypeName: item.openingBank,
      };
    },
    init() {
      this.resetForm();
      this.$api.systemtenantbankId(this.info.tenantId).then((e) => {
        this.bankList = e.data || [];
        if (this.bankList.length > 0) {
          this.fastInput(this.bankList[0]);
        }
      });
    },
    resetForm() {
      this.form = {
        payMoney: 0,
      };
    },
    submitForm() {
      this.$confirm("确定支付吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.disabledBtn = true;
          let c = {
            divideModel: this.info.checkFrom - 1,
            type: 1,
            divideLogId: this.info.id,
            tenantId: this.info.tenantId,
            ...this.formPay,
          };
          this.$api
            .orderbankpay(c)
            .then((res) => {
              this.isShow = false;
              this.$emit("search", 3);
              this.$message({
                type: "success",
                message: "支付成功!",
              });
            })
            .finally(() => {
              this.disabledBtn = false;
            });
        })
        .catch(() => {
          this.disabledBtn = false;
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  computed: {
    isShow: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", false);
      },
    },
  },
  components: {
    dislogOrderList,
  },
};
</script>

<style lang="scss" scoped>
.color_red {
  font-weight: bold;
  color: rgb(235, 59, 59);
}
em {
  font-weight: bold;
  color: #000;
  font-style: unset;
}
</style>