exhibit-front/subPages/repair/maintainSubmit.vue

<template>
  <view class="maintain-submit">
    <!-- 修改状态 -->
    <view class="status-item">
      <!-- 维修状态和状态选择 -->
      <view class="status-row">
        <text class="status-label">维修状态</text>
        <view class="status-select" @click="showStatusPicker">
          <text class="status-value" :class="{ placeholder: !selectedStatus }">{{ selectedStatus || '故障中' }}</text>
          <uv-icon name="arrow-down" size="18" color="#000"></uv-icon>
        </view>
      </view>
      
      <!-- 修改状态按钮 -->
      <button class="status-btn" :class="{ active: statusType === 'modify' }" @click="modifyStatus">
        <text class="status-text">修改状态</text>
      </button>
    </view>
    
    <!-- 保修基本信息 -->
    <view class="repair-info">
      <view class="info-header">
        <view class="red-line"></view>
        <text class="info-title">报修基本信息</text>
      </view>
      
      <!-- 报修日期 -->
      <view class="form-item">
        <text class="label">报修日期</text>
        <text class="value">{{ repairData.malfunctionDate }}</text>
      </view>
      
      <!-- 故障紧急程度 -->
      <view class="form-item">
        <text class="label">故障紧急程度</text>
        <text class="value">{{ repairData.urgency === '1' ? '紧急' : '一般' }}</text>
      </view>
      
      <!-- 故障情况描述 -->
      <view class="form-item">
        <text class="label">故障情况描述</text>
      </view>
      
      <!-- 故障情况描述文本区域 -->
      <view class="content-text">
        <uv-textarea 
          v-model="repairData.malfunctionDesc" 
          placeholder="展品故障描述" 
          :maxlength="200"
          :show-confirm-bar="false"
          height="60"
          border="none"
          disabled
          :textStyle="{ color: '#000' }"
          :custom-style="{ backgroundColor: '#f5f5f5' }"
        ></uv-textarea>
      </view>
      
      <!-- 故障图片 -->
      <view class="form-item" v-if="!isCollapsed">
        <text class="label">故障图片</text>
      </view>
      
      <view class="image-container" v-if="!isCollapsed">
        <image 
          class="uploaded-image" 
          v-for="(img, index) in getImageList(repairData.malfunctionImage)" 
          :key="index"
          :src="img.trim()" 
          mode="aspectFill"
          @click="previewImage(img.trim())"
        ></image>
      </view>
      
      <!-- 故障首次发生时间 -->
      <view class="form-item" v-if="!isCollapsed">
        <text class="label">故障首次发生时间</text>
        <text class="value">{{ repairData.firstDate }}</text>
      </view>
      
      <!-- 发生频率 -->
      <view class="form-item" v-if="!isCollapsed">
        <text class="label">发生频率</text>
        <text class="value red-text">{{ repairData.frequency === '1' ? '间歇性问题' : '持续性问题' }}</text>
      </view>
      
      <!-- 故障发生频率的触发条件 -->
      <view class="content-text" v-if="!isCollapsed">
        <uv-textarea 
          v-model="repairData.reason" 
          placeholder="故障发生频率的触发条件" 
          :maxlength="200"
          :show-confirm-bar="false"
          height="60"
          border="none"
          disabled
          :textStyle="{ color: '#000' }"
          :custom-style="{ backgroundColor: '#f5f5f5' }"
        ></uv-textarea>
      </view>

      
      <!-- 是否影响使用 -->
      <view class="form-item" v-if="!isCollapsed">
        <text class="label">是否影响使用</text>
        <text class="value red-text">{{ repairData.isAffectUse === '1' ? '是' : '否' }}</text>
      </view>
      
      <!-- 是否采取临时措施 -->
      <view class="form-item" v-if="!isCollapsed">
        <text class="label">是否采取临时措施</text>
        <text class="value red-text">{{ repairData.isTakeMeasure === '1' ? '是' : '否' }}</text>
      </view>
      
      <!-- 如有采取临时措施请填写措施说明 -->
      <view class="content-text" v-if="!isCollapsed">
        <uv-textarea 
          v-model="repairData.measureDesc" 
          placeholder="如果有采取临时措施请填写措施说明" 
          :maxlength="200"
          :show-confirm-bar="false"
          height="60"
          border="none"
          disabled
          :textStyle="{ color: '#000' }"
          :custom-style="{ backgroundColor: '#f5f5f5' }"
        ></uv-textarea>
      </view>
      
      <!-- 是否影响体验 -->
      <view class="form-item" v-if="!isCollapsed">
        <text class="label">是否影响体验</text>
        <text class="value red-text">{{ repairData.isAffectUsage === '1' ? '是' : '否' }}</text>
      </view>
      
      <view class="form-item" v-if="!isCollapsed">
        <text class="label">备注</text>
      </view>
      <!-- 备注 -->
      <view class="content-text" v-if="!isCollapsed">
        
        <uv-textarea 
          v-model="repairData.remark" 
          placeholder="备注" 
          :maxlength="200"
          :show-confirm-bar="false"
          height="60"
          border="none"
          disabled
          :textStyle="{ color: '#000' }"
          :custom-style="{ backgroundColor: '#f5f5f5' }"
        ></uv-textarea>
      </view>
      
          
      
      <!-- 查看全部/收起按钮 -->
      <view class="collapse-btn" @click="toggleCollapse">
        <text class="collapse-text">{{ isCollapsed ? '查看全部' : '收起' }}</text>
        <text class="collapse-icon">{{ isCollapsed ? '▼' : '▲' }}</text>
      </view>
    </view>
    
    <!-- 处理内容 -->
    <view class="process-content">
      <view class="info-header">
        <view class="red-line"></view>
        <text class="info-title">处理内容</text>
      </view>
      
      <!-- 维修人 -->
      <view class="form-item">
        <text class="label">维修人</text>
        <view class="input-area" >
          <input 
            v-model="processData.repairName" 
            placeholder="请填写" 
            class="input-field"
            ref="maintainerInput"
          />
        </view>
      </view>
      
      <!-- 联系方式 -->
      <view class="form-item">
        <text class="label">联系方式</text>
        <view class="input-area" >
          <input 
            v-model="processData.phone" 
            placeholder="请填写" 
            class="input-field"
            ref="maintainerInput"
          />
        </view>
      </view>
      
      <!-- 维修日期 -->
      <view class="form-item" @click="showDatePicker">
        <text class="label">维修日期</text>
        <view class="select-area">
          <text class="value" :class="{ placeholder: !processData.repairDate }">{{ processData.repairDate || '请选择' }}</text>
          <uv-icon name="arrow-down" size="18" color="#000"></uv-icon>
        </view>
      </view>
      
      <!-- 处理内容 -->
      <view class="form-item">
        <text class="label">处理内容</text>
      </view>
      <view class="textarea-container">
        <uv-textarea 
          v-model="processData.content" 
          placeholder="请输入处理内容" 
          :maxlength="200"
          :show-confirm-bar="false"
          height="60"
          border="none"
          :textStyle="{ color: '#000' }"
          :custom-style="{ backgroundColor: '#f5f5f5' }"
        ></uv-textarea>
      </view>
      
      <!-- 上传图片 -->
      <view class="form-item">
        <text class="label">上传图片</text>
      </view>
      <view class="image-upload">
        <view v-for="(img, index) in getImageList(processData.image)" :key="index" class="image-item">
          <image :src="img.trim()" mode="aspectFill" @click="previewImage(img.trim())"></image>
          <view class="delete-btn" @click="deleteImage(index)">
            <uv-icon name="close" size="12" color="#fff"></uv-icon>
          </view>
        </view>
        <view class="upload-btn" @click="uploadImage">
          <uv-icon name="camera" size="34" color="#C70019"></uv-icon>
        </view>
      </view>
      
      <!-- 是否产生费用 -->
      <view class="form-item">
        <text class="label">是否产生费用</text>
        <view class="radio-options">
          <view 
            class="radio-item" 
            :class="{ active: processData.isExpend === '1' }"
            @click="selectCost('1')"
          >
            <view class="radio-dot" :class="{ active: processData.isExpend === '1' }"></view>
            <text :class="{ active: processData.isExpend === '1' }">是</text>
          </view>
          <view 
            class="radio-item" 
            :class="{ active: processData.isExpend === '0' }"
            @click="selectCost('0')"
          >
            <view class="radio-dot" :class="{ active: processData.isExpend === '0' }"></view>
            <text :class="{ active: processData.isExpend === '0' }">否</text>
          </view>
        </view>
      </view>
      
      <!-- 产生费用 -->
      <view class="form-item" v-if="processData.isExpend === '1'">
        <text class="label">产生费用</text>
        <view class="input-area" >
          <input 
            v-model="amount" 
            placeholder="请输入费用" 
            disabled
            class="input-field"
            ref="maintainerInput"
          />
        </view>
      </view>
      
      <!-- 费用详情表格 -->
      <view class="cost-table" v-if="processData.isExpend === '1'">
        <view class="table-header">
          <text class="header-cell">费用名称</text>
          <text class="header-cell">数量</text>
          <text class="header-cell">金额</text>
          <text class="header-cell"></text>
        </view>
        
        <view class="table-row" v-for="(item, index) in processData.costDetails" :key="index">
          <view class="cell-input">
            <uv-input 
              v-model="item.name" 
              placeholder="费用名称" 
              border="none"
              :custom-style="{ backgroundColor: 'transparent', fontSize: '28rpx' }"
            ></uv-input>
          </view>
          <view class="cell-input">
            <uv-input 
              v-model="item.quantity" 
              placeholder="数量" 
              border="none"
              :custom-style="{ backgroundColor: 'transparent', fontSize: '28rpx' }"
            ></uv-input>
          </view>
          <view class="cell-input">
            <uv-input 
              v-model="item.amount" 
              placeholder="金额" 
              border="none"
              :custom-style="{ backgroundColor: 'transparent', fontSize: '28rpx' }"
            ></uv-input>
          </view>
          <view class="cell-action">
            <view class="action-btn delete-btn" @click="deleteCostItem(index)" v-if="processData.costDetails.length > 1">
              <uv-icon name="close" size="14" color="#fff"></uv-icon>
            </view>
            <view class="action-btn add-btn" @click="addCostItem" v-if="index === processData.costDetails.length - 1">
              <uv-icon name="plus" size="14" color="#fff"></uv-icon>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 问题是否解决 -->
      <view class="form-item">
        <text class="label">问题是否解决</text>
        <view class="radio-options">
          <view 
            class="radio-item" 
            :class="{ active: processData.isFix === '1' }"
            @click="selectResolved('1')"
          >
            <view class="radio-dot" :class="{ active: processData.isFix === '1' }"></view>
            <text :class="{ active: processData.isFix === '1' }">是</text>
          </view>
          <view 
            class="radio-item" 
            :class="{ active: processData.isFix === '0' }"
            @click="selectResolved('0')"
          >
            <view class="radio-dot" :class="{ active: processData.isFix === '0' }"></view>
            <text :class="{ active: processData.isFix === '0' }">否</text>
          </view>
        </view>
      </view>
      
      <!-- 备注 -->
      <view class="form-item">
        <text class="label">备注</text>
      </view>
      <view class="textarea-container">
        <uv-textarea 
          v-model="processData.remark" 
          placeholder="备注" 
          :maxlength="200"
          :show-confirm-bar="false"
          height="60"
          border="none"
          :custom-style="{ backgroundColor: '#f5f5f5' }"
        ></uv-textarea>
      </view>
      
      <!-- 立即维修按钮 -->
      <view class="repair-btn-container">
        <uv-button 
          type="primary" 
          text="立即维修" 
          :custom-style="{ backgroundColor: '#C70019', borderRadius: '25px' }"
          @click="startRepair"
        ></uv-button>
      </view>
    </view>
    
    <!-- 日期选择器 -->
    <uv-datetime-picker 
      confirm-color="#C70019"
      ref="datePicker"
      mode="date"
      @confirm="confirmDate"
    ></uv-datetime-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusType: 'modify',
      selectedStatus: '故障中',
      isCollapsed: true,
      id: '',
      // 映射表
      statusMap: {
        '故障中': '0',
        '维修中': '1',
        '已解决': '2'
      },
      // 要有一个相反的引射表
      reverseStatusMap: {
        '0': '故障中',
        '1': '维修中',
        '2': '已解决'
      },
      // 报修基本信息（只读）
      repairData: {
        malfunctionDate: '2025-08-28', // 从接口 malfunctionDate 字段获取
        urgency: '0', // 从接口 urgency 字段映射：0-一般，1-紧急，2-非常紧急
        malfunctionDesc: '故障描述', // 从接口 malfunctionDesc 字段获取
        malfunctionImage: '', // 从接口 malfunctionImage 字段获取（字符串格式，多张图片用逗号分隔）
        firstDate: '2025-08-27', // 从接口 firstDate 字段获取
        frequency: '0', // 从接口 frequency 字段映射：0-偶发性，1-持续性
        reason: '发生频率触发条件', // 从接口 reason 字段获取
        isAffectUse: '0', // 从接口 isAffectUse 字段映射：0-否，1-是
        isMeasure: '0', // 从接口 isMeasure 字段映射：0-否，1-是
        measureDesc: '措施说明', // 从接口 measureDesc 字段获取
        isAffectExperience: '0', // 从接口 isAffectExperience 字段映射：0-否，1-是
        remark: '备注', // 从接口 remark 字段获取
        status: '0', // 从接口 status 字段获取
      },
      
      // 处理内容（可编辑）
      processData: {
        repairName: '',
        phone: '',
        repairDate: '',
        content: '',
        image: '',
        isExpend: '0',
        costDetails: [
          { name: '', quantity: '', amount: '' }
        ],
        isFix: '0',
        remark: ''
      },
    }
  },
  computed: {
    // 计算总金额
    amount() {
      return this.processData.costDetails.reduce((sum, item) => {
        return sum + (Number(item.quantity) * parseFloat(item.amount || 0))
      }, 0)
    }
  },
  async onShow(){
    await this.getRepairDetail()
  },
  onLoad(args){
    this.id = args.id
  },
  methods: {
    // 修改状态
    async modifyStatus(){
      const res = await this.$api.exhibit.updateMalfunction({
        id: this.id,
        status: this.statusMap[this.selectedStatus]
      })
      if (res.code === 200) {
        uni.showToast({
          title: '修改成功',
          icon: 'success'
        })
      }
    },
    
    // 获取报修详情
    async getRepairDetail() {
      const queryRes = await this.$api.exhibit.queryMalfunctionById({
        malfunctionId: this.id
      })
      if (queryRes.code === 200) {
        this.repairData = queryRes.result
        // 状态字段反引射表 
        this.selectedStatus = this.reverseStatusMap[this.repairData.status]
      }
    },

    // 立即维修
    async startRepair() {
      // 验证必填项
      if (!this.processData.repairName) {
        uni.showToast({
          title: '请输入维修人',
          icon: 'none'
        })
        return
      }
      
      if (!this.processData.phone) {
        uni.showToast({
          title: '请输入联系方式',
          icon: 'none'
        })
        return
      }
      
      if (!this.processData.repairDate) {
        uni.showToast({
          title: '请选择维修日期',
          icon: 'none'
        })
        return
      }
      
      if (!this.processData.content) {
        uni.showToast({
          title: '请输入处理内容',
          icon: 'none'
        })
        return
      }
      
      if (this.processData.isFix === null) {
        uni.showToast({
          title: '请选择问题是否解决',
          icon: 'none'
        })
        return
      }

      if (this.processData.isExpend === '1') {
        // 如果总金额为0则没有消费信息
        if (!this.amount) {
          uni.showToast({
            title: '请添加费用明细',
            icon: 'none'
          })
          return
        }
      }else {

      }
      const tempData = {...this.processData}
      delete tempData.costDetails
      const tempDataList = [...this.processData.costDetails]
      if (this.processData.isExpend === '1') {
        tempData.expenseList = tempDataList.map(item => `${item.name},${item.quantity},${item.amount}`).join(';')
      }else {
        delete tempData.expenseList
      }
      const submitRes = await this.$api.exhibit.addRepair({
        id: this.id,
        ...tempData,
        amount: this.amount
      })

      if (submitRes.code === 200) {
        uni.showToast({
          title: submitRes.message,
          icon: 'none'
        })
      }else {
        uni.showToast({
          title: submitRes.message,
          icon: 'none'
        })
      }
    },

    // 获取图片列表
    getImageList(imageStr) {
      if (!imageStr || typeof imageStr !== 'string') {
        return []
      }
      return imageStr.split(',').filter(img => img && img.trim())
    },
    // 切换折叠状态
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed
    },
    
    // 预览图片
    previewImage(img) {
      uni.previewImage({
        urls: [img],
        current: img
      })
    },
    
    // 显示日期选择器
    showDatePicker() {
      this.$refs.datePicker.open()
    },
    
    // 确认日期
    confirmDate(e) {      
      this.processData.repairDate = this.$utils.formatTime(e.value)
    },
    
    // 上传图片
    async uploadImage() {
      try {
        const result = await this.$utils.chooseAndUpload()
        if (result && result.success) {
          console.log(result);
          
          // 将新图片URL添加到字符串中
          if (this.processData.image) {
            this.processData.image += ',' + result.url
          } else {
            this.processData.image = result.url
          }
        }
      } catch (error) {
        console.error('图片上传失败:', error)
        uni.showToast({
          title: '图片上传失败',
          icon: 'error'
        })
      }
    },
    
    // 删除图片
    deleteImage(index) {
      const imageList = this.getImageList(this.processData.image)
      imageList.splice(index, 1)
      this.processData.image = imageList.join(',')
    },
    
    // 选择是否产生费用
    selectCost(value) {
      this.processData.isExpend = value
      if (!value) {
        this.processData.amount = 0
        this.processData.costDetails = [{ name: '', quantity: '', amount: '' }]
      }
    },
    
    // 添加费用项
    addCostItem() {
      this.processData.costDetails.push({ name: '', quantity: '', amount: '' })
    },
    
    // 删除费用项
    deleteCostItem(index) {
      this.processData.costDetails.splice(index, 1)
    },
    
    // 选择问题是否解决
    selectResolved(value) {
      this.processData.isFix = value
    },
    
    // 显示状态选择器
    showStatusPicker() {
      uni.showActionSheet({
        itemList: ['故障中', '维修中', '已解决'],
        success: (res) => {
          const statusList = ['故障中', '维修中', '已解决']
          this.selectedStatus = statusList[res.tapIndex]
        }
      })
    },
    

  }
}
</script>

