|
@@ -2,7 +2,7 @@
|
2
|
2
|
* @Author: ysh
|
3
|
3
|
* @Date: 2024-06-21 18:52:00
|
4
|
4
|
* @LastEditors: Please set LastEditors
|
5
|
|
- * @LastEditTime: 2025-02-17 15:15:23
|
|
5
|
+ * @LastEditTime: 2025-07-24 10:39:15
|
6
|
6
|
-->
|
7
|
7
|
<template>
|
8
|
8
|
<div class="app-container">
|
|
@@ -38,7 +38,7 @@
|
38
|
38
|
v-hasPermi="['oa:contract:add']">登记分包合同</el-button>
|
39
|
39
|
</el-col>
|
40
|
40
|
<el-col :span="1.5">
|
41
|
|
- <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
|
|
41
|
+ <el-button type="warning" plain icon="el-icon-download" size="mini" @click="openExportDialog"
|
42
|
42
|
v-hasPermi="['oa:subContract:export']">导出</el-button>
|
43
|
43
|
</el-col>
|
44
|
44
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
@@ -49,14 +49,6 @@
|
49
|
49
|
<el-table-column label="合同名称" align="center" prop="subContractName" width="300px" />
|
50
|
50
|
<el-table-column label="分包合同金额" align="center" prop="subAmount" />
|
51
|
51
|
<el-table-column label="承接单位" align="center" prop="partner.partnerName" />
|
52
|
|
- <!-- <el-table-column label="承接单位联系人" align="center" prop="contactPerson" /> -->
|
53
|
|
- <!-- <el-table-column label="合同文件" align="center" prop="contractDocument" show-overflow-tooltip>
|
54
|
|
- <template slot-scope="scope">
|
55
|
|
- <el-link type="primary" @click="reviewWord(`${baseUrl}${'/profile/upload' + scope.row.contractDocument}`)">
|
56
|
|
- {{ getFileName(scope.row.contractDocument) }}
|
57
|
|
- </el-link>
|
58
|
|
- </template>
|
59
|
|
-</el-table-column> -->
|
60
|
52
|
<el-table-column label="拟稿日期" align="center" prop="draftTime">
|
61
|
53
|
<template slot-scope="scope">
|
62
|
54
|
<span>{{ parseTime(scope.row.draftTime, '{y}-{m}-{d}') }}</span>
|
|
@@ -68,30 +60,41 @@
|
68
|
60
|
<span>{{ parseTime(scope.row.signDate, '{y}-{m}-{d}') }}</span>
|
69
|
61
|
</template>
|
70
|
62
|
</el-table-column>
|
71
|
|
- <el-table-column prop="percentage" align="center" label="付款进度" width="120px" sortable>
|
|
63
|
+ <el-table-column prop="percentage" align="center" label="收票/付款进度" width="180px" sortable>
|
72
|
64
|
<template slot-scope="scope">
|
73
|
|
- <el-progress :text-inside="true" :stroke-width="26" :status="formatStatus(scope.row.percentage)"
|
74
|
|
- :percentage="scope.row.percentage" text-color="#fff"></el-progress>
|
75
|
|
- <div>
|
76
|
|
- {{ scope.row.paidAmount }}
|
|
65
|
+ <div class="progress-container">
|
|
66
|
+ <div class="progress-item">
|
|
67
|
+ <div class="progress-header">
|
|
68
|
+ <span class="progress-label invoice-label">
|
|
69
|
+ <i class="el-icon-document"></i>收票
|
|
70
|
+ </span>
|
|
71
|
+ <span class="progress-amount" v-show="scope.row.invoiceAmount">
|
|
72
|
+ {{ scope.row.invoiceAmount }}元
|
|
73
|
+ </span>
|
|
74
|
+ </div>
|
|
75
|
+ <el-progress :text-inside="true" :stroke-width="20"
|
|
76
|
+ :status="formatStatus(Number(scope.row.invoicePercentage))"
|
|
77
|
+ :percentage="Number(scope.row.invoicePercentage)" text-color="#fff" class="custom-progress">
|
|
78
|
+ </el-progress>
|
|
79
|
+ </div>
|
|
80
|
+
|
|
81
|
+ <div class="progress-item">
|
|
82
|
+ <div class="progress-header">
|
|
83
|
+ <span class="progress-label payment-label">
|
|
84
|
+ <i class="el-icon-wallet"></i>付款
|
|
85
|
+ </span>
|
|
86
|
+ <span class="progress-amount" v-show="scope.row.paidAmount">
|
|
87
|
+ {{ scope.row.paidAmount }}元
|
|
88
|
+ </span>
|
|
89
|
+ </div>
|
|
90
|
+ <el-progress :text-inside="true" :stroke-width="20"
|
|
91
|
+ :status="formatStatus(Number(scope.row.paidPercentage))" :percentage="Number(scope.row.paidPercentage)"
|
|
92
|
+ text-color="#fff" class="custom-progress">
|
|
93
|
+ </el-progress>
|
|
94
|
+ </div>
|
77
|
95
|
</div>
|
78
|
96
|
</template>
|
79
|
97
|
</el-table-column>
|
80
|
|
- <!-- <el-table-column label="签订备注" align="center" prop="signRemark" /> -->
|
81
|
|
- <!-- <el-table-column label="签订扫描件" align="center" prop="signScan">
|
82
|
|
- <template slot-scope="scope">
|
83
|
|
- <el-link type="primary" @click="reviewWord(`${baseUrl}${'/profile/upload' + scope.row.signScan}`)">
|
84
|
|
- {{ getFileName(scope.row.signScan) }}
|
85
|
|
- </el-link>
|
86
|
|
- </template>
|
87
|
|
- </el-table-column>
|
88
|
|
- <el-table-column label="评审方式" align="center" prop="commentType">
|
89
|
|
- <template slot-scope="scope">
|
90
|
|
- <el-tag :type="scope.row.commentType == '2' ? 'success' : 'warning'">
|
91
|
|
- {{ setCommentType(scope.row.commentType) }}
|
92
|
|
- </el-tag>
|
93
|
|
- </template>
|
94
|
|
- </el-table-column> -->
|
95
|
98
|
<el-table-column label="拟稿人" align="center" prop="drafter">
|
96
|
99
|
<template slot-scope="scope">
|
97
|
100
|
{{ getUserName(scope.row.drafter) }}
|
|
@@ -105,7 +108,7 @@
|
105
|
108
|
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
106
|
109
|
v-hasPermi="['oa:subContract:edit']">修改</el-button>
|
107
|
110
|
<el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleProgress(scope.row)"
|
108
|
|
- v-hasPermi="['oa:contract:paid']">付款进度</el-button>
|
|
111
|
+ v-hasPermi="['oa:contract:paid']">收票/付款进度</el-button>
|
109
|
112
|
</template>
|
110
|
113
|
</el-table-column>
|
111
|
114
|
</el-table>
|
|
@@ -126,6 +129,35 @@
|
126
|
129
|
<el-dialog :title="title" :visible.sync="progressOpen" width="50%" append-to-body>
|
127
|
130
|
<sub-progress :form="progressContract" @cancel="progressOpen = false" @getList="getList"></sub-progress>
|
128
|
131
|
</el-dialog>
|
|
132
|
+
|
|
133
|
+ <!-- 导出对话框 -->
|
|
134
|
+ <el-dialog :title="title" :visible.sync="exportOpen" width="60%" append-to-body>
|
|
135
|
+ <el-form>
|
|
136
|
+ <el-form-item label="选择导出字段名" label-width="120px">
|
|
137
|
+ <div class="export-fields-container">
|
|
138
|
+ <div class="field-selection-header">
|
|
139
|
+ <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"
|
|
140
|
+ class="check-all-btn">
|
|
141
|
+ 全选
|
|
142
|
+ </el-checkbox>
|
|
143
|
+ </div>
|
|
144
|
+ <el-checkbox-group v-model="selectedFields" @change="handleCheckedFieldsChange"
|
|
145
|
+ class="field-checkbox-group">
|
|
146
|
+ <div class="field-grid">
|
|
147
|
+ <el-checkbox v-for="field in fieldsObj" :key="field.value" :label="field.value"
|
|
148
|
+ class="field-checkbox-item">
|
|
149
|
+ <span class="field-label">{{ field.label }}</span>
|
|
150
|
+ </el-checkbox>
|
|
151
|
+ </div>
|
|
152
|
+ </el-checkbox-group>
|
|
153
|
+ </div>
|
|
154
|
+ </el-form-item>
|
|
155
|
+ </el-form>
|
|
156
|
+ <div slot="footer" class="dialog-footer">
|
|
157
|
+ <el-button type="primary" @click="handleExport" :disabled="selectedFields.length === 0">导出</el-button>
|
|
158
|
+ <el-button @click="exportOpen = false">取消</el-button>
|
|
159
|
+ </div>
|
|
160
|
+ </el-dialog>
|
129
|
161
|
</div>
|
130
|
162
|
</template>
|
131
|
163
|
|
|
@@ -196,7 +228,23 @@ export default {
|
196
|
228
|
commentList: [],
|
197
|
229
|
commentOpen: false,
|
198
|
230
|
progressOpen: false,
|
199
|
|
- progressContract: {}
|
|
231
|
+ progressContract: {},
|
|
232
|
+ exportOpen: false,
|
|
233
|
+ fieldsObj: [
|
|
234
|
+ { label: '分包合同名称', value: 'subContractName' },
|
|
235
|
+ { label: '分包合同金额', value: 'subAmount' },
|
|
236
|
+ { label: '承接单位', value: 'partnerName' },
|
|
237
|
+ { label: '拟稿人', value: 'drafter' },
|
|
238
|
+ { label: '拟稿日期', value: 'draftTime' },
|
|
239
|
+ { label: '签订日期', value: 'signDate' },
|
|
240
|
+ { label: '收票金额', value: 'invoiceAmount' },
|
|
241
|
+ { label: '收票进度', value: 'invoicePercentage' },
|
|
242
|
+ { label: '付款金额', value: 'paidAmount' },
|
|
243
|
+ { label: '付款进度', value: 'paidPercentage' },
|
|
244
|
+ ],
|
|
245
|
+ selectedFields: [],
|
|
246
|
+ checkAll: false,
|
|
247
|
+ isIndeterminate: false
|
200
|
248
|
};
|
201
|
249
|
},
|
202
|
250
|
created() {
|
|
@@ -402,9 +450,28 @@ export default {
|
402
|
450
|
},
|
403
|
451
|
/** 导出按钮操作 */
|
404
|
452
|
handleExport() {
|
405
|
|
- this.download('oa/subContract/export', {
|
406
|
|
- ...this.queryParams
|
|
453
|
+ let selectFields = this.selectedFields.join(',');
|
|
454
|
+ this.download('oa/subContract/exportSelectFields', {
|
|
455
|
+ ...this.queryParams,
|
|
456
|
+ selectFields: selectFields
|
407
|
457
|
}, `subContract_${new Date().getTime()}.xlsx`)
|
|
458
|
+ this.exportOpen = false;
|
|
459
|
+ },
|
|
460
|
+ // 全选处理
|
|
461
|
+ handleCheckAllChange(val) {
|
|
462
|
+ this.selectedFields = val ? this.fieldsObj.map(field => field.value) : [];
|
|
463
|
+ this.isIndeterminate = false;
|
|
464
|
+ },
|
|
465
|
+ // 选择字段变化处理
|
|
466
|
+ handleCheckedFieldsChange(value) {
|
|
467
|
+ let checkedCount = value.length;
|
|
468
|
+ this.checkAll = checkedCount === this.fieldsObj.length;
|
|
469
|
+ this.isIndeterminate = checkedCount > 0 && checkedCount < this.fieldsObj.length;
|
|
470
|
+ },
|
|
471
|
+ // 打开导出对话框
|
|
472
|
+ openExportDialog() {
|
|
473
|
+ this.title = "导出分包合同";
|
|
474
|
+ this.exportOpen = true;
|
408
|
475
|
},
|
409
|
476
|
setCommentType(commentType) {
|
410
|
477
|
if (commentType == '2') {
|
|
@@ -446,4 +513,181 @@ table {
|
446
|
513
|
padding: 5px;
|
447
|
514
|
}
|
448
|
515
|
}
|
|
516
|
+
|
|
517
|
+/* 进度显示样式 */
|
|
518
|
+.progress-container {
|
|
519
|
+ padding: 8px 4px;
|
|
520
|
+}
|
|
521
|
+
|
|
522
|
+.progress-item {
|
|
523
|
+ margin-bottom: 12px;
|
|
524
|
+}
|
|
525
|
+
|
|
526
|
+.progress-item:last-child {
|
|
527
|
+ margin-bottom: 0;
|
|
528
|
+}
|
|
529
|
+
|
|
530
|
+.progress-header {
|
|
531
|
+ display: flex;
|
|
532
|
+ justify-content: space-between;
|
|
533
|
+ align-items: center;
|
|
534
|
+ margin-bottom: 4px;
|
|
535
|
+ padding: 0 2px;
|
|
536
|
+}
|
|
537
|
+
|
|
538
|
+.progress-label {
|
|
539
|
+ font-size: 12px;
|
|
540
|
+ font-weight: 600;
|
|
541
|
+ display: flex;
|
|
542
|
+ align-items: center;
|
|
543
|
+ gap: 4px;
|
|
544
|
+}
|
|
545
|
+
|
|
546
|
+.invoice-label {
|
|
547
|
+ color: #409eff;
|
|
548
|
+}
|
|
549
|
+
|
|
550
|
+.payment-label {
|
|
551
|
+ color: #67c23a;
|
|
552
|
+}
|
|
553
|
+
|
|
554
|
+.progress-label i {
|
|
555
|
+ font-size: 14px;
|
|
556
|
+}
|
|
557
|
+
|
|
558
|
+.progress-amount {
|
|
559
|
+ font-size: 11px;
|
|
560
|
+ color: #909399;
|
|
561
|
+ font-weight: 500;
|
|
562
|
+ background: #f5f7fa;
|
|
563
|
+ padding: 2px 6px;
|
|
564
|
+ border-radius: 4px;
|
|
565
|
+ border: 1px solid #e4e7ed;
|
|
566
|
+}
|
|
567
|
+
|
|
568
|
+.custom-progress {
|
|
569
|
+ margin: 2px 0;
|
|
570
|
+}
|
|
571
|
+
|
|
572
|
+.custom-progress ::v-deep .el-progress-bar__outer {
|
|
573
|
+ border-radius: 10px;
|
|
574
|
+ overflow: hidden;
|
|
575
|
+}
|
|
576
|
+
|
|
577
|
+.custom-progress ::v-deep .el-progress-bar__inner {
|
|
578
|
+ border-radius: 10px;
|
|
579
|
+ transition: all 0.3s ease;
|
|
580
|
+}
|
|
581
|
+
|
|
582
|
+.custom-progress ::v-deep .el-progress__text {
|
|
583
|
+ font-size: 11px !important;
|
|
584
|
+ font-weight: 600;
|
|
585
|
+}
|
|
586
|
+
|
|
587
|
+/* 不同状态的进度条颜色优化 */
|
|
588
|
+.custom-progress ::v-deep .el-progress--success .el-progress-bar__inner {
|
|
589
|
+ background: linear-gradient(135deg, #67c23a, #85ce61);
|
|
590
|
+}
|
|
591
|
+
|
|
592
|
+.custom-progress ::v-deep .el-progress--warning .el-progress-bar__inner {
|
|
593
|
+ background: linear-gradient(135deg, #e6a23c, #f0b90b);
|
|
594
|
+}
|
|
595
|
+
|
|
596
|
+.custom-progress ::v-deep .el-progress--exception .el-progress-bar__inner {
|
|
597
|
+ background: linear-gradient(135deg, #f56c6c, #f89898);
|
|
598
|
+}
|
|
599
|
+
|
|
600
|
+/* 默认状态(蓝色)的渐变 */
|
|
601
|
+.custom-progress ::v-deep .el-progress-bar__inner:not(.el-progress--success):not(.el-progress--warning):not(.el-progress--exception) {
|
|
602
|
+ background: linear-gradient(135deg, #409eff, #66b1ff);
|
|
603
|
+}
|
|
604
|
+
|
|
605
|
+/* 导出字段选择样式 */
|
|
606
|
+.export-fields-container {
|
|
607
|
+ padding: 10px;
|
|
608
|
+ border: 1px solid #e4e7ed;
|
|
609
|
+ border-radius: 4px;
|
|
610
|
+ background-color: #fafafa;
|
|
611
|
+}
|
|
612
|
+
|
|
613
|
+.field-selection-header {
|
|
614
|
+ padding-bottom: 12px;
|
|
615
|
+ margin-bottom: 12px;
|
|
616
|
+ border-bottom: 1px solid #e4e7ed;
|
|
617
|
+}
|
|
618
|
+
|
|
619
|
+.check-all-btn {
|
|
620
|
+ font-weight: 600;
|
|
621
|
+ color: #409eff;
|
|
622
|
+}
|
|
623
|
+
|
|
624
|
+.field-checkbox-group {
|
|
625
|
+ width: 100%;
|
|
626
|
+}
|
|
627
|
+
|
|
628
|
+.field-grid {
|
|
629
|
+ display: grid;
|
|
630
|
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
631
|
+ gap: 12px 16px;
|
|
632
|
+ padding: 8px 0;
|
|
633
|
+}
|
|
634
|
+
|
|
635
|
+.field-checkbox-item {
|
|
636
|
+ display: flex;
|
|
637
|
+ align-items: center;
|
|
638
|
+ padding: 8px 12px;
|
|
639
|
+ border: 1px solid #dcdfe6;
|
|
640
|
+ border-radius: 4px;
|
|
641
|
+ background-color: #fff;
|
|
642
|
+ transition: all 0.3s ease;
|
|
643
|
+ cursor: pointer;
|
|
644
|
+}
|
|
645
|
+
|
|
646
|
+.field-checkbox-item:hover {
|
|
647
|
+ border-color: #409eff;
|
|
648
|
+ background-color: #f0f8ff;
|
|
649
|
+ transform: translateY(-1px);
|
|
650
|
+ box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
|
|
651
|
+}
|
|
652
|
+
|
|
653
|
+.field-checkbox-item.is-checked {
|
|
654
|
+ border-color: #409eff;
|
|
655
|
+ background-color: #ecf5ff;
|
|
656
|
+}
|
|
657
|
+
|
|
658
|
+.field-label {
|
|
659
|
+ margin-left: 8px;
|
|
660
|
+ font-size: 14px;
|
|
661
|
+ color: #606266;
|
|
662
|
+ white-space: nowrap;
|
|
663
|
+ overflow: hidden;
|
|
664
|
+ text-overflow: ellipsis;
|
|
665
|
+}
|
|
666
|
+
|
|
667
|
+/* 禁用导出按钮时的样式 */
|
|
668
|
+.dialog-footer .el-button:disabled {
|
|
669
|
+ opacity: 0.6;
|
|
670
|
+}
|
|
671
|
+
|
|
672
|
+/* 自定义复选框样式 */
|
|
673
|
+.field-checkbox-item ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
|
|
674
|
+ background-color: #409eff;
|
|
675
|
+ border-color: #409eff;
|
|
676
|
+}
|
|
677
|
+
|
|
678
|
+.field-checkbox-item ::v-deep .el-checkbox__input:hover .el-checkbox__inner {
|
|
679
|
+ border-color: #409eff;
|
|
680
|
+}
|
|
681
|
+
|
|
682
|
+/* 响应式设计 */
|
|
683
|
+@media (max-width: 768px) {
|
|
684
|
+ .field-grid {
|
|
685
|
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
686
|
+ gap: 8px 12px;
|
|
687
|
+ }
|
|
688
|
+
|
|
689
|
+ .field-checkbox-item {
|
|
690
|
+ padding: 6px 10px;
|
|
691
|
+ }
|
|
692
|
+}
|
449
|
693
|
</style>
|