diff --git a/src/api/crm/project/settlement/index.ts b/src/api/crm/project/settlement/index.ts
index 3e489acdf..16ee4f2a4 100644
--- a/src/api/crm/project/settlement/index.ts
+++ b/src/api/crm/project/settlement/index.ts
@@ -3,27 +3,36 @@ import request from '@/config/axios'
 // 项目利润结算 VO
 export interface ProjectSettlementVO {
   id: number; // 结算记录ID
-  projectId: number; // 关联项目ID
+  projectId: number; // 项目ID
+  projectName: string; // 项目名称
+  piles: string; // 枪数
   settlementPeriod: string; // 结算周期(如:2023-Q1)
   period: number; // 总期数
-  settlementDate: Date; // 结算日期
-  actualRevenue: number; // 实际营收
-  governmentSubsidy: number; // 政府补贴收入
-  otherIncome: number; // 其他项目收入
-  totalIncome: number; // 总收入
-  incomeRemark: string; // 收入备注
-  electricityCost: number; // 电费成本
-  venueRent: number; // 场地租金
-  venueDeposit: number; // 项目押金
-  projectPromotion: number; // 项目推介费
-  equipmentUpgrade: number; // 设备更新购置费
-  managementCost: number; // 管理费用
-  taxCost: number; // 税收
+  startDate: string | Date | number[]; // 结算开始时间
+  endDate: string | Date; // 结算结束时间
+  settlementDate: string | Date | number[]; // 结算日期
+  previousLossCarryover: number; // 上期亏损转结
+  grossProfit: number; // 毛利润
   netProfit: number; // 净利润
-  expenseRemark: string; // 支出备注
   settlementStatus: number; // 结算状态
-  proofAttachment: string; // 结算凭证附件
-  remark: string; // 结算备注
+  actualRevenue?: number; // 实际营收
+  governmentSubsidy?: number; // 政府补贴收入
+  otherIncome?: number; // 其他项目收入
+  totalIncome?: number; // 总收入
+  incomeRemark?: string; // 收入备注
+  electricityCost?: number; // 电费成本
+  venueRent?: number; // 场地租金
+  venueDeposit?: number; // 项目押金
+  projectPromotion?: number; // 项目推介费
+  equipmentUpgrade?: number; // 设备更新购置费
+  managementCost?: number; // 管理费用
+  taxCost?: number; // 税收
+  otherExpenses?: number; // 其他支出
+  totalExpenses?: number; // 总支出
+  shareAmount?: number; // 分成金额
+  expenseRemark?: string; // 支出备注
+  proofAttachment?: string; // 结算凭证附件
+  remark?: string; // 结算备注
 }
 
 // 查询项目利润结算分页