<style lang="scss" scoped>
.maintain-submit {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 200rpx;
}

// 修改状态
.status-item {
  margin: 18rpx;
  background: #ffffff;
  border-radius: 15rpx;
  box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
  padding: 20rpx 40rpx;
  
  .status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24rpx;
    
    .status-label {
      font-size: 30rpx;
      color: $primary-text-color;
      // font-weight: bold;
    }
    
    .status-select {
      display: flex;
      align-items: center;
      gap: 23rpx;
      padding: 12rpx 24rpx;
      // background-color: #f5f5f5;
      border-radius: 8rpx;
      // min-width: 200rpx;
      justify-content: space-between;
      
      .status-value {
        font-size: 28rpx;
        color: $primary-text-color;
        
        &.placeholder {
          color: $secondary-text-color;
        }
      }
    }
  }
  
  .status-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    // padding: 16rpx 32rpx;
    // border: 2rpx solid #ddd;
    border-radius: full;
    background-color: #fff;
    width: 419rpx;
    height: 78rpx;
    border-radius: 39rpx;
    &.active {
      border-color: $primary-color;
      background-color: $primary-color;
      
      .status-text {
        color: #fff;
      }
    }
    
    .status-text {
      font-size: 30rpx;
      color: $secondary-text-color;
    }
  }
}

