estate/src/views/system/warehouse/PurchaseIn/Main.vue

<template>
  <div class="h-full flex flex-col p-2">
    <pageHeader></pageHeader>
    <div class="mainbody">
      <div class="actionsBox">
        <el-button icon="Printer" type="primary" @click="handlePrint">打印</el-button>
        <el-button @click="cancelForm">返回</el-button>
      </div>
      <div id="print-area" class="formBody">
        <div class="navtitle">入库单</div>
        <p>单号：{{ form.inNo }}</p>
        <p>制单日期：{{ form.inDate }}</p>
        <table border>
          <tbody>
            <tr>
              <td style="width: 85px">序号</td>
              <td style="min-width: 75px">物资名称</td>
              <td style="width: 75px">品牌</td>
              <td style="width: 85px">规格型号</td>
              <td style="width: 65px">单位</td>
              <td style="min-width: 100px">供应商</td>
              <td style="width: 65px">数量</td>
              <td style="width: 65px">单价</td>
              <td style="width: 65px">合计</td>
              <td style="min-width: 200px; line-height: normal">备注</td>
            </tr>
            <tr v-for="(item, index) in form.items" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ item.materialName }}</td>
              <td>{{ item.brand }}</td>
              <td>{{ item.model }}</td>
              <td>{{ item.unit }}</td>
              <td>
                {{ form.supplierName }}
              </td>
              <td>{{ item.inNum }}</td>
              <td>{{ item.costPrice }}</td>
              <td>{{ item.totalPrice }}</td>
              <td>{{ item.remark }}</td>
            </tr>
            <tr class="footertr">
              <td>金额大写</td>
              <td colspan="4">{{ convertToChineseCapital(form.totalAmount) }}</td>
              <td>总价合计</td>
              <td colspan="4">{{ form.totalAmount }}</td>
            </tr>
          </tbody>
        </table>
        <div class="foorter">
          <div>入库人：{{ form.leader }}</div>
          <div>入库仓库：{{ form.warehouseName }}</div>
          <div>负责人签字：</div>
          <div>日期： {{ form.createTime }}</div>
        </div>
        <div class="formark">备注： {{ form.remark }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import pageHeader from '@/components/Pageheader/index.vue';
import { getStockIn } from '@/api/system/TPurchaseIn';
import { ref } from 'vue';
import { printVueDiv } from '@/utils/print';
import { convertToChineseCapital } from '@/utils/money';
const router = useRouter();
const route = useRoute();

const form = ref({
  id: null,
  inNo: null, //
  operateStatus: '0', //
  inDate: '', // 入库日期
  remark: '', // 备注
  supplierName: '', // 供应商
  warehouseName: '', // 仓库
  leader: '', // 入库人
  totalAmount: '', // 入库人
  createTime: '', // 创建时间
  items: [] // 联系人
});

const userid = ref(null);
function init() {
  if (route.query.id) {
    userid.value = route.query.id;
    getStockIn(userid.value).then((res) => {
      form.value = {
        id: res.data.id,
        leader: res.data.leader,
        totalAmount: res.data.totalAmount,
        operateStatus: res.data.operateStatus,
        inNo: res.data.inNo,
        inDate: res.data.inDate,
        remark: res.data.remark,
        warehouseName: res.data.warehouseName,
        supplierName: res.data.supplierName,
        createTime: res.data.createTime,
        items: res.data.items
      };
    });
  }
}
init();
const handlePrint = () => {
  // window.print();
  printVueDiv('print-area', '仓库入库单');
};
// 推出
const cancelForm = () => {
  router.back();
};
</script>

<style lang="scss" scoped>
.mainbody {
  padding: 30px;
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  .actionsBox {
    text-align: right;
    margin-bottom: 10px;
  }
  .formBody {
    font-size: 15px;
    .navtitle {
      text-align: center;
      height: 41px;
      line-height: 14px;
      color: rgba(48, 49, 51, 1);
      font-size: 30px;
      margin-bottom: 50px;
    }
    p {
      line-height: 14px;
      color: rgba(48, 49, 51, 1);
      font-size: 16px;
      margin-bottom: 10px;
    }
    table {
      margin-top: 15px;
      width: 100%;
      border-collapse: collapse; /* 核心：合并边框 */
      color: rgba(48, 49, 51, 1);
      tr {
        border: 1px solid #dddddd; /* 现代浅灰色边框 */
        td {
          border: 1px solid #dddddd; /* 现代浅灰色边框 */
          height: 50px;
          line-height: normal;
          background-color: rgba(255, 255, 255, 1);
          font-size: 14px;
          text-align: center;
          font-weight: 450;
        }

        &.footertr td {
          height: 60px;
        }
      }
    }

    .foorter {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      width: 100%;
      gap: 30px;
      margin: 20px auto 0;
    }
    .formark {
      font-size: smaller;
      margin-top: 10px;
    }
  }
}
</style>