byte-sailing-new/src/views/finance/fundManage/funds/index.vue

<template>
  <div class="tenant">
    <div class="content">
      <byTable
        :source="sourceList.data"
        :pagination="sourceList.pagination"
        :config="config"
        :loading="loading"
        highlight-current-row
        :selectConfig="selectConfig"
        :action-list="[
          {
            text: '发起请款',
            action: () => openModal(),
          },
        ]"
        @get-list="getList">
        <template #fileSlot="{ item }">
          <div style="cursor: pointer; color: #409eff" @click="handleClickFile(item)">
            {{ item.fileName }}
          </div>
        </template>
      </byTable>
    </div>

    <el-dialog title="打印" v-if="openPrint" v-model="openPrint" width="840px">
      <div id="pdfDom" style="width: 776px">
        <div style="padding: 60px 30px; font-size: 12px !important; color: black">
          <div style="font-size: 16px; text-align: center; padding: 8px">
            <span>{{ dictDataEcho(printDetails.type, fundsType) }}审批单</span>
          </div>
          <div style="padding: 8px 0">
            <span>{{ printDetails.corporationName }}</span>
            <span style="padding-left: 32px">创建时间: {{ printDetails.createTime }}</span>
          </div>
          <div style="border: 1px solid black">
            <div style="display: flex; border-bottom: 1px solid black">
              <div style="width: 126px; border-right: 1px solid black; padding: 8px">创建人</div>
              <div style="width: calc(100% - 126px); padding: 8px">
                {{ dictValueLabel(printDetails.createUser, userList) }}
              </div>
            </div>
            <div style="display: flex; border-bottom: 1px solid black">
              <div style="width: 126px; border-right: 1px solid black; padding: 8px">创建人部门</div>
              <div style="width: calc(100% - 126px); padding: 8px">
                {{ printDetails.deptName }}
              </div>
            </div>
            <div style="display: flex; border-bottom: 1px solid black" v-if="printDetails.type !== '3'">
              <div style="width: 126px; border-right: 1px solid black; padding: 4px 8px; display: flex; align-items: center">费用明细</div>
              <div style="width: calc(100% - 126px)">
                <div style="border-bottom: 1px solid black; display: flex">
                  <div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; text-align: center">费用类型</div>
                  <div style="width: 120px; padding: 4px 8px; border-right: 1px solid black; text-align: center">关联合同</div>
                  <div style="width: calc(100% - 360px); padding: 4px 8px; border-right: 1px solid black; text-align: center">款项说明</div>
                  <div style="width: 60px; padding: 4px 8px; border-right: 1px solid black; text-align: center">货币</div>
                  <div style="width: 100px; padding: 4px 8px; text-align: center">付款金额</div>
                </div>
                <template v-if="printDetails.accountRequestFundsDetailList && printDetails.accountRequestFundsDetailList.length > 0">
                  <div v-for="(item, index) in printDetails.accountRequestFundsDetailList" :key="index">
                    <div
                      :style="
                        index + 1 !== printDetails.accountRequestFundsDetailList.length ? 'border-bottom: 1px solid black;  display: flex' : ' display: flex'
                      ">
                      <div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; text-align: center">
                        {{ dictDataEcho(item.costType, fundsCostType) }}
                      </div>
                      <div style="width: 120px; padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
                        {{ item.contractCode }}
                      </div>
                      <div style="width: calc(100% - 360px); padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
                        {{ item.remarks }}
                      </div>
                      <div style="width: 60px; padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
                        {{ dictDataEcho(printDetails.currency, accountCurrency) }}
                      </div>
                      <div style="width: 100px; padding: 4px 8px; display: flex; align-items: center">
                        {{ item.amount }}
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
            <div style="display: flex; border-bottom: 1px solid black" v-else>
              <div style="width: 126px; border-right: 1px solid black; padding: 4px 8px; display: flex; align-items: center">费用明细</div>
              <div style="width: calc(100% - 126px)">
                <div style="border-bottom: 1px solid black; display: flex">
                  <div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; text-align: center">费用类型</div>
                  <div style="width: 120px; padding: 4px 8px; border-right: 1px solid black; text-align: center">关联合同</div>
                  <div style="width: calc(100% - 420px); padding: 4px 8px; border-right: 1px solid black; text-align: center">款项说明</div>
                  <div style="width: 60px; padding: 4px 8px; border-right: 1px solid black; text-align: center">货币</div>
                  <div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; text-align: center">预支金额</div>
                  <div style="width: 80px; padding: 4px 8px; text-align: center">付款金额</div>
                </div>
                <template v-if="printDetails.accountRequestFundsDetailList && printDetails.accountRequestFundsDetailList.length > 0">
                  <div v-for="(item, index) in printDetails.accountRequestFundsDetailList" :key="index">
                    <div
                      :style="
                        index + 1 !== printDetails.accountRequestFundsDetailList.length ? 'border-bottom: 1px solid black;  display: flex' : ' display: flex'
                      ">
                      <div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; text-align: center">
                        {{ dictDataEcho(item.costType, fundsCostType) }}
                      </div>
                      <div style="width: 120px; padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
                        {{ item.contractCode }}
                      </div>
                      <div style="width: calc(100% - 420px); padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
                        {{ item.remarks }}
                      </div>
                      <div style="width: 60px; padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
                        {{ dictDataEcho(printDetails.currency, accountCurrency) }}
                      </div>
                      <div style="width: 80px; padding: 4px 8px; border-right: 1px solid black; display: flex; align-items: center">
                        {{ item.advanceAmount }}
                      </div>
                      <div style="width: 80px; padding: 4px 8px; display: flex; align-items: center">
                        {{ item.amount }}
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
            <div style="display: flex; border-bottom: 1px solid black" v-if="printDetails.type !== '3'">
              <div style="width: 126px; border-right: 1px solid black; padding: 8px">总报销金额</div>
              <div style="width: calc(100% - 126px); display: flex">
                <div style="width: calc(100% - 100px); padding: 8px; border-right: 1px solid black">{{ NumberToChinese(computeMoney("amount")) }}</div>
                <div style="width: 100px; padding: 8px">{{ computeMoney("amount") }}</div>
              </div>
            </div>
            <div v-else>
              <div style="display: flex; border-bottom: 1px solid black">
                <div style="width: 126px; border-right: 1px solid black; padding: 8px">核销总金额</div>
                <div style="width: calc(100% - 126px); display: flex">
                  <div style="width: calc(100% - 80px); padding: 8px; border-right: 1px solid black">{{ NumberToChinese(computeMoney("amount")) }}</div>
                  <div style="width: 80px; padding: 8px">{{ computeMoney("amount") }}</div>
                </div>
              </div>
              <div style="display: flex; border-bottom: 1px solid black">
                <div style="width: 126px; border-right: 1px solid black; padding: 8px">预支总金额</div>
                <div style="width: calc(100% - 126px); display: flex">
                  <div style="width: calc(100% - 80px); padding: 8px; border-right: 1px solid black">{{ NumberToChinese(computeMoney("advanceAmount")) }}</div>
                  <div style="width: 80px; padding: 8px">{{ computeMoney("advanceAmount") }}</div>
                </div>
              </div>
              <div style="display: flex; border-bottom: 1px solid black">
                <div style="width: 126px; border-right: 1px solid black; padding: 8px">差额 (核销 - 预支)</div>
                <div style="width: calc(100% - 126px); display: flex">
                  <div style="width: calc(100% - 80px); padding: 8px; border-right: 1px solid black">{{ NumberToChinese(computeBalance()) }}</div>
                  <div style="width: 80px; padding: 8px">{{ computeBalance() }}</div>
                </div>
              </div>
            </div>
            <div style="display: flex; border-bottom: 1px solid black">
              <div style="width: 126px; border-right: 1px solid black; padding: 8px">单据数量</div>
              <div style="width: calc(100% - 126px); padding: 8px">
                {{ printDetails.quantity }}
              </div>
            </div>
            <div style="display: flex; border-bottom: 1px solid black">
              <div style="width: 126px; border-right: 1px solid black; padding: 0 8px; display: flex; align-items: center">收款信息</div>
              <div style="width: calc(100% - 126px)">
                <div style="border-bottom: 1px solid black; display: flex">
                  <div style="width: 19%; padding: 0 8px; border-right: 1px solid black; text-align: center">支付方式</div>
                  <div style="width: 27%; padding: 0 8px; border-right: 1px solid black; text-align: center">收款方户名</div>
                  <div style="width: 27%; padding: 0 8px; border-right: 1px solid black; text-align: center">开户行</div>
                  <div style="width: 27%; padding: 0 8px; text-align: center">收款方账号</div>
                </div>
                <div style="display: flex">
                  <div style="width: 19%; padding: 0 8px; border-right: 1px solid black; display: flex; align-items: center">
                    {{ dictDataEcho(printDetails.paymentMethod, fundsPaymentMethod) }}
                  </div>
                  <div style="width: 27%; padding: 0 8px; border-right: 1px solid black; display: flex; align-items: center">
                    {{ printDetails.name }}
                  </div>
                  <div style="width: 27%; padding: 0 8px; border-right: 1px solid black; display: flex; align-items: center">
                    {{ printDetails.openingBank }}
                  </div>
                  <div style="width: 27%; padding: 0 8px; display: flex; align-items: center">
                    {{ printDetails.accountOpening }}
                  </div>
                </div>
              </div>
            </div>
            <div style="display: flex; border-bottom: 1px solid black">
              <div style="width: 126px; border-right: 1px solid black; padding: 8px">电子发票(PDF/JPG)</div>
              <div style="width: calc(100% - 126px); padding: 8px">{{ printDetails.electronicInvoiceText }}</div>
            </div>
            <div style="display: flex">
              <div style="width: 126px; border-right: 1px solid black; padding: 4px 8px; display: flex; align-items: center">审批流程</div>
              <div style="width: calc(100% - 126px)">
                <template v-if="printDetails.recordList && printDetails.recordList.length > 0">
                  <div v-for="(item, index) in printDetails.recordList" :key="index">
                    <div
                      :style="
                        index + 1 !== printDetails.recordList.length
                          ? 'border-bottom: 1px solid black; padding: 4px 8px; display: flex'
                          : 'padding: 4px 8px; display: flex'
                      ">
                      <div style="width: calc(100% - 120px); word-wrap: break-word">
                        <span>{{ item.nodeName }}: </span>
                        <span style="padding-left: 4px">{{ item.processedUser }}</span>
                        <span style="padding-left: 4px">{{ item.remark }}</span>
                      </div>
                      <div style="width: 120px">{{ item.processedDate }}</div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
          <div style="padding-top: 16px">
            <span>打印时间: {{ presentTime }}</span>
            <span style="padding-left: 32px">打印人: {{ useUserStore().user.nickName }}</span>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="openPrint = false" size="large">取消</el-button>
        <el-button type="primary" @click="clickDownload()" size="large">下载PDF</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import byTable from "@/components/byTable/index";
