diff --git a/sgzb-ui/src/views/cost/csotSettlement/component/exportDialog.vue b/sgzb-ui/src/views/cost/csotSettlement/component/exportDialog.vue
new file mode 100644
index 00000000..c2d66d2e
--- /dev/null
+++ b/sgzb-ui/src/views/cost/csotSettlement/component/exportDialog.vue
@@ -0,0 +1,79 @@
+<template>
+    <!-- 批量导出月结明细弹框 -->
+    <div>
+        <el-dialog
+            title="明细导出"
+            append-to-body
+            :visible.sync="exportDialogVisible"
+            :before-close="handleCloseDialog"
+            width="30%"
+        >
+            <el-form :model="exportParams" label-width="120px">
+                <el-form-item label="导出月份">
+                    <el-date-picker
+                        v-model="exportParams.dateMonth"
+                        type="month"
+                        placeholder="请选择导出月份"
+                        value-format="yyyy-M"
+                    />
+                    <!-- 根据后台参数要求，是传递月份数字，还是 XXXX - XX 日期格式 -->
+                    <!-- value-format 可设置 M 或  yyyy-M-->
+                </el-form-item>
+                <el-form-item label="费用承担方">
+                    <el-checkbox-group v-model="exportParams.costBear">
+                        <el-checkbox label="01" name="01" />
+                        <el-checkbox label="03" name="03" />
+                    </el-checkbox-group>
+                </el-form-item>
+            </el-form>
+
+            <span slot="footer" class="dialog-footer">
+                <el-button size="mini" type="primary" @click="handleSubmit"
+                    >确 定</el-button
+                >
+                <el-button size="mini" @click="handleCloseDialog"
+                    >取 消</el-button
+                >
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        // 弹框显隐
+        exportDialogVisible: {
+            type: Boolean,
+            default: () => false,
+        },
+    },
+    data() {
+        return {
+            exportParams: {
+                dateMonth: '',
+                costBear: ['01', '03'],
+            },
+        }
+    },
+    methods: {
+        /** 关闭 */
+        handleCloseDialog() {
+            this.$emit('handleCloseDialog')
+        },
+        /** 确定 */
+        handleSubmit() {
+            this.$emit('handleSubmit', this.exportParams)
+        },
+    },
+    watch: {
+        exportDialogVisible: {
+            handler(newVla) {
+                if (!newVla) {
+                    this.exportParams.dateMonth = ''
+                }
+            },
+        },
+    },
+}
+</script>
diff --git a/sgzb-ui/src/views/cost/csotSettlement/component/finishAndDetails.vue b/sgzb-ui/src/views/cost/csotSettlement/component/finishAndDetails.vue
new file mode 100644
index 00000000..69bbd77f
--- /dev/null
+++ b/sgzb-ui/src/views/cost/csotSettlement/component/finishAndDetails.vue
@@ -0,0 +1,117 @@
+<template>
+    <!-- 完工结算和结算明细页面 -->
+    <div>
+        <PageHeader :pageContent="pageContent" @goBack="goBack" />
+        <el-row>
+            <el-col :span="8">领用单位：</el-col>
+            <el-col :span="8">工程名称：</el-col>
+        </el-row>
+        <FinishTable
+            :tableColumns="settleTableColumns"
+            :tableTitle="`设备结算清单`"
+            :isCostBear="true"
+        />
+        <FinishTable
+            :tableColumns="settleTableColumns"
+            :tableTitle="`设备结算清单`"
+            :isCostBear="true"
+        />
+        <FinishTable
+            :tableColumns="repairTableColumns"
+            :tableTitle="`设备维修清单`"
+            :isRepair="true"
+        />
+        <FinishTable
+            :tableColumns="noReturnTableColumns"
+            :tableTitle="`工机具未还赔偿清单`"
+        />
+        <FinishTable
+            :tableColumns="scrapTableColumns"
+            :tableTitle="`工机具报废赔偿清单`"
+        />
+    </div>
+</template>
+
+<script>
+import PageHeader from '@/components/pageHeader'
+import FinishTable from './finishTable.vue'
+export default {
+    components: {
+        PageHeader,
+        FinishTable,
+    },
+    props: {
+        pageContent: {
+            type: String,
+            default: () => '完工结算',
+        },
+    },
+    data() {
+        return {
+            // 结算清单配置项
+            settleTableColumns: [
+                { t_prop: '', t_label: '设备名称' },
+                { t_prop: '', t_label: '规格型号' },
+                { t_prop: '', t_label: '单位' },
+                { t_prop: '', t_label: '数量' },
+                { t_prop: '', t_label: '台班费单价（元/天）' },
+                { t_prop: '', t_label: '起租日期' },
+                { t_prop: 'date', t_label: '终止日期', t_slot: 't_date' },
+                { t_prop: '', t_label: '应结算天数' },
+                { t_prop: '', t_label: '应结算金额（元）' },
+                { t_prop: 'day', t_label: '调整天数', t_slot: 't_ipt' },
+                { t_prop: '', t_label: '实际结算天数' },
+                { t_prop: '', t_label: '实际结算金额（元）' },
+                { t_prop: '', t_label: '已入账金额（元）' },
+                { t_prop: '', t_label: '本次结算金额（元）' },
+            ],
+            // 维修清单配置项
+            repairTableColumns: [
+                { t_prop: '', t_label: '设备名称' },
+                { t_prop: '', t_label: '规格型号' },
+                { t_prop: '', t_label: '单位' },
+                { t_prop: '', t_label: '维修配件名称' },
+                { t_prop: '', t_label: '维修配件型号' },
+                { t_prop: '', t_label: '使用数量' },
+                { t_prop: '', t_label: '配件单价' },
+                { t_prop: '', t_label: '配件总价' },
+                { t_prop: '', t_label: '委外维修费用' },
+                { t_prop: '', t_label: '费用总价' },
+            ],
+            noReturnTableColumns: [
+                { t_prop: '', t_label: '设备名称' },
+                { t_prop: '', t_label: '规格型号' },
+                { t_prop: '', t_label: '单位' },
+                { t_prop: '', t_label: '设备编码' },
+                { t_prop: '', t_label: '未还数量' },
+                { t_prop: '', t_label: '赔偿单价' },
+                { t_prop: '', t_label: '赔偿金额' },
+            ],
+            scrapTableColumns: [
+                { t_prop: '', t_label: '设备名称' },
+                { t_prop: '', t_label: '规格型号' },
+                { t_prop: '', t_label: '单位' },
+                { t_prop: '', t_label: '设备编码' },
+                { t_prop: '', t_label: '报废数量' },
+                { t_prop: '', t_label: '赔偿单价' },
+                { t_prop: '', t_label: '赔偿金额' },
+            ],
+        }
+    },
+    methods: {
+        // 返回按钮 关闭当前页面
+        goBack() {
+            this.$emit('closeCurrPage')
+        },
+    },
+}
+</script>
+
+<style scoped>
+.el-row {
+    height: 32px;
+    line-height: 32px;
+    font-size: 16px;
+    font-weight: bold;
+}
+</style>
diff --git a/sgzb-ui/src/views/cost/csotSettlement/component/finishTable.vue b/sgzb-ui/src/views/cost/csotSettlement/component/finishTable.vue
new file mode 100644
index 00000000..2d3eae75
--- /dev/null
+++ b/sgzb-ui/src/views/cost/csotSettlement/component/finishTable.vue
@@ -0,0 +1,168 @@
+<template>
+    <!-- 完工结算和结算明细页面的表格组件 -->
+    <div style="margin-top: 60px">
+        <el-row class="table-title" type="flex">
+            <div class="batch-system-day" v-if="isCostBear && isEdit">
+                调整天数批量设置： <el-input style="width: 120px" />
+            </div>
+            <span class="repair-tip" v-if="isRepair"
+                >勾选需要赔偿的维修项目</span
+            >
+            <el-col :span="5" class="cost-bear">
+                <span>{{ isCostBear ? '费用承担方：03' : '' }}</span>
+                <span>合计：xxxxx元</span>
+            </el-col>
+            <el-col :span="14" class="title">{{ tableTitle }}</el-col>
+            <el-col :span="5" class="btn-item">
+                <el-button size="mini" type="warning" v-if="!isEdit"
+                    >导出</el-button
+                >
+                <el-button
+                    size="mini"
+                    type="primary"
+                    v-if="isCostBear || isRepair"
+                    @click="handleEdit"
+                    >{{ isEdit ? '取消编辑' : '编辑' }}</el-button
+                >
+                <el-button
+                    size="mini"
+                    type="success"
+                    v-if="!isEdit && isCostBear"
+                    >确认结算</el-button
+                >
+                <el-button
+                    size="mini"
+                    type="success"
+                    v-if="isEdit && isCostBear"
+                    >保存</el-button
+                >
+            </el-col>
+        </el-row>
+
+        <el-table border :data="tableData">
+            <el-table-column type="selection" v-if="isRepair" />
+            <el-table-column
+                align="center"
+                v-for="(t, index) in tableColumns"
+                :key="index"
+                :label="t.t_label"
+                :width="t.t_slot === 't_date' ? '180' : ''"
+            >
+                <template slot-scope="{ row }">
+                    <template v-if="t.t_slot && isEdit">
+                        <el-input
+                            v-if="t.t_slot === 't_ipt'"
+                            v-model="row[t.t_prop]"
+                            style="width: 80px"
+                        />
+                        <el-date-picker
+                            v-model="row[t.t_prop]"
+                            type="date"
+                            placeholder="选择日期"
+                            v-if="t.t_slot === 't_date'"
+                            style="width: 150px"
+                        />
+                    </template>
+                    <template v-else>
+                        {{ row[t.t_prop] }}
+                    </template>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        // 列表每一列配置项
+        tableColumns: {
+            type: Array,
+            default: () => [],
+        },
+        // 列表上方标题
+        tableTitle: {
+            type: String,
+            default: () => '',
+        },
+        // 是否显示费用承担发
+        isCostBear: {
+            type: Boolean,
+            default: () => false,
+        },
+        // 是否是维修单
+        isRepair: {
+            type: Boolean,
+            default: () => false,
+        },
+    },
+    data() {
+        return {
+            isEdit: false,
+            tableData: [{ date: '2020-12-12', day: 2 }],
+        }
+    },
+    methods: {
+        // 编辑按钮
+        handleEdit() {
+            this.isEdit = !this.isEdit
+        },
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.table-title {
+    position: relative;
+    min-height: 48px;
+    border: 1px solid #7e7e7e;
+    background: linear-gradient(to right, #b4b3b3, #edebeb);
+    align-items: center;
+    justify-content: space-around;
+
+    .cost-bear {
+        display: flex;
+        padding-left: 12px;
+        font-weight: bold;
+        color: red;
+
+        span {
+            width: 50%;
+        }
+    }
+
+    .title {
+        text-align: center;
+        font-size: 20px;
+        font-weight: bold;
+        letter-spacing: 4px;
+    }
+
+    .btn-item {
+        text-align: right;
+        padding-right: 12px;
+
+        .el-button {
+            padding: 6px 10px;
+        }
+    }
+
+    // 维修单提示
+    .repair-tip {
+        position: absolute;
+        left: 2px;
+        bottom: 2px;
+        color: red;
+        font-size: 12px;
+    }
+
+    // 批量调整天数设置
+    .batch-system-day {
+        position: absolute;
+        top: -50px;
+        right: 30px;
+        height: 36px;
+        line-height: 36px;
+    }
+}
+</style>
diff --git a/sgzb-ui/src/views/cost/csotSettlement/component/monthRecord.vue b/sgzb-ui/src/views/cost/csotSettlement/component/monthRecord.vue
new file mode 100644
index 00000000..74a61916
--- /dev/null
+++ b/sgzb-ui/src/views/cost/csotSettlement/component/monthRecord.vue
@@ -0,0 +1,236 @@
+<template>
+    <!-- 月结记录弹框 -->
+    <div>
+        <el-dialog
+            title="月结记录"
+            append-to-body
+            :visible.sync="monthRecordDialogVisible"
+            :before-close="handleCloseMonthRecordDialog"
+            width="80%"
+        >
+            <el-form inline :model="monthRecordParams" ref="monthRecordFormRef">
+                <el-form-item label="结算月份" prop="dateMonth">
+                    <el-date-picker
+                        v-model="monthRecordParams.dateMonth"
+                        type="monthrange"
+                        placeholder="请选择导出月份"
+                        range-separator="至"
+                        start-placeholder="开始月份"
+                        end-placeholder="结束月份"
+                        value-format="yyyy-MM"
+                    />
+                </el-form-item>
+                <el-form-item label="费用承担方" prop="costBear">
+                    <el-select v-model="monthRecordParams.costBear" clearable>
+                        <el-option
+                            v-for="item in costBearList"
+                            :key="item.id"
+                            :value="item.value"
+                            :label="item.label"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button
+                        type="primary"
+                        icon="el-icon-search"
+                        size="mini"
+                        @click="handleQuery"
+                        >查询</el-button
+                    >
+                    <el-button
+                        icon="el-icon-refresh"
+                        size="mini"
+                        @click="resetQuery"
+                        >重置</el-button
+                    >
+                    <el-button
+                        type="primary"
+                        plain
+                        size="mini"
+                        @click="handleBatchExport"
+                        >批量导出</el-button
+                    >
+                </el-form-item>
+            </el-form>
+
+            <el-table
+                border
+                :data="monthRecordList"
+                @selection-change="handleSelectionChange"
+            >
+                <el-table-column type="selection" align="center" />
+                <el-table-column
+                    prop="unit_name"
+                    align="center"
+                    label="单位名称"
+                />
+                <el-table-column
+                    prop="prod_name"
+                    align="center"
+                    label="工程名称"
+                />
+                <el-table-column prop="month" align="center" label="结算月份" />
+                <el-table-column
+                    prop="month"
+                    align="center"
+                    label="费用承担方"
+                />
+                <el-table-column prop="month" align="center" label="结算金额" />
+                <el-table-column prop="month" align="center" label="操作">
+                    <template slot-scope="{ row }">
+                        <el-button type="text" @click="previewDetails(row)"
+                            >明细</el-button
+                        >
+                        <el-button type="text" @click="exportDetails(row)"
+                            >导出明细表</el-button
+                        >
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <pagination
+                :total="monthRecordTotal"
+                :page.sync="monthRecordParams.pageNum"
+                :limit.sync="monthRecordParams.pageSize"
+                @pagination="getMonthRecordList"
+            />
+
+            <!-- 内层弹框 -->
+            <el-dialog
+                width="75%"
+                title="明细"
+                :visible.sync="innerVisible"
+                append-to-body
+                :before-close="handleCloseMInnerDialog"
+            >
+                <el-row :gutter="20" class="title-row">
+                    <el-col :span="12"> 领用单位： </el-col>
+                    <el-col :span="12" class="pl-col"> 月结月份： </el-col>
+                </el-row>
+                <el-row :gutter="20" class="title-row">
+                    <el-col :span="12"> 工程名称： </el-col>
+                    <el-col :span="12" class="pl-col" style="color: red">
+                        费用承担方： 01( 项目 ) / 03 ( 分包 )
+                    </el-col>
+                </el-row>
+
+                <el-table border>
+                    <el-table-column label="序号" align="center" />
+                    <el-table-column label="设备名称" align="center" />
+                    <el-table-column label="规格型号" align="center" />
+                    <el-table-column label="单位" align="center" />
+                    <el-table-column label="数量" align="center" />
+                    <el-table-column
+                        label="台班费单价 (元/天)"
+                        align="center"
+                    />
+                    <el-table-column label="开始日期" align="center" />
+                    <el-table-column label="结算日期" align="center" />
+                    <el-table-column label="结算天数" align="center" />
+                    <el-table-column label="结算金额" align="center" />
+                    <el-table-column label="本月暂记金额(元)" align="center" />
+                </el-table>
+            </el-dialog>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        monthRecordDialogVisible: {
+            type: Boolean,
+            default: () => false,
+        },
+    },
+    data() {
+        return {
+            // 费用承担方
+            costBearList: [
+                { id: 1, label: '全部', value: '' },
+                { id: 2, label: '01', value: '02' },
+                { id: 3, label: '03', value: '03' },
+            ],
+            // 查询参数
+            monthRecordParams: {
+                dateMonth: '',
+                costBear: '',
+                pageNum: 1,
+                pageSize: 10,
+            },
+            // 列表数据源
+            monthRecordList: [
+                {
+                    unit_name: 'xxxxx',
+                    prod_name: 'xxxxx',
+                    month: 'xxx',
+                    month: 'xxx',
+                },
+            ],
+            // 复选框勾选后数据
+            selectList: [],
+            // 内测弹框
+            innerVisible: false,
+            // 列表数量
+            monthRecordTotal: 1,
+        }
+    },
+    methods: {
+        /** 获取月结记录列表数据 */
+        async getMonthRecordList() {
+            // 调后台 Api 获取数据
+        },
+        /** 查询 */
+        handleQuery() {
+            this.getMonthRecordList()
+        },
+        /** 重置 */
+        resetQuery() {
+            this.resetForm('monthRecordFormRef')
+            this.getMonthRecordList()
+        },
+        /** 批量明细导出 */
+        handleBatchExport() {
+            if (this.selectList.length < 1) {
+                this.$message.error('请勾选需要导出的数据！')
+                return
+            }
+        },
+        /** 单个明细导出 */
+        exportDetails(row) {
+            console.log('导出--', row)
+        },
+        /** 列表勾选 */
+        handleSelectionChange(list) {
+            this.selectList = list
+        },
+        /** 关闭外侧弹框*/
+        handleCloseMonthRecordDialog() {
+            this.$emit('handleCloseMonthRecordDialog')
+        },
+        /** 关闭内测弹框 */
+        handleCloseMInnerDialog() {
+            this.innerVisible = false
+        },
+        /** 明细按钮 */
+        previewDetails() {
+            this.innerVisible = true
+        },
+    },
+    created() {
+        // this.getMonthRecordList()
+    },
+}
+</script>
+
+<style scoped>
+.title-row {
+    min-height: 38px;
+    line-height: 38px;
+    font-size: 16px;
+}
+.pl-col {
+    padding-left: 180px !important;
+}
+</style>
diff --git a/sgzb-ui/src/views/cost/csotSettlement/costApplyList.vue b/sgzb-ui/src/views/cost/csotSettlement/costApplyList.vue
index 9d425433..44d4d0b1 100644
--- a/sgzb-ui/src/views/cost/csotSettlement/costApplyList.vue
+++ b/sgzb-ui/src/views/cost/csotSettlement/costApplyList.vue
@@ -1,196 +1,202 @@
 <template>
