完成仓库模块

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

@@ -0,0 +1,171 @@
+<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: 40px">单位</td>
+              <td>供应商</td>
+              <td style="width: 40px">数量</td>
+              <td style="width: 80px">单价</td>
+              <td>合计</td>
+              <td>备注</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.outNum }}</td>
+              <td>{{ 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>