结算周期接口调

src/api/modules/settle/index.js

@@ -0,0 +1,35 @@
+import { httpApi } from '../../request/httpApi'
+export default {
+        //获取周期列表
+        async getPage(form, msg = true) {
+            return httpApi({
+                url: '/api/blade-land/settlementInterval/getList',
+                method: 'get',
+                params: form,
+            }, msg)
+        },
+        //新增或修改周期
+        async addOrUpdate(form, msg = true) {
+            return httpApi({
+                url: '/api/blade-land/settlementInterval/addOrUpdate',
+                method: 'post',
+                data: form,
+            }, msg)
+        },
+        //删除周期
+        async delete(form, msg = true) {
+            return httpApi({
+                url: '/api/blade-land/settlementInterval/delete',
+                method: 'get',
+                params: form,
+            }, msg)
+        },
+        //结算查询补偿协议
+        async getAgreementList(form, msg = true) {
+            return httpApi({
+                url: '/api/blade-land/compensationInfo/getAgreementList',
+                method: 'get',
+                params: form,
+            }, msg)
+        },
+}

src/views/settle/index.vue

@@ -3,174 +3,216 @@
         <template #left>
             <div class="hc-layout-tree-box">
                 <el-scrollbar>
-                    <HcTreeData @nodeTap="treeNodeTap"/>
+                    <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 v-model="searchForm.type" block clearable placeholder="补偿类型" size="large" @change="changType">
+                        <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 v-model="searchForm.number" block clearable placeholder="计量期" size="large">
+                        <el-option v-for="item in numberOptions" :key="item.id" :label="item.number" :value="item.number" />
                     </el-select>
                 </div>
                 <div class="w-52 ml-2">
-                    <el-input v-model="searchForm.queryValue" clearable placeholder="请输入名称进行查询" size="large"/>
+                    <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"/>
+                    <el-button type="primary" size="large" @click="searchClick">
+                        <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 @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>
+                <el-button size="large" type="primary" hc-btn @click="addRowClick">
+                    新增结算
+                </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>
-            <HcTable :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelectionChange">
-                <template #key3="{row,index}">
-                    <span class="text-blue text-hover">{{row.key3}}</span>
+            <HcTable :column="tableColumn" :datas="tableData" :loading="tableLoading" is-check @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 #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"/>
+                <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"/>
+                        <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="title">
+                                结算周期
+                            </div>
                             <div class="cycle-box">
                                 <el-scrollbar>
-                                    <div class="item">第一期</div>
-                                    <div class="item">第一期</div>
-                                    <div class="item">第一期</div>
-                                    <div class="item">第一期</div>
+                                    <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="title">
+                                结算报表名称
+                            </div>
                             <div class="cycle-box">
                                 <el-scrollbar>
-                                    <div class="item">封面</div>
-                                    <div class="item">补偿结算表</div>
-                                    <div class="item">补偿明细表</div>
-                                    <div class="item">面积统计明细表</div>
+                                    <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>
+                            <el-button type="primary" hc-btn size="large" @click="drawerClose">
+                                取 消 查 阅
+                            </el-button>
                         </div>
                     </div>
                 </div>
             </div>
         </HcDrawer>
 
-        <!--新增结算单-->
-        <HcDialog isToBody bgColor="white" isTable widths="80%" title="新增结算单" :padding="false" :show="rowModal" @save="rowModalSave" @close="rowModalClose">
+        <!-- 新增结算单 -->
+        <HcDialog is-to-body bg-color="white" is-table 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">
+                <div id="settle-dialog-tree" class="hc-settle-dialog-tree">
                     <el-scrollbar>
-                        <HcTreeData :isMenu="false" @nodeTap="treeNodeTap"/>
+                        <HcTreeData :is-menu="false" @nodeTap="treeNodeTap1" />
                     </el-scrollbar>
                 </div>
-                <div class="hc-settle-dialog-table" id="settle-dialog-table">
+                <div id="settle-dialog-table" class="hc-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"/>
+                        <div class="w-32 ml-2">
+                            <el-select v-model="searchForm1.type" block clearable placeholder="补偿类型" size="large" @change="changType">
+                                <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"/>
+                        <div class="w-32">
+                            <el-select v-model="searchForm1.number" block clearable placeholder="计量期" size="large">
+                                <el-option v-for="item in numberOptions" :key="item.id" :label="item.number" :value="item.number" />
                             </el-select>
                         </div>
                         <div class="w-52 ml-2">
