@logwire/logwire-wms-pda-ui 1.1.16 → 1.1.17

package/src/components/page/inbound/receive/quality/LwInboundQualityExecutePage.vue

@@ -1,398 +1,406 @@
-<template>
-  <div>
-    <lw-nav-bar title="收货品检"/>
-    <div class="lw-global-page-box">
-      <div class="lw-global-model-box">
-        <quality-task-info :data="task"/>
-      </div>
-      <div v-if="card" class="lw-global-model-box">
-        <quality-card :data="card"/>
-      </div>
-      <div v-if="task" class="lw-global-tab-box" style="margin-top: 10px;">
-        <van-tabs type="card" animated v-model="tabActive">
-          <van-tab title="品检">
-            <div class="lw-global-model-box">
-              <lw-input v-if="!currentLpn" title="托盘" v-model="lpn.value" :get-focus.sync="lpn.focus" @confirm="scanLpn"/>
-              <template v-if="currentLpn">
-                <div class="lw-global-props">
-                  <div>
-                    <div>当前托盘号</div>
-                    <div>{{currentLpn.lpn}}</div>
-                  </div>
-                </div>
-                <div class="quality-table">
-                  <div class="quality-table-header">
-                    <div>待检量</div>
-                    <div>抽检量</div>
-                    <div>异常量</div>
-                  </div>
-                  <div>
-                    <div>{{currentLpn.canQualityQty}}</div>
-                    <div>
-                      <lw-input name="抽检量" v-model="currentLpn.samplingQty"/>
-                    </div>
-                    <div>{{currentLpn.qualityLossQty}}</div>
-                  </div>
-                </div>
-              </template>
-            </div>
-            <div v-if="task.sku.needSn" class="lw-global-model-box" style="margin-top: 10px;">
-              <lw-input title="序列号条码" required v-model="sn" @confirm="addSn"/>
-              <div v-if="sns.length" class="tag-list">
-                <div class="tag-list-title">
-                  <div>当前扫描结果</div>
-                  <div>SN <span>{{ sns.length }}</span></div>
-                  <div style="display: flex; justify-content: center;">
-                    <div>数量 <span>{{ snsQty }}</span></div>
-                    <div style="margin-left: 10px;">
-                      <lw-button mini @click="showSns=true">全部</lw-button>
-                    </div>
-                  </div>
-                </div>
-                <div class="tag-list-head">
-                  <div>SN</div>
-                  <div>数量</div>
-                  <div>操作</div>
-                </div>
-                <div class="tag-list-row" v-for="t in sns" :key="t.sn">
-                  <div>{{ t.sn }}</div>
-                  <div>{{ t.qty }}</div>
-                  <div>
-                    <lw-button mini @click="removeSn(t)">剔除</lw-button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div v-if="lotQuery" class="lw-global-model-box">
-              <lw-lot-module :query="lotQuery" ref="lot"/>
-            </div>
-          </van-tab>
-          <van-tab title="托盘号">
-            <div class="lw-global-model-box">
-              <div class="lpn-table">
-                <div class="lpn-table-header">
-                  <div>托盘号</div>
-                  <div>数量</div>
-                  <div>抽检量</div>
-                  <div>异常量</div>
-                </div>
-                <div v-for="line in task.lines" :key="line.lpn" :class="{abnormal: line.qualityLossQty > 0}">
-                  <div>{{line.lpn}}</div>
-                  <div>{{line.qty}}</div>
-                  <div>{{line.qualityQty}}</div>
-                  <div>{{line.qualityLossQty}}</div>
-                </div>
-              </div>
-            </div>
-          </van-tab>
-        </van-tabs>
-      </div>
-    </div>
-    <lw-bottom-bar v-if="currentLpn">
-      <lw-button type="warning" @click="showAbnormalPop">品检异常</lw-button>
-      <lw-button plain @click="resetLpn">切换托盘</lw-button>
-      <lw-button @click="submitLpn">提交品检结果</lw-button>
-    </lw-bottom-bar>
-    <van-dialog v-model="showSns" title="当前扫描的SN列表">
-      <sns-list :sns="sns" @remove="removeSn"/>
-    </van-dialog>
-    <!-- 异常弹框 -->
-    <lw-popup
-        title="品检异常"
-        v-model="showAbnormal">
-      <lw-inner-abnormal-module
-          v-if="showAbnormal"
-          ref="abnormal"
-          :sku-code="task.sku.code"
-          :sku-name="task.sku.name"
-          :qty="currentLpn.canQualityQty"
-          :location="task.locationCode"
-          type="品检"
-          ab-type="品检异常"/>
-      <template #button>
-        <lw-button @click="submitAbnormal">上报异常</lw-button>
-      </template>
-    </lw-popup>
-  </div>
-</template>
-
-<script>
-import {
-  getInboundFoundQualityCard,
-  getInboundGetQualityDetail, submitQualityAbnormal,
-  submitSkuQuality, submitSkuSnQuality
-} from '../../../../../api/inbound/quality'
-import QualityTaskInfo from '../../components/QualityTaskInfo'
-import QualityCard from '../../components/QualityCard'
-import SnsList from '../../components/SnsList'
-import { getAsnSkuSnDetail } from '../../../../../api/inbound/receive'
-
-export default {
-  name: 'LwInboundQualityExecutePage',
-  components: { SnsList, QualityCard, QualityTaskInfo },
-  data () {
-    return {
-      task: null,
-      card: null,
-      tabActive: 0,
-      lpn: {
-        value: '',
-        focus: true,
-      },
-      currentLpn: null,
-      sn: '',
-      sns: [],
-      showSns: false,
-      lotQuery: null,
-      showAbnormal: false,
-    }
-  },
-  computed: {
-    snsQty () {
-      return this.sns.map(i => parseInt(i.qty)).reduce((a, b) => a + b, 0)
-    },
-  },
-  created () {
-    let taskId = this.$route.query.taskId
-    if (!taskId) {
-      taskId = this.$route.query.lwTaskId
-    }
-    if (taskId) {
-      this.getTask(taskId)
-    } else {
-      this.$lwShowErrorMsg('无效的任务Id')
-    }
-  },
-  methods: {
-    getTask (taskId) {
-      getInboundGetQualityDetail(taskId).then(res => {
-        if (res) {
-          this.task = res
-          getInboundFoundQualityCard(taskId).then(data => this.card = data)
-        }
-      })
-    },
-    scanLpn (fromError = false) {
-      if (!this.lpn.value) {
-        return
-      }
-      const lpn = this.task.lines.find(i => i.lpn === this.lpn.value)
-      if (!lpn) {
-        if (fromError) {
-          this.resetLpn()
-        } else {
-          return this.$lwShowErrorMsg('错误的托盘号')
-        }
-      }
-      if (lpn.canQualityQty <= 0) {
-        if (fromError) {
-          this.resetLpn()
-        } else {
-          return this.$lwShowErrorMsg('该托盘已品检')
-        }
-      }
-      this.lotQuery = {
-        warehouseId: this.task.asn.warehouseId,
-        ownerId: this.task.asn.ownerId,
-        skuId: this.task.sku.id,
-        type: 1,
-        lotType: 'inventory',
-        header: this.task.map,
-        line: lpn.map,
-      }
-      lpn.samplingQty = 0
-      this.currentLpn = lpn
-    },
-    submitLpn () {
-      if (!this.currentLpn) {
-        return this.$lwShowErrorMsg('请扫描LPN')
-      }
-      if (this.currentLpn.samplingQty < 0 || this.currentLpn.samplingQty > this.currentLpn.canQualityQty) {
-        return this.$lwShowErrorMsg('抽检量必须大于0且小于待检量')
-      }
-      if (this.task.sku.needSn) {
-        const snQty = this.sns.map(i => parseInt(i.qty)).reduce((a, b) => a + b, 0)
-        if (snQty !== parseInt(this.currentLpn.canQualityQty)) {
-          return this.$lwShowErrorMsg('商品序列号数量与待检量不符，请确认')
-        }
-      }
-      const lotData = this.$refs.lot.getData()
-      const data = {
-        warehouseId: this.task.asn.warehouseId,
-        ownerId: this.task.asn.ownerId,
-        taskId: this.task.taskId,
-        lpn: this.currentLpn.lpn,
-        checkQty: this.currentLpn.samplingQty,
-      }
-      if (lotData.success) {
-        data.lotAttributes = lotData.data
-        let method = null
-        if (this.task.sku.needSn) {
-          data.snList = this.sns
-          method = submitSkuSnQuality
-        } else {
-          method = submitSkuQuality
-        }
-        method(data).then(res => {
-          if (res && res.quality) {
-            this.task = res.quality
-          }
-          this.resetLpn()
-        })
-      }
-    },
-    addSn () {
-      if (!this.sn) {
-        return
-      }
-      const param = { componentId: 'WMS_INBOUND_RECEIVE_SKU_SN', barcode: this.sn, ownerId: this.task.asn.ownerId }
-      this.$lwApi.barcode.resolver(param).then(res => {
-        if (!res.data.sn) {
-          return this.$lwShowErrorMsg('错误的商品条码序列号')
-        }
-        const osn = this.sns.find(i => i.sn === res.data.sn)
-        if (osn) {
-          return this.$lwShowErrorMsg('重复的序列号')
-        }
-        if (res.data.sku && res.data.sku !== this.task.sku.code) {
-          return this.$lwShowErrorMsg('序列号商品编码不符')
-        }
-        getAsnSkuSnDetail(this.task.asn.id, this.task.sku.id, res.data.sn).then(data => {
-          if (data && data.sn) {
-            this.sns.unshift({
-              sn: data.sn,
-              qty: data.qty || 1
-            })
-            this.sn = ''
-          } else {
-            return this.$lwShowErrorMsg('错误的序列号')
-          }
-        })
-      })
-    },
-    resetLpn () {
-      this.lpn.value = ''
-      this.lpn.focus = true
-      this.currentLpn = null
-      this.lotQuery = null
-    },
-    removeSn (sn) {
-      const idx = this.sns.indexOf(sn)
-      if (idx > -1) {
-        this.sns.splice(idx, 1)
-      }
-    },
-    showAbnormalPop () {
-      const lotData = this.$refs.lot.getData()
-      if (lotData.success) {
-        this.showAbnormal = true
-      }
-    },
-    submitAbnormal () {
-      const {success, data} = this.$refs.abnormal.getAbnormalData()
-      if (!success) return
-
-      const lotData = this.$refs.lot.getData()
-      if (!lotData.success) {
-        return
-      }
-
-      submitQualityAbnormal({
-        taskId: this.task.taskId,
-        lpn: this.currentLpn.lpn,
-        lotAttributes: lotData.data,
-        ...data
-      }).then(res => {
-        this.showAbnormal = false
-        this.$lwToast.success('异常上报成功')
-        this.task = res
-        this.lpn.value = this.currentLpn.lpn
-        this.scanLpn(true)
-      })
-    }
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.lpn-table {
-  font-size: 0.9em;
-  line-height: 2em;
-  &-header {
-    color: gray;
-  }
-  & > div {
-    display: grid;
-    margin-top: 1px;
-    grid-template-columns: 2fr 1fr 1fr 1fr;
-    text-align: center;
-    &.abnormal {
-      background: #fdbdbe;
-    }
-  }
-}
-.lw-global-props {
-  margin: 10px 0;
-}
-.quality-table {
-  font-size: 0.9em;
-  line-height: 2em;
-  &-header {
-    color: gray;
-  }
-  & > div {
-    display: grid;
-    margin-top: 1px;
-    grid-template-columns: 1fr 1fr 1fr;
-    text-align: center;
-    &.abnormal {
-      background: #fdbdbe;
-    }
-  }
-}
-.tag-list {
-  margin-top: 10px;
-  & > div {
-    display: flex;
-    align-items: center;
-
-    & > div:first-child {
-      flex-basis: 40%;
-    }
-
-    & > div:nth-child(2) {
-      flex-basis: 20%;
-      text-align: center;
-    }
-
-    & > div:last-child {
-      flex-basis: 40%;
-      text-align: center;
-    }
-  }
-
-  &-title {
-    background: #0f90dd;
-    color: white;
-    margin: -10px -10px 0;
-    padding: 8px;
-
-    span {
-      color: yellow;
-      font-weight: bold;
-    }
-  }
-
-  &-head {
-    font-size: 0.9em;
-    color: gray;
-    padding: 5px 0;
-  }
-
-  &-row {
-    font-size: 0.9em;
-    height: 36px;
-    border-top: 1px solid lightgray;
-  }
-}
+<template>
+  <div>
+    <lw-nav-bar title="收货品检"/>
+    <div class="lw-global-page-box">
+      <div class="lw-global-model-box">
+        <quality-task-info :data="task"/>
+      </div>
+      <div v-if="card" class="lw-global-model-box">
+        <quality-card :data="card"/>
+      </div>
+      <div v-if="task" class="lw-global-tab-box" style="margin-top: 10px;">
+        <van-tabs type="card" animated v-model="tabActive">
+          <van-tab title="品检">
+            <div class="lw-global-model-box">
+              <lw-input v-if="!currentLpn" title="托盘" v-model="lpn.value" :get-focus.sync="lpn.focus" @confirm="scanLpn()"/>
+              <template v-if="currentLpn">
+                <div class="lw-global-props">
+                  <div>
+                    <div>当前托盘号</div>
+                    <div>{{currentLpn.lpn}}</div>
+                  </div>
+                </div>
+                <div class="quality-table">
+                  <div class="quality-table-header">
+                    <div>待检量</div>
+                    <div>抽检量</div>
+                    <div>异常量</div>
+                  </div>
+                  <div>
+                    <div>{{currentLpn.canQualityQty}}</div>
+                    <div>
+                      <lw-input name="抽检量" v-model="currentLpn.samplingQty"/>
+                    </div>
+                    <div>{{currentLpn.qualityLossQty}}</div>
+                  </div>
+                </div>
+              </template>
+            </div>
+            <div v-if="currentLpn && !task.sku.needSn" class="lw-global-model-box" style="margin-top: 10px;">
+              <lw-input title="序列号条码" required v-model="sn.value" :get-focus.sync="sn.focus"
+                        rule-key="sn" rule-value-key="sn" :rule-serve-query="barcodeQuery" @confirm="addSn"/>
+              <div v-if="sns.length" class="tag-list">
+                <div class="tag-list-title">
+                  <div>当前扫描结果</div>
+                  <div>SN <span>{{ sns.length }}</span></div>
+                  <div style="display: flex; justify-content: center;">
+                    <div>数量 <span>{{ snsQty }}</span></div>
+                    <div style="margin-left: 10px;">
+                      <lw-button mini @click="showSns=true">全部</lw-button>
+                    </div>
+                  </div>
+                </div>
+                <div class="tag-list-head">
+                  <div>SN</div>
+                  <div>数量</div>
+                  <div>操作</div>
+                </div>
+                <div class="tag-list-row" v-for="t in sns" :key="t.sn">
+                  <div>{{ t.sn }}</div>
+                  <div>{{ t.qty }}</div>
+                  <div>
+                    <lw-button mini @click="removeSn(t)">剔除</lw-button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-if="lotQuery" class="lw-global-model-box">
+              <lw-lot-module :query="lotQuery" ref="lot"/>
+            </div>
+          </van-tab>
+          <van-tab title="托盘号">
+            <div class="lw-global-model-box">
+              <div class="lpn-table">
+                <div class="lpn-table-header">
+                  <div>托盘号</div>
+                  <div>数量</div>
+                  <div>抽检量</div>
+                  <div>异常量</div>
+                </div>
+                <div v-for="line in task.lines" :key="line.lpn" :class="{abnormal: line.qualityLossQty > 0}">
+                  <div>{{line.lpn}}</div>
+                  <div>{{line.qty}}</div>
+                  <div>{{line.qualityQty}}</div>
+                  <div>{{line.qualityLossQty}}</div>
+                </div>
+              </div>
+            </div>
+          </van-tab>
+        </van-tabs>
+      </div>
+    </div>
+    <lw-bottom-bar v-if="currentLpn">
+      <lw-button type="warning" @click="showAbnormalPop">品检异常</lw-button>
+      <lw-button plain @click="resetLpn">切换托盘</lw-button>
+      <lw-button @click="submitLpn">提交品检结果</lw-button>
+    </lw-bottom-bar>
+    <van-dialog v-model="showSns" title="当前扫描的SN列表">
+      <sns-list :sns="sns" @remove="removeSn"/>
+    </van-dialog>
+    <!-- 异常弹框 -->
+    <lw-popup
+        title="品检异常"
+        v-model="showAbnormal">
+      <lw-inner-abnormal-module
+          v-if="showAbnormal"
+          ref="abnormal"
+          :sku-code="task.sku.code"
+          :sku-name="task.sku.name"
+          :qty="currentLpn.canQualityQty"
+          :location="task.locationCode"
+          require-lpn
+          type="品检"
+          ab-type="品检异常"/>
+      <template #button>
+        <lw-button @click="submitAbnormal">上报异常</lw-button>
+      </template>
+    </lw-popup>
+  </div>
+</template>
+
+<script>
+import {
+  getInboundFoundQualityCard,
+  getInboundGetQualityDetail, submitQualityAbnormal,
+  submitSkuQuality, submitSkuSnQuality
+} from '../../../../../api/inbound/quality'
+import QualityTaskInfo from '../../components/QualityTaskInfo'
+import QualityCard from '../../components/QualityCard'
+import SnsList from '../../components/SnsList'
+import { getAsnSkuSnDetail } from '../../../../../api/inbound/receive'
+
+export default {
+  name: 'LwInboundQualityExecutePage',
+  components: { SnsList, QualityCard, QualityTaskInfo },
+  data () {
+    return {
+      task: null,
+      card: null,
+      tabActive: 0,
+      lpn: {
+        value: '',
+        focus: true,
+      },
+      currentLpn: null,
+      sn: {
+        value: '',
+        focus: false,
+      },
+      sns: [],
+      showSns: false,
+      lotQuery: null,
+      showAbnormal: false,
+    }
+  },
+  computed: {
+    snsQty () {
+      return this.sns.map(i => parseInt(i.qty)).reduce((a, b) => a + b, 0)
+    },
+    barcodeQuery () {
+      return {
+        ownerId: this.task.asn.ownerId || null,
+        warehouseId: this.task.warehouseId || null,
+      }
+    }
+  },
+  created () {
+    let taskId = this.$route.query.taskId
+    if (!taskId) {
+      taskId = this.$route.query.lwTaskId
+    }
+    if (taskId) {
+      this.getTask(taskId)
+    } else {
+      this.$lwShowErrorMsg('无效的任务Id')
+    }
+  },
+  methods: {
+    getTask (taskId) {
+      getInboundGetQualityDetail(taskId).then(res => {
+        if (res) {
+          this.task = res
+          getInboundFoundQualityCard(taskId).then(data => this.card = data)
+        }
+      })
+    },
+    scanLpn (fromError = false) {
+      if (!this.lpn.value) {
+        return
+      }
+      const lpn = this.task.lines.find(i => i.lpn === this.lpn.value)
+      if (!lpn) {
+        if (fromError) {
+          this.resetLpn()
+        } else {
+          return this.$lwShowErrorMsg('错误的托盘号')
+        }
+      }
+      if (lpn.canQualityQty <= 0) {
+        if (fromError) {
+          this.resetLpn()
+        } else {
+          return this.$lwShowErrorMsg('该托盘已品检')
+        }
+      }
+      this.lotQuery = {
+        warehouseId: this.task.asn.warehouseId,
+        ownerId: this.task.asn.ownerId,
+        skuId: this.task.sku.id,
+        type: 1,
+        lotType: 'inventory',
+        header: this.task.map,
+        line: lpn.map,
+      }
+      lpn.samplingQty = 0
+      this.currentLpn = lpn
+    },
+    submitLpn () {
+      if (!this.currentLpn) {
+        return this.$lwShowErrorMsg('请扫描LPN')
+      }
+      if (this.currentLpn.samplingQty < 0 || this.currentLpn.samplingQty > this.currentLpn.canQualityQty) {
+        return this.$lwShowErrorMsg('抽检量必须大于0且小于待检量')
+      }
+      if (this.task.sku.needSn) {
+        const snQty = this.sns.map(i => parseInt(i.qty)).reduce((a, b) => a + b, 0)
+        if (snQty !== parseInt(this.currentLpn.canQualityQty)) {
+          return this.$lwShowErrorMsg('商品序列号数量与待检量不符，请确认')
+        }
+      }
+      const lotData = this.$refs.lot.getData()
+      const data = {
+        warehouseId: this.task.asn.warehouseId,
+        ownerId: this.task.asn.ownerId,
+        taskId: this.task.taskId,
+        lpn: this.currentLpn.lpn,
+        checkQty: this.currentLpn.samplingQty,
+      }
+      if (lotData.success) {
+        data.lotAttributes = lotData.data
+        let method = null
+        if (this.task.sku.needSn) {
+          data.snList = this.sns
+          method = submitSkuSnQuality
+        } else {
+          method = submitSkuQuality
+        }
+        method(data).then(res => {
+          if (res && res.quality) {
+            this.task = res.quality
+          }
+          this.resetLpn()
+        })
+      }
+    },
+    addSn (sn, res) {
+      if (!res.data.sn) {
+        this.sn.focus = true
+        return this.$lwShowErrorMsg('错误的商品条码序列号')
+      }
+      const osn = this.sns.find(i => i.sn === sn)
+      if (osn) {
+        this.sn.focus = true
+        return this.$lwShowErrorMsg('重复的序列号')
+      }
+      if (res.data.skuCode && res.data.skuCode !== this.task.sku.code) {
+        this.sn.focus = true
+        return this.$lwShowErrorMsg('序列号商品编码不符')
+      }
+      getAsnSkuSnDetail(this.task.asn.id, this.task.sku.id, res.data.sn).then(data => {
+        if (data && data.sn) {
+          this.sns.unshift({
+            sn: data.sn,
+            qty: data.qty || 1
+          })
+          this.sn.value = ''
+        } else {
+          return this.$lwShowErrorMsg('错误的序列号')
+        }
+      })
+    },
+    resetLpn () {
+      this.lpn.value = ''
+      this.lpn.focus = true
+      this.currentLpn = null
+      this.lotQuery = null
+    },
+    removeSn (sn) {
+      const idx = this.sns.indexOf(sn)
+      if (idx > -1) {
+        this.sns.splice(idx, 1)
+      }
+    },
+    showAbnormalPop () {
+      const lotData = this.$refs.lot.getData()
+      if (lotData.success) {
+        this.showAbnormal = true
+      }
+    },
+    submitAbnormal () {
+      const {success, data} = this.$refs.abnormal.getAbnormalData()
+      if (!success) return
+
+      const lotData = this.$refs.lot.getData()
+      if (!lotData.success) {
+        return
+      }
+
+      submitQualityAbnormal({
+        taskId: this.task.taskId,
+        lpn: this.currentLpn.lpn,
+        lotAttributes: lotData.data,
+        ...data
+      }).then(res => {
+        this.showAbnormal = false
+        this.$lwToast.success('异常上报成功')
+        this.task = res
+        this.lpn.value = this.currentLpn.lpn
+        this.scanLpn(true)
+      })
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.lpn-table {
+  font-size: 0.9em;
+  line-height: 2em;
+  &-header {
+    color: gray;
+  }
+  & > div {
+    display: grid;
+    margin-top: 1px;
+    grid-template-columns: 2fr 1fr 1fr 1fr;
+    text-align: center;
+    &.abnormal {
+      background: #fdbdbe;
+    }
+  }
+}
+.lw-global-props {
+  margin: 10px 0;
+}
+.quality-table {
+  font-size: 0.9em;
+  line-height: 2em;
+  &-header {
+    color: gray;
+  }
+  & > div {
+    display: grid;
+    margin-top: 1px;
+    grid-template-columns: 1fr 1fr 1fr;
+    text-align: center;
+    &.abnormal {
+      background: #fdbdbe;
+    }
+  }
+}
+.tag-list {
+  margin-top: 10px;
+  & > div {
+    display: flex;
+    align-items: center;
+
+    & > div:first-child {
+      flex-basis: 40%;
+    }
+
+    & > div:nth-child(2) {
+      flex-basis: 20%;
+      text-align: center;
+    }
+
+    & > div:last-child {
+      flex-basis: 40%;
+      text-align: center;
+    }
+  }
+
+  &-title {
+    background: #0f90dd;
+    color: white;
+    margin: -10px -10px 0;
+    padding: 8px;
+
+    span {
+      color: yellow;
+      font-weight: bold;
+    }
+  }
+
+  &-head {
+    font-size: 0.9em;
+    color: gray;
+    padding: 5px 0;
+  }
+
+  &-row {
+    font-size: 0.9em;
+    height: 36px;
+    border-top: 1px solid lightgray;
+  }
+}
 </style>