客户管理编辑页修改
This commit is contained in:
luojiaquan
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="product-select">
|
||||
<el-button type="primary" plain icon="Connection" @click="openDialog">
|
||||
{{ selectedIds.length ? '重新选择产品' : '选择产品' }}
|
||||
</el-button>
|
||||
<span class="ps-summary">
|
||||
已绑定 <b>{{ selectedIds.length }}</b> 个产品
|
||||
<el-button v-if="selectedIds.length" link type="danger" @click="clearSelection">清空</el-button>
|
||||
</span>
|
||||
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
title="选择绑定产品"
|
||||
width="960px"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
@open="handleOpen"
|
||||
>
|
||||
<el-form :inline="true" class="ps-filter" @submit.prevent>
|
||||
<el-form-item label="产品代码">
|
||||
<el-input v-model="queryParams.productCode" placeholder="如 WSP037" clearable style="width: 150px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品名称">
|
||||
<el-input v-model="queryParams.productName" placeholder="产品名称" clearable style="width: 160px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="目的区域">
|
||||
<el-input v-model="queryParams.destRegion" placeholder="如 欧盟" clearable style="width: 120px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="走货属性">
|
||||
<el-input v-model="queryParams.cargoAttr" placeholder="普货/带电等" clearable style="width: 120px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="queryParams.status" placeholder="全部" clearable style="width: 110px">
|
||||
<el-option label="待生效" value="0" />
|
||||
<el-option label="已生效" value="1" />
|
||||
<el-option label="已失效" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
v-loading="loading"
|
||||
:data="filteredList"
|
||||
row-key="productId"
|
||||
height="380"
|
||||
border
|
||||
@select="handleSelect"
|
||||
@select-all="handleSelectAll"
|
||||
>
|
||||
<el-table-column type="selection" width="48" align="center" />
|
||||
<el-table-column label="产品代码" prop="productCode" width="110" show-overflow-tooltip />
|
||||
<el-table-column label="产品名称" prop="productName" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column label="时效等级" prop="serviceLevel" width="90" show-overflow-tooltip />
|
||||
<el-table-column label="走货属性" prop="cargoAttr" width="90" show-overflow-tooltip />
|
||||
<el-table-column label="目的区域" prop="destRegion" width="90" show-overflow-tooltip />
|
||||
<el-table-column label="包税" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.taxMode === 'TAX_INCLUDED'" type="success" size="small">包税</el-tag>
|
||||
<el-tag v-else-if="row.taxMode === 'TAX_EXCLUDED'" type="warning" size="small">不包税</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="statusTagType[row.status] || 'info'" size="small">{{ statusMap[row.status] || '未知' }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<div slot="empty" class="ps-empty">暂无产品数据</div>
|
||||
</el-table>
|
||||
|
||||
<template #footer>
|
||||
<div class="ps-footer">
|
||||
<span>已选 <b>{{ draftIds.size }}</b> 个产品</span>
|
||||
<div>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="confirmSelection">确定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="ProductSelect">
|
||||
import { ref, reactive, computed, watch, nextTick } from 'vue'
|
||||
import { useProducts } from './useProducts'
|
||||
|
||||
const props = defineProps({
|
||||
/** v-model 绑定值：逗号分隔的产品ID串，如 "3,6" */
|
||||
modelValue: { type: [String, Number], default: '' }
|
||||
})
|
||||
const emit = defineEmits(['update:modelValue', 'change'])
|
||||
|
||||
const { productList, ensureProducts } = useProducts()
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const loading = ref(false)
|
||||
const tableRef = ref(null)
|
||||
const draftIds = reactive(new Set())
|
||||
const queryParams = reactive({
|
||||
productCode: '',
|
||||
productName: '',
|
||||
destRegion: '',
|
||||
cargoAttr: '',
|
||||
status: ''
|
||||
})
|
||||
|
||||
const selectedIds = computed(() =>
|
||||
String(props.modelValue || '').split(',').map(s => s.trim()).filter(Boolean)
|
||||
)
|
||||
|
||||
const statusMap = { 0: '待生效', 1: '已生效', 2: '已失效' }
|
||||
const statusTagType = { 0: 'info', 1: 'success', 2: 'danger' }
|
||||
|
||||
const filteredList = computed(() => {
|
||||
return productList.value.filter(p => {
|
||||
if (queryParams.productCode && !(p.productCode || '').toLowerCase().includes(queryParams.productCode.trim().toLowerCase())) return false
|
||||
if (queryParams.productName && !(p.productName || '').includes(queryParams.productName.trim())) return false
|
||||
if (queryParams.destRegion && !(p.destRegion || '').includes(queryParams.destRegion.trim())) return false
|
||||
if (queryParams.cargoAttr && !(p.cargoAttr || '').includes(queryParams.cargoAttr.trim())) return false
|
||||
if (queryParams.status !== '' && queryParams.status !== null && queryParams.status !== undefined && String(p.status) !== String(queryParams.status)) return false
|
||||
return true
|
||||
})
|
||||
})
|
||||
|
||||
function openDialog() {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
function handleOpen() {
|
||||
loading.value = true
|
||||
draftIds.clear()
|
||||
selectedIds.value.forEach(id => draftIds.add(id))
|
||||
resetQuery(false)
|
||||
// 拉取最新产品后，按 draftIds 全量同步一次勾选（覆盖上次弹窗遗留状态）
|
||||
ensureProducts(true).finally(() => {
|
||||
loading.value = false
|
||||
nextTick(syncSelection)
|
||||
})
|
||||
}
|
||||
|
||||
/** 按 draftIds 同步当前渲染行的勾选状态（draftIds 为唯一数据源，筛选切换不丢选择） */
|
||||
function syncSelection() {
|
||||
if (!tableRef.value) return
|
||||
filteredList.value.forEach(row => {
|
||||
tableRef.value.toggleRowSelection(row, draftIds.has(String(row.productId)))
|
||||
})
|
||||
}
|
||||
|
||||
/** 数据/筛选变化后同步表格勾选状态 */
|
||||
watch(filteredList, () => {
|
||||
if (!dialogVisible.value) return
|
||||
nextTick(syncSelection)
|
||||
}, { flush: 'post' })
|
||||
|
||||
function handleSelect(selection, row) {
|
||||
const id = String(row.productId)
|
||||
if (draftIds.has(id)) draftIds.delete(id)
|
||||
else draftIds.add(id)
|
||||
}
|
||||
|
||||
function handleSelectAll(selection) {
|
||||
// selection 为当前过滤后页面被选中的行；长度>0 表示全选，否则取消全选
|
||||
if (selection.length) {
|
||||
filteredList.value.forEach(row => draftIds.add(String(row.productId)))
|
||||
} else {
|
||||
filteredList.value.forEach(row => draftIds.delete(String(row.productId)))
|
||||
}
|
||||
}
|
||||
|
||||
function handleQuery() {
|
||||
// 纯前端过滤（全量已缓存），watch filteredList 自动同步勾选
|
||||
}
|
||||
|
||||
function resetQuery(reload = true) {
|
||||
queryParams.productCode = ''
|
||||
queryParams.productName = ''
|
||||
queryParams.destRegion = ''
|
||||
queryParams.cargoAttr = ''
|
||||
queryParams.status = ''
|
||||
if (reload) ensureProducts(true)
|
||||
}
|
||||
|
||||
function confirmSelection() {
|
||||
const ids = Array.from(draftIds)
|
||||
const value = ids.join(',')
|
||||
emit('update:modelValue', value)
|
||||
emit('change', ids)
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
function clearSelection() {
|
||||
emit('update:modelValue', '')
|
||||
emit('change', [])
|
||||
}
|
||||
|
||||
/** 供父组件预加载产品缓存（tab 内明细表格使用） */
|
||||
defineExpose({ ensureProducts })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.product-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.ps-summary {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
.ps-summary b {
|
||||
color: #409eff;
|
||||
font-size: 15px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
.ps-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.ps-footer b {
|
||||
color: #409eff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
import { ref } from 'vue'
|
||||
import { listProduct } from '@/api/price/product'
|
||||
|
||||
/**
|
||||
* 产品列表模块级共享缓存：全应用只拉取一次
|
||||
* 用于客户绑定产品的选择与已绑产品名称/明细回显
|
||||
*/
|
||||
const productList = ref([])
|
||||
let loadingPromise = null
|
||||
|
||||
/** 逗号分隔 id 串 -> 字符串 id 数组 */
|
||||
export function parseProductIds(value) {
|
||||
if (Array.isArray(value)) return value.map(v => String(v)).filter(Boolean)
|
||||
if (value === null || value === undefined) return []
|
||||
return String(value).split(',').map(s => s.trim()).filter(Boolean)
|
||||
}
|
||||
|
||||
/** id 数组 -> 逗号分隔串（去重，保持原顺序） */
|
||||
export function joinProductIds(ids) {
|
||||
const seen = new Set()
|
||||
const out = []
|
||||
;(ids || []).forEach(id => {
|
||||
const key = String(id)
|
||||
if (key && !seen.has(key)) {
|
||||
seen.add(key)
|
||||
out.push(key)
|
||||
}
|
||||
})
|
||||
return out.join(',')
|
||||
}
|
||||
|
||||
export function useProducts() {
|
||||
/** 确保产品列表已加载（force=true 强制刷新），拉取全部状态以便回显已失效产品 */
|
||||
function ensureProducts(force = false) {
|
||||
if (!force && loadingPromise) return loadingPromise
|
||||
if (!force && productList.value.length) return Promise.resolve(productList.value)
|
||||
loadingPromise = listProduct({ pageNum: 1, pageSize: 1000 })
|
||||
.then(res => {
|
||||
productList.value = res.rows || []
|
||||
return productList.value
|
||||
})
|
||||
.finally(() => {
|
||||
loadingPromise = null
|
||||
})
|
||||
return loadingPromise
|
||||
}
|
||||
|
||||
/** 按产品ID查产品对象 */
|
||||
function findProduct(productId) {
|
||||
if (productId === null || productId === undefined || productId === '') return null
|
||||
return productList.value.find(p => String(p.productId) === String(productId)) || null
|
||||
}
|
||||
|
||||
/** 产品展示名：代码 + 名称 */
|
||||
function getProductLabel(productId) {
|
||||
const p = findProduct(productId)
|
||||
if (!p) return String(productId)
|
||||
return p.productCode + ' ' + p.productName
|
||||
}
|
||||
|
||||
return {
|
||||
productList,
|
||||
ensureProducts,
|
||||
findProduct,
|
||||
getProductLabel
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user