项目初始化

This commit is contained in:
liuhanqing
2025-10-16 14:37:22 +08:00
commit 69c2dc5cd5
1636 changed files with 306197 additions and 0 deletions

View File

@@ -0,0 +1,773 @@
<template>
<div class="app-container">
<!-- 查询表单 -->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item :label="'出库单编号'" prop="stockoutId"> <!-- 出库单编号 -->
<el-input
v-model="queryParams.stockoutId"
:placeholder="'请输入出库单编号'"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item :label="'出库类型'" prop="outType"> <!-- 出库类型 -->
<el-select v-model="queryParams.outType" :placeholder="'请选择出库类型'" clearable>
<el-option
v-for="dict in dict.type.out_bill_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item :label="'单据状态'" prop="status"> <!-- 单据状态 -->
<el-select v-model="queryParams.status" :placeholder="'请选择单据状态'">
<el-option
v-for="dict in dict.type.out_bill_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item :label="'客户名称'" prop="customerName">
<el-input
v-model="queryParams.customerName"
:placeholder="'请输入客户名称'"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item :label="'物料名称'" prop="productName">
<el-input
v-model="queryParams.productName"
:placeholder="'请输入物料名称'"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item :label="'创建时间'" prop="dateRange">
<el-date-picker
v-model="dateRange"
type="datetimerange"
range-separator="---"
:start-placeholder="'起始时间'"
:end-placeholder="'结束时间'"
value-format="yyyy-MM-dd HH:mm:ss"
:default-time="['00:00:00', '23:59:59']"
/>
</el-form-item>
<!-- <el-form-item :label="'仓库'" prop="warehouseId">&lt;!&ndash;仓库&ndash;&gt;-->
<!-- <el-select-->
<!-- v-model="queryParams.warehouseId"-->
<!-- :placeholder="'请选择仓库'"-->
<!-- clearable-->
<!-- @change="handleQuery"-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="item in warehouseOptions"-->
<!-- :key="item.warehouseId"-->
<!-- :label="item.warehouseName"-->
<!-- :value="item.warehouseId"-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{'搜索'}}</el-button> <!-- 搜索 -->
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{'重置'}}</el-button> <!-- 重置 -->
</el-form-item>
</el-form>
<!-- 操作按钮 -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-check"
size="mini"
@click="handleAudit(2)"
v-hasPermi="['out:outStockout:changeStatus']"
>{{'单据审核'}}</el-button> <!-- 单据审核 -->
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-circle-check"
size="mini"
@click="handleAudit(4)"
v-hasPermi="['out:outStockout:changeStatus']"
>{{'单据确认'}}</el-button> <!-- 单据确认 -->
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
@click="handleAudit(5)"
v-hasPermi="['out:outStockout:changeStatus']"
>{{'单据作废'}}</el-button> <!-- 单据作废 -->
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-s-promotion"
size="mini"
@click="handleAutoAllot"
v-hasPermi="['out:outStockout:autoAllot']"
>{{'自动分配'}}</el-button> <!-- 自动分配 -->
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-s-tools"
size="mini"
@click="handleManualAllot"
v-hasPermi="['out:outStockout:manualAllot']"
>{{'手动分配'}}</el-button> <!-- 手动分配 -->
</el-col>
</el-row>
<!-- 主表数据 -->
<el-table v-loading="loading" :data="outStockoutList" @selection-change="handleSelectionChange" @row-click="handleRowClick" max-height="400">
<el-table-column type="selection" width="55" align="center" />
<el-table-column :label="'出库单编号'" align="left" prop="stockoutId" /> <!-- 出库单编号 -->
<el-table-column :label="'出库类型'" align="left" prop="outType"> <!-- 出库类型 -->
<template slot-scope="scope">
<dict-tag :options="dict.type.out_bill_type" :value="scope.row.outType"/>
</template>
</el-table-column>
<el-table-column :label="'单据状态'" align="left" prop="status"> <!-- 单据状态 -->
<template slot-scope="scope">
<dict-tag :options="dict.type.out_bill_status" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column :label="'出口'" align="left" prop="exitId" />
<el-table-column :label="'客户编码'" align="left" prop="customerNo" /><!-- 客户编码 -->
<el-table-column :label="'客户名称'" align="left" prop="customerName" />
<el-table-column :label="'建单人'" align="left" prop="createManId" /> <!-- 建单人 -->
<el-table-column :label="'创建时间'" align="left" prop="createDate" /><!-- 创建时间 -->
<el-table-column :label="'开始时间'" align="left" prop="startDate" /><!-- 开始时间 -->
<el-table-column :label="'确认时间'" align="left" prop="finishDate" /> <!-- 确认时间 -->
<!-- <el-table-column :label="'仓库名称'" align="left" prop="warehouseName" />&lt;!&ndash; 仓库名称 &ndash;&gt;-->
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 子表数据 -->
<el-table v-loading="detailLoading" :data="outStockDetailList" style="margin-top: 20px;" @selection-change="handleDetailSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column :label="'出库子单编号'" align="center" prop="stockoutDetailId" width="160" /> <!-- 出库子单编号 -->
<el-table-column :label="'物料编码'" align="center" prop="productId" /> <!-- 物资编码 -->
<el-table-column :label="'物料名称'" align="center" prop="productName" />
<el-table-column :label="'批次号'" align="center" prop="lotNo"/><!--英文描述-->
<el-table-column :label="'序列号'" align="center" prop="printDate" /> <!--序列号-->
<el-table-column label="订单号" align="center" prop="orderId" width="160" />
<el-table-column :label="'计划数量'" align="center" prop="quantity" /> <!-- 计划数量 -->
<el-table-column :label="'分配数量'" align="center" prop="allotQuantity" /> <!-- 分配数量 -->
<el-table-column :label="'实际数量'" align="center" prop="assignNum" /> <!-- 实际数量 -->
<el-table-column :label="'颜色'" align="center" prop="price"/><!--箱号-->
<el-table-column :label="'单位'" align="center" prop="unit"/><!--单位-->
<el-table-column :label="'规格'" align="center" prop="spec" /> <!--规格-->
<el-table-column :label="'型号'" align="center" prop="cargoNo" /> <!--型号-->
<el-table-column label="电压" align="center" prop="voltage" />
<el-table-column label="功率" align="center" prop="power" />
<el-table-column label="相位" align="center" prop="phase" />
<el-table-column label="净重" align="center" prop="netWeight" />
<el-table-column label="毛重" align="center" prop="grossWeight" />
<el-table-column label="分销" align="center" prop="distribution" />
<el-table-column label="机型" align="center" prop="model" />
<el-table-column :label="'备注'" align="center" prop="remark" /> <!-- 备注 -->
</el-table>
<!-- <pagination-->
<!-- v-show="detailTotal>0"-->
<!-- :total="detailTotal"-->
<!-- :page.sync="detailQueryParams.pageNum"-->
<!-- :limit.sync="detailQueryParams.pageSize"-->
<!-- @pagination="getDetailList"-->
<!-- />-->
<!-- 审核弹窗 -->
<el-dialog :title="'审核'" :visible.sync="auditDialogVisible" width="400px" append-to-body>
<el-form ref="auditForm" :model="auditForm" :rules="auditRules" label-width="80px">
<el-form-item :label="'选择出口'" prop="exitId">
<el-select v-model="auditForm.exitId" :placeholder="'请选择出口'" clearable>
<el-option
v-for="item in exitOptions"
:key="item.exitId"
:label="item.exitName"
:value="item.exitId"
/>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitAudit">{{"确认"}}</el-button>
<el-button @click="cancelAudit">{{"取消"}}</el-button>
</div>
</el-dialog>
<!-- 手动分配库存明细弹窗 -->
<el-dialog title="库存明细" :visible.sync="stockDialogVisible" width="90%" append-to-body>
<!-- 数量统计信息 -->
<el-row style="margin-bottom: 15px; padding: 10px; background-color: #f5f7fa; border-radius: 4px;">
<el-col :span="8">
<span style="font-weight: bold;">计划数量: </span>
<span style="color: #409EFF; font-size: 16px;">{{ selectedDetailRows.length > 0 ? selectedDetailRows[0].quantity : 0 }}</span>
</el-col>
<el-col :span="8">
<span style="font-weight: bold;">已选库存数量: </span>
<span style="color: #67C23A; font-size: 16px;">{{ selectedStockQuantity }}</span>
</el-col>
<el-col :span="8">
<span style="font-weight: bold;">剩余可分配: </span>
<span :style="{ color: remainingQuantity >= 0 ? '#67C23A' : '#F56C6C', fontSize: '16px' }">{{ remainingQuantity }}</span>
</el-col>
</el-row>
<!-- 查询表单 -->
<el-form :model="stockQueryParams" ref="stockQueryForm" size="small" :inline="true" label-width="80px">
<el-form-item label="库存编码" prop="stockId">
<el-input
v-model="stockQueryParams.stockId"
placeholder="请输入库存编码"
clearable
@keyup.enter.native="handleStockQuery"
/>
</el-form-item>
<el-form-item label="货位编码" prop="cargoSpaceName">
<el-input
v-model="stockQueryParams.cargoSpaceName"
placeholder="请输入货位名称"
clearable
@keyup.enter.native="handleStockQuery"
/>
</el-form-item>
<el-form-item label="批次号" prop="lotNo">
<el-input
v-model="stockQueryParams.lotNo"
placeholder="请输入批次号"
clearable
@keyup.enter.native="handleStockQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleStockQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetStockQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 库存明细表格 -->
<el-table ref="stockTable" v-loading="stockLoading" :data="stockList" @selection-change="handleStockSelectionChange" max-height="400">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="库存编码" align="center" prop="stockId" />
<el-table-column label="货位名称" align="center" prop="cargoSpaceName" />
<el-table-column label="批次号" align="center" prop="lotNo" />
<el-table-column label="物料编码" align="center" prop="productId" />
<el-table-column label="物料名称" align="center" prop="productName" />
<el-table-column label="数量" align="center" prop="quantity" width="80" />
<el-table-column label="规格" align="center" prop="spare1" />
<el-table-column label="单位" align="center" prop="spare3" />
<el-table-column label="型号" align="center" prop="spare4" />
<el-table-column label="颜色" align="center" prop="spare5" />
<el-table-column label="序列号" align="center" prop="spare6" />
<el-table-column label="电压" align="center" prop="voltage" />
<el-table-column label="功率" align="center" prop="power" />
<el-table-column label="相位" align="center" prop="phase" />
<el-table-column label="净重" align="center" prop="netWeight" />
<el-table-column label="毛重" align="center" prop="grossWeight" />
<el-table-column label="分销" align="center" prop="distribution" />
<el-table-column label="机型" align="center" prop="model" />
<el-table-column label="订单号" align="center" prop="orderId" />
</el-table>
<pagination
v-show="stockTotal>0"
:total="stockTotal"
:page.sync="stockQueryParams.pageNum"
:limit.sync="stockQueryParams.pageSize"
@pagination="getStockList"
/>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="confirmStockAllot">确认分配</el-button>
<el-button @click="cancelStockAllot">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listOutStockout,autoAllot,listOut,manualAllot} from "@/api/out/outStockout"
import { getOutStockoutDetail,updateOutStockStatus } from "@/api/out/outStockout"
import {listWarehouse} from "@/api/bas/warehouse";
export default {
name: "OutStockWithDetail",
dicts: ['out_bill_type', 'out_bill_status'],
data() {
return {
// 遮罩层
loading: true,
detailLoading: false,
warehouseOptions:[],
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 主表数据
outStockoutList: [],
// 子表数据
outStockDetailList: [],
// 选中数据
selectedRows: [],
// 选中的子表数据
selectedDetailRows: [],
// 审核弹窗显示状态
auditDialogVisible: false,
// 审核表单数据
auditForm: {
exitId: null
},
// 库存明细弹窗显示状态
stockDialogVisible: false,
// 库存明细数据
stockList: [],
// 库存明细加载状态
stockLoading: false,
// 库存明细总条数
stockTotal: 0,
// 选中的库存数据
selectedStockRows: [],
// 审核表单验证规则
auditRules: {
exitId: [
{ required: true, message: '请选择出口', trigger: 'change' }
]
},
// 出口选项
exitOptions: [
{ exitId: '1', exitName: '一楼'},
{ exitId: '2', exitName: '二楼'},
],
// 当前审核状态
currentAuditStatus: null,
// 日期范围
dateRange: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
stockoutId: null,
outType: null,
customerNo: null,
customerName: null,
productName: null,
startDate: null,
finishDate: null,
status: '1'
},
// 子表分页参数
detailQueryParams: {
pageNum: 1,
pageSize: 99,
status:null,
stockoutGuid:null
},
warehouseQueryParams: {
pageNum: 1,
pageSize: 99,
},
// 子表总条数
detailTotal: 0,
// 库存查询参数
stockQueryParams: {
pageNum: 1,
pageSize: 10,
stockId: null,
cargoSpaceId: null,
lotNo: null,
productId: null,
productName: null
}
}
},
computed: {
// 计算选中库存的总数量
selectedStockQuantity() {
return this.selectedStockRows.reduce((total, stock) => {
console.log(total+ + (parseFloat(stock.quantity)))
return total + (parseFloat(stock.quantity) || 0)
}, 0)
},
// 计算剩余可分配数量
remainingQuantity() {
const planQuantity = this.selectedDetailRows.length > 0 ? (parseFloat(this.selectedDetailRows[0].quantity) || 0) : 0
return planQuantity - this.selectedStockQuantity
}
},
created() {
this.getList()
this.getWarehouseList()
},
methods: {
/** 获取仓库列表 */
getWarehouseList() {
listWarehouse(this.warehouseQueryParams).then(response => {
this.warehouseOptions = response.rows;
if (this.warehouseOptions.length > 0) {
this.handleQuery();
}
});
},
/** 查询主表数据 */
getList() {
this.loading = true
listOutStockout(this.queryParams).then(response => {
this.outStockoutList = response.rows
this.total = response.total
this.loading = false
// 如果有数据,自动选中第一行
if (this.outStockoutList.length > 0) {
this.handleRowClick(this.outStockoutList[0]);
}else {
this.outStockDetailList = []
this.detailLoading = false
}
})
},
/** 查询子表数据 */
getDetailList(stockoutGuid,status) {
this.detailLoading = true
this.detailQueryParams.stockoutGuid = stockoutGuid
this.detailQueryParams.status = status
getOutStockoutDetail(this.detailQueryParams).then(response => {
this.outStockDetailList = response.rows
this.detailTotal = response.total
this.detailLoading = false
})
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
// 处理日期范围
if (this.dateRange && this.dateRange.length > 0) {
this.queryParams.startDate = this.dateRange[0]
this.queryParams.finishDate = this.dateRange[1]
} else {
this.queryParams.startDate = null
this.queryParams.finishDate = null
}
// 清空子表数据
this.outStockDetailList = []
this.detailTotal = 0
this.detailQueryParams.stockoutGuid = null
this.detailQueryParams.status = null
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = []
this.resetForm("queryForm")
this.handleQuery()
},
/** 点击行加载明细数据 */
handleRowClick(row) {
this.getDetailList(row.stockoutGuid,row.status)
},
/** 多选框选中数据 */
handleSelectionChange(selection) {
this.selectedRows = selection
},
/** 子表多选框选中数据 */
handleDetailSelectionChange(selection) {
this.selectedDetailRows = selection
},
/** 单据状态修改按钮操作 */
handleAudit(status) {
if (this.selectedRows.length === 0) {
this.$modal.msgError('请选择数据')
return
}
for(var i=0;i<this.selectedRows.length;i++){
if (this.selectedRows[i].status != "1" && status == 2) {
this.$modal.msgError(this.selectedRows[i].stockoutId+'单据已审核')
return
}
if (Number(this.selectedRows[i].status) < 3 && status == 4) {
this.$modal.msgError(this.selectedRows[i].stockoutId+"单据未开始,无法确认")
return
}
if (this.selectedRows[i].status != "1" && status == 5){
this.$modal.msgError(this.selectedRows[i].stockoutId+'单据已审核,无法作废')
return;
}
}
// 如果是审核操作(status=2),显示弹窗选择出口
if (status === 2 || status === 3) {
this.currentAuditStatus = status
this.auditDialogVisible = true
this.auditForm.exitId = null
return
}
const params = {
stockoutIds: this.selectedRows.map(row => row.stockoutId),
status: this.selectedRows[0].status,
newStatus: status
}
console.log("单据状态修改:", params)
//调用单据状态改变接口
updateOutStockStatus(params).then(response => {
this.$modal.msgSuccess(response)
this.getList()
})
},
/** 自动分配按钮操作 */
handleAutoAllot() {
if (this.selectedRows.length === 0) {
this.$modal.msgError('请选择数据')
return
}
if (this.selectedRows.length > 1) {
this.$modal.msgError('只能选择一条数据进行自动分配')
return
}
const stockoutIds = this.selectedRows.map(row => row.stockoutId)
let outstock = this.selectedRows[0]
if (outstock.status != "2" && outstock.status != "3") {
this.$modal.msgError('请先审核出库单')
return
}
let data = {
stockoutId: stockoutIds[0]
}
autoAllot(data).then(response => {
if (response.code !== 200){
this.$modal.msgError(response.msg)
}else {
this.$modal.msgSuccess(response.msg)
}
this.getList()
})
},
/** 手动分配按钮操作 */
handleManualAllot() {
if (this.selectedDetailRows.length === 0) {
this.$modal.msgError('请选择子表数据')
return
}
if (this.selectedDetailRows.length > 1) {
this.$modal.msgError('只能选择一条子表数据进行手动分配')
return
}
// 检查主表状态
if(this.selectedRows.length >1){
this.$modal.msgError('只能选择一条主表数据进行手动分配')
return
}
if (this.selectedRows.length === 0) {
this.$modal.msgError('请先选择主表数据')
return
}
let outstock = this.selectedRows[0]
if (outstock.status == "1") {
this.$modal.msgError('单据未审核,无法手动分配!')
return
}
if (outstock.status != "2" && outstock.status != "3") {
this.$modal.msgError('单据已结束,无法手动分配!')
return
}
if(this.selectedDetailRows[0].allotQuantity==this.selectedDetailRows[0].quantity){
this.$modal.msgError('该单据已分配完成,无法手动分配')
return
}
// 显示库存明细弹窗
this.stockDialogVisible = true
this.resetStockQuery()
this.getStockList()
},
/** 提交审核 */
submitAudit() {
this.$refs["auditForm"].validate(valid => {
if (valid) {
const params = {
stockoutIds: this.selectedRows.map(row => row.stockoutId),
status: this.selectedRows[0].status,
newStatus: this.currentAuditStatus,
exitId: this.auditForm.exitId
}
// console.log("单据状态修改(含出口信息):", params)
//调用单据状态改变接口
updateOutStockStatus(params).then(response => {
this.$modal.msgSuccess(response)
this.auditDialogVisible = false
this.getList()
})
}
})
},
/** 取消审核 */
cancelAudit() {
this.auditDialogVisible = false
this.auditForm.exitId = null
this.currentAuditStatus = null
},
/** 获取库存明细列表 */
getStockList() {
this.stockLoading = true
this.stockQueryParams.productId = this.selectedDetailRows[0].productId
listOut(this.stockQueryParams).then(response => {
this.stockList = response.rows
this.stockTotal = response.total
this.stockLoading = false
}).catch(() => {
this.stockLoading = false
})
},
/** 库存查询按钮操作 */
handleStockQuery() {
this.stockQueryParams.pageNum = 1
this.getStockList()
},
/** 库存重置按钮操作 */
resetStockQuery() {
this.stockQueryParams = {
pageNum: 1,
pageSize: 10,
stockId: null,
cargoSpaceName: null,
lotNo: null,
productId: null,
productName: null
}
this.$refs.stockQueryForm && this.$refs.stockQueryForm.resetFields()
},
/** 库存多选框选中数据 */
handleStockSelectionChange(selection) {
// 计算新选中的总数量
const newTotalQuantity = selection.reduce((total, stock) => {
return total + (parseFloat(stock.quantity) || 0)
}, 0)
// 获取计划数量
const planQuantity = this.selectedDetailRows.length > 0 ? (parseFloat(this.selectedDetailRows[0].quantity) || 0) : 0
// 校验是否超过计划数量
if (newTotalQuantity > planQuantity) {
this.$modal.msgWarning(`选中库存数量(${newTotalQuantity})不能大于计划数量(${planQuantity})`)
// // 恢复到之前的选择状态
// this.$nextTick(() => {
// // 通过表格引用来恢复选择状态
// if (this.$refs.stockTable) {
// this.$refs.stockTable.clearSelection()
// this.selectedStockRows.forEach(row => {
// this.$refs.stockTable.toggleRowSelection(row, true)
// })
// }
// })
// return
}
this.selectedStockRows = selection
},
/** 确认分配 */
confirmStockAllot() {
if (this.selectedStockRows.length === 0) {
this.$modal.msgError('请选择要分配的库存')
return
}
if (this.selectedDetailRows.length === 0) {
this.$modal.msgError('请选择要分配的子表数据')
return
}
// 最终数量校验
const planQuantity = parseFloat(this.selectedDetailRows[0].quantity) || 0
if (this.selectedStockQuantity > planQuantity) {
this.$modal.msgError(`选中库存数量(${this.selectedStockQuantity})不能大于计划数量(${planQuantity})`)
return
}
// 构建分配参数
const allotParams = {
stockoutDetailId: this.selectedDetailRows[0].stockoutDetailId,
stockList: this.selectedStockRows.map(stock => ({
stockId: stock.stockId
}))
}
console.log('手动分配参数:', allotParams)
// 这里添加实际的分配API调用
manualAllot(allotParams).then(response => {
if(response.code=="200"){
this.$modal.msgSuccess('分配成功')
this.stockDialogVisible = false
this.getList()
this.getDetailList(this.selectedRows[0].stockoutGuid, this.selectedRows[0].status)
}else{
this.$modal.msgError(response.msg)
}
})
},
/** 取消分配 */
cancelStockAllot() {
this.stockDialogVisible = false
this.selectedStockRows = []
// this.selectedDetailRows = []
}
}
}
</script>
<style scoped>
.el-form-item >>> .el-form-item__label {
white-space: nowrap;
width: auto;
min-width: fit-content;
}
</style>