his-weapp/pages/surgery/create/index.wxml

<view class="container">
  <t-message id="t-message" />
  
  <!-- 加载状态 -->
  <view class="loading-container" wx:if="{{loading}}">
    <t-loading theme="circular" size="40rpx" loading />
    <text>加载中...</text>
  </view>

  <!-- 表单内容 -->
  <block wx:else>
    <view class="form-group">
      <view class="form-item">
        <text class="label">手术编号 <text class="required">*</text></text>
        <t-input 
          value="{{formData.surgery_id}}" 
          placeholder="请输入手术编号" 
          bindchange="onInputChange" 
          data-field="surgery_id"
          maxlength="50"
          disabled="{{isEditMode}}"
        />
      </view>

      <view class="form-item">
        <text class="label">手术名称 <text class="required">*</text></text>
        <t-input 
          value="{{formData.surgery_name}}" 
          placeholder="请输入手术名称" 
          bindchange="onInputChange" 
          data-field="surgery_name"
          maxlength="100"
        />
      </view>

      <view class="form-item">
        <text class="label">患者姓名 <text class="required">*</text></text>
        <t-input 
          value="{{formData.patient}}" 
          placeholder="请输入患者姓名" 
          bindchange="onInputChange" 
          data-field="patient"
          maxlength="50" 
        />
      </view>

      <!-- 手术时间选择 -->
      <view class="form-item">
        <text class="label">手术时间 <text class="required">*</text></text>
        <view class="datetime-picker-wrapper" bindtap="showDateTimePicker">
          <t-cell 
            title="{{formData.surgery_time_display || '请选择手术时间'}}" 
            arrow 
            hover 
            data-mode="formData.surgery_time"
            note="{{formData.surgery_time ? '' : '必选'}}"
            t-class="picker-cell"
          />
        </view>
      </view>

      <view class="form-item">
        <text class="label">主刀医生 <text class="required">*</text></text>
        <t-cell 
          title="{{selectedDoctor ? selectedDoctor.name : '请选择主刀医生'}}" 
          arrow 
          hover 
          note="{{selectedDoctor ? selectedDoctor.department.name : '必选'}}"
          bind:click="showDoctorSelector" 
          t-class="picker-cell"
        />
      </view>

      <!-- 设备选择部分 - 使用与手术详情页一致的样式 -->
      <view class="form-item">
        <view class="device-selection-header">
          <text>设备列表</text>
          <view class="add-device-btn" bind:tap="showDeviceSelector">添加设备</view>
        </view>
        
        <!-- 已选择的设备列表 - 新样式 -->
        <view class="selected-devices-list" wx:if="{{selectedSubDevices.length > 0}}">
          <block wx:for="{{selectedSubDevices}}" wx:key="id">
            <view class="device-item">
              <view class="device-item-content">
                <view class="device-info">
                  <view class="device-name">{{item.device_name}}-{{item.name}}</view>
                </view>
                <view class="device-action">
                  <view class="delete-btn" bind:tap="removeDevice" data-index="{{index}}">删除</view>
                </view>
              </view>
              <!-- 设备时间选择 -->
              <view class="device-time-section">
                <view class="time-picker-group">
                  <view class="time-picker-item">
                    <text class="time-label">开始时间</text>
                    <view class="time-picker" bindtap="showDeviceStartTimePicker" data-index="{{index}}">
                      <text class="time-value">{{item.startTimeDisplay || '点击设置'}}</text>
                      <text class="picker-arrow">></text>
                    </view>
                  </view>
                  <view class="time-picker-item">
                    <text class="time-label">结束时间</text>
                    <view class="time-picker" bindtap="showDeviceEndTimePicker" data-index="{{index}}">
                      <text class="time-value">{{item.endTimeDisplay || '点击设置'}}</text>
                      <text class="picker-arrow">></text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </block>
        </view>
        
        <!-- 无设备提示 -->
        <view class="no-devices" wx:else>
          <text>暂无选择设备，请点击"添加设备"按钮添加</text>
        </view>
      </view>
    </view>

    <view class="submit-container">
      <t-button 
        theme="primary" 
        size="large" 
        loading="{{submitting}}"
        disabled="{{submitting}}"
        bind:tap="handleSubmit"
        block>{{isEditMode ? '保存修改' : '创建手术记录'}}</t-button>
    </view>
  </block>

  <!-- 日期时间选择器 -->
  <t-date-time-picker
    title="选择手术时间"
    visible="{{dateTimePickerVisible}}"
    mode="second"
    format="YYYY-MM-DD HH:mm:ss"
    value="{{formData.surgery_time || currentDate}}"
    confirm-btn="确认"
    cancel-btn="取消"
    bind:confirm="onDateTimeConfirm"
    bind:cancel="onDateTimeCancel"
    bind:pick="onDateTimePick"
    bind:change="onDateTimeChange"
    auto-close
    show-week

  />

  <!-- 医生选择器 - 使用级联选择器选项卡风格 -->
  <t-cascader
    visible="{{doctorSelectorVisible}}"
    options="{{doctorCascaderOptions}}"
    title="选择主刀医生"
    theme="tab"
    value="{{selectedDoctorValue}}"
    bind:change="onDoctorCascaderChange"
    bind:pick="onDoctorCascaderPick"
    bind:close="onDoctorCascaderClose"
  />
  
  <!-- 设备选择器 - 使用级联选择器选项卡风格 -->
  <t-cascader
    visible="{{deviceSelectorVisible}}"
    options="{{deviceTree}}"
    title="选择使用设备"
    theme="tab"
    value="{{selectedDeviceValue}}"
    bind:change="onDeviceCascaderChange"
    bind:pick="onDeviceCascaderPick"
    bind:close="onDeviceCascaderClose"
  />

  <!-- 设备开始时间选择器 -->
  <t-date-time-picker
    title="选择设备开始使用时间"
    visible="{{deviceStartTimePickerVisible}}"
    mode="second"
    format="YYYY-MM-DD HH:mm:ss"
    value="{{currentDeviceStartTime || currentDate}}"
    confirm-btn="确认"
    cancel-btn="取消"
    bind:confirm="onDeviceStartTimeConfirm"
    bind:cancel="onDeviceStartTimeCancel"
    auto-close
    show-week
  />

  <!-- 设备结束时间选择器 -->
  <t-date-time-picker
    title="选择设备结束使用时间"
    visible="{{deviceEndTimePickerVisible}}"
    mode="second"
    format="YYYY-MM-DD HH:mm:ss"
    value="{{currentDeviceEndTime || currentDate}}"
    confirm-btn="确认"
    cancel-btn="取消"
    bind:confirm="onDeviceEndTimeConfirm"
    bind:cancel="onDeviceEndTimeCancel"
    auto-close
    show-week
  />
</view>