水电表基本搭建完成

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

@@ -1,12 +1,174 @@
 <template>
   <div class="p-2 h-full flex flex-col">
     <Pageheader title="收银台管理"></Pageheader>
-    <div class="flex-1 color-gray flex h-full font-size-6 flex-center">系统还在维护中，敬请期待...</div>
+    <div class="">
+      <p class="actionsmain">
+        功能说明：可根据住户姓名、住户手机号、房屋号、车位号、车牌号，快速搜索对应的未缴费用，修改未缴费用的优惠及滞纳金金额，完成对未缴费用的收取。
+      </p>
+      <div class="contanier flex-center">
+        <div class="h-full flex-1 flex flex-items-start">
+          <div class="typebox">
+            <el-select v-model="searchform.type">
+              <el-option v-for="(item, index) in com_cashier_type" :key="index" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </div>
+          <div class="searchBox">
+            <el-input>
+              <template #suffix>
+                <el-icon>
+                  <Search></Search>
+                </el-icon>
+              </template>
+            </el-input>
+
+            <div class="listbox" v-show="Boolean(list.length > 0)">
+              <div class="list_item">
+                <div class="title">
+                  <DictTag :options="com_cashier_type" :value="searchform.type"></DictTag>
+                </div>
+                <div class="list_value" v-for="(item, index) in list" :key="index">北境碧桂园小区A栋1单元101-张姗-13899999999</div>
+                <div class="list_value">北境碧桂园小区A栋1单元101-张姗-13899999999</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <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>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { Search } from '@element-plus/icons-vue';
 import { ref } from 'vue';
+
+import cashier from './cashier.vue';
+import history from './history.vue';
+
+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: "'收银台'",
+    component: cashier
+  },
+  {
+    name: '历史缴费',
+    component: history
+  }
+];
+function handleChecout(index: number) {
+  checkouttabs.value = index;
+}
+// ! ===================================================================================
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.tabsbox {
+  height: 60px;
+  background-color: #fff;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  .tabs_item {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 10px;
+    margin-right: 40px;
+    font-size: 0.8rem;
+    cursor: pointer;
+    &:hover {
+      color: #40a0ff98;
+      border-bottom-color: #40a0ff98;
+    }
+    &.active {
+      color: #409eff;
+      border-bottom-color: #409eff;
+      border-bottom: 1px solid;
+    }
+  }
+}
+
+.actionsmain {
+  font-size: 0.7rem;
+  color: #000;
+  padding-left: 30px;
+}
+.contanier {
+  width: 900px;
+  min-height: 200px;
+  margin: 100px auto;
+  .typebox {
+    width: 140px;
+    height: 40px;
+    :deep(.el-select__wrapper) {
+      width: 140px;
+      height: 50px;
+      line-height: 20px;
+      border-radius: 5px 0px 0px 5px;
+      background-color: rgba(255, 255, 255, 1);
+      color: rgba(16, 16, 16, 1);
+      font-size: 14px;
+      outline: none;
+    }
+  }
+
+  .searchBox {
+    flex: 1;
+    background-color: #fff;
+    &:deep(.el-input__wrapper) {
+      width: 100%;
+      height: 50px;
+      border-radius: 0px 5px 5px 0px;
+      outline: none;
+    }
+
+    .listbox {
+      border: 1px solid #ccc;
+      width: 100%;
+      padding: 15px;
+      min-height: 200px;
+      font-size: 16px;
+
+      .title {
+        color: rgba(48, 49, 51, 1);
+        font-size: 1rem;
+        font-weight: 450;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 1px solid rgba(204, 204, 204, 1);
+      }
+      .list_item {
+        padding-bottom: 30px;
+      }
+      .list_value {
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 1px solid rgba(204, 204, 204, 1);
+        cursor: pointer;
+        &:hover {
+          background-color: #cccccc33;
+        }
+      }
+    }
+  }
+}
+</style>