@@ -55,3 +64,8 @@ export const deleteProjectSettlement = async (id: number) => {
 export const exportProjectSettlement = async (params: any) => {
   return await request.download({ url: `/crm/project-settlement/export-excel`, params })
 }
+
+// 导出项目利润结算明细 Excel
+export const exportProjectSettlementDetail = async (params: any) => {
+  return await request.download({ url: `/crm/receivable/export-settlement-excel`, params })
+}
diff --git a/src/components/ElQuarterPicker/index.vue b/src/components/ElQuarterPicker/index.vue
new file mode 100644
index 000000000..7fc27d54f
--- /dev/null
+++ b/src/components/ElQuarterPicker/index.vue
@@ -0,0 +1,399 @@
+<template>
+  <div class="el-quarter-picker">
+    <el-popover
+      v-model:visible="visible"
+      :disabled="!canPopover"
+      :tabindex="null"
+      placement="bottom-start"
+      transition="el-zoom-in-top"
+      width="300"
+      trigger="click">
+ 
+  <div class="el-date-picker el-quarter-popover-content">
+        <div class="el-picker-panel__body">
+          <div class="el-date-picker__header el-date-picker__header--bordered" style="margin:0px; line-height:30px">
+            <button
+              type="button"
+              @click="clickLast"
+              aria-label="前一年"
+              class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"></button>
+            <span role="button" class="el-date-picker__header-label" @click="clickYear">{{ title }}</span>
+            <button
+              type="button"
+              @click="clickNext"
+              aria-label="后一年"
+              class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"></button>
+          </div>
+          <div class="el-picker-panel__content" style="margin:0px; width:100%">
+            <table class="el-month-table" style="">
+              <tbody>
+              <tr v-for="line in lineCount" :key="line">
+                <td v-for="index in (line * 4 <= viewList.length ? 4 : viewList.length - (line - 1) * 4)" :key="index" :class="{ today: viewList[(line - 1) * 4 + index - 1].current, current: viewList[(line - 1) * 4 + index - 1].active }">
+                  <div><a class="cell" @click="clickItem(viewList[(line - 1) * 4 + index - 1])">{{ viewList[(line - 1) * 4 + index - 1].label }}</a></div>
+                </td>
+              </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+ 
+      <template #reference>
+<el-input
+        @change="changeText"
+        @mouseenter="mouseEnter"
+        @mouseleave="mouseLeave"
+        :placeholder="placeholder"
+        v-model="text"
+        :size="size"
+        :readonly="!canEdit"
+        :disabled="disabled">
+        <template #prefix>
+<i  class="el-input__icon el-icon-date"></i>
+</template>
+        <template #suffix>
+<i  class="el-input__icon el-icon-circle-close" v-show="showClear" style="cursor:pointer" @click.stop="clear"></i>
+</template>
+      </el-input>
+</template>
+    </el-popover>
+  </div>
+</template>
+ 
+<script>
+export default {
+  name: 'ElQuarterPicker',
+  props: {
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: ''
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    format: {
+      type: String,
+      default: 'yyyy年第Q季度'
+    },
+    valueFormat: {
+      type: String,
+      default: 'yyyy-qq'
+    },
+    modelValue: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      showClear: false, // 控制清空按钮展示
+      canEdit: true, // 是否可编辑
+      canPopover: true, // 选择器弹出是否可用
+      text: '', // 文本框值
+      viewType: 1, // 视图类型，1季度，2年度
+      viewYear: 0, // 当前年份
+      viewList: [], // 数据列表
+      lineCount: 0, // 数据行数
+      title: '', // 选择器标题
+      data: [0, 0] // 当前选择年度-季度
+    }
+  },
+  watch: {
+    modelValue(val) {
+      this.changeValue(val)
+    },
+    readonly(val) {
+      this.canEdit = !val && this.editable
+      this.canPopover = !this.disabled && !val
+    },
+    editable(val) {
+      this.canEdit = !this.readonly && val
+    },
+    disabled(val) {
+      this.canPopover = !val && !this.readonly
+    }
+  },
+  mounted() {
+    this.changeValue(this.modelValue)
+
+    // 设置文本框是否可编辑
+    this.canEdit = !this.readonly && this.editable
+    this.canPopover = !this.disabled && !this.readonly
+
+    // 监听按键(上下左右键可以切换季度)
+    document.onkeydown = (event) => {
+      if (this.visible) {
+        const data = [this.data[0], this.data[1]]
+        if (data[0] < 1 || data[1] < 1) {
+          // 以当前季度为标准
+          const curDate = new Date()
+          data[0] = curDate.getFullYear()
+          data[1] = parseInt(curDate.getMonth() / 3) + 1
+        }
+        if (event.code === 'ArrowLeft') {
+          // 上一个季度
+          if (data[1] === 1) {
+            data[0] = data[0] - 1
+            data[1] = 4
+          } else {
+            data[1] = data[1] - 1
+          }
+        } else if (event.code === 'ArrowRight') {
+          // 下一个季度
+          if (data[1] === 4) {
+            data[0] = data[0] + 1
+            data[1] = 1
+          } else {
+            data[1] = data[1] + 1
+          }
+        } else if (event.code === 'ArrowUp') {
+          // 上一年季度
+          data[0] = data[0] - 1
+        } else if (event.code === 'ArrowDown') {
+          // 下一年季度
+          data[0] = data[0] + 1
+        } else {
+          return
+        }
+
+        // 超过年限的不处理
+        if (data[0] < 1000 || data[0] > 9999) {
+          return
+        }
+        this.data = data
+        this.viewType = 1
+        this.viewYear = data[0]
+        this.$emit('update:modelValue', this.formatTo(data, this.valueFormat))
+      }
+    }
+  },
+  unmounted() {
+    document.onkeydown = null
+  },
+  methods: {
+    // 季度文本变更
+    changeText() {
+      if (this.checkFormat(this.format, this.text)) {
+        // 设置值
+        this.formatFrom(this.text, this.format)
+        this.$emit('update:modelValue', this.formatTo(this.data, this.valueFormat))
+      } else {
+        // 输入了无效的格式，还原回原来的值
+        if (this.data[0] < 1 || this.data[1] < 1) {
+          this.text = ''
+        } else {
+          this.text = this.formatTo(this.data, this.format)
+        }
+      }
+      this.visible = false
+    },
+    // 鼠标进入
+    mouseEnter() {
+      if (!this.disabled && !this.readonly && this.clearable && this.text !== '') {
+        this.showClear = true
+      }
+    },
+    // 鼠标离开
+    mouseLeave() {
+      if (!this.disabled && this.clearable) {
+        this.showClear = false
+      }
+    },
+    // 清除季度
+    clear() {
+      this.showClear = false
+      this.visible = false
+      this.$emit('update:modelValue', '')
+    },
+    // 季度值变更
+    changeValue(val) {
+      this.viewType = 1
+      if (val) {
+        // 反向格式化
+        this.formatFrom(val, this.valueFormat)
+        this.text = this.formatTo(this.data, this.format)
+        this.viewYear = this.data[0]
+      } else {
+        this.text = ''
+        this.data = [0, 0]
+        this.viewYear = new Date().getFullYear()
+      }
+      this.initView()
+    },
+    // 初始化视图数据
+    initView() {
+      const list = []
+      const curDate = new Date()
+      const curYear = curDate.getFullYear()
+      const curQuarter = parseInt(curDate.getMonth() / 3) + 1
+      if (this.viewType === 1) {
+        let index = 0
+        for (const i of '一二三四') {
+          index++
+          const item = { label: '第' + i + '季度', year: this.viewYear, quarter: index, current: false, active: false }
+          if (this.viewYear === curYear && index === curQuarter) {
+            item.current = true
+          } else if (this.viewYear === this.data[0] && index === this.data[1]) {
+            item.active = true
+          }
+          list.push(item)
+        }
+        this.title = this.viewYear + ' 年'
+      } else {
+        const start = parseInt(this.viewYear / 10) * 10
+        this.viewYear = start
+        for (let i = 0; i < 10; i++) {
+          const year = start + i
+          const item = { label: year + '', year: year, current: false, active: false }
+          if (year === curYear) {
+            item.current = true
+          } else if (year === this.data[0]) {
+            item.active = true
+          }
+          list.push(item)
+        }
+        this.title = start + ' 年 - ' + (start + 9) + ' 年'
+      }
+      this.viewList = list
+      this.lineCount = parseInt(list.length / 4)
+      if (list.length % 4 > 0) {
+        this.lineCount++
+      }
+    },
+    // 校验季度格式是否正确
+    checkFormat(pattern, val) {
+      // 格式转成正则表达式
+      let text = ''
+      for (const char of pattern) {
+        const dict = '\\^$.+?*[]{}!'
+        if (dict.indexOf(char) === -1) {
+          text += char
+        } else {
+          text += '\\' + char
+        }
+      }
+      text = text.replace('yyyy', '[1-9]\\d{3}')
+      text = text.replace('qq', '0[1-4]')
+      text = text.replace('q', '[1-4]')
+      text = text.replace('Q', '[一二三四]')
+      text = '^' + text + '$'
+      const patt = new RegExp(text)
+      return patt.test(val)
+    },
+    // 格式化季度到指定格式
+    formatTo(data, pattern) {
+      let text = pattern.replace('yyyy', '' + data[0])
+      text = text.replace('qq', '0' + data[1])
+      text = text.replace('q', '' + data[1])
+      text = text.replace('Q', '一二三四'.substr(data[1] - 1, 1))
+      return text
+    },
+    // 以指定格式解析季度
+    formatFrom(str, pattern) {
+      const year = this.findText(str, pattern, 'yyyy')
+      const quarter = this.findText(str, pattern, ['qq', 'q', 'Q'])
+      this.data = [year, quarter]
+    },
+    // 查找文本数值
+    findText(str, pattern, find) {
+      if (find instanceof Array) {
+        for (const f of find) {
+          const val = this.findText(str, pattern, f)
+          if (val !== -1) {
+            return val
+          }
+        }
+        return -1
+      }
+      const index = pattern.indexOf(find)
+      if (index === -1) {
+        return index
+      }
+      const val = str.substr(index, find.length)
+      if (find === 'Q') {
+        return '一二三四'.indexOf(val) + 1
+      } else {
+        return parseInt(val)
+      }
+    },
+    // 年份点击
+    clickYear() {
+      if (this.viewType !== 1) {
+        return
+      }
+      // 切换年度选择器
+      this.viewType = 2
+      this.initView()
+    },
+    // 季度选择
+    clickItem(item) {
+      if (this.viewType === 1) {
+        // 选择季度
+        this.$emit('update:modelValue', this.formatTo([item.year, item.quarter], this.valueFormat))
+        this.visible = false
+      } else {
+        // 选择年度
+        this.viewType = 1
+        this.viewYear = item.year
+        this.initView()
+      }
+    },
+    // 上一年
+    clickLast() {
+      if (this.viewYear > 1000) {
+        if (this.viewType === 1) {
+          this.viewYear--
+          this.initView()
+        } else {
+          this.viewYear = this.viewYear - 10
+          this.initView()
+        }
+      }
+    },
+    // 下一年
+    clickNext() {
+      if (this.viewYear < 9999) {
+        if (this.viewType === 1) {
+          this.viewYear++
+          this.initView()
+        } else {
+          this.viewYear = this.viewYear + 10
+          this.initView()
+        }
+      }
+    }
+  }
+}
+</script>
+ 
+<style>
+  .el-quarter-picker {
+    width: 220px;
+    display: inline-block;
+  }
+  .el-quarter-popover-content {
+    max-width: 100%;
+    word-break: break-all;
+    box-sizing: border-box;
+}
+  
+</style>
+
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index d94be2370..d55ca50cf 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -599,6 +599,17 @@ const remainingRouter: AppRouteRecordRaw[] = [
           activeMenu: '/crm/station-site'
         },
         component: () => import('@/views/crm/stationsite/detail/index.vue')
