wms-pda/src/views/modules/mr-issue/mrPickingDetail.vue

<template>
  <div class="pda-container">
    <!-- 头部栏 -->
    <div class="header-bar">
      <div class="header-left" @click="$router.back()">
        <i class="el-icon-arrow-left"></i>
        <span>MR发料</span>
      </div>
      <div class="header-right" @click="$router.push({ path: '/' })">
        首页
      </div>
    </div>

    <!-- 搜索框 -->
    <div class="search-container">
      <el-input clearable class="compact-input" v-model="scanCode" placeholder="请扫描材料纸质标签" prefix-icon="el-icon-search"
        @keyup.enter.native="handleScan" ref="scanInput" />
      <div class="mode-switch">
        <el-switch class="custom-switch" v-model="isRemoveMode" active-color="#ff4949" inactive-color="#13ce66">
        </el-switch>
        <span v-if="isRemoveMode" class="switch-text">{{ '移除' }}</span>
        <span v-else class="switch-text2">{{ '添加' }}</span>
      </div>
    </div>

    <!-- MR信息卡片 -->
    <div class="work-order-list" v-if="mrInfo.orderNo">
      <div class="material-card">
        <div class="card-title">
          <span class="title-label">MR号：{{ mrInfo.orderNo }} &nbsp;&nbsp; 行号：{{ mrInfo.lineNo }} &nbsp;&nbsp; lineItemNo:{{ mrInfo.lineItemNo }}</span>
        </div>

        <!-- 物料描述单独一行 -->
         <div class="part-desc-row">
          <span class="desc-text">{{ mrInfo.partNo }}</span>
        </div>
        <div class="part-desc-row">
          <span class="desc-text">{{ mrInfo.partDesc }}</span>
        </div>

        <div class="card-details">
          <div class="detail-item">
            <div class="detail-label">已发数量</div>
            <div class="detail-value">{{ mrInfo.qtyIssued }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">发料数量</div>
            <div class="detail-value">{{ mrInfo.qtyDue || 0 }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">单位</div>
            <div class="detail-value">{{ mrInfo.unitMeas }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 发料信息确认标题 -->
    <div class="section-title">
      <div class="title-left">
        <i class="el-icon-circle-check"></i>
        <span>发料信息确认</span>
      </div>
    </div>

    <!-- 标签列表 -->
    <div class="label-list">
      <div class="list-header">
        <div class="col-no">NO.</div>
        <div class="col-label">标签条码</div>
        <div class="col-batch">批次号</div>
        <div class="col-qty">标签数量</div>
      </div>

      <div v-for="(label, index) in labelList" :key="label.id" class="list-item">
        <div class="col-no">{{ labelList.length - index }}</div>
        <div class="col-label">{{ label.labelCode }}</div>
        <div class="col-batch">{{ label.batchNo }}</div>
        <div class="col-qty" @click="openEditDialog(label, index)">
          <span class="quantity-display">{{ label.quantity }}</span>
          <i class="el-icon-edit edit-icon"></i>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="labelList.length === 0" class="empty-labels">
        <p>暂无扫描标签</p>
      </div>
    </div>

    <!-- 发料汇总 -->
    <!--    <div class="issue-summary" v-if="labelList.length > 0">
      <div class="summary-item">
        <span class="summary-label">标签总数：</span>
        <span class="summary-value">{{ labelList.length }}</span>
      </div>
      <div class="summary-item">
        <span class="summary-label">发料总量：</span>
        <span class="summary-value">{{ totalIssueQty }}</span>
      </div>
    </div>-->

    <!-- 底部操作按钮 -->
    <div class="bottom-actions">
      <button class="action-btn primary" @click="confirmIssue">
        确认发料
      </button>
      <button class="action-btn secondary" style="margin-left: 10px;" @click="cancelIssue">
        取消
      </button>
    </div>

    <!-- 编辑标签弹框 -->
    <div v-if="showEditDialog" class="edit-overlay">
      <div class="edit-modal">
        <div class="modal-header">
          <span class="modal-title">编辑标签信息</span>
          <i class="el-icon-close close-btn" @click="closeEditDialog"></i>
        </div>

        <div class="modal-body">
          <div class="form-group">
            <label class="form-label">物料标签</label>
            <el-input
              v-model="editForm.labelCode"
              disabled
              class="form-input"
            />
          </div>

          <div class="form-group">
            <label class="form-label">批次号</label>
            <el-input
              v-model="editForm.batchNo"
              disabled
              class="form-input"
            />
          </div>

          <div class="form-group">
            <label class="form-label">库位 <span class="required">*</span></label>
            <el-input
              v-model="editForm.locationId"
              placeholder="请输入库位"
              class="form-input"
            />
          </div>

          <div class="form-group">
            <label class="form-label">发料数量 <span class="required">*</span></label>
            <el-input
              v-model="editForm.quantity"
              type="number"
              :min="0"
              placeholder="请输入发料数量"
              class="form-input"
            />
          </div>
        </div>

        <div class="modal-footer">
          <button class="btn-cancel" @click="closeEditDialog">取消</button>
          <button class="btn-confirm" @click="confirmEdit">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { scanMaterialLabel, confirmMrIssue } from '@/api/mr/mr'
import moment from 'moment'

export default {
  data() {
    return {
      scanCode: '',
      mrInfo: {},
      labelList: [],
      orderNo: '',
      lineNo: '',
      partNo: '',
      isRemoveMode: false, // 默认为添加模式
      material: {},
      // 编辑弹框相关
      showEditDialog: false,
      editForm: {
        labelCode: '',
        batchNo: '',
        locationId: '',
        quantity: 0
      },
      editIndex: -1, // 当前编辑的标签索引
    }
  },
  computed: {
    // 计算发料总量
    totalIssueQty() {
      return this.labelList.reduce((total, label) => {
        return total + (parseFloat(label.quantity) || 0)
      }, 0)
    },
  },
  methods: {
    formatDate(date) {
      return date ? moment(date).format('YYYY-MM-DD') : ''
    },

    // 处理扫描
    handleScan() {
      if (!this.scanCode.trim()) {
        return
      }

      if (this.isRemoveMode) {
        this.removeLabelByCode(this.scanCode.trim())
      } else {
        this.validateAndAddLabel(this.scanCode.trim())
      }
      this.scanCode = ''
    },

    // 验证标签并添加到列表
    validateAndAddLabel(labelCode) {
      const params = {
        labelCode: labelCode,
        orderNo: this.orderNo,
        lineNo: this.lineNo,
        partNo: this.partNo,
        site: localStorage.getItem('site'),
      }

      scanMaterialLabel(params)
        .then(({ data }) => {
          if (data && data.code === 0) {
            // 检查是否已经扫描过
            const exists = this.labelList.find(
              (item) => item.labelCode === labelCode
            )
            if (exists) {
              this.$message.warning('该标签已扫描，请勿重复扫描')
              return
            }

            // 检查物料编码是否匹配
            if (data.labelInfo.partNo !== this.partNo) {
              this.$message.error(
                `扫描的物料编码[${data.labelInfo.partNo}]与选择的物料[${this.partNo}]不匹配`
              )
              return
            }

            // 添加到列表
            this.labelList.push({
              id: Date.now(),
              labelCode: labelCode,
              partNo: data.labelInfo.partNo,
              quantity: data.labelInfo.availableQty,
              batchNo: data.labelInfo.batchNo,
              locationId: data.labelInfo.locationId,
              warehouseId: data.labelInfo.warehouseId,
              wdrNo: data.labelInfo.wdrNo,
              engChgLevel: data.labelInfo.engChgLevel || '1',
            })

            this.$message.success('扫描成功')
          } else {
            this.$message.error(data.msg || '该标签无效，请检查')
          }
        })
        .catch((error) => {
          this.$message.error(error)
        })
    },

    // 通过条码移除标签
    removeLabelByCode(labelCode) {
      const index = this.labelList.findIndex(
        (item) => item.labelCode === labelCode
      )
      if (index !== -1) {
        this.labelList.splice(index, 1)
        this.$message.success('移除成功')
      } else {
        this.$message.warning('未找到该标签')
      }
    },

    // 确认发料
    confirmIssue() {
      if (this.labelList.length === 0) {
        this.$message.warning('请先扫描材料标签')
        return
      }

      // 检查发料数量是否超过需求数量
      const remainQty = this.mrInfo.qtyDue - this.mrInfo.qtyIssued
      if (this.totalIssueQty > remainQty) {
        this.$message.error(
          `发料数量[${this.totalIssueQty}]不能超过剩余需求数量[${remainQty}]`
        )
        return
      }

      const params = {
        site: localStorage.getItem('site'),
        orderNo: this.orderNo,
        lineNo: this.lineNo,
        partNo: this.partNo,
        issueQty: this.totalIssueQty,
        releaseNo: this.material.releaseNo,
        lineItemNo: this.material.lineItemNo,
        selectedMaterials: this.labelList.map((label) => ({
          labelCode: label.labelCode,
          issueQty: label.quantity,
          batchNo: label.batchNo,
          partNo: label.partNo,
          locationId: label.locationId,
          warehouseId: label.warehouseId,
          wdrNo: label.wdrNo,
          engChgLevel: label.engChgLevel || '1',
        })),
      }

      this.$confirm(
        `确认发料 ${this.totalIssueQty} ${this.mrInfo.unitMeas || 'pcs'}？`,
        '确认发料',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          confirmMrIssue(params)
            .then(({ data }) => {
              if (data && data.code === 0) {
                this.$message.success('发料成功')
                this.$router.back()
              } else {
                this.$message.error(data.msg || '发料失败')
              }
            })
            .catch((error) => {
              console.error('发料确认失败:', error)
              this.$message.error('发料失败')
            })
        })
        .catch(() => {
          // 用户取消
        })
    },

    // 取消发料
    cancelIssue() {
      if (this.labelList.length > 0) {
        this.$confirm('取消后将清空已扫描的标签，确定取消吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '继续操作',
          type: 'warning',
        })
          .then(() => {
            this.$router.back()
          })
          .catch(() => {
            // 用户选择继续操作
          })
      } else {
        this.$router.back()
      }
    },

    // 初始化MR信息
    initMrInfo() {
      const params = this.$route.query
      this.mrInfo = {
        orderNo: this.orderNo,
        lineNo: this.lineNo,
        partNo: this.partNo,
        partDesc: this.material.partDesc,
        qtyDue: this.material.qtyDue,
        qtyIssued: this.material.qtyIssued,
        unitMeas: this.material.unitMeas,
        statusCode: this.material.statusCode,
        releaseNo: this.material.releaseNo,
        dueDate: this.material.dueDate,
        lineItemNo: this.material.lineItemNo,
      }
    },

    // 打开编辑弹框
    openEditDialog(label, index) {
      this.editForm = {
        labelCode: label.labelCode,
        batchNo: label.batchNo,
        locationId: label.locationId || '',
        quantity: label.quantity || label.availableQty
      }
      this.editIndex = index
      this.showEditDialog = true
    },

    // 关闭编辑弹框
    closeEditDialog() {
      this.showEditDialog = false
      this.editForm = {
        labelCode: '',
        batchNo: '',
        locationId: '',
        quantity: 0
      }
      this.editIndex = -1
    },

    // 确认编辑
    confirmEdit() {
      // 验证必填字段
      if (!this.editForm.locationId.trim()) {
        this.$message.warning('请输入库位')
        return
      }

      if (!this.editForm.quantity || this.editForm.quantity <= 0) {
        this.$message.warning('请输入有效的发料数量')
        return
      }

      // 更新标签信息
      if (this.editIndex >= 0 && this.editIndex < this.labelList.length) {
        this.labelList[this.editIndex].locationId = this.editForm.locationId
        this.labelList[this.editIndex].quantity = Number(this.editForm.quantity)
        this.$message.success('修改成功')
      }

      this.closeEditDialog()
    },
  },

  mounted() {
    // 获取路由参数
    this.orderNo = this.$route.query.orderNo
    this.lineNo = this.$route.query.lineNo
    this.partNo = this.$route.query.partNo
    this.material = this.$route.query.material

    console.log('路由参数', this.$route.query)

    if (!this.orderNo || !this.lineNo || !this.partNo) {
      this.$message.error('参数错误')
      this.$router.back()
      return
    }

    // 初始化MR信息
    this.initMrInfo()

    // 聚焦扫描框
    this.$nextTick(() => {
      if (this.$refs.scanInput) {
        this.$refs.scanInput.focus()
      }
    })
  },
}
</script>

<style scoped>
.pda-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

/* 头部栏 */
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: #17b3a3;
  color: white;
  height: 40px;
  min-height: 40px;
}

