Merge branch 'master' of http://lanpucloud.cn:1111/r/SC/gfzl

zhuguifei

7 天以前 2b31fa203f3435a582be51f45899d99164c9917a

 ruoyi-plus-soybean/src/views/report/demo/index.vue

@@ -92,9 +92,7 @@
const activeCell = ref<{ table: 'summary' | 'detail'; rowIndex: number; field: string } | null>(null);
const editModalOpen = ref(false);
const editValue = ref('');
const editMeta = ref<{ table: 'summary' | 'detail'; rowIndex: number; field: string; label: string } | null>(
  null
);
const editMeta = ref<{ table: 'summary' | 'detail'; rowIndex: number; field: string; label: string } | null>(null);

const summaryFieldLabels: Record<string, string> = {
  sampleNo: '样品编号',
@@ -163,9 +161,7 @@

function isActiveCell(table: 'summary' | 'detail', rowIndex: number, field: string) {
  return (
    activeCell.value?.table === table &&
    activeCell.value?.rowIndex === rowIndex &&
    activeCell.value?.field === field
    activeCell.value?.table === table && activeCell.value?.rowIndex === rowIndex && activeCell.value?.field === field
  );
}

@@ -201,7 +197,7 @@
    <NCard
      :bordered="false"
      size="small"
      class="card-wrapper flex flex-col sm:flex-1-hidden"
      class="flex flex-col card-wrapper sm:flex-1-hidden"
      content-style="padding: 0; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column;"
    >
      <div class="report-root">
@@ -225,187 +221,187 @@
            <div class="report-table-scroll">
              <table class="report-table">
                <thead>
                <tr>
                  <th rowspan="2">样品编号</th>
                  <th rowspan="2">牌号</th>
                  <th rowspan="2">生产厂</th>
                  <th rowspan="2">规格</th>
                  <th rowspan="2">条码</th>
                  <th rowspan="2">盒码</th>
                  <th rowspan="2">检测形式</th>
                  <th colspan="5">包装标识</th>
                  <th colspan="3">条码识别等级</th>
                  <th rowspan="2">外观扣分</th>
                  <th rowspan="2">得分</th>
                  <th rowspan="2">结论</th>
                  <th rowspan="2">备注（缺陷描述/问题内容）</th>
                </tr>
                <tr>
                  <th>箱标识</th>
                  <th>条盒标识</th>
                  <th>盒条码</th>
                  <th>条盒码</th>
                  <th>同步现场结果</th>
                  <th>等级A</th>
                  <th>等级B</th>
                  <th>等级C</th>
                </tr>
                  <tr>
                    <th rowspan="2">样品编号</th>
                    <th rowspan="2">牌号</th>
                    <th rowspan="2">生产厂</th>
                    <th rowspan="2">规格</th>
                    <th rowspan="2">条码</th>
                    <th rowspan="2">盒码</th>
                    <th rowspan="2">检测形式</th>
                    <th colspan="5">包装标识</th>
                    <th colspan="3">条码识别等级</th>
                    <th rowspan="2">外观扣分</th>
                    <th rowspan="2">得分</th>
                    <th rowspan="2">结论</th>
                    <th rowspan="2">备注（缺陷描述/问题内容）</th>
                  </tr>
                  <tr>
                    <th>箱标识</th>
                    <th>条盒标识</th>
                    <th>盒条码</th>
                    <th>条盒码</th>
                    <th>同步现场结果</th>
                    <th>等级A</th>
                    <th>等级B</th>
                    <th>等级C</th>
                  </tr>
                </thead>
                <tbody>
                <tr v-for="(row, rowIndex) in summaryRows" :key="row.sampleNo">
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'sampleNo') }"
                    @click="setActiveCell('summary', rowIndex, 'sampleNo')"
                    @dblclick="openEditModal('summary', rowIndex, 'sampleNo')"
                  >
                    {{ row.sampleNo }}
                  </td>
                  <td
                    class="report-cell report-link"
                    :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'brand') }"
                    @click="setActiveCell('summary', rowIndex, 'brand')"
                    @dblclick="openEditModal('summary', rowIndex, 'brand')"
                  >
                    {{ row.brand }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'factory') }"
                    @click="setActiveCell('summary', rowIndex, 'factory')"
                    @dblclick="openEditModal('summary', rowIndex, 'factory')"
                  >
                    {{ row.factory }}
                  </td>
                  <td
                    class="report-cell report-left"
                    :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'spec') }"
                    @click="setActiveCell('summary', rowIndex, 'spec')"
                    @dblclick="openEditModal('summary', rowIndex, 'spec')"
                  >
                    {{ row.spec }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'tiaoCode') }"
                    @click="setActiveCell('summary', rowIndex, 'tiaoCode')"
                    @dblclick="openEditModal('summary', rowIndex, 'tiaoCode')"
                  >
                    {{ row.tiaoCode }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'heCode') }"
                    @click="setActiveCell('summary', rowIndex, 'heCode')"
                    @dblclick="openEditModal('summary', rowIndex, 'heCode')"
                  >
                    {{ row.heCode }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'inspectMode') }"
                    @click="setActiveCell('summary', rowIndex, 'inspectMode')"
                    @dblclick="openEditModal('summary', rowIndex, 'inspectMode')"
                  >
                    {{ row.inspectMode }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'boxMark') }"
                    @click="setActiveCell('summary', rowIndex, 'boxMark')"
                    @dblclick="openEditModal('summary', rowIndex, 'boxMark')"
                  >
                    {{ row.boxMark }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'tiaoheMark') }"
                    @click="setActiveCell('summary', rowIndex, 'tiaoheMark')"
                    @dblclick="openEditModal('summary', rowIndex, 'tiaoheMark')"
                  >
                    {{ row.tiaoheMark }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'heBarcode') }"
                    @click="setActiveCell('summary', rowIndex, 'heBarcode')"
                    @dblclick="openEditModal('summary', rowIndex, 'heBarcode')"
                  >
                    {{ row.heBarcode }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'tiaoheBarcode') }"
                    @click="setActiveCell('summary', rowIndex, 'tiaoheBarcode')"
                    @dblclick="openEditModal('summary', rowIndex, 'tiaoheBarcode')"
                  >
                    {{ row.tiaoheBarcode }}
                  </td>
                  <td
                    class="report-cell report-cell--active"
                    :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'syncResult') }"
                    @click="setActiveCell('summary', rowIndex, 'syncResult')"
                    @dblclick="openEditModal('summary', rowIndex, 'syncResult')"
                  >
                    {{ row.syncResult }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'gradeA') }"
                    @click="setActiveCell('summary', rowIndex, 'gradeA')"
                    @dblclick="openEditModal('summary', rowIndex, 'gradeA')"
                  >
                    {{ row.gradeA }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'gradeB') }"
                    @click="setActiveCell('summary', rowIndex, 'gradeB')"
                    @dblclick="openEditModal('summary', rowIndex, 'gradeB')"
                  >
                    {{ row.gradeB }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'gradeC') }"
                    @click="setActiveCell('summary', rowIndex, 'gradeC')"
                    @dblclick="openEditModal('summary', rowIndex, 'gradeC')"
                  >
                    {{ row.gradeC }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'appearance') }"
                    @click="setActiveCell('summary', rowIndex, 'appearance')"
                    @dblclick="openEditModal('summary', rowIndex, 'appearance')"
                  >
                    {{ row.appearance }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'score') }"
                    @click="setActiveCell('summary', rowIndex, 'score')"
                    @dblclick="openEditModal('summary', rowIndex, 'score')"
                  >
                    {{ row.score }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'conclusion') }"
                    @click="setActiveCell('summary', rowIndex, 'conclusion')"
                    @dblclick="openEditModal('summary', rowIndex, 'conclusion')"
                  >
                    {{ row.conclusion }}
                  </td>
                  <td
                    class="report-cell report-left"
                    :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'remark') }"
                    @click="setActiveCell('summary', rowIndex, 'remark')"
                    @dblclick="openEditModal('summary', rowIndex, 'remark')"
                  >
                    {{ row.remark }}
                  </td>
                </tr>
                  <tr v-for="(row, rowIndex) in summaryRows" :key="row.sampleNo">
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'sampleNo') }"
                      @click="setActiveCell('summary', rowIndex, 'sampleNo')"
                      @dblclick="openEditModal('summary', rowIndex, 'sampleNo')"
                    >
                      {{ row.sampleNo }}
                    </td>
                    <td
                      class="report-cell report-link"
                      :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'brand') }"
                      @click="setActiveCell('summary', rowIndex, 'brand')"
                      @dblclick="openEditModal('summary', rowIndex, 'brand')"
                    >
                      {{ row.brand }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'factory') }"
                      @click="setActiveCell('summary', rowIndex, 'factory')"
                      @dblclick="openEditModal('summary', rowIndex, 'factory')"
                    >
                      {{ row.factory }}
                    </td>
                    <td
                      class="report-cell report-left"
                      :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'spec') }"
                      @click="setActiveCell('summary', rowIndex, 'spec')"
                      @dblclick="openEditModal('summary', rowIndex, 'spec')"
                    >
                      {{ row.spec }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'tiaoCode') }"
                      @click="setActiveCell('summary', rowIndex, 'tiaoCode')"
                      @dblclick="openEditModal('summary', rowIndex, 'tiaoCode')"
                    >
                      {{ row.tiaoCode }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'heCode') }"
                      @click="setActiveCell('summary', rowIndex, 'heCode')"
                      @dblclick="openEditModal('summary', rowIndex, 'heCode')"
                    >
                      {{ row.heCode }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'inspectMode') }"
                      @click="setActiveCell('summary', rowIndex, 'inspectMode')"
                      @dblclick="openEditModal('summary', rowIndex, 'inspectMode')"
                    >
                      {{ row.inspectMode }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'boxMark') }"
                      @click="setActiveCell('summary', rowIndex, 'boxMark')"
                      @dblclick="openEditModal('summary', rowIndex, 'boxMark')"
                    >
                      {{ row.boxMark }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'tiaoheMark') }"
                      @click="setActiveCell('summary', rowIndex, 'tiaoheMark')"
                      @dblclick="openEditModal('summary', rowIndex, 'tiaoheMark')"
                    >
                      {{ row.tiaoheMark }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'heBarcode') }"
                      @click="setActiveCell('summary', rowIndex, 'heBarcode')"
                      @dblclick="openEditModal('summary', rowIndex, 'heBarcode')"
                    >
                      {{ row.heBarcode }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'tiaoheBarcode') }"
                      @click="setActiveCell('summary', rowIndex, 'tiaoheBarcode')"
                      @dblclick="openEditModal('summary', rowIndex, 'tiaoheBarcode')"
                    >
                      {{ row.tiaoheBarcode }}
                    </td>
                    <td
                      class="report-cell report-cell--active"
                      :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'syncResult') }"
                      @click="setActiveCell('summary', rowIndex, 'syncResult')"
                      @dblclick="openEditModal('summary', rowIndex, 'syncResult')"
                    >
                      {{ row.syncResult }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'gradeA') }"
                      @click="setActiveCell('summary', rowIndex, 'gradeA')"
                      @dblclick="openEditModal('summary', rowIndex, 'gradeA')"
                    >
                      {{ row.gradeA }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'gradeB') }"
                      @click="setActiveCell('summary', rowIndex, 'gradeB')"
                      @dblclick="openEditModal('summary', rowIndex, 'gradeB')"
                    >
                      {{ row.gradeB }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'gradeC') }"
                      @click="setActiveCell('summary', rowIndex, 'gradeC')"
                      @dblclick="openEditModal('summary', rowIndex, 'gradeC')"
                    >
                      {{ row.gradeC }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'appearance') }"
                      @click="setActiveCell('summary', rowIndex, 'appearance')"
                      @dblclick="openEditModal('summary', rowIndex, 'appearance')"
                    >
                      {{ row.appearance }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'score') }"
                      @click="setActiveCell('summary', rowIndex, 'score')"
                      @dblclick="openEditModal('summary', rowIndex, 'score')"
                    >
                      {{ row.score }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'conclusion') }"
                      @click="setActiveCell('summary', rowIndex, 'conclusion')"
                      @dblclick="openEditModal('summary', rowIndex, 'conclusion')"
                    >
                      {{ row.conclusion }}
                    </td>
                    <td
                      class="report-cell report-left"
                      :class="{ 'report-cell--selected': isActiveCell('summary', rowIndex, 'remark') }"
                      @click="setActiveCell('summary', rowIndex, 'remark')"
                      @dblclick="openEditModal('summary', rowIndex, 'remark')"
                    >
                      {{ row.remark }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
@@ -422,10 +418,7 @@
                  v-for="opt in segmentOptions"
                  :key="opt.key"
                  class="report-pill"
                  :class="[
                    `report-pill--${opt.tone}`,
                    { 'report-pill--active': opt.key === activeSegment }
                  ]"
                  :class="[`report-pill--${opt.tone}`, { 'report-pill--active': opt.key === activeSegment }]"
                  type="button"
                  @click="activeSegment = opt.key"
                >