+      },
+      {
+        path: 'project/settlement/:id',
+        name: 'CrmProjectSettlementDetail',
+        meta: {
+          title: '利润结算详情',
+          noCache: true,
+          hidden: true,
+          activeMenu: '/crm/project/settlement'
+        },
+        component: () => import('@/views/crm/project/settlement/detail/index.vue')
       }
     ]
   },
diff --git a/src/views/crm/project/ProjectForm.vue b/src/views/crm/project/ProjectForm.vue
index 98deb1845..ac1d6ab62 100644
--- a/src/views/crm/project/ProjectForm.vue
+++ b/src/views/crm/project/ProjectForm.vue
@@ -8,7 +8,6 @@
       v-loading="formLoading"
     >
       <el-row>
-        {{ formData }}
         <el-col :span="12">
           <el-form-item label="项目名称" prop="deptId">
             <el-select
diff --git a/src/views/crm/project/settlement/ProjectSettlementForm.vue b/src/views/crm/project/settlement/ProjectSettlementForm.vue
index c6832c50d..1c841deba 100644
--- a/src/views/crm/project/settlement/ProjectSettlementForm.vue
+++ b/src/views/crm/project/settlement/ProjectSettlementForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="40%">
     <el-form
       ref="formRef"
       :model="formData"