.header-left {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
}

.header-left i {
  margin-right: 8px;
  font-size: 18px;
}

.header-right {
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
}

/* 搜索容器 */
.search-container {
  padding: 12px 16px;
  background: white;
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-container .el-input {
  width: 240px;
  margin-right: 12px;
}

/* 紧凑型输入框样式 */
.compact-input ::v-deep .el-input__inner {
  height: 36px;
  padding: 0 12px 0 35px;
  font-size: 14px;
}

.compact-input ::v-deep .el-input__prefix {
  left: 10px;
}

.compact-input ::v-deep .el-input__suffix {
  right: 30px;
}

/* 模式切换开关 */
.mode-switch {
  position: relative;
  display: inline-block;
}

.custom-switch {
  transform: scale(1.3);
}

/* 中间文字 */
.switch-text {
  position: absolute;
  left: 25%;
  transform: translateX(-50%);
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  font-size: 12px;
  font-weight: 500;
  color: #606266;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  top: 53%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: bold;
  color: white;
  pointer-events: none;
  z-index: 2;
}

.switch-text2 {
  position: absolute;
  left: 75%;
  transform: translateX(-50%);
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  font-size: 12px;
  font-weight: 500;
  color: #606266;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  top: 53%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: bold;
  color: white;
  pointer-events: none;
  z-index: 2;
}

/* 调整 switch 尺寸以便容纳文字 */
.custom-switch ::v-deep .el-switch__core {
  width: 60px;
  height: 28px;
}

/* 内容区域 */
.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

/* 材料卡片 */
.material-card {
  background: white;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.material-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.material-card.selected {
  border-color: #17b3a3;
  background: #f0fffe;
}

.material-card:active {
  transform: translateY(0);
}

/* 卡片标题 */
.card-title {
  margin-bottom: 12px;
}

.title-label {
  font-size: 12px;
  color: #666;
  display: block;
  margin-bottom: 4px;
}

.title-value {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-left: 16px;
}

/* 物料描述行 */
.part-desc-row {
  margin-bottom: 12px;
  padding: 0 4px;
}

.desc-text {
  font-size: 12px;
  color: #666;
  line-height: 1.3;
  word-break: break-all;
}

.work-order-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.work-order-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.work-order-card:active {
  transform: translateY(0);
}

/* 卡片详情 */
.card-details {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;
}

.detail-item {
  flex: 1;
  text-align: center;
  min-width: 50px;
  max-width: 70px;
}

.detail-label {
  font-size: 11px;
  color: #666;
  margin-bottom: 4px;
  line-height: 1.2;
  margin-left: -12px;
}

.detail-value {
  font-size: 13px;
  color: #333;
  line-height: 1.2;
  margin-left: -12px;
}

/* 区域标题 */
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: white;
  margin: 0 16px;
  margin-top: 4px;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid #17b3a3;
}

.title-left {
  display: flex;
  align-items: center;
}

.title-left i {
  color: #17b3a3;
  font-size: 16px;
  margin-right: 8px;
}

.title-left span {
  color: #17b3a3;
  font-size: 14px;
  font-weight: 500;
}

/* 标签列表 */
.label-list {
  background: white;
  margin: 0 16px 12px;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

.list-header {
  display: flex;
  background: #f8f9fa;
  padding: 12px 8px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.list-item {
  display: flex;
  padding: 12px 8px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 12px;
  color: #333;
  align-items: flex-start;
  min-height: 40px;
}

.list-item:last-child {
  border-bottom: none;
}

.col-no {
  width: 30px;
  text-align: center;
}

.col-label {
  flex: 1.5;
  text-align: center;
  word-break: break-all;
  white-space: normal;
  line-height: 1.2;
}

.col-part {
  flex: 1.5;
  text-align: center;
}

.col-batch {
  flex: 1.5;
  text-align: center;
}

.col-qty {
  width: 80px;
  text-align: center;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.quantity-display {
  font-size: 12px;
  color: #333;
}

.edit-icon {
  font-size: 12px;
  color: #17b3a3;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.col-qty:hover .edit-icon {
  opacity: 1;
}

.col-qty:hover {
  background-color: #f0fffe;
  border-radius: 4px;
}

.empty-labels {
  padding: 40px 20px;
  text-align: center;
  color: #999;
}

.empty-labels p {
  margin: 0;
  font-size: 14px;
}

/* 工单列表 */
.work-order-list {
  overflow-y: auto;
  padding: 12px 16px;
}
.work-order-list {
  padding: 8px 12px;
}

/* 发料汇总 */
.issue-summary {
  background: white;
  margin: 0 16px 12px;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
}

.summary-item {
  text-align: center;
}

.summary-label {
  font-size: 12px;
  color: #666;
  display: block;
  margin-bottom: 4px;
}

.summary-value {
  font-size: 16px;
  font-weight: bold;
  color: #17b3a3;
}

/* 底部操作按钮 */
.bottom-actions {
  display: flex;
  padding: 16px;
  gap: 20px;
  background: white;
  margin-top: auto;
}

.action-btn {
  flex: 1;
  padding: 12px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.action-btn.primary {
  background: #17b3a3;
  color: white;
}

.action-btn.primary:hover {
  background: #0d8f7f;
}

.action-btn.secondary {
  border: 1px solid #17b3a3;
  background: white;
  color: #17b3a3;
}

.action-btn.secondary:hover {
  background: #17b3a3;
  color: white;
}

.action-btn:active {
  transform: scale(0.98);
}

/* 响应式设计 */
@media (max-width: 360px) {
  .header-bar {
    padding: 8px 12px;
  }

  .search-container {
    padding: 8px 12px;
  }

  .content-area {
    padding: 8px 12px;
  }

  .material-card {
    padding: 12px;
  }

  .card-details {
    flex-wrap: wrap;
    gap: 6px;
  }

  .detail-item {
    flex: 0 0 48%;
    margin-bottom: 6px;
    min-width: 50px;
  }

  .section-title {
    margin: 0 12px;
    margin-top: 4px;
  }

  .label-list {
    margin: 0 12px 8px;
  }

  .issue-summary {
    margin: 0 12px 8px;
  }

  .card-details {
    flex-wrap: wrap;
    gap: 6px;
  }

  .detail-item {
    flex: 0 0 48%;
    margin-bottom: 6px;
    min-width: 50px;
  }

  .list-header,
  .list-item {
    font-size: 11px;
  }

  .col-label,
  .col-part,
  .col-batch {
    flex: 1.2;
  }
}

/* 编辑弹框样式 */
.edit-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.edit-modal {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.edit-modal .modal-header {
  background: #17b3a3;
  color: white;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.edit-modal .modal-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

.edit-modal .close-btn {
  font-size: 16px;
  cursor: pointer;
  color: white;
  transition: color 0.2s ease;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-modal .close-btn:hover {
  color: #e0e0e0;
}

.edit-modal .modal-body {
  padding: 20px;
}

.edit-modal .form-group {
  margin-bottom: 16px;
}

.edit-modal .form-label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 6px;
  font-weight: 500;
}

.edit-modal .required {
  color: #ff4949;
}

.edit-modal .form-input {
  width: 100%;
}

.edit-modal .form-input ::v-deep .el-input__inner {
  height: 40px;
  border: 2px solid #dcdfe6;
  border-radius: 6px;
  font-size: 14px;
  padding: 0 12px;
}

.edit-modal .form-input ::v-deep .el-input__inner:focus {
  border-color: #17b3a3;
  outline: none;
}

.edit-modal .form-input ::v-deep .el-input__inner:disabled {
  background: #f5f7fa;
  color: #c0c4cc;
  border-color: #e4e7ed;
}

.edit-modal .modal-footer {
  padding: 16px 20px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  border-top: 1px solid #f0f0f0;
}

.edit-modal .btn-cancel {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #dcdfe6;
  background: white;
  color: #606266;
}

.edit-modal .btn-cancel:hover {
  background: #f5f7fa;
  border-color: #c0c4cc;
}

.edit-modal .btn-confirm {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #17b3a3;
  background: #17b3a3;
  color: white;
}

.edit-modal .btn-confirm:hover {
  background: #13998c;
  border-color: #13998c;
}
</style>