-                            <el-input v-model="searchForm.queryValue" clearable placeholder="请输入名称进行查询" size="large"/>
+                            <el-input v-model="searchForm1.name" clearable placeholder="请输入名称进行查询" size="large" />
                         </div>
                         <div class="ml-4">
-                            <el-button type="primary" @click="searchClick" size="large">
-                                <HcIcon name="search-2"/>
+                            <el-button type="primary" size="large" @click="searchClick1">
+                                <HcIcon name="search-2" />
                                 <span>搜索</span>
                             </el-button>
                         </div>
                     </div>
                     <div class="dialog-table-body">
-                        <HcTable :column="tableColumn1" :datas="tableData1" isCheck @selection-change="tableSelectionChange"/>
+                        <HcTable :column="tableColumn1" :datas="tableData1" is-check @selection-change="tableSelectionChange" />
                     </div>
                 </div>
             </div>
         </HcDialog>
 
-        <!--结算周期编辑-->
-        <HcDialog isToBody bgColor="white" isTable widths="80%" title="编辑结算周期" :show="editingModal" @save="editingModalSave" @close="editingModalClose">
+        <!-- 结算周期编辑 -->
+        <HcDialog is-to-body bg-color="white" is-table 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="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 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"/>
+                        <el-button type="primary" size="large" @click="addInRow">
+                            <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"/>
+                    <HcTable :is-index="false" :column="tableColumn2" :datas="tableData2">
+                        <template #number="{ row, index }">
+                            <el-input v-model="row.number" />
                         </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 #startDate="{ row, index }">
+                            <el-date-picker v-model="row.startDate" class="block" 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 #endDate="{ row, index }">
+                            <el-date-picker v-model="row.endDate" class="block" 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 #printDate="{ row, index }">
+                            <el-date-picker v-model="row.printDate" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
                         </template>
-                        <template #key5="{row,index}">
-                            <el-input v-model="row.key5"/>
+                        <template #remark="{ row, index }">
+                            <el-input v-model="row.remark" />
                         </template>
-                        <template #action="{row,index}">
-                            <el-button size="small" type="danger">删除</el-button>
+                        <template #action="{ row, index }">
+                            <el-button size="small" type="danger" :loading="delInLoad" @click="delInRow(row, index)">
+                                删除
+                            </el-button>
                         </template>
                     </HcTable>
                 </div>
@@ -180,28 +222,35 @@
 </template>
 
 <script setup>
-import {ref, onUnmounted, nextTick} from "vue";
-import split from "split.js";
-
+import { nextTick, onUnmounted, ref } from 'vue'
+import split from 'split.js'
+import settleApi from '~api/settle/index.js'
+import { arrToId, getArrValue } from 'js-fast-way'
+import { useAppStore } from '~src/store'
+const useAppState = useAppStore()
+const projectId = ref(useAppState.getProjectId)
 //树节点被点击
