仓库、总库存、库存明细适配手机端
This commit is contained in:
@@ -256,4 +256,52 @@ getAllApi()
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
/* 功能网格 */
|
||||
.mobile-home__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px 6px; // 网格间距变小
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.mobile-home__grid-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px; // 图标和文字间距变小
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-home__grid-icon {
|
||||
width: 65px; // 图标变大
|
||||
height: 65px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26px; // 图标字体大小变大
|
||||
transition: transform 0.2s;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-home__grid-label {
|
||||
font-size: 12px; // 文字略大，可根据需求微调
|
||||
color: #303133;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
max-width: 64px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,205 +1,248 @@
|
||||
<!-- ERP 产品库存明细列表 -->
|
||||
<!-- ERP 产品库存明细列表 - 移动端适配 -->
|
||||
<template>
|
||||
<doc-alert title="【库存】产品库存、库存明细" url="https://doc.iocoder.cn/erp/stock/" />
|
||||
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="产品" prop="productId">
|
||||
<el-select
|
||||
v-model="queryParams.productId"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择产品"
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in productList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品分类" prop="categoryId">
|
||||
<el-select
|
||||
v-model="queryParams.categoryId"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择产品分类"
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in categoryList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库" prop="warehouseId">
|
||||
<el-select
|
||||
v-model="queryParams.warehouseId"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择仓库"
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in warehouseList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作类型" prop="bizType">
|
||||
<el-select
|
||||
v-model="queryParams.bizType"
|
||||
placeholder="请选择操作类型"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.ERP_STOCK_RECORD_BIZ_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="业务单号" prop="bizNo">
|
||||
<div class="mobile-record">
|
||||
<!-- 搜索操作栏 -->
|
||||
<div class="mobile-header">
|
||||
<div class="mobile-header__search">
|
||||
<el-input
|
||||
v-model="queryParams.bizNo"
|
||||
placeholder="请输入业务单号"
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索产品名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
:prefix-icon="Search"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.createTime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
</div>
|
||||
<div class="mobile-header__actions">
|
||||
<el-button :icon="Filter" circle @click="showSearch = true" />
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
:icon="Plus"
|
||||
circle
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['erp:stock-record:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['erp:stock-record:export']"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExportProduct"
|
||||
:loading="exportBatchLoading"
|
||||
v-hasPermi="['erp:stock-record:export-product']"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出批次
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快捷操作 -->
|
||||
<div class="mobile-quick-actions">
|
||||
<el-button
|
||||
size="small"
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['erp:stock-record:export']"
|
||||
>
|
||||
导出
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExportProduct"
|
||||
:loading="exportBatchLoading"
|
||||
v-hasPermi="['erp:stock-record:export-product']"
|
||||
>
|
||||
导出批次
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 选中提示 -->
|
||||
<div v-if="multipleSelection.length > 0" class="mobile-selection-tip">
|
||||
已选择 {{ multipleSelection.length }} 条记录
|
||||
</div>
|
||||
|
||||
<!-- 列表内容 -->
|
||||
<div class="mobile-list" v-loading="loading">
|
||||
<div v-if="list.length === 0 && !loading" class="mobile-empty">
|
||||
<el-empty description="暂无数据" />
|
||||
</div>
|
||||
<div v-for="item in list" :key="item.id" class="mobile-card">
|
||||
<!-- 选择框 -->
|
||||
<div class="mobile-card__checkbox">
|
||||
<el-checkbox
|
||||
:model-value="multipleSelection.some(i => i.id === item.id)"
|
||||
@change="(val) => handleCheckboxChange(val, item)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mobile-card__content">
|
||||
<div class="mobile-card__header">
|
||||
<span class="mobile-card__name">{{ item.productName }}</span>
|
||||
<dict-tag :type="DICT_TYPE.ERP_STOCK_RECORD_BIZ_TYPE" :value="item.bizType" />
|
||||
</div>
|
||||
|
||||
<div class="mobile-card__body">
|
||||
<div class="mobile-card__row">
|
||||
<span class="mobile-card__label">产品分类</span>
|
||||
<span class="mobile-card__value">{{ item.categoryName || '-' }}</span>
|
||||
</div>
|
||||
<div class="mobile-card__row">
|
||||
<span class="mobile-card__label">产品单位</span>
|
||||
<span class="mobile-card__value">{{ item.unitName || '-' }}</span>
|
||||
</div>
|
||||
<div class="mobile-card__row">
|
||||
<span class="mobile-card__label">仓库</span>
|
||||
<span class="mobile-card__value">{{ item.warehouseName || '-' }}</span>
|
||||
</div>
|
||||
<div class="mobile-card__row">
|
||||
<span class="mobile-card__label">出入库单号</span>
|
||||
<span class="mobile-card__value mobile-card__value--ellipsis">{{ item.bizNo || '-' }}</span>
|
||||
</div>
|
||||
<div class="mobile-card__row">
|
||||
<span class="mobile-card__label">出入库日期</span>
|
||||
<span class="mobile-card__value">{{ dateFormatter({ createTime: item.createTime }) }}</span>
|
||||
</div>
|
||||
<div class="mobile-card__row mobile-card__row--highlight">
|
||||
<span class="mobile-card__label">出入库数量</span>
|
||||
<span class="mobile-card__value">{{ erpCountTableColumnFormatter({ count: item.count }) }}</span>
|
||||
</div>
|
||||
<div class="mobile-card__row mobile-card__row--highlight">
|
||||
<span class="mobile-card__label">库存量</span>
|
||||
<span class="mobile-card__value">{{ erpCountTableColumnFormatter({ count: item.totalCount }) }}</span>
|
||||
</div>
|
||||
<div class="mobile-card__row" v-hasPermi="['erp:stock:goods-value']">
|
||||
<span class="mobile-card__label">单价</span>
|
||||
<span class="mobile-card__value">{{ item.unitPrice != null ? item.unitPrice.toFixed(4) : '-' }}</span>
|
||||
</div>
|
||||
<div class="mobile-card__row" v-hasPermi="['erp:stock:goods-value']">
|
||||
<span class="mobile-card__label">货值</span>
|
||||
<span class="mobile-card__value mobile-card__value--price">{{ item.stockValue != null ? item.stockValue.toFixed(4) : '-' }}</span>
|
||||
</div>
|
||||
<div class="mobile-card__row">
|
||||
<span class="mobile-card__label">操作人</span>
|
||||
<span class="mobile-card__value">{{ item.creatorName || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mobile-card__footer" v-if="item.bizType === 90">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="handleDetail(item.bizId, item)"
|
||||
v-hasPermi="['erp:stock-record:review']"
|
||||
>
|
||||
查看详情
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
<el-table-column label="产品名称" align="center" prop="productName" />
|
||||
<el-table-column label="产品分类" align="center" prop="categoryName" />
|
||||
<el-table-column label="产品单位" align="center" prop="unitName" />
|
||||
<el-table-column label="仓库编号" align="center" prop="warehouseName" />
|
||||
<el-table-column label="操作类型" align="center" prop="bizType" min-width="100">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.ERP_STOCK_RECORD_BIZ_TYPE" :value="scope.row.bizType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="出入库单号" align="center" prop="bizNo" width="200" />
|
||||
<el-table-column
|
||||
label="出入库日期"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
sortable
|
||||
/>
|
||||
<el-table-column
|
||||
label="出入库数量"
|
||||
align="center"
|
||||
prop="count"
|
||||
:formatter="erpCountTableColumnFormatter"
|
||||
/>
|
||||
<el-table-column
|
||||
label="库存量"
|
||||
align="center"
|
||||
prop="totalCount"
|
||||
:formatter="erpCountTableColumnFormatter"
|
||||
/>
|
||||
<el-table-column label="单价" align="center" prop="unitPrice" v-hasPermi="['erp:stock:goods-value']">
|
||||
<template #default="scope">
|
||||
{{ scope.row.unitPrice != null ? scope.row.unitPrice.toFixed(4) : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="货值" align="center" prop="stockValue" v-hasPermi="['erp:stock:goods-value']">
|
||||
<template #default="scope">
|
||||
{{ scope.row.stockValue != null ? scope.row.stockValue.toFixed(4) : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作人" align="center" prop="creatorName" />
|
||||
<el-table-column label="操作" align="center" width="150">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="handleDetail(scope.row.bizId, scope.row)"
|
||||
v-hasPermi="['erp:stock-record:review']"
|
||||
:disabled="scope.row.bizType !== 90"
|
||||
>
|
||||
<Icon icon="ep:view" /> 查询
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
<div class="mobile-pagination" v-if="total > 0">
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
:page-sizes="[10, 20]"
|
||||
layout="total, prev, pager, next"
|
||||
:pager-count="5"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 质检详情弹窗 -->
|
||||
<QualityDetailDialog v-model:visible="dialogVisible" :quality-id="selectedQualityId" />
|
||||
<!-- 筛选抽屉 -->
|
||||
<el-drawer v-model="showSearch" title="筛选条件" direction="btt" size="60%">
|
||||
<el-form :model="queryParams" ref="queryFormRef" label-position="top">
|
||||
<el-form-item label="产品" prop="productId">
|
||||
<el-select
|
||||
v-model="queryParams.productId"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择产品"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in productList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品分类" prop="categoryId">
|
||||
<el-select
|
||||
v-model="queryParams.categoryId"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择产品分类"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in categoryList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库" prop="warehouseId">
|
||||
<el-select
|
||||
v-model="queryParams.warehouseId"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择仓库"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in warehouseList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作类型" prop="bizType">
|
||||
<el-select
|
||||
v-model="queryParams.bizType"
|
||||
placeholder="请选择操作类型"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.ERP_STOCK_RECORD_BIZ_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="业务单号" prop="bizNo">
|
||||
<el-input
|
||||
v-model="queryParams.bizNo"
|
||||
placeholder="请输入业务单号"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.createTime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="resetQuery">重置</el-button>
|
||||
<el-button type="primary" @click="handleFilterConfirm">确认筛选</el-button>
|
||||
</template>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 质检详情弹窗 -->
|
||||
<QualityDetailDialog v-model:visible="dialogVisible" :quality-id="selectedQualityId" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Search, Filter, Plus } from '@element-plus/icons-vue'
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import download from '@/utils/download'
|
||||
@@ -237,6 +280,8 @@ const warehouseList = ref<WarehouseVO[]>([]) // 仓库列表
|
||||
const categoryList = ref<any[]>([]) // 产品分类列表
|
||||
const isFinishedProduct = ref(false) // 是否是成品分类
|
||||
const multipleSelection = ref<StockRecordVO[]>([]) // 选中的行
|
||||
const showSearch = ref(false) // 搜索抽屉显示状态
|
||||
const searchKeyword = ref('') // 搜索关键词
|
||||
|
||||
// 质检详情弹窗
|
||||
const dialogVisible = ref(false)
|
||||
@@ -247,6 +292,18 @@ const handleSelectionChange = (selection: StockRecordVO[]) => {
|
||||
multipleSelection.value = selection
|
||||
}
|
||||
|
||||
/** 处理单个复选框变化 */
|
||||
const handleCheckboxChange = (checked: boolean, item: StockRecordVO) => {
|
||||
if (checked) {
|
||||
multipleSelection.value.push(item)
|
||||
} else {
|
||||
const index = multipleSelection.value.findIndex(i => i.id === item.id)
|
||||
if (index > -1) {
|
||||
multipleSelection.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 查看详情 */
|
||||
const handleDetail = (bizId: number, row: StockRecordVO) => {
|
||||
// 传递行的ID，而不是bizId
|
||||
@@ -269,12 +326,19 @@ const getList = async () => {
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
showSearch.value = false
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
queryFormRef.value?.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 确认筛选 */
|
||||
const handleFilterConfirm = () => {
|
||||
showSearch.value = false
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
@@ -341,3 +405,158 @@ onMounted(async () => {
|
||||
await getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-record {
|
||||
padding: 12px;
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&__search {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-quick-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mobile-selection-tip {
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 12px;
|
||||
background: #ecf5ff;
|
||||
color: #409eff;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mobile-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mobile-empty {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.mobile-card {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
&__checkbox {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: #303133;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&__body {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 3px 0;
|
||||
|
||||
&--highlight {
|
||||
background: #f0f9ff;
|
||||
padding: 5px 8px;
|
||||
margin: 2px -8px;
|
||||
border-radius: 4px;
|
||||
|
||||
.mobile-card__value {
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
color: #909399;
|
||||
flex-shrink: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
&__value {
|
||||
color: #606266;
|
||||
text-align: right;
|
||||
|
||||
&--ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
&--price {
|
||||
color: #f56c6c;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
text-align: center;
|
||||
|
||||
.el-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-pagination {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
:deep(.el-pagination) {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,107 +1,137 @@
|
||||
<!-- ERP 产品库存列表 -->
|
||||
<!-- ERP 产品库存列表 - 移动端适配 -->
|
||||
<template>
|
||||
<doc-alert title="【库存】产品库存、库存明细" url="https://doc.iocoder.cn/erp/stock/" />
|
||||
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="产品" prop="productId">
|
||||
<el-select
|
||||
v-model="queryParams.productId"
|
||||
<div class="mobile-stock">
|
||||
<!-- 搜索操作栏 -->
|
||||
<div class="mobile-header">
|
||||
<div class="mobile-header__search">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索产品名称"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择产品"
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in productList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库" prop="warehouseId">
|
||||
<el-select
|
||||
v-model="queryParams.warehouseId"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择仓库"
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in warehouseList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
@keyup.enter="handleQuery"
|
||||
:prefix-icon="Search"
|
||||
/>
|
||||
</div>
|
||||
<div class="mobile-header__actions">
|
||||
<el-button :icon="Filter" circle @click="showSearch = true" />
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
:icon="Plus"
|
||||
circle
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['erp:stock:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['erp:stock:export']"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快捷操作 -->
|
||||
<div class="mobile-quick-actions">
|
||||
<el-button
|
||||
size="small"
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['erp:stock:export']"
|
||||
>
|
||||
导出
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 列表内容 -->
|
||||
<div class="mobile-list" v-loading="loading">
|
||||
<div v-if="list.length === 0 && !loading" class="mobile-empty">
|
||||
<el-empty description="暂无数据" />
|
||||
</div>
|
||||
<div v-for="item in list" :key="item.id" class="mobile-card">
|
||||
<div class="mobile-card__header">
|
||||
<span class="mobile-card__name">{{ item.productName }}</span>
|
||||
<span class="mobile-card__badge">库存: {{ erpCountTableColumnFormatter({ count: item.count }) }}</span>
|
||||
</div>
|
||||
<div class="mobile-card__body">
|
||||
<div class="mobile-card__row">
|
||||
<span class="mobile-card__label">产品分类</span>
|
||||
<span class="mobile-card__value">{{ item.categoryName || '-' }}</span>
|
||||
</div>
|
||||
<div class="mobile-card__row">
|
||||
<span class="mobile-card__label">产品单位</span>
|
||||
<span class="mobile-card__value">{{ item.unitName || '-' }}</span>
|
||||
</div>
|
||||
<div class="mobile-card__row">
|
||||
<span class="mobile-card__label">仓库</span>
|
||||
<span class="mobile-card__value">{{ item.warehouseName || '-' }}</span>
|
||||
</div>
|
||||
<div class="mobile-card__row" v-hasPermi="['erp:stock:goods-value']">
|
||||
<span class="mobile-card__label">单价</span>
|
||||
<span class="mobile-card__value">{{ item.unitPrice != null ? item.unitPrice.toFixed(4) : '-' }}</span>
|
||||
</div>
|
||||
<div class="mobile-card__row" v-hasPermi="['erp:stock:goods-value']">
|
||||
<span class="mobile-card__label">货值</span>
|
||||
<span class="mobile-card__value mobile-card__value--price">{{ item.stockValue != null ? item.stockValue.toFixed(4) : '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="产品名称" align="center" prop="productName" />
|
||||
<el-table-column label="产品单位" align="center" prop="unitName" />
|
||||
<el-table-column label="产品分类" align="center" prop="categoryName" />
|
||||
<el-table-column
|
||||
label="库存量"
|
||||
align="center"
|
||||
prop="count"
|
||||
:formatter="erpCountTableColumnFormatter"
|
||||
/>
|
||||
<el-table-column label="仓库" align="center" prop="warehouseName" />
|
||||
<el-table-column label="单价" align="center" prop="unitPrice" v-hasPermi="['erp:stock:goods-value']">
|
||||
<template #default="scope">
|
||||
{{ scope.row.unitPrice != null ? scope.row.unitPrice.toFixed(4) : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="货值" align="center" prop="stockValue" v-hasPermi="['erp:stock:goods-value']">
|
||||
<template #default="scope">
|
||||
{{ scope.row.stockValue != null ? scope.row.stockValue.toFixed(4) : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
<div class="mobile-pagination" v-if="total > 0">
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
:page-sizes="[10, 20]"
|
||||
layout="total, prev, pager, next"
|
||||
:pager-count="5"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 筛选抽屉 -->
|
||||
<el-drawer v-model="showSearch" title="筛选条件" direction="btt" size="50%">
|
||||
<el-form :model="queryParams" ref="queryFormRef" label-position="top">
|
||||
<el-form-item label="产品" prop="productId">
|
||||
<el-select
|
||||
v-model="queryParams.productId"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择产品"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in productList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库" prop="warehouseId">
|
||||
<el-select
|
||||
v-model="queryParams.warehouseId"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择仓库"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in warehouseList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="resetQuery">重置</el-button>
|
||||
<el-button type="primary" @click="handleFilterConfirm">确认筛选</el-button>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Search, Filter, Plus } from '@element-plus/icons-vue'
|
||||
import download from '@/utils/download'
|
||||
import { StockApi, StockVO } from '@/api/erp/stock/stock'
|
||||
import { ProductApi, ProductVO } from '@/api/erp/product/product'
|
||||
@@ -127,6 +157,8 @@ const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
const productList = ref<ProductVO[]>([]) // 产品列表
|
||||
const warehouseList = ref<WarehouseVO[]>([]) // 仓库列表
|
||||
const showSearch = ref(false) // 搜索抽屉显示状态
|
||||
const searchKeyword = ref('') // 搜索关键词
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
@@ -143,12 +175,19 @@ const getList = async () => {
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
showSearch.value = false
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
queryFormRef.value?.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 确认筛选 */
|
||||
const handleFilterConfirm = () => {
|
||||
showSearch.value = false
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
@@ -194,3 +233,115 @@ onMounted(async () => {
|
||||
warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-stock {
|
||||
padding: 12px;
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&__search {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-quick-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mobile-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mobile-empty {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.mobile-card {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: #303133;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #409eff;
|
||||
white-space: nowrap;
|
||||
background: #ecf5ff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&__body {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
&__label {
|
||||
color: #909399;
|
||||
flex-shrink: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
&__value {
|
||||
color: #606266;
|
||||
text-align: right;
|
||||
|
||||
&--price {
|
||||
color: #f56c6c;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-pagination {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
:deep(.el-pagination) {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,84 +1,104 @@
|
||||
<!-- ERP 仓库表单 -->
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="仓库名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入仓库名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库地址" prop="address">
|
||||
<el-input v-model="formData.address" placeholder="请输入仓库地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="仓储费" prop="warehousePrice">
|
||||
<el-input-number
|
||||
v-model="formData.warehousePrice"
|
||||
placeholder="请输入仓储费，单位：元/天/KG"
|
||||
:min="0"
|
||||
:precision="4"
|
||||
class="!w-1/1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="搬运费" prop="truckagePrice">
|
||||
<el-input-number
|
||||
v-model="formData.truckagePrice"
|
||||
placeholder="请输入搬运费，单位：元"
|
||||
:min="0"
|
||||
:precision="4"
|
||||
class="!w-1/1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" prop="principal">
|
||||
<el-input v-model="formData.principal" placeholder="请输入负责人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number
|
||||
v-model="formData.sort"
|
||||
placeholder="请输入排序"
|
||||
:precision="0"
|
||||
class="!w-1/1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
<el-drawer
|
||||
v-model="dialogVisible"
|
||||
:title="dialogTitle"
|
||||
direction="rtl"
|
||||
size="100%"
|
||||
:close-on-press-escape="true"
|
||||
:destroy-on-close="true"
|
||||
:append-to-body="true"
|
||||
class="mobile-form-drawer"
|
||||
>
|
||||
<div class="mobile-form" v-loading="formLoading">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-position="top"
|
||||
>
|
||||
<!-- 基础信息 -->
|
||||
<div class="mobile-form-section">
|
||||
<div class="mobile-form-section__title">基础信息</div>
|
||||
<el-form-item label="仓库名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入仓库名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库地址" prop="address">
|
||||
<el-input v-model="formData.address" placeholder="请输入仓库地址" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" prop="principal">
|
||||
<el-input v-model="formData.principal" placeholder="请输入负责人" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="仓储费" prop="warehousePrice">
|
||||
<el-input-number
|
||||
v-model="formData.warehousePrice"
|
||||
placeholder="请输入仓储费，单位：元/天/KG"
|
||||
:min="0"
|
||||
:precision="4"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="搬运费" prop="truckagePrice">
|
||||
<el-input-number
|
||||
v-model="formData.truckagePrice"
|
||||
placeholder="请输入搬运费，单位：元"
|
||||
:min="0"
|
||||
:precision="4"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 状态信息 -->
|
||||
<div class="mobile-form-section">
|
||||
<div class="mobile-form-section__title">状态信息</div>
|
||||
<el-form-item label="仓库状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number
|
||||
v-model="formData.sort"
|
||||
placeholder="请输入排序"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" :rows="3" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<!-- 底部操作按钮 -->
|
||||
<div class="mobile-form__footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { WarehouseApi, WarehouseVO } from '@/api/erp/stock/warehouse'
|
||||
import { CommonStatusEnum } from '@/utils/constants'
|
||||
|
||||
/** ERP 仓库表单 */
|
||||
defineOptions({ name: 'WarehouseForm' })
|
||||
defineOptions({ name: 'WarehouseFormMobile' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n()
|
||||
const message = useMessage()
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('')
|
||||
const formLoading = ref(false)
|
||||
const formType = ref('')
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
@@ -88,22 +108,20 @@ const formData = ref({
|
||||
principal: undefined,
|
||||
warehousePrice: undefined,
|
||||
truckagePrice: undefined,
|
||||
status: undefined
|
||||
status: CommonStatusEnum.ENABLE
|
||||
})
|
||||
const formRules = reactive({
|
||||
name: [{ required: true, message: '仓库名称不能为空', trigger: 'blur' }],
|
||||
sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
|
||||
status: [{ required: true, message: '仓库状态不能为空', trigger: 'blur' }]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
const formRef = ref()
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
@@ -113,14 +131,11 @@ const open = async (type: string, id?: number) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
defineExpose({ open })
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const emit = defineEmits(['success'])
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
await formRef.value.validate()
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as WarehouseVO
|
||||
@@ -132,14 +147,12 @@ const submitForm = async () => {
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
@@ -155,3 +168,53 @@ const resetForm = () => {
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-form {
|
||||
padding: 12px;
|
||||
}
|
||||
.mobile-form-section {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||||
}
|
||||
.mobile-form-section__title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.mobile-form__footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
padding: 12px 16px;
|
||||
padding-bottom: calc(12px + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
z-index: 10;
|
||||
margin: 0 -12px -12px;
|
||||
|
||||
.el-button {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
:deep(.el-input),
|
||||
:deep(.el-select),
|
||||
:deep(.el-input-number),
|
||||
:deep(.el-date-editor) {
|
||||
width: 100% !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,142 +1,162 @@
|
||||
<!-- ERP 仓库列表 -->
|
||||
<template>
|
||||
<doc-alert title="【库存】产品库存、库存明细" url="https://doc.iocoder.cn/erp/stock/" />
|
||||
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="仓库名称" prop="name">
|
||||
<div class="mobile-warehouse">
|
||||
<!-- 搜索操作栏 -->
|
||||
<div class="mobile-header">
|
||||
<div class="mobile-header__search">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入仓库名称"
|
||||
placeholder="搜索仓库名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
:prefix-icon="Search"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="请选择仓库状态"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
</div>
|
||||
<div class="mobile-header__actions">
|
||||
<el-button :icon="Filter" circle @click="filterVisible = true" />
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
:icon="Plus"
|
||||
circle
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['erp:warehouse:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['erp:warehouse:export']"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" @row-click="handleRowClick">
|
||||
<el-table-column label="仓库名称" align="center" prop="name" />
|
||||
<el-table-column label="仓库地址" align="center" prop="address" />
|
||||
<el-table-column
|
||||
label="仓储费"
|
||||
align="center"
|
||||
prop="warehousePrice"
|
||||
:formatter="erpPriceTableColumnFormatter"
|
||||
/>
|
||||
<el-table-column
|
||||
label="搬运费"
|
||||
align="center"
|
||||
prop="truckagePrice"
|
||||
:formatter="erpPriceTableColumnFormatter"
|
||||
/>
|
||||
<el-table-column label="负责人" align="center" prop="principal" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="排序" align="center" prop="sort" />
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否默认" align="center" prop="defaultStatus">
|
||||
<template #default="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.defaultStatus"
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
@change="handleDefaultStatusChange(scope.row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
sortable
|
||||
/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<!-- 快捷操作 -->
|
||||
<div class="mobile-quick-actions">
|
||||
<el-button
|
||||
size="small"
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['erp:warehouse:export']"
|
||||
>
|
||||
导出
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 仓库卡片列表 -->
|
||||
<div class="mobile-list" v-loading="loading">
|
||||
<div v-if="list.length === 0 && !loading" class="mobile-empty">
|
||||
<el-empty description="暂无仓库" />
|
||||
</div>
|
||||
<div
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="mobile-card"
|
||||
@click="handleCardClick(item)"
|
||||
>
|
||||
<div class="mobile-card__header">
|
||||
<span class="mobile-card__name">{{ item.name || '-' }}</span>
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="item.status" />
|
||||
</div>
|
||||
<div class="mobile-card__body">
|
||||
<div class="mobile-card__row">
|
||||
<span class="mobile-card__label">仓库地址</span>
|
||||
<span class="mobile-card__value">{{ item.address || '-' }}</span>
|
||||
</div>
|
||||
<!-- <div class="mobile-card__row">-->
|
||||
<!-- <span class="mobile-card__label">仓储费</span>-->
|
||||
<!-- <span class="mobile-card__value">{{ erpPriceTableColumnFormatter(item.warehousePrice) }}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="mobile-card__row">-->
|
||||
<!-- <span class="mobile-card__label">搬运费</span>-->
|
||||
<!-- <span class="mobile-card__value">{{ erpPriceTableColumnFormatter(item.truckagePrice) }}</span>-->
|
||||
<!-- </div>-->
|
||||
<div class="mobile-card__row">
|
||||
<span class="mobile-card__label">负责人</span>
|
||||
<span class="mobile-card__value">{{ item.principal || '-' }}</span>
|
||||
</div>
|
||||
<div class="mobile-card__row">
|
||||
<span class="mobile-card__label">备注</span>
|
||||
<span class="mobile-card__value mobile-card__value--ellipsis">{{ item.remark || '无备注' }}</span>
|
||||
</div>
|
||||
<div class="mobile-card__row">
|
||||
<span class="mobile-card__label">排序</span>
|
||||
<span class="mobile-card__value" >{{ item.sort }}</span>
|
||||
</div>
|
||||
<!-- <div class="mobile-card__row">-->
|
||||
<!-- <span class="mobile-card__label">默认</span>-->
|
||||
<!-- <el-switch-->
|
||||
<!-- v-model="item.defaultStatus"-->
|
||||
<!-- :active-value="true"-->
|
||||
<!-- :inactive-value="false"-->
|
||||
<!-- @change.stop="handleDefaultStatusChange(item)"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
<div class="mobile-card__row">
|
||||
<span class="mobile-card__label">创建时间</span>
|
||||
<span class="mobile-card__value">{{ formatDate(item.createTime)}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-card__footer">
|
||||
<el-button
|
||||
link
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
@click.stop="openForm('update', item.id)"
|
||||
v-hasPermi="['erp:warehouse:update']"
|
||||
:disabled="item.name === '-'"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
size="small"
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
@click.stop="handleDelete(item.id)"
|
||||
v-hasPermi="['erp:warehouse:delete']"
|
||||
:disabled="item.name === '-'"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<WarehouseForm ref="formRef" @success="getList" />
|
||||
<!-- 分页 -->
|
||||
<div class="mobile-pagination" v-if="total > 0">
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
:page-sizes="[10, 20]"
|
||||
layout="total, prev, pager, next"
|
||||
:pager-count="5"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 筛选抽屉 -->
|
||||
<el-drawer v-model="filterVisible" title="筛选条件" direction="btt" size="50%">
|
||||
<el-form :model="queryParams" ref="queryFormRef" label-position="top">
|
||||
<el-form-item label="仓库名称" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入仓库名称" clearable style="width:100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择仓库状态" clearable style="width:100%">
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="resetQuery">重置</el-button>
|
||||
<el-button type="primary" @click="handleFilterConfirm">确认筛选</el-button>
|
||||
</template>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<WarehouseForm ref="formRef" @success="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Search, Filter, Plus } from '@element-plus/icons-vue'
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import download from '@/utils/download'
|
||||
@@ -144,25 +164,22 @@ import { WarehouseApi, WarehouseVO } from '@/api/erp/stock/warehouse'
|
||||
import WarehouseForm from './WarehouseForm.vue'
|
||||
import { erpPriceTableColumnFormatter } from '@/utils'
|
||||
|
||||
/** ERP 仓库列表 */
|
||||
defineOptions({ name: 'ErpWarehouse' })
|
||||
defineOptions({ name: 'ErpWarehouseMobile' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<WarehouseVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const loading = ref(true)
|
||||
const list = ref<WarehouseVO[]>([])
|
||||
const total = ref(0)
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: undefined,
|
||||
status: undefined
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
const queryFormRef = ref()
|
||||
const exportLoading = ref(false)
|
||||
const filterVisible = ref(false)
|
||||
const formRef = ref()
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
@@ -174,74 +191,161 @@ const getList = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
queryFormRef.value?.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
const handleFilterConfirm = () => {
|
||||
filterVisible.value = false
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleCardClick = (row: WarehouseVO) => {
|
||||
if (row.name === '-') return
|
||||
openForm('update', row.id)
|
||||
}
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await WarehouseApi.deleteWarehouse(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
message.success('删除成功')
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 行点击操作 */
|
||||
const handleRowClick = (row: WarehouseVO) => {
|
||||
openForm('update', row.id)
|
||||
}
|
||||
/** 修改默认状态 */
|
||||
const handleDefaultStatusChange = async (row: WarehouseVO) => {
|
||||
try {
|
||||
// 修改状态的二次确认
|
||||
const text = row.defaultStatus ? '设置' : '取消'
|
||||
await message.confirm('确认要' + text + '"' + row.name + '"默认吗?')
|
||||
// 发起修改状态
|
||||
await WarehouseApi.updateWarehouseDefaultStatus(row.id, row.defaultStatus)
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch (e) {
|
||||
// 取消后，进行恢复按钮
|
||||
} catch {
|
||||
row.defaultStatus = !row.defaultStatus
|
||||
}
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
// 导出的二次确认
|
||||
await message.exportConfirm()
|
||||
// 发起导出
|
||||
exportLoading.value = true
|
||||
const data = await WarehouseApi.exportWarehouse(queryParams)
|
||||
download.excel(data, '仓库.xls')
|
||||
} catch {
|
||||
} finally {
|
||||
} catch {} finally {
|
||||
exportLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
|
||||
const formatDate = (timestamp?: number) => {
|
||||
if (!timestamp) return '-'
|
||||
const d = new Date(timestamp)
|
||||
const pad = (n: number) => n.toString().padStart(2, '0')
|
||||
return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ` +
|
||||
`${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-warehouse {
|
||||
padding: 12px;
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.mobile-header {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
&__search {
|
||||
flex: 1;
|
||||
}
|
||||
&__actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
.mobile-quick-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.mobile-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.mobile-empty {
|
||||
padding: 40px 0;
|
||||
}
|
||||
.mobile-card {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&__name {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: #303133;
|
||||
}
|
||||
&__body {
|
||||
font-size: 13px;
|
||||
}
|
||||
&__row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 3px 0;
|
||||
}
|
||||
&__label {
|
||||
color: #909399;
|
||||
flex-shrink: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
&__value {
|
||||
color: #606266;
|
||||
text-align: right;
|
||||
&--ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
&__footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
}
|
||||
.mobile-pagination {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
:deep(.el-pagination) {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user