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="680px" v-loading="loadingPrint">
      <div id="pdfDom" style="width: 616px">
        <div style="margin: 16px 8px; border: 1px solid black; font-size: 12px !important; color: black">
          <div style="font-size: 16px; font-weight: 700; text-align: center; padding: 8px">
            <span>{{ printDetails.corporationName }}</span>
            <span style="margin-left: 16px">{{ dictDataEcho(printDetails.type, fundsType) }}审批单</span>
          </div>
          <div class="baseRow"></div>
          <div class="baseRow" style="display: flex">
            <div class="contentRow" style="width: 80px">请款部门</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ printDetails.deptName }}
            </div>
            <div class="contentRow" style="width: 80px">货币</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ dictDataEcho(printDetails.currency, accountCurrency) }}
            </div>
          </div>
          <div class="baseRow" style="display: flex">
            <div class="contentRow" style="width: 80px">请款时间</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ printDetails.createTime }}
            </div>
            <div class="contentRow" style="width: 80px">发票类型</div>
            <div class="contentRow" style="width: calc(50% - 80px)"></div>
          </div>
          <div class="baseRow" style="display: flex" v-if="printDetails.type == '3'">
            <div class="contentRow" style="width: 80px">预支单</div>
            <div class="contentRow" style="width: calc(100% - 80px)"></div>
          </div>
          <div class="baseRow" style="display: flex">
            <div class="contentRow" style="width: 80px">请款说明</div>
            <div class="contentRow" style="width: calc(100% - 80px)">
              {{ printDetails.paymentRemarks }}
            </div>
          </div>
          <div class="baseRow" style="display: flex">
            <div class="contentRow" style="width: 80px">凭证</div>
            <div class="contentRow" style="width: calc(100% - 80px)"></div>
          </div>
          <div class="specialRow">
            <span>请款明细</span>
          </div>
          <div v-if="printDetails.type == '3'">
            <div v-if="printDetails.accountRequestFundsDetailList && printDetails.accountRequestFundsDetailList.length > 0">
              <div class="baseRow" style="display: flex">
                <div class="contentRow" style="width: 17%">费用类型</div>
                <div class="contentRow" style="width: 17%">关联合同</div>
                <div class="contentRow" style="width: 17%">预支金额</div>
                <div class="contentRow" style="width: 32%">核销说明</div>
                <div class="contentRow" style="width: 17%">核销金额</div>
              </div>
              <div v-for="item in printDetails.accountRequestFundsDetailList" :key="item.id">
                <div class="baseRow" style="display: flex">
                  <div class="contentRow" style="width: 17%">
                    {{ dictDataEcho(item.costType, fundsCostType) }}
                  </div>
                  <div class="contentRow" style="width: 17%">
                    {{ item.contractCode }}
                  </div>
                  <div class="contentRow" style="width: 17%"></div>
                  <div class="contentRow" style="width: 32%">
                    {{ item.remarks }}
                  </div>
                  <div class="contentRow" style="width: 17%">
                    {{ item.amount }}
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <div class="baseRow" style="display: flex">
                <div class="contentRow" style="width: 17%">费用类型</div>
                <div class="contentRow" style="width: 17%">关联合同</div>
                <div class="contentRow" style="width: 17%">预支金额</div>
                <div class="contentRow" style="width: 32%">核销说明</div>
                <div class="contentRow" style="width: 17%">核销金额</div>
              </div>
              <div class="baseRow" style="display: flex">
                <div class="contentRow" style="width: 17%"></div>
                <div class="contentRow" style="width: 17%"></div>
                <div class="contentRow" style="width: 17%"></div>
                <div class="contentRow" style="width: 32%"></div>
                <div class="contentRow" style="width: 17%"></div>
              </div>
            </div>
            <div class="baseRow" style="display: flex">
              <div class="contentRow" style="width: 80px">预支金额</div>
              <div class="contentRow" style="width: calc(50% - 80px)"></div>
              <div class="contentRow" style="width: 80px">核销总额</div>
              <div class="contentRow" style="width: calc(50% - 80px)">{{ printDetails.total }}</div>
            </div>
            <div class="baseRow" style="display: flex">
              <div class="contentRow" style="width: 80px">差额</div>
              <div class="contentRow" style="width: calc(50% - 80px)"></div>
              <div class="contentRow" style="width: 80px">单证数量</div>
              <div class="contentRow" style="width: calc(50% - 80px)">{{ printDetails.quantity }}</div>
            </div>
          </div>
          <div v-else>
            <div v-if="printDetails.accountRequestFundsDetailList && printDetails.accountRequestFundsDetailList.length > 0">
              <div class="baseRow" style="display: flex">
                <div class="contentRow" style="width: 25%">费用类型</div>
                <div class="contentRow" style="width: 25%">关联合同</div>
                <div class="contentRow" style="width: 25%">款项说明</div>
                <div class="contentRow" style="width: 25%">请款金额</div>
              </div>
              <div v-for="item in printDetails.accountRequestFundsDetailList" :key="item.id">
                <div class="baseRow" style="display: flex">
                  <div class="contentRow" style="width: 25%">
                    {{ dictDataEcho(item.costType, fundsCostType) }}
                  </div>
                  <div class="contentRow" style="width: 25%">
                    {{ item.contractCode }}
                  </div>
                  <div class="contentRow" style="width: 25%">
                    {{ item.remarks }}
                  </div>
                  <div class="contentRow" style="width: 25%">
                    {{ item.amount }}
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <div class="baseRow" style="display: flex">
                <div class="contentRow" style="width: 25%">费用类型</div>
                <div class="contentRow" style="width: 25%">关联合同</div>
                <div class="contentRow" style="width: 25%">款项说明</div>
                <div class="contentRow" style="width: 25%">请款金额</div>
              </div>
              <div class="baseRow" style="display: flex">
                <div class="contentRow" style="width: 25%"></div>
                <div class="contentRow" style="width: 25%"></div>
                <div class="contentRow" style="width: 25%"></div>
                <div class="contentRow" style="width: 25%"></div>
              </div>
            </div>
            <div class="baseRow" style="display: flex">
              <div class="contentRow" style="width: 80px">请款总额</div>
              <div class="contentRow" style="width: calc(50% - 80px)">
                {{ printDetails.total }}
              </div>
              <div class="contentRow" style="width: 80px">单证数量</div>
              <div class="contentRow" style="width: calc(50% - 80px)">
                {{ printDetails.quantity }}
              </div>
            </div>
          </div>
          <div class="specialRow">
            <span>付款明细</span>
          </div>
          <div class="baseRow" style="display: flex">
            <div class="contentRow" style="width: 80px">付款方式</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ dictDataEcho(printDetails.paymentMethod, fundsPaymentMethod) }}
            </div>
            <div class="contentRow" style="width: 80px">付款账户</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ dictValueLabel(printDetails.accountManagementId, accountData) }}
            </div>
          </div>
          <div class="baseRow" style="display: flex">
            <div class="contentRow" style="width: 80px">户名</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ printDetails.name }}
            </div>
            <div class="contentRow" style="width: 80px">开户银行</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ printDetails.openingBank }}
            </div>
          </div>
          <div class="baseRow" style="display: flex">
            <div class="contentRow" style="width: 80px">账号</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ printDetails.accountOpening }}
            </div>
            <div class="contentRow" style="width: 80px">联行号</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ printDetails.interbankNumber }}
            </div>
          </div>
          <div class="specialRow">
            <span>审批记录</span>
          </div>
          <template v-if="printDetails.recordList && printDetails.recordList.length > 0">
            <div class="baseRow" style="display: flex" v-for="(item, index) in printDetails.recordList" :key="index">
              <div class="contentRow" style="width: 80px">{{ item.nodeName }}</div>
              <div class="contentRow" style="width: calc(100% - 240px)">
                <span v-if="item.remark">{{ item.remark }}</span>
              </div>
              <div class="contentRow" style="width: 160px">{{ item.processedDate }}</div>
            </div>
          </template>
        </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";

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",
      },
    },
    {
      attrs: {
        label: "归属部门",
        prop: "deptName",
      },
    },
    {
      attrs: {
        label: "请款类型",
        prop: "type",
      },
      render(type) {
        return proxy.dictDataEcho(type, fundsType.value);
      },
    },
    {
      attrs: {
        label: "请款人",
        prop: "userName",
      },
    },
    {
      attrs: {
        label: "请款时间",
        prop: "createTime",
      },
    },
    {
      attrs: {
        label: "请款金额",
        prop: "total",
      },
    },
    {
      attrs: {
        label: "用款说明",
        prop: "paymentRemarks",
      },
    },
    {
      attrs: {
        label: "付款方式",
        prop: "paymentMethod",
      },
      render(paymentMethod) {
        return proxy.dictDataEcho(paymentMethod, fundsPaymentMethod.value);
      },
    },
    {
      attrs: {
        label: "付款账户",
        prop: "accountManagementName",
      },
    },
    {
      attrs: {
        label: "审批状态",
        prop: "status",
      },
      render(status) {
        return status == 10 ? "审批中" : status == 20 ? "驳回" : status == 30 ? "已通过" : "";
      },
    },
    {
      attrs: {
        label: "放款状态",
        prop: "subscribeContent",
      },
      // render(subscribeContent) {
      //   return proxy.dictDataEcho(subscribeContent, fundsPaymentMethod.value);
      // },
    },
    {
      attrs: {
        label: "操作",
        width: "100",
        align: "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 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,
      };
    });
  });
};
getDictData();
getList();
const openPrint = ref(false);
const loadingPrint = ref(false);
const printDetails = ref({});
const clickPrint = (row) => {
  loadingPrint.value = true;
  openPrint.value = true;
  proxy.post("/accountRequestFunds/detail", { id: row.id }).then((res) => {
    printDetails.value = res;
    proxy.post("/flowExample/getApprovalRecord", { id: row.flowInfoId }).then((res) => {
      printDetails.value.recordList = res.recordList;
    });
  });
};
const clickDownload = () => {
  proxy.getPdf("请款PDF文件");
};
</script>

<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
.baseRow {
  min-height: 24px;
  border-top: 1px solid black;
}
.contentRow {
  border-right: 1px solid black;
  line-height: 24px;
  padding-left: 4px;
}
.specialRow {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  border-top: 1px solid black;
  height: 30px;
  line-height: 30px;
}
</style>