@@ -7,47 +7,79 @@
       label-width="100px"
       v-loading="formLoading"
     >
-      <el-form-item label="关联项目ID" prop="projectId">
-        <el-select
-          v-model="formData.projectId"
-          filterable
-          placeholder="请选择关联项目"
-          class="!w-100%"
-        >
-          <el-option
-            v-for="item in projectOptions"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="结算周期(如:2023-Q1)" prop="settlementPeriod">
-        <el-input v-model="formData.settlementPeriod" placeholder="请输入结算周期(如:2023-Q1)" />
-      </el-form-item>
-      <el-form-item label="总期数" prop="period">
-        <el-input v-model.number="formData.period" placeholder="请输入总期数" type="number" />
-      </el-form-item>
-      <el-form-item label="结算日期" prop="settlementDate">
-        <el-date-picker
-          v-model="formData.settlementDate"
-          type="date"
-          value-format="x"
-          placeholder="选择结算日期"
-        />
-      </el-form-item>
-      <el-form-item label="收入备注" prop="incomeRemark">
-        <el-input v-model="formData.incomeRemark" placeholder="请输入收入备注" />
-      </el-form-item>
-      <el-form-item label="支出备注" prop="expenseRemark">
-        <el-input v-model="formData.expenseRemark" placeholder="请输入支出备注" />
-      </el-form-item>
-      <el-form-item label="结算凭证附件" prop="proofAttachment">
-        <UploadFile v-model="formData.proofAttachment" />
-      </el-form-item>
-      <el-form-item label="结算备注" prop="remark">
-        <el-input v-model="formData.remark" placeholder="请输入结算备注" />
-      </el-form-item>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="项目" prop="projectId">
+            <el-select
+              v-model="formData.projectId"
+              filterable
+              placeholder="请选择关联项目"
+              class="!w-100%"
+            >
+              <el-option
+                v-for="item in projectOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="结算周期" prop="settlementPeriod">
+            <el-quarter-picker v-model="formData.settlementPeriod" placeholder="选择季度" value-format="yyyy-q" clearable style="width: 100%"
+                popper-class="full-width-datepicker" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="结算日期" prop="settlementDate">
+              <el-date-picker
+                v-model="formData.settlementDate"
+                type="date"
+                placeholder="选择结算日期"
+                style="width: 100%"
+                popper-class="full-width-datepicker"
+              />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="结算开始时间" prop="startDate">
+              <el-date-picker
+                v-model="formData.startDate"
+                type="date"
+                placeholder="选择结算开始时间"
+                style="width: 100%"
+                popper-class="full-width-datepicker"
+              />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="结算结束时间" prop="endDate">
+              <el-date-picker
+                v-model="formData.endDate"
+                type="date"
+                placeholder="选择结算结束时间"
+                style="width: 100%"
+                popper-class="full-width-datepicker"
+              />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="收入备注" prop="incomeRemark">
+            <el-input v-model="formData.incomeRemark" placeholder="请输入收入备注" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="支出备注" prop="expenseRemark">
+            <el-input v-model="formData.expenseRemark" placeholder="请输入支出备注" />
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -58,6 +90,7 @@
 <script setup lang="ts">
 import * as ProjectSettlementApi from '@/api/crm/project/settlement'
 import * as ProjectApi from '@/api/crm/project'
