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(),
          },
        ]"
        @moreSearch="moreSearch"
        @get-list="getList">
        <template #total="{ item }">
          <div style="width: 100%">
            <a style="color: #409eff; cursor: pointer" @click="pushProcessApproval(item)">{{ item.currency }}{{ item.total }}</a>
          </div>
        </template>
        <template #type="{ item }">
          <div style="width: 100%">
            <span>
              {{ dictValueLabel(item.type, fundsType) }}
            </span>
            <span v-if="item.type == 1">（<span v-if="item.writeOffStatus == 0">未核销</span><span v-if="item.writeOffStatus == 1">已核销</span>）</span>
          </div>
        </template>
      </byTable>
    </div>

    <el-dialog title="打印" v-if="openPrint" v-model="openPrint" width="640px">
      <div id="printMe">
        <FundsPDF :rowData="rowData"></FundsPDF>
      </div>
      <template #footer>
        <el-button @click="openPrint = false" size="large">取消</el-button>
        <el-button v-print="printObj" size="large">打印</el-button>
        <el-button type="primary" @click="clickDownload()" size="large">下载PDF</el-button>
      </template>
    </el-dialog>

    <el-dialog title="高级检索" v-if="openSearch" v-model="openSearch" width="600" :before-close="cancelSearch">
      <byForm :formConfig="formSearchConfig" :formOption="formOption" v-model="sourceList.pagination">
        <template #departmentId>
          <div>
            <el-tree-select
              v-model="sourceList.pagination.departmentId"
              :data="deptTreeData"
              check-strictly
              :render-after-expand="false"
              node-key="deptId"
              style="width: 100%"
              :props="defaultProps"
              clearable />
          </div>
        </template>
        <template #time>
          <div style="width: 100%">
            <el-row :gutter="10">
              <el-col :span="11">
                <el-date-picker
                  v-model="sourceList.pagination.beginTime"
                  type="datetime"
                  placeholder="请选择"
                  style="width: 100%"
                  value-format="YYYY-MM-DD HH:mm:ss" />
              </el-col>
              <el-col :span="2" style="text-align: center">到</el-col>
              <el-col :span="11">
                <el-date-picker
                  v-model="sourceList.pagination.endTime"
                  type="datetime"
                  placeholder="请选择"
                  style="width: 100%"
                  value-format="YYYY-MM-DD HH:mm:ss" />
              </el-col>
            </el-row>
          </div>
        </template>
        <template #money>
          <div style="width: 100%">
            <el-row :gutter="10">
              <el-col :span="11">
                <el-input-number
                  onmousewheel="return false;"
                  v-model="sourceList.pagination.minAdvanceAmounts"
                  placeholder="请输入"
                  style="width: 100%"
                  :precision="2"
                  :controls="false"
                  :min="0" />
              </el-col>
              <el-col :span="2" style="text-align: center">到</el-col>
              <el-col :span="11">
                <el-input-number
                  onmousewheel="return false;"
                  v-model="sourceList.pagination.maxAdvanceAmounts"
                  placeholder="请输入"
                  style="width: 100%"
                  :precision="2"
                  :controls="false"
                  :min="0" />
              </el-col>
            </el-row>
          </div>
        </template>
      </byForm>
      <template #footer>
        <el-button @click="cancelSearch()" size="large">取 消</el-button>
        <el-button type="primary" @click="submitSearch()" size="large">确 定</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 byForm from "@/components/byForm/index";
import FundsPDF from "@/components/PDF/fundsPDF.vue";