-const treeNodeTap = ({node, data}) => {
+const treeNodeTap = ({ node, data }) => {
 
 }
 
 //搜索表单
 const searchForm = ref({
     projectType: null, queryValue: null, startTime: null, endTime: null,
-    current: 1, size: 20, total: 0
+    current: 1, size: 20, total: 0,
 })
 
 //搜索
 const searchClick = () => {
-    searchForm.value.current = 1;
+    searchForm.value.current = 1
     getTableData()
 }
-
+const searchClick1 = () => {
+    searchForm1.value.current = 1
+    getTableData1()
+}
 //分页被点击
-const pageChange = ({current, size}) => {
+const pageChange = ({ current, size }) => {
     searchForm.value.current = current
     searchForm.value.size = size
     getTableData()
@@ -210,17 +259,17 @@ const pageChange = ({current, size}) => {
 //获取数据
 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'},
+    { 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: '征地补偿'},
+    { 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 = () => {
 
@@ -247,17 +296,17 @@ const rowModal = ref(false)
 const formModel = ref({})
 
 // 初始化设置拖动分割线
-const splitvar = ref(null);
+const splitvar = ref(null)
 const setSplitDom = () => {
     try {
         //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
         splitvar.value = split([
             '#settle-dialog-tree',
-            '#settle-dialog-table'
+            '#settle-dialog-table',
         ], {
             sizes: [20, 80],
             minSize: [200, 900],
-        });
+        })
     } catch (e) {
         setTimeout(() => {
             setSplitDom()
@@ -266,21 +315,42 @@ const setSplitDom = () => {
 }
 
 const tableColumn1 = [
-    {key: 'key1', name: '协议书编号'},
-    {key: 'key2', name: '结算协议书名称'},
-    {key: 'key3', name: '协议书补偿金额(元)'}
+    { key: 'number', name: '协议书编号' },
+    { key: 'name', name: '结算协议书名称' },
+    { key: 'allMoney', 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: '征地补偿'},
+    { 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 searchForm1 = ref({})
+const tableLoading1 = ref(false)
+const getTableData1 = async () => {
+    tableLoading1.value = true
+    const { error, code, data } = await settleApi.getAgreementList({
+        projectId: projectId.value,
+        ...searchForm1.value,
+    })
+    tableLoading1.value = false
+    if (!error && code === 200) {
+        tableData1.value = getArrValue(data)
+      
+    } else {
+        tableData1.value = []
+     
+    }
+}
+const treeNodeTap1 = ({ node, data }) => {
+    searchForm1.value.areaId = data.id
+    getTableData1()
+}
 //新增
 const addRowClick = () => {
     formModel.value = {}
     rowModal.value = true
+    getTableData1()
     nextTick(() => {
         setSplitDom()
     })
@@ -309,29 +379,97 @@ const rowModalClose = () => {
 
 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'},
+    { key: 'number', name: '期号' },
+    { key: 'startDate', name: '开始日期' },
+    { key: 'endDate', name: '结束日期' },
+    { key: 'printDate', name: '报表打印日期' },
+    { key: 'remark', 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 getTableData2 = async () => {
+    tableLoading.value = true
+    const { error, code, data } = await settleApi.getPage({
+        projectId: projectId.value,
+        type:searchForm.value.type,
+    })
+    tableLoading.value = false
+    if (!error && code === 200) {
+        tableData2.value = getArrValue(data)
+      
+    } else {
+        tableData2.value = []
+     
+    }
+}
+//获取期数
+const numberOptions = ref([])
+const changType = async (val)=>{
+    searchForm.value.number = ''
+    const { error, code, data } = await settleApi.getPage({
+        projectId: projectId.value,
+        type:val,
+    })
+    tableLoading.value = false
+    if (!error && code === 200) {
+        numberOptions.value = getArrValue(data)
+      
+    } else {
+        numberOptions.value = []
+     
+    }
+}
 //编辑结算周期
 const editingClick = () => {
-    editingModal.value = true
+    if (searchForm.value.type) {
+        editingModal.value = true
+        getTableData2()
+    } else {
+        window.$message.warning('请选择补偿类型')
+    }
+ 
 }
-
-const editingModalSave = () => {
-    editingModal.value = false
+//添加
+const addInRow = ()=>{
+    tableData2.value.push({})
 }
 
+const editingModalSave = async () => {
+    tableData2.value.forEach((ele)=>{
+        ele.type = searchForm.value.type
+        ele.projectId = projectId.value
+    })
+    if (tableData2.value.length > 0) {
+        const { error, code, data, msg } = await settleApi.addOrUpdate({
+            list: tableData2.value,
+        })
+        if (!error && code === 200) {
+            window.$message.success(msg)
+            editingModal.value = false
+        } 
+    } else {
+        window.$message.warning('请先填数据')
+    }
+  
+      
+
+}
+//删除结算周期
+const delInLoad = ref(false)
+const delInRow = async (row, index)=>{
+    delInLoad.value = true 
+    const { error, code, data, msg } = await settleApi.delete({
+        id: row.id,
+    })
+    delInLoad.value = false
+    if (!error && code === 200) {
+      window.$message.success(msg)
+        tableData2.value.splice(index, 1)
+    } 
+    
+}
 const editingModalClose = () => {
     editingModal.value = false
 }