+    <!-- 费用结算页面 -->
     <div class="app-container" id="costApplyList">
-        <el-form
-            :model="queryParams"
-            ref="queryForm"
-            size="small"
-            :inline="true"
-            v-show="showSearch"
-            label-width="80px"
-        >
-            <el-form-item label="结算单位" prop="unitId">
-                <el-select
-                    v-model="queryParams.unitId"
-                    placeholder="请选择往来单位"
-                    clearable
-                    filterable
-                >
-                    <el-option
-                        v-for="item in unitList"
-                        :key="item.unitId"
-                        :label="item.unitName"
-                        :value="item.unitId"
-                    ></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="结算工程" prop="projectId">
-                <el-select
-                    v-model="queryParams.projectId"
-                    placeholder="请选择工程名称"
-                    clearable
-                    filterable
-                >
-                    <el-option
-                        v-for="item in projectList"
-                        :key="item.projectId"
-                        :label="item.projectName"
-                        :value="item.projectId"
-                    ></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="结算状态" prop="sltStatus">
-                <el-select
-                    v-model="queryParams.sltStatus"
-                    placeholder="请选择结算状态"
-                    clearable
-                    filterable
-                >
-                    <el-option
-                        v-for="item in statusList"
-                        :key="item.id"
-                        :label="item.name"
-                        :value="item.id"
-                    ></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item>
-                <el-button
-                    type="primary"
-                    icon="el-icon-search"
-                    size="mini"
-                    @click="handleQuery"
-                    >查询</el-button
-                >
-                <el-button
-                    icon="el-icon-refresh"
-                    size="mini"
-                    @click="resetQuery"
-                    >重置</el-button
-                >
-                <el-button
-                    type="primary"
-                    plain
-                    size="mini"
-                    @click="handleApplyList"
-                    >批量结算</el-button
-                >
-            </el-form-item>
-        </el-form>
-
-        <el-table
-            v-loading="loading"
-            :data="agreementList"
-            @selection-change="handleSelectionChange"
-        >
-            <el-table-column type="selection" width="55" align="center" />
-            <!-- <el-table-column
-                label="序号"
-                align="center"
-                width="80"
-                type="index"
+        <template v-if="isHome">
+            <el-form
+                :model="queryParams"
+                ref="queryForm"
+                size="small"
+                :inline="true"
+                v-show="showSearch"
+                label-width="80px"
             >
