李红攀：V2.0.001仓库管理
This commit is contained in:
187
src/pages-erp/warehouse/form/index.vue
Normal file
187
src/pages-erp/warehouse/form/index.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<view class="yd-page-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<wd-navbar
|
||||
:title="getTitle"
|
||||
left-arrow placeholder safe-area-inset-top fixed
|
||||
@click-left="handleBack"
|
||||
/>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<view class="pb-180rpx">
|
||||
<wd-form ref="formRef" :model="formData" :rules="formRules">
|
||||
<wd-cell-group title="基础信息" border>
|
||||
<wd-input
|
||||
v-model="formData.name"
|
||||
label="仓库名称"
|
||||
label-width="180rpx"
|
||||
placeholder="请输入仓库名称"
|
||||
prop="name"
|
||||
clearable
|
||||
/>
|
||||
<wd-input
|
||||
v-model="formData.address"
|
||||
label="仓库地址"
|
||||
label-width="180rpx"
|
||||
placeholder="请输入仓库地址"
|
||||
clearable
|
||||
/>
|
||||
<wd-input
|
||||
v-model="formData.principal"
|
||||
label="负责人"
|
||||
label-width="180rpx"
|
||||
placeholder="请输入负责人"
|
||||
clearable
|
||||
/>
|
||||
<wd-input
|
||||
v-model="formData.warehousePrice"
|
||||
label="仓储费"
|
||||
label-width="180rpx"
|
||||
placeholder="请输入仓储费"
|
||||
type="number"
|
||||
clearable
|
||||
/>
|
||||
<wd-input
|
||||
v-model="formData.truckagePrice"
|
||||
label="搬运费"
|
||||
label-width="180rpx"
|
||||
placeholder="请输入搬运费"
|
||||
type="number"
|
||||
clearable
|
||||
/>
|
||||
</wd-cell-group>
|
||||
|
||||
<wd-cell-group title="状态信息" border>
|
||||
<wd-cell title="仓库状态" title-width="180rpx" center>
|
||||
<wd-switch v-model="statusEnabled" />
|
||||
</wd-cell>
|
||||
<wd-input
|
||||
v-model="formData.sort"
|
||||
label="排序"
|
||||
label-width="180rpx"
|
||||
placeholder="请输入排序"
|
||||
type="number"
|
||||
prop="sort"
|
||||
clearable
|
||||
/>
|
||||
<wd-textarea
|
||||
v-model="formData.remark"
|
||||
label="备注"
|
||||
label-width="180rpx"
|
||||
placeholder="请输入备注"
|
||||
:maxlength="200"
|
||||
show-word-limit
|
||||
clearable
|
||||
/>
|
||||
</wd-cell-group>
|
||||
</wd-form>
|
||||
</view>
|
||||
|
||||
<!-- 底部保存按钮 -->
|
||||
<view class="yd-detail-footer">
|
||||
<wd-button
|
||||
type="primary"
|
||||
block
|
||||
:loading="formLoading"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
保存
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { FormInstance } from 'wot-design-uni/components/wd-form/types'
|
||||
import type { Warehouse } from '@/api/erp/warehouse'
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { useToast } from 'wot-design-uni'
|
||||
import { createWarehouse, getWarehouse, updateWarehouse } from '@/api/erp/warehouse'
|
||||
import { navigateBackPlus } from '@/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
id?: number | any
|
||||
}>()
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '',
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
})
|
||||
|
||||
const toast = useToast()
|
||||
const getTitle = computed(() => props.id ? '编辑仓库' : '新增仓库')
|
||||
const formLoading = ref(false)
|
||||
const formData = ref<Warehouse>({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
address: undefined,
|
||||
principal: undefined,
|
||||
warehousePrice: undefined,
|
||||
truckagePrice: undefined,
|
||||
remark: undefined,
|
||||
status: 0,
|
||||
sort: 0,
|
||||
})
|
||||
const formRules = {
|
||||
name: [{ required: true, message: '仓库名称不能为空' }],
|
||||
sort: [{ required: true, message: '排序不能为空' }],
|
||||
}
|
||||
const formRef = ref<FormInstance>()
|
||||
|
||||
// 状态开关
|
||||
const statusEnabled = ref(true)
|
||||
watch(statusEnabled, (val) => {
|
||||
formData.value.status = val ? 0 : 1
|
||||
})
|
||||
watch(() => formData.value.status, (val) => {
|
||||
statusEnabled.value = val === 0
|
||||
})
|
||||
|
||||
/** 返回上一页 */
|
||||
function handleBack() {
|
||||
navigateBackPlus('/pages-erp/warehouse/index')
|
||||
}
|
||||
|
||||
/** 加载详情 */
|
||||
async function getDetail() {
|
||||
if (!props.id) return
|
||||
try {
|
||||
toast.loading('加载中...')
|
||||
formData.value = await getWarehouse(props.id)
|
||||
} finally {
|
||||
toast.close()
|
||||
}
|
||||
}
|
||||
|
||||
/** 提交表单 */
|
||||
async function handleSubmit() {
|
||||
const { valid } = await formRef.value!.validate()
|
||||
if (!valid) return
|
||||
|
||||
formLoading.value = true
|
||||
try {
|
||||
if (props.id) {
|
||||
await updateWarehouse(formData.value)
|
||||
toast.success('修改成功')
|
||||
} else {
|
||||
await createWarehouse(formData.value)
|
||||
toast.success('新增成功')
|
||||
}
|
||||
setTimeout(() => {
|
||||
handleBack()
|
||||
}, 500)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
getDetail()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
276
src/pages-erp/warehouse/index.vue
Normal file
276
src/pages-erp/warehouse/index.vue
Normal file
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<view class="yd-page-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<wd-navbar
|
||||
title="仓库管理"
|
||||
left-arrow placeholder safe-area-inset-top fixed
|
||||
@click-left="handleBack"
|
||||
/>
|
||||
|
||||
<!-- 搜索组件 -->
|
||||
<view @click="searchVisible = true">
|
||||
<wd-search :placeholder="searchPlaceholder" hide-cancel disabled />
|
||||
</view>
|
||||
|
||||
<!-- 仓库列表 -->
|
||||
<view class="px-24rpx">
|
||||
<view
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="mb-20rpx overflow-hidden rounded-12rpx bg-white shadow-sm"
|
||||
@click="handleEdit(item)"
|
||||
>
|
||||
<view class="p-24rpx">
|
||||
<!-- 头部：名称 + 状态 -->
|
||||
<view class="mb-16rpx flex items-center justify-between">
|
||||
<view class="text-30rpx text-[#333] font-semibold">
|
||||
{{ item.name || '-' }}
|
||||
</view>
|
||||
<view class="flex items-center gap-8rpx">
|
||||
<view
|
||||
v-if="item.defaultStatus"
|
||||
class="rounded-8rpx bg-[#e6f7ff] px-12rpx py-4rpx text-22rpx text-[#1890ff]"
|
||||
>
|
||||
默认
|
||||
</view>
|
||||
<view
|
||||
class="rounded-8rpx px-16rpx py-4rpx text-24rpx"
|
||||
:class="item.status === 0 ? 'bg-[#f6ffed] text-[#52c41a]' : 'bg-[#fff1f0] text-[#f5222d]'"
|
||||
>
|
||||
{{ item.status === 0 ? '正常' : '停用' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 仓库地址 -->
|
||||
<view class="mb-8rpx flex items-center justify-between text-26rpx text-[#666]">
|
||||
<text class="text-[#999]">仓库地址</text>
|
||||
<text>{{ item.address || '-' }}</text>
|
||||
</view>
|
||||
<!-- 负责人 -->
|
||||
<view class="mb-8rpx flex items-center justify-between text-26rpx text-[#666]">
|
||||
<text class="text-[#999]">负责人</text>
|
||||
<text>{{ item.principal || '-' }}</text>
|
||||
</view>
|
||||
<!-- 排序 -->
|
||||
<view class="mb-8rpx flex items-center justify-between text-26rpx text-[#666]">
|
||||
<text class="text-[#999]">排序</text>
|
||||
<text>{{ item.sort ?? '-' }}</text>
|
||||
</view>
|
||||
<!-- 备注 -->
|
||||
<view class="flex items-center justify-between text-26rpx text-[#666]">
|
||||
<text class="text-[#999]">备注</text>
|
||||
<text class="ml-16rpx line-clamp-1 text-right" style="max-width: 400rpx;">{{ item.remark || '无备注' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 操作按钮 -->
|
||||
<view class="flex flex-wrap gap-12rpx px-24rpx pb-20rpx" @click.stop>
|
||||
<wd-button
|
||||
v-if="hasAccessByCodes(['erp:warehouse:update']) && item.name !== '-'"
|
||||
size="small" type="primary" plain @click="handleEdit(item)"
|
||||
>
|
||||
编辑
|
||||
</wd-button>
|
||||
<wd-button
|
||||
v-if="hasAccessByCodes(['erp:warehouse:delete']) && item.name !== '-'"
|
||||
size="small" type="error" plain @click="handleDelete(item.id!)"
|
||||
>
|
||||
删除
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<view v-if="loadMoreState !== 'loading' && list.length === 0" class="py-100rpx text-center">
|
||||
<wd-status-tip image="content" tip="暂无仓库数据" />
|
||||
</view>
|
||||
<wd-loadmore
|
||||
v-if="list.length > 0"
|
||||
:state="loadMoreState"
|
||||
@reload="loadMore"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 新增按钮 -->
|
||||
<wd-fab
|
||||
v-if="hasAccessByCodes(['erp:warehouse:create'])"
|
||||
position="right-bottom"
|
||||
type="primary"
|
||||
:expandable="false"
|
||||
@click="handleAdd"
|
||||
/>
|
||||
|
||||
<!-- 搜索弹窗 -->
|
||||
<wd-popup v-model="searchVisible" position="top" @close="searchVisible = false">
|
||||
<view class="yd-search-form-container" :style="{ paddingTop: `${getNavbarHeight()}px` }">
|
||||
<view class="yd-search-form-item">
|
||||
<view class="yd-search-form-label">仓库名称</view>
|
||||
<wd-input v-model="searchForm.name" placeholder="请输入仓库名称" clearable />
|
||||
</view>
|
||||
<view class="yd-search-form-item">
|
||||
<view class="yd-search-form-label">仓库状态</view>
|
||||
<view class="yd-search-form-radio-group">
|
||||
<view
|
||||
v-for="opt in statusOptions"
|
||||
:key="opt.value"
|
||||
class="yd-search-form-radio"
|
||||
:class="{ 'yd-search-form-radio--active': searchForm.status === opt.value }"
|
||||
@click="searchForm.status = opt.value"
|
||||
>
|
||||
{{ opt.label }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="yd-search-form-actions">
|
||||
<wd-button class="flex-1" plain @click="handleReset">重置</wd-button>
|
||||
<wd-button class="flex-1" type="primary" @click="handleSearch">搜索</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Warehouse } from '@/api/erp/warehouse'
|
||||
import type { LoadMoreState } from '@/http/types'
|
||||
import { onReachBottom } from '@dcloudio/uni-app'
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { useToast } from 'wot-design-uni'
|
||||
import { deleteWarehouse, getWarehousePage } from '@/api/erp/warehouse'
|
||||
import { useAccess } from '@/hooks/useAccess'
|
||||
import { getNavbarHeight, navigateBackPlus } from '@/utils'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '',
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
})
|
||||
|
||||
const { hasAccessByCodes } = useAccess()
|
||||
const toast = useToast()
|
||||
const total = ref(0)
|
||||
const list = ref<Warehouse[]>([])
|
||||
const loadMoreState = ref<LoadMoreState>('loading')
|
||||
const queryParams = ref<Record<string, any>>({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
|
||||
// 搜索相关
|
||||
const searchVisible = ref(false)
|
||||
const searchForm = reactive({
|
||||
name: undefined as string | undefined,
|
||||
status: undefined as number | undefined,
|
||||
})
|
||||
|
||||
/** 状态选项 */
|
||||
const statusOptions = [
|
||||
{ value: undefined, label: '全部' },
|
||||
{ value: 0, label: '正常' },
|
||||
{ value: 1, label: '停用' },
|
||||
]
|
||||
|
||||
/** 搜索条件 placeholder */
|
||||
const searchPlaceholder = computed(() => {
|
||||
const conditions: string[] = []
|
||||
if (searchForm.name) conditions.push(`名称:${searchForm.name}`)
|
||||
if (searchForm.status !== undefined) {
|
||||
const statusLabel = statusOptions.find(o => o.value === searchForm.status)?.label
|
||||
if (statusLabel && statusLabel !== '全部') conditions.push(`状态:${statusLabel}`)
|
||||
}
|
||||
return conditions.length > 0 ? conditions.join(' | ') : '搜索仓库'
|
||||
})
|
||||
|
||||
/** 返回上一页 */
|
||||
function handleBack() {
|
||||
navigateBackPlus()
|
||||
}
|
||||
|
||||
/** 查询仓库列表 */
|
||||
async function getList() {
|
||||
loadMoreState.value = 'loading'
|
||||
try {
|
||||
const params = { ...queryParams.value }
|
||||
const data = await getWarehousePage(params)
|
||||
list.value = [...list.value, ...data.list]
|
||||
total.value = data.total
|
||||
loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
|
||||
} catch {
|
||||
queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
|
||||
loadMoreState.value = 'error'
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索 */
|
||||
function handleSearch() {
|
||||
searchVisible.value = false
|
||||
queryParams.value = {
|
||||
...searchForm,
|
||||
pageNo: 1,
|
||||
pageSize: queryParams.value.pageSize,
|
||||
}
|
||||
list.value = []
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置 */
|
||||
function handleReset() {
|
||||
searchForm.name = undefined
|
||||
searchForm.status = undefined
|
||||
searchVisible.value = false
|
||||
queryParams.value = { pageNo: 1, pageSize: 10 }
|
||||
list.value = []
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 加载更多 */
|
||||
function loadMore() {
|
||||
if (loadMoreState.value === 'finished') return
|
||||
queryParams.value.pageNo++
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 新增仓库 */
|
||||
function handleAdd() {
|
||||
uni.navigateTo({ url: '/pages-erp/warehouse/form/index' })
|
||||
}
|
||||
|
||||
/** 编辑 */
|
||||
function handleEdit(item: Warehouse) {
|
||||
if (item.name === '-') return
|
||||
uni.navigateTo({ url: `/pages-erp/warehouse/form/index?id=${item.id}` })
|
||||
}
|
||||
|
||||
/** 删除 */
|
||||
function handleDelete(id: number) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除该仓库吗？',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return
|
||||
try {
|
||||
await deleteWarehouse(id)
|
||||
toast.success('删除成功')
|
||||
list.value = []
|
||||
queryParams.value.pageNo = 1
|
||||
getList()
|
||||
} catch {
|
||||
// error handled by http
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/** 触底加载更多 */
|
||||
onReachBottom(() => {
|
||||
loadMore()
|
||||
})
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user