生产成本核算的明细样式优化

yyb

3 小时以前 d69bd8276ecaf9e8315391289d00cfc23677ef1a

生产成本核算的明细样式优化

 src/views/costAccounting/productionCostAccounting/index.vue

@@ -211,21 +211,45 @@

    <el-drawer
      v-model="detailVisible"
      title="生产成本拆分明细"
      size="560px"
      :with-header="false"
      class="detail-drawer"
      size="760px"
      :close-on-click-modal="true"
      :close-on-press-escape="true"
      destroy-on-close
    >
      <div v-if="detailRow" class="drawer-head">
        <div><b>{{ timeColumnLabel }}：</b>{{ detailRow.timeLabel }}</div>
        <div><b>产品类别：</b>{{ detailRow.category }}</div>
        <div><b>生产订单：</b>{{ detailRow.orderNo }}</div>
        <div class="meta-item">
          <span class="meta-label">{{ timeColumnLabel }}</span>
          <span class="meta-value">{{ detailRow.timeLabel }}</span>
        </div>
        <div class="meta-item">
          <span class="meta-label">产品类别</span>
          <span class="meta-value">{{ detailRow.category }}</span>
        </div>
        <div class="meta-item">
          <span class="meta-label">生产订单</span>
          <span class="meta-value">{{ detailRow.orderNo }}</span>
        </div>
      </div>
      <el-table :data="detailMaterials" class="lux-table" stripe>
        <el-table-column prop="materialName" label="物料名称" min-width="120" />
        <el-table-column prop="materialType" label="类型" width="80" />
        <el-table-column prop="quantity" label="投入量" align="right">
        <el-table-column prop="materialType" label="类型" width="94">
          <template #default="scope">
            {{ formatNumber(scope.row.quantity, 2) }} {{ scope.row.unit }}
            <span
              class="material-type-tag"
              :class="scope.row.materialType === '原料' ? 'is-raw' : 'is-aux'"
            >
              {{ scope.row.materialType }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="投入量" align="right" min-width="140">
          <template #default="scope">
            <span class="quantity-cell">
              <span class="quantity-value">{{ formatNumber(scope.row.quantity, 2) }}</span>
              <span class="quantity-unit">{{ scope.row.unit }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="unitPrice" label="单价(元)" align="right">
@@ -233,16 +257,25 @@
            {{ formatNumber(scope.row.unitPrice, 2) }}
          </template>
        </el-table-column>
        <el-table-column prop="cost" label="成本(元)" align="right">
        <el-table-column prop="cost" label="成本(元)" align="right" min-width="132">
          <template #default="scope">
            <span class="cost-value">¥{{ formatMoney(scope.row.cost) }}</span>
            <span class="cost-value no-wrap-money">¥{{ formatMoney(scope.row.cost) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="drawer-foot">
        <span>原料：¥{{ formatMoney(detailRawCost) }}</span>
        <span>辅料：¥{{ formatMoney(detailAuxCost) }}</span>
        <span class="strong">合计：¥{{ formatMoney(detailTotalCost) }}</span>
        <div class="foot-item">
          <span class="foot-label">原料</span>
          <span class="foot-value no-wrap-money">¥{{ formatMoney(detailRawCost) }}</span>
        </div>
        <div class="foot-item">
          <span class="foot-label">辅料</span>
          <span class="foot-value no-wrap-money">¥{{ formatMoney(detailAuxCost) }}</span>
        </div>
        <div class="foot-item total">
          <span class="foot-label">合计</span>
          <span class="foot-value no-wrap-money">¥{{ formatMoney(detailTotalCost) }}</span>
        </div>
      </div>
    </el-drawer>
  </div>
@@ -709,19 +742,115 @@
  color: var(--lux-danger);
}

.no-wrap-money {
  display: inline-block;
  white-space: nowrap;
}

.drawer-head {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.meta-item {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--lux-border);
  background: rgba(15, 23, 42, 0.03);
  display: grid;
  gap: 4px;
}

.meta-label {
  font-size: 12px;
  color: var(--lux-subtle);
}

.meta-value {
  color: var(--lux-text);
  font-size: 16px;
  font-weight: 700;
}

.material-type-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.material-type-tag.is-raw {
  color: #15803d;
  background: rgba(22, 163, 74, 0.12);
}

.material-type-tag.is-aux {
  color: #b45309;
  background: rgba(245, 158, 11, 0.16);
}

.quantity-value {
  font-weight: 700;
  color: var(--lux-text);
  margin-right: 6px;
}

.quantity-cell {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.quantity-unit {
  color: var(--lux-subtle);
}

.drawer-foot {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--lux-border);
}

.foot-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--lux-border);
  background: #fff;
}

.foot-label {
  color: var(--lux-subtle);
  font-size: 14px;
}

.foot-value {
  color: var(--lux-text);
  font-weight: 700;
  font-size: 16px;
}

.foot-item.total {
  border-color: rgba(47, 111, 237, 0.26);
  background: rgba(47, 111, 237, 0.08);
}

.foot-item.total .foot-value {
  color: #1e3a8a;
  font-size: 18px;
  font-weight: 800;
}

.pagination-container {
@@ -763,5 +892,14 @@
  .filter-layout {
    flex-direction: column;
  }

  .drawer-head {
    grid-template-columns: 1fr;
  }

  .drawer-foot {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}
</style>