-                <template scope="scope">
-                    <span>{{
-                        (queryParams.pageNum - 1) * 10 + scope.$index + 1
-                    }}</span>
-                </template>
-            </el-table-column> -->
-            <el-table-column
-                align="center"
-                label="序号"
-                type="index"
-                :index="
-                    indexContinuation(queryParams.pageNum, queryParams.pageSize)
-                "
-            />
-            <el-table-column
-                label="协议编号"
-                align="center"
-                prop="agreementCode"
-                :show-overflow-tooltip="true"
-            />
-            <!-- <el-table-column label="合同编号" align="center" prop="contractCode" :show-overflow-tooltip="true" />
-      <el-table-column label="附件图片" align="center" prop="fileName" :show-overflow-tooltip="true" />
-      <el-table-column label="签订日期" align="center" prop="signTime" :show-overflow-tooltip="true" /> -->
-            <el-table-column
-                label="结算单位"
-                align="center"
-                prop="unitName"
-                :show-overflow-tooltip="true"
-            />
-            <el-table-column
-                label="结算工程"
-                align="center"
-                prop="projectName"
-                :show-overflow-tooltip="true"
-            />
-            <el-table-column
-                label="合计费用"
-                align="center"
-                prop="cost"
-                :show-overflow-tooltip="true"
-            />
-            <el-table-column
-                label="结算状态"
-                align="center"
-                prop="sltStatus"
-                :show-overflow-tooltip="true"
-            >
-                <template slot-scope="scope">
-                    <span v-if="scope.row.sltStatus == '1'">未结算</span>
-                    <span v-if="scope.row.sltStatus == '2'">已结算</span>
-                    <span v-if="scope.row.sltStatus == '3'">待审核</span>
-                </template>
-            </el-table-column>
-            <!-- <el-table-column label="租赁期限(天)" align="center" prop="leaseDay" :show-overflow-tooltip="true" />
-      <el-table-column label="授权人" align="center" prop="authPerson" :show-overflow-tooltip="true" />
-      <el-table-column label="联系电话 " align="center" prop="phone" :show-overflow-tooltip="true" />
-      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" /> -->
-            <el-table-column
-                label="操作"
-                align="center"
-                width="300"
-                class-name="small-padding fixed-width"
-            >
-                <template slot-scope="scope">
-                    <el-button
-                        size="mini"
-                        type="primary"
-                        icon="el-icon-edit"
-                        @click="handleApply(scope.row)"
-                        >结算申请</el-button
+                <el-form-item label="结算单位" prop="unitId">
+                    <el-select
+                        v-model="queryParams.unitId"
+                        placeholder="请选择往来单位"
+                        clearable
+                        filterable
                     >
