调拨记录打印调拨单

src/types/components.d.ts

@@ -24,20 +24,13 @@ declare module 'vue' {
     DistributionMap: typeof import('./../components/Map/YztMap/DistributionMap.vue')['default']
     DrawMap: typeof import('./../components/Map/YztMap/DrawMap.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
-    ElAnchor: typeof import('element-plus/es')['ElAnchor']
-    ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxButton: typeof import('element-plus/es')['ElCheckboxButton']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
-    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -48,7 +41,6 @@ declare module 'vue' {
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
@@ -60,24 +52,12 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
-    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
-    ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
-    ElTimeline: typeof import('element-plus/es')['ElTimeline']
-    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
-    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']

src/views/comprehensiveGuarantee/MaterialReserveManagement/TransferRecord.vue

@@ -3,11 +3,14 @@
     <div class="app-container">
       <div style="display: flex; align-items: center; justify-content: space-between">
         <h1>调拨记录</h1>
-        <el-button type="primary">批量打印</el-button>
+        <div>
+          <el-button type="primary">导出</el-button>
+          <el-button type="primary" :disabled="multiple" v-print="printTransferOrder" @click="batchPrint">批量打印</el-button>
+        </div>
       </div>
-      <el-table ref="multipleTable" v-loading="loading" :data="tableData" style="width: 100%">
+      <el-table ref="multipleTable" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
         <el-table-column type="selection" width="55" />
-        <el-table-column label="申请时间" align="center" prop="application_time" fixed="left" />
+        <el-table-column label="申请时间" align="center" prop="application_time" fixed="left" width="200" />
         <el-table-column label="申请单位" align="center" prop="applicant" fixed="left" width="140" />
         <el-table-column label="处理人" align="center" prop="processing_person" fixed="left" width="140" />
         <el-table-column label="调拨单位" align="center" prop="transfer_unit" fixed="left" width="140" />
@@ -25,11 +28,114 @@
           <template #default="scope">
             <el-text class="common-btn-text-primary" @click="handleView(scope.row)">查看</el-text>
             <el-text class="common-btn-text-primary" @click="handleUpdate(scope.row)">修改</el-text>
-            <el-text class="common-btn-text-primary" @click="handleUpdate(scope.row)">打印调拨单</el-text>
+            <el-text class="common-btn-text-primary" v-print="printTransferOrder" @click="printOrder(scope.row)">打印调拨单</el-text>
           </template>
         </el-table-column>
       </el-table>
     </div>
+    <div id="transferOrder" style="display: none; width: 850px">
+      <h1 style="display: flex; justify-content: center">行政事业单位资产调拨单</h1>
+      <div style="display: flex; margin-top: -10px; margin-left: 20px;  font-size:13px">
+        <div style="display:flex; flex-direction: column">
+          <div style="margin-bottom: 2px">调拨单位：茂名市应急管理局</div>
+          <div>调出单位性质：行政单位</div>
+        </div>
+        <div style="display:flex; flex-direction: column; margin-left: 200px; margin-bottom: 2px">
+          <div style="margin-bottom: 2px">调入单位：茂南区人民政府站前街道办事处</div>
+          <div>调入单位行政：行政单位</div>
+        </div>
+      </div>
+      <div class="asset-table-container" style="margin-top: -1px">
+        <table class="asset-table">
+          <thead>
+          <tr>
+            <th style="width: 150px">资产名称</th>
+            <th style="width: 100px">购置时间</th>
+            <th style="width: 80px">数量</th>
+            <th>单价</th>
+            <th style="width: 150px">账面价值</th>
+            <th style="width: 150px">调拨原因</th>
+            <th style="width: 120px">备注</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr v-for="(asset, index) in selectedData" :key="index">
+            <td>{{ asset.material_name }}</td>
+            <td>{{ asset.application_time }}</td>
+            <td>{{ asset.num }}</td>
+            <td>{{ asset.price }}</td>
+            <td>{{ asset.material_name }}</td>
+            <td>{{ asset.material_name }}</td>
+            <td>{{ asset.material_name }}</td>
+          </tr>
+          </tbody>
+          <tbody>
+          <tr v-for="i in 2" :key="i">
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+          </tr>
+          <tr>
+            <td>合计</td>
+            <td>&nbsp;</td>
+            <td>{{ numSum }}</td>
+            <td>{{ priceSum }}</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+            <td>&nbsp;</td>
+          </tr>
+          <tr>
+            <td colspan="7" style="text-align: left; padding: 8px;">
+              调拨处理办法：1、无偿调拨&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp2、有偿调拨
+            </td>
+          </tr>
+          <tr style="height: 120px; vertical-align: top; position: relative;">
+            <td colspan="2" style="text-align: left; position: relative;">
+              调出单位意见：
+              <div style="position: absolute; right: 8px; bottom: 8px; font-size: 12px;">
+                年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
+              </div>
+            </td>
+            <td colspan="3" style="text-align: left; position: relative;">
+              调入单位意见：
+              <div style="position: absolute; right: 8px; bottom: 8px; font-size: 12px;">
+                年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
+              </div>
+            </td>
+            <td colspan="2" rowspan="2" style="text-align: left; position: relative; vertical-align: top;">
+              财政部门意见：
+              <div style="position: absolute; right: 8px; bottom: 8px; font-size: 12px;">
+                年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
+              </div>
+            </td>
+          </tr>
+          <tr style="height: 120px; vertical-align: top; position: relative;">
+            <td colspan="2" style="text-align: left; position: relative;">
+              调出单位主管部门意见：
+              <div style="position: absolute; right: 8px; bottom: 8px; font-size: 12px;">
+                年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
+              </div>
+            </td>
+            <td colspan="3" style="text-align: left; position: relative;">
+              调入单位主管部门意见：
+              <div style="position: absolute; right: 8px; bottom: 8px; font-size: 12px;">
+                年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
+              </div>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+        <div style="display: flex; justify-content: space-between; font-size: 13px">
+          <div>本表一式五份</div>
+          <div>填报人:</div>
+          <div>联系电话：15200000000</div>
+        </div>
+      </div>
+    </div>
     <TransferRecordDetail v-if="viewRecord" :id="material_id" @close="handleCancel" />
     <TransferRecordEdit v-if="editRecord" :id="material_id" @close="handleCancel" />
   </div>
@@ -40,11 +146,34 @@
 import { ElTable, ElTableColumn, ElText } from 'element-plus';
 import TransferRecordDetail from '@/views/comprehensiveGuarantee/MaterialReserveManagement/TransferRecordDetail.vue';
 import TransferRecordEdit from '@/views/comprehensiveGuarantee/MaterialReserveManagement/TransferRecordEdit.vue';
+import { ref } from 'vue';
 
 const tableData = ref([
   {
     id: '1',
-    application_time: '2025年3月27日',
+    material_name: '皮划艇',
+    application_time: '2023-01-01',
+    applicant: '应急局',
+    processing_person: '张三',
+    transfer_unit: '应急局',
+    transferred_unit: '应急局',
+    reason_transfer: '应急救灾',
+    book_value: 999,
+    method: '无',
+    receiving_unit: '应急局',
+    receiving_location: '茂南区',
+    use: '应急救灾',
+    contacts: '张三',
+    contacts_phone: '13309897689',
+    notes: '无',
+    num: '5',
+    price: '5000',
+    reason: 'no',
+  },
+  {
+    id: '2',
+    material_name: '电脑',
+    application_time: '2023-01-01',
     applicant: '应急局',
     processing_person: '张三',
     transfer_unit: '应急局',
@@ -57,12 +186,55 @@ const tableData = ref([
     use: '应急救灾',
     contacts: '张三',
     contacts_phone: '13309897689',
-    notes: '无'
+    notes: '无',
+    num: '9',
+    price: '2000',
+    reason: 'no',
   }
 ]);
+const selectedData = ref([]);
 const viewRecord = ref(false);
 const editRecord = ref(false);
 const material_id = ref();
+const numSum = ref();
+const priceSum = ref();
+const multiple = ref(true);
+const multipleTable = ref();
+
+const printOrder = (row) => {
+  multipleTable.value.clearSelection();
+  if (selectedData.value.length === 0) {
+    selectedData.value.push(row);
+  } else {
+    selectedData.value = [];
+    selectedData.value.push(row);
+  }
+  totalQuantity();
+  totalPrice();
+}
+const batchPrint = () => {
+  totalQuantity();
+  totalPrice();
+}
+let printTransferOrder = reactive({
+  id: 'transferOrder', // 这里是要打印元素的ID
+  popTitle: '',
+  extraCss: '/print.css'
+});
+const totalQuantity = () => {
+  let total = 0;
+  selectedData.value.forEach((item) => {
+    total += parseInt(item.num);
+  })
+  numSum.value = total;
+}
+const totalPrice = () => {
+  let total = 0;
+  selectedData.value.forEach((item) => {
+    total += parseFloat(item.price);
+  })
+  priceSum.value = total;
+}
 
 const handleView = (row) => {
   viewRecord.value = true;
@@ -75,10 +247,50 @@ const handleCancel = () => {
   viewRecord.value = false;
   editRecord.value = false;
 }
+const handleSelectionChange = (selection) => {
+  multiple.value = selection.length === 0;
+  selectedData.value = [];
+  selection.forEach((item) => {
+    selectedData.value.push(item);
+  })
+};
 </script>
 
 
 
 <style scoped lang="scss">
+.asset-table-container {
+  margin: 20px;
+  overflow-x: auto;
+}
 
+.asset-table {
+  width: auto;
+  border-collapse: collapse;
+  font-size: 13px;
+  border: 1px solid #555;
+}
+
+.asset-table th,
+.asset-table td {
+  border: 1px solid #555;
+  padding: 6px 8px;
+  text-align: center;
+  font-weight: normal;
+  width: 80px;
+  height: 28px;
+  line-height: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.asset-table th {
+  color: #333;
+  padding: 8px;
+}
+@media print {
+  #transferOrder {
+    display: block !important;
+  }
+}
 </style>