协议

src/styles/settle/index.scoped.scss

@@ -67,3 +67,59 @@
         }
     }
 }
+
+.hc-settle-dialog-box {
+    position: relative;
+    height: 100%;
+    display: flex;
+    .hc-settle-dialog-tree {
+        position: relative;
+        padding: 10px 10px 10px 0;
+        height: 100%;
+    }
+    .hc-settle-dialog-table {
+        position: relative;
+        height: 100%;
+        padding: 14px;
+        .dialog-table-header {
+            position: relative;
+            display: flex;
+            padding-bottom: 24px;
+        }
+        .dialog-table-body {
+            position: relative;
+            height: calc(100% - 64px);
+        }
+    }
+}
+
+.hc-settle-editing-dialog-box {
+    position: relative;
+    height: 100%;
+    .editing-dialog-tip {
+        position: relative;
+        display: flex;
+        margin-bottom: 20px;
+        border-radius: 3px;
+        padding: 14px;
+        color: #101010;
+        background: rgba(243, 123, 29, 0.12);
+        .content {
+            position: relative;
+            margin: 0 12px;
+            flex: 1;
+            .item + .item {
+                margin-top: 6px;
+            }
+        }
+        .btn {
+            position: relative;
+            display: flex;
+            align-items: flex-end;
+        }
+    }
+    .editing-dialog-table {
+        position: relative;
+        height: calc(100% - 111px);
+    }
+}

src/views/settle/index.vue

@@ -35,7 +35,7 @@
             </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="success" hc-btn @click="editingClick">编辑结算周期</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>
@@ -52,6 +52,7 @@
                 <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">
@@ -92,12 +93,95 @@
             </div>
         </HcDrawer>
 
+        <!--新增结算单-->
+        <HcDialog isToBody bgColor="white" isTable widths="80%" title="新增结算单" :padding="false" :show="rowModal" @save="rowModalSave" @close="rowModalClose">
+            <div class="hc-settle-dialog-box">
+                <div class="hc-settle-dialog-tree" id="settle-dialog-tree">
+                    <el-scrollbar>
+                        <HcTreeData :isMenu="false" @nodeTap="treeNodeTap"/>
+                    </el-scrollbar>
+                </div>
+                <div class="hc-settle-dialog-table" id="settle-dialog-table">
+                    <div class="dialog-table-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>
+                    </div>
+                    <div class="dialog-table-body">
+                        <HcTable :column="tableColumn1" :datas="tableData1" isCheck @selection-change="tableSelectionChange"/>
+                    </div>
+                </div>
+            </div>
+        </HcDialog>
 
+        <!--结算周期编辑-->
+        <HcDialog isToBody bgColor="white" isTable widths="80%" title="编辑结算周期" :show="editingModal" @save="editingModalSave" @close="editingModalClose">
+            <div class="hc-settle-editing-dialog-box">
+                <div class="editing-dialog-tip">
+                    <div class="name">提示：</div>
+                    <div class="content">
+                        <div class="item truncate">1.日期不能为空</div>
+                        <div class="item truncate">2.同一期的结束日期不能小于开始日期</div>
+                        <div class="item truncate">3.连续的两期，上一期结束日期和下一期的开始日期必须连续，如：期号1的结束日期为2018-1-25，则期号2的开始日期必须是2018-1-26 ！</div>
+                        <div class="item truncate text-orange">4.已经存在数据的结算周期不能进行删除以及修改结算类型！</div>
+                    </div>
+                    <div class="btn">
+                        <el-button type="primary" size="large">
+                            <HcIcon name="add"/>
+                            <span>添加</span>
+                        </el-button>
+                    </div>
+                </div>
+                <div class="editing-dialog-table">
+                    <HcTable :isIndex="false" :column="tableColumn2" :datas="tableData2">
+                        <template #key1="{row,index}">
+                            <el-input v-model="row.key1"/>
+                        </template>
+                        <template #key2="{row,index}">
+                            <el-date-picker class="block" v-model="row.key2" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
+                        </template>
+                        <template #key3="{row,index}">
+                            <el-date-picker class="block" v-model="row.key3" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
+                        </template>
+                        <template #key4="{row,index}">
+                            <el-date-picker class="block" v-model="row.key4" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
+                        </template>
+                        <template #key5="{row,index}">
+                            <el-input v-model="row.key5"/>
+                        </template>
+                        <template #action="{row,index}">
+                            <el-button size="small" type="danger">删除</el-button>
+                        </template>
+                    </HcTable>
+                </div>
+            </div>
+        </HcDialog>
     </HcPageLayout>
 </template>
 
 <script setup>
-import {ref} from "vue";
+import {ref, onUnmounted, nextTick} from "vue";
+import split from "split.js";
 
 //树节点被点击
 const treeNodeTap = ({node, data}) => {
@@ -158,15 +242,107 @@ const drawerClose = () => {
 }
 
 
+//弹窗
+const rowModal = ref(false)
+const formModel = ref({})
+
+// 初始化设置拖动分割线
+const splitvar = ref(null);
+const setSplitDom = () => {
+    try {
+        //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
+        splitvar.value = split([
+            '#settle-dialog-tree',
+            '#settle-dialog-table'
+        ], {
+            sizes: [20, 80],
+            minSize: [200, 900],
+        });
+    } catch (e) {
+        setTimeout(() => {
+            setSplitDom()
+        }, 500)
+    }
+}
+
+const tableColumn1 = [
+    {key: 'key1', name: '协议书编号'},
+    {key: 'key2', name: '结算协议书名称'},
+    {key: 'key3', name: '协议书补偿金额(元)'}
+]
+const tableData1 = 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 addRowClick = () => {
-
+    formModel.value = {}
+    rowModal.value = true
+    nextTick(() => {
+        setSplitDom()
+    })
 }
 
 //编辑
 const editRowClick = (row) => {
+    formModel.value = {}
+    rowModal.value = true
+    nextTick(() => {
+        setSplitDom()
+    })
+}
+
+//保存
+const rowModalSave = () => {
+
+}
+
+//关闭弹窗
+const rowModalClose = () => {
+    rowModal.value = false
+    formModel.value = {}
+}
+
+
+const editingModal = ref(false)
+const tableColumn2 = [
+    {key: 'key1', name: '期号'},
+    {key: 'key2', name: '开始日期'},
+    {key: 'key3', name: '结束日期'},
+    {key: 'key4', name: '报表打印日期'},
+    {key: 'key5', name: '备注'},
+    {key: 'action', name: '操作', width: '90', align: 'center'},
+]
+const tableData2 = 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 editingClick = () => {
+    editingModal.value = true
+}
+
+const editingModalSave = () => {
+    editingModal.value = false
+}
 
+const editingModalClose = () => {
+    editingModal.value = false
 }
+
+
+//销毁
+onUnmounted(() => {
+    if (splitvar.value) {
+        splitvar.value.destroy()
+    }
+})
 </script>
 
 <style lang="scss" scoped>