-                    <!-- <el-button
-            size="mini"
-            type="danger" 
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >撤销申请</el-button> -->
-                </template>
-            </el-table-column>
-        </el-table>
+                        <el-option
+                            v-for="item in unitList"
+                            :key="item.unitId"
+                            :label="item.unitName"
+                            :value="item.unitId"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="结算工程" prop="projectId">
+                    <el-select
+                        v-model="queryParams.projectId"
+                        placeholder="请选择工程名称"
+                        clearable
+                        filterable
+                    >
+                        <el-option
+                            v-for="item in projectList"
+                            :key="item.projectId"
+                            :label="item.projectName"
+                            :value="item.projectId"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="结算状态" prop="sltStatus">
+                    <el-select
+                        v-model="queryParams.sltStatus"
+                        placeholder="请选择结算状态"
+                        clearable
+                        filterable
+                    >
+                        <el-option
+                            v-for="item in statusList"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button
+                        type="primary"
+                        icon="el-icon-search"
+                        size="mini"
+                        @click="handleQuery"
+                        >查询</el-button
+                    >
+                    <el-button
+                        icon="el-icon-refresh"
+                        size="mini"
+                        @click="resetQuery"
+                        >重置</el-button
+                    >
+                    <el-button
+                        type="primary"
+                        plain
+                        size="mini"
+                        @click="handleBatchExport"
+                        >批量导出月结明细表</el-button
+                    >
+                </el-form-item>
+            </el-form>
 
