202502-Wms-NanTongYaChi/wms_web_nantong_yachi/src/layout/orderIn.vue

<template>
  <el-config-provider :locale="zhCn">
    <el-container class="content">
      <div class="work-area">
        <fieldset class="main-area">
          <legend>入库单信息</legend>
          <el-form ref="orderInFormRef" :model="orderInForm" :rules="rules" label-width="100px"
                   :label-position="labelPosition" status-icon>
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :md="6" :lg="5">
                <el-form-item label="料箱号" prop="vehicleNo">
                  <el-input v-model="orderInForm.vehicleNo" clearable @keyup.enter="handleEnter('vehicleSize')"
                            ref="vehicleNoRef"/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="6" :lg="5">
                <el-form-item label="料箱尺寸" prop="vehicleSize">
                  <el-input v-model="orderInForm.vehicleSize" clearable @keyup.enter="handleEnter('inStand')"
                            ref="vehicleSizeRef"/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="6" :lg="5">
                <el-form-item label="入库站台" prop="inStand">
                  <el-input v-model="orderInForm.inStand" clearable @keyup.enter="handleEnter('clientId')"
                            ref="inStandRef"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </fieldset>

        <fieldset class="goods-detail-area">
          <legend>物料明细</legend>
          <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
            <div>
              <el-button type="primary" @click="addGoodsDetail">添加物料</el-button>
              <el-button type="danger" @click="clearGoodsDetail">清空物料</el-button>
            </div>
            <div>
              <el-button type="success" @click="submitOrderIn">提交入库单</el-button>
            </div>
          </div>

          <div class="table-area">
            <el-table :data="orderInForm.goodsDetail" border stripe :max-height="maxHeight"
                      :header-cell-style="{ 'text-align': 'center' }"
                      :cell-style="{ 'text-align': 'center', 'padding': '12px 0' }"
                      class="table-class" width="100%" :row-style="{ height: '60px' }">
              <el-table-column prop="goodsId" label="物料编号" min-width="120">
                <template #default="scope">
                  <el-input v-model="scope.row.goodsId" placeholder="请输入物料编号" size="small"/>
                </template>
              </el-table-column>
              <el-table-column prop="goodsName" label="物料名称" min-width="120">
                <template #default="scope">
                  <el-input v-model="scope.row.goodsName" placeholder="请输入物料名称" size="small"/>
                </template>
              </el-table-column>
              <el-table-column prop="batch" label="批次" min-width="120">
                <template #default="scope">
                  <el-input v-model="scope.row.batch" placeholder="请输入批次" size="small"/>
                </template>
              </el-table-column>
              <el-table-column prop="goodsType" label="物料类型" min-width="120">
                <template #default="scope">
                  <el-input v-model="scope.row.goodsType" placeholder="请输入物料类型" size="small"/>
                </template>
              </el-table-column>
              <el-table-column prop="specification" label="规格" min-width="120">
                <template #default="scope">
                  <el-input v-model="scope.row.specification" placeholder="请输入规格" size="small"/>
                </template>
              </el-table-column>
              <el-table-column prop="quantity" label="数量" min-width="120">
                <template #default="scope">
                  <el-input-number v-model="scope.row.quantity" :min="1" :controls="false" size="small"/>
                </template>
              </el-table-column>
              <el-table-column prop="goodsDesc" label="物料描述" min-width="120">
                <template #default="scope">
                  <el-input v-model="scope.row.goodsDesc" placeholder="请输入物料描述" size="small"/>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="80" fixed="right">
                <template #default="scope">
                  <el-button type="danger" size="small" @click="removeGoodsDetail(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </fieldset>

        <!-- 查询区域 -->
        <fieldset class="query-area">
          <legend>入库单查询</legend>
          <el-form ref="queryFormRef" :model="queryForm" :label-position="labelPosition" label-width="120px"
                   status-icon>
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :md="5" :lg="4">
                <el-form-item label="料箱号">
                  <el-input v-model="queryForm.vehicleNo" clearable/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="5" :lg="4">
                <el-form-item label="料箱尺寸">
                  <el-input v-model="queryForm.vehicleSize" clearable/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="5" :lg="4">
                <el-form-item label="入库站台">
                  <el-input v-model="queryForm.inStand" clearable/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="5" :lg="4">
                <el-form-item label="订单状态">
                  <el-select v-model="queryForm.orderStatus" clearable placeholder="请选择订单状态">
                    <el-option label="全部" value=""/>
                    <el-option label="创建" :value="0"/>
                    <el-option label="运行中" :value="1"/>
                    <el-option label="完成" :value="2"/>
                    <el-option label="取消" :value="3"/>
                    <el-option label="错误" :value="4"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="4" :lg="4" style="display: flex; align-items: flex-end;">
                <el-form-item>
                  <el-button type="primary" @click="queryOrderIns">查询入库单</el-button>
                  <el-button type="warning" @click="resetQueryForm">重置查询</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </fieldset>

        <!-- 查询结果表格 -->
        <fieldset class="query-result-area">
          <legend>入库单列表</legend>
          <div class="query-table-container">
            <el-table :data="orderInsList"
                      border stripe
                      :max-height="maxHeight * 0.8"
                      :header-cell-style="{ 'text-align': 'center' }"
                      :cell-style="{ 'text-align': 'center' }"
                      highlight-current-row
                      class="query-result-table"
                      style="width: 100%; min-width: 2000px;"
                      :row-style="{ height: '60px' }"
                      :empty-text="'暂无查询数据，请在上方输入查询条件并点击查询按钮'">
              <el-table-column type="index" width="60" fixed="left" label="序号"/>
              <el-table-column prop="recordId" label="记录ID" min-width="180" fixed="left" show-overflow-tooltip/>
              <el-table-column prop="orderId" label="订单ID" min-width="150" fixed="left" show-overflow-tooltip/>
              <el-table-column prop="vehicleNo" label="料箱号" min-width="150" show-overflow-tooltip/>
              <el-table-column prop="vehicleSize" label="料箱尺寸" min-width="150" show-overflow-tooltip/>
              <el-table-column prop="inStand" label="入库站台" min-width="150" show-overflow-tooltip/>
              <el-table-column prop="destination" label="目的地" min-width="150" show-overflow-tooltip>
                <template #default="scope">
                  {{ scope.row.destination || '暂无' }}
                </template>
              </el-table-column>
              <el-table-column prop="clientId" label="客户端ID" min-width="150" show-overflow-tooltip/>
              <el-table-column prop="goodsId" label="物料编号" min-width="150" show-overflow-tooltip/>
              <el-table-column prop="goodsName" label="物料名称" min-width="200" show-overflow-tooltip/>
              <el-table-column prop="batch" label="批次" min-width="150" show-overflow-tooltip/>
              <el-table-column prop="goodsType" label="物料类型" min-width="150" show-overflow-tooltip/>
              <el-table-column prop="specification" label="规格" min-width="150" show-overflow-tooltip/>
              <el-table-column prop="quantity" label="数量" min-width="120" show-overflow-tooltip/>
              <el-table-column prop="goodsDesc" label="物料描述" min-width="200" show-overflow-tooltip>
                <template #default="scope">
                  {{ scope.row.goodsDesc || '暂无' }}
                </template>
              </el-table-column>
              <el-table-column prop="orderStatus" label="订单状态" min-width="120" show-overflow-tooltip>
                <template #default="scope">
                  <el-tag
                      :type="scope.row.orderStatus === 0 ? 'success' : scope.row.orderStatus === 1 ? 'warning' : 'danger'">
                    {{ scope.row.orderStatus === 0 ? '正常' : scope.row.orderStatus === 1 ? '处理中' : '异常' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" min-width="180" show-overflow-tooltip>
                <template #default="scope">
                  {{ formatDateTime(scope.row.createTime) }}
                </template>
              </el-table-column>
              <el-table-column label="更新时间" min-width="180" show-overflow-tooltip>
                <template #default="scope">
                  {{ formatDateTime(scope.row.updateTime) }}
                </template>
              </el-table-column>
              <el-table-column label="完成时间" min-width="180" show-overflow-tooltip>
                <template #default="scope">
                  {{ formatDateTime(scope.row.completeTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip>
                <template #default="scope">
                  {{ scope.row.remark || '暂无' }}
                </template>
              </el-table-column>
              <!-- 修改后 -->
              <el-table-column label="操作" width="180" fixed="right">
                <template #default="scope">
                  <div class="action-buttons">
                    <el-button
                        type="primary"
                        size="small"
                        @click="viewOrderInDetail(scope.row)"
                        class="btn-view"
                    >详情</el-button>
                    <el-button
                        type="warning"
                        size="small"
                        @click="openEditDialog(scope.row)"
                        class="btn-edit"
                    >编辑</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </fieldset>

        <el-dialog v-model="responseDialogVisible" title="请求结果" width="500px">
          <pre>{{ responseResult }}</pre>
          <template #footer>
                        <span class="dialog-footer">
                            <el-button type="primary" @click="responseDialogVisible = false">确定</el-button>
                        </span>
          </template>
        </el-dialog>

        <!-- 入库单详情对话框 -->
        <el-dialog v-model="orderInDetailDialogVisible" title="入库单详情" width="70%">
          <div v-if="currentOrderIn">
            <h4>基本信息</h4>
            <el-descriptions :column="3" border>
              <el-descriptions-item label="记录ID">{{ currentOrderIn.recordId }}</el-descriptions-item>
              <el-descriptions-item label="订单ID">{{ currentOrderIn.orderId }}</el-descriptions-item>
              <el-descriptions-item label="料箱号">{{ currentOrderIn.vehicleNo }}</el-descriptions-item>
              <el-descriptions-item label="料箱尺寸">{{ currentOrderIn.vehicleSize }}</el-descriptions-item>
              <el-descriptions-item label="入库站台">{{ currentOrderIn.inStand }}</el-descriptions-item>
              <el-descriptions-item label="目的地">{{ currentOrderIn.destination }}</el-descriptions-item>
              <el-descriptions-item label="客户端ID">{{ currentOrderIn.clientId }}</el-descriptions-item>
              <el-descriptions-item label="物料编号">{{ currentOrderIn.goodsId }}</el-descriptions-item>
              <el-descriptions-item label="物料名称">{{ currentOrderIn.goodsName }}</el-descriptions-item>
              <el-descriptions-item label="订单状态">
                <el-tag
                    :type="currentOrderIn.orderStatus === 0 ? 'success' : currentOrderIn.orderStatus === 1 ? 'warning' : 'danger'">
                  {{ currentOrderIn.orderStatus === 0 ? '正常' : currentOrderIn.orderStatus === 1 ? '处理中' : '异常' }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="创建时间">{{ currentOrderIn.createTime }}</el-descriptions-item>
              <el-descriptions-item label="更新时间">{{ currentOrderIn.updateTime }}</el-descriptions-item>
              <el-descriptions-item label="完成时间">{{ currentOrderIn.completeTime }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-dialog>
        <!-- 添加编辑状态对话框 -->
        <el-dialog v-model="editDialogVisible" title="编辑入库单状态" width="30%">
          <el-form :model="currentEditOrder" label-width="100px">
            <el-form-item label="订单状态">
              <el-select
                  v-model="currentEditOrder.orderStatus"
                  placeholder="请选择订单状态"
                  clearable
              >
                <el-option label="全部" value=""/>
                <el-option label="创建" :value="0"/>
                <el-option label="运行中" :value="1"/>
                <el-option label="完成" :value="2"/>
                <el-option label="取消" :value="3"/>
                <el-option label="错误" :value="4"/>
              </el-select>
            </el-form-item>
          </el-form>
          <template #footer>
        <span class="dialog-footer">
            <el-button @click="editDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="saveOrderStatus">保存</el-button>
        </span>
          </template>
        </el-dialog>
      </div>
    </el-container>
  </el-config-provider>
</template>

<script setup>
import {reactive, ref, onMounted, nextTick, onBeforeUnmount} from 'vue'
import {ElMessage} from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {loading} from '@/utils/loading.js'
import {errorBox} from '@/utils/myMessageBox.js'
import {labelPosition} from '@/constant/form'
import {submitOrderInForm, getOrderIns, updateOrderIn} from '@/api/orderIn.js'

// 生成订单号方法
const generateOrderId = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  const milliseconds = String(now.getMilliseconds()).padStart(3, '0')
  return `baokai${year}${month}${day}${hours}${minutes}${seconds}${milliseconds}`
}

// 表单数据
const orderInFormRef = ref()
const orderInForm = reactive({
  orderId: generateOrderId(),
  vehicleNo: '',
  vehicleSize: '',
  inStand: '',
  clientId: 'YaChi',
  goodsDetail: []
})

// 添加响应式变量
const editDialogVisible = ref(false)
const currentEditOrder = ref(null)

// 打开编辑对话框
const openEditDialog = (row) => {
  currentEditOrder.value = { ...row }
  editDialogVisible.value = true
}

// 查询表单数据
const queryFormRef = ref()
const queryForm = reactive({
  vehicleNo: '',
  vehicleSize: '',
  inStand: '',
  orderStatus: ''
})

// 表单规则
const rules = reactive({
  vehicleNo: [{required: true, message: '请输入料箱号', trigger: 'blur'}],
  vehicleSize: [{required: true, message: '请输入料箱尺寸', trigger: 'blur'}],
  inStand: [{required: true, message: '请输入入库站台', trigger: 'blur'}],
})

// 引用DOM元素
const vehicleNoRef = ref()
const vehicleSizeRef = ref()
const inStandRef = ref()

// 响应结果对话框
const responseDialogVisible = ref(false)
const responseResult = ref({})

// 表格高度控制
let maxHeight = ref(window.innerHeight * 0.4)

// 查询结果相关
const orderInsList = ref([])
const orderInDetailDialogVisible = ref(false)
const currentOrderIn = ref(null)

// 初始化时聚焦第一个输入框
onMounted(() => {
  nextTick(() => {
    vehicleNoRef.value.focus()
    window.addEventListener('resize', resizeHeight)
  })
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHeight)
})

// 调整表格高度
const resizeHeight = () => {
  maxHeight.value = window.innerHeight * 0.4
}

// 处理回车事件
const handleEnter = (nextField) => {
  const refMap = {
    'vehicleNo': vehicleNoRef,
    'vehicleSize': vehicleSizeRef,
    'inStand': inStandRef
  }

  if (refMap[nextField]) {
    refMap[nextField].value.focus()
  }
}

// 添加物料明细
const addGoodsDetail = () => {
  orderInForm.goodsDetail.push({
    goodsId: '',
    goodsName: '',
    batch: '',
    goodsType: '',
    specification: '',
    quantity: 1,
    goodsDesc: ''
  })
}

// 移除物料明细
const removeGoodsDetail = (index) => {
  orderInForm.goodsDetail.splice(index, 1)
}

// 清空物料明细
const clearGoodsDetail = () => {
  orderInForm.goodsDetail = []
}

// 重置表单（添加重置表单的方法，包括重新生成订单号）
const resetOrderInForm = () => {
  orderInForm.orderId = generateOrderId()
  orderInForm.vehicleNo = ''
  orderInForm.vehicleSize = ''
  orderInForm.inStand = ''
  orderInForm.goodsDetail = []
}

// 提交入库单
const submitOrderIn = () => {
  orderInFormRef.value.validate((valid) => {
    if (valid) {
      if (orderInForm.goodsDetail.length === 0) {
        errorBox('请至少添加一条物料明细')
        return
      }

      // 检查所有物料明细是否填写完整
      for (let i = 0; i < orderInForm.goodsDetail.length; i++) {
        const item = orderInForm.goodsDetail[i]
        if (!item.goodsId || !item.goodsName || !item.batch || !item.goodsType || !item.specification || !item.quantity) {
          errorBox(`第${i + 1}行物料明细填写不完整，请检查`)
          return
        }
      }

      // 发送请求
      loading.open()
      submitOrderInForm(orderInForm)
          .then(res => {
            responseResult.value = res.data
            responseDialogVisible.value = true

            if (res.data.code === 0) {
              ElMessage.success('入库单提交成功')
              // 提交成功后重置表单，生成新的订单号
              resetOrderInForm()
            } else {
              errorBox(`入库单提交失败: ${res.data.message}`)
            }
          })
          .catch(err => {
            console.error(err)
            errorBox('提交入库单时发生错误')
          })
          .finally(() => {
            loading.close()
          })
    } else {
      errorBox('请填写完整的入库单信息')
    }
  })
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '暂无';
  try {
    const date = new Date(dateTime);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  } catch (error) {
    console.error('日期格式化错误:', error);
    return dateTime;
  }
}

// 查询入库单
const queryOrderIns = () => {
  const queryParams = {
    vehicleNo: queryForm.vehicleNo,
    vehicleSize: queryForm.vehicleSize,
    inStand: queryForm.inStand,
    orderStatus: queryForm.orderStatus
  }

  loading.open('查询中...')
  getOrderIns(queryParams)
      .then(res => {
        console.log(JSON.stringify(res));
        console.log(JSON.stringify(res.data));
        if (res.status === 200) {
          orderInsList.value = res.data || [];
          if (orderInsList.value.length === 0) {
            ElMessage.info('未查询到相关入库单')
          }
        } else {
          errorBox(`查询失败: ${res.data.message}`)
          orderInsList.value = []
        }
      })
      .catch(err => {
        console.error(err)
        errorBox('查询入库单时发生错误')
        orderInsList.value = []
      })
      .finally(() => {
        loading.close()
      })
}

// 重置查询表单
const resetQueryForm = () => {
  queryForm.vehicleNo = ''
  queryForm.vehicleSize = ''
  queryForm.inStand = ''
  queryForm.orderStatus = ''
  orderInsList.value = []
}

// 查看入库单详情
const viewOrderInDetail = (row) => {
  currentOrderIn.value = row
  orderInDetailDialogVisible.value = true
}

// 保存状态修改
const saveOrderStatus = () => {
  if (currentEditOrder.value.orderStatus === undefined || currentEditOrder.value.orderStatus === null) {
    errorBox('请选择订单状态')
    return
  }

  loading.open('保存中...')
  updateOrderIn(currentEditOrder.value.recordId, currentEditOrder.value.orderStatus).then(res => {
    if (res.data.code === 0) {
      ElMessage.success('状态更新成功')
      // 更新本地数据
      const index = orderInsList.value.findIndex(
          item => item.orderId === currentEditOrder.value.orderId
      )
      if (index > -1) {
        orderInsList.value[index].orderStatus = currentEditOrder.value.orderStatus
      }
      editDialogVisible.value = false
    } else {
      errorBox(`状态更新失败: ${res.data.message}`)
    }
  }).catch(err => {
    console.error(err)
    errorBox('状态更新失败')
  }).finally(() => {
    loading.close()
  })
}

</script>

<style scoped>
.content {
  display: flex;
  width: 100%;
  overflow-x: hidden;
}

.work-area {
  width: 100%;
  height: calc(100vh - 160px);
  padding: 15px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.main-area, .goods-detail-area, .query-area, .query-result-area {
  width: 100%;
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-sizing: border-box;
}

/* 物料明细表格样式 */
.table-area {
  width: 100%;
  min-height: fit-content;
  margin-bottom: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
}

.table-class {
  width: 100% !important;
}

/* 修改查询表格容器样式 */
.query-table-container {
  overflow-x: hidden; /* 修改前为auto */
  position: relative;
}

/* 调整表格宽度设置 */
.query-result-table {
  min-width: 100% !important; /* 修改前为2000px */
}


:deep(.query-result-table) {
  width: 100%;
  margin: 5px;
  table-layout: fixed;
}


/* 增加表格内部滚动控制 */
:deep(.query-result-table .el-table__body-wrapper) {
  overflow-x: auto !important;
  max-width: 100vw; /* 防止溢出视口 */
}

:deep(.query-result-table.el-table--scrollable-x .el-table__body-wrapper) {
  overflow-x: scroll !important;
}

/* 同步滚动条样式 */
:deep(.query-result-table .el-table__header-wrapper) {
  overflow-x: hidden !important;
  margin-bottom: -17px !important; /* 隐藏原生滚动条 */
}

/* 调整Element UI表格的显示方式 */
:deep(.query-result-table.el-table) {
  display: table; /* 保持表格布局 */
}

:deep(.el-input),
:deep(.el-select) {
  width: 100%;
}

:deep(.el-input__inner) {
  height: 36px;
}

:deep(.el-table .cell) {
  word-break: break-all;
  white-space: normal;
  line-height: 1.5;
  padding: 5px;
  text-align: center;
}

/* 调整操作列样式 */
.query-result-table .el-table-column--fixed-right {
  position: sticky !important;
  right: 0;
  z-index: 2;
  background: white;
}

/* 列宽优化 */
.query-result-table .el-table__cell {
  min-width: 120px !important;
  max-width: 200px;
}

/* 固定表头列宽 */
.query-result-table .el-table-column--fixed-left {
  position: sticky !important;
  left: 0;
  z-index: 2;
  background: white;
}

/* 自定义滚动条样式 */
.query-table-container::-webkit-scrollbar {
  height: 8px;
  background: #f5f5f5;
}

.query-table-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

/* 固定列样式修正 */
:deep(.el-table__fixed-right) {
  height: 100% !important;
  background: #fff;
  box-shadow: -5px 0 15px -5px rgba(0,0,0,0.1);
}

/* 操作按钮容器 */
.action-buttons {
  display: flex;
  gap: 5px;
  justify-content: center;
  flex-wrap: nowrap;
}

/* 按钮最小宽度 */
.action-buttons .el-button {
  flex-shrink: 0;
  min-width: 60px;
  padding: 8px 12px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .action-buttons {
    flex-direction: column;
  }
  .action-buttons .el-button {
    width: 100%;
    margin-left: 0 !important;
  }
}

legend {
  padding: 0 10px;
  font-weight: bold;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  background-color: #f8f8f8;
  padding: 15px;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
}
</style>