同步6/16

src/views/system/Sdb/SdbCashier/history.vue

@@ -2,17 +2,14 @@
   <el-card style="margin-top: 20px; height: 100%">
     <div class="p-2 flex flex-col cashierbox h-full">
       <div class="tablebox">
-        <el-table :data="tabledata">
+        <div style="margin-bottom: 20px">
+          <el-button @click="printPiaoju" type="primary">打印票据</el-button>
+        </div>
+        <el-table :data="tabledata" @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="55" align="center" />
-          <el-table-column align="center" label="序号" width="80">
+          <el-table-column align="center" label="收费名称">
             <template #default="scope">
-              <div>{{ scope.$index }}</div>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="房屋/车位/车辆">
-            <template #default="scope">
-              <div v-if="scope.row.houseName">{{ scope.row.parkingName }}</div>
-              <div v-else-if="scope.row.parkingName">{{ scope.row.parkingName }}</div>
+              <div>{{ scope.row.detailsName }}</div>
             </template>
           </el-table-column>
           <el-table-column align="center" label="收费项目">
@@ -22,17 +19,16 @@
           </el-table-column>
           <el-table-column align="center" label="收费周期">
             <template #default="scope">
-              <div>{{ scope.row.startDate }} -- {{ scope.row.endDate }}</div>
+              <dict-tag :options="com_bill_charge_period" :value="scope.row.chargePeriod"></dict-tag>
             </template>
           </el-table-column>
           <el-table-column align="center" label="单价">
             <template #default="scope">
-              <div>{{ scope.row.fixedPrice }}</div>
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="数量">
-            <template #default="scope">
-              <div>{{ scope.row.formula }}</div>
+              <div class="flex flex-items-center justify-center">
+                <div>{{ scope.row.fixedPrice ?? '--' }}</div>
+                <span v-show="Boolean(scope.row.unit)">/</span>
+                <dict-tag v-show="Boolean(scope.row.unit)" :options="com_charge_item_unit" :value="scope.row.unit"></dict-tag>
+              </div>
             </template>
           </el-table-column>
           <el-table-column align="center" label="缴费状态">
@@ -40,69 +36,92 @@
               <dict-tag :options="com_pay_status" :value="scope.row.payStatus"></dict-tag>
             </template>
           </el-table-column>
-
           <el-table-column align="center" label="应缴金额">
             <template #default="scope">
-              <div>{{ scope.row.money }}</div>
+              <div>{{ scope.row.amount }}</div>
             </template>
           </el-table-column>
         </el-table>
         <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
       </div>
     </div>
+    <el-dialog :title="dialog_print.title" v-model="dialog_print.visible" width="1200px" append-to-body>
+      <template #header>
+        <div class="flex" style="justify-content: space-between; padding: 0 20px">
+          <div class="title">票据打印</div>
+          <el-button type="primary" :loading="isLoading" @click="confimPrint">打印</el-button>
+          <!-- <el-button type="primary" v-print="printOption">打印</el-button> -->
+        </div>
+      </template>
 
-    <!-- 添加或修改电 设备对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-      <div class="payinfo">
-        <div>
-          <span>缴费人：北境碧桂园小区-A栋1单元102-张姗</span>
+      <div class="printBox" id="printBox-Bill">
+        <div class="title">{{ print_form.title }}</div>
+        <div class="nav gridbox">
+          <div>单据日期：{{ print_form.printDate }}</div>
+          <div>房号：{{ print_form.HouseName }}</div>
+          <div>产权人：{{ print_form.residentName }}</div>
+          <div>No.</div>
         </div>
-        <div>
-          <span>账单名称：2025年车位费、2025年上半年物业费 </span>
-        </div>
-        <div>
-          <span>应收合计：￥1600.00 </span>
-        </div>
-        <div>
-          <span>应缴合计：￥1600.00 </span>
+        <div class="tablebox">
+          <table border class="printTable">
+            <thead>
+              <tr>
+                <th>收费项目</th>
+                <th>收费标准</th>
+                <th>账单时间</th>
+                <th>面积</th>
+                <th style="width: 80px">应收金额</th>
+                <th style="width: 80px">实收金额</th>
+                <th>收款方式</th>
+                <th style="width: 80px">备注</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, index) in print_form.detailsList" :key="index">
+                <td>{{ item.chargeItemName }}</td>
+                <td>{{ item.billName }}</td>
+                <td>{{ item.detailsTime }}</td>
+                <td>{{ item.useCount }}</td>
+                <td style="width: 80px">{{ item.account }}</td>
+                <td style="width: 80px">{{ item.account }}</td>
+                <td>{{ item.payType }}</td>
+                <td style="width: 80px">{{ item.remark }}</td>
+              </tr>
+              <tr>
+                <td>合计</td>
+                <td></td>
+                <td></td>
+                <td></td>
+                <td style="width: 80px">{{ print_form.totalAccount }}</td>
+                <td style="width: 80px">{{ print_form.totalAccount }}</td>
+                <td style="width: 80px"></td>
+              </tr>
+            </tbody>
+          </table>
+          <p style="font-size: 10px">说明：本收据收款单位和收款具签章方为有效，本收据手写无效</p>
+          <div class="flex flex-items-center" style="font-size: 12px">
+            <div class="flex-1">交款人：</div>
+            <div class="flex-1 flex flex-items-center">
+              <span style="white-space: nowrap">收款人： </span>
+              <el-input v-model="inHomenyUse" v-if="!isPrint" placeholder="请输入收款人姓名" style="width: 150px"></el-input>
+              <span style="white-space: nowrap" v-else> {{ inHomelyUse }}</span>
+            </div>
+          </div>
         </div>
       </div>