-        <pagination
-            v-show="total > 0"
-            :total="total"
-            :page.sync="queryParams.pageNum"
-            :limit.sync="queryParams.pageSize"
-            @pagination="getList"
-        />
+            <el-table
+                v-loading="loading"
+                :data="agreementList"
+                border
+                @selection-change="handleSelectionChange"
+            >
+                <el-table-column type="selection" width="55" align="center" />
+                <el-table-column
+                    align="center"
+                    label="序号"
+                    type="index"
+                    :index="
+                        indexContinuation(
+                            queryParams.pageNum,
+                            queryParams.pageSize,
+                        )
+                    "
+                />
+                <el-table-column
+                    label="协议编号"
+                    align="center"
+                    prop="agreementCode"
+                    show-overflow-tooltipp
+                />
+
+                <el-table-column
+                    label="结算单位"
+                    align="center"
+                    prop="unitName"
+                    show-overflow-tooltip
+                />
+                <el-table-column
+                    label="结算工程"
+                    align="center"
+                    prop="projectName"
+                    show-overflow-tooltip
+                />
+                <el-table-column
+                    label="合计费用"
+                    align="center"
+                    prop="cost"
+                    show-overflow-tooltip
+                />
+                <el-table-column
+                    label="结算状态"
+                    align="center"
+                    prop="sltStatus"
+                    show-overflow-tooltip
+                >
+                    <template slot-scope="scope">
+                        <span v-if="scope.row.sltStatus == '1'">未结算</span>
+                        <span v-if="scope.row.sltStatus == '2'">已结算</span>
+                        <span v-if="scope.row.sltStatus == '3'">待审核</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" align="center">
+                    <template slot-scope="{ row }">
+                        <el-button
+                            size="mini"
+                            type="primary"
+                            style="padding: 5px 10px"
+                            @click="handleMonthRecord(row)"
+                            >月结记录</el-button
+                        >
+                        <el-button
+                            size="mini"
+                            type="primary"
+                            style="padding: 5px 10px"
+                            @click="handleFinishCostAndDetails(row)"
+                            >{{
+                                row.status == 2 ? '结算明细' : '完工结算'
+                            }}</el-button
+                        >
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <pagination
+                v-show="total > 0"
+                :total="total"
+                :page.sync="queryParams.pageNum"
+                :limit.sync="queryParams.pageSize"
+                @pagination="getList"
+            />
+
+            <!-- 批量导出月结明细 -->
+            <ExportDialog
+                :exportDialogVisible="exportDialogVisible"
+                @handleCloseDialog="handleCloseDialog"
+                @handleSubmit="handleSubmit"
+            />
+            <!-- 月结记录弹框 -->
+            <MonthRecord
+                :monthRecordDialogVisible="monthRecordDialogVisible"
+                @handleCloseMonthRecordDialog="handleCloseMonthRecordDialog"
+            />
+        </template>
+        <template v-else>
+            <FinishAndDetails @closeCurrPage="closeCurrPage" />
+        </template>
     </div>
 </template>
 
 <script>
