261 lines
8.0 KiB
Vue
261 lines
8.0 KiB
Vue
|
<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="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 class="mb-8rpx flex items-center justify-between text-26rpx text-[#666]">
|
|||
|
|
<text class="text-[#999]">联系人</text>
|
|||
|
|
<text>{{ item.contact || '-' }}</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- 手机号码 -->
|
|||
|
|
<view class="mb-8rpx flex items-center justify-between text-26rpx text-[#666]">
|
|||
|
|
<text class="text-[#999]">手机号码</text>
|
|||
|
|
<text>{{ item.mobile || '-' }}</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- 联系电话 -->
|
|||
|
|
<view class="mb-8rpx flex items-center justify-between text-26rpx text-[#666]">
|
|||
|
|
<text class="text-[#999]">联系电话</text>
|
|||
|
|
<text>{{ item.telephone || '-' }}</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- 电子邮箱 -->
|
|||
|
|
<view class="mb-8rpx flex items-center justify-between text-26rpx text-[#666]">
|
|||
|
|
<text class="text-[#999]">电子邮箱</text>
|
|||
|
|
<text>{{ item.email || '-' }}</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:supplier:update']) && item.name !== '-'"
|
|||
|
|
size="small" type="primary" plain @click="handleEdit(item)"
|
|||
|
|
>
|
|||
|
|
编辑
|
|||
|
|
</wd-button>
|
|||
|
|
<wd-button
|
|||
|
|
v-if="hasAccessByCodes(['erp:supplier: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:supplier: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>
|
|||
|
|
<wd-input v-model="searchForm.mobile" placeholder="请输入手机号码" clearable />
|
|||
|
|
</view>
|
|||
|
|
<view class="yd-search-form-item">
|
|||
|
|
<view class="yd-search-form-label">联系电话</view>
|
|||
|
|
<wd-input v-model="searchForm.telephone" placeholder="请输入联系电话" clearable />
|
|||
|
|
</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 { Supplier } from '@/api/erp/supplier'
|
|||
|
|
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 { deleteSupplier, getSupplierPage } from '@/api/erp/supplier'
|
|||
|
|
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<Supplier[]>([])
|
|||
|
|
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,
|
|||
|
|
mobile: undefined as string | undefined,
|
|||
|
|
telephone: undefined as string | undefined,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
/** 搜索条件 placeholder */
|
|||
|
|
const searchPlaceholder = computed(() => {
|
|||
|
|
const conditions: string[] = []
|
|||
|
|
if (searchForm.name) conditions.push(`名称:${searchForm.name}`)
|
|||
|
|
if (searchForm.mobile) conditions.push(`手机:${searchForm.mobile}`)
|
|||
|
|
if (searchForm.telephone) conditions.push(`电话:${searchForm.telephone}`)
|
|||
|
|
return conditions.length > 0 ? conditions.join(' | ') : '搜索供应商'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
/** 返回上一页 */
|
|||
|
|
function handleBack() {
|
|||
|
|
navigateBackPlus()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 查询供应商列表 */
|
|||
|
|
async function getList() {
|
|||
|
|
loadMoreState.value = 'loading'
|
|||
|
|
try {
|
|||
|
|
const params = { ...queryParams.value }
|
|||
|
|
const data = await getSupplierPage(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.mobile = undefined
|
|||
|
|
searchForm.telephone = 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/supplier/form/index' })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 编辑 */
|
|||
|
|
function handleEdit(item: Supplier) {
|
|||
|
|
if (item.name === '-') return
|
|||
|
|
uni.navigateTo({ url: `/pages-erp/supplier/form/index?id=${item.id}` })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 删除 */
|
|||
|
|
function handleDelete(id: number) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确定要删除该供应商吗？',
|
|||
|
|
success: async (res) => {
|
|||
|
|
if (!res.confirm) return
|
|||
|
|
try {
|
|||
|
|
await deleteSupplier(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>
|