// 报修基本信息和处理内容通用样式
.repair-info, .process-content {
  margin: 18rpx;
  background: #ffffff;
  border-radius: 15rpx;
  box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
  padding: 30rpx;
  
  .info-header {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    
    .red-line {
      width: 9rpx;
      height: 33rpx;
      background-color: $primary-color;
      margin-right: 7rpx;
      border-radius: 5rpx;
    }
    
    .info-title {
      font-size: 30rpx;
      font-weight: bold;
      color: $primary-text-color;
    }
  }
  
  .form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18rpx 0;
    border-bottom: 2rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    .input-area {
      flex: 1;
      // background-color: #f5f5f5;
      border-radius: 8rpx;
      padding: 2rpx 24rpx;
      margin-left: 24rpx;
      
      .input-field {
        width: 100%;
        font-size: 30rpx;
        color: $primary-text-color;
        background: transparent;
        border: none;
        outline: none;
        text-align: right;
        
        &::placeholder {
          color: $secondary-text-color;
        }
      }
    }
    .label {
      font-size: 30rpx;
      color: $primary-text-color;
      flex-shrink: 0;
      
      &.active {
        font-weight: bold;
      }
    }
    
    .value {
      font-size: 30rpx;
      color: $primary-text-color;
      
      &.placeholder {
        color: $secondary-text-color;
      }
      
      &.red-text {
        color: $primary-color;
      }
    }
    
    .select-area {
      display: flex;
      align-items: center;
      gap: 16rpx;
    }
  }
  
  .content-text {
    // padding: 16rpx 0;
    margin-bottom: 16rpx;
    
    text {
      font-size: 30rpx;
      color: $secondary-text-color;
      line-height: 1.5;
    }
  }
  
  .image-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24rpx;
    margin: 16rpx 0;
    
    .uploaded-image {
      width: 160rpx;
      height: 160rpx;
      // border-radius: 8rpx;
    }
  }
  
  .collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
    padding: 30rpx 0 0;
    margin-top: 16rpx;
    border-top: 2rpx solid #f0f0f0;
    
    .collapse-text {
      font-size: 28rpx;
      color: $primary-color;
    }
    
    .collapse-icon {
      font-size: 24rpx;
      color: $primary-color;
    }
  }
}