-import {
-    getAgreementList,
-    getUnitList,
-    getProjectList,
-} from '@/api/claimAndRefund/receive'
+import { getUnitList, getProjectList } from '@/api/claimAndRefund/receive'
 import { getSltAgreementInfo } from '@/api/cost/cost'
 
+import ExportDialog from './component/exportDialog.vue'
+import MonthRecord from './component/monthRecord.vue'
+import FinishAndDetails from './component/finishAndDetails.vue'
+
 export default {
     name: 'CostApplyList',
-    dicts: ['sys_normal_disable'],
+    components: {
+        ExportDialog,
+        MonthRecord,
+        FinishAndDetails,
+    },
     data() {
         return {
             // 遮罩层
@@ -232,66 +238,12 @@ export default {
                 unitId: '',
                 projectId: '',
             },
-            // 表单参数
-            form: {},
-            //图片上传
-            uploadHeader: process.env.VUE_APP_BASE_API,
-            imageUrl: '',
-            imageName: '',
-            fileList: [],
-            field101fileList: [],
-            dialogImageUrl: '',
-            dialogVisible: false,
-            //上传地址
-            // uploadUrl:'http://192.168.0.14:21624/system',//线上服务器地址+system
-            // uploadUrl:'http://112.29.103.165:21626/system',//线上服务器地址+system
-            uploadUrl: process.env.VUE_APP_BASE_API + '/system', // 上传的图片服务器地址
-            // 表单校验
-            rules: {
-                contractCode: [
-                    {
-                        required: true,
-                        message: '合同编号不能为空',
-                        trigger: 'blur',
-                    },
-                ],
-                signTime: [
-                    {
-                        required: true,
-                        message: '签订日期不能为空',
-                        trigger: 'blur',
-                    },
-                ],
-                unitName: [
-                    {
-                        required: true,
-                        message: '往来单位不能为空',
-                        trigger: 'blur',
-                    },
-                ],
-                projectName: [
-                    {
-                        required: true,
-                        message: '工程名称不能为空',
-                        trigger: 'blur',
-                    },
-                ],
-            },
-            peopleOpen: false,
-            noticeOpen: false,
-            nform: {
-                notice: '',
-            },
-            nrules: {
-                notice: [
-                    {
-                        required: true,
-                        message: '通知内容不能为空',
-                        trigger: 'blur',
-                    },
-                ],
-            },
-            deptName: undefined,
+            // 批量导出月结明细弹框
+            exportDialogVisible: false,
+            // 月结记录弹框
+            monthRecordDialogVisible: false,
+            // 是否显示主页
+            isHome: true,
         }
     },
     created() {
@@ -364,31 +316,38 @@ export default {
             this.multiple = !selection.length
         },
 
-        /** 删除按钮操作 */
-        handleDelete(row) {
-            // const agreementId = row.agreementId;
-            // let param = {
-            //   agreementId:row.agreementId+''
-            // }
-            // this.$modal.confirm('是否确认删除该数据项？').then(function() {
-            //   return removeAgreement(param);
-            // }).then(() => {
-            //   this.getList();
-            //   this.$modal.msgSuccess("删除成功");
-            // }).catch(() => {});
+        /** 批量导出月结明细表 */
+        handleBatchExport() {
+            console.log('批量导出月结明细表')
+
+            this.exportDialogVisible = true
         },
-        /** 导出按钮操作 */
-        handleExport() {
-            // this.download('material/agreementInfo/export', {
-            //   ...this.queryParams
-            // }, `协议_${new Date().getTime()}.xlsx`)
+        /** 关闭弹框 */
+        handleCloseDialog() {
+            this.exportDialogVisible = false
+        },
+        /** 确定按钮 */
+        handleSubmit(form) {
+            console.log(form, '子组件传递的数据---')
+            // 拿到参数走导出逻辑 导出成功则关闭弹框
+            this.exportDialogVisible = false
+        },
+        /** 月结记录 */
+        handleMonthRecord(row) {
+            this.monthRecordDialogVisible = true
+        },
+        /** 完工结算  结算明细*/
+        handleFinishCostAndDetails() {
+            this.isHome = false
+        },
+        /** 关闭月结记录弹框 */
+        handleCloseMonthRecordDialog() {
+            this.monthRecordDialogVisible = false
+        },
+        /** 关闭完工结算或结算明细页面 */
+        closeCurrPage() {
+            this.isHome = true
         },
     },
 }
 </script>
-<style lang="scss" scoped>
-::v-deep.el-table .fixed-width .el-button--mini {
-    width: 80px !important;
-    margin-bottom: 10px;
-}
-</style>
diff --git a/sgzb-ui/vue.config.js b/sgzb-ui/vue.config.js
index 9c70ebb5..ce3fccef 100644
--- a/sgzb-ui/vue.config.js
+++ b/sgzb-ui/vue.config.js
@@ -47,7 +47,7 @@ module.exports = {
         // target: `http://10.40.92.74:8080`,//旭/
         // target: `http://10.40.92.138:28080`, //帅
         // target: `http://10.40.92.253:28080`, //福
-        // target: `http://192.168.2.116:39080`, //跃
+        target: `http://192.168.2.120:39080`, //跃
 
         //******** 注意事项  ********* */
         //1.全局替换qrUrl二维码扫码提供的网址-发布服务器的地址target;