-      <el-form ref="formRef" :model="from" label-width="100px">
-        <el-form-item label="费用合计" prop="allCost">
-          <el-input v-model="from.allCost">
-            <template #suffix>
-              <span>元</span>
-            </template>
-          </el-input>
-        </el-form-item>
-        <el-form-item label="缴纳状态" prop="startTime">
-          <el-radio-group v-model="from.deviceType">
-            <el-radio v-for="dict in com_pay_status" :key="dict.value" :label="dict.label"></el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="支付方式" prop="endTime">
-          <el-select v-model="from.deviceType" placeholder="请选择">
-            <el-option v-for="dict in com_pay_method" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input type="textarea" :rows="5" v-model="from.remark"></el-input>
-        </el-form-item>
-        <div class="flex justify-end">
-          <el-button @click="closepay">取消</el-button>
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
-        </div>
-      </el-form>
     </el-dialog>
   </el-card>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { billlistType, billQuery } from '@/api/system/SdbCashier';
+import { billlistType, billPrint, BillPrintType, billQuery } from '@/api/system/SdbCashier';
+import { printTicketDiv } from '@/utils/print';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { com_pay_method, com_pay_status } = toRefs<any>(proxy?.useDict('com_pay_method', 'com_pay_status'));
+const { com_bill_charge_period } = toRefs<any>(proxy?.useDict('com_bill_charge_period'));
+const { com_charge_item_unit } = toRefs<any>(proxy?.useDict('com_charge_item_unit'));
 
 type querytype = {
   residentId: string;
@@ -123,7 +142,7 @@ const props = defineProps({
     }
   }
 });
-const ids = ref<Array<string | number>>([]);
+const ids = ref<Array<billlistType>>([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(100);
@@ -131,21 +150,22 @@ const queryParams = ref({
   pageNum: 1,
   pageSize: 10
 });
-const tabledata = ref([]);
+const tabledata = ref<billlistType[]>([]);
 // 支付状态 0未缴纳 1已缴纳 2缴纳失败
 const getList = () => {
   billQuery({
     residentId: props.query.residentId,
     'payStatus': '1'
   }).then((res) => {
-    console.log(res);
     tabledata.value = res.rows;
     total.value = res.total;
   });
 };
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: billlistType[]) => {
-  ids.value = selection.map((item) => item.residentId);
+  ids.value = [];
+  ids.value = selection;
+
   single.value = selection.length != 1;
   multiple.value = !selection.length;
 };
@@ -156,43 +176,89 @@ onMounted(() => {
 
 const emit = defineEmits(['Back']);
 
-const formRef = ref();
-const dialog = reactive<DialogOption>({
+// 打印票据
+const isPrint = ref(false);
+const dialog_print = reactive<DialogOption>({
   visible: false,
-  title: '收款'
+  title: '票据打印'
 });
-const buttonLoading = ref(false);
-
-const from = ref({
-  allCost: null,
-  sex: null,
-  deviceType: null,
-  remark: ''
+const inHomelyUse = ref('');
+const print_form = ref<BillPrintType>({
+  'totalAccount': '',
+  'residentName': '',
+  'detailsList': [],
+  'printDate': '',
+  'HouseName': '',
+  'title': ''
 });
-
-const openDiage = () => {
-  from.value = {
-    allCost: null,
-    sex: null,
-    deviceType: null,
-    remark: ''
+function printPiaoju() {
+  if (ids.value.length <= 0) {
+    ElMessage.warning('请至少选择一条账单进行打印票据');
+    return;
+  }
+  isPrint.value = false;
+  inHomenyUse.value = '';
+  const query = {
+    'residentId': props.query.residentId,
+    'detailsIds': [...ids.value.map((item) => item.detailsId)]
   };
-  dialog.visible = true;
-};
-const closepay = () => {
-  dialog.visible = false;
-  dialog.title = '';
-};
-const submitForm = () => {
-  buttonLoading.value = true;
+  billPrint(query).then((res) => {
+    print_form.value = res.data;
+    dialog_print.visible = true;
+  });
+}
+const isLoading = ref(false);
+function confimPrint() {
+  isLoading.value = true;
+  isPrint.value = true;
   setTimeout(() => {
-    buttonLoading.value = false;
-    closepay();
+    printTicketDiv('printBox-Bill', '票据打印', () => {
+      isPrint.value = false;
+      isLoading.value = false;
+    });
   }, 1000);
-};
+}
 </script>
 
 <style scoped lang="scss">
+.printBox {
+  color: rgba(0, 0, 0, 1);
+  padding-top: 5px;
+  .title {
+    font-weight: bold;
+    font-size: 1.2rem;
+    margin-bottom: 10px;
+    text-indent: 5em;
+  }
+  .nav {
+    font-size: 12px;
+    &.gridbox {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+      grid-gap: 10px;
+      grid-template-rows: 1fr;
+    }
+    &.flexbox {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+  .tablebox {
+    font-size: 10px;
+    .printTable {
+      border-collapse: collapse;
+      border: 1px solid #000;
+      th,
+      td {
+        text-align: center;
+        min-width: 140px;
+        height: 40px;
+      }
+    }
+  }
+}
+
 .cashierbox {
   font-size: 0.8rem;
   .el-button {