+import ElQuarterPicker from '@/components/ElQuarterPicker/index.vue'
 
 /** 项目利润结算 表单 */
 defineOptions({ name: 'ProjectSettlementForm' })
@@ -74,6 +107,8 @@ const formData = ref({
   projectId: undefined,
   settlementPeriod: undefined,
   period: undefined,
+  startDate: undefined,
+  endDate: undefined,
   settlementDate: undefined,
   incomeRemark: undefined,
   expenseRemark: undefined,
@@ -81,8 +116,8 @@ const formData = ref({
   remark: undefined,
 })
 const formRules = reactive({
-  projectId: [{ required: true, message: '关联项目ID不能为空', trigger: 'blur' }],
-  settlementPeriod: [{ required: true, message: '结算周期(如:2023-Q1)不能为空', trigger: 'blur' }],
+  projectId: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
+  settlementPeriod: [{ required: true, message: '结算周期不能为空', trigger: 'blur' }],
   settlementDate: [{ required: true, message: '结算日期不能为空', trigger: 'blur' }],
 })
 const formRef = ref() // 表单 Ref
@@ -139,6 +174,8 @@ const resetForm = () => {
     projectId: undefined,
     settlementPeriod: undefined,
     period: undefined,
+    startDate: undefined,
+    endDate: undefined,
     settlementDate: undefined,
     incomeRemark: undefined,
     expenseRemark: undefined,
diff --git a/src/views/crm/project/settlement/index.vue b/src/views/crm/project/settlement/index.vue
index 6f3d28837..15c3dde4f 100644
--- a/src/views/crm/project/settlement/index.vue
+++ b/src/views/crm/project/settlement/index.vue
@@ -8,7 +8,7 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item label="项目" prop="projectId">
+      <el-form-item labssel="项目" prop="projectId">
         <el-select
           v-model="queryParams.projectId"
           clearable
@@ -23,19 +23,18 @@
           />
       </el-select>
       </el-form-item>
-      <el-form-item label="结算周期(如:2023-Q1)" prop="settlementPeriod">
-        <el-input
-          v-model="queryParams.settlementPeriod"
-          placeholder="请输入结算周期(如:2023-Q1)"
+      <el-form-item label="结算周期" prop="settlementPeriod">
+        <el-quarter-picker 
+          v-model="queryParams.settlementPeriod" 
+          placeholder="选择季度" 
+          value-format="yyyy-q"
           clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="结算日期" prop="settlementDate">
         <el-date-picker
           v-model="queryParams.settlementDate"
-          value-format="YYYY-MM-DD HH:mm:ss"
+          value-format="YYYY-MM-DD"
           type="daterange"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
@@ -53,17 +52,6 @@
           <el-option label="请选择字典生成" value="" />
         </el-select>
       </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-220px"
-        />
-      </el-form-item>
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
@@ -91,18 +79,39 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="项目名称" align="center" prop="projectName" />
-      <el-table-column label="枪数" align="center" prop="settlementPeriod" />
-      <el-table-column label="结算周期(如:2023-Q1)" align="center" prop="settlementPeriod" />
-      <el-table-column label="结算开始时间" align="center" prop="settlementDate" />
-      <el-table-column label="结算结束时间" align="center" prop="settlementDate" />
-      <el-table-column label="结算日期" align="center" prop="settlementDate" />
+      
+      <el-table-column label="项目名称" align="center" prop="projectName">
+        <template #default="scope">
+          <el-link type="primary" @click="goDetail(scope.row)">{{ scope.row.projectName }}</el-link>
+        </template>
+      </el-table-column>
+      <el-table-column label="枪数" align="center" prop="piles" />
+      <el-table-column label="结算周期" align="center" prop="settlementPeriod" >
+        <template #default="scope">
+          {{ formatQuarterPeriod(scope.row.settlementPeriod) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="结算开始时间" align="center" prop="startDate">
+        <template #default="scope">
+          {{ scope.row.startDate ? formatDate(scope.row.startDate, 'YYYY-MM-DD') : '' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="结算结束时间" align="center" prop="endDate">
+        <template #default="scope">
+          {{ scope.row.endDate ? formatDate(scope.row.endDate, 'YYYY-MM-DD') : '' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="结算日期" align="center" prop="settlementDate">
+        <template #default="scope">
+          {{ scope.row.settlementDate ? formatDate(scope.row.settlementDate, 'YYYY-MM-DD') : '' }}
+        </template>
+      </el-table-column>
       <el-table-column label="总期数" align="center" prop="period" />
-      <el-table-column label="毛利润" align="center" prop="settlementDate" />
-      <el-table-column label="单枪毛利润" align="center" prop="settlementDate" />
-      <el-table-column label="净利润" align="center" prop="settlementDate" />
+      <el-table-column label="毛利润" align="center" prop="grossProfit" />
+      <el-table-column label="上期亏损转结" align="center" prop="previousLossCarryover" />
+      <el-table-column label="净利润" align="center" prop="netProfit" />
       <el-table-column label="结算状态" align="center" prop="settlementStatus" />
-      <el-table-column label="操作" align="center" min-width="120px">
+      <el-table-column label="操作" align="center" min-width="180px" fixed="right">
         <template #default="scope">
           <el-button
             link
@@ -137,11 +146,23 @@
 </template>
 
 <script setup lang="ts">
-import { dateFormatter } from '@/utils/formatTime'
+import { formatDate } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as ProjectSettlementApi from '@/api/crm/project/settlement'
 import * as ProjectApi from '@/api/crm/project'
 import ProjectSettlementForm from './ProjectSettlementForm.vue'
+import ElQuarterPicker  from '@/components/ElQuarterPicker/index.vue'
+
+// 结算周期格式化：'2024-1' => '2024年第一季度'
+function formatQuarterPeriod(val?: string) {
+  if (!val) return ''
+  const match = val.match(/^(\d{4})-(\d)$/)
+  if (!match) return val
+  const year = match[1]
+  const quarter = match[2]
+  const quarterMap = { '1': '第一季度', '2': '第二季度', '3': '第三季度', '4': '第四季度' }
+  return `${year}年${quarterMap[quarter] || quarter}`
+}
 
 /** 项目利润结算 列表 */
 defineOptions({ name: 'CrmProjectSettlement' })
@@ -223,6 +244,17 @@ const handleExport = async () => {
   }
 }
 
+
+
+/** 跳转到项目结算明细页面 */
+const router = useRouter()
+function goDetail(row: ProjectSettlementApi.ProjectSettlementVO) {
+  router.push({
+    name: 'CrmProjectSettlementDetail',
+    params: { id: row.id }
+  })
+}
+
 /** 初始化 **/
 onMounted(async () => {
   await getList()