dykj-college-back-office-management-system/src/pages/finance-bill-manage/billDraw.vue

<template>
  <div class="back-color">
    <t-layout style="height: 90%; background-color: #f5f7fb">
      <t-header class="scarch-box">
        <t-form
          ref="form"
          :data="formData"
          label-width="calc(2em + 40px)"
          layout="inline"
          scroll-to-first-error="smooth"
          class="scarch-from"
          @reset="resetting"
          @submit="headerQuery"
        >
          <div style="margin-left: 1rem">
            <t-form-item label="票据编号:" name="billserial">
              <t-input v-model="formData.billserial" maxlength="10"></t-input>
            </t-form-item>

            <t-form-item label="入库日期:" name="stockDate">
              <t-date-picker v-model="formData.stockDate" clearable />
            </t-form-item>
            <t-form-item
              label="票据类型:"
              name="billType"
              style="margin-bottom: 0.3rem"
            >
              <t-select
                v-model="formData.billType"
                placeholder="请选择票据类型"
                clearable
              >
                <t-option
                  v-for="item in billType"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></t-option>
              </t-select>
            </t-form-item>
          </div>
          <t-form-item style="margin-right: 1rem">
            <t-button theme="primary" type="submit">查询</t-button>
            <t-button theme="primary" type="reset">重置</t-button>
          </t-form-item>
        </t-form>
      </t-header>
      <t-content class="table-box">
        <div class="table-header">
          <div>
            <h4 style="font-size: 110%">票据列表</h4>
          </div>
          <div>
            <t-button
              shape="circle"
              theme="primary"
              @click="refresh"
              style="margin-left: 0.8rem"
            >
              <template #icon><load-icon /></template>
            </t-button>
          </div>
        </div>
        <t-base-table
          hover
          row-key="index"
          :loading="loading"
          :data="tableData"
          :columns="columns"
          :pagination="pagination"
          class="table"
          :max-height="550"
        >
          <template #stockNum="{ row }">
            {{ `${row.stockNum}张` }}
          </template>
          <template #billType="{ row }">
            <div v-for="item in billType" :key="item">
              <span v-if="row.billType === item.value">{{ item.label }}</span>
            </div>
          </template>
          <template #status="slotProps">
            <t-button
              theme="default"
              variant="text"
              size="small"
              @click="exportPdf(slotProps)"
              >导出pdf</t-button
            >
          </template>
        </t-base-table>
      </t-content>
    </t-layout>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { MessagePlugin } from "tdesign-vue-next";
import { LoadIcon } from "tdesign-icons-vue-next";
import { useStock } from "@/stores/billStock";
import { exportToPDF } from "@/utils/pdf";

// 数据
const loading = ref(false);
const stockList = useStock();
const tableData = ref();
const data = ref();
// 表格表头
const columns = ref([
  {
    colKey: "serial-number",
    title: "序号",
    width: 50,
  },
  {
    colKey: "billserial",
    title: "票据编号",
    align: "center",
    width: "100",
  },
  {
    colKey: "billType",
    title: "票据类型",
    align: "center",
    width: "100",
  },
  {
    colKey: "stockNum",
    title: "入库数量",
    align: "center",
    width: "100",
  },
  {
    colKey: "stockDate",
    title: "入库日期",
    align: "center",
    width: "100",
  },
  {
    colKey: "operator",
    title: "操作员",
    align: "center",
    width: "100",
  },
  {
    colKey: "remark",
    title: "备注",
    align: "center",
    width: "100",
  },
  {
    colKey: "status",
    title: "操作",
    width: 120,
    align: "center",
    fixed: "right",
  },
]);

// 票据类型
const billType = ref([
  { label: "票据类型1", value: 0 },
  { label: "票据类型2", value: 1 },
  { label: "票据类型3", value: 2 },
  { label: "票据类型4", value: 3 },
  { label: "票据类型5", value: 4 },
]);

// 获取票据列表
const tableList = async () => {
  loading.value = true;
  tableData.value = await stockList.getStockList();
  data.value = await stockList.getStockList();
  pagination.value.total = tableData.value.length;
  const timerId = setTimeout(() => {
    loading.value = false;
    clearInterval(timerId);
  }, 300);
};

// 刷新列表
const refresh = () => {
  tableList();
};

// 查询表单
const formData = ref({
  billserial: "",
  billType: "",
  stockDate: "",
});

// 分页
const pagination = ref({
  defaultCurrent: 1,
  defaultPageSize: 10,
  total: 50,
});

// 查询表单重置
const resetting = () => {
  formData.value = {
    billserial: "",
    billType: "",
    stockDate: "",
  };
  getNewTable();
};

// 查询
const headerQuery = () => {
  tableData.value = data.value;
  if (
    formData.value.billserial === "" &&
    (formData.value.billType === undefined || formData.value.billType === "") &&
    formData.value.stockDate === ""
  ) {
    getNewTable();
  } else {
    const list = tableData.value.filter((item) => {
      let arrList;
      if (formData.value.billserial === item.billserial) {
        arrList = item;
      }
      if (formData.value.billType === item.billType) {
        arrList = item;
      }
      if (formData.value.stockDate === item.stockDate) {
        arrList = item;
      }
      if (
        formData.value.billserial === "" &&
        formData.value.billType === "" &&
        formData.value.stockDate === ""
      ) {
        arrList = item;
      }
      return arrList;
    });
    tableData.value = list;
    pagination.value.total = list.length;
  }
};

// 判断menuManagement里面是否存在数据
const getNewTable = () => {
  let arr = JSON.parse(localStorage.getItem("menuManagement"));
  if (arr) {
    tableData.value = arr.stockList;
    data.value = arr.stockList;
    pagination.value.total = tableData.value.length;
  } else {
    tableList();
  }
};

// 导出pdf
const exportPdf = (slotProps) => {
  // const content = slotProps.row;
  const content = [
    // 标题
    {
      text: "票据标题",
      style: "header",
      alignment: "center",
      margin: [0, 0, 0, 0],
    },

    // 基础信息
    {
      columns: [
        { text: "发票编号：", style: "label", alignment: "right" },
        { text: "1234567890", style: "value" },
        { text: "日期：", style: "label", alignment: "right" },
        { text: "2023-04-05", style: "value" },
      ],
      margin: [0, 20, 0, 0],
    },

    // 表格
    {
      table: {
        widths: ["*", "auto", "*"],
        body: [
          [
            { text: "商品名称", style: "tableHeader" },
            { text: "数量", style: "tableHeader" },
            { text: "单价", style: "tableHeader" },
          ],
          ["商品A", "10件", "$10.00"],
          ["商品B", "5件", "$20.00"],
          // [{ text: "合计", colSpan: 2, alignment: "right" }, "$150.00"],
        ],
      },
      layout: "noBorders",
      margin: [0, 20, 0, 0],
    },

    // 底部注释
    {
      text: "本票据一式两份，甲乙双方各执一份，具有同等法律效力。",
      style: "footer",
      alignment: "center",
      margin: [0, 0, 0, 30],
    },
  ];
  exportToPDF(content);
};

onMounted(() => {
  getNewTable();
});
</script>

<style scoped lang="less">
.scarch-box {
  width: 100%;
  background-color: @base-white-color;
  margin-bottom: 2rem;
  .scarch-from {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.table-box {
  height: 42rem;
  background-color: @base-white-color;
  padding: 1rem;
  padding-top: 0;
  .table-header {
    height: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
:deep(.t-form__controls-content) {
  justify-content: space-between;
}
</style>