协议

src/config/index.json

@@ -1,6 +1,6 @@
 {
     "version": "20230607160059",
-    "target": "http://192.168.0.115:8090",
+    "target": "http://192.168.0.109:8090",
     "smsPhone": "",
     "vite": {
         "port": 5174,

src/styles/settle/index.scoped.scss

@@ -0,0 +1,69 @@
+.hc-layout-tree-box {
+    position: relative;
+    height: 100%;
+    padding: 18px;
+}
+.hc-settle-drawer-box {
+    position: relative;
+    display: flex;
+    height: 100%;
+    .settle-left-box {
+        position: relative;
+        height: 100%;
+        flex: 1;
+        .settle-pdf {
+            position: relative;
+            height: 100%;
+        }
+    }
+    .settle-right-box {
+        position: relative;
+        margin-left: 30px;
+        width: 300px;
+        height: 100%;
+        .settle-right {
+            position: relative;
+            height: 100%;
+            .hc-settle-cycle {
+                position: relative;
+                height: calc(50%);
+                .title {
+                    background: #6C6C6C;
+                    color: white;
+                    padding: 10px;
+                    text-align: center;
+                }
+                .cycle-box {
+                    position: relative;
+                    height: calc(100% - 38.4px);
+                    border: 1px solid #6C6C6C;
+                    .item {
+                        background: white;
+                        padding: 10px;
+                        text-align: center;
+                        font-size: 14px;
+                        cursor: pointer;
+                        color: var(--el-color-primary);
+                        &:hover {
+                            color: var(--el-color-primary-dark-2);
+                            background: var(--el-color-primary-light-9);
+                        }
+                    }
+                    .item + .item {
+                        border-top: 1px solid #e4e4e4;
+                    }
+                }
+                &.of {
+                    height: calc(50% - 74px - 30px);
+                    margin-top: 30px;
+                }
+            }
+            .hc-settle-btn {
+                position: relative;
+                text-align: center;
+                padding-top: 24px;
+                background: #f1f5f8;
+            }
+        }
+    }
+}

src/styles/settle/index.scss

@@ -0,0 +1,12 @@
+.el-overlay.hc-settle-drawer {
+    background-color: transparent;
+    .el-card.hc-card-box {
+        box-shadow: none;
+    }
+}
+.hc-settle-drawer-box .settle-right-box .settle-right .hc-settle-btn .el-button {
+    width: 100%;
+    height: 50px;
+    font-size: 18px;
+    border-radius: 100px;
+}

src/views/settle/index.vue

@@ -1,15 +1,178 @@
 <template>
-    <div>222</div>
+    <HcPageLayout id="hc-settle-node-target">
+        <template #left>
+            <div class="hc-layout-tree-box">
+                <el-scrollbar>
+                    <HcTreeData @nodeTap="treeNodeTap"/>
+                </el-scrollbar>
+            </div>
+        </template>
+        <HcCard>
+            <template #header>
+                <div class="w-32">
+                    <el-select v-model="searchForm.projectType" block clearable placeholder="补偿类型" size="large">
+                        <el-option label="征地补偿" value="选项1"/>
+                        <el-option label="坟地补偿" value="选项2"/>
+                        <el-option label="专项补偿" value="选项3"/>
+                    </el-select>
+                </div>
+                <div class="w-32 ml-2">
+                    <el-select v-model="searchForm.projectType" block clearable placeholder="计量期" size="large">
+                        <el-option label="第一期" value="选项1"/>
+                        <el-option label="第二期" value="选项2"/>
+                        <el-option label="第三期" value="选项3"/>
+                    </el-select>
+                </div>
+                <div class="w-52 ml-2">
+                    <el-input v-model="searchForm.queryValue" clearable placeholder="请输入名称进行查询" size="large"/>
+                </div>
+                <div class="ml-4">
+                    <el-button type="primary" @click="searchClick" size="large">
+                        <HcIcon name="search-2"/>
+                        <span>搜索</span>
+                    </el-button>
+                </div>
+            </template>
+            <template #extra>
+                <el-button size="large" type="primary" hc-btn @click="addRowClick">新增结算</el-button>
+                <el-button size="large" type="success" hc-btn>编辑结算周期</el-button>
+                <el-button size="large" type="warning" hc-btn @click="cycleClick">查看报表</el-button>
+                <el-button size="large" type="danger" hc-btn>批量删除</el-button>
+            </template>
+            <HcTable :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelectionChange">
+                <template #key3="{row,index}">
+                    <span class="text-blue text-hover">{{row.key3}}</span>
+                </template>
+                <template #action="{row,index}">
+                    <el-button size="small" type="primary" @click="editRowClick(row)">修改</el-button>
+                    <el-button size="small" type="danger">删除</el-button>
+                </template>
+            </HcTable>
+            <template #action>
+                <HcPages :pages="searchForm" @change="pageChange"/>
+            </template>
+        </HcCard>
+        <!--抽屉-->
+        <HcDrawer :show="isDrawer" uis="hc-settle-drawer" to-id="hc-main-box" @close="drawerClose">
+            <div class="hc-settle-drawer-box">
+                <div class="settle-left-box">
+                    <div class="settle-pdf">
+                        <HcPdf src="http://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20230504/911982ba85e66cfa58fb02d5a738bb2b.pdf"/>
+                    </div>
+                </div>
+                <div class="settle-right-box">
+                    <div class="settle-right">
+                        <div class="hc-settle-cycle">
+                            <div class="title">结算周期</div>
+                            <div class="cycle-box">
+                                <el-scrollbar>
+                                    <div class="item">第一期</div>
+                                    <div class="item">第一期</div>
+                                    <div class="item">第一期</div>
+                                    <div class="item">第一期</div>
+                                </el-scrollbar>
+                            </div>
+                        </div>
+                        <div class="hc-settle-cycle of">
+                            <div class="title">结算报表名称</div>
+                            <div class="cycle-box">
+                                <el-scrollbar>
+                                    <div class="item">封面</div>
+                                    <div class="item">补偿结算表</div>
+                                    <div class="item">补偿明细表</div>
+                                    <div class="item">面积统计明细表</div>
+                                </el-scrollbar>
+                            </div>
+                        </div>
+                        <div class="hc-settle-btn">
+                            <el-button type="primary" hc-btn @click="drawerClose" size="large">取 消 查 阅</el-button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </HcDrawer>
+
+
+    </HcPageLayout>
 </template>
 
 <script setup>
+import {ref} from "vue";
+
+//树节点被点击
+const treeNodeTap = ({node, data}) => {
+
+}
+
+//搜索表单
+const searchForm = ref({
+    projectType: null, queryValue: null, startTime: null, endTime: null,
+    current: 1, size: 20, total: 0
+})
+
+//搜索
+const searchClick = () => {
+    searchForm.value.current = 1;
+    getTableData()
+}
+
+//分页被点击
+const pageChange = ({current, size}) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
+
+//获取数据
+const tableLoading = ref(false)
+const tableColumn = [
+    {key: 'key1', name: '计量期'},
+    {key: 'key2', name: '结算协议书名称'},
+    {key: 'key3', name: '协议书类型'},
+    {key: 'key4', name: '协议书金额'},
+    {key: 'action', name: '操作', width: '130', align: 'center'},
+]
+const tableData = ref([
+    {id: 1, key1: 'xxxx', key2: 'xxxx', key3: '征地补偿'},
+    {id: 2, key1: 'xxxx', key2: 'xxxx', key3: '征地补偿'},
+    {id: 3, key1: 'xxxx', key2: 'xxxx', key3: '征地补偿'},
+    {id: 4, key1: 'xxxx', key2: 'xxxx', key3: '征地补偿'},
+])
+const getTableData = () => {
+
+}
 
+//多选事件
+const tableSelectionChange = (rows) => {
+    console.log(rows)
+}
+
+
+//结算周期
+const isDrawer = ref(false)
+const cycleClick = () => {
+    isDrawer.value = true
+}
+const drawerClose = () => {
+    isDrawer.value = false
+}
+
+
+//新增
+const addRowClick = () => {
+
+}
+
+//编辑
+const editRowClick = (row) => {
+
+}
 </script>
 
 <style lang="scss" scoped>
-
+@import "~src/styles/settle/index.scoped.scss";
 </style>
 
 <style lang="scss">
-
+@import "~src/styles/settle/index.scss";
 </style>