import useUserStore from "@/store/modules/user";
import { ref } from "vue";
import moment from "moment";

const loading = ref(false);
const sourceList = ref({
  data: [],
  pagination: {
    total: 3,
    pageNum: 1,
    pageSize: 10,
    status: "",
  },
});
const { proxy } = getCurrentInstance();
const selectConfig = reactive([
  {
    label: "类型",
    prop: "type",
    data: [],
  },
  {
    label: "审批状态",
    prop: "status",
    data: [
      {
        label: "审批中",
        value: "10",
      },
      {
        label: "驳回",
        value: "20",
      },
      {
        label: "已通过",
        value: "30",
      },
    ],
  },
  {
    label: "放款状态",
    prop: "paymentStatus",
    data: [],
  },
]);
const config = computed(() => {
  return [
    {
      attrs: {
        label: "归属公司",
        prop: "corporationName",
      },
      width: 180,
    },
    {
      attrs: {
        label: "归属部门",
        prop: "deptName",
      },
      width: 140,
    },
    {
      attrs: {
        label: "请款类型",
        prop: "type",
      },
      render(type) {
        return proxy.dictDataEcho(type, fundsType.value);
      },
      width: 120,
    },
    {
      attrs: {
        label: "请款人",
        prop: "userName",
        width: 120,
      },
    },
    {
      attrs: {
        label: "请款时间",
        prop: "createTime",
        width: 160,
      },
    },
    {
      attrs: {
        label: "请款金额",
        prop: "total",
        width: 120,
      },
    },
    {
      attrs: {
        label: "用款说明",
        prop: "paymentRemarks",
        'min-width': 180
      },
    },
    {
      attrs: {
        label: "付款方式",
        prop: "paymentMethod",
        width: 120,
      },
      render(paymentMethod) {
        return proxy.dictDataEcho(paymentMethod, fundsPaymentMethod.value);
      },
    },
    {
      attrs: {
        label: "付款账户",
        prop: "accountManagementName",
        width: 160,
      },
    },
    {
      attrs: {
        label: "审批状态",
        prop: "status",
        width: 120,
      },
      render(status) {
        return status == 10 ? "审批中" : status == 20 ? "驳回" : status == 30 ? "已通过" : "";
      },
    },
    {
      attrs: {
        label: "放款状态",
        prop: "subscribeContent",
        width: 120,
      },
      // render(subscribeContent) {
      //   return proxy.dictDataEcho(subscribeContent, fundsPaymentMethod.value);
      // },
    },
    {
      attrs: {
        label: "操作",
        width: "80",
        align: "center",
        fixed: "right",
      },
      renderHTML(row) {
        return [
          {
            attrs: {
              label: "打印",
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              clickPrint(row);
            },
          },
        ];
      },
    },
  ];
});
const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy.post("/accountRequestFunds/page", sourceList.value.pagination).then((message) => {
    sourceList.value.data = message.rows;
    sourceList.value.pagination.total = message.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
const openModal = () => {
  const flowName = `${userInfo.nickName}的请款申请（发起）`;
  proxy.$router.replace({
    path: "/platform_manage/process/processApproval",
    query: {
      flowKey: "account_request_funds_flow",
      flowName,
    },
  });
};
const userInfo = useUserStore().user;
const tenantId = userInfo.tenantId;
const fundsType = ref([]);
const accountData = ref([]);
const userList = ref([]);
const accountCurrency = ref([]);
const fundsCostType = ref([]);
const fundsPaymentMethod = ref([]);
const getDictData = () => {
  // 请款类型数据
  proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      tenantId: tenantId,
      dictCode: "founds_type",
    })
    .then((res) => {
      fundsType.value = res.rows;
      selectConfig[0].data = res.rows.map((x) => ({
        label: x.dictValue,
        value: x.dictKey,
      }));
    });
  // 请款付款方式数据
  proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      tenantId: tenantId,
      dictCode: "funds_payment_method",
    })
    .then((res) => {
      fundsPaymentMethod.value = res.rows;
    });
  // 货币
  proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      dictCode: "account_currency",
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      accountCurrency.value = res.rows;
    });
  proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      dictCode: "funds_cost_type",
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      fundsCostType.value = res.rows;
    });
  proxy.post("/accountManagement/page", { pageNum: 1, pageSize: 9999 }).then((res) => {
    accountData.value = res.rows.map((item) => {
      return {
        ...item,
        label: item.alias,
        value: item.id,
      };
    });
  });
  proxy
    .get("/tenantUser/list", {
      pageNum: 1,
      pageSize: 10000,
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      if (res.rows && res.rows.length > 0) {
        userList.value = res.rows.map((item) => {
          return {
            deptId: item.deptId,
            label: item.nickName,
            value: item.userId,
          };
        });
      }
    });
};
getDictData();
getList();
const openPrint = ref(false);
const printDetails = ref({});
const presentTime = ref("");
const clickPrint = (row) => {
  presentTime.value = moment().format("yyyy-MM-DD HH:mm:ss");
  openPrint.value = true;
  proxy.post("/accountRequestFunds/detail", { id: row.id }).then((res) => {
    printDetails.value = res;
    proxy.post("/fileInfo/getList", { businessIdList: [row.id] }).then((resFile) => {
      let electronicInvoiceText = "";
      if (resFile[row.id] && resFile[row.id].length > 0) {
        for (let i = 0; i < resFile[row.id].length; i++) {
          if (i === 0) {
            electronicInvoiceText = resFile[row.id][0].fileName;
          } else {
            electronicInvoiceText = electronicInvoiceText + ", " + resFile[row.id][i].fileName;
          }
        }
      }
      printDetails.value.electronicInvoiceText = electronicInvoiceText;
    });
    if (row.flowInfoId) {
      proxy.post("/flowExample/getApprovalRecord", { id: row.flowInfoId }).then((record) => {
        printDetails.value.recordList = record.recordList;
      });
    }
  });
};
const clickDownload = () => {
  proxy.getPdf("请款PDF文件");
};
const computeMoney = (label) => {
  let amount = 0;
  if (printDetails.value.accountRequestFundsDetailList && printDetails.value.accountRequestFundsDetailList.length > 0) {
    for (let i = 0; i < printDetails.value.accountRequestFundsDetailList.length; i++) {
      if (printDetails.value.accountRequestFundsDetailList[i][label]) {
        amount = Number(parseFloat(Number(amount) + Number(printDetails.value.accountRequestFundsDetailList[i][label])).toFixed(2));
      }
    }
  }
  return amount;
};
const toDx = (n) => {
  //阿拉伯数字转换函数
  switch (n) {
    case "0":
      return "零";
    case "1":
      return "壹";
    case "2":
      return "贰";
    case "3":
      return "叁";
    case "4":
      return "肆";
    case "5":
      return "伍";
    case "6":
      return "陆";
    case "7":
      return "柒";
    case "8":
      return "捌";
    case "9":
      return "玖";
  }
};
const NumberToChinese = (m) => {
  let unit = ["仟", "佰", "拾", "", "仟", "佰", "拾", "", "角", "分", "厘"];
  m *= 1000;
  m = Number(parseFloat(m).toFixed(0));
  m += "";
  var x = m.length;
  var result = "";
  for (var i = 0; i < x; i++) {
    if (i == 3) {
      result = "元" + result;
    } else if (i == 7) {
      result = "万" + result;
    }
    if (m.charAt(x - i - 1) == 0) {
      if (i != 0 && i != 1 && i != 2) {
        if (result.charAt(0) != "零" && result.charAt(0) != "元" && result.charAt(0) != "万") {
          result = "零" + result;
        }
      }
      continue;
    }
    result = toDx(m.charAt(x - i - 1)) + unit[unit.length - i - 1] + result;
  }
  result += result.charAt(result.length - 1) == "元" ? "整" : "";
  return result;
};
const computeBalance = () => {
  let balance = 0;
  let advanceAmount = computeMoney("advanceAmount");
  let amount = computeMoney("amount");
  if (amount) {
    balance = Number(amount);
  }
  if (advanceAmount) {
    balance = Number(parseFloat(Number(balance) - Number(advanceAmount)).toFixed(2));
  }
  return balance;
};
</script>

<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
</style>