物业后台框架基本完成

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

@@ -1,7 +1,7 @@
 <template>
   <div class="p-2 h-full flex flex-col">
     <Pageheader title="收银台管理"></Pageheader>
-    <div class="">
+    <div class="" v-if="isSearch">
       <p class="actionsmain">
         功能说明：可根据住户姓名、住户手机号、房屋号、车位号、车牌号，快速搜索对应的未缴费用，修改未缴费用的优惠及滞纳金金额，完成对未缴费用的收取。
       </p>
@@ -34,39 +34,48 @@
         </div>
       </div>
     </div>
-
-    <div>
+    <div v-else style="margin-top: 20px; height: calc(100% - 210px)">
       <div class="tabsbox">
         <div @click="handleChecout(index)" v-for="(item, index) in tabs" :key="index" class="tabs_item" :class="{ active: checkouttabs === index }">
           {{ item.name }}
         </div>
       </div>
-      <div>
-        <component :is="tabs[checkouttabs].component" :key="checkouttabs"></component>
+      <div class="h-full">
+        <el-card style="height: 100%; margin-top: 20px" v-if="checkouttabs === 0">
+          <cashier @Back="handleBack"></cashier>
+        </el-card>
+        <el-card style="height: 100%; margin-top: 20px" shadow="never" v-if="checkouttabs === 1">
+          <history></history>
+        </el-card>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+// TODO 收银台
+// TODO 历史缴费
+// TODO 添加临时收费
+// TODO 预存
+// TODO 缴费
 import { Search } from '@element-plus/icons-vue';
 import { ref } from 'vue';
 
 import cashier from './cashier.vue';
 import history from './history.vue';
 
+const isSearch = ref(false);
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { com_cashier_type } = toRefs<any>(proxy?.useDict('com_cashier_type'));
 const searchform = ref({
   type: '0'
 });
 const list = ref([]);
-
 // ! ===================================================================================
 const checkouttabs = ref(0);
 const tabs = [
   {
-    name: "'收银台'",
+    name: '收银台',
     component: cashier
   },
   {
@@ -78,6 +87,22 @@ function handleChecout(index: number) {
   checkouttabs.value = index;
 }
 // ! ===================================================================================
+
+// ! ===================================================================================
+const total = ref(100);
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10
+});
+const tableData1 = ref([]);
+const getList = () => {
+  console.log('getList');
+};
+
+const handleBack = () => {
+  isSearch.value = true;
+};
+// ! ===================================================================================
 </script>
 
 <style scoped lang="scss">
@@ -171,4 +196,27 @@ function handleChecout(index: number) {
     }
   }
 }
+
+//
+
+.cashierbox {
+  font-size: 0.8rem;
+  .el-button {
+    width: 100px;
+    height: 35px;
+    border-radius: 4px;
+  }
+
+  .actionsbox {
+    margin-top: 20px;
+  }
+  .tablebox {
+    margin-top: 20px;
+    height: 100%;
+    .el-table {
+      height: calc(100% - 80px);
+    }
+  }
+}
+//
 </style>