const loading = ref(false);
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    type: "",
    keyword: "",
    writeOffStatus: "",
    corporationId: "",
    departmentId: "",
    createUser: "",
    currency: "",
    beginTime: "",
    endTime: "",
    minAdvanceAmounts: undefined,
    maxAdvanceAmounts: undefined,
    paymentRemarks: "",
    paymentMethod: "",
    status: "",
    paymentStatus: "",
  },
});
const { proxy } = getCurrentInstance();
const fundsType = ref([]);
const userList = ref([]);
const companyData = ref([]);
const accountCurrency = ref([]);
const fundsPaymentMethod = ref([]);
const deptTreeData = ref([]);
const status = ref([
  {
    label: "审批中",
    value: "10",
  },
  {
    label: "驳回",
    value: "20",
  },
  {
    label: "审批通过",
    value: "30",
  },
]);
const paymentStatus = ref([
  {
    label: "已打款",
    value: "10",
  },
  {
    label: "未打款",
    value: "20",
  },
]);
const selectConfig = computed(() => {
  return [
    {
      label: "类型",
      prop: "type",
      data: fundsType.value,
    },
    {
      label: "审批状态",
      prop: "status",
      data: status.value,
    },
    {
      label: "放款状态",
      prop: "paymentStatus",
      data: paymentStatus.value,
    },
  ];
});
const config = computed(() => {
  return [
    {
      attrs: {
        label: "归属公司",
        prop: "corporationName",
        width: 180,
      },
    },
    {
      attrs: {
        label: "归属部门",
        prop: "deptName",
        width: 140,
      },
    },
    {
      attrs: {
        label: "请款类型",
        prop: "type",
        width: 130,
        slot: "type",
      },
    },
    {
      attrs: {
        label: "请款人",
        prop: "userName",
        width: 120,
      },
    },
    {
      attrs: {
        label: "请款时间",
        prop: "createTime",
        width: 160,
      },
    },
    {
      attrs: {
        label: "请款金额",
        slot: "total",
        width: 120,
      },
    },
    {
      attrs: {
        label: "用款说明",
        prop: "paymentRemarks",
        "min-width": 180,
      },
    },
    {
      attrs: {
        label: "付款方式",
        prop: "paymentMethod",
        width: 120,
      },
      render(paymentMethod) {
        return proxy.dictValueLabel(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: "accountPaymentStatus",
        width: 120,
      },
      render(status) {
        return proxy.dictValueLabel(status, paymentStatus.value);
      },
    },
    {
      attrs: {
        label: "操作",
        width: "120",
        align: "center",
        fixed: "right",
      },
      renderHTML(row) {
        return [
          row.type == 1 && row.writeOffStatus == 0 && row.status == "30"
            ? {
                attrs: {
                  label: "核销",
                  type: "primary",
                  text: true,
                },
                el: "button",
                click() {
                  openModal(row);
                },
              }
            : {},
          {
            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 = (row = {}) => {
  const flowName = `${userInfo.nickName}的请款申请（发起）`;
  let query = {
    flowKey: "account_request_funds_flow",
    random: proxy.random(),
    flowName,
  };
  if (row.id) {
    query.advanceId = row.id;
    query.corporationId = row.corporationId;
  }
  proxy.$router.replace({
    path: "/platform_manage/process/processApproval",
    query,
  });
};
const userInfo = useUserStore().user;
const recursive = (data) => {
  data.map((item) => {
    item.label = item.deptName;
    item.id = item.corporationId;
    if (item.children) {
      recursive(item.children);
    } else {
      item.children = [];
    }
  });
};
const getDictData = () => {
  proxy.getDictOne(["founds_type", "funds_payment_method", "account_currency"]).then((res) => {
    fundsType.value = res["founds_type"].map((x) => ({
      label: x.dictValue,
      value: x.dictKey,
    }));
    fundsPaymentMethod.value = res["funds_payment_method"].map((x) => ({
      label: x.dictValue,
      value: x.dictKey,
    }));
    accountCurrency.value = res["account_currency"].map((x) => ({
      label: x.dictValue,
      value: x.dictKey,
    }));
  });
  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,
          };
        });
      }
    });
  proxy.post("/corporation/page", { pageNum: 1, pageSize: 9999 }).then((res) => {
    if (res.rows && res.rows.length > 0) {
      companyData.value = res.rows.map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });
    }
  });
  proxy
    .get("/tenantDept/list", {
      pageNum: 1,
      pageSize: 9999,
      tenantId: userInfo.tenantId,
    })
    .then((message) => {
      recursive(message.data);
      deptTreeData.value = [];
      let data = proxy.handleTree(message.data, "deptId");
      if (data && data.length > 0) {
        for (let i = 0; i < data.length; i++) {
          if (data[i].children && data[i].children.length > 0) {
            deptTreeData.value = deptTreeData.value.concat(data[i].children);
          }
        }
      }
    });
};
getDictData();
getList();
const openPrint = ref(false);
const rowData = ref({});
const clickPrint = (row) => {
  rowData.value = row;
  openPrint.value = true;
};
const clickDownload = () => {
  proxy.getPdf("请款PDF文件");
};
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
const defaultProps = {
  children: "children",
  label: "deptName",
};
const openSearch = ref(false);
const formSearchConfig = computed(() => {
  return [
    {
      type: "select",
      prop: "corporationId",
      label: "归属公司",
      data: companyData.value,
      clearable: true,
    },
    {
      type: "slot",
      slotName: "departmentId",
      label: "归属部门",
      itemWidth: 50,
    },
    {
      type: "select",
      prop: "createUser",
      label: "请款人",
      data: userList.value,
      itemWidth: 50,
      clearable: true,
    },
    {
      type: "select",
      prop: "type",
      label: "请款类型",
      data: fundsType.value,
      clearable: true,
    },
    {
      type: "select",
      prop: "currency",
      label: "币种",
      data: accountCurrency.value,
      clearable: true,
    },
    {
      type: "slot",
      slotName: "time",
      label: "请款时间",
    },
    {
      type: "slot",
      slotName: "money",
      label: "请款金额",
    },
    {
      type: "input",
      itemType: "textarea",
      prop: "paymentRemarks",
      label: "用款说明",
    },
    {
      type: "select",
      prop: "paymentMethod",
      label: "付款方式",
      data: fundsPaymentMethod.value,
      clearable: true,
    },
    {
      type: "select",
      prop: "status",
      label: "流程状态",
      data: status.value,
      itemWidth: 50,
      clearable: true,
    },
    {
      type: "select",
      prop: "paymentStatus",
      label: "打款状态",
      data: paymentStatus.value,
      itemWidth: 50,
      clearable: true,
    },
  ];
});
let copySearch = ref({});
const moreSearch = () => {
  copySearch.value = proxy.deepClone(sourceList.value.pagination);
  openSearch.value = true;
};
const cancelSearch = () => {
  sourceList.value.pagination = copySearch.value;
  openSearch.value = false;
};
const submitSearch = () => {
  if (
    sourceList.value.pagination.minAdvanceAmounts &&
    sourceList.value.pagination.maxAdvanceAmounts &&
    Number(sourceList.value.pagination.minAdvanceAmounts) > Number(sourceList.value.pagination.maxAdvanceAmounts)
  ) {
    return ElMessage("交易金额输入错误");
  }
  if (
    sourceList.value.pagination.beginTime &&
    sourceList.value.pagination.endTime &&
    sourceList.value.pagination.beginTime > sourceList.value.pagination.endTime
  ) {
    return ElMessage("开始时间不能大于结束时间");
  }
  openSearch.value = false;
  sourceList.value.pagination.keyword = "";
  sourceList.value.pagination.pageNum = 1;
  getList();
};
const pushProcessApproval = (row) => {
  proxy.$router.push({
    path: "/platform_manage/process/processApproval",
    query: {
      flowKey: "account_request_funds_flow",
      id: row.flowInfoId,
      processType: 20,
      random: proxy.random(),
      flowName: "请款详情",
    },
  });
  return;
};
const printObj = ref({
  id: "printMe",
  popTitle: "",
  extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
});
</script>

<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
</style>