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

<template>
  <div class="h-full flex flex-col p-2">
    <Pageheader></Pageheader>
    <div class="mainbody">
      <div class="actionsbox">
        <el-button @click="handlePrint" icon="Printer" type="primary">打印</el-button>
        <el-button @click="cancelForm">返回</el-button>
      </div>
      <div class="formBody" id="print-area">
        <div class="navtitle">出库单</div>
        <p>单号：{{ form.outNo }}</p>
        <p>制单日期：{{ form.outDate }}</p>
        <table border>
          <tbody>
            <tr>
              <td style="width: 60px">序号</td>
              <td>物资名称</td>
              <td>品牌</td>
              <td>规格型号</td>
              <td style="width: 80px">单位</td>
              <td>供应商</td>
              <td style="width: 100px">数量</td>
              <td style="width: 150px">单价</td>
              <td>合计</td>
              <td>备注</td>
            </tr>
            <tr v-for="(item, index) in form.items" :key="index">
              <td style="width: 60px">{{ index + 1 }}</td>
              <td>{{ item.materialName }}</td>
              <td>{{ item.brand }}</td>
              <td>{{ item.model }}</td>
              <td style="width: 80px">{{ item.unit }}</td>
              <td>{{ form.supplierName }}</td>
              <td style="width: 100px">{{ item.outNum }}</td>
              <td style="width: 150px">{{ item.outPrice }}</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>日期： {{ form.createTime }}</div>
          <div>备注： {{ form.remark }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { printVueDiv } from '@/utils/print';
import { convertToChineseCapital } from '@/utils/money';
import { getStockOut } from '@/api/system/TissueOut';
const router = useRouter();
const route = useRoute();

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

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

<style scoped lang="scss">
.mainbody {
  padding: 30px;
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  .actionsbox {
    text-align: right;
    margin-bottom: 10px;
  }
  .formBody {
    .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: 45px;
          background-color: rgba(255, 255, 255, 1);
          font-size: 1rem;
          text-align: center;
          font-weight: 450;
        }

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

    .foorter {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      width: 85%;
      margin: 0 auto;
      gap: 30px;
      margin-top: 30px;
    }
  }
}
</style>