yss-project/src/app/pages/designer/project-detail/components/order-creation/order-creation.component.html

<div class="order-creation-container">
  <div class="section-header">
    <h3>订单分配信息</h3>
    <span class="required-note">* 为必填项</span>
    <div class="header-actions">
      <button type="button" class="btn-primary" (click)="showPricingRules()">
        报价规则配置
      </button>
      <button type="button" class="btn-secondary" (click)="toggleStagnantFilter()">
        @if (hideStagnantProjects) { 隐藏停滞项目：已开启 } @else { 隐藏停滞项目：未开启 }
      </button>
    </div>
  </div>

  <form [formGroup]="orderForm" class="order-form">
    <!-- 自动报价生成 -->
    <div class="form-group">
      <label class="form-label">自动报价生成</label>
      <div class="auto-quotation-section">
        <div class="quotation-selectors">
          <div class="selector-group">
            <label for="spaceType">空间类型</label>
            <select id="spaceType" class="form-select" [(ngModel)]="selectedSpaceType">
              <option value="">请选择空间类型</option>
              @for (space of spaceTypeConfig(); track space.type) {
                <option [value]="space.type">{{ space.type }} ({{ space.basePrice }}元/人天)</option>
              }
            </select>
          </div>
          <div class="selector-group">
            <label for="styleLevel">风格等级</label>
            <select id="styleLevel" class="form-select" [(ngModel)]="selectedStyleLevel">
              <option value="">请选择风格等级</option>
              @for (style of styleLevelConfig(); track style.level) {
                <option [value]="style.level">{{ style.name }} ({{ style.multiplier }}x)</option>
              }
            </select>
          </div>
        </div>
        <div class="quotation-actions">
          <button type="button" class="btn-primary" (click)="generateAutoQuotation()">
            生成报价
          </button>
        </div>
      </div>
    </div>

    <!-- 生成的报价清单 -->
    @if (generatedQuotation().length > 0) {
      <div class="form-group">
        <label class="form-label">生成的报价清单</label>
        <div class="quotation-result">
          @for (rule of generatedQuotation(); track rule.spaceType) {
            <div class="quotation-item">
              <div class="item-header">
                <h4>{{ rule.spaceType }} - {{ rule.finalPrice }}元</h4>
                <div class="item-actions">
                  <button type="button" class="btn-text" (click)="showAdjustModal = true">调整价格</button>
                </div>
              </div>
              <div class="item-details">
                <p><strong>基础价格：</strong>{{ rule.basePrice }}元/人天</p>
                <p><strong>风格系数：</strong>{{ rule.styleMultiplier }}x</p>
                <p><strong>服务内容：</strong>{{ rule.description }}</p>
                <p><strong>包含服务：</strong>{{ getServiceDescription(rule.spaceType, selectedStyleLevel()) }}</p>
              </div>
            </div>
          }
        </div>
      </div>
    }

    <!-- 订单金额 -->
    <div class="form-group">
      <label for="orderAmount" class="form-label required">订单金额</label>
      <div class="input-wrapper">
        <input
          id="orderAmount"
          type="number"
          formControlName="orderAmount"
          class="form-input"
          placeholder="请输入订单金额"
          min="0.01"
          step="0.01"
        />
        <span class="currency-unit">元</span>
      </div>
      @if (orderAmount?.invalid && orderAmount?.touched) {
        <div class="error-message">
          @if (orderAmount?.errors?.['required']) {
            <span>订单金额为必填项</span>
          }
          @if (orderAmount?.errors?.['min']) {
            <span>订单金额必须大于0</span>
          }
          @if (orderAmount?.errors?.['pattern']) {
            <span>请输入有效的金额格式</span>
          }
        </div>
      }
    </div>



    <!-- 交付时间 -->
    <div class="form-group">
      <label for="deliveryTime" class="form-label required">交付时间</label>
      <input
        id="deliveryTime"
        type="date"
        formControlName="deliveryTime"
        class="form-input"
      />
      @if (deliveryTime?.invalid && deliveryTime?.touched) {
        <div class="error-message">
          <span>交付时间为必填项</span>
        </div>
      }
    </div>

    <!-- 报价明细组件 -->
    <app-quotation-details 
      [projectData]="{ customerInfo: {}, requirementInfo: {} }"
      (dataChange)="onQuotationDataChange($event)">
    </app-quotation-details>
  </form>
</div>

<!-- 报价规则配置弹窗 -->
@if (showPricingRulesModal()) {
  <div class="modal-overlay" (click)="hidePricingRules()">
    <div class="modal-content pricing-rules-modal" (click)="$event.stopPropagation()">
      <div class="modal-header">
        <h3>报价规则配置</h3>
        <button type="button" class="close-btn" (click)="hidePricingRules()">×</button>
      </div>
      
      <div class="modal-body">
        <!-- 空间类型配置 -->
        <div class="config-section">
          <div class="section-header">
            <h4>空间类型价格配置</h4>
            <button type="button" class="btn-secondary" (click)="addSpaceType()">添加空间类型</button>
          </div>
          <div class="config-list">
            @for (space of spaceTypeConfig(); track $index; let i = $index) {
              <div class="config-item">
                <div class="config-fields">
                  <input type="text" [(ngModel)]="space.type" placeholder="空间类型" class="field-input">
                  <input type="number" [(ngModel)]="space.basePrice" placeholder="基础价格" class="field-input">
                  <input type="text" [(ngModel)]="space.description" placeholder="描述" class="field-input">
                  <button type="button" class="btn-danger" (click)="removeSpaceType(i)">删除</button>
                </div>
              </div>
            }
          </div>
        </div>

        <!-- 风格等级配置 -->
        <div class="config-section">
          <div class="section-header">
            <h4>风格等级系数配置</h4>
            <button type="button" class="btn-secondary" (click)="addStyleLevel()">添加风格等级</button>
          </div>
          <div class="config-list">
            @for (style of styleLevelConfig(); track $index; let i = $index) {
              <div class="config-item">
                <div class="config-fields">
                  <input type="text" [(ngModel)]="style.level" placeholder="等级代码" class="field-input">
                  <input type="text" [(ngModel)]="style.name" placeholder="等级名称" class="field-input">
                  <input type="number" [(ngModel)]="style.multiplier" step="0.1" placeholder="系数" class="field-input">
                  <input type="text" [(ngModel)]="style.description" placeholder="描述" class="field-input">
                  <button type="button" class="btn-danger" (click)="removeStyleLevel(i)">删除</button>
                </div>
              </div>
            }
          </div>
        </div>
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn-secondary" (click)="hidePricingRules()">取消</button>
        <button type="button" class="btn-primary" (click)="savePricingRules()">保存配置</button>
      </div>
    </div>
  </div>
}