From 2f5c799143c0c203299197eb05a1ee2ad96c6cba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com>
Date: Tue, 5 May 2026 17:42:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(contract):=20=E6=B7=BB=E5=8A=A0=E5=90=88?=
 =?UTF-8?q?=E5=90=8C=E7=BD=AE=E9=A1=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在合同列表和表单中添加置顶功能，包括：
1. 表单中添加置顶开关
2. 列表项显示置顶标签和样式
3. 实现置顶状态切换操作
---
 .../crm/contract/components/ContractList.vue  | 45 ++++++++++++++-----
 klp-ui/src/views/crm/contract/index.vue       |  6 +++
 2 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/klp-ui/src/views/crm/contract/components/ContractList.vue b/klp-ui/src/views/crm/contract/components/ContractList.vue
index 2a690c31..0a939bbb 100644
--- a/klp-ui/src/views/crm/contract/components/ContractList.vue
+++ b/klp-ui/src/views/crm/contract/components/ContractList.vue
@@ -69,13 +69,16 @@
     <div class="custom-list" v-loading="loading">
       <div class="list-body">
         <div v-for="row in contractList" :key="row.contractId" class="list-item"
-          style="padding: 10px; border-bottom: 2px solid #dddddd; cursor: pointer;"
-          :class="{ 'list-item-active': selectedRow === row }" @click="handleRowClick(row)">
-          <!-- 合同名称和编号 -->
-          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+        style="padding: 10px; border-bottom: 2px solid #dddddd; cursor: pointer;"
+        :class="{ 'list-item-active': selectedRow === row, 'list-item-top': row.isTop }" @click="handleRowClick(row)">
+        <!-- 合同名称和编号 -->
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+          <div style="display: flex; align-items: center; gap: 8px;">
+            <el-tag v-if="row.isTop" type="warning" size="mini" effect="dark">置顶</el-tag>
             <div style="font-weight: bold;">{{ row.contractName }}</div>
-            <div style="font-size: 12px; color: #606266;">{{ row.contractCode }}</div>
           </div>
+          <div style="font-size: 12px; color: #606266;">{{ row.contractCode }}</div>
+        </div>
 
           <!-- 供方和需方 -->
           <div style="font-size: 12px; color: #909399; margin-bottom: 6px;">
@@ -102,11 +105,12 @@
           </div>
 
           <!-- 操作按钮独占一行 -->
-          <div style="display: flex; gap: 10px; padding-top: 8px; border-top: 1px dashed #f0f0f0;">
-            <el-button size="mini" type="text" icon="el-icon-download" @click.stop="handleExport(row)">导出</el-button>
-            <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="$emit('update', row)">修改</el-button>
-            <el-button size="mini" type="text" icon="el-icon-delete" @click.stop="$emit('delete', row)">删除</el-button>
-          </div>
+        <div style="display: flex; gap: 10px; padding-top: 8px; border-top: 1px dashed #f0f0f0;">
+          <el-button size="mini" type="text" :icon="row.isTop ? 'el-icon-top' : 'el-icon-s-operation'" @click.stop="handleToggleTop(row)">{{ row.isTop ? '取消置顶' : '置顶' }}</el-button>
+          <el-button size="mini" type="text" icon="el-icon-download" @click.stop="handleExport(row)">导出</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="$emit('update', row)">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click.stop="$emit('delete', row)">删除</el-button>
+        </div>
         </div>
         <div v-if="contractList.length === 0" style="padding: 40px; text-align: center; color: #909399;">
           暂无合同数据
@@ -121,7 +125,6 @@
 
 <script>
 import { listOrder, updateOrder } from "@/api/crm/order";
-import { listOrderItem } from '@/api/crm/orderItem'
 import * as ExcelJS from 'exceljs';
 import { saveAs } from 'file-saver';
 
@@ -168,6 +171,17 @@ export default {
         this.loading = false;
       });
     },
+    /** 切换置顶状态 */
+    handleToggleTop(row) {
+      const newTopStatus = row.isTop ? 0 : 1;
+      updateOrder({ ...row, isTop: newTopStatus }).then(response => {
+        this.$message({
+          message: newTopStatus ? "置顶成功" : "取消置顶成功",
+          type: "success"
+        });
+        this.getList();
+      })
+    },
     /** 状态变更 */
     handleChangeStatus(row) {
       updateOrder(row).then(response => {
@@ -814,6 +828,15 @@ export default {
   border-left: 3px solid #409eff;
 }
 
+.list-item-top {
+  background-color: #fff7e6;
+  border-left: 3px solid #e6a23c;
+}
+
+.list-item-top:hover {
+  background-color: #ffebcc;
+}
+
 @media screen and (max-width: 1200px) {
   .list-header {
     font-size: 12px;
diff --git a/klp-ui/src/views/crm/contract/index.vue b/klp-ui/src/views/crm/contract/index.vue
index 1892a9ee..8741aad5 100644
--- a/klp-ui/src/views/crm/contract/index.vue
+++ b/klp-ui/src/views/crm/contract/index.vue
@@ -79,6 +79,11 @@
               <el-input v-model="form.signLocation" placeholder="请输入签订地点" />
             </el-form-item>
           </el-col>
+          <el-col :span="6">
+            <el-form-item label="置顶" prop="isTop">
+              <el-switch v-model="form.isTop" :active-value="1" :inactive-value="0"/>
+            </el-form-item>
+          </el-col>
         </el-row>
 
         <el-form-item label="产品内容">
@@ -452,6 +457,7 @@ export default {
         productionSchedule: undefined,
         status: 0,
         remark: undefined,
+        isTop: 0,
         createBy: undefined,
         createTime: undefined,
         updateBy: undefined,