产品id绑定改为code绑定
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="product-select">
|
||||
<el-button type="primary" plain icon="Connection" @click="openDialog">
|
||||
{{ selectedIds.length ? '重新选择产品' : '选择产品' }}
|
||||
{{ selectedCodes.length ? '重新选择产品' : '选择产品' }}
|
||||
</el-button>
|
||||
<span class="ps-summary">
|
||||
已绑定 <b>{{ selectedIds.length }}</b> 个产品
|
||||
<el-button v-if="selectedIds.length" link type="danger" @click="clearSelection">清空</el-button>
|
||||
已绑定 <b>{{ selectedCodes.length }}</b> 个产品
|
||||
<el-button v-if="selectedCodes.length" link type="danger" @click="clearSelection">清空</el-button>
|
||||
</span>
|
||||
|
||||
<el-dialog
|
||||
@@ -46,7 +46,7 @@
|
||||
ref="tableRef"
|
||||
v-loading="loading"
|
||||
:data="filteredList"
|
||||
row-key="productId"
|
||||
row-key="productCode"
|
||||
height="380"
|
||||
border
|
||||
@select="handleSelect"
|
||||
@@ -74,7 +74,7 @@
|
||||
|
||||
<template #footer>
|
||||
<div class="ps-footer">
|
||||
<span>已选 <b>{{ draftIds.size }}</b> 个产品</span>
|
||||
<span>已选 <b>{{ draftCodes.size }}</b> 个产品</span>
|
||||
<div>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="confirmSelection">确定</el-button>
|
||||
@@ -90,7 +90,7 @@ import { ref, reactive, computed, watch, nextTick } from 'vue'
|
||||
import { useProducts } from './useProducts'
|
||||
|
||||
const props = defineProps({
|
||||
/** v-model 绑定值:逗号分隔的产品ID串,如 "3,6" */
|
||||
/** v-model 绑定值:逗号分隔的产品代码串,如 "WSP011,WSP037" */
|
||||
modelValue: { type: [String, Number], default: '' }
|
||||
})
|
||||
const emit = defineEmits(['update:modelValue', 'change'])
|
||||
@@ -100,7 +100,7 @@ const { productList, ensureProducts } = useProducts()
|
||||
const dialogVisible = ref(false)
|
||||
const loading = ref(false)
|
||||
const tableRef = ref(null)
|
||||
const draftIds = reactive(new Set())
|
||||
const draftCodes = reactive(new Set())
|
||||
const queryParams = reactive({
|
||||
productCode: '',
|
||||
productName: '',
|
||||
@@ -109,7 +109,7 @@ const queryParams = reactive({
|
||||
status: ''
|
||||
})
|
||||
|
||||
const selectedIds = computed(() =>
|
||||
const selectedCodes = computed(() =>
|
||||
String(props.modelValue || '').split(',').map(s => s.trim()).filter(Boolean)
|
||||
)
|
||||
|
||||
@@ -133,21 +133,21 @@ function openDialog() {
|
||||
|
||||
function handleOpen() {
|
||||
loading.value = true
|
||||
draftIds.clear()
|
||||
selectedIds.value.forEach(id => draftIds.add(id))
|
||||
draftCodes.clear()
|
||||
selectedCodes.value.forEach(code => draftCodes.add(code))
|
||||
resetQuery(false)
|
||||
// 拉取最新产品后,按 draftIds 全量同步一次勾选(覆盖上次弹窗遗留状态)
|
||||
// 拉取最新产品后,按 draftCodes 全量同步一次勾选(覆盖上次弹窗遗留状态)
|
||||
ensureProducts(true).finally(() => {
|
||||
loading.value = false
|
||||
nextTick(syncSelection)
|
||||
})
|
||||
}
|
||||
|
||||
/** 按 draftIds 同步当前渲染行的勾选状态(draftIds 为唯一数据源,筛选切换不丢选择) */
|
||||
/** 按 draftCodes 同步当前渲染行的勾选状态(draftCodes 为唯一数据源,筛选切换不丢选择) */
|
||||
function syncSelection() {
|
||||
if (!tableRef.value) return
|
||||
filteredList.value.forEach(row => {
|
||||
tableRef.value.toggleRowSelection(row, draftIds.has(String(row.productId)))
|
||||
tableRef.value.toggleRowSelection(row, draftCodes.has(String(row.productCode)))
|
||||
})
|
||||
}
|
||||
|
||||
@@ -158,17 +158,17 @@ watch(filteredList, () => {
|
||||
}, { flush: 'post' })
|
||||
|
||||
function handleSelect(selection, row) {
|
||||
const id = String(row.productId)
|
||||
if (draftIds.has(id)) draftIds.delete(id)
|
||||
else draftIds.add(id)
|
||||
const code = String(row.productCode)
|
||||
if (draftCodes.has(code)) draftCodes.delete(code)
|
||||
else draftCodes.add(code)
|
||||
}
|
||||
|
||||
function handleSelectAll(selection) {
|
||||
// selection 为当前过滤后页面被选中的行;长度>0 表示全选,否则取消全选
|
||||
if (selection.length) {
|
||||
filteredList.value.forEach(row => draftIds.add(String(row.productId)))
|
||||
filteredList.value.forEach(row => draftCodes.add(String(row.productCode)))
|
||||
} else {
|
||||
filteredList.value.forEach(row => draftIds.delete(String(row.productId)))
|
||||
filteredList.value.forEach(row => draftCodes.delete(String(row.productCode)))
|
||||
}
|
||||
}
|
||||
|
||||
@@ -186,10 +186,10 @@ function resetQuery(reload = true) {
|
||||
}
|
||||
|
||||
function confirmSelection() {
|
||||
const ids = Array.from(draftIds)
|
||||
const value = ids.join(',')
|
||||
const codes = Array.from(draftCodes)
|
||||
const value = codes.join(',')
|
||||
emit('update:modelValue', value)
|
||||
emit('change', ids)
|
||||
emit('change', codes)
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
|
||||
@@ -4,23 +4,26 @@ import { listProduct } from '@/api/price/product'
|
||||
/**
|
||||
* 产品列表模块级共享缓存:全应用只拉取一次
|
||||
* 用于客户绑定产品的选择与已绑产品名称/明细回显
|
||||
*
|
||||
* 口径说明:客户绑定关系统一存「产品代码 productCode」逗号串,
|
||||
* 不存产品ID——后续产品从旧库迁移导入时新旧库ID不一致,产品代码两库稳定。
|
||||
*/
|
||||
const productList = ref([])
|
||||
let loadingPromise = null
|
||||
|
||||
/** 逗号分隔 id 串 -> 字符串 id 数组 */
|
||||
export function parseProductIds(value) {
|
||||
/** 逗号分隔 code 串 -> 字符串 code 数组 */
|
||||
export function parseProductCodes(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) {
|
||||
/** code 数组 -> 逗号分隔串(去重,保持原顺序) */
|
||||
export function joinProductCodes(codes) {
|
||||
const seen = new Set()
|
||||
const out = []
|
||||
;(ids || []).forEach(id => {
|
||||
const key = String(id)
|
||||
;(codes || []).forEach(code => {
|
||||
const key = String(code)
|
||||
if (key && !seen.has(key)) {
|
||||
seen.add(key)
|
||||
out.push(key)
|
||||
@@ -45,16 +48,17 @@ export function useProducts() {
|
||||
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 findProduct(productCode) {
|
||||
if (productCode === null || productCode === undefined || productCode === '') return null
|
||||
const code = String(productCode).trim()
|
||||
return productList.value.find(p => String(p.productCode) === code) || null
|
||||
}
|
||||
|
||||
/** 产品展示名:代码 + 名称 */
|
||||
function getProductLabel(productId) {
|
||||
const p = findProduct(productId)
|
||||
if (!p) return String(productId)
|
||||
/** 产品展示名:代码 + 名称;查不到的产品回显原代码(旧库数据/已删除产品不致空白) */
|
||||
function getProductLabel(productCode) {
|
||||
const p = findProduct(productCode)
|
||||
if (!p) return String(productCode)
|
||||
return p.productCode + ' ' + p.productName
|
||||
}
|
||||
|
||||
|
||||
+10
-10
@@ -168,8 +168,8 @@
|
||||
<!-- ============ 绑定产品 ============ -->
|
||||
<el-tab-pane label="绑定产品" name="product">
|
||||
<div class="pane-toolbar">
|
||||
<product-select v-model="form.productIds" />
|
||||
<span class="pane-tip">绑定结果以产品ID逗号串存入客户主表 product_ids,仅用于产品对接映射</span>
|
||||
<product-select v-model="form.productCodes" />
|
||||
<span class="pane-tip">绑定结果以产品代码逗号串存入客户主表 product_codes,产品代码在新旧库间稳定,用于产品对接映射</span>
|
||||
</div>
|
||||
<el-table :data="boundProducts" border size="small" class="bound-table">
|
||||
<el-table-column label="序号" type="index" width="55" align="center" />
|
||||
@@ -192,7 +192,7 @@
|
||||
<el-table-column label="生效日期" prop="effectiveDate" width="110" align="center" />
|
||||
<el-table-column label="操作" width="90" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="danger" size="small" @click="removeProduct(row.productId)">移除</el-button>
|
||||
<el-button link type="danger" size="small" @click="removeProduct(row.productCode)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
@@ -725,7 +725,7 @@ import {
|
||||
import { getToken } from '@/utils/auth'
|
||||
import axios from 'axios'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { useProducts, parseProductIds } from '@/components/ProductSelect/useProducts'
|
||||
import { useProducts, parseProductCodes } from '@/components/ProductSelect/useProducts'
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const route = useRoute()
|
||||
@@ -773,7 +773,7 @@ function buildEmptyForm() {
|
||||
weightThreshold: null,
|
||||
throwRatio: null,
|
||||
creditEd: 0,
|
||||
productIds: null,
|
||||
productCodes: null,
|
||||
attachmentList: [],
|
||||
companyList: [],
|
||||
contactList: [],
|
||||
@@ -788,14 +788,14 @@ const productStatusMap = { 0: '待生效', 1: '已生效', 2: '已失效' }
|
||||
const productStatusTagType = { 0: 'info', 1: 'success', 2: 'danger' }
|
||||
|
||||
const boundProducts = computed(() =>
|
||||
parseProductIds(form.value.productIds)
|
||||
.map(id => findProduct(id))
|
||||
parseProductCodes(form.value.productCodes)
|
||||
.map(code => findProduct(code))
|
||||
.filter(Boolean)
|
||||
)
|
||||
|
||||
function removeProduct(productId) {
|
||||
const ids = parseProductIds(form.value.productIds).filter(id => id !== String(productId))
|
||||
form.value.productIds = ids.join(',')
|
||||
function removeProduct(productCode) {
|
||||
const codes = parseProductCodes(form.value.productCodes).filter(code => code !== String(productCode))
|
||||
form.value.productCodes = codes.join(',')
|
||||
}
|
||||
|
||||
/* ---------------- 套餐绑定(prc_customer_price_set,一客户一套餐) ---------------- */
|
||||
|
||||
@@ -167,10 +167,10 @@
|
||||
<span v-else>{{ scope.row.creditEd }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="isColVisible('productIds')" label="绑定产品" align="center" prop="productIds" min-width="180">
|
||||
<el-table-column v-if="isColVisible('productCodes')" label="绑定产品" align="center" prop="productCodes" min-width="180">
|
||||
<template #default="scope">
|
||||
<span v-if="productNames(scope.row.productIds)" :title="productNames(scope.row.productIds)">
|
||||
{{ productNames(scope.row.productIds) }}
|
||||
<span v-if="productNames(scope.row.productCodes)" :title="productNames(scope.row.productCodes)">
|
||||
{{ productNames(scope.row.productCodes) }}
|
||||
</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
@@ -198,7 +198,7 @@
|
||||
|
||||
<script setup name="Customer">
|
||||
import { listCustomer, delCustomer } from "@/api/customersuppliermanagement/customerinfo/customer.js"
|
||||
import { useProducts, parseProductIds } from '@/components/ProductSelect/useProducts'
|
||||
import { useProducts, parseProductCodes } from '@/components/ProductSelect/useProducts'
|
||||
import { useColumnSettings } from '@/utils/columnSettings'
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
@@ -222,7 +222,7 @@ const columnDefs = [
|
||||
{ key: 'weightThreshold', label: '重量阈值' },
|
||||
{ key: 'throwRatio', label: '抛比' },
|
||||
{ key: 'creditEd', label: '信用额度' },
|
||||
{ key: 'productIds', label: '绑定产品' },
|
||||
{ key: 'productCodes', label: '绑定产品' },
|
||||
{ key: 'remark', label: '备注说明' }
|
||||
]
|
||||
const { colVisible, isColVisible, toggleColumn, resetColumns } = useColumnSettings('customer-info-list', columnDefs)
|
||||
@@ -237,10 +237,10 @@ const total = ref(0)
|
||||
|
||||
const { sys_normal_disable, settlement_type, customer_type } = useDict("sys_normal_disable", "settlement_type", "customer_type")
|
||||
|
||||
/** 绑定产品ID串 -> 产品名称展示(产品代码+名称;查不到的产品回显原ID) */
|
||||
/** 绑定产品代码串 -> 产品名称展示(产品代码+名称;查不到的产品回显原代码) */
|
||||
const { ensureProducts, getProductLabel } = useProducts()
|
||||
function productNames(productIds) {
|
||||
return parseProductIds(productIds).map(id => getProductLabel(id)).join(',')
|
||||
function productNames(productCodes) {
|
||||
return parseProductCodes(productCodes).map(code => getProductLabel(code)).join(',')
|
||||
}
|
||||
ensureProducts()
|
||||
|
||||
@@ -275,7 +275,7 @@ const data = reactive({
|
||||
weightThreshold: undefined,
|
||||
throwRatio: undefined,
|
||||
creditEd: undefined,
|
||||
productIds: undefined,
|
||||
productCodes: undefined,
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user