feat(contract): 添加合同置顶功能
在合同列表和表单中添加置顶功能,包括: 1. 表单中添加置顶开关 2. 列表项显示置顶标签和样式 3. 实现置顶状态切换操作
This commit is contained in:
@@ -70,10 +70,13 @@
|
|||||||
<div class="list-body">
|
<div class="list-body">
|
||||||
<div v-for="row in contractList" :key="row.contractId" class="list-item"
|
<div v-for="row in contractList" :key="row.contractId" class="list-item"
|
||||||
style="padding: 10px; border-bottom: 2px solid #dddddd; cursor: pointer;"
|
style="padding: 10px; border-bottom: 2px solid #dddddd; cursor: pointer;"
|
||||||
:class="{ 'list-item-active': selectedRow === row }" @click="handleRowClick(row)">
|
: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; 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-weight: bold;">{{ row.contractName }}</div>
|
||||||
|
</div>
|
||||||
<div style="font-size: 12px; color: #606266;">{{ row.contractCode }}</div>
|
<div style="font-size: 12px; color: #606266;">{{ row.contractCode }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -103,6 +106,7 @@
|
|||||||
|
|
||||||
<!-- 操作按钮独占一行 -->
|
<!-- 操作按钮独占一行 -->
|
||||||
<div style="display: flex; gap: 10px; padding-top: 8px; border-top: 1px dashed #f0f0f0;">
|
<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-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-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>
|
<el-button size="mini" type="text" icon="el-icon-delete" @click.stop="$emit('delete', row)">删除</el-button>
|
||||||
@@ -121,7 +125,6 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { listOrder, updateOrder } from "@/api/crm/order";
|
import { listOrder, updateOrder } from "@/api/crm/order";
|
||||||
import { listOrderItem } from '@/api/crm/orderItem'
|
|
||||||
import * as ExcelJS from 'exceljs';
|
import * as ExcelJS from 'exceljs';
|
||||||
import { saveAs } from 'file-saver';
|
import { saveAs } from 'file-saver';
|
||||||
|
|
||||||
@@ -168,6 +171,17 @@ export default {
|
|||||||
this.loading = false;
|
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) {
|
handleChangeStatus(row) {
|
||||||
updateOrder(row).then(response => {
|
updateOrder(row).then(response => {
|
||||||
@@ -814,6 +828,15 @@ export default {
|
|||||||
border-left: 3px solid #409eff;
|
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) {
|
@media screen and (max-width: 1200px) {
|
||||||
.list-header {
|
.list-header {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|||||||
@@ -79,6 +79,11 @@
|
|||||||
<el-input v-model="form.signLocation" placeholder="请输入签订地点" />
|
<el-input v-model="form.signLocation" placeholder="请输入签订地点" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</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-row>
|
||||||
|
|
||||||
<el-form-item label="产品内容">
|
<el-form-item label="产品内容">
|
||||||
@@ -452,6 +457,7 @@ export default {
|
|||||||
productionSchedule: undefined,
|
productionSchedule: undefined,
|
||||||
status: 0,
|
status: 0,
|
||||||
remark: undefined,
|
remark: undefined,
|
||||||
|
isTop: 0,
|
||||||
createBy: undefined,
|
createBy: undefined,
|
||||||
createTime: undefined,
|
createTime: undefined,
|
||||||
updateBy: undefined,
|
updateBy: undefined,
|
||||||
|
|||||||
Reference in New Issue
Block a user