@@ -436,146 +429,146 @@

            <div class="report-title report-title--sub">卷烟包装检验结果汇总表</div>

            <div class="report-table-scroll" ref="detailScrollRef">
            <div ref="detailScrollRef" class="report-table-scroll">
              <table class="report-table report-table--detail">
                <thead>
                <tr>
                  <th rowspan="2">序号</th>
                  <th rowspan="2">样品编号</th>
                  <th rowspan="2">牌号</th>
                  <th rowspan="2">生产厂</th>
                  <th rowspan="2">生产日期</th>
                  <th colspan="4">{{ activeSegmentLabel }}</th>
                  <th colspan="2">外观</th>
                  <th colspan="2">综合项</th>
                  <th rowspan="2">备注</th>
                </tr>
                <tr>
                  <th>小项扣分</th>
                  <th>中项扣分</th>
                  <th>大项扣分</th>
                  <th>合计</th>
                  <th>扣分</th>
                  <th>描述</th>
                  <th>扣分</th>
                  <th>结论</th>
                </tr>
                  <tr>
                    <th rowspan="2">序号</th>
                    <th rowspan="2">样品编号</th>
                    <th rowspan="2">牌号</th>
                    <th rowspan="2">生产厂</th>
                    <th rowspan="2">生产日期</th>
                    <th colspan="4">{{ activeSegmentLabel }}</th>
                    <th colspan="2">外观</th>
                    <th colspan="2">综合项</th>
                    <th rowspan="2">备注</th>
                  </tr>
                  <tr>
                    <th>小项扣分</th>
                    <th>中项扣分</th>
                    <th>大项扣分</th>
                    <th>合计</th>
                    <th>扣分</th>
                    <th>描述</th>
                    <th>扣分</th>
                    <th>结论</th>
                  </tr>
                </thead>
                <tbody>
                <tr v-for="(row, rowIndex) in detailRows" :key="row.index">
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'index') }"
                    @click="setActiveCell('detail', rowIndex, 'index')"
                    @dblclick="openEditModal('detail', rowIndex, 'index')"
                  >
                    {{ row.index }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'sampleNo') }"
                    @click="setActiveCell('detail', rowIndex, 'sampleNo')"
                    @dblclick="openEditModal('detail', rowIndex, 'sampleNo')"
                  >
                    {{ row.sampleNo }}
                  </td>
                  <td
                    class="report-cell report-link"
                    :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'brand') }"
                    @click="setActiveCell('detail', rowIndex, 'brand')"
                    @dblclick="openEditModal('detail', rowIndex, 'brand')"
                  >
                    {{ row.brand }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'factory') }"
                    @click="setActiveCell('detail', rowIndex, 'factory')"
                    @dblclick="openEditModal('detail', rowIndex, 'factory')"
                  >
                    {{ row.factory }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'productDate') }"
                    @click="setActiveCell('detail', rowIndex, 'productDate')"
                    @dblclick="openEditModal('detail', rowIndex, 'productDate')"
                  >
                    {{ row.productDate }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'minor') }"
                    @click="setActiveCell('detail', rowIndex, 'minor')"
                    @dblclick="openEditModal('detail', rowIndex, 'minor')"
                  >
                    {{ row.minor }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'medium') }"
                    @click="setActiveCell('detail', rowIndex, 'medium')"
                    @dblclick="openEditModal('detail', rowIndex, 'medium')"
                  >
                    {{ row.medium }}
                  </td>
                  <td
                    class="report-cell report-cell--danger"
                    :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'major') }"
                    @click="setActiveCell('detail', rowIndex, 'major')"
                    @dblclick="openEditModal('detail', rowIndex, 'major')"
                  >
                    {{ row.major }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'total') }"
                    @click="setActiveCell('detail', rowIndex, 'total')"
                    @dblclick="openEditModal('detail', rowIndex, 'total')"
                  >
                    {{ row.total }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'appearanceScore') }"
                    @click="setActiveCell('detail', rowIndex, 'appearanceScore')"
                    @dblclick="openEditModal('detail', rowIndex, 'appearanceScore')"
                  >
                    {{ row.appearanceScore }}
                  </td>
                  <td
                    class="report-cell report-left report-cell--hint"
                    :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'appearanceDesc') }"
                    @click="setActiveCell('detail', rowIndex, 'appearanceDesc')"
                    @dblclick="openEditModal('detail', rowIndex, 'appearanceDesc')"
                  >
                    {{ row.appearanceDesc }}
                  </td>
                  <td
                    class="report-cell"
                    :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'compositeScore') }"
                    @click="setActiveCell('detail', rowIndex, 'compositeScore')"
                    @dblclick="openEditModal('detail', rowIndex, 'compositeScore')"
                  >
                    {{ row.compositeScore }}
                  </td>
                  <td
                    class="report-cell report-cell--hint"
                    :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'compositeConclusion') }"
                    @click="setActiveCell('detail', rowIndex, 'compositeConclusion')"
                    @dblclick="openEditModal('detail', rowIndex, 'compositeConclusion')"
                  >
                    {{ row.compositeConclusion }}
                  </td>
                  <td
                    class="report-cell report-left report-cell--hint"
                    :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'remark') }"
                    @click="setActiveCell('detail', rowIndex, 'remark')"
                    @dblclick="openEditModal('detail', rowIndex, 'remark')"
                  >
                    {{ row.remark }}
                  </td>
                </tr>
                  <tr v-for="(row, rowIndex) in detailRows" :key="row.index">
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'index') }"
                      @click="setActiveCell('detail', rowIndex, 'index')"
                      @dblclick="openEditModal('detail', rowIndex, 'index')"
                    >
                      {{ row.index }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'sampleNo') }"
                      @click="setActiveCell('detail', rowIndex, 'sampleNo')"
                      @dblclick="openEditModal('detail', rowIndex, 'sampleNo')"
                    >
                      {{ row.sampleNo }}
                    </td>
                    <td
                      class="report-cell report-link"
                      :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'brand') }"
                      @click="setActiveCell('detail', rowIndex, 'brand')"
                      @dblclick="openEditModal('detail', rowIndex, 'brand')"
                    >
                      {{ row.brand }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'factory') }"
                      @click="setActiveCell('detail', rowIndex, 'factory')"
                      @dblclick="openEditModal('detail', rowIndex, 'factory')"
                    >
                      {{ row.factory }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'productDate') }"
                      @click="setActiveCell('detail', rowIndex, 'productDate')"
                      @dblclick="openEditModal('detail', rowIndex, 'productDate')"
                    >
                      {{ row.productDate }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'minor') }"
                      @click="setActiveCell('detail', rowIndex, 'minor')"
                      @dblclick="openEditModal('detail', rowIndex, 'minor')"
                    >
                      {{ row.minor }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'medium') }"
                      @click="setActiveCell('detail', rowIndex, 'medium')"
                      @dblclick="openEditModal('detail', rowIndex, 'medium')"
                    >
                      {{ row.medium }}
                    </td>
                    <td
                      class="report-cell report-cell--danger"
                      :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'major') }"
                      @click="setActiveCell('detail', rowIndex, 'major')"
                      @dblclick="openEditModal('detail', rowIndex, 'major')"
                    >
                      {{ row.major }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'total') }"
                      @click="setActiveCell('detail', rowIndex, 'total')"
                      @dblclick="openEditModal('detail', rowIndex, 'total')"
                    >
                      {{ row.total }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'appearanceScore') }"
                      @click="setActiveCell('detail', rowIndex, 'appearanceScore')"
                      @dblclick="openEditModal('detail', rowIndex, 'appearanceScore')"
                    >
                      {{ row.appearanceScore }}
                    </td>
                    <td
                      class="report-cell report-left report-cell--hint"
                      :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'appearanceDesc') }"
                      @click="setActiveCell('detail', rowIndex, 'appearanceDesc')"
                      @dblclick="openEditModal('detail', rowIndex, 'appearanceDesc')"
                    >
                      {{ row.appearanceDesc }}
                    </td>
                    <td
                      class="report-cell"
                      :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'compositeScore') }"
                      @click="setActiveCell('detail', rowIndex, 'compositeScore')"
                      @dblclick="openEditModal('detail', rowIndex, 'compositeScore')"
                    >
                      {{ row.compositeScore }}
                    </td>
                    <td
                      class="report-cell report-cell--hint"
                      :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'compositeConclusion') }"
                      @click="setActiveCell('detail', rowIndex, 'compositeConclusion')"
                      @dblclick="openEditModal('detail', rowIndex, 'compositeConclusion')"
                    >
                      {{ row.compositeConclusion }}
                    </td>
                    <td
                      class="report-cell report-left report-cell--hint"
                      :class="{ 'report-cell--selected': isActiveCell('detail', rowIndex, 'remark') }"
                      @click="setActiveCell('detail', rowIndex, 'remark')"
                      @dblclick="openEditModal('detail', rowIndex, 'remark')"
                    >
                      {{ row.remark }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
@@ -592,10 +585,7 @@
                  v-for="opt in bottomOptions"
                  :key="opt.key"
                  class="report-pill report-pill--bottom"
                  :class="[
                    `report-pill--${opt.tone}`,
                    { 'report-pill--active': opt.key === activeBottom }
                  ]"
                  :class="[`report-pill--${opt.tone}`, { 'report-pill--active': opt.key === activeBottom }]"
                  type="button"
                  @click="activeBottom = opt.key"
                >