|
|
@@ -10,18 +10,18 @@
|
|
|
</span>
|
|
|
</div>
|
|
|
|
|
|
- <div
|
|
|
- v-if="group.workOrders.length > 1"
|
|
|
- class="panel-pill-tabs panel-pill-tabs--lg panel-pill-tabs--start qc-wo-pill-tabs"
|
|
|
- >
|
|
|
- <div class="panel-pill-tabs__track" role="tablist" aria-label="同样本质检工单">
|
|
|
+ <div v-if="group.workOrders.length > 1" class="qc-wo-indep-tabs">
|
|
|
+ <div class="qc-wo-indep-tabs__row" role="tablist" aria-label="同样本质检工单">
|
|
|
<button
|
|
|
v-for="(wo, tabIndex) in group.workOrders"
|
|
|
:key="wo.id"
|
|
|
type="button"
|
|
|
role="tab"
|
|
|
- class="panel-pill-tabs__btn qc-wo-pill-tabs__btn"
|
|
|
- :class="{ 'is-active': wo.id === activeWorkOrderId }"
|
|
|
+ class="qc-wo-indep-tabs__btn"
|
|
|
+ :class="[
|
|
|
+ { 'is-active': wo.id === activeWorkOrderId },
|
|
|
+ triggerSourcePillClass(wo.triggerSource)
|
|
|
+ ]"
|
|
|
:aria-selected="wo.id === activeWorkOrderId"
|
|
|
@click="activeWorkOrderId = wo.id"
|
|
|
>
|
|
|
@@ -141,6 +141,12 @@
|
|
|
return 'qc-wo-tab__source--reception'
|
|
|
}
|
|
|
|
|
|
+ function triggerSourcePillClass(source?: string) {
|
|
|
+ const ts = source || 'reception'
|
|
|
+ if (ts === 'production') return 'qc-wo-indep-tabs__btn--production'
|
|
|
+ return 'qc-wo-indep-tabs__btn--reception'
|
|
|
+ }
|
|
|
+
|
|
|
const contextSubtitle = computed(() => {
|
|
|
const row = contextRow.value
|
|
|
if (!row) return '—'
|
|
|
@@ -217,35 +223,44 @@
|
|
|
border: 1px solid #d1fae5;
|
|
|
}
|
|
|
|
|
|
- .qc-wo-pill-tabs:not(.el-tabs) {
|
|
|
- margin: 0;
|
|
|
- padding: 8px 16px;
|
|
|
+ .qc-wo-indep-tabs {
|
|
|
+ padding: 12px 16px;
|
|
|
border-bottom: 1px solid #e2e8f0;
|
|
|
background: #f8fafc;
|
|
|
}
|
|
|
|
|
|
- .qc-wo-pill-tabs:not(.el-tabs) :deep(.panel-pill-tabs__track) {
|
|
|
+ .qc-wo-indep-tabs__row {
|
|
|
+ display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ gap: 24px;
|
|
|
max-width: 100%;
|
|
|
- gap: 10px;
|
|
|
- padding: 6px;
|
|
|
}
|
|
|
|
|
|
- .qc-wo-pill-tabs:not(.el-tabs) :deep(.panel-pill-tabs__btn.qc-wo-pill-tabs__btn) {
|
|
|
+ .qc-wo-indep-tabs__btn {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
min-width: 0;
|
|
|
min-height: 34px;
|
|
|
padding: 8px 16px;
|
|
|
+ border: 2px solid #e2e8f0;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #fff;
|
|
|
font-size: 12px;
|
|
|
- gap: 6px;
|
|
|
color: #1e293b;
|
|
|
-
|
|
|
- &:hover:not(.is-active) {
|
|
|
- color: #0f172a;
|
|
|
- }
|
|
|
+ cursor: pointer;
|
|
|
+ white-space: nowrap;
|
|
|
+ box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
|
|
|
+ transition:
|
|
|
+ background 0.15s ease,
|
|
|
+ color 0.15s ease,
|
|
|
+ border-color 0.15s ease,
|
|
|
+ box-shadow 0.15s ease;
|
|
|
|
|
|
&:focus-visible {
|
|
|
outline: 2px solid #10b981;
|
|
|
- outline-offset: 1px;
|
|
|
+ outline-offset: 2px;
|
|
|
}
|
|
|
|
|
|
&:not(.is-active) {
|
|
|
@@ -254,12 +269,15 @@
|
|
|
background: #e2e8f0;
|
|
|
}
|
|
|
|
|
|
- .qc-wo-tab__source,
|
|
|
.qc-wo-tab__source--reception,
|
|
|
- .qc-wo-tab__source--schedule,
|
|
|
+ .qc-wo-tab__source--schedule {
|
|
|
+ color: #047857;
|
|
|
+ background: #ecfdf5;
|
|
|
+ }
|
|
|
+
|
|
|
.qc-wo-tab__source--production {
|
|
|
- color: #1e293b;
|
|
|
- background: #f1f5f9;
|
|
|
+ color: #b45309;
|
|
|
+ background: #fffbeb;
|
|
|
}
|
|
|
|
|
|
.qc-wo-tab__no {
|
|
|
@@ -280,8 +298,33 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ &:not(.is-active):hover {
|
|
|
+ box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
|
|
|
+ }
|
|
|
+
|
|
|
+ &--reception:not(.is-active) {
|
|
|
+ border-color: #a7f3d0;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: #047857;
|
|
|
+ background: #ecfdf5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &--production:not(.is-active) {
|
|
|
+ border-color: #fcd34d;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: #b45309;
|
|
|
+ background: #fffbeb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
&.is-active {
|
|
|
color: #fff;
|
|
|
+ background: var(--primary, #10b981);
|
|
|
+ border-color: var(--primary, #10b981);
|
|
|
+ box-shadow: 0 2px 6px rgba(16, 185, 129, 0.28);
|
|
|
|
|
|
.qc-wo-tab__index {
|
|
|
color: #fff;
|
