增加菜单和修改布局

src/App.vue

@@ -11,6 +11,7 @@ import { useOsTheme } from 'hc-vue3-ui'
 import { getObjValue, setElementMainColor } from 'js-fast-way'
 import { getStoreValue, setStoreValue } from '~uti/storage'
 import { getVersionJson } from '~api/other'
+import split from 'split.js'
 
 //初始变量
 const appStore = useAppStore()
@@ -34,13 +35,14 @@ nextTick(() => {
         appStore.setCollapse(true)
     }
     //生产环境下，检测更新
-    if (import.meta.env.PROD && appStore.isSource !== 'app') {
+    if (import.meta.env.PROD) {
         getVersionJsonApi()
         //检测新版本
         setInterval(() => {
             getVersionJsonApi()
         }, 1000 * 60)
     }
+    window['$split'] = split
 })
 
 //获取版本更新信息

src/layout/layout.scoped.scss

@@ -120,14 +120,15 @@
                 padding: 6px 20px;
                 overflow: hidden;
                 border-top: 1px solid #ebeaea;
-                border-bottom: 1px solid #ebeaea;
+                //border-bottom: 1px solid #ebeaea;
             }
         }
         .hc-main-box {
             position: relative;
             overflow: hidden;
             height: 100%;
-            --el-main-padding: 24px;
+            margin-top: -16px;
+            --el-main-padding: 20px;
         }
     }
 }

src/styles/app/element.scss

@@ -0,0 +1,17 @@
+.el-card.hc-card-box {
+    --el-card-padding: 16px;
+}
+.el-card.hc-card-box .el-card__header {
+    height: 50px;
+    padding: 10px 20px;
+}
+.el-card.hc-card-box.is-header .el-card__body {
+    height: calc(100% - 50px);
+}
+.el-button[hc-btn] {
+    padding: 2px 12px;
+    height: 36px;
+}
+.el-button + .el-button {
+    margin-left: 14px;
+}

src/views/debit-pay/admin/apply.vue

@@ -1,8 +1,110 @@
 <template>
+    <hc-card>
+        <template #header>
+            <div class="w-40">
+                <el-select v-model="searchForm.key1" filterable block placeholder="选择计量期" @change="searchKey1Click">
+                    <el-option v-for="item in key1Data" :key="item.id" :label="item.name" :value="item.id" />
+                </el-select>
+            </div>
+        </template>
+        <template #extra>
+            <el-button hc-btn type="primary">
+                <HcIcon name="send-plane-2" />
+                <span>新增</span>
+            </el-button>
+            <el-button hc-btn type="primary">
+                <HcIcon name="send-plane-2" />
+                <span>上报</span>
+            </el-button>
+            <el-button hc-btn>
+                <HcIcon name="delete-bin-3" />
+                <span>按部位排序</span>
+            </el-button>
+            <el-button hc-btn>
+                <HcIcon name="printer" />
+                <span>按录入时间排序</span>
+            </el-button>
+            <el-button hc-btn>
+                <HcIcon name="printer" />
+                <span>清单明细</span>
+            </el-button>
+        </template>
+        <div class="relative h-full flex">
+            <div id="hc_tree_card" class="w-60">
+                <hc-card-item>树卡片</hc-card-item>
+            </div>
+            <div id="hc_table_card" class="flex-1">
+                <hc-card-item>
+                    <template #header>
+                        <div class="font-400 text-orange">收方总金额：0元</div>
+                    </template>
+                    <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-check @selection-change="tableCheckChange" />
+                    <template #action>
+                        <hc-pages :pages="searchForm" @change="pageChange" />
+                    </template>
+                </hc-card-item>
+            </div>
+        </div>
+    </hc-card>
 </template>
 
 <script setup>
+import { nextTick, onMounted, ref } from 'vue'
 
+//渲染完成
+onMounted(() => {
+    setSplitRef()
+})
+
+//初始化设置拖动分割线
+const setSplitRef = () => {
+    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
+    nextTick(() => {
+        window.$split(['#hc_tree_card', '#hc_table_card'], {
+            sizes: [20, 80],
+            snapOffset: 0,
+            minSize: [200, 500],
+        })
+    })
+}
+
+//搜索表单
+const searchForm = ref({
+    key1: null, current: 1, size: 10, total: 0,
+})
+
+//计量期
+const key1Data = ref([
+    { id: 1, name: '计量期1' },
+    { id: 2, name: '计量期2' },
+])
+const searchKey1Click = () => {
+
+}
+
+//分页
+const pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+}
+
+//表格数据
+const tableLoading = ref(false)
+const tableColumn = ref([
+    { key: 'key1', name: '收方单编号' },
+    { key: 'key2', name: '收方期' },
+    { key: 'key3', name: '工程划分部位' },
+    { key: 'key4', name: '收方金额' },
+    { key: 'key5', name: '业务日期' },
+    { key: 'key6', name: '审核状态' },
+    { key: 'action', name: '操作' },
+])
+const tableData = ref([])
+
+//表格选择
+const tableCheckChange = () => {
+
+}
 </script>
 
 <style scoped lang="scss">