// 处理内容特有样式
.process-content {

  

  
  .textarea-container {
    margin: 16rpx 0;
    background-color: #f5f5f5;
    border-radius: 8rpx;
    padding: 8rpx 16rpx;
  }
  
  .image-upload {
    display: flex;
    flex-wrap: wrap;
    gap: 24rpx;
    margin: 16rpx 0;
    
    .upload-btn {
      width: 160rpx;
      height: 160rpx;
      border: 2rpx dashed $primary-color;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      border-radius: 8rpx;
    }
    
    .image-item {
      position: relative;
      width: 160rpx;
      height: 160rpx;
      
      image {
        width: 100%;
        height: 100%;
        border-radius: 8rpx;
      }
      
      .delete-btn {
        position: absolute;
        top: -12rpx;
        right: -12rpx;
        width: 40rpx;
        height: 40rpx;
        background-color: #ff4757;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  
  .radio-options {
    display: flex;
    gap: 80rpx;
    
    .radio-item {
      display: flex;
      align-items: center;
      gap: 16rpx;
      
      .radio-dot {
        width: 32rpx;
        height: 32rpx;
        border: 4rpx solid #ddd;
        border-radius: 50%;
        position: relative;
        
        &.active {
          border-color: $primary-color;
          
          &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 16rpx;
            height: 16rpx;
            background-color: $primary-color;
            border-radius: 50%;
          }
        }
      }
      
      text {
        font-size: 30rpx;
        color: $secondary-text-color;
        
        &.active {
          color: $primary-color;
        }
      }
    }
  }
  
  // 费用表格样式
  .cost-table {
    margin: 16rpx 0;
    border: 2rpx solid #f0f0f0;
    border-radius: 8rpx;
    overflow: hidden;
    
    .table-header {
      display: flex;
      background-color: #f8f8f8;
      
      .header-cell {
        flex: 1;
        padding: 24rpx 16rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: $primary-text-color;
        text-align: left;
        border-right: 2rpx solid #f0f0f0;
        
        &:first-child {
          flex: 2;
          text-align: left;
        }
        
        &:last-child {
          border-right: none;
        }
      }
    }
    
    .table-row {
      display: flex;
      border-top: 2rpx solid #f0f0f0;
      
      .cell-input {
        flex: 1;
        padding: 8rpx;
        border-right: 2rpx solid #f0f0f0;
        
        &:first-child {
          flex: 2;
        }
        
        &:last-child {
          border-right: none;
        }
      }
      
      .cell-action {
        width: 120rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8rpx;
        padding: 8rpx;
        
        .action-btn {
          width: 36rpx;
          height: 36rpx;
          padding: 4rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          
          &.add-btn {
            background-color: #1a9c10;
          }
          
          &.delete-btn {
            background-color: $primary-color;
          }
        }
      }
    }
  }
  
  // 立即维修按钮
  .repair-btn-container {
    margin-top: 40rpx;
    padding-top: 32rpx;
    border-top: 2rpx solid #f0f